/* ==========================================================================
   HIS Design System (Neumorphism) — chuyển từ web-design-export/*.dc.html
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');

* { box-sizing: border-box; }

:root {
  --bg:#E9EDF4; --surf:#EDF1F7; --navy:#143A5C; --navy2:#5b6b82; --muted:#8A96AB; --muted2:#a2adbf; --teal:#0E7C86;
  --danger:#D9534F; --danger-bg:#FBE7E6; --warn:#C98A12; --warn-bg:#FCF3DF; --ok:#22A45D; --ok-bg:#E3F5EA;
  --purple:#6B4FD8; --purple-bg:#EEEAFB; --blue:#2B6CB8; --blue-bg:#E4EDF9;
  --raised:8px 8px 16px rgba(163,177,198,0.45),-8px -8px 16px rgba(255,255,255,0.95);
  --raised-sm:4px 4px 8px rgba(163,177,198,0.45),-4px -4px 8px rgba(255,255,255,0.95);
  --inset:inset 4px 4px 8px rgba(163,177,198,0.5),inset -4px -4px 8px rgba(255,255,255,0.9);
}

:root[data-theme="dark"] {
  --bg:#262B34; --surf:#2B313C; --navy:#E7ECF4; --navy2:#aeb8c7; --muted:#7f8ea3; --muted2:#697488; --teal:#3fb5bf;
  --raised:7px 7px 15px rgba(0,0,0,0.5),-6px -6px 14px rgba(255,255,255,0.045);
  --raised-sm:4px 4px 8px rgba(0,0,0,0.5),-4px -4px 8px rgba(255,255,255,0.045);
  --inset:inset 4px 4px 8px rgba(0,0,0,0.55),inset -4px -4px 8px rgba(255,255,255,0.04);
}

html, body { margin:0; min-height:100%; }
body {
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  background:var(--bg); color:var(--navy);
  -webkit-font-smoothing:antialiased;
}
a { color:var(--teal); text-decoration:none; }
a:hover { color:#10606B; }
input, button, select, textarea { font-family:inherit; }
button { transition: transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .16s ease, filter .16s ease; }
button:hover { transform: translateY(-2px) scale(1.02); filter: brightness(1.04); }
button:active { transform: translateY(0) scale(.98); }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:#d3dae6; border-radius:8px; border:2px solid var(--bg); }
::-webkit-scrollbar-track { background:transparent; }

/* Focus bàn phím rõ ràng cho mọi phần tử tương tác (không ảnh hưởng click chuột nhờ :focus-visible) */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px;
}

/* ===== Loading overlay (kèm logo) khi điều hướng / submit form ===== */
.his-loader {
  position: fixed; inset: 0; z-index: 500;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: rgba(233,237,244,0.78); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s ease;
}
:root[data-theme="dark"] .his-loader { background: rgba(38,43,52,0.82); }
.his-loader.active { opacity: 1; visibility: visible; }
.his-loader-inner { position: relative; width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; }
.his-loader-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 4px solid rgba(163,177,198,0.35); border-top-color: var(--teal);
  animation: hisSpin .9s linear infinite;
}
.his-loader-logo {
  width: 50px; height: 50px; object-fit: contain; border-radius: 12px;
  background: var(--surf); box-shadow: var(--raised-sm); padding: 7px; box-sizing: border-box;
  animation: hisPulse 1.4s ease-in-out infinite;
}
.his-loader-text { font-size: 13px; font-weight: 600; color: var(--navy2); }
@keyframes hisSpin { to { transform: rotate(360deg); } }
@keyframes hisPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.92); opacity: .78; } }

/* ===== Neumorphism utility classes ===== */
.neu-raised { background:var(--surf); box-shadow:var(--raised); border-radius:20px; }
.neu-raised-sm { background:var(--surf); box-shadow:var(--raised-sm); border-radius:12px; }
.neu-inset { background:var(--bg); box-shadow:var(--inset); border-radius:12px; }
.neu-pressed { box-shadow:var(--inset) !important; background:var(--bg) !important; }

