/* HTGENETIC BIOINFORMATIC PLATFORM — theo bản thiết kế "HT Pipeline Web App" (IBM Plex, navy #10243A) */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/ibm-plex-sans-vietnamese-400-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/ibm-plex-sans-vietnamese-500-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/ibm-plex-sans-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/ibm-plex-sans-vietnamese-600-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/ibm-plex-sans-vietnamese-700-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/ibm-plex-sans-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/ibm-plex-mono-vietnamese-400-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/ibm-plex-mono-vietnamese-500-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/ibm-plex-mono-vietnamese-600-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/ibm-plex-mono-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#F4F6F8; --surface:#FFFFFF; --surface-2:#F8FAFB; --text:#16202A; --muted:#4B5A69;
  --border:#D5DBE1; --border-2:#E4E8EC; --input:#A9B4C0;
  --navy:#10243A; --navy-2:#173452; --nav-text:#DDE6F0; --nav-muted:#C9D4E0;
  --accent:#1D4ED8; --accent-hover:#1E3A8A; --accent-soft:#E1EAFB; --accent-row:#EEF3FD;
  --brand:#3B7DC1; --brand-red:#E54C4C;
  --ok:#0B5D45; --ok-bg:#E3F1EC; --err:#9F1F12; --err-bg:#FBE6E3; --err-row:#FDF3F1;
  --warn:#8A4B06; --warn-bg:#FBEFD9; --run:#0B7285; --run-bg:#E3FAFC; --run-bar:#15AABF;
  --idle:#4B5A69; --idle-bg:#ECEFF2;
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --primary:#1D4ED8; --primary-hover:#1E3A8A; --accent-ink:#173A8F; --row-hover:#F7F9FB; --input-hover:#7F8C99;
  --sk1:#EEF1F4; --sk2:#F7F9FA; --tick:rgba(16,36,58,.35); --seg-on:#10243A;
  --t-red-bg:#FDECEC; --t-red:#B71C1C; --t-orange-bg:#FFF1E6; --t-orange:#C2410C; --t-teal-bg:#E3F7F4; --t-teal:#0B7A70;
  --t-blue-bg:#E7F0FF; --t-blue:#1D4ED8; --t-violet-bg:#F3F0FF; --t-violet:#5F3DC4;
  --radius:10px; --shadow:0 1px 2px rgba(16,36,58,.06),0 4px 14px rgba(16,36,58,.06);
  --shadow-lg:0 2px 4px rgba(16,36,58,.06),0 18px 40px rgba(16,36,58,.14);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:var(--accent)}a:hover{color:var(--accent-hover)}
.mono{font-family:var(--mono)}
h1{margin:0;font-size:24px;font-weight:600;letter-spacing:-.2px}
h2{margin:0;font-size:16px;font-weight:600}
h3{margin:0;font-size:15px;font-weight:600}
p{margin:0}
.muted{color:var(--muted)}
.small{font-size:13px}.xs{font-size:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:40;background:var(--navy);color:#fff;isolation:isolate;transition:box-shadow .3s}
.hdr.scrolled{box-shadow:0 8px 24px rgba(16,36,58,.25)}
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(600px 120px at var(--mx,20%) -20%,rgba(59,125,193,.35),transparent 70%),
  linear-gradient(90deg,var(--navy) 0%,var(--navy-2) 50%,var(--navy) 100%);background-size:100% 100%,200% 100%;animation:hdrSheen 18s linear infinite}
