/* GB Report v3.3 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;
}

.gb-container{
  font-family:Inter,system-ui,Arial,Helvetica,sans-serif;
  margin:20px;
}

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

.gb-row label{
  flex:1;
  min-width:150px;
}

.gb-row input,
.gb-row select,
.gb-row textarea{
  width:100%;
  padding:8px;
  border:1px solid #cfecee;
  border-radius:6px;
}
.gb-row.gb-3col {
    flex-wrap: nowrap !important;
}

.gb-row.gb-3col label {
    flex: 1 1 0;  /* grow, shrink, basis */
    min-width: 0 !important;  /* bắt buộc gỡ min-width cũ */
}
/* Hàng dạng 2 cột */
.gb-two-cols {
    display: flex;
    gap: 12px;            /* khoảng cách 2 cột */
}

/* Mỗi cột */
.gb-two-cols .col {
    flex: 1;              /* 2 cột bằng nhau */
}

/* Đảm bảo label full width */
.gb-two-cols label {
    display: block;
    width: 100%;
}

.gb-patient{
  border:5px dashed #0B614B;
  padding:10px;
  margin-bottom:20px;
  background:#fbfdff;
}

.gb-actions{margin-top:12px;}

.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;}

.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);
}

/* Full screen report styles */
.gb-report-full{
  min-height:100vh;
  background:linear-gradient(180deg,#e6f9fc,#ffffff 40%);
  padding:20px 30px;
}

.gb-controls{
  position:fixed;
  right:20px;
  top:20px;
  z-index:9999;
}

.gb-btn{
  background:var(--gb-blue-2);
  color:#fff;
  padding:10px 14px;
  border-radius:8px;
  border:none;
  cursor:pointer;
  margin-left:6px;
}

.gb-header{
  background:linear-gradient(90deg,var(--gb-blue),var(--gb-blue-2));
  color:#fff;
  padding:15px;
  border-radius:12px;
  margin-bottom:16px;
  box-shadow:0 6px 18px rgba(10,126,164,0.15);
}

.gb-header-inner {
    max-width: 100%;
    width: 100%;
    margin: 0;
}


.gb-title{
  margin:0;
  font-weight:600;
  font-size:32px;
  letter-spacing:1px;
}

.gb-meta{
  margin-top:8px;
  font-weight:600;
  font-size:28px;
  text-align:center;
  color:#f7f706;
  opacity:0.95;
}

.gb-summary {
  max-width: 1300px;
  margin: 10px auto;
}

.gb-grid-row {
  display: flex;
  gap: 10px;
  justify-content: center; /* căn giữa hàng 2 nếu ít ô */
  margin-bottom: 10px;
}

.gb-box {
  flex: 1;
  min-width: 130px;
  background: linear-gradient(0deg, #ffffff, #e8fbff); /* gradient dưới lên trên */
  border: 1px solid #cce8f2; /* viền mảnh nhẹ */
  padding: 12px; /* tăng padding để cân với chữ lớn */
  border-radius: 8px; /* bo tròn nhẹ */
  box-shadow: 0 4px 10px rgba(11,58,71,0.04);
  text-align: center;
}

.gb-box-label {
  font-size: 28px;  /* tăng từ 24px lên 30px */
  color: var(--gb-contrast);
  font-weight: 600;
}

.gb-box-value {
  font-size: 32px; /* tăng từ 28px lên 36px */
  font-weight: 800;
  color: var(--gb-blue-2);
  margin-top: 8px;
}


.gb-section-title{
  max-width:1300px;
  margin:28px auto 12px;
  color:var(--gb-contrast);
  font-size:26px;text-transform: uppercase;
}

.gb-patients{
  max-width:1300px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-bottom:40px;
}

.gb-patient-card{
  background:var(--gb-blue-light);
  border-radius:10px;
  padding:14px;
  border-left:6px solid var(--gb-blue);
  box-shadow:0 8px 20px rgba(10,126,164,0.06);
}
.label-green {
    color: #0a7c27; /* hoặc #0a7c27 nếu muốn xanh lá */
}

/* Nút xóa bệnh nhân */
.gb-remove-patient{
  background-color:#e53935;
  color:white;
  border:none;
  padding:6px 10px;
  border-radius:50%;
  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;}

@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 bệnh nhân – giữ bố cục ngang, nền xanh y khoa cũ */
.pc-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
  gap:12px;
  font-size:28px;
  background:linear-gradient(90deg,#007f99,#0a7ea4);
  color:#fff;
  padding:10px 14px;
  border-radius:8px;
}

.pc-header p,
.pc-title,
.pc-meta,
.pc-room{
  color:#ffffff;
  margin:0;
}

.pc-title{
  font-weight:700;
  font-size:28px;
  text-transform: uppercase;
}

.pc-meta{
  font-weight:600;
  font-size:28px;
  opacity:0.9;
  margin-left:8px;
}

.pc-room{
  font-size:27px;
  font-weight:700;
}

.pc-body p{
  margin:6px 0;
  text-align:justify;
  font-size:29px;
  color:#000000;
  font-weight:500;
}
.pc-ky {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-top: 20px;
}
/* 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: #E0F2F7 !important;
    color: #000;
    border: 1px solid #bcd8c7;
    height: 120px;             /* chiều cao mặc định */
    width: 100%;
    padding: 6px;
    resize: vertical;          /* cho phép kéo */
    overflow-y: auto;
    font-family: inherit;
    line-height: 1.4;
    box-sizing: border-box;
}

/* Riêng ô lâm sàng cận lâm sàng: cao hơn (ví dụ) */
textarea.field-kham {
    background: #E0F8E6 !important;
    height: 200px;
}

/* Riêng ô Chẩn đoán và điều trị thấp hơn */
textarea.field-diagnosis {
    background: #FBEFFB !important;
    height: 70px;              /* <-- giảm xuống */
    overflow-y: auto;         /* có scrollbar nếu quá dài */
}

/* Focus hiệu ứng (áp dụng chung, giữ chiều cao khi focus) */
textarea.highlight-field:focus {
    background: #F7F8E0 !important;
    border-color: #79c99a !important;
    box-shadow: 0 0 0 3px rgba(121,201,154,0.25);
    outline: none;
}



/* ========== 1. TỬ VONG ========== */
.gb-patient-card.pc-tv .pc-header {
    background: #374151 !important;  /* charcoal */
    color: #ffffff !important;
}
.gb-patient-card.pc-tv .pc-header * {
    color: #ffffff !important;
}

/* ========== 2. CHUYỂN ĐẾN ========== */
.gb-patient-card.pc-cd .pc-header {
    background: #FBCF68 !important;  /* soft amber */
    color: #6B4E00 !important;
}
.gb-patient-card.pc-cd .pc-header * {
    color: #6B4E00 !important;
}

/* ========== 3. CHUYỂN KHOA ========== */
.gb-patient-card.pc-ck .pc-header {
    background: #F5A6A6 !important; /* soft coral */
    color: #7A1E1E !important;
}
.gb-patient-card.pc-ck .pc-header * {
    color: #7A1E1E !important;
}

/* ========== 4. VÀO ========== */
.gb-patient-card.pc-vao .pc-header {
    background: #C8EEE7 !important; /* mint medical */
    color: #0D4B45 !important;
}
.gb-patient-card.pc-vao .pc-header * {
    color: #0D4B45 !important;
}
/* ========== 5. THEO DÕI ========== */
.gb-patient-card.pc-td .pc-header {
    background: #fbff39 !important; /* mint medical */
    color: #0D4B45 !important;
}
.gb-patient-card.pc-td .pc-header * {
    color: #0D4B45 !important;
}
/* 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;
}
/* Khối chung từng mục */
.pc-section-box {
    background: #f7f9fc;               /* nền nhẹ */
    border: 1px solid #d6e0eb;         /* viền nhạt */
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 10px;
}

.label-green {
    color: #0B6138;
    font-weight: bold;
}

.two-col {
    display: flex;
    gap: 10px;
}

/* Cột Khám lâm sàng: tối thiểu 50%, co giãn nếu cần */
.two-col > div:first-child {
    flex: 1 1 50%;   /* grow:1, shrink:1, basis:50% */
    min-width: 50%;  /* luôn ≥50% */
    background: #fff;
    border: 1px solid #d6e0eb;
    border-radius: 6px;
    padding: 10px;
}

/* Cột Cận lâm sàng: co giãn nhưng có min-width 30% */
.two-col > div:last-child {
    flex: 1 1 auto;  /* co giãn tự nhiên */
    min-width: 20%;  /* không nhỏ hơn 20% container */
    background: #fff;
    border: 1px solid #d6e0eb;
    border-radius: 6px;
    padding: 10px;
}

/* Mobile xuống 1 cột */
@media (max-width: 700px) {
    .two-col {
        flex-direction: column;
    }
}



@media print {

  /* Tắt toàn bộ nền, màu, bóng */
  * {
    color: #000 !important;
    background: none !important;
    box-shadow: none !important;
  }

  html, body {
    font-size: 14px !important;   /* Chữ nhỏ gọn */
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Card bệnh nhân – không ngắt trang nữa */
  .gb-patient-card {
    border: none !important;
    margin: 0 0 6px 0 !important;   /* Khoảng cách giữa các bệnh nhân */
    padding: 4px 0 !important;
    page-break-inside: avoid !important; /* Không tách card giữa chừng */
    break-inside: avoid !important;
  }

  /* Header + Body gọn hơn */
  .pc-header,
  .pc-body {
    padding: 2px 0 !important;
    margin: 0 !important;
    border: none !important;
  }

  /* Khoảng cách giữa các đoạn */
  .pc-body p {
    margin: 2px 0 !important;
  }

  /* Layout 2 cột */
  .two-col {
    display: flex !important;
    gap: 6px !important;
  }
  .two-col > div {
    width: 50% !important;
  }

  /* Ẩn nút */
  button, a.button {
    display: none !important;
  }
}