/* =====================================================================
   Sàng lọc Tim mạch — giao diện (bản v2)
   - Mobile (< 1100px): header dính trên cùng + thanh mục lục cuộn ngang,
     thanh nút thao tác cố định dưới đáy màn hình.
   - Desktop (>= 1100px): sidebar mục lục cố định bên trái, header trang
     dính trên cùng chứa nút thao tác, nội dung chia nhiều cột.
   ===================================================================== */

/* ---------- design tokens ---------- */
:root{
  color-scheme: light;
  --font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --bg:#F2F5F8;
  --surface:#FFFFFF;
  --surface-2:#F7F9FB;
  --surface-3:#EDF1F5;
  --ink:#0F1C2B;
  --ink-2:#2F3E50;
  --muted:#64748B;
  --line:#E3E8EE;
  --line-2:#CFD7E1;

  --primary:#0F766E;
  --primary-hover:#0B5F59;
  --primary-dark:#115E59;
  --primary-soft:#E3F3F1;
  --primary-ring:rgba(15,118,110,.22);
  --on-primary:#FFFFFF;

  --dark-btn:#1E293B;
  --dark-btn-hover:#0F172A;

  --gold:#A16207;
  --gold-soft:#FEF6DD;
  --alert:#C2410C;
  --danger:#DC2626;
  --hint:#9F1239;

  /* phân tầng nguy cơ (giữ tên biến để JS dùng: --low, --low-soft…) */
  --vlow:#64748B;   --vlow-soft:#F1F5F9;
  --low:#15803D;    --low-soft:#E6F6EC;
  --mid:#B45309;    --mid-soft:#FDF3DC;
  --high:#C2410C;   --high-soft:#FDE9DD;
  --vhigh:#B91C1C;  --vhigh-soft:#FDE4E4;

  /* sidebar */
  --side-bg:#0B2530;
  --side-bg-2:#0F2F3B;
  --side-ink:#E4EEF1;
  --side-muted:#8BA6B0;
  --side-active:rgba(45,212,191,.14);
  --side-active-ink:#5EEAD4;

  --radius:16px;
  --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(15,28,43,.05);
  --shadow:0 1px 2px rgba(15,28,43,.04), 0 6px 20px -10px rgba(15,28,43,.14);
  --shadow-lg:0 20px 50px -20px rgba(15,28,43,.35);
  --side-w:276px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#0B1218; --surface:#121B23; --surface-2:#16212A; --surface-3:#1B2832;
    --ink:#E8EEF3; --ink-2:#C5D0DA; --muted:#8C9BAB; --line:#22303C; --line-2:#2E3E4C;
    --primary:#2DB3A5; --primary-hover:#4CC7BA; --primary-dark:#7ADBD0; --primary-soft:#123430;
    --primary-ring:rgba(45,179,165,.3); --on-primary:#04201D;
    --dark-btn:#E2E8F0; --dark-btn-hover:#FFFFFF;
    --gold:#E7B75C; --gold-soft:#33291A; --alert:#F59E66; --danger:#F87171; --hint:#F9A8B8;
    --vlow:#A3AEBB; --vlow-soft:#1E2830;
    --low:#6FCB94;  --low-soft:#13301F;
    --mid:#E7B75C;  --mid-soft:#33291A;
    --high:#F0A070; --high-soft:#3A2418;
    --vhigh:#F49494; --vhigh-soft:#3D1E1E;
    --side-bg:#081016; --side-bg-2:#0D1820;
    --shadow-sm:0 1px 2px rgba(0,0,0,.3);
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0B1218; --surface:#121B23; --surface-2:#16212A; --surface-3:#1B2832;
  --ink:#E8EEF3; --ink-2:#C5D0DA; --muted:#8C9BAB; --line:#22303C; --line-2:#2E3E4C;
  --primary:#2DB3A5; --primary-hover:#4CC7BA; --primary-dark:#7ADBD0; --primary-soft:#123430;
  --primary-ring:rgba(45,179,165,.3); --on-primary:#04201D;
  --dark-btn:#E2E8F0; --dark-btn-hover:#FFFFFF;
  --gold:#E7B75C; --gold-soft:#33291A; --alert:#F59E66; --danger:#F87171; --hint:#F9A8B8;
  --vlow:#A3AEBB; --vlow-soft:#1E2830;
  --low:#6FCB94;  --low-soft:#13301F;
  --mid:#E7B75C;  --mid-soft:#33291A;
  --high:#F0A070; --high-soft:#3A2418;
  --vhigh:#F49494; --vhigh-soft:#3D1E1E;
  --side-bg:#081016; --side-bg-2:#0D1820;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
}