@keyframes hdrSheen{to{background-position:0 0,-200% 0}}
.hdr-helix{position:absolute;right:0;top:0;height:100%;width:520px;opacity:.18;pointer-events:none;z-index:-1}
.hdr-in{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding:10px 24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;min-height:44px}
.brand-logo{background:#FFFFFF;border-radius:8px;padding:4px 8px;height:40px;display:flex;align-items:center;box-shadow:0 0 0 1px rgba(255,255,255,.2),0 4px 14px rgba(0,0,0,.25);transition:transform .4s var(--ease)}
.brand:hover .brand-logo{transform:translateY(-1px) scale(1.03)}
.brand-logo img{height:30px;display:block}
.brand-name{display:flex;flex-direction:column;line-height:1.1}
.brand-name b{font-size:14px;font-weight:600;letter-spacing:.6px}
.brand-name span{font-size:11px;letter-spacing:2.2px;color:var(--nav-muted)}
.nav{display:flex;flex-wrap:wrap;gap:4px;flex:1 1 auto;position:relative}
.nav a,.nav button.navbtn{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:6px;text-decoration:none;color:var(--nav-text);font:inherit;background:none;border:0;cursor:pointer;transition:background .2s,color .2s}
.nav a:hover,.nav button.navbtn:hover{background:rgba(255,255,255,.08);color:#fff}
.nav a[aria-current=page],.nav button.navbtn.active{background:#FFFFFF;color:var(--navy);font-weight:600;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.nav .badge{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#C62828;color:#fff;font-size:11px;font-weight:600;display:inline-flex;align-items:center;justify-content:center}
.menu{position:absolute;top:calc(100% + 6px);min-width:220px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg);padding:6px;z-index:60;animation:pop .18s var(--ease)}
.menu a{color:var(--text)!important;display:flex;min-height:44px;align-items:center;gap:10px;padding:0 12px;border-radius:6px}
.menu a:hover{background:var(--bg)!important}
.menu a small{display:block;color:var(--muted);font-size:12px}
.user{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--nav-muted)}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--brand),#6aa7e0);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:13px}
.icon-btn{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;border:0;background:none;color:var(--nav-text);cursor:pointer;transition:background .2s}
.icon-btn:hover{background:rgba(255,255,255,.1);color:#fff}
.conn{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.08)}
.conn i{width:8px;height:8px;border-radius:50%;background:#7a8a99}
.conn.on i{background:#3ddc97;box-shadow:0 0 0 0 rgba(61,220,151,.6);animation:ping 2s infinite}
.conn.off i{background:#ff7b6b}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(61,220,151,.55)}70%{box-shadow:0 0 0 8px rgba(61,220,151,0)}100%{box-shadow:0 0 0 0 rgba(61,220,151,0)}}

/* ---------- Layout ---------- */
main.page{max-width:1180px;margin:0 auto;padding:24px;display:flex;flex-direction:column;gap:20px;animation:pageIn .45s var(--ease)}
main.page.wide{max-width:1320px}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.page-head p{margin-top:4px;color:var(--muted)}
.row{display:flex;flex-wrap:wrap;gap:20px}
.row.g16{gap:16px}.row.g12{gap:12px}.row.g8{gap:8px}
.col{display:flex;flex-direction:column;gap:6px}
.grow{flex:1 1 auto;min-width:0}
.spacer{flex:1}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:16px;min-width:0;transition:box-shadow .25s,transform .25s var(--ease),border-color .25s}
.card.tight{padding:16px;gap:10px}
.card.hover:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);border-color:var(--input)}
.card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.card-head>.pill{flex:none}
.stagger>*{animation:rise .5s var(--ease) both}
.stagger>*:nth-child(2){animation-delay:.05s}.stagger>*:nth-child(3){animation-delay:.1s}.stagger>*:nth-child(4){animation-delay:.15s}
.stagger>*:nth-child(5){animation-delay:.2s}.stagger>*:nth-child(6){animation-delay:.25s}.stagger>*:nth-child(n+7){animation-delay:.3s}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- Pills ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap;background:var(--idle-bg);color:var(--idle)}
.pill.lg{padding:6px 12px;font-size:13px}
.pill.ok{background:var(--ok-bg);color:var(--ok)}.pill.err{background:var(--err-bg);color:var(--err)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}.pill.run{background:var(--run-bg);color:var(--run)}
.pill.dark{background:var(--seg-on);color:#fff}
.pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.run .dot{animation:blink 1.2s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.steps{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px;font-size:13px}
.steps li{padding:6px 12px;border-radius:999px;background:var(--idle-bg);color:var(--muted);transition:all .3s}
.steps li.done{background:var(--ok-bg);color:var(--ok);font-weight:500}
.steps li.cur{background:var(--seg-on);color:#fff;font-weight:500;box-shadow:0 4px 12px rgba(16,36,58,.25)}

/* ---------- Forms ---------- */
label.lbl,.lbl{font-size:13px;font-weight:500}
.input,select.input,textarea.input{height:44px;width:100%;padding:0 12px;border:1px solid var(--input);border-radius:6px;font:inherit;color:var(--text);background:var(--surface);transition:border-color .2s,box-shadow .2s}
textarea.input{height:auto;padding:10px 12px;resize:vertical;line-height:1.5}
.input.mono{font-family:var(--mono);font-size:13px}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(29,78,216,.15)}
.input:disabled{background:var(--bg);color:var(--muted)}
.hint{font-size:12px;color:var(--muted)}
.card>.field,.modal>.field,.col>.field{flex:0 0 auto}
.field{flex:1 1 220px;display:flex;flex-direction:column;gap:6px;min-width:0}
.check{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--accent)}
.seg{display:inline-flex;border:1px solid var(--input);border-radius:8px;overflow:hidden;background:var(--surface)}
.seg button{white-space:nowrap;min-height:40px;padding:0 14px;border:0;background:none;font:inherit;color:var(--muted);cursor:pointer;transition:all .2s}
.seg button+button{border-left:1px solid var(--border)}
.seg button.on{background:var(--seg-on);color:#fff;font-weight:500}
.seg.sm button{min-height:32px;padding:0 10px;font-size:12px}

/* ---------- Buttons ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--input);border-radius:6px;background:var(--surface);font:inherit;font-weight:500;color:var(--text);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .2s,border-color .2s,box-shadow .2s,transform .15s}
.btn:hover{border-color:var(--input-hover);box-shadow:var(--shadow)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:#fff}
.btn.navy{background:var(--seg-on);border-color:var(--seg-on);color:#fff}
.btn.danger{color:var(--err);border-color:var(--err)}
.btn.danger:hover{background:var(--err-bg)}
.btn.ghost{border-color:transparent;background:none}
.btn.ghost:hover{background:var(--idle-bg);box-shadow:none}
.btn.sm{min-height:34px;padding:0 12px;font-size:13px}
.btn:disabled,.btn[aria-disabled=true]{background:var(--border-2);border-color:var(--input);color:var(--muted);cursor:not-allowed;box-shadow:none;transform:none}
.btn .ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.45);animation:ripple .6s linear;pointer-events:none}
.btn:not(.primary):not(.navy) .ripple{background:rgba(29,78,216,.18)}
@keyframes ripple{to{transform:scale(4);opacity:0}}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Tables ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--border-2);border-radius:8px}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{background:var(--bg);text-align:left;color:var(--muted);font-weight:500;padding:10px 12px;white-space:nowrap;position:sticky;top:0}
.tbl td{padding:12px;border-top:1px solid var(--border-2);vertical-align:middle}
.tbl tbody tr{transition:background .15s}
.tbl tbody tr:hover{background:var(--row-hover)}
.tbl tr.sel{background:var(--accent-row)!important}
.tbl tr.bad{background:var(--err-row)}
.tbl tr.click{cursor:pointer}
.tbl td.num,.tbl th.num{text-align:right;font-family:var(--mono)}
.tbl th.num{font-family:var(--sans)}
.tbl input.input,.tbl select.input{height:34px;font-size:13px;padding:0 8px}
.tbl .gene{font-style:italic}

/* ---------- Progress ---------- */
.bar{height:12px;border-radius:999px;background:var(--border-2);overflow:hidden;display:flex}
.bar.thin{height:8px}
.bar>div{height:100%;transition:width .8s var(--ease)}
.bar .b-ok{background:var(--ok)}.bar .b-run{background:var(--run-bar);background-image:linear-gradient(45deg,rgba(255,255,255,.28) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.28) 75%,transparent 75%);background-size:16px 16px;animation:stripes 1s linear infinite}
.bar .b-err{background:var(--err)}.bar .b-acc{background:var(--accent)}
@keyframes stripes{to{background-position:16px 0}}
.big-num{font-family:var(--mono);font-size:22px;font-weight:500}
.kpi{font-family:var(--mono);font-size:30px;font-weight:500;letter-spacing:-.5px}

/* ---------- Dropzone ---------- */
.drop{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px;border:1px dashed var(--input);border-radius:8px;background:var(--surface-2);transition:all .2s;cursor:pointer}
.drop:hover{border-color:var(--accent);background:var(--accent-row)}
.drop.over{border-color:var(--accent);background:var(--accent-soft);transform:scale(1.01);box-shadow:0 0 0 4px rgba(29,78,216,.1)}
.drop .fname{flex:1 1 200px;font-family:var(--mono);font-size:13px}

/* ---------- Log ---------- */
pre.log{margin:0;padding:14px;border-radius:8px;background:var(--navy);color:var(--nav-text);font-family:var(--mono);font-size:12px;line-height:1.6;overflow:auto;white-space:pre-wrap;word-break:break-word;max-height:460px;min-height:160px}
pre.log .l-err{color:#ffb4a8}pre.log .l-ok{color:#8fe3bf}pre.log .l-step{color:#9cc3ff}pre.log .l-warn{color:#ffd58a}
.live{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ok)}
.live i{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:ping 2s infinite}

/* ---------- Module cards / pipeline choice ---------- */
.choice{position:relative;flex:1 1 240px;display:flex;flex-direction:column;gap:8px;padding:16px;border:1.5px solid var(--border);border-radius:12px;background:var(--surface);cursor:pointer;text-align:left;font:inherit;color:inherit;transition:all .25s var(--ease)}
.choice:hover{border-color:var(--input);transform:translateY(-2px);box-shadow:var(--shadow)}
.choice.on{border-color:var(--accent);box-shadow:0 0 0 3px rgba(29,78,216,.14),var(--shadow);background:linear-gradient(180deg,var(--surface),var(--accent-row))}
.choice .tick{position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--input);display:flex;align-items:center;justify-content:center;transition:all .2s}
.choice.on .tick{background:var(--accent);border-color:var(--accent);color:#fff}
.choice .ico{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent)}
.choice .ico.red{background:var(--t-red-bg);color:var(--t-red)}.choice .ico.green{background:var(--ok-bg);color:var(--ok)}.choice .ico.amber{background:var(--warn-bg);color:var(--warn)}

/* ---------- KPI tiles ---------- */
.tile{flex:1 1 200px;position:relative;overflow:hidden}
.tile .t-ico{position:absolute;right:-8px;bottom:-12px;opacity:.07;transform:rotate(-12deg)}
.tile .t-lbl{font-size:13px;color:var(--muted);font-weight:500}
.ring{--p:0;width:64px;height:64px;border-radius:50%;background:conic-gradient(var(--c,var(--accent)) calc(var(--p)*1%),var(--border-2) 0);display:grid;place-items:center;transition:--p 1s}
.ring::after{content:attr(data-label);width:50px;height:50px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:500}

