/* GB Report editor styles - blue clinical theme (original hue, horizontal header) */
:root{
  --gb-blue:#007f99;          /* Xanh y khoa cũ */
  --gb-blue-2:#0a7ea4;
  --gb-blue-light:#ffffff;
  --gb-contrast:#0b3a47;
  --color-vao:#ecfeff;
}
html, body {
  scroll-behavior: auto !important;
}


/* ===== FORM TỔNG QUAN ===== */

.gb-row{
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  margin-bottom:4px;
}

.gb-row label{
  flex:1;
  min-width:150px;
}
.gb-datepicker{
    border:1px solid #c5d2dc !important;
    border-radius:4px;
    background:#f3f7fa !important;
}
.gb-calendar-icon{
    font-size:22px;
}
.gb-row input,
.gb-row select,
.gb-row textarea{

    width:100%;
    padding:8px;

    background:#f3f7fa !important;

    border:1px solid #c5d2dc !important;

    border-radius:8px;

    color:#111827;

    box-shadow:
        inset 0 1px 2px rgba(0,0,0,.03);

    transition:
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

/* focus */

.gb-row input:focus,
.gb-row select:focus,
.gb-row textarea:focus{

    background:#ffffff !important;

    border-color:#0f766e !important;

    box-shadow:
        0 0 0 3px rgba(15,118,110,.12);

    outline:none;
}




/* ===== KHỐI BỆNH NHÂN NHẸ – KHÔNG VIỀN ===== */
.gb-patient{
    border-radius: 8px;
    padding: 8px 8px;
    margin-bottom: 8px;

    /* bóng rất nhẹ để tách khối */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}


.button{
  background:var(--gb-blue);
  color:#fff;
  padding:8px 12px;
  border:none;
  border-radius:8px;
  cursor:pointer;
  margin-right:6px;
}

.button:hover{opacity:0.95;}
/* ===== LIST REPORT TABLE ===== */
.gb-table{
  width:100%;
  border-collapse:collapse;
  margin-top:8px;
}

.gb-table th,
.gb-table td{
  border:1px solid #e6f2f3;
  padding:10px;
  text-align:left;
}

.gb-table th{
  background:linear-gradient(90deg,var(--gb-blue-light),#f2fbfc);
  color:var(--gb-contrast);
}

.gb-table tbody tr{
    transition: background .15s ease;
}

/* dòng xen kẽ */
.gb-table tbody tr:nth-child(even){
    background:#f8fbfd;
}

/* hover */
.gb-table tbody tr:hover{
    background:#7dd3fc !important;
}

/* chữ đậm hơn khi hover */
.gb-table tbody tr:hover td{
    color:#000;
    
}

/* line phân cách rõ hơn */
.gb-table tbody td{
    border-bottom:1px solid #d9e7ee;
}


#gb-report-form #gb-patients .gb-patient{
    transition: background 0.2s ease, border-left 0.2s ease;
    border-left: 6px solid transparent;
}

/* ===== FORM NHẬP LIỆU PHẲNG ===== */

#gb-report-form #gb-patients .gb-patient{

    background:#eef2f7;

    border:1px solid #d7dee7;

    border-radius:10px;

    box-shadow:
        0 2px 6px rgba(0,0,0,.05);
}

/* ===== HEADER FORM ===== */

#gb-report-form #gb-patients .gb-patient-head{

    min-height:20px;

    padding:6px 8px;

    border-radius:4px;

    color:#111827;

    border:1px solid transparent;

    display:flex;

    align-items:center;

    gap:8px;

    font-weight:600;
}

/* ===== VÀO ===== */
#gb-report-form #gb-patients .gb-patient[data-loai="vào"] .gb-patient-head{
    background:#e3f4f0;
border-color:#b7ddd5;

color:#134e4a;
}

/* ===== CHUYỂN ĐẾN ===== */
#gb-report-form #gb-patients .gb-patient[data-loai="chuyển đến"] .gb-patient-head{
    background:#4f8fb3;
    border-color:#417a99;

    color:#ffffff;
}