/* màu nhấn theo từng nhóm câu hỏi */
.acc-indigo{--acc:#4F46E5; --acc-soft:#EEF0FF;}
.acc-sky{--acc:#0284C7; --acc-soft:#E6F4FC;}
.acc-rose{--acc:#E11D48; --acc-soft:#FFEBEF;}
.acc-red{--acc:#DC2626; --acc-soft:#FDECEC;}
.acc-amber{--acc:#D97706; --acc-soft:#FEF4E2;}
.acc-orange{--acc:#EA580C; --acc-soft:#FFEFE5;}
.acc-violet{--acc:#7C3AED; --acc-soft:#F3EDFF;}
.acc-teal{--acc:#0F766E; --acc-soft:#E3F3F1;}
.acc-slate{--acc:#475569; --acc-soft:#EEF2F6;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .card{--acc-soft:color-mix(in srgb, var(--acc) 18%, var(--surface));}
}
:root[data-theme="dark"] .card{--acc-soft:color-mix(in srgb, var(--acc) 18%, var(--surface));}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:150px;}
body{
  margin:0; font-family:var(--font); font-size:15px; line-height:1.5;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
[hidden]:not([hidden=until-found i]){display:none !important;}
img{max-width:100%;}
a{color:var(--primary);}
h1,h2,h3{margin:0; font-weight:700; letter-spacing:-.01em; text-wrap:balance;}
button{font-family:inherit;}
.num{font-variant-numeric:tabular-nums;}
.ico{width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.ico-green{color:#16A34A;} .ico-violet{color:#7C3AED;} .ico-cyan{color:#0891B2;}

.wrap{display:none;}
body.authed .wrap{display:block;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 16px; border-radius:12px; border:1px solid transparent;
  font:600 14px/1.2 var(--font); cursor:pointer; white-space:nowrap; text-decoration:none;
  transition:background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .05s;
}
.btn:active:not([disabled]){transform:translateY(1px);}
.btn:focus-visible{outline:none; box-shadow:0 0 0 3px var(--primary-ring);}
.btn[disabled]{opacity:.45; cursor:not-allowed;}
.btn-block{width:100%;}
.btn-primary{background:var(--primary); color:var(--on-primary);}
.btn-primary:hover:not([disabled]){background:var(--primary-hover);}
.btn-dark{background:var(--dark-btn); color:var(--surface);}
.btn-dark:hover:not([disabled]){background:var(--dark-btn-hover);}
.btn-secondary{background:var(--surface); color:var(--ink); border-color:var(--line-2); box-shadow:var(--shadow-sm);}
.btn-secondary:hover:not([disabled]){border-color:var(--primary); color:var(--primary-dark);}
.btn-violet{background:#7C3AED; color:#fff;}
.btn-violet:hover:not([disabled]){background:#6D28D9;}
.btn-icon{width:44px; padding:0;}
.savebtn.notready{opacity:.55;}
.savebtn.saved{background:var(--low) !important; color:#fff !important; border-color:transparent !important;}

/* ---------- login ---------- */
.login-gate{
  position:fixed; inset:0; z-index:2000000; display:flex; align-items:center; justify-content:center; padding:20px;
  background:radial-gradient(1200px 600px at 10% 0%, #134E4A 0%, transparent 60%), radial-gradient(900px 500px at 100% 100%, #1E3A5F 0%, transparent 55%), #0B1620;
}
.login-gate[hidden]{display:none;}
.login-card{
  width:100%; max-width:380px; background:var(--surface); border-radius:20px; padding:28px 24px 24px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
}
.login-mark{width:52px; height:52px; border-radius:16px; margin:0 auto 14px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#14B8A6,#0F766E);}
.login-mark .ico{width:26px; height:26px;}
.login-card h2{text-align:center; font-size:20px;}
.login-sub{text-align:center; color:var(--muted); font-size:13px; margin:4px 0 20px;}
.login-card label{display:block; font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:6px;}
.login-card input{
  width:100%; height:46px; padding:0 14px; margin-bottom:14px; border-radius:12px;
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink); font:inherit; font-size:15px;
}
.login-card input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-ring);}
.login-error{color:var(--danger); font-size:13px; margin:-4px 0 12px;}

/* ---------- sidebar / mobile header ---------- */
.sidebar{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--surface) 90%, transparent);
  -webkit-backdrop-filter:saturate(1.5) blur(14px); backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top, 0px);
}
.brand{display:flex; align-items:center; gap:10px; padding:10px 16px 4px;}
.brand-mark{
  width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,#14B8A6 0%,#0F766E 100%); box-shadow:0 4px 12px -4px rgba(15,118,110,.6);
}
.brand-mark .ico{width:19px; height:19px;}
.brand-text{display:flex; flex-direction:column; min-width:0;}
.brand-title{font-weight:700; font-size:15px; line-height:1.2; letter-spacing:-.01em;}
.brand-sub{font-size:11.5px; color:var(--muted); line-height:1.3;}
.nav-label{display:none;}
.side-foot{display:none;}

.tabs{
  position:relative; display:flex; gap:6px; overflow-x:auto; overscroll-behavior-x:contain;
  padding:8px 16px 10px; scrollbar-width:none; counter-reset:tab;
}
.tabs::-webkit-scrollbar{display:none;}
.tab{
  counter-increment:tab; flex:none; display:inline-flex; align-items:center; gap:7px;
  padding:6px 12px 6px 6px; border-radius:999px; text-decoration:none; white-space:nowrap;
  font-size:13px; font-weight:600; color:var(--ink-2); background:var(--surface-3); border:1px solid transparent;
  transition:background-color .15s, color .15s;
}
.tab::before{
  content:counter(tab, decimal-leading-zero); display:inline-grid; place-items:center;
  width:22px; height:22px; border-radius:50%; font:600 10.5px/1 var(--mono);
  background:var(--surface); color:var(--muted);
}
.tab.active{background:var(--primary); color:var(--on-primary);}
.tab.active::before{background:rgba(255,255,255,.22); color:var(--on-primary);}

/* ---------- main ---------- */
.main{padding:0 16px calc(92px + env(safe-area-inset-bottom, 0px));}
.content{max-width:1180px; margin:0 auto;}

.topbar{padding:18px 0 14px;}
.page-title{text-align:center;}
.title-eyebrow-row{text-align:left;}
.page-title .eyebrow{display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--primary);}
.page-title h1{font-size:21px; line-height:1.25; margin-top:2px;}
.page-title p{margin:6px 0 0; color:var(--muted); font-size:13.5px;}

/* thanh nút thao tác: mobile = cố định dưới đáy */
.topbar-btnrow{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; gap:8px; padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter:saturate(1.5) blur(14px); backdrop-filter:saturate(1.5) blur(14px);
  border-top:1px solid var(--line); box-shadow:0 -10px 30px -18px rgba(15,28,43,.35);
}
.topbar-btnrow #btnSave, .topbar-btnrow #btnTraKetQua{flex:1; min-height:48px;}
.topbar-btnrow #btnLicense{min-height:48px; width:48px;}

/* ---------- consent gate ---------- */
.gate{
  display:grid; grid-template-columns:auto 1fr; gap:4px 14px; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow); margin-bottom:16px;
  border-left:4px solid var(--primary);
}
.gate-icon{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary);}
.gate-icon .ico{width:22px; height:22px;}
.gate h2{font-size:16px; line-height:1.35;}
.gate-sub{margin:3px 0 0; font-size:13px; color:var(--muted);}
.seg{grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px;}
.seg button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px;
  border-radius:12px; border:1.5px solid var(--line-2); background:var(--surface); color:var(--ink);
  font-weight:700; font-size:15px; cursor:pointer; transition:.15s;
}
.seg button:hover{border-color:var(--primary);}
#consentYes .ico{color:var(--low);} #consentNo .ico{color:var(--danger);}
#consentYes.on{background:var(--primary); border-color:var(--primary); color:var(--on-primary);}
#consentYes.on .ico{color:var(--on-primary);}
#consentNo.on{background:var(--danger); border-color:var(--danger); color:#fff;}
#consentNo.on .ico{color:#fff;}
.gate-note{
  grid-column:1/-1; display:none; margin-top:12px; padding:10px 12px; border-radius:10px;
  background:var(--vhigh-soft); color:var(--vhigh); font-size:13.5px; font-weight:500;
}
.gate-note.show{display:block;}

#form-body{display:none;}
#form-body.show{display:block;}

/* ---------- cards ---------- */
.card{
  --acc:var(--primary); --acc-soft:var(--primary-soft);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; margin-bottom:16px; box-shadow:var(--shadow); scroll-margin-top:150px;
}
.card > h2, .ds-head > h2{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px;
  font-size:15.5px; line-height:1.3; margin-bottom:14px; color:var(--ink);
}
.card > h2::before{
  content:""; width:4px; height:20px; border-radius:4px; background:var(--acc); flex:none;
}
.card > h2.h2-split{margin-top:22px; padding-top:18px; border-top:1px dashed var(--line-2);}
.sec-code{
  font:600 11.5px/1 var(--mono); letter-spacing:.02em; padding:5px 8px; border-radius:7px;
  background:var(--acc-soft); color:var(--acc);
}
.sep{display:none;}
.sub{font-size:13px; color:var(--muted);}
.subbox{display:block;}

/* ---------- fields ---------- */
.grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.grid.g1{grid-template-columns:1fr;}
.a-grid{grid-template-columns:1fr;}
.b-grid > :nth-child(1){grid-column:1/-1;}
.b-grid > :nth-child(n+4){grid-column:1/-1;}

.field{display:flex; flex-direction:column; gap:6px; min-width:0;}
.grid{align-items:end;}
.field label{
  display:block; font-size:13.5px; font-weight:600; color:var(--ink-2); line-height:1.35;
}
.field label .code{margin-right:7px; vertical-align:1px;}
.field label .req{margin-left:2px;}
.code, .riskitem .txt > b{
  display:inline-block; font:600 11px/1 var(--mono); letter-spacing:.02em; padding:4px 6px; border-radius:6px;
  background:var(--surface-3); color:var(--muted); flex:none; font-style:normal;
}
.req{color:var(--danger); font-weight:700; margin-left:2px;}
.u{font-weight:500; color:var(--muted); font-size:12px;}
.upper{text-transform:uppercase;}
.upper::placeholder{text-transform:none;}

.field input, .field select, .search-input input{
  width:100%; min-height:44px; padding:0 12px; border-radius:var(--radius-sm);
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink);
  font:500 15.5px var(--font); transition:border-color .15s, box-shadow .15s, background-color .15s;
}
.field select{
  appearance:none; -webkit-appearance:none; padding-right:34px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
.field input::placeholder, .search-input input::placeholder{color:color-mix(in srgb, var(--muted) 70%, transparent); font-weight:400;}
.field input:hover, .field select:hover{border-color:color-mix(in srgb, var(--primary) 45%, var(--line-2));}
.field input:focus, .field select:focus, .search-input input:focus{
  outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-ring);
}
.field input[type=number]{-moz-appearance:textfield;}
.field input[type=number]::-webkit-outer-spin-button,
.field input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.field.dim{opacity:.5;}
.field.dim input, .field.dim select{cursor:not-allowed; background:var(--surface-3);}
.field input:disabled, .field select:disabled{cursor:not-allowed; background:var(--surface-3);}
.field .hint{font-size:12px; color:var(--muted);}

.readout{
  min-height:44px; display:flex; align-items:center; padding:0 12px; border-radius:var(--radius-sm);
  background:var(--primary-soft); color:var(--primary-dark); font-weight:700; font-size:17px;
  border:1px dashed color-mix(in srgb, var(--primary) 40%, transparent);
}

/* cảnh báo đỏ dưới ô nhập (SĐT, mã BN, tỉnh, xã) */
.field.invalid input, .field.invalid select{
  border-color:var(--danger); background:color-mix(in srgb, var(--danger) 6%, var(--surface));
}
.field.invalid input:focus{box-shadow:0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent); border-color:var(--danger);}
.field.invalid > label{color:var(--danger);}
.field-msg{
  display:flex; gap:6px; align-items:flex-start; font-size:12.5px; font-weight:500; line-height:1.4; color:var(--danger);
}
.field-msg::before{
  content:"!"; flex:none; width:16px; height:16px; margin-top:1px; border-radius:50%;
  display:inline-grid; place-items:center; font:700 11px/1 var(--font); color:#fff; background:var(--danger);
}

/* ô chọn có danh sách sổ xuống (B06, B07, B08) */
.combo{position:relative;}
.combo input{padding-right:36px;}
.combo-caret{
  position:absolute; right:12px; top:22px; width:12px; height:12px; margin-top:-6px; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center;
  transition:transform .15s;
}
.combo:has(input[aria-expanded="true"]) .combo-caret{transform:rotate(180deg);}
.combo-list{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:45; margin:0; padding:6px; list-style:none;
  max-height:min(300px, 48vh); overflow-y:auto; overscroll-behavior:contain;
  background:var(--surface); border:1px solid var(--line-2); border-radius:12px; box-shadow:var(--shadow-lg);
}
.combo-list li{padding:9px 10px; border-radius:8px; font-size:14.5px; line-height:1.3; cursor:pointer; color:var(--ink);}
.combo-list li[data-i]:hover{background:var(--surface-3);}
.combo-list li.active{background:var(--primary-soft); color:var(--primary-dark);}
.combo-list li.selected{font-weight:700;}
.combo-list li.selected::after{content:"✓"; float:right; color:var(--primary);}
.combo-sub{display:block; font-size:12px; color:var(--muted); margin-top:1px;}
.combo-list li.combo-head{
  cursor:default; font-size:11.5px; font-weight:700; letter-spacing:.02em; color:var(--muted);
  padding:6px 10px 8px; border-bottom:1px solid var(--line); border-radius:0; margin-bottom:4px;
}
.combo-list li.combo-empty{cursor:default; color:var(--muted); font-size:13.5px; font-style:italic;}

/* nút toàn màn hình: chỉ hiện trên máy tính */
.fs-btn{display:none;}
.fs-btn .ico-min{display:none;}
.fs-btn.is-on .ico-max{display:none;}
.fs-btn.is-on .ico-min{display:block;}
.fs-btn.is-on{border-color:var(--danger); color:var(--danger);}

/* tìm kiếm */
.searchbox{padding:14px; border-radius:12px; background:var(--surface-2); border:1px solid var(--line); margin-bottom:18px;}
.searchbox > label{font-weight:600; color:var(--ink-2);}
.search-row{display:flex; gap:8px;}
.search-input{position:relative; flex:1; min-width:0;}
.search-input .ico{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none;}
.search-input input{padding-left:40px;}
.search-result:empty{display:none;}
.search-result{margin-top:4px;}

/* nút X01–X03 */
.actions-row{display:grid; grid-template-columns:1fr; gap:8px; margin-top:18px;}
.actions-row .btn b{font:600 11px var(--mono); opacity:.7; margin-right:4px;}
#patientActionsRow button.btn-locked{opacity:.4; cursor:not-allowed; filter:grayscale(.3);}

/* nhân trắc: dạng ô số liệu */
.nt-grid{grid-template-columns:1fr 1fr; gap:10px;}
.nt-grid .field-row{
  padding:12px; border-radius:12px; background:var(--surface-2); border:1px solid var(--line); gap:8px;
}
.nt-grid .field-row label{font-size:13px;}
.nt-grid .field-row input, .nt-grid .field-row select{font-size:17px; font-weight:600; font-variant-numeric:tabular-nums;}
.nt-grid .is-readout{background:var(--primary-soft); border-color:color-mix(in srgb, var(--primary) 25%, transparent);}
.nt-grid .is-readout .readout{background:var(--surface); border-style:solid; border-color:color-mix(in srgb, var(--primary) 25%, transparent);}

/* dòng 1 câu + 1 ô nhập (E05) */
.field-rows{margin-top:6px;}
.field.e05-row{
  flex-direction:row; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 0 2px; border-top:1px solid var(--line);
}
.field.e05-row label{flex:1; font-weight:500; color:var(--ink); font-size:14.5px;}
.field.e05-row input{width:96px; flex:none; text-align:center;}

/* ---------- câu hỏi Không / Có ---------- */
.risklist{display:flex; flex-direction:column;}
.riskitem{
  display:flex; align-items:center; gap:12px; padding:12px 0;
  border-bottom:1px solid var(--line); transition:opacity .15s, background-color .15s;
}
.riskitem:first-child{padding-top:2px;}
.riskitem:last-child{border-bottom:none;}
.riskitem.dim{opacity:.5;}
.riskitem .txt{flex:1; min-width:0; font-size:14.5px; line-height:1.45; color:var(--ink);}
.riskitem .txt > b{margin-right:8px; vertical-align:1px;}
.riskitem .lbl{font-weight:500;}
.riskitem .note{display:block; font-size:12.5px; color:var(--muted); margin-top:3px;}
.hint{font-style:italic; font-size:.86em; color:var(--hint); font-weight:400;}
.hint-plain{font-size:.86em;}
.em{font-style:italic; color:var(--hint);}
.lbl-alert{color:var(--danger); text-transform:uppercase; letter-spacing:.02em;}
.riskitem input[type=checkbox]{width:20px; height:20px; accent-color:var(--primary); flex:none;}

.radio2{display:inline-flex; flex:none; gap:6px; align-items:center;}
.rbtn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-width:78px; min-height:40px; padding:0 12px; border-radius:10px;
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2);
  font-size:14px; font-weight:600; cursor:pointer; user-select:none; white-space:nowrap;
  transition:background-color .15s, border-color .15s, color .15s, opacity .15s;
}
.rbtn:hover{border-color:var(--primary);}
.rbtn input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;}
.rbtn .dot{
  width:16px; height:16px; border-radius:50%; border:2px solid var(--line-2); background:var(--surface);
  flex:none; position:relative; transition:border-color .15s, background-color .15s;
}
.rbtn input:checked + .dot{border-color:var(--primary); background:var(--primary);}
.rbtn input:checked + .dot::after{content:""; position:absolute; inset:3px; border-radius:50%; background:var(--on-primary);}
.rbtn:has(input:checked){border-color:var(--primary); background:var(--primary-soft); color:var(--primary-dark);}
.rbtn:has(input[value="0"]:checked){border-color:var(--ink-2); background:var(--surface-3); color:var(--ink);}
.rbtn:has(input[value="0"]:checked) .dot{border-color:var(--ink-2); background:var(--ink-2);}
.rbtn:has(input:focus-visible){box-shadow:0 0 0 3px var(--primary-ring);}
.rbtn:has(input:disabled){cursor:not-allowed;}
.rbtn.dim{opacity:.45;}