/* ---------- Report preview ---------- */
.paper{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:32px;box-shadow:var(--shadow-lg);min-width:0}
.paper .sec{border-top:1px solid var(--border-2);padding-top:14px;display:flex;flex-direction:column;gap:10px}
.paper h2 small{font-weight:400;color:var(--muted);font-size:12px;margin-left:6px}
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:8px 24px;font-size:13px}
.queue button{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;min-height:56px;padding:10px 12px;border:1px solid var(--border-2);border-radius:8px;background:var(--surface);font:inherit;text-align:left;cursor:pointer;color:inherit;transition:all .2s}
.queue button:hover{border-color:var(--accent);transform:translateX(2px)}
.queue button[aria-pressed=true]{border-color:var(--accent);background:var(--accent-row);box-shadow:inset 3px 0 0 var(--accent)}

/* ---------- Toast / modal ---------- */
.toasts{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:10px;z-index:100;max-width:min(420px,calc(100vw - 32px))}
.toast{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:10px;background:var(--navy);color:#fff;box-shadow:var(--shadow-lg);animation:toastIn .35s var(--ease);font-size:13px}
.toast.ok{background:#0B5D45}.toast.err{background:#9F1F12}.toast.warn{background:#8A4B06}
.toast.out{animation:toastOut .3s forwards}
@keyframes toastIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(30px)}}
.modal-bg{position:fixed;inset:0;background:rgba(16,36,58,.45);backdrop-filter:blur(3px);z-index:90;display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px;overflow:auto;animation:fade .2s}
.modal{background:var(--surface);border-radius:14px;box-shadow:var(--shadow-lg);width:min(720px,100%);padding:24px;display:flex;flex-direction:column;gap:16px;animation:pop .25s var(--ease)}
.modal.wide{width:min(1000px,100%)}
@keyframes fade{from{opacity:0}}

/* ---------- Skeleton / empty ---------- */
.sk{background:linear-gradient(90deg,var(--sk1) 0%,var(--sk2) 40%,var(--sk1) 80%);background-size:300% 100%;animation:sk 1.4s ease infinite;border-radius:6px;min-height:14px}
@keyframes sk{from{background-position:100% 0}to{background-position:-100% 0}}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:36px 16px;color:var(--muted);text-align:center}
.empty svg{opacity:.6}
.callout{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:8px;background:var(--accent-soft);color:var(--accent-ink);font-size:13px}
.callout>.btn{flex-shrink:0}
.callout .grow{flex:1 1 260px}
.callout.warn{background:var(--warn-bg);color:var(--warn)}.callout.err{background:var(--err-bg);color:var(--err)}.callout.ok{background:var(--ok-bg);color:var(--ok)}
code.k{font-family:var(--mono);font-size:12px;background:var(--idle-bg);padding:2px 6px;border-radius:4px}
.divider{height:1px;background:var(--border-2)}
.list-row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--border-2)}
.list-row:last-child{border-bottom:0}

/* ---------- Login ---------- */
.login{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr;background:var(--navy)}
.login-art{position:relative;overflow:hidden;color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:space-between}
.login-art canvas{position:absolute;inset:0;width:100%;height:100%}
.login-art .copy{position:relative;max-width:460px}
.login-art h1{font-size:34px;line-height:1.15;letter-spacing:.5px}
.login-art p{color:var(--nav-muted);margin-top:12px}
.login-form{background:var(--bg);display:flex;align-items:center;justify-content:center;padding:32px 16px}
.login-card{width:min(400px,100%);display:flex;flex-direction:column;gap:16px;animation:rise .6s var(--ease)}
.login-card .brand-logo{align-self:flex-start;height:56px;padding:6px 12px}
.login-card .brand-logo img{height:42px}
@media (max-width:860px){.login{grid-template-columns:1fr}.login-art{min-height:260px;padding:28px}}