/* ===== CHUYỂN KHOA ===== */
#gb-report-form #gb-patients .gb-patient[data-loai="chuyển khoa"] .gb-patient-head{
    background:#8b5cf6;
    border-color:#7c3aed;

    color:#ffffff;
}

/* ===== THEO DÕI ===== */
#gb-report-form #gb-patients .gb-patient[data-loai="theo dõi"] .gb-patient-head{
    background:#eab308;
    border-color:#ca8a04;

    color:#111827;
}

/* ===== NẶNG XIN VỀ ===== */
#gb-report-form #gb-patients .gb-patient[data-loai="nặng xin về"] .gb-patient-head{
    background:#ef4444;
    border-color:#dc2626;

    color:#ffffff;
}

/* ===== TỬ VONG ===== */
#gb-report-form #gb-patients .gb-patient[data-loai="tử vong"] .gb-patient-head{
    background:#cfd6de;
border-color:#aeb8c5;

color:#2f3a46;
}
/* ===== VÀO VÀ TỬ VONG ===== */
#gb-report-form #gb-patients .gb-patient[data-loai="vào và tử vong"] .gb-patient-head{
    background:#ddd6fe;
    border-color:#8b5cf6;
    color:#4c1d95;
}
/* ===== KHÁC ===== */
#gb-report-form #gb-patients .gb-patient[data-loai="khác"] .gb-patient-head{
    background:#0f766e;
    border-color:#0b5f59;
    color:#ffffff;
}
/* ===== LỌC MÁU ===== */
#gb-report-form #gb-patients .gb-patient[data-loai="lọc máu"] .gb-patient-head{

    background:#0c4a6e;

    border-color:#075985;

    color:#ffffff;
}

.gb-patient[data-loai="lọc máu"]{

    background:#f0f9ff;

    border-left:6px solid #0c4a6e !important;
}
.bn-stt {
    font-size: 14px;
}

.bn-stt-input {
    width: 100px;
    text-align: center;
    font-weight: bold;
    border: 1px solid #999;
    border-radius: 4px;
    margin-left: 4px;
}
.gb-patient[data-loai="khác"]{
    background: var(--color-vao);
}

.gb-action-row {
    display: flex;
    justify-content: space-between; /* trái – phải */
    align-items: center;
    margin: 16px 0 24px;
    gap: 12px;
}

.gb-action-row .button {
    padding: 10px 18px;
    font-size: 15px;
    border-radius: 6px;
}

/* Nút thêm BN */
.btn-add {
    background: #e0f2fe;
    border: 1px solid #3b82f6;
    color: #1d4ed8;
}

/* Nút lưu */
.btn-save {
    background: #16a34a;
    color: #fff;
    font-weight: 600;
}



.gb-action-buttons{
    white-space:nowrap;
    
}
.gb-action-buttons .button{
    margin-right:4px;
    padding:4px 8px;

    font-size:13px ;

    min-height:auto ;

    line-height:1.2 ;

    border-radius:6px ;
}
.gb-table th:last-child,
.gb-table td:last-child{
    white-space:nowrap;
    text-align:center;
   
}
.gb-table td:last-child{
    padding-left:12px;
}
/* thời gian cập nhật */
.col-updated{
    font-size:12px;
    color:#0ea5e9;
    white-space:nowrap;
}
/* Nút xóa bệnh nhân */
.gb-remove-patient{
  background-color:#e53935;
  color:#fff;
  border:none;
  padding:2px 8px;
  margin-left:6px;
  border-radius:6px;
  cursor:pointer;
  font-size:18px;
  line-height:1;
  transition:background-color 0.2s ease;
}

