:root {
    /* Rút thẳng từ logo bệnh viện: xanh vành ngoài + đỏ chữ thập. Một màu nhấn duy nhất. */
    --navy-900: #0d2a52;
    --navy-700: #1b4f9c;
    --navy-050: #eaf0f9;
    --paper:    #f7f6f3;   /* giấy ngà, KHÔNG phải xám xanh mặc định */
    --card:     #fff;
    --rule:     #e3ded6;   /* kẻ tóc, ấm hơn nền một chút */
    --rule-2:   #f0ece5;
    --ink:      #16202b;
    --muted:    #646b76;   /* đủ 4.97:1 trên nền giấy — #6b7280 chỉ đạt 4.47, trượt AA */
    --accent:   #c8322a;   /* đỏ chữ thập — CHỈ dùng cho lỗi / cần xử lý */
    --accent-bg:#fdf1f0;
    --ok:       #2f6b46;
    --warn:     #a1620a;

    --sans: "Be Vietnam Pro", "Segoe UI", sans-serif;
    --mono: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;

  }

  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    margin: 0; background: var(--paper); color: var(--ink);
    font: 400 13px/1.5 var(--sans);
    display: flex; flex-direction: column;
    -webkit-font-smoothing: antialiased;
  }
  button, input, select { font: inherit; color: inherit; }
  :focus-visible { outline: 2px solid var(--navy-700); outline-offset: 1px; }

  /* ============ thanh trên ============ */
  /* Nền trắng để logo đặt thẳng lên, không phải bọc đĩa trắng quanh nó nữa. */
  .topbar {
    background: var(--card); color: var(--ink);
    border-bottom: 1px solid var(--rule);
    display: flex; align-items: center; gap: 14px;
    padding: 0 20px; height: 68px; flex: none;
  }
  .topbar .logo { height: 46px; width: 46px; flex: none; }
  .topbar h1 {
    margin: 0; font-size: 15px; font-weight: 600; color: var(--navy-900);
    letter-spacing: .11em; text-transform: uppercase;
  }
  .topbar .sub { font-size: 11.5px; color: var(--muted); }
  .topbar .sp { flex: 1; }

  /* Điều hướng giữa các màn — gạch chân dày ở mục đang mở, không dùng nền bo tròn. */
  .nav { display: flex; gap: 4px; margin-left: 8px; }
  .nav a {
    color: var(--muted); text-decoration: none; font-weight: 500; font-size: 12.5px;
    padding: 6px 10px; border-bottom: 2px solid transparent;
  }
  .nav a:hover { color: var(--ink); }
  .nav a.on { color: var(--navy-900); border-bottom-color: var(--navy-700); }

  /* Chấm nhịp đập đúng chu kỳ tự nạp nên nó là đồng hồ, không phải trang trí. */
  .live { display: flex; align-items: center; gap: 7px; color: var(--muted);
          font: 500 11px/1 var(--mono); letter-spacing: .04em; }
  .live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
               animation: nhip 10s infinite; }
  .live.off .dot { background: #b9b3a8; animation: none; }
  @keyframes nhip {
    0%   { box-shadow: 0 0 0 0 rgba(47,107,70,.5); }
    9%   { box-shadow: 0 0 0 6px rgba(47,107,70,0); }
    100% { box-shadow: 0 0 0 0 rgba(47,107,70,0); }
  }

  /* min-height:0 là thứ bắt buộc: flex item mặc định min-height:auto nên .work phình
     theo chiều cao bảng, .grid không bao giờ cuộn và chân trang bị đẩy khỏi màn hình. */
  .work { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }

  .keys { color: var(--muted); }
  .keys kbd {
    font: 500 10px var(--mono); background: var(--rule-2);
    border: 1px solid var(--rule); border-radius: 3px; padding: 1px 5px;
  }

  /* ============ dải trạng thái ============ */
  .meters {
    flex: none;
    display: flex; gap: 28px; flex-wrap: wrap;
    padding: 16px 20px 14px; border-bottom: 1px solid var(--rule);
  }
  .meter { min-width: 250px; flex: 1 1 300px; max-width: 440px; }
  .meter .hd { display: flex; align-items: baseline; gap: 10px; margin-bottom: 7px; }
  .meter .ten { font-weight: 600; }
  .meter .tsl { margin-left: auto; font: 500 20px/1 var(--mono); letter-spacing: -.02em; }
  .bar { display: flex; height: 9px; background: var(--rule-2); overflow: hidden; }
  .bar .seg { border: 0; padding: 0; cursor: pointer; min-width: 3px; }
  .bar .seg:hover { filter: brightness(.85); }
  .bar .seg + .seg { border-left: 1px solid var(--card); }
  .s0 { background: #b9b3a8; } .s1 { background: var(--navy-700); }
  .s2 { background: var(--ok); } .s3 { background: var(--accent); }
  .s9 { background: #d99f2b; }
  .meter .ch { margin-top: 7px; font-size: 11px; color: var(--muted); }
  .meter .ch b { color: var(--ink); font: 500 11px var(--mono); }

  /* ============ hàng lọc ============ */
  .toolbar {
    flex: none;
    display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
    padding: 11px 20px; border-bottom: 1px solid var(--rule); background: var(--card);
  }
  .fld { display: flex; flex-direction: column; gap: 2px; }
  .fld label {
    font: 600 10px/1 var(--sans); letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted);
  }
  /* Ô nhập gạch chân thay vì hộp bo tròn — bớt một tầng khung, dồn chú ý vào bảng. */
  .fld input, .fld select {
    border: 0; border-bottom: 1px solid var(--rule); background: none;
    padding: 4px 2px; min-width: 132px; border-radius: 0;
  }
  .fld input:focus, .fld select:focus { outline: none; border-bottom-color: var(--navy-700); }
  .fld input::placeholder { color: #a09a91; }

  .btn {
    border: 1px solid var(--navy-700); background: var(--navy-700); color: #fff;
    padding: 5px 14px; cursor: pointer; font-weight: 500; white-space: nowrap;
  }
  .btn.ghost { background: none; color: var(--navy-700); }
  .btn.ghost:hover { background: var(--navy-050); }
  .btn.mini { padding: 2px 9px; font-size: 11px; }

  .ck { display: flex; align-items: center; gap: 6px; }
  .msg { font-size: 12px; margin-left: auto; }
  .msg.ok { color: var(--ok); } .msg.err { color: var(--accent); }

  /* ============ bảng ============ */
  .grid { flex: 1; min-height: 0; overflow: auto; background: var(--card); }
  table { width: 100%; border-collapse: collapse; }
  th, td { padding: 5px 9px; text-align: left; white-space: nowrap;
           border-bottom: 1px solid var(--rule-2); }
  thead th {
    position: sticky; top: 0; z-index: 1; background: var(--card);
    border-bottom: 1px solid var(--rule); padding: 9px;
    font: 600 10px/1 var(--sans); letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted);
  }
  tbody tr:hover { background: var(--navy-050); }
  td.m { font: 400 11.5px var(--mono); color: #3d4854; }
  td.num { font: 400 11.5px var(--mono); text-align: right; }
  td.stt { font: 400 11.5px var(--mono); color: var(--muted); }
  td.loi { white-space: normal; max-width: 320px; color: var(--accent); font-size: 12px; }

  /* Rail 3px bên trái thay cho rừng pill bo tròn: quét mắt dọc một cột màu là đủ. */
  tbody td:first-child { box-shadow: inset 3px 0 0 #b9b3a8; }
  tr.r1 td:first-child { box-shadow: inset 3px 0 0 var(--navy-700); }
  tr.r2 td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
  tr.r3 td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
  tr.r9 td:first-child { box-shadow: inset 3px 0 0 #d99f2b; }
  tr.r3 { background: var(--accent-bg); }

  .tt { font-weight: 500; font-size: 12px; }
  .tt0 { color: var(--muted); } .tt1 { color: var(--navy-700); }
  .tt2 { color: var(--ok); } .tt9 { color: var(--warn); }
  .tt3 { color: var(--accent); font-weight: 600; }

  /* Nút gửi lại của từng dòng chỉ hiện khi rê chuột, không làm ồn khi quét mắt. */
  td.act { text-align: right; width: 1%; }
  td.act .btn { visibility: hidden; }
  tr:hover td.act .btn, td.act .btn:focus-visible { visibility: visible; }

  .trong { padding: 26px 9px; color: var(--muted); }

  /* Nháy một lần khi dòng vừa đổi trạng thái ở lần tự nạp — cho biết cái gì vừa chạy. */
  @keyframes nhay { from { background: #fdf3c8; } to { background: transparent; } }
  tr.moi { animation: nhay .4s ease-out; }

  /* ============ chân trang ============ */
  .statusbar {
    flex: none; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 7px 20px; background: var(--card); border-top: 1px solid var(--rule);
    font-size: 12px; color: var(--muted);
  }
  .chuthich { display: flex; gap: 14px; flex-wrap: wrap; }
  .chuthich span { display: flex; align-items: center; gap: 5px; }
  .chuthich i { width: 3px; height: 12px; display: inline-block; }
  .statusbar .sp { flex: 1; }
  .statusbar .dem { font: 500 12px var(--mono); color: var(--ink); }

  /* ============ thanh hành động ============ */
  .actionbar {
    position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 150%);
    display: flex; align-items: center; gap: 14px;
    background: var(--navy-900); color: #fff; padding: 9px 12px 9px 18px;
    box-shadow: 0 6px 22px rgba(13,42,82,.28);
    transition: transform .14s ease-out; z-index: 20;
  }
  .actionbar.hien { transform: translate(-50%, 0); }
  .actionbar b { font: 500 13px var(--mono); }
  .actionbar .btn.ghost { color: #fff; border-color: #fff; }
  .actionbar .btn.ghost:hover { background: rgba(255,255,255,.14); }
  .actionbar .btn.do { background: var(--accent); border-color: var(--accent); }

  @media (max-width: 1100px) {
    .meter { min-width: 210px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .live .dot { animation: none; }
    tr.moi { animation: none; }
    .actionbar { transition: none; }
  }