/* ================= Phát hiện đột biến (findings.js) ================= */
:root{
  --s-p:#C62828;--s-p-bg:#FDECEC;--s-p-g:linear-gradient(135deg,#E03131,#A51111);
  --s-lp:#C2410C;--s-lp-bg:#FFF1E6;--s-lp-g:linear-gradient(135deg,#FFA94D,#F76707);
  --s-act:#6741D9;--s-act-bg:#F3F0FF;--s-act-g:linear-gradient(135deg,#7048E8,#4C2BB0);
  --s-vus:#8A5A00;--s-vus-bg:#FFF6D6;--s-vus-g:linear-gradient(135deg,#FFE066,#F2B705);
  --s-info:#3D4A57;--s-info-bg:#EEF1F4;--s-info-g:linear-gradient(135deg,#66788A,#3D4A57);
  --s-lb:#0B7A70;--s-lb-bg:#E3F7F4;--s-lb-g:linear-gradient(135deg,#0B7F70,#075E54);
  --s-b:#2B7A3B;--s-b-bg:#E9F8EC;--s-b-g:linear-gradient(135deg,#237A35,#1B6B2C);
  --nt-A:#237A35;--nt-C:#1864AB;--nt-G:#C2410C;--nt-T:#C62828;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0E1621; --surface:#15202C; --surface-2:#1A2735; --text:#E6EDF5; --muted:#A3B4C6;
  --border:#2B3C4F; --border-2:#223244; --input:#3E5267; --input-hover:#5C738C;
  --navy:#0A1726; --navy-2:#11273F;
  --accent:#8CB0FF; --accent-hover:#B5CCFF; --accent-soft:#1B2D4F; --accent-row:#1A2A44; --accent-ink:#C9D9FF;
  --primary:#3D6BE0; --primary-hover:#5582F0;
  --ok:#5BD6A2; --ok-bg:#12332A; --err:#FF9A8D; --err-bg:#3E1C19; --err-row:#2A1716; --warn:#F2C078; --warn-bg:#3A2B12;
  --run:#4FD1E8; --run-bg:#0E3440; --run-bar:#22B8CF; --idle:#A9B8C7; --idle-bg:#223142;
  --row-hover:#1B2938; --sk1:#1B2836; --sk2:#243446; --tick:rgba(230,237,245,.4); --seg-on:#3B5B85;
  --t-red-bg:#3E1C1F; --t-red:#FF8A8A; --t-orange-bg:#3D2614; --t-orange:#FFB37A; --t-teal-bg:#0F3330; --t-teal:#5FE0C5;
  --t-blue-bg:#172B4D; --t-blue:#8CB0FF; --t-violet-bg:#2A2150; --t-violet:#C3B1FF;
  --s-p:#FF7B7B; --s-p-bg:#3A1E22; --s-lp:#FFA94D; --s-lp-bg:#3D2614; --s-act:#B197FC; --s-act-bg:#2A2150; --s-vus:#FFD43B; --s-vus-bg:#3A3212;
  --s-info:#B4C2D0; --s-info-bg:#223142; --s-lb:#38D9A9; --s-lb-bg:#0F3330; --s-b:#69DB7C; --s-b-bg:#12332A;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.35); --shadow-lg:0 2px 4px rgba(0,0,0,.4),0 18px 40px rgba(0,0,0,.5);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0E1621; --surface:#15202C; --surface-2:#1A2735; --text:#E6EDF5; --muted:#A3B4C6;
  --border:#2B3C4F; --border-2:#223244; --input:#3E5267; --input-hover:#5C738C;
  --navy:#0A1726; --navy-2:#11273F;
  --accent:#8CB0FF; --accent-hover:#B5CCFF; --accent-soft:#1B2D4F; --accent-row:#1A2A44; --accent-ink:#C9D9FF;
  --primary:#3D6BE0; --primary-hover:#5582F0;
  --ok:#5BD6A2; --ok-bg:#12332A; --err:#FF9A8D; --err-bg:#3E1C19; --err-row:#2A1716; --warn:#F2C078; --warn-bg:#3A2B12;
  --run:#4FD1E8; --run-bg:#0E3440; --run-bar:#22B8CF; --idle:#A9B8C7; --idle-bg:#223142;
  --row-hover:#1B2938; --sk1:#1B2836; --sk2:#243446; --tick:rgba(230,237,245,.4); --seg-on:#3B5B85;
  --t-red-bg:#3E1C1F; --t-red:#FF8A8A; --t-orange-bg:#3D2614; --t-orange:#FFB37A; --t-teal-bg:#0F3330; --t-teal:#5FE0C5;
  --t-blue-bg:#172B4D; --t-blue:#8CB0FF; --t-violet-bg:#2A2150; --t-violet:#C3B1FF;
  --s-p:#FF7B7B; --s-p-bg:#3A1E22; --s-lp:#FFA94D; --s-lp-bg:#3D2614; --s-act:#B197FC; --s-act-bg:#2A2150; --s-vus:#FFD43B; --s-vus-bg:#3A3212;
  --s-info:#B4C2D0; --s-info-bg:#223142; --s-lb:#38D9A9; --s-lb-bg:#0F3330; --s-b:#69DB7C; --s-b-bg:#12332A;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.35); --shadow-lg:0 2px 4px rgba(0,0,0,.4),0 18px 40px rgba(0,0,0,.5);
  color-scheme:dark;
}
/* Phiếu kết quả luôn là giấy trắng (in được) kể cả khi giao diện tối */
.paper{color-scheme:light;
  --bg:#F4F6F8; --surface:#FFFFFF; --surface-2:#F8FAFB; --text:#16202A; --muted:#4B5A69;
  --border:#D5DBE1; --border-2:#E4E8EC; --input:#A9B4C0;
  --navy:#10243A; --navy-2:#173452; --nav-text:#DDE6F0; --nav-muted:#C9D4E0;
  --accent:#1D4ED8; --accent-hover:#1E3A8A; --accent-soft:#E1EAFB; --accent-row:#EEF3FD;
  --brand:#3B7DC1; --brand-red:#E54C4C;
  --ok:#0B5D45; --ok-bg:#E3F1EC; --err:#9F1F12; --err-bg:#FBE6E3; --err-row:#FDF3F1;
  --warn:#8A4B06; --warn-bg:#FBEFD9; --run:#0B7285; --run-bg:#E3FAFC; --run-bar:#15AABF;
  --idle:#4B5A69; --idle-bg:#ECEFF2;
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --primary:#1D4ED8; --primary-hover:#1E3A8A; --accent-ink:#173A8F; --row-hover:#F7F9FB; --input-hover:#7F8C99;
  --sk1:#EEF1F4; --sk2:#F7F9FA; --tick:rgba(16,36,58,.35); --seg-on:#10243A;
  --t-red-bg:#FDECEC; --t-red:#B71C1C; --t-orange-bg:#FFF1E6; --t-orange:#C2410C; --t-teal-bg:#E3F7F4; --t-teal:#0B7A70;
  --t-blue-bg:#E7F0FF; --t-blue:#1D4ED8; --t-violet-bg:#F3F0FF; --t-violet:#5F3DC4;
  --radius:10px; --shadow:0 1px 2px rgba(16,36,58,.06),0 4px 14px rgba(16,36,58,.06);
  --shadow-lg:0 2px 4px rgba(16,36,58,.06),0 18px 40px rgba(16,36,58,.14);
  --ease:cubic-bezier(.2,.8,.2,1);

  --s-p:#C62828;--s-p-bg:#FDECEC;--s-p-g:linear-gradient(135deg,#E03131,#A51111);
  --s-lp:#C2410C;--s-lp-bg:#FFF1E6;--s-lp-g:linear-gradient(135deg,#FFA94D,#F76707);
  --s-act:#6741D9;--s-act-bg:#F3F0FF;--s-act-g:linear-gradient(135deg,#7048E8,#4C2BB0);
  --s-vus:#8A5A00;--s-vus-bg:#FFF6D6;--s-vus-g:linear-gradient(135deg,#FFE066,#F2B705);
  --s-info:#3D4A57;--s-info-bg:#EEF1F4;--s-info-g:linear-gradient(135deg,#66788A,#3D4A57);
  --s-lb:#0B7A70;--s-lb-bg:#E3F7F4;--s-lb-g:linear-gradient(135deg,#0B7F70,#075E54);
  --s-b:#2B7A3B;--s-b-bg:#E9F8EC;--s-b-g:linear-gradient(135deg,#237A35,#1B6B2C);
  --nt-A:#237A35;--nt-C:#1864AB;--nt-G:#C2410C;--nt-T:#C62828;

  color:var(--text)}