.neu-btn-primary {
  border:none; cursor:pointer; font-weight:700; font-size:14px; color:#fff; border-radius:12px; padding:13px 24px;
  background:linear-gradient(135deg,#10606B,#148B96);
  box-shadow:6px 6px 12px rgba(163,177,198,0.5),-4px -4px 10px rgba(255,255,255,0.7);
}
.neu-btn-secondary {
  border:none; cursor:pointer; font-weight:600; font-size:13px; color:var(--navy2); border-radius:12px; padding:11px 18px;
  background:var(--surf); box-shadow:var(--raised-sm);
}
a.neu-btn-primary, a.neu-btn-secondary {
  display:inline-block; transition: transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .16s ease, filter .16s ease;
}
a.neu-btn-primary:hover, a.neu-btn-secondary:hover, .neu-btn-secondary:hover, .neu-btn-primary:hover {
  transform: translateY(-2px) scale(1.02); filter: brightness(1.04);
}
a.neu-btn-primary:active, a.neu-btn-secondary:active, .neu-btn-secondary:active, .neu-btn-primary:active {
  transform: translateY(0) scale(.97); box-shadow: var(--inset);
}
a.neu-btn-secondary:focus-visible {
  outline: none; box-shadow: var(--inset), 0 0 0 2px var(--teal);
}

.neu-field { display:flex; flex-direction:column; gap:8px; }
.neu-field-label { font-size:13px; font-weight:600; color:var(--navy2); }
.neu-field-error { font-size:11.5px; font-weight:600; color:var(--danger); }
.neu-input {
  border:none; outline:none; background:var(--bg); box-shadow:var(--inset); border-radius:12px;
  padding:11px 14px; font-size:13px; font-weight:500; color:var(--navy); width:100%;
  transition: box-shadow .18s ease;
}
.neu-input::placeholder { color:var(--muted); }
.neu-input:focus { box-shadow: var(--inset), 0 0 0 2px var(--teal); }
.neu-input-icon { display:flex; align-items:center; gap:9px; padding:11px 14px; border-radius:12px; background:var(--bg); box-shadow:var(--inset); transition: box-shadow .18s ease; }
.neu-input-icon:focus-within { box-shadow: var(--inset), 0 0 0 2px var(--teal); }
.neu-input-icon input { flex:1; border:none; outline:none; background:transparent; font-size:13px; font-weight:500; color:var(--navy); }
.neu-input-icon span { color:var(--muted); font-size:14px; }

.neu-badge { font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:20px; display:inline-block; white-space:normal; }
.neu-badge-danger { color:var(--danger); background:var(--danger-bg); }
.neu-badge-warn { color:var(--warn); background:var(--warn-bg); }
.neu-badge-ok { color:var(--ok); background:var(--ok-bg); }
.neu-badge-neutral { color:var(--navy2); background:var(--surf); box-shadow:var(--raised-sm); }

.neu-alert { display:flex; align-items:center; gap:12px; padding:14px 18px; border-radius:14px; box-shadow:var(--raised-sm); }
.neu-alert-icon { width:34px; height:34px; flex:0 0 34px; border-radius:10px; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px; }
.neu-alert-danger { background:var(--danger-bg); }
.neu-alert-danger .neu-alert-icon { background:var(--danger); }
.neu-alert-title { font-size:13px; font-weight:800; color:#B0332E; }
.neu-alert-sub { font-size:11.5px; font-weight:600; color:#B0332E; }

/* ===== Layout: sidebar + topbar ===== */
.his-app { display:flex; min-height:100vh; background:var(--bg); }

.his-aside { width:260px; flex:0 0 260px; display:flex; flex-direction:column; padding:18px 14px; background:var(--surf); box-shadow:var(--raised); margin:14px 0 14px 14px; border-radius:22px; }
.his-aside-logo { display:flex; align-items:center; gap:12px; padding:6px 6px 18px; }
.his-aside-logo img { width:40px; height:40px; object-fit:contain; }
.his-aside-logo-badge { width:46px; height:46px; flex:0 0 46px; border-radius:12px; background:var(--surf); box-shadow:var(--raised-sm); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.his-aside-logo-text { line-height:1.25; min-width:0; }
.his-aside-logo-title { font-size:14.5px; font-weight:700; color:var(--navy); }
.his-aside-logo-sub { font-size:10.5px; font-weight:500; color:var(--muted); }

.his-nav { flex:1; display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.his-nav-link { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; font-size:13.5px; font-weight:600; color:var(--navy2); cursor:pointer; transition: transform .15s ease, box-shadow .15s ease, color .15s ease; }
.his-nav-link:not(.disabled):hover { color:var(--teal); transform:translateX(4px); box-shadow:var(--raised-sm); }
.his-nav-link:not(.disabled):active { transform:translateX(2px) scale(.98); }
.his-nav-link.active { color:var(--teal); background:var(--surf); box-shadow:var(--raised); }
.his-nav-icon { width:34px; height:34px; flex:0 0 34px; border-radius:10px; background:var(--bg); box-shadow:var(--raised-sm); display:flex; align-items:center; justify-content:center; font-size:15px; }
.his-nav-link.disabled { color:var(--muted); cursor:default; opacity:.65; }

.his-aside-user { display:flex; align-items:center; gap:11px; padding:12px; border-radius:16px; background:var(--bg); box-shadow:var(--inset); margin-top:10px; }
.his-avatar { width:42px; height:42px; flex:0 0 42px; border-radius:12px; background:linear-gradient(135deg,#6B4FD8,#8a72e6); box-shadow:var(--raised-sm); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:15px; }
.his-aside-user-name { font-size:12.5px; font-weight:700; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.his-aside-user-role { font-size:11px; font-weight:500; color:var(--muted); }
.his-logout-btn { border:none; background:transparent; cursor:pointer; color:var(--muted); padding:6px; border-radius:8px; display:flex; align-items:center; justify-content:center; }
.his-logout-btn:hover { color:var(--danger); transform:none; }

.his-main { flex:1; min-width:0; padding:28px 30px 40px; }
.his-topbar { display:flex; align-items:center; gap:20px; margin-bottom:22px; flex-wrap:wrap; }
.his-topbar-title { font-size:22px; font-weight:700; color:var(--navy); line-height:1.15; }
.his-topbar-sub { font-size:12.5px; font-weight:500; color:var(--muted); margin-top:3px; }
.his-topbar-search { flex:1; max-width:520px; margin:0 auto; }
.his-topbar-right { flex:0 0 auto; display:flex; align-items:center; gap:12px; }
.his-icon-btn { width:44px; height:44px; border-radius:14px; background:var(--surf); box-shadow:var(--raised-sm); display:flex; align-items:center; justify-content:center; font-size:17px; color:var(--navy); cursor:pointer; border:none; }

.his-hdr-dept { display:flex; align-items:center; gap:9px; padding:9px 14px; border-radius:14px; background:var(--surf); box-shadow:var(--raised-sm); font-size:12.5px; font-weight:600; color:var(--navy); white-space:nowrap; }

.his-user-menu { position:relative; }
.his-user-chip { display:flex; align-items:center; gap:10px; padding:6px 8px; border:none; background:transparent; cursor:pointer; font-family:inherit; border-radius:12px; }
.his-user-chip:hover { transform:none; }
.his-user-menu.open .his-user-chip { box-shadow:var(--inset); background:var(--bg); }
.his-user-chip-text { line-height:1.25; text-align:left; }
.his-user-chip-name { font-size:12.5px; font-weight:700; color:var(--navy); }
.his-user-chip-role { font-size:11px; font-weight:500; color:var(--muted); }
.his-user-caret { color:var(--muted); font-size:11px; transition:transform .15s ease; }
.his-user-menu.open .his-user-caret { transform:rotate(180deg); }

.his-user-dropdown { display:none; position:absolute; top:calc(100% + 10px); right:0; width:260px; background:var(--surf); box-shadow:0 20px 50px rgba(0,0,0,0.28), var(--raised); border-radius:16px; padding:16px; z-index:200; }
.his-user-menu.open .his-user-dropdown { display:block; }
.his-user-dropdown-info { display:flex; gap:12px; align-items:flex-start; padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid rgba(163,177,198,0.25); }
.his-user-dropdown-name { font-size:13.5px; font-weight:700; color:var(--navy); }
.his-user-dropdown-role { font-size:11.5px; font-weight:500; color:var(--muted); margin-top:2px; }
.his-user-dropdown-code { font-size:11px; font-weight:500; color:var(--muted2); margin-top:6px; }
.his-user-dropdown-logout { width:100%; display:flex; align-items:center; justify-content:center; gap:8px; border:none; cursor:pointer; padding:11px; border-radius:12px; background:var(--danger-bg); color:var(--danger); font-weight:700; font-size:13px; font-family:inherit; }
.his-user-dropdown-logout:hover { filter:brightness(0.97); }

@media (max-width: 640px) {
  .his-hdr-dept { display:none; }
}

@media (max-width: 900px) {
  .his-aside { position:fixed; left:-280px; top:0; height:100vh; z-index:120; transition:left .25s ease; }
  .his-app.nav-open .his-aside { left:14px; }
  .his-main { padding:18px 16px 30px; }
  .his-topbar-search { display:none; }
}

/* ===== Login ===== */
.his-login { display:flex; min-height:100vh; background:var(--bg); }
.his-login-hero { flex:1; position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:56px; background:linear-gradient(120deg,rgba(16,96,107,0.72),rgba(20,58,92,0.55)), url('/img/hospital-bg.jpg') center/cover no-repeat; clip-path:polygon(0 0,100% 0,88% 100%,0% 100%); }
.his-login-hero-inner { position:relative; color:#fff; }
.his-login-brand { display:flex; align-items:center; gap:16px; margin-bottom:26px; }
.his-login-brand-badge { width:64px; height:64px; flex:0 0 64px; border-radius:18px; background:rgba(255,255,255,0.92); display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.25); }
.his-login-brand-badge img { width:52px; height:52px; object-fit:contain; }
.his-login-brand-label { font-size:15px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.86); }
.his-login-title { font-size:34px; font-weight:800; line-height:1.15; text-shadow:0 4px 24px rgba(0,0,0,0.3); }
.his-login-desc { font-size:16px; font-weight:500; color:rgba(255,255,255,.9); margin-top:16px; line-height:1.6; max-width:520px; }
.his-login-form-wrap { flex:0 0 480px; display:flex; flex-direction:column; justify-content:center; padding:56px 60px; background:var(--bg); margin-left:-64px; }
.his-login-form-title { font-size:26px; font-weight:800; color:var(--navy); }
.his-login-form-sub { font-size:13.5px; font-weight:500; color:var(--muted); margin-top:6px; margin-bottom:30px; }
.his-login-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:2px 0 6px; }
.his-login-check { display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--navy2); }
.his-login-error { font-size:12.5px; font-weight:600; color:var(--danger); margin-bottom:8px; }
.his-login-foot { margin-top:26px; font-size:11.5px; font-weight:500; color:var(--muted); text-align:center; }
@media (max-width: 1024px) {
  .his-login { flex-direction:column; }
  .his-login-hero { clip-path:none; min-height:210px; align-items:center; padding:36px; }
  .his-login-form-wrap { flex:1 1 auto; margin-left:0; padding:40px 36px; }
}

/* ===== Bệnh sử ===== */
.bs-toolbar { display:flex; align-items:flex-end; gap:14px; padding:16px 20px; flex-wrap:wrap; }
.bs-toolbar .neu-field { flex:1; min-width:220px; }
.bs-patient-card { display:flex; align-items:flex-start; gap:18px; padding:20px 24px; flex-wrap:wrap; }
.bs-patient-avatar { width:64px; height:64px; flex:0 0 64px; border-radius:18px; background:linear-gradient(135deg,#10606B,#148B96); box-shadow:var(--raised-sm); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:22px; }
.bs-patient-name { font-size:21px; font-weight:800; color:var(--navy); }
.bs-patient-meta { display:flex; gap:22px; flex-wrap:wrap; font-size:12.5px; font-weight:500; color:var(--navy2); margin-top:8px; }
.bs-patient-meta b { color:var(--navy); }

.bs-stats { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.bs-stat { padding:15px 16px; border-radius:16px; }
.bs-stat-value { font-size:24px; font-weight:800; line-height:1; }
.bs-stat-label { font-size:11.5px; font-weight:500; color:var(--muted); margin-top:6px; }

.bs-cols { display:grid; grid-template-columns:360px 1fr; gap:18px; align-items:start; }
.bs-timeline-head { font-size:14px; font-weight:700; color:var(--navy); margin-bottom:10px; }
.bs-filter-group { display:flex; gap:6px; padding:5px; border-radius:12px; margin-bottom:12px; }
.bs-filter { flex:1; text-align:center; padding:7px 6px; border-radius:9px; font-size:12px; font-weight:600; cursor:pointer; color:var(--muted); transition: transform .15s ease, box-shadow .15s ease, color .15s ease; }
.bs-filter:hover { color:var(--teal); }
.bs-filter:active { transform:scale(.95); }
.bs-filter.active { color:var(--teal); background:var(--surf); box-shadow:var(--raised-sm); }
.bs-timeline { display:flex; flex-direction:column; max-height:600px; overflow-y:auto; margin-right:-6px; padding-right:6px; }
.bs-visit { display:flex; gap:12px; border-radius:12px; padding:12px; margin-bottom:2px; text-decoration:none; transition: background .15s ease, box-shadow .15s ease; }
.bs-visit:not(.active):hover { background:var(--surf); box-shadow:var(--raised-sm); }
.bs-visit.active { background:var(--bg); box-shadow:var(--inset); }
.bs-visit-dotcol { display:flex; flex-direction:column; align-items:center; flex:0 0 auto; }
.bs-visit-dot { width:13px; height:13px; border-radius:50%; flex:0 0 auto; }
.bs-visit-line { flex:1; width:2px; background:rgba(163,177,198,0.3); margin:4px 0; min-height:20px; }
.bs-visit-body { flex:1; min-width:0; padding-bottom:6px; }
.bs-visit-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.bs-visit-type { font-size:12px; font-weight:700; }
.bs-visit-date { font-size:11.5px; font-weight:600; color:var(--muted); }
.bs-visit-dx { font-size:13px; font-weight:600; color:var(--navy); margin-top:3px; line-height:1.35; }
.bs-visit-clickarea { color:inherit; text-decoration:none; display:block; }
.bs-visit-dept-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:4px; }
.bs-visit-dept { font-size:11.5px; font-weight:500; color:var(--muted); }
.bs-visit-view-btn { font-size:11px; font-weight:700; color:var(--teal); cursor:pointer; padding:3px 9px; border-radius:8px; background:var(--surf); box-shadow:var(--raised-sm); white-space:nowrap; text-decoration:none; flex:0 0 auto; transition: transform .15s ease, color .15s ease; display:inline-block; }
.bs-visit-view-btn:hover { color:#10606B; transform:translateY(-1px); }
.bs-visit-view-btn:active { transform:translateY(0) scale(.95); }

.bs-detail-head { padding:22px 26px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.bs-detail-info { flex:1; min-width:0; }
.bs-detail-dx { font-size:19px; font-weight:800; color:var(--navy); margin-top:8px; }
.bs-detail-sub { font-size:12.5px; font-weight:500; color:var(--navy2); margin-top:3px; }
.bs-detail-cost { flex:0 0 auto; }
.bs-detail-cost-label { font-size:11.5px; font-weight:600; color:var(--muted); text-align:right; }
.bs-detail-cost-value { font-size:20px; font-weight:800; color:var(--teal); margin-top:2px; text-align:right; white-space:nowrap; }

.bs-tabs { display:flex; gap:5px; padding:6px; border-radius:14px; flex-wrap:wrap; }
.bs-tab { flex:1; text-align:center; white-space:nowrap; padding:10px 8px; border-radius:10px; font-size:12px; font-weight:600; cursor:pointer; color:var(--navy2); text-decoration:none; transition: transform .15s ease, box-shadow .15s ease, color .15s ease; }
.bs-tab:not(.active):hover { color:var(--teal); }
.bs-tab:active { transform:scale(.96); }
.bs-tab.active { color:#fff; background:linear-gradient(135deg,#10606B,#148B96); box-shadow:var(--raised-sm); }

.bs-tongquan-grid { columns:2; column-gap:16px; margin-bottom:16px; }
.bs-tongquan-grid .bs-panel { break-inside:avoid; margin-bottom:16px; }

.bs-panel { padding:20px 22px; margin-bottom:16px; }
.bs-panel-title { font-size:13px; font-weight:700; color:var(--teal); margin-bottom:12px; }
.bs-panel-text { font-size:13px; font-weight:500; color:var(--navy2); line-height:1.7; white-space:pre-line; }

/* ===== Disclosure (mở rộng / thu gọn dùng thẻ <details> gốc, không cần JS) ===== */
.bs-disclosure > summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:10px; font-size:12.5px; font-weight:600; color:var(--teal); background:var(--bg); box-shadow:var(--raised-sm); transition: transform .15s ease, box-shadow .15s ease; }
.bs-disclosure > summary:hover { transform:translateY(-1px); box-shadow:var(--raised); }
.bs-disclosure > summary:active { transform:translateY(0) scale(.98); }
.bs-disclosure > summary::-webkit-details-marker { display:none; }
.bs-disclosure > summary .bs-arrow { display:inline-block; transition:transform .15s ease; }
.bs-disclosure[open] > summary .bs-arrow { transform:rotate(90deg); }
.bs-disclosure .bs-count { margin-left:auto; color:var(--muted); font-weight:500; }

/* ===== Đơn thuốc / Kết quả CLS trình bày dạng timeline (dùng chung class .bs-visit* với panel Dòng thời gian lần khám) ===== */
.bs-med-timeline { display:flex; flex-direction:column; }

/* ===== Phiếu ký số theo nhóm loại phiếu ===== */
.bs-emr-group { margin-bottom:12px; padding:0; overflow:hidden; }
.bs-emr-group > summary { padding:16px 22px; background:transparent; box-shadow:none; border-bottom:1px solid rgba(163,177,198,0.2); border-radius:0; }
.bs-emr-group[open] > summary { border-bottom:1px solid rgba(163,177,198,0.25); }

/* ===== Tìm kiếm + phân trang cho bảng > 10 dòng (datatable.js) ===== */
.dt-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 22px; flex-wrap:wrap; }
.dt-search { max-width:280px; flex:1; min-width:180px; }
.dt-pager { display:flex; align-items:center; gap:10px; }
.dt-info { font-size:11.5px; font-weight:600; color:var(--muted); white-space:nowrap; }
.dt-btn { border:none; cursor:pointer; width:28px; height:28px; border-radius:8px; background:var(--surf); box-shadow:var(--raised-sm); color:var(--navy); font-size:13px; line-height:1; }
.dt-btn:disabled { opacity:.4; cursor:default; }
.dt-btn:disabled:hover { transform:none; filter:none; }

.bs-vitals-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.bs-vital { padding:10px 13px; border-radius:12px; }
.bs-vital-label { font-size:11px; font-weight:600; color:var(--muted); }
.bs-vital-value { font-size:15px; font-weight:700; color:var(--navy); margin-top:2px; }
.bs-vital-unit { font-size:10.5px; font-weight:500; color:var(--muted); }

.bs-table { width:100%; border-collapse:collapse; overflow:hidden; }
.bs-table th { font-size:11px; font-weight:700; color:var(--muted2); text-transform:uppercase; letter-spacing:.04em; text-align:left; padding:16px 22px; border-bottom:1px solid rgba(163,177,198,0.25); }
.bs-table td { padding:14px 22px; font-size:13px; border-bottom:1px solid rgba(163,177,198,0.14); color:var(--navy2); vertical-align:middle; }
.bs-table tr:last-child td { border-bottom:none; }
.bs-table .strong { font-weight:600; color:var(--navy); }

.bs-lab-row { display:flex; align-items:center; gap:16px; padding:15px 20px; margin-bottom:12px; }
.bs-lab-icon { width:40px; height:40px; flex:0 0 40px; border-radius:12px; box-shadow:var(--raised-sm); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; }
.bs-lab-name { font-size:13.5px; font-weight:600; color:var(--navy); }
.bs-lab-sub { font-size:11.5px; font-weight:500; color:var(--muted); }
.bs-lab-result { font-size:14px; font-weight:700; color:var(--navy); text-align:right; }

.bs-proc-card { padding:18px 22px; margin-bottom:12px; }
.bs-proc-name { font-size:14px; font-weight:700; color:var(--navy); }
.bs-proc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px; }
.bs-proc-field-label { font-size:11px; font-weight:600; color:var(--muted); }
.bs-proc-field-value { font-size:13px; font-weight:600; color:var(--navy); margin-top:2px; }
.bs-proc-note { font-size:12.5px; font-weight:500; color:var(--navy2); line-height:1.65; margin-top:12px; }

.bs-cost-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.bs-cost-card { padding:18px 20px; }
.bs-cost-label { font-size:11.5px; font-weight:600; color:var(--muted); }
.bs-cost-value { font-size:19px; font-weight:800; color:var(--navy); margin-top:6px; }

.bs-cost-table { border-radius:14px; background:var(--bg); box-shadow:var(--inset); padding:4px 18px; }
.bs-cost-row { display:flex; justify-content:space-between; padding:12px 0; font-size:13px; border-bottom:1px solid rgba(163,177,198,0.2); }
.bs-cost-row:last-child { border-bottom:none; }
.bs-cost-row .label { color:var(--navy2); font-weight:500; }
.bs-cost-row .value { font-weight:600; color:var(--navy); }
.bs-cost-total { display:flex; justify-content:space-between; align-items:center; margin-top:18px; padding:14px 18px; border-radius:14px; background:linear-gradient(135deg,#10606B,#148B96); color:#fff; }
.bs-cost-total .label { font-size:13.5px; font-weight:600; }
.bs-cost-total .value { font-size:20px; font-weight:800; }

.bs-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:50px 30px; text-align:center; color:var(--muted); }

@media (max-width: 1024px) {
  .bs-cols { grid-template-columns:1fr; }
  .bs-stats { grid-template-columns:repeat(3,1fr); }
  .bs-vitals-grid { grid-template-columns:repeat(2,1fr); }
  .bs-cost-grid { grid-template-columns:1fr 1fr; }
  .bs-tongquan-grid { columns:1; }
}
@media (max-width: 640px) {
  .bs-stats { grid-template-columns:repeat(2,1fr); }
  .bs-proc-grid { grid-template-columns:1fr; }
  .bs-cost-grid { grid-template-columns:1fr; }
}