.gb-remove-patient:hover{background-color:#c62828;}

.gb-remove-patient:active{animation:shake 0.2s linear;}

.bn-stt{color: red;font-weight:bold;}

@keyframes shake {
  0% {transform:translateX(0);}
  25% {transform:translateX(-2px);}
  50% {transform:translateX(2px);}
  75% {transform:translateX(-2px);}
  100% {transform:translateX(0);}
}

/* Nút xóa báo cáo */
.gb-delete-report.button{
  background-color:#e53935;
  color:#fff;
  border:none;
  padding:6px 12px;
  border-radius:4px;
  cursor:pointer;
  transition:all 0.2s ease;
}

.gb-delete-report.button:hover{background-color:#c62828;}
.gb-delete-report.button:active{transform:scale(0.96);}


/* HEADER chung */
.gb-patient-card .pc-header {
    padding: 6px 10px;
    border-radius: 4px;
    font-weight: 600;
}
/* Mặc định cho tất cả textarea */
textarea.highlight-field{

    background:#ffffff !important;

    border:1px solid #d1d5db;

    color:#111827;

    border-radius:8px;

    box-shadow:none;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;

    width:100%;

    padding:8px;

    resize:vertical;

    overflow-y:auto;

    font-family:inherit;

    line-height:1.45;

    box-sizing:border-box;
}

/* chiều cao riêng */
textarea.field-kham{
    height:160px;
}
.gb-patient[data-loai="khác"] textarea[name="kham_lam_sang"]{
    min-height:320px !important;
}
textarea.field-diagnosis{
    height:60px;
}
/* Ô bệnh sử cao hơn */
textarea[name="kham_lam_sang"]{
    min-height: 140px;
}
/* focus */
textarea.highlight-field:focus{

    background:#ffffff !important;

    border-color:#0f766e !important;

    box-shadow:
        0 0 0 3px rgba(15,118,110,.20);

    outline:none;
}
.gb-patient select{

    background-color:#ffffff !important;

    color:#111827 !important;

    border:1px solid #d1d5db;

    border-radius:8px;

    padding:8px 10px;

    appearance:none;

    -webkit-appearance:none;

    -moz-appearance:none;

    box-shadow:none;

    outline:none;
}

.gb-patient select:focus{

    background-color:#ffffff !important;

    color:#111827 !important;

    border-color:#0f766e !important;

    box-shadow:
        0 0 0 3px rgba(15,118,110,.16);

    outline:none;
}
/* ===== INPUT ===== */

.gb-patient input{

    background-color:#ffffff !important;

    color:#111827 !important;

    border:1px solid #d1d5db;

    border-radius:8px;

    padding:8px 10px;

    box-shadow:none;

    outline:none;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}

/* focus */

.gb-patient input:focus{

    background-color:#ffffff !important;

    border-color:#0f766e !important;

    box-shadow:
        0 0 0 3px rgba(15,118,110,.16);

    outline:none;
}


/* Chữ đỏ đậm cho "BÁO CÁO BỆNH NHÂN" */
.label-bao-cao {
    color: #d00000;     /* đỏ đậm */
    font-weight: 700;   /* đậm */
}

/* Chữ xanh cho "HỌ TÊN" */
.label-ho-ten {
    color: #0077cc;     /* xanh đậm */
    font-weight: 700;
}
/* ===== HỌ TÊN THEO LOẠI ===== */

/* vào */
#gb-report-form #gb-patients .gb-patient[data-loai="vào"] .label-ho-ten{
    color:#115e59;
}

/* chuyển đến */
#gb-report-form #gb-patients .gb-patient[data-loai="chuyển đến"] .label-ho-ten{
    color:#1d4ed8;
}

/* chuyển khoa */
#gb-report-form #gb-patients .gb-patient[data-loai="chuyển khoa"] .label-ho-ten{
    color:#6d28d9;
}

/* theo dõi */
#gb-report-form #gb-patients .gb-patient[data-loai="theo dõi"] .label-ho-ten{
    color:#a16207;
}

/* nặng xin về */
#gb-report-form #gb-patients .gb-patient[data-loai="nặng xin về"] .label-ho-ten{
    color:#b91c1c;
}