.flag{
  font-size:11px; font-weight:700; color:var(--gold); background:var(--gold-soft);
  border-radius:999px; padding:3px 8px; white-space:nowrap; flex:none;
}

/* J01 (câu tiêu đề của nhóm) */
.riskitem.risk-stack{flex-direction:column; align-items:stretch; gap:10px; padding:4px 0 14px;}
.riskitem.risk-stack .radio2{align-self:flex-end;}

/* Khung M01–M10 (Tiền sử bệnh): mỗi câu 1 hàng, điện thoại xếp dọc (câu hỏi trên,
   khung "Ghi rõ" dưới), từ tablet trở lên xếp 2 cột cùng hàng (trái = câu hỏi, phải = Ghi rõ). */
.m-risklist{display:flex; flex-direction:column;}
.m-row{
  display:flex; flex-direction:column; gap:8px; padding:12px 0;
  border-bottom:1px solid var(--line);
}
.m-row:last-child{border-bottom:none;}
.m-row .riskitem{border-bottom:none; padding:0;}
.field.m-specify{
  background:var(--surface-3); border-radius:10px; padding:10px 12px; margin:0;
}
.field.m-specify label{font-size:12.5px;}
@media (min-width:640px){
  .m-row{
    flex-direction:row; align-items:center; gap:20px;
  }
  .m-row .riskitem{flex:1 1 0; min-width:0;}
  .m-row .field.m-specify{flex:1 1 0; min-width:0;}
}
.txt.is-key{color:#15803D;}
.txt.is-key > b{background:#DCFCE7; color:#15803D;}

/* K01–K08 */
.txt.k-normal .lbl{color:#15803D; font-weight:600;}
.txt.k-normal > b{background:#DCFCE7; color:#15803D;}
.txt.k-alert .lbl{color:var(--danger); font-weight:600;}
.txt.k-alert > b{background:var(--vhigh-soft); color:var(--danger);}
.riskitem.k-auto-yes{
  opacity:1; background:var(--low-soft); border-radius:12px; padding-left:12px; padding-right:12px;
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--low) 60%, transparent); border-bottom-color:transparent;
}
.riskitem.k-auto-yes .txt, .riskitem.k-auto-yes .lbl{color:var(--low); font-weight:700;}
.riskitem.k-auto-yes .rbtn:has(input:checked){border-color:var(--low); background:var(--low); color:#fff;}
.riskitem.k-auto-yes .rbtn input:checked + .dot{border-color:#fff; background:#fff;}
.riskitem.k-auto-yes .rbtn input:checked + .dot::after{background:var(--low);}

/* tổng điểm YTNC */
.scorebar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:12px; padding:12px 14px; border-radius:12px;
  background:linear-gradient(90deg, var(--acc-soft), color-mix(in srgb, var(--acc-soft) 40%, var(--surface)));
  border:1px solid color-mix(in srgb, var(--acc) 22%, transparent);
}
.scorebar .lbl{font-size:13px; font-weight:600; color:var(--ink-2);}
.scorebar .val{font:700 18px var(--mono); color:var(--acc); white-space:nowrap;}

/* bố cục D,E,Y,F,J,H: mobile 1 cột theo thứ tự D,E,Y,F,J,H */
.dyfjeh-wrap{display:flex; flex-direction:column;}
.col-left, .col-right{display:contents;}

/* hỏi nhập xét nghiệm */
.card.callout{
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:12px 14px;
  background:linear-gradient(135deg, #F5F0FF 0%, var(--surface) 70%);
  border-color:#DDD0FB;
}
.callout-icon{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:#EDE4FF; color:#7C3AED;}
.callout-icon .ico{width:21px; height:21px;}
.card.callout > h2{margin:0; font-size:15px;}
.card.callout > h2::before{display:none;}
.card.callout .radio2{grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.card.callout .rbtn{min-height:44px;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .card.callout{background:linear-gradient(135deg, #221A38 0%, var(--surface) 70%); border-color:#3A2E5C;}
  :root:not([data-theme="light"]) .callout-icon{background:#2D2350; color:#C4B5FD;}
}
:root[data-theme="dark"] .card.callout{background:linear-gradient(135deg, #221A38 0%, var(--surface) 70%); border-color:#3A2E5C;}
:root[data-theme="dark"] .callout-icon{background:#2D2350; color:#C4B5FD;}

/* xét nghiệm */
.xn-grid{grid-template-columns:1fr; gap:10px;}
.xn-grid .field{padding:12px; border-radius:12px; background:var(--surface-2); border:1px solid var(--line); gap:8px;}
.xn-grid .ctrl{display:flex; gap:8px; min-width:0;}
.xn-grid .ctrl input{flex:1 1 auto; min-width:0; font-size:16.5px; font-weight:600; font-variant-numeric:tabular-nums;}
.xn-grid .ctrl select{flex:0 0 auto; width:auto; min-width:104px; font-size:14px;}
.xn-grid .ctrl select.xn-type{min-width:118px;}
.xn-grid .is-readout{background:var(--primary-soft); border-color:color-mix(in srgb, var(--primary) 25%, transparent);}
.xn-grid .is-readout .readout{background:var(--surface); border-style:solid; border-color:color-mix(in srgb, var(--primary) 25%, transparent);}

/* ---------- nút các bước DNL ---------- */
.cta-wrap{margin-bottom:16px;}
.cta{
  width:100%; display:flex; align-items:center; gap:12px; min-height:56px; padding:10px 16px;
  border:none; border-radius:14px; cursor:pointer; text-align:left;
  background:linear-gradient(135deg, #0F766E 0%, #115E59 100%); color:#fff;
  box-shadow:0 10px 24px -12px rgba(15,118,110,.7);
  font:700 15px/1.3 var(--font); transition:transform .1s, box-shadow .15s, filter .15s;
}
.cta:hover{filter:brightness(1.06); box-shadow:0 14px 28px -12px rgba(15,118,110,.8);}
.cta:active{transform:translateY(1px);}
.cta:focus-visible{outline:none; box-shadow:0 0 0 3px var(--primary-ring), 0 10px 24px -12px rgba(15,118,110,.7);}
.cta-code{font:600 11.5px/1 var(--mono); padding:6px 8px; border-radius:7px; background:rgba(255,255,255,.16); color:#FDE68A; flex:none;}
.cta-text{flex:1;}
.cta .ico{width:20px; height:20px; opacity:.85;}
.cta-gold{background:linear-gradient(135deg, #FDE68A 0%, #FBBF24 100%); color:#3B2A05; box-shadow:0 10px 24px -12px rgba(217,119,6,.7);}
.cta-gold .cta-code{background:rgba(59,42,5,.12); color:#3B2A05;}

/* ---------- bảng ---------- */
.twrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:12px; border:1px solid var(--line);}
table.matrix, table.mgmt{width:100%; border-collapse:collapse; font-size:12.5px;}
table.matrix th, table.matrix td, table.mgmt th, table.mgmt td{
  border:1px solid var(--line); padding:8px 6px; text-align:center; vertical-align:middle;
}
table.matrix tr:first-child > *, table.mgmt tr:first-child > *{border-top:none;}
table.matrix tr > :first-child, table.mgmt tr > :first-child{border-left:none;}
table.matrix tr > :last-child, table.mgmt tr > :last-child{border-right:none;}
table.matrix tr:last-child > *, table.mgmt tr:last-child > *{border-bottom:none;}
table.matrix th, table.mgmt th{background:var(--surface-3); color:var(--ink-2); font-weight:700; font-size:12px;}
table.matrix th.rowlabel, table.mgmt th.rowlabel{background:var(--surface-2); text-align:center; padding-left:10px;}
th.bprow{font-weight:400 !important; font-size:11px !important; color:var(--muted) !important;}

#matrixTable{min-width:560px;}
#matrixTable th:first-child, #matrixTable td:first-child{width:16%;}
table.matrix td.hit, table.mgmt td.hit{
  outline:3px solid var(--ink); outline-offset:-3px; font-weight:800;
  box-shadow:inset 0 0 0 6px rgba(255,255,255,.35);
}
table.matrix td.risk-vlow{background:var(--vlow-soft); color:var(--vlow); font-weight:600;}
table.matrix td.risk-low{background:#DCFCE7; color:#166534; font-weight:600;}
table.matrix td.risk-mid{background:#FEF3C7; color:#92400E; font-weight:600;}
table.matrix td.risk-high{background:#FECACA; color:#991B1B; font-weight:600;}
table.matrix td.risk-vhigh{background:#B91C1C; color:#fff; font-weight:700;}

table.mgmt{min-width:760px; font-size:12px;}
table.mgmt td{line-height:1.35;}
table.mgmt th:nth-child(n+4), table.mgmt td:nth-child(n+4){width:15%;}
table.mgmt td.mg-gray{background:#E5E7EB; color:#15803D; font-style:italic; font-weight:600;}
table.mgmt td.mg-yellow{background:#FEF3C7; color:#713F12; font-weight:600;}
table.mgmt td.mg-tan{background:#FDE68A; color:#713F12; font-weight:600;}
table.mgmt td.mg-peach{background:#FDBA74; color:#7C2D12; font-weight:600;}
table.mgmt td.mg-olivemed{background:#CA8A04; color:#1C1303; font-weight:700;}
table.mgmt td.mg-olivedark{background:#854D0E; color:#fff; font-weight:700;}
table.mgmt td.mg-red{background:#991B1B; color:#fff; font-weight:700;}

/* FINDRISC */
#findriscTable{font-size:15px;}
#findriscTable th{font-size:12.5px;}
#findriscTable td{padding:10px 6px; font-weight:600;}
table.matrix tr.hitrow td{outline:3px solid var(--ink); outline-offset:-3px; font-weight:800;}
table.matrix tr.risk-low td{background:#DCFCE7; color:#166534;}
table.matrix tr.risk-mid td{background:#FEF3C7; color:#92400E;}
table.matrix tr.risk-high td{background:#FECACA; color:#991B1B;}
table.matrix tr.risk-yellow td{background:#FEF9C3; color:#854D0E;}
table.matrix tr.risk-yellowdark td{background:#FACC15; color:#422006;}
table.matrix tr.risk-brightred td{background:#EF4444; color:#fff;}
table.matrix tr.risk-vhigh td{background:#991B1B; color:#fff;}

#adaCalc{font-size:13.5px;}
#adaCalc th{font-size:11.5px; text-transform:uppercase; letter-spacing:.04em;}
#adaCalc td{padding:10px 8px;}
#adaCalc td:first-child{font:600 12px var(--mono); color:var(--muted); width:14%;}
#adaCalc td:nth-child(2){text-align:left; font-weight:500;}
#adaCalc td:nth-child(3){color:var(--muted);}
#adaCalc td:last-child{font-weight:700; white-space:nowrap; width:18%;}
#adaCalc tr:nth-child(even) td{background:var(--surface-2);}
#adaCalc td.blank-cell{background:var(--surface) !important;}
#adaCalc tr.totalrow td{background:var(--acc-soft, var(--primary-soft)) !important; font-weight:700; border-top:2px solid var(--line-2); text-align:right; padding-right:12px;}
#adaCalc tr.totalrow td.totalscore{text-align:center; font:800 22px var(--mono); color:var(--acc, var(--primary)); padding-right:8px;}

/* ---------- kết luận ---------- */
.resultcard{
  position:relative; overflow:hidden; border-radius:var(--radius); padding:18px 18px 18px 22px; margin-bottom:16px;
  border:1px solid var(--line); box-shadow:var(--shadow); background:var(--surface);
}
.resultcard::before{content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:currentColor;}
.resultcard .eyebrow{font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin-bottom:8px;}
.resultcard .desc{font-size:14.5px; color:var(--ink); line-height:1.55; padding:8px 0; border-top:1px solid color-mix(in srgb, currentColor 18%, transparent);}
.resultcard .desc b{color:inherit;}
.rc-vlow{background:var(--vlow-soft); color:var(--vlow);}
.rc-low{background:var(--low-soft); color:var(--low);}
.rc-mid{background:var(--mid-soft); color:var(--mid);}
.rc-high{background:var(--high-soft); color:var(--high);}
.rc-vhigh{background:var(--vhigh-soft); color:var(--vhigh);}
.rc-none{background:var(--surface-2); color:var(--muted);}
.resultcard .desc{color:var(--ink);}

/* ---------- danh sách đã lưu ---------- */
.ds-head{display:flex; flex-direction:column; gap:4px; margin-bottom:14px;}
.ds-head > h2{margin-bottom:0;}
.ds-head > h2::before{content:""; width:4px; height:20px; border-radius:4px; background:var(--acc); flex:none;}
.dbstatus{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted);}
.dot{width:8px; height:8px; border-radius:50%; background:var(--muted); flex:none;}
.dot.on{background:var(--low); box-shadow:0 0 0 3px color-mix(in srgb, var(--low) 25%, transparent);}
.dot.off{background:var(--vhigh); box-shadow:0 0 0 3px color-mix(in srgb, var(--vhigh) 22%, transparent);}
.ds-actions{display:grid; grid-template-columns:1fr; gap:8px; margin-bottom:10px;}
.import-status{text-align:center; margin-bottom:10px;}
.import-status:empty{display:none;}
.savedlist{display:flex; flex-direction:column; gap:8px;}
.savedlist > .sub{padding:24px 12px; text-align:center; border:1px dashed var(--line-2); border-radius:12px; background:var(--surface-2);}
.savedlist .twrap table.matrix{font-size:12.5px !important; min-width:640px;}
.savedlist .twrap table.matrix td{text-align:left;}
.savedlist .twrap table.matrix tr:nth-child(even) td{background:var(--surface-2);}
.saveditem{
  border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:var(--surface);
  display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:13.5px;
}
.saveditem .who{font-weight:600;}
.saveditem .meta{color:var(--muted); font-size:12px;}
.pill{font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:999px; flex:none;}

.foot{text-align:center; font-size:12.5px; color:var(--muted); margin:20px 0 8px; line-height:1.6;}

/* ---------- toast & modal ---------- */
#toast{
  position:fixed; left:50%; bottom:calc(92px + env(safe-area-inset-bottom, 0px)); z-index:100;
  transform:translateX(-50%) translateY(16px); max-width:calc(100vw - 32px);
  background:var(--ink); color:var(--surface); padding:12px 18px; border-radius:12px;
  font-size:14px; font-weight:600; box-shadow:var(--shadow-lg);
  opacity:0; pointer-events:none; transition:.25s; text-align:center;
}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

.modal-overlay{
  position:fixed; inset:0; z-index:100000; padding:20px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(8,15,24,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.modal-box{
  width:100%; max-width:400px; background:var(--surface); border-radius:18px; padding:22px;
  border:1px solid var(--line); box-shadow:var(--shadow-lg);
}
.modal-box h3{font-size:17px; margin-bottom:6px;}
.modal-box .modal-desc{font-size:13.5px; color:var(--muted); margin:0 0 16px; line-height:1.5;}
.modal-box input[type=date], .modal-box input[type=password]{
  width:100%; min-height:46px; padding:0 12px; border-radius:12px; border:1px solid var(--line-2);
  background:var(--surface); color:var(--ink); font:inherit; font-size:15px;
}
.modal-box input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-ring);}
.modal-actions{display:flex; gap:8px; margin-top:18px; flex-wrap:wrap;}
.modal-actions button{
  flex:1; min-height:44px; padding:0 12px; border-radius:12px; border:1px solid transparent;
  font-weight:700; font-size:14px; cursor:pointer; white-space:nowrap;
}
#expirySave, #pinConfirm, #traKetQuaYes{background:var(--primary); color:var(--on-primary);}
#expiryCancel, #pinCancel, #traKetQuaNo{background:var(--surface-3); color:var(--ink);}
#expiryClear{background:transparent; color:var(--danger); border-color:var(--danger);}

/* Modal "Kết quả giả định" (rộng hơn modal mặc định để chứa bảng so sánh) */
.modal-box-wide{max-width:640px;}
.modal-box-wide .matrix td, .modal-box-wide .matrix th{font-size:12.5px; padding:6px 8px;}
.gd-hyp{font-weight:700; color:var(--primary);}
#gdModalPdf{background:var(--primary); color:var(--on-primary);}
#gdModalClose{background:var(--surface-3); color:var(--ink);}
.btn-gd{
  min-height:30px; padding:0 10px; border-radius:8px; border:1px solid var(--danger);
  background:transparent; color:var(--danger); font-weight:700; font-size:12px; cursor:pointer; white-space:nowrap;
}
.btn-gd:hover{background:var(--danger); color:#fff;}
@media (max-width:520px){
  .modal-box-wide{max-width:calc(100vw - 32px);}
}

/* điện thoại nhỏ: nút Không/Có gọn hơn để chừa chỗ cho câu hỏi */
@media (max-width:520px){
  .card{padding:16px 14px;}
  .riskitem{gap:10px;}
  .riskitem .txt{font-size:14px;}
  .radio2{gap:5px;}
  .rbtn{min-width:0; min-height:40px; padding:0 11px; font-size:13.5px;}
  .rbtn .dot{display:none;}
  .card.callout .rbtn .dot, .gate .dot{display:inline-block;}
  .page-title h1{font-size:19px;}
  .page-title p{font-size:13px;}
}

/* =====================================================================
   TABLET (>= 640px)
   ===================================================================== */
@media (min-width:640px){
  .main{padding-left:24px; padding-right:24px;}
  .card{padding:20px;}
  .a-grid{grid-template-columns:1fr 1fr;}
  .nt-grid{grid-template-columns:repeat(4, 1fr);}
  .actions-row{grid-template-columns:repeat(3, 1fr);}
  .ds-actions{display:flex; flex-wrap:wrap; justify-content:flex-start;}
  .ds-head{flex-direction:row; align-items:center; justify-content:space-between; flex-wrap:wrap;}
  .gate{grid-template-columns:auto 1fr auto; padding:20px 22px;}
  .seg{grid-column:auto; margin-top:0; grid-template-columns:auto auto;}
  .seg button{min-width:120px;}
  .card.callout{grid-template-columns:auto 1fr auto;}
  .card.callout .radio2{grid-column:auto; display:inline-flex;}
  .card.callout .rbtn{min-width:96px;}
  .page-title h1{font-size:24px;}
}

/* =====================================================================
   DESKTOP (>= 1100px): sidebar + header dính
   ===================================================================== */
@media (min-width:1100px){
  body{font-size:15px;}
  body.authed .wrap{display:grid; grid-template-columns:var(--side-w) minmax(0,1fr); min-height:100vh;}
  html{scroll-padding-top:110px;}

  .sidebar{
    top:0; height:100vh; display:flex; flex-direction:column;
    background:linear-gradient(180deg, var(--side-bg) 0%, var(--side-bg-2) 100%);
    -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom:none; border-right:1px solid rgba(255,255,255,.04);
    color:var(--side-ink); padding:0;
  }
  .brand{padding:24px 22px 22px; gap:12px; border-bottom:1px solid rgba(255,255,255,.07);}
  .brand-mark{width:40px; height:40px; border-radius:12px;}
  .brand-title{font-size:16px; color:#fff;}
  .brand-sub{color:var(--side-muted); font-size:12px;}
  .nav-label{display:block; padding:20px 22px 8px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--side-muted);}
  .tabs{
    flex:1; flex-direction:column; gap:2px; overflow-x:visible; overflow-y:auto; padding:0 12px 16px;
    scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.15) transparent;
  }
  .tab{
    padding:8px 10px; border-radius:10px; background:transparent; color:var(--side-ink);
    font-size:13.5px; font-weight:500; white-space:normal; line-height:1.3;
  }
  .tab::before{width:24px; height:24px; background:rgba(255,255,255,.06); color:var(--side-muted); font-size:10.5px;}
  .tab:hover{background:rgba(255,255,255,.05);}
  .tab.active{background:var(--side-active); color:var(--side-active-ink); font-weight:600; box-shadow:inset 3px 0 0 var(--side-active-ink);}
  .tab.active::before{background:var(--side-active-ink); color:var(--side-bg);}
  .side-foot{
    display:flex; gap:10px; align-items:flex-start; margin:0 16px 18px; padding:12px 14px; border-radius:12px;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
    font-size:12px; line-height:1.5; color:var(--side-muted);
  }
  .side-foot .ico{width:16px; height:16px; margin-top:2px; color:var(--side-active-ink);}

  .main{padding:0 36px 40px; min-width:0;}
  .content{max-width:1240px;}

  .topbar{
    position:sticky; top:0; z-index:40; margin:0 -36px 22px; padding:16px 36px;
    display:flex; align-items:center; justify-content:space-between; gap:24px;
    background:color-mix(in srgb, var(--bg) 86%, transparent);
    -webkit-backdrop-filter:saturate(1.5) blur(14px); backdrop-filter:saturate(1.5) blur(14px);
    border-bottom:1px solid var(--line);
  }
  .page-title{min-width:0; flex:1;}
  .page-title h1{font-size:21px;}
  .page-title p{margin-top:2px; font-size:13px;}
  .topbar-btnrow{
    position:static; padding:0; background:none; border:none; box-shadow:none;
    -webkit-backdrop-filter:none; backdrop-filter:none; flex:none;
  }
  .topbar-btnrow #btnSave, .topbar-btnrow #btnTraKetQua{flex:none; min-height:44px; padding:0 18px;}
  .topbar-btnrow #btnLicense{min-height:44px; width:44px;}
  .fs-btn{display:inline-flex;}
  .fs-btn[hidden]{display:none;}

  .card{padding:22px 24px; margin-bottom:20px; scroll-margin-top:110px;}
  .card > h2, .ds-head > h2{font-size:16.5px; margin-bottom:16px;}
  .gate{margin-bottom:20px;}

  .grid{gap:14px 16px;}
  .a-grid{grid-template-columns:repeat(4, 1fr);}
  .b-grid{grid-template-columns:repeat(5, 1fr);}
  .b-grid > *{grid-column:auto !important;}
  .nt-grid{grid-template-columns:repeat(4, 1fr); gap:12px;}
  .actions-row{display:flex; justify-content:flex-end;}
  .actions-row .btn{min-width:180px;}

  .cta-wrap{margin-bottom:20px;}
  .cta{min-height:60px; padding:12px 20px; font-size:15.5px;}

  table.matrix, table.mgmt{font-size:13px;}
  table.matrix th, table.mgmt th{font-size:12.5px;}
  #matrixTable, table.mgmt{min-width:0;}
  .resultcard{padding:22px 24px 22px 28px;}
  #toast{bottom:28px;}
}

/* desktop rộng: D,Y,F,J (trái) | E,H (phải) */
@media (min-width:1280px){
  .dyfjeh-wrap{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:stretch; margin-bottom:20px;}
  .col-left, .col-right{display:flex; flex-direction:column; gap:20px; min-width:0;}
  .dyfjeh-wrap .card{margin-bottom:0;}
  .col-left > .card:last-child, .col-right > .card:last-child{flex:1;}
}
@media (min-width:1600px){
  :root{--side-w:300px;}
  .content{max-width:1400px;}
}

/* =====================================================================
   Phần riêng của bản v2
   ===================================================================== */
.ico-orange{color:#EA580C;}
/* "& Đái tháo đường" trong tiêu đề luôn xuống dòng thứ 2, mọi kích thước màn hình */
.title-line2{display:block;}
/* Khung "Đạt/Chưa đạt huyết áp mục tiêu" — chỉ hiện với người đang điều trị THA (D01 = Có) */
.htmt-box{
  margin-top:12px; padding:10px 14px; border-radius:10px; font-size:13.5px;
  background:var(--surface-3); border:1px solid var(--line);
}
.htmt-box.htmt-dat{background:var(--low-soft); border-color:var(--low); color:var(--low);}
.htmt-box.htmt-chuadat{background:var(--vhigh-soft); border-color:var(--danger); color:var(--danger);}
.htmt-box b{color:inherit;}
.title-badge{
  display:inline-block; vertical-align:4px; margin-left:6px; padding:3px 9px; border-radius:999px;
  font-size:11.5px; font-weight:700; letter-spacing:.02em; text-transform:none;
  background:#F3EDFF; color:#6D28D9;
}
/* "(Happytim)" trong tiêu đề: màu tím, nghiêng, chữ nhỏ hơn 15% so với chữ H1 */
.title-happytim{
  font-style:italic; color:#7C3AED; font-size:85%;
}

/* ---------- chế độ hiển thị: Toàn màn hình / Trung gian / Thu nhỏ ---------- */
.topbar-tools{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.viewctl{
  display:none; padding:4px; gap:2px; border-radius:12px;
  background:var(--surface-3); border:1px solid var(--line);
}
.viewctl button{
  display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 10px;
  border:none; border-radius:9px; background:transparent; color:var(--ink-2);
  font:600 12.5px/1 var(--font); cursor:pointer; white-space:nowrap; transition:background-color .15s, color .15s;
}
.viewctl button .ico{width:15px; height:15px;}
.viewctl button:hover{background:var(--surface); color:var(--ink);}
.viewctl button.active{background:var(--surface); color:var(--primary-dark); box-shadow:var(--shadow-sm);}
.viewctl button:focus-visible{outline:none; box-shadow:0 0 0 3px var(--primary-ring);}
@media (min-width:640px){
  .viewctl{display:inline-flex; margin-top:12px;}
}

.viewmini-bar{
  display:none; position:fixed; left:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:2100;
  align-items:center; gap:8px; padding:12px 18px; border-radius:999px; cursor:pointer;
  background:var(--primary); color:var(--on-primary); font:700 14px var(--font);
  box-shadow:0 12px 30px -10px rgba(15,118,110,.7);
}
.viewmini-bar:hover{background:var(--primary-hover);}
body.viewmode-mini .viewmini-bar{display:inline-flex;}
body.authed.viewmode-mini .wrap{display:none;}

/* Trung gian: cả phiếu thành 1 cửa sổ nổi giữa màn hình, kéo bằng thanh tiêu đề */
body.authed.viewmode-mid{background:color-mix(in srgb, #0B1620 55%, var(--bg));}
body.authed.viewmode-mid .wrap{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:90;
  width:min(1240px, 94vw); height:min(88vh, 960px); margin:0;
  overflow:auto; overscroll-behavior:contain; border-radius:18px;
  background:var(--bg); box-shadow:0 30px 80px -20px rgba(0,0,0,.55); border:1px solid var(--line);
}
body.authed.viewmode-mid .main{padding-bottom:24px;}
body.authed.viewmode-mid .topbar{cursor:move;}
body.authed.viewmode-mid .topbar-btnrow{position:static; padding:0; background:none; border:none; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none;}

/* ---------- hàng trên cùng: đồng ý · tìm kiếm · X01–X03 ---------- */
.toprow{display:flex; flex-direction:column; gap:16px; margin-bottom:16px;}
.toprow > .gate, .toprow > .card{margin-bottom:0; min-width:0;}
#searchCard .searchbox{background:none; border:none; padding:0; margin:0;}
#patientActionsCard .actions-row{margin-top:0;}

/* ---------- bố cục D,J,Y,F,E,H trên điện thoại ---------- */
#sec-ts{order:1;} #sec-td{order:2;} #sec-ts2{order:3;} #sec-copd{order:4;} #sec-e{order:5;} #sec-ytnc{order:6;}

/* ---------- xét nghiệm: 2 khung ---------- */
.xn-split-wrap{display:flex; flex-direction:column; gap:14px;}
.xn-box{min-width:0;}
.xn-box-title{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:10px;}

/* ---------- DNL01 + DNL04, K01–K08 + FINDRISC ---------- */
.dnl-row{display:grid; grid-template-columns:1fr; gap:12px; margin-bottom:16px;}
.dnl-row .cta{height:100%;}
.findrisc-thak-wrap{display:flex; flex-direction:column;}
.findrisc-thak-wrap > .card{min-width:0;}

/* ---------- bảng phân tích số liệu ---------- */
.analysis-result{margin-top:18px; padding-top:16px; border-top:1px dashed var(--line-2);}
.analysis-result h3{font-size:15px !important;}
.analysistbl-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin-bottom:16px; border:1px solid var(--line); border-radius:12px;}
table.analysistbl{border-collapse:collapse; width:100%; min-width:440px; font-size:13px;}
table.analysistbl caption{caption-side:top; text-align:left; font-weight:700; font-size:13.5px; padding:10px 12px; color:var(--ink); background:var(--surface-2); border-bottom:1px solid var(--line);}
table.analysistbl th, table.analysistbl td{border-bottom:1px solid var(--line); padding:8px 10px; text-align:center; white-space:nowrap; font-variant-numeric:tabular-nums;}
table.analysistbl th{background:var(--surface-3); color:var(--ink-2); font-weight:700; font-size:12px;}
table.analysistbl tr:last-child td{border-bottom:none;}
table.analysistbl tr:nth-child(even) td{background:var(--surface-2);}
table.analysistbl td:first-child, table.analysistbl th:first-child{text-align:left; white-space:normal;}

@media (min-width:640px){
  .dnl-row{grid-template-columns:1fr 1fr;}
  .xn-grid{grid-template-columns:1fr 1fr;}
  .xn-grid .xn-glu{grid-column:1/-1;}
}
@media (min-width:1100px){
  .topbar-tools{flex-direction:column; align-items:flex-end; gap:10px;}
  .viewctl{margin-top:0;}
  .toprow{flex-direction:row; align-items:stretch; gap:20px; margin-bottom:20px;}
  .toprow > .gate{flex:1 1 38%; grid-template-columns:auto 1fr; align-content:center;}
  .toprow > .gate .seg{grid-column:1/-1; margin-top:12px; grid-template-columns:1fr 1fr;}
  .toprow > #searchCard{flex:1 1 38%; display:flex; align-items:center;}
  .toprow > #searchCard .searchbox{width:100%;}
  .toprow > #patientActionsCard{flex:0 1 24%; display:flex; align-items:center;}
  #patientActionsCard .actions-row{display:grid; grid-template-columns:1fr; width:100%;}
  #patientActionsCard .actions-row .btn{min-width:0; justify-content:flex-start; white-space:normal; text-align:left; line-height:1.25; padding-top:8px; padding-bottom:8px;}

  .xn-split-wrap{flex-direction:row; align-items:stretch; gap:20px;}
  .xn-split-wrap > .xn-box{flex:1 1 50%;}
  .xn-grid{grid-template-columns:1fr;}
  .dnl-row{gap:20px; margin-bottom:20px;}
  .findrisc-thak-wrap{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:stretch; margin-bottom:20px;}
  .findrisc-thak-wrap > .card{margin-bottom:0;}
  body.authed.viewmode-mid .sidebar{height:min(88vh, 960px);}
}
@media (min-width:1500px){
  .xn-grid{grid-template-columns:1fr 1fr;}
}

/* in ấn: chỉ in nội dung phiếu */
@media print{
  .sidebar, .topbar-btnrow, .save-row, .viewctl, .viewmini-bar, .gate, .cta-wrap, .dnl-row, #searchCard, #patientActionsCard, #sec-ds, .foot, #toast{display:none !important;}
  body{background:#fff;}
  body.authed .wrap{display:block;}
  .card{box-shadow:none; break-inside:avoid;}
}

/* ---------- Bản web: thanh tài khoản + trạng thái đồng bộ ---------- */
.userbar{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; font-size:12.5px; width:100%;}
.userbar .ub-who{display:flex; flex-direction:column; align-items:flex-end; line-height:1.25; margin-right:4px; min-width:0;}
.userbar .ub-who b{color:var(--ink); font-weight:700;}
.userbar .ub-who span{color:var(--muted); font-size:11.5px;}
.userbar .ub-sync, .userbar .ub-btn{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2); font:inherit; font-size:12px; cursor:pointer; text-decoration:none; white-space:nowrap;}
.userbar .ub-sync:hover, .userbar .ub-btn:hover{border-color:var(--primary); color:var(--primary);}
.dot.busy{background:#D97706; box-shadow:0 0 0 3px rgba(217,119,6,.22);}
.dot.warn{background:#D97706;}
.sync-badge{display:inline-block; margin-left:4px; padding:1px 6px; border-radius:6px; font-size:10.5px; font-weight:600; white-space:nowrap; cursor:help;}
.sync-badge.wait{background:#FEF3C7; color:#92400E;}
.sync-badge.err{background:#FEE2E2; color:#991B1B;}
.login-info{background:var(--surface-3); color:var(--ink-2); border-radius:10px; padding:10px 12px; font-size:13px; line-height:1.45; margin:0 0 14px;}
.login-card [hidden]{display:none !important;}
#pwPanel input{margin-bottom:12px;}
@media (max-width: 640px){
  .userbar{justify-content:flex-start;}
  .userbar .ub-who{align-items:flex-start; width:100%;}
}
.login-link{display:block; width:100%; margin:12px 0 0; padding:8px; border:none; background:none; color:var(--primary); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; text-align:center;}
.login-link:hover{text-decoration:underline;}
.login-card textarea{width:100%; padding:10px 12px; margin-bottom:12px; border-radius:12px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink); font:12.5px/1.45 ui-monospace, Menlo, Consolas, monospace; resize:vertical; word-break:break-all;}
.login-card textarea:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-ring);}
#actFields input{margin-bottom:12px;}
.userbar .ub-who .ub-exp{color:var(--muted); font-size:11px;}
.userbar .ub-who .ub-exp.warn{color:#B45309; font-weight:700;}

/* ---------- Nhập nhanh từ file Excel (ở ô đồng ý tham gia) ---------- */
.quickimp{grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:10px; font-size:12.5px;}
.quickimp .qi-pick, .quickimp .qi-clear{border:none; background:none; padding:2px 0; font:inherit; font-weight:600; color:var(--primary); cursor:pointer; text-decoration:underline; text-underline-offset:2px;}
.quickimp .qi-clear{color:var(--muted);}
.quickimp .qi-name{font-weight:700; color:var(--ink); word-break:break-all;}
.quickimp .qi-hint{flex-basis:100%; padding:8px 10px; border-radius:10px; background:var(--primary-soft); color:var(--ink-2);}
.gate.qi-armed #consentYes{box-shadow:0 0 0 3px var(--primary-ring);}
.quickimp[hidden]{display:none;}

/* Hộp lọc "Xuất file Excel" */
.exp-box{max-height:calc(100vh - 40px); overflow-y:auto;}
.exp-grid{display:grid; grid-template-columns:1fr; gap:10px; margin-bottom:12px;}
@media (min-width:640px){ .exp-grid{grid-template-columns:repeat(3, 1fr);} }
.exp-grid label{min-width:0; display:flex; flex-direction:column; gap:4px; font-size:12.5px; font-weight:700; color:var(--ink-2, var(--ink));}
.exp-grid select{width:100%; min-width:0; min-height:42px; padding:0 10px; border-radius:10px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink); font:inherit; font-size:14px; font-weight:400;}
.exp-fs{border:1px solid var(--line); border-radius:12px; padding:8px 12px 10px; margin:0 0 12px;}
.exp-fs legend{font-weight:700; font-size:13.5px; padding:0 4px;}
.exp-note{font-weight:400; color:var(--muted); font-size:12px;}
.exp-dz{display:block; padding:5px 0; font-size:14px; cursor:pointer;}
.exp-hint{display:block; margin-left:24px; font-size:12px; color:var(--muted);}
.exp-match{display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:6px; padding-top:6px; border-top:1px dashed var(--line); font-size:13px;}
.exp-visit{display:flex; flex-direction:column; gap:6px; font-size:14px;}
.exp-visit label{cursor:pointer;}
.exp-n{width:64px; min-height:32px; padding:0 8px; border-radius:8px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink); font:inherit;}
.exp-count{font-size:14px; margin-top:4px;}
.exp-zero{color:var(--danger);}
#expGo{background:var(--primary); color:var(--on-primary);}
#expGo:disabled{opacity:.5; cursor:default;}
#expCancel{background:var(--surface-3); color:var(--ink);}
#anGo{background:var(--primary); color:var(--on-primary);}
#anView{background:transparent; color:var(--primary); border-color:var(--primary);}
#anGo:disabled, #anView:disabled{opacity:.5; cursor:default;}
#anCancel{background:var(--surface-3); color:var(--ink);}

/* Luôn hiện: tổng số bệnh nhân / lượt khám */
.sl-totals{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:10px;}
.slt-item{display:inline-flex; align-items:baseline; gap:6px; padding:5px 12px; border-radius:999px;
  background:var(--primary-soft, rgba(15,118,110,.1)); color:var(--primary); font-size:13px; white-space:nowrap;}
.slt-item b{font-size:16px; font-variant-numeric:tabular-nums;}
.slt-lbl{color:var(--ink-2, var(--ink)); font-weight:600;}

.saved-note{font-size:12.5px; margin:0 0 8px;}
.visit-badge{display:inline-block; margin-left:4px; padding:0 6px; border-radius:999px; font-size:10.5px; font-weight:700;
  background:var(--primary-soft); color:var(--primary); white-space:nowrap;}

/* Nút "Lưu phiếu": nằm ngay trên Cal01 */
.save-row{display:flex; justify-content:center; margin:18px 0;}
.save-row #btnSave{min-height:52px; min-width:240px; padding:0 28px; font-size:16px; border-radius:14px;}
@media (max-width:520px){ .save-row #btnSave{width:100%;} }

/* Tìm kiếm: chọn lần khám */
.visit-pick{display:flex; flex-direction:column; gap:6px; margin-top:4px;}
.vp-head{font-size:13.5px; color:var(--ink);}
.vp-label{font-size:12.5px; font-weight:700; color:var(--ink-2, var(--ink));}
.vp-select{width:100%; min-height:42px; padding:0 10px; border-radius:10px; border:1px solid var(--primary); background:var(--surface); color:var(--ink); font:inherit; font-size:14px;}
.vp-select:focus{outline:none; box-shadow:0 0 0 3px var(--primary-ring, rgba(15,118,110,.2));}
.vp-info{font-size:12.5px; color:var(--muted);}

/* =====================================================================
   Cal01 → SCORE2_VN: nút S01–S04 và hộp cảnh báo thiếu thông tin
   ===================================================================== */
#cal01SubRow .cta.on{box-shadow:0 0 0 3px var(--primary-ring), 0 10px 24px -12px rgba(15,118,110,.7); filter:brightness(1.08);}
.s2-box{max-width:560px; max-height:calc(100vh - 40px); overflow:auto;}
.s2-box h3 .code{font-family:var(--mono); color:var(--primary);}
.s2-group{margin-top:12px;}
.s2-group h4{margin:0 0 6px; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;}
.s2-group p{margin:0 0 6px; font-size:14px; line-height:1.5;}
.s2-group ul{list-style:none; margin:0; padding:0; display:grid; gap:6px;}
.s2-block h4{color:var(--danger);}
.s2-miss h4{color:var(--alert);}
.s2-advise h4{color:var(--gold);}
.s2-note h4{color:var(--muted);}
.s2-group ul.s2-notes{list-style:disc; padding-left:18px; gap:4px; font-size:13.5px; line-height:1.5;}
.s2-item{
  width:100%; display:flex; align-items:baseline; gap:6px; padding:9px 12px; text-align:left; cursor:pointer;
  border:1px solid var(--line-2); border-radius:10px; background:var(--surface-2); color:var(--ink); font:500 14px/1.35 var(--font);
}
.s2-item:hover{border-color:var(--primary); color:var(--primary-dark);}
.s2-item .code{font-family:var(--mono); font-weight:700; color:var(--primary);}
.s2-item .sep, .s2-box h3 .sep{display:inline;}
.s2-suggest{display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 8px;}
.s2-suggest .btn{min-height:38px;}
.s2-suggest .code{font-family:var(--mono); color:var(--primary);}
.s2-flash{animation:s2flash 2.2s ease; border-radius:12px;}
@keyframes s2flash{
  0%,60%{box-shadow:0 0 0 3px var(--alert); background:var(--high-soft);}
  100%{box-shadow:0 0 0 0 transparent;}
}
@media (prefers-reduced-motion: reduce){ .s2-flash{animation:none; box-shadow:0 0 0 3px var(--alert);} }

/* Cal01 · Bước 1: bảng His01 (loại trừ người không cần tính nguy cơ theo S0x) */
.his01-step{margin:0 0 16px; padding:16px; border:1px solid var(--line-2); border-radius:14px; background:var(--surface-2);}
.his01-head{font:700 15px/1.3 var(--font); color:var(--ink);}
.his01-head .code{font-family:var(--mono); color:var(--primary);}
.his01-head .sep, .his01-item .sep{display:inline;}
.his01-desc{margin:6px 0 12px; font-size:13.5px; color:var(--muted); line-height:1.5;}
.his01-list{display:grid; gap:8px;}
.his01-item{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); cursor:pointer; font-size:14px; line-height:1.45;}
.his01-item input{flex:none; width:18px; height:18px; margin-top:2px; accent-color:var(--primary);}
.his01-item .code{font-family:var(--mono); font-weight:700; color:var(--primary);}
.his01-item.is-exclude .code{color:var(--danger);}
.his01-item.is-locked{cursor:not-allowed; opacity:.55; background:var(--surface-3);}
.his01-src{display:inline-block; margin-left:4px; padding:1px 7px; border-radius:999px; background:var(--surface-3); color:var(--muted); font-size:11.5px; font-weight:600;}
.his01-actions{margin-top:12px;}
.his01-actions .btn{width:100%; justify-content:center;}
.his01-result{margin-top:12px;}
.his01-box{padding:12px 14px; border-radius:12px; border:1px solid; font-size:14px; line-height:1.5;}
.his01-box > b{display:block; margin-bottom:4px;}
.his01-box ul{margin:4px 0 0; padding-left:18px;}
.his01-box .btn{margin-top:10px; width:100%; justify-content:center;}
.his01-box.is-stop{background:var(--vhigh-soft); border-color:var(--vhigh);}
.his01-box.is-go{background:var(--primary-soft); border-color:var(--primary);}

/* ---------- Xoá dữ liệu theo điều kiện lọc ---------- */
.df-box{max-width:720px; max-height:calc(100vh - 32px); overflow:auto;}
.df-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 14px;}
.df-f{display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; color:var(--ink-2); min-width:0;}
.df-f .code{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11.5px; color:var(--primary-dark); margin-right:4px;}
.df-f select, .df-f input[type=text], .df-box input[type=date]{
  width:100%; min-height:44px; padding:0 12px; border-radius:12px; border:1px solid var(--line-2);
  background:var(--surface); color:var(--ink); font:inherit; font-size:14.5px; font-weight:500;
}
.df-f select:focus, .df-f input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-ring);}
.df-sum{margin-top:16px; padding:12px 14px; border-radius:12px; background:var(--surface-2); font-size:14px; line-height:1.5;}
.df-sum.is-hit{background:var(--vhigh-soft); color:var(--ink); border:1px solid var(--danger);}
.df-sum b.n{font-size:18px; color:var(--danger);}
.df-preview{margin-top:10px; font-size:12.5px; color:var(--muted);}
.df-preview table{width:100%; border-collapse:collapse;}
.df-preview th, .df-preview td{padding:5px 8px; border-bottom:1px solid var(--line); text-align:left;}
.df-preview td.n{text-align:right; font-variant-numeric:tabular-nums;}
.df-confirm{margin-top:14px;}
#dfDelete{background:var(--danger); color:#fff;}
#dfDelete:disabled{opacity:.45; cursor:not-allowed;}
#dfCancel, #dfReset{background:var(--surface-3); color:var(--ink);}
@media (max-width:560px){ .df-grid{grid-template-columns:minmax(0,1fr);} }

/* ---------- Logo thương hiệu (CVDs) ---------- */
.login-logo{display:block; width:88px; height:88px; margin:0 auto 14px; border-radius:50%; box-shadow:0 6px 18px -8px rgba(15,28,43,.45);}
.brand-logo{width:44px; height:44px; flex:none; border-radius:50%; box-shadow:0 2px 8px rgba(0,0,0,.35);}
.title-brand{display:flex; align-items:center; justify-content:center; gap:14px;}
.title-brand h1{text-align:left;}
.title-logo{width:64px; height:64px; flex:none; border-radius:50%; box-shadow:0 4px 14px -6px rgba(15,28,43,.4);}
@media (max-width:860px){ .title-logo{width:48px; height:48px;} .title-brand{gap:10px;} .brand-logo{width:38px; height:38px;} }

/* X03. Nhập mới: làm sáng sau khi lưu phiếu thành công (đến khi bấm) */
#btnNguoiBenhMoi.btn-attn{
  background:#7C3AED; color:#fff; outline:3px solid #C4B5FD; outline-offset:3px;
  animation:x03Pulse 1.4s ease-in-out infinite;
}
@keyframes x03Pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(124,58,237,.55); transform:scale(1); }
  50%{ box-shadow:0 0 0 12px rgba(124,58,237,0); transform:scale(1.04); }
}
@media (prefers-reduced-motion:reduce){ #btnNguoiBenhMoi.btn-attn{animation:none; box-shadow:0 0 0 6px rgba(124,58,237,.35);} }