.fx-wrap{display:flex;flex-direction:column;gap:12px;container-type:inline-size}
.fx-sum{display:flex;align-items:center;gap:16px;padding:12px 14px;border:1px solid var(--border-2);border-radius:12px;background:linear-gradient(180deg,var(--surface),var(--surface-2))}
.fx-total{display:flex;align-items:baseline;gap:6px;flex:none}
.fx-total b{font-size:28px;line-height:1;color:var(--text)}
.fx-total span{font-size:13px;color:var(--muted)}
.fx-sum-r{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.fx-stack{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--border-2);gap:2px}
.fx-stack span{flex-basis:0;animation:grow .9s cubic-bezier(.2,.8,.2,1) both;transform-origin:left}
@keyframes grow{from{transform:scaleX(0)}}
.fx-legend{display:flex;flex-wrap:wrap;gap:6px}
.lg{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 10px;border-radius:999px;border:1px solid var(--border);background:var(--surface);font:500 12.5px var(--sans);color:var(--text);cursor:pointer;transition:all .18s}
span.lg{cursor:default}
.lg i{width:10px;height:10px;border-radius:50%}
button.lg:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.lg.on{border-color:currentColor;box-shadow:0 0 0 2px currentColor inset}
.lg.clear{color:var(--muted)}
.fx-list{display:flex;flex-direction:column;gap:10px}
.fx{position:relative;display:grid;grid-template-columns:112px minmax(0,1fr) 190px 215px 36px;grid-template-areas:"gene main metric cls more" "detail detail detail detail detail";align-items:center;gap:0 18px;padding:14px 14px 14px 14px;border:1px solid var(--border-2);border-radius:14px;background:var(--surface);overflow:hidden;animation:fxIn .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*70ms);transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,border-color .22s}
.fx::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 120px at 0% 50%,var(--tint),transparent 70%);opacity:.85;pointer-events:none}
.fx:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(16,36,58,.06),0 14px 32px rgba(16,36,58,.12);border-color:var(--sevc)}
@keyframes fxIn{from{opacity:0;transform:translateY(12px) scale(.985)}}
.fx>*{position:relative}
.fx-gene{grid-area:gene;align-self:center;min-width:0;display:flex;flex-direction:column;gap:1px;font:italic 700 20px/1.15 var(--sans);color:var(--sevc);letter-spacing:.2px;overflow-wrap:anywhere;transition:letter-spacing .25s,transform .25s}
.fx-gene .two{font-size:16.5px}
.fx:hover .fx-gene{letter-spacing:.9px;transform:translateX(2px)}
.sev-lp .aa-alt,.s-lp.sev-badge{color:#2B1400}
.fx-main{grid-area:main;display:flex;flex-direction:column;gap:7px;min-width:0}
.fx-l1{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:15px}
.fx-l2{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.hgvs{font-weight:600;font-size:14.5px}
.nt-pair{display:inline-flex;align-items:center;gap:2px;margin-left:2px}
.nt{display:inline-grid;place-items:center;min-width:20px;height:22px;padding:0 3px;border-radius:5px;color:#fff;font:700 13px var(--mono)}
.nt-A{background:var(--nt-A)}.nt-C{background:var(--nt-C)}.nt-G{background:var(--nt-G)}.nt-T{background:var(--nt-T)}
.arr{color:var(--muted);font-weight:600;margin:0 2px}
.prot{display:inline-flex;align-items:center;gap:3px}
.aa{display:inline-flex;align-items:center;min-height:24px;padding:0 7px;border-radius:6px;font:600 13px var(--mono)}
.aa-ref{background:var(--idle-bg);color:var(--text)}
.aa-pos{color:var(--muted);font-size:13px}
.aa-alt{color:#fff;background:var(--sevg)}
.aa-stop{background:linear-gradient(135deg,#343A40,#111);color:#fff}
.sev-vus .aa-alt{color:#4A3500}
.big-call{font:700 17px var(--sans);color:var(--sevc)}
.big-call.mono{font-family:var(--mono)}
.fus{display:inline-flex;align-items:center;gap:6px;font-size:16px}
.fus b{padding:2px 10px;border-radius:8px;background:var(--sevbg);color:var(--sevc)}
.fus-link{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--sevg);color:#fff;animation:spinIn 1s .3s both}
@keyframes spinIn{from{transform:rotate(-180deg) scale(.4);opacity:0}}
.chip{display:inline-flex;align-items:center;gap:5px;min-height:24px;padding:0 9px;border-radius:999px;font:500 12px var(--sans);background:var(--idle-bg);color:var(--muted);white-space:nowrap}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.85}
.imp-HIGH{background:var(--t-red-bg);color:var(--t-red)}.imp-MODERATE{background:var(--t-orange-bg);color:var(--t-orange)}.imp-LOW{background:var(--t-teal-bg);color:var(--t-teal)}.imp-MODIFIER,.imp-NA{background:var(--idle-bg);color:var(--muted)}
.k-loss{background:var(--t-red-bg);color:var(--t-red)}.k-gain{background:var(--t-blue-bg);color:var(--t-blue)}.k-fus{background:var(--t-violet-bg);color:var(--t-violet)}.k-ok{background:var(--ok-bg);color:var(--ok)}.k-na{background:var(--idle-bg);color:var(--muted)}
.cv{color:var(--muted)}.cv b{color:var(--text);font-weight:600}
.fx-metric{grid-area:metric;display:flex;flex-direction:column;gap:6px;min-width:0}
.vaf{display:flex;flex-direction:column;gap:4px}
.vaf-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.vaf-top b{font-size:15px}
.vaf-track{position:relative;height:9px;border-radius:999px;background:var(--border-2);overflow:visible}
.vaf-fill{position:absolute;left:0;top:0;bottom:0;width:var(--v);border-radius:999px;background:var(--sevg);animation:fillIn 1.1s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*70ms + .2s)}
@keyframes fillIn{from{width:0}}
.vaf-track .tick{position:absolute;top:-3px;bottom:-3px;width:2px;border-radius:2px;background:var(--tick)}
.vaf-track .t50{left:50%}
.zyg{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;color:var(--text)}
.zyg .al{width:12px;height:12px;border-radius:50%;border:2px solid var(--sevc);background:var(--surface)}
.zyg .al.on{background:var(--sevc)}
.zyg span:last-child{margin-left:4px}
.cn{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.cn-dots{display:flex;gap:3px;width:100%}
.cn-dots i{width:12px;height:12px;border-radius:3px;background:var(--border-2)}
.cn-dots i.lo{background:#E5484D}.cn-dots i.ok{background:var(--ok)}.cn-dots i.hi{background:#3B82F6}
.fx-class{grid-area:cls;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.sev-badge{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 12px;border-radius:999px;font:600 13px var(--sans);color:#fff;background:var(--sevg);box-shadow:0 4px 12px -4px var(--sevc);white-space:nowrap}
.s-vus.sev-badge{color:#4A3500}
.s-p.sev-badge{animation:pulseRing 2.4s ease-out infinite}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(198,40,40,.45),0 4px 12px -4px var(--sevc)}70%{box-shadow:0 0 0 9px rgba(198,40,40,0),0 4px 12px -4px var(--sevc)}100%{box-shadow:0 0 0 0 rgba(198,40,40,0),0 4px 12px -4px var(--sevc)}}
.src{max-width:215px;overflow-wrap:anywhere}
.fx-more{grid-area:more;width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--muted);transition:transform .25s,background .2s}
.fx-more:hover{background:var(--surface-2);color:var(--text)}
.fx.open .fx-more{transform:rotate(180deg)}
.fx-detail{grid-area:detail;display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s cubic-bezier(.2,.8,.2,1)}
.fx.open .fx-detail{grid-template-rows:1fr}
.fx-detail-in{overflow:hidden}
.fx.open .fx-detail-in{padding-top:14px;margin-top:14px;border-top:1px dashed var(--border)}
.fx-detail dl{margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px 18px}
.fx-detail dt{font-size:11.5px;color:var(--muted);letter-spacing:.3px}
.fx-detail dd{margin:2px 0 0;font-size:13.5px;overflow-wrap:anywhere}
.fx-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.fx-empty{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;background:var(--ok-bg);color:var(--ok)}
/* màu theo mức độ */
.sev-p,.s-p{--sevc:var(--s-p);--sevbg:var(--s-p-bg);--sevg:var(--s-p-g);--tint:rgba(240,82,91,.10)}
.sev-lp,.s-lp{--sevc:var(--s-lp);--sevbg:var(--s-lp-bg);--sevg:var(--s-lp-g);--tint:rgba(255,159,67,.12)}
.sev-act,.s-act{--sevc:var(--s-act);--sevbg:var(--s-act-bg);--sevg:var(--s-act-g);--tint:rgba(151,117,250,.12)}
.sev-vus,.s-vus{--sevc:var(--s-vus);--sevbg:var(--s-vus-bg);--sevg:var(--s-vus-g);--tint:rgba(255,224,102,.20)}
.sev-info,.s-info{--sevc:var(--s-info);--sevbg:var(--s-info-bg);--sevg:var(--s-info-g);--tint:rgba(140,154,171,.12)}
.sev-lb,.s-lb{--sevc:var(--s-lb);--sevbg:var(--s-lb-bg);--sevg:var(--s-lb-g);--tint:rgba(59,201,168,.12)}
.sev-b,.s-b{--sevc:var(--s-b);--sevbg:var(--s-b-bg);--sevg:var(--s-b-g);--tint:rgba(99,212,122,.12)}
.fx-stack span{background:var(--sevg)}
.lg{color:var(--sevc,var(--text))}.lg i{background:var(--sevg)}
.lg.s-vus{color:var(--s-vus)}
/* khung hẹp (phiếu báo cáo, điện thoại) */
@container (max-width:760px){
  .fx{grid-template-columns:minmax(0,1fr) 44px;grid-template-areas:"gene more" "main main" "metric metric" "cls cls" "detail detail";gap:10px 12px}
  .fx-gene{flex-direction:row;flex-wrap:wrap;gap:0 6px}
  .fx-metric{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 16px}.fx-metric .vaf{min-width:160px;flex:1}
  .fx-class{flex-direction:row;flex-wrap:wrap;align-items:center}
}
.compact .fx{grid-template-columns:100px minmax(0,1fr) 170px 215px;grid-template-areas:"gene main metric cls"}
.compact .fx-gene{font-size:18px}
@container (max-width:760px){.compact .fx{grid-template-columns:minmax(0,1fr);grid-template-areas:"gene" "main" "metric" "cls"}}
@media print{
  .fx,.fx-sum,.fx-stack span,.vaf-fill,.fx-gene,.sev-badge,.nt,.aa,.chip,.lg i,.zyg .al{-webkit-print-color-adjust:exact;print-color-adjust:exact;animation:none!important;box-shadow:none!important;transform:none!important}
  .fx::before,.fx-more,.fx-detail,.fx-actions{display:none!important}
  .fx{break-inside:avoid;border-color:#ccc}
}

/* ---------- Print (báo cáo) ---------- */
@media print{
  body{background:var(--surface)}
  .hdr,.no-print,.toasts{display:none!important}
  main.page{padding:0;max-width:none;animation:none}
  .paper{border:0;box-shadow:none;padding:0}
  .print-only{display:block!important}
  .input.pin,textarea.input{border:0!important;box-shadow:none!important;padding:0!important;resize:none;background:none}
  .row>.paper{flex:1 1 100%!important}
  .tbl-wrap{overflow:visible;border:0}
  @page{size:A4;margin:14mm}
}
.print-only{display:none}
@media (max-width:1560px){.user .uname,.conn .ctext{display:none}.conn{padding:6px}.nav a,.nav button.navbtn{padding:0 11px}.hdr-in{gap:8px 14px}}
@media (max-width:1440px){.brand-name{display:none}}
@media (max-width:860px){.hdr{position:relative}.hdr-in{gap:6px 10px}.nav a,.nav button.navbtn{min-height:40px;padding:0 10px}}
.col>.seg,.field>.seg{align-self:flex-start}
@media (max-width:640px){main.page{padding:16px}.hdr-in{padding:8px 16px}.brand-name{display:none}.card{padding:16px}.paper{padding:16px}}
.wrap-any{overflow-wrap:anywhere;word-break:break-word}
.nav .m-only{display:none}
@media (max-width:640px){
  .hdr-in{gap:6px 8px;padding:8px 12px}
  .brand{order:1;min-height:40px}.brand-logo{height:34px}.brand-logo img{height:24px}
  .user{order:2;margin-left:auto;gap:2px}
  .nav{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);padding-bottom:2px}
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex:none;min-height:40px;padding:0 12px}
  .nav .tools{display:none}.nav .m-only{display:inline-flex}
  .hdr-helix{display:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Vùng bấm trên màn cảm ứng >= 44px */
@media (pointer:coarse){
  .btn.sm,.seg button,.seg.sm button{min-height:44px}
  .tbl td a{display:inline-flex;align-items:center;min-height:44px}
  .fx-more{width:44px;height:44px}
  .lg{min-height:40px}
}
/* Bộ lọc gọn trên điện thoại */
.ftoggle{display:none!important}
@media (max-width:640px){
  .filters .ftoggle{display:inline-flex!important;width:100%;justify-content:space-between}
  .filters:not(.open)>*:not(.ftoggle):not(.keep){display:none!important}
}

/* ================= Somatic (findings.js › SomaticFindings) — màu Tier theo mức nguy hiểm: I đỏ · II cam · III vàng · IV xanh lá ================= */
:root{
  --tr1:#C62828;--tr1-bg:#FDECEC;--tr1-g:linear-gradient(135deg,#E03131,#A51111);
  --tr2:#C2410C;--tr2-bg:#FFF1E6;--tr2-g:linear-gradient(135deg,#FFA94D,#F76707);
  --tr3:#7A5000;--tr3-bg:#FFF6D6;--tr3-g:linear-gradient(135deg,#FFE066,#F2B705);
  --tr4:#1B6B2C;--tr4-bg:#E3F4E6;--tr4-g:linear-gradient(135deg,#37B24D,#1B6B2C);
  --o-onc:#6B2A0A;--o-onc-bg:#F8CBAD;--o-lonc:#7A3410;--o-lonc-bg:#FCE4D6;--o-vus:#5C4300;--o-vus-bg:#FFF2CC;
  --o-lb:#2B5A1E;--o-lb-bg:#E2EFDA;--o-b:#24406E;--o-b-bg:#D9E1F2;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --tr1:#FF7B7B;--tr1-bg:#3A1E22;--tr2:#FFA94D;--tr2-bg:#3D2614;--tr3:#FFD43B;--tr3-bg:#3A3212;--tr4:#69DB7C;--tr4-bg:#12332A;
  --o-onc:#FFB089;--o-onc-bg:rgba(248,140,90,.22);--o-lonc:#FFC9A8;--o-lonc-bg:rgba(252,180,140,.14);--o-vus:#FFE08A;--o-vus-bg:rgba(255,214,102,.14);
  --o-lb:#A8E6A0;--o-lb-bg:rgba(140,200,120,.14);--o-b:#B5C8F5;--o-b-bg:rgba(140,170,230,.16);
}}
:root[data-theme="dark"]{
  --tr1:#FF7B7B;--tr1-bg:#3A1E22;--tr2:#FFA94D;--tr2-bg:#3D2614;--tr3:#FFD43B;--tr3-bg:#3A3212;--tr4:#69DB7C;--tr4-bg:#12332A;
  --o-onc:#FFB089;--o-onc-bg:rgba(248,140,90,.22);--o-lonc:#FFC9A8;--o-lonc-bg:rgba(252,180,140,.14);--o-vus:#FFE08A;--o-vus-bg:rgba(255,214,102,.14);
  --o-lb:#A8E6A0;--o-lb-bg:rgba(140,200,120,.14);--o-b:#B5C8F5;--o-b-bg:rgba(140,170,230,.16);
}
.paper{
  --tr1:#C62828;--tr1-bg:#FDECEC;--tr2:#C2410C;--tr2-bg:#FFF1E6;--tr3:#7A5000;--tr3-bg:#FFF6D6;--tr4:#1B6B2C;--tr4-bg:#E3F4E6;
  --o-onc:#6B2A0A;--o-onc-bg:#F8CBAD;--o-lonc:#7A3410;--o-lonc-bg:#FCE4D6;--o-vus:#5C4300;--o-vus-bg:#FFF2CC;
  --o-lb:#2B5A1E;--o-lb-bg:#E2EFDA;--o-b:#24406E;--o-b-bg:#D9E1F2;
}
.tier-1{--sevc:var(--tr1);--sevbg:var(--tr1-bg);--sevg:var(--tr1-g);--tint:rgba(240,82,91,.11)}
.tier-2{--sevc:var(--tr2);--sevbg:var(--tr2-bg);--sevg:var(--tr2-g);--tint:rgba(255,159,67,.13)}
.tier-3{--sevc:var(--tr3);--sevbg:var(--tr3-bg);--sevg:var(--tr3-g);--tint:rgba(255,212,59,.18)}
.tier-4{--sevc:var(--tr4);--sevbg:var(--tr4-bg);--sevg:var(--tr4-g);--tint:rgba(55,178,77,.10)}
.cnv-loss{--sevc:var(--t-red);--sevbg:var(--t-red-bg);--sevg:linear-gradient(135deg,#FA5252,#C92A2A);--tint:rgba(250,82,82,.10)}
.cnv-gain{--sevc:var(--t-blue);--sevbg:var(--t-blue-bg);--sevg:linear-gradient(135deg,#4C6EF5,#1D4ED8);--tint:rgba(76,110,245,.10)}
.fu-clin{--sevc:var(--s-act);--sevbg:var(--s-act-bg);--sevg:var(--s-act-g);--tint:rgba(151,117,250,.12)}
.fu-note{--sevc:var(--s-lp);--sevbg:var(--s-lp-bg);--sevg:var(--s-lp-g);--tint:rgba(255,159,67,.10)}
.fu-unk,.fu-noise{--sevc:var(--s-info);--sevbg:var(--s-info-bg);--sevg:var(--s-info-g);--tint:rgba(140,154,171,.08)}
.tier-2 .sev-badge,.tier-2 .aa-alt{color:#2B1400}
.tier-3 .sev-badge,.tier-3 .aa-alt{color:#3D2800}
.fx .aa-alt.aa-stop{color:#fff;background:linear-gradient(135deg,#343A40,#111)}
.tier-1 .sev-badge{animation:pulseRing 2.4s ease-out infinite}

.som{display:flex;flex-direction:column;gap:22px;container-type:inline-size}
.som-sum{display:grid;grid-template-columns:1.35fr repeat(4,minmax(0,1fr));gap:10px}
.som-tile{--tc:var(--muted);position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0;padding:12px 14px 12px 16px;border:1px solid var(--border-2);border-radius:14px;background:linear-gradient(160deg,var(--surface) 55%,var(--tcb,var(--surface-2)));text-align:left;font:inherit;color:inherit;cursor:pointer;overflow:hidden;animation:fxIn .5s cubic-bezier(.2,.8,.2,1) both;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,border-color .2s}
.som-tile:nth-child(2){animation-delay:60ms}.som-tile:nth-child(3){animation-delay:120ms}.som-tile:nth-child(4){animation-delay:180ms}.som-tile:nth-child(5){animation-delay:240ms}
.som-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--tc)}
.som-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--tc)}
.som-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.som-tile .k{font:600 11.5px var(--sans);letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.som-tile .v{font:700 19px/1.2 var(--sans);color:var(--tc);overflow-wrap:anywhere}
.som-tile .v small{font-size:12.5px;font-weight:500;color:var(--muted)}
.som-tile .s{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.som-tile .tiers{display:flex;flex-wrap:wrap;gap:5px}
.tq{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font:500 11.5px var(--sans);background:var(--sevbg);color:var(--sevc)}
.tq b{font-family:var(--mono)}
.tq.zero{opacity:.45}
.tc-t1{--tc:var(--tr1);--tcb:var(--tr1-bg)}.tc-t2{--tc:var(--tr2);--tcb:var(--tr2-bg)}
.tc-ok{--tc:var(--ok);--tcb:var(--ok-bg)}.tc-warn{--tc:var(--warn);--tcb:var(--warn-bg)}.tc-err{--tc:var(--err);--tcb:var(--err-bg)}
.tc-loss{--tc:var(--t-red);--tcb:var(--t-red-bg)}.tc-clin{--tc:var(--s-act);--tcb:var(--s-act-bg)}.tc-note{--tc:var(--s-lp);--tcb:var(--s-lp-bg)}
.tc-idle{--tc:var(--muted)}
@container (max-width:900px){.som-sum{grid-template-columns:repeat(2,minmax(0,1fr))}.som-sum .som-tile:first-child{grid-column:1/-1}}

.som-sec{display:flex;flex-direction:column;gap:10px;scroll-margin-top:96px}
.som-h{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin:0;font:600 16px/1.3 var(--sans);color:var(--text)}
.som-h .n{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border-radius:999px;background:var(--navy);color:#fff;font:700 12.5px var(--mono);box-shadow:0 4px 10px -4px rgba(16,36,58,.5)}
.som-h small{flex-basis:100%;font:400 12.5px/1.45 var(--sans);color:var(--muted)}
.tier-blk{display:flex;flex-direction:column;gap:8px}
.tier-h{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:10px;background:var(--sevbg);color:var(--sevc);border-left:4px solid var(--sevc);font:600 13.5px var(--sans)}
.tier-h b{margin-left:auto;display:inline-grid;place-items:center;min-width:26px;height:22px;padding:0 7px;border-radius:999px;background:var(--sevg);color:#fff;font-size:12px}
.tier-2 .tier-h b{color:#2B1400}.tier-3 .tier-h b{color:#3D2800}
.onco{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;font:600 12px var(--sans);white-space:nowrap}
.o-onc{background:var(--o-onc-bg);color:var(--o-onc)}.o-lonc{background:var(--o-lonc-bg);color:var(--o-lonc)}.o-vus{background:var(--o-vus-bg);color:var(--o-vus)}
.o-lb{background:var(--o-lb-bg);color:var(--o-lb)}.o-b{background:var(--o-b-bg);color:var(--o-b)}
.k-warn{background:var(--warn-bg);color:var(--warn)}
.chip.k-loss,.chip.k-warn,.chip.k-ok{white-space:normal;text-align:left;line-height:1.3;padding-top:2px;padding-bottom:2px}
.fx-l3{display:flex;align-items:baseline;gap:6px;font-size:12.5px;line-height:1.45;color:var(--text);min-width:0}
.fx-l3>svg{flex:none;align-self:center;color:var(--sevc)}
.clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fx.minor{padding:10px 12px;border-style:dashed}
.fx.minor .fx-gene{font-size:16px}
.fx.minor::before{opacity:.5}
.fx.excluded{opacity:.45;filter:grayscale(.7)}
.fx.excluded:hover{opacity:.8}
.pick{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text);cursor:pointer;user-select:none}
.pick input{width:16px;height:16px;accent-color:var(--accent)}
.som-more{align-self:flex-start}
.som-more[aria-expanded="true"] svg{transform:rotate(180deg)}

.bio{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@container (max-width:680px){.bio{grid-template-columns:1fr}}
.bio-card{--bc:var(--muted);display:flex;align-items:center;gap:16px;min-width:0;padding:14px 16px;border:1px solid var(--border-2);border-radius:14px;background:var(--surface);border-left:4px solid var(--bc);animation:fxIn .55s cubic-bezier(.2,.8,.2,1) both}
.b-ok{--bc:var(--ok)}.b-warn{--bc:var(--warn)}.b-err{--bc:var(--err)}.b-idle{--bc:var(--idle)}
.bio-k{font:700 15px var(--sans);letter-spacing:.3px}
@property --rv{syntax:'<number>';inherits:true;initial-value:0}
.msi-ring{flex:none;width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--bc) calc(var(--rv)*1%),var(--border-2) 0);animation:ringIn 1.3s cubic-bezier(.2,.8,.2,1) both}
.msi-ring span{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--surface);font:600 13px var(--mono);color:var(--text)}
@keyframes ringIn{from{--rv:0}}
.tmb-num{flex:none;width:78px;height:78px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--surface-2);border:1px solid var(--border-2)}
.tmb-num b{font-size:22px;line-height:1;color:var(--bc)}

.compact.som{gap:16px}
.compact .som-h{font-size:14.5px}
.compact .som-tile{cursor:default}
@media print{
  .som-tile,.tier-h,.tq,.onco,.msi-ring,.bio-card,.som-h .n,.tier-h b{-webkit-print-color-adjust:exact;print-color-adjust:exact;animation:none!important;box-shadow:none!important;transform:none!important}
  .som-sec,.bio-card,.tier-h{break-inside:avoid}
}
@media (prefers-reduced-motion:reduce){.som-tile,.bio-card,.msi-ring{animation:none}}

/* ---------- Xác thực 2 lớp ---------- */
.tfa-setup{display:flex;flex-direction:column;gap:12px}
.tfa-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px;font-size:13px}
.tfa-qr{align-self:center;width:208px;max-width:72vw;aspect-ratio:1;background:#fff;border-radius:12px;padding:4px;border:1px solid var(--border);box-shadow:var(--shadow);animation:pop .3s var(--ease)}
.tfa-qr svg{display:block;width:100%;height:100%}
.tfa-manual summary{cursor:pointer;font-size:13px;color:var(--accent);padding:6px 0}
.tfa-manual[open]{display:flex;flex-direction:column;gap:8px}
.tfa-key{font-family:var(--mono);font-size:14px;letter-spacing:.06em;padding:6px 10px;background:var(--surface-2);border-radius:6px;word-break:break-all}
.input.tfa-code{font-family:var(--mono);font-size:24px;letter-spacing:.32em;text-align:center;height:52px}
.tfa-codes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.tfa-codes code{font-family:var(--mono);font-size:15px;text-align:center;padding:8px;background:var(--surface-2);border:1px dashed var(--border-2);border-radius:8px;letter-spacing:.05em}
.login-card h1 .tfa-ic{display:inline-flex;vertical-align:-3px;margin-right:8px;color:var(--accent)}
.login-card.tfa-step{width:min(440px,100%)}
.tfa-on{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--ok)}
.tfa-low{color:var(--warn)}
.tfa-card .card-head h2{display:inline-flex;align-items:center;gap:8px}
/* nút bị khoá không đổi màu khi rê chuột / chạm (đè kiểu :hover của .btn.primary…) */
.btn:disabled:hover,.btn[aria-disabled=true]:hover{background:var(--border-2);border-color:var(--input);color:var(--muted);box-shadow:none;transform:none}
/* dòng bản quyền ở trang đăng nhập */
.login-art .login-legal{display:flex;gap:10px;align-items:flex-start;font-size:12px;line-height:1.55;color:var(--nav-muted)}
.login-legal .reg{flex:none;display:inline-grid;place-items:center;width:20px;height:20px;border:1.5px solid currentColor;border-radius:50%;font-size:11px;font-weight:700;line-height:1;color:var(--nav-text);margin-top:-1px}
.login-art .login-co{white-space:normal;max-width:100%;line-height:1.35;height:auto;padding-top:5px;padding-bottom:5px}

/* ---------- Bảng QC: sắp xếp theo cột + thẻ kết quả sơ bộ ---------- */
.th-sort{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:5px;font:inherit;color:inherit;white-space:nowrap;border-radius:4px}
.th-sort:hover{color:var(--text)}
.th-sort:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.th-sort .arr{font-size:10px;opacity:.4;transition:opacity .15s}
.th-sort:hover .arr{opacity:.8}
.th-sort.on{color:var(--text);font-weight:600}
.th-sort.on .arr{opacity:1;color:var(--accent)}
.rtags{display:flex;flex-wrap:wrap;column-gap:10px;row-gap:2px;align-items:baseline}
.rtag{font-weight:600;font-size:13px;white-space:nowrap}
.rtag.red{color:var(--tr1)}.rtag.orange{color:var(--tr2)}.rtag.blue{color:var(--t-blue)}
.rtag.more{color:var(--muted);font-weight:500;font-size:12px}

/* ---------- Cờ insert / alpha: biểu tượng + chú thích khi rê chuột ---------- */
.q-fail{color:var(--err);font-weight:600}.q-warn{color:var(--warn);font-weight:600}
.flagtip{position:relative;display:inline-flex;vertical-align:middle}
.flag-ic{all:unset;cursor:help;display:inline-flex;align-items:center;gap:3px;padding:1px 7px 1px 5px;border-radius:999px;font-size:11px;font-weight:700;line-height:18px}
.flag-ic.err{color:var(--err);background:var(--err-bg)}.flag-ic.warn{color:var(--warn);background:var(--warn-bg)}
.flag-ic:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.flag-pop{display:none;position:fixed;z-index:95;width:max-content;max-width:min(380px,calc(100vw - 24px));flex-direction:column;gap:8px;padding:12px 14px;border-radius:10px;
  background:var(--surface);color:var(--text);border:1px solid var(--border-2);box-shadow:var(--shadow-lg);font-size:12.5px;line-height:1.45;white-space:normal;animation:fade .15s}
.flagtip:hover .flag-pop.on,.flagtip:focus-within .flag-pop.on{display:flex}
.flag-row{display:flex;flex-direction:column;gap:1px;padding-left:10px;border-left:2px solid var(--border-2)}
.flag-row code{font-family:var(--mono);font-size:11px;color:var(--muted);word-break:break-all}
.flag-hint{color:var(--muted);font-size:11.5px}
.flag-mini{display:inline-flex;vertical-align:-3px;cursor:help}.flag-mini.err{color:var(--err)}.flag-mini.warn{color:var(--warn)}

/* Ô Máy chủ web: 3 số liệu nhỏ */
.mstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mstat{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:8px;background:var(--surface-2);border:1px solid var(--border-2);min-width:0}
.mstat b{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mstat.warn{background:var(--warn-bg);border-color:transparent}.mstat.warn .xs{color:var(--warn)}
@media (max-width:420px){.mstats{grid-template-columns:1fr 1fr}.mstat:last-child:nth-child(odd){grid-column:1/-1}}

/* Tìm mẫu / RUN trên toàn hệ thống */
.hsearch{gap:8px;padding:0 12px;border:1px solid rgba(255,255,255,.18);border-radius:8px;color:var(--nav-text);font:inherit;font-size:13px}
.hsearch:hover{background:rgba(255,255,255,.08)}
.hsearch kbd{font-family:var(--mono);font-size:11px;padding:1px 6px;border-radius:4px;border:1px solid rgba(255,255,255,.25);color:var(--nav-muted)}
.srch-in{position:relative}.srch-in .input{padding-left:40px;font-size:16px;min-height:48px}
.srch-in>svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.srch-res{display:flex;flex-direction:column;gap:2px;max-height:min(60vh,520px);overflow:auto;margin:0 -8px;padding:0 8px}
.srch-h{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:10px 0 4px}
.srch-it{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:8px;color:inherit;text-decoration:none;min-height:44px}
.srch-it:hover,.srch-it.on{background:var(--accent-row)}
.srch-it.on{box-shadow:inset 3px 0 0 var(--accent)}
.srch-it .grow{min-width:0}.srch-it .grow>*{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srch-side{font-size:12px;white-space:nowrap}
.srch-foot{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--muted)}
.srch-foot kbd{font-family:var(--mono);font-size:11px;padding:0 5px;border-radius:4px;border:1px solid var(--border)}
@media (max-width:1560px){.hsearch .stext,.hsearch kbd{display:none}.hsearch{border:0;padding:0}}

/* Thanh nhắc chuyển sang HTTPS */
.tls-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px auto 0;max-width:min(1500px,calc(100% - 32px));padding:10px 14px;border-radius:10px;background:var(--warn-bg);color:var(--warn);font-size:13px}
.tls-banner .grow{min-width:220px}