/* tử vong */
#gb-report-form #gb-patients .gb-patient[data-loai="tử vong"] .label-ho-ten{
    color:#4b5563;
}
/* lọc máu */
#gb-report-form #gb-patients .gb-patient[data-loai="lọc máu"] .label-ho-ten{
    color:#0c4a6e;
}

#gb-report-form #gb-patients .gb-patient[data-loai="lọc máu"] .label-title{
    color:#0c4a6e;
}
.gb-patient[data-loai="lọc máu"]:not(.open) .summary-ten,
.gb-patient[data-loai="lọc máu"]:not(.open) .summary-loai{
    color:#fff;
}

.label-title{

    font-weight:700;

    color:#374151;
}
/* ===== LABEL THEO LOẠI BN ===== */

/* vào */
#gb-report-form #gb-patients .gb-patient[data-loai="vào"] .label-title{
    color:#115e59;
}

/* chuyển đến */
#gb-report-form #gb-patients .gb-patient[data-loai="chuyển đến"] .label-title{
    color:#1d4ed8;
}

/* chuyển khoa */
#gb-report-form #gb-patients .gb-patient[data-loai="chuyển khoa"] .label-title{
    color:#6d28d9;
}

/* theo dõi */
#gb-report-form #gb-patients .gb-patient[data-loai="theo dõi"] .label-title{
    color:#a16207;
}

/* nặng xin về */
#gb-report-form #gb-patients .gb-patient[data-loai="nặng xin về"] .label-title{
    color:#b91c1c;
}

/* tử vong */
#gb-report-form #gb-patients .gb-patient[data-loai="tử vong"] .label-title{
    color:#4b5563;
}

/* Header danh sách báo cáo */

.gb-list-header h3{
    margin: 0;
}

/* Nút tạo báo cáo mới */
.gb-btn-new{
    font-weight: 600;
    padding: 6px 14px;
}
/* ===== TIÊU ĐỀ DASHBOARD: BÁO CÁO GIAO BAN ===== */
#gb-report-app > h2{
    text-align: center;
    text-transform: uppercase;     /* CHỮ HOA */
    color: var(--gb-blue);          /* Xanh y khoa chuẩn */
    font-weight: 700;
    font-size: 30px;
    letter-spacing: 1.2px;
    margin: 0 0 16px;
    position: relative;
    padding-bottom: 10px;
}
#gb-report-app{
    width:min(96vw, 1600px);

    margin:0 auto;

    padding:0 16px;

    box-sizing:border-box;
}
/* Đường kẻ mảnh dưới tiêu đề */
#gb-report-app > h2::after{
    content: "";
    display: block;
    width: 180px;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--gb-blue),
        transparent
    );
    margin: 8px auto 0;
}
/* ===== TIÊU ĐỀ DANH SÁCH BÁO CÁO ===== */
#gb-report-app .gb-report-list-title,
#gb-report-app h3{
    text-transform: uppercase;     /* IN HOA */
    color: var(--gb-blue);          /* Xanh y khoa */
    font-weight: 600;
    letter-spacing: 0.8px;
    margin-bottom: 12px;
}
/* Header danh sách báo cáo – canh đúng cột */
/* ===== HEADER DANH SÁCH ===== */

.gb-list-header{
    display:grid;
    grid-template-columns: 1fr 300px; /* 140 = cột hành động */
    align-items:center;
    padding:0 4px;
    gap:12px;
    margin-bottom:12px;
}

/* title */
.gb-list-title h3{
    margin:0;

    text-transform:uppercase;
    color:var(--gb-blue);

    font-weight:700;
    letter-spacing:.5px;
}

/* cột action */
.gb-list-action{
    width:300px;

    display:flex;
    justify-content:center;
    align-items:center;
}

/* nút */
.gb-btn-new{
    width:90%;
    margin:0;
}

/* bảng */
.gb-table th:last-child,
.gb-table td:last-child{
    width:300px;
    text-align:center;
}

/* Nút Tạo báo cáo mới – gắn NEW ⚡ */
#gb-new-report{
    position: relative;
}

/* Badge NEW */
#gb-new-report::after{
    content: "NEW ⚡";
    position: absolute;
    top: -8px;
    right: -10px;

    background: #facc15;      /* vàng y khoa */
    color: #7c2d12;           /* nâu đậm dễ đọc */
    font-size: 11px;
    font-weight: 700;

    padding: 2px 6px;
    border-radius: 10px;
    line-height: 1;

    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    pointer-events: none;     /* không ảnh hưởng click */
}
/* ==============================
   PATIENT COLLAPSE / EXPAND
============================== */

/* ===== BODY ===== */
.gb-patient-body{
    display:none;
}

.gb-patient.open .gb-patient-body{
    display:block;
}

/* ===== SUMMARY (Loại + Tên) – CHỈ DÙNG KHI CO ===== */


/* LOẠI – TÍM */
.gb-patient:not(.open) .summary-loai{
    color: #7c3aed;
    font-weight: 600;
    white-space: nowrap;
}

/* DẤU PHÂN CÁCH */
.gb-patient:not(.open) .summary-sep{
    opacity: 0.35;
    margin: 0 6px;            /* ⬅️ GIÃN RIÊNG DẤU | */
}

/* HỌ TÊN – XANH, IN HOA */
.summary-bc{
    color:#000;
    font-weight:600;
    margin-right:6px;
}
.summary-ten{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gb-patient:not(.open) .summary-ten{
    color: #2563eb;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;   /* ⬅️ GIÃN CHỮ */
}
/* chỉ nền tối mới đổi trắng */
/* nền tối -> chữ trắng */
.gb-patient[data-loai="chuyển đến"]:not(.open) .summary-ten,
.gb-patient[data-loai="chuyển khoa"]:not(.open) .summary-ten,
.gb-patient[data-loai="khác"]:not(.open) .summary-ten,
.gb-patient[data-loai="nặng xin về"]:not(.open) .summary-ten,

.gb-patient[data-loai="chuyển đến"]:not(.open) .summary-loai,
.gb-patient[data-loai="chuyển khoa"]:not(.open) .summary-loai,
.gb-patient[data-loai="khác"]:not(.open) .summary-loai,
.gb-patient[data-loai="nặng xin về"]:not(.open) .summary-loai{
    color:#fff;
}
/* CO → hiện summary */
/* ===== SUMMARY LINE ===== */
.gb-summary-line{
    margin:6px 0;
}

/* CO */
.gb-patient:not(.open) .gb-summary-line{
    display:flex;
    align-items:center;
    gap:6px;
    margin-left:6px;
}

/* MỞ */
.gb-patient.open .gb-summary-line{

    display:block;

    position:absolute;

    top:2px;

    right:8px;

    margin:0;
}
.gb-patient-head{
    position:relative;
}
.gb-patient.open .bn-stt{

    position:absolute;

    top:2px;

    right:8px;

    color:#dc2626 !important;

    font-weight:700;

    font-size:13px;
}
.gb-patient.open .bn-stt-input{

    color:#dc2626 !important;

    font-weight:700;

    border:1px solid #dc2626 !important;

    text-align:center;
}
.gb-patient.open .summary-bc,
.gb-patient.open .summary-loai,
.gb-patient.open .summary-ten,
.gb-patient.open .summary-sep{

    display:none;
}
/* ===== HEADER ===== */
.gb-patient-head{
    min-height:28px;
    background:#f3f4f6;
    padding:3px 5px;
    border-radius:6px;
    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:6px;

    flex-wrap:wrap;
}

.gb-patient-body{
    padding-top:4px;
}

/* Input STT */
.bn-stt-input{
height: 22px;
padding: 0 4px;
font-size: 12px;
}
.gb-patient.open .gb-patient-head{
  min-height:0 ;
    padding:0 ;
    background:transparent ;
}
.loai-row{
    display:flex;
    align-items:center;
    gap:6px;
}

.loai-row select{
    flex:1;
}


/* ===== NÚT XOÁ + STT ===== */

/* CO → ẩn hoàn toàn */
.gb-patient:not(.open) .gb-remove-patient,
.gb-patient:not(.open) .bn-stt{
color: transparent; /* ẩn chữ "SỐ THỨ TỰ" */
}
/* nhưng input STT vẫn hiện */
.gb-patient:not(.open) .bn-stt input{
color: #111827; /* hiện số */
}

/* MỞ → hiện lại */

.gb-patient.open .bn-stt{
color: #111827;
}
.gb-multi-sep{
    width:100%;
    height:40px;
    margin:30px 0;
    border-radius:5;
 text-align: center;
    color: red;
    font-size: 50px;
    font-weight: 700;
   background: linear-gradient(
        to bottom,
        #dc2626 0%,
        #dc2626 25%,

        #ffffff 25%,
        #ffffff 50%,

        #0ea5e9 50%,
        #0ea5e9 100%
    ) !important;
}
/* FULL màn hình + căn giữa chữ */
.gb-multi-sep.custom-footer-wrap{
    position: relative;

    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);

    display: flex;
    align-items: center;
    justify-content: center;
}

/* chữ nằm giữa */
.gb-multi-sep .custom-footer-credit{
    position: relative;
    z-index: 2;

    padding: 2px 10px;
    background: rgba(255,255,255,0.85);
    border-radius: 6px;

    font-size: 10px;
    font-weight: 500;
}
/* Chỉ dùng trong editor */

.gb-editor-two-cols{
    display:flex;
    gap:8px;
    flex-wrap:nowrap;
    width:100%;
}

.gb-editor-two-cols > .gb-editor-col{
    flex:1 1 50%;
    min-width:0;
}

.gb-editor-two-cols textarea{
    width:100%;
    box-sizing:border-box;
}
/* locmau EDITOR */

/* mặc định */

.gb-patient.layout-locmau textarea{

    min-height:50px !important;

    height:50px !important;
}

/* diễn biến trong ca */

.gb-patient.layout-locmau textarea[name="thuoc"]{

    min-height:180px !important;

    height:180px !important;
}
.gb-patient.layout-locmau .gb-row{

    margin-bottom:6px;
}

.gb-patient.layout-locmau .gb-editor-col textarea{

    min-height:50px !important;
}

/* ===== CAN THIỆP PT/TT ===== */

.gb-patient[data-loai="can thiệp pt/tt"] textarea[name="chan_doan"]{
    height:160px !important;
    min-height:120px !important;
}

.gb-patient[data-loai="can thiệp pt/tt"] textarea[name="kham_lam_sang"]{
    height:160px !important;
    min-height:120px !important;
}

.gb-patient[data-loai="can thiệp pt/tt"] textarea[name="kham"]{
    height:60px !important;
    min-height:60px !important;
}

.gb-patient[data-loai="can thiệp pt/tt"] textarea[name="can_lam_sang"]{
    height:60px !important;
    min-height:60px !important;
}

.gb-patient[data-loai="can thiệp pt/tt"] textarea[name="thuoc"]{
    height:180px !important;
    min-height:120px !important;
}

/* ===== CAN THIỆP PT/TT ===== */
#gb-report-form #gb-patients .gb-patient[data-loai="can thiệp pt/tt"] .gb-patient-head{
    background:#0f766e;
    border-color:#0b5f59;
    color:#ffffff;
}

.gb-patient[data-loai="can thiệp pt/tt"]{
    background:#ecfdf5;
    border-left:6px solid #0f766e !important;
}

/* chữ tiêu đề */
#gb-report-form #gb-patients .gb-patient[data-loai="can thiệp pt/tt"] .label-ho-ten,
#gb-report-form #gb-patients .gb-patient[data-loai="can thiệp pt/tt"] .label-title{
    color:#0f766e;
}

/* khi thu gọn */
.gb-patient[data-loai="can thiệp pt/tt"]:not(.open) .summary-ten,
.gb-patient[data-loai="can thiệp pt/tt"]:not(.open) .summary-loai{
    color:#ffffff;
}

.gb-patient.layout-note textarea{

    min-height:80px !important;

    height:80px !important;
}

.gb-patient.layout-note textarea[name="kham_lam_sang"]{

    min-height:220px !important;

    height:220px !important;
}
.gb-cls-gallery{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:8px;
}

.gb-cls-thumb{

    width:60px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:5px;

    position:relative;

}

.gb-cls-thumb img{

    width:60px;

    height:60px;

    object-fit:cover;

    border:1px solid #ddd;

    border-radius:6px;

    display:block;

}
.gb-cls-toolbar{

    position:absolute;

    left:50%;

    bottom:4px;

    transform:translateX(-50%);

    display:flex;

    gap:4px;

    padding:2px 3px;

    border-radius:6px;

    background:rgba(0,0,0,.65);

    opacity:0;

    visibility:hidden;

    transition:.15s;

}
.gb-cls-thumb:hover .gb-cls-toolbar{

    opacity:1;

    visibility:visible;

}
.gb-cls-toolbar button{

    width:16px;

    height:16px;

    padding:0;

    margin:0;

    border:none;

    border-radius:2px;

    background:#fff;

    color:#333;

    font-size:11px;

    line-height:20px;

    cursor:pointer;

}
.gb-cls-toolbar button:hover{

    background:#0d5fc2;

}
.gb-remove-cls{

    background:#dc3545 !important;

}

.gb-remove-cls:hover{

    background:#b52a37 !important;

}
.gb-image-header{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:8px;

}

.gb-image-title{

    font-size:15px;

    font-weight:700;

     color:#8b0000;
   
    margin-bottom:6px;

}

.gb-upload-cls{

    width:220px !important;

    margin:0;

}
.gb-upload-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:34px;
    height:34px;

    border:1px solid #d9d9d9;
    border-radius:6px;

    background:#fff;

    color:#0b6aa2;

    font-size:22px;

    cursor:pointer;

    position:relative;

}

.gb-upload-btn input{

    display:none;

}
.gb-image-block{

    border:1px solid #ccd6dd;

    border-radius:6px;

    padding:10px;

    background:#fff;

    margin-bottom:12px;

}


/* =====================
UPLOAD LOADING
===================== */

.gb-upload-btn{

    position:relative;

    overflow:hidden;

}

.gb-upload-btn.uploading{

    pointer-events:none;

    opacity:.7;

    color:transparent;

}

.gb-upload-btn.uploading::after{

    content:"⏳";

    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    color:#0b6aa2;

    font-size:18px;

}
/* Nút thêm bệnh nhân đặc biệt */
/* ===== BỆNH NHÂN ĐẶC BIỆT ===== */

.gb-add-special,
.gb-save-special,
.gb-cancel-special,
.gb-edit-special,
.gb-delete-special{

    padding:4px 10px !important;
    font-size:12px !important;
    line-height:1.3 !important;

    min-width:auto !important;
    width:auto !important;
    height:30px !important;

    border:none;
    border-radius:5px;
    cursor:pointer;
}

/* Thêm */
.gb-add-special{
    background:#0f766e;
    color:#fff;
    margin-bottom:8px;
}

/* Lưu */
.gb-save-special{
    background:#16a34a;
    color:#fff;
}

/* Hủy */
.gb-cancel-special{
    background:#94a3b8;
    color:#fff;
}

/* Sửa */
.gb-edit-special{
    background:#2563eb;
    color:#fff;
}

/* Xóa */
.gb-delete-special{
    background:#dc2626;
    color:#fff;
}