/* TNH Hospital Group · Procurement UI design system
   UI/UX Pro Max: enterprise healthcare / restrained minimalism / data-dense forms.
   Screen-only by design. Printed A4/Word/HTML layouts remain governed by the original stylesheet. */
@media screen {
:root {
  --ws:#f3f7f7; --paper:#fff; --ink:#18302e; --muted:#617775;
  --line:#d8e4e1; --line2:#e7efed;
  --brand:#126b55; --brand-ink:#fff; --tint:#edf7f3; --accent:#087c60;
  --fill:#f7fcfa; --fill-line:#c7dfd5; --calc:#f0f5f4;
  --ok:#166747; --ok-bg:#e8f6ef;
  --shadow-card:0 2px 12px rgba(24,63,52,.045);
  --shadow-floating:0 10px 32px rgba(24,63,52,.095);
  --ui-radius:12px;
  --f-body:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
html{scroll-padding-top:115px}
body{font-size:13.5px;line-height:1.5;background:var(--ws)}
a,button,select,summary{cursor:pointer}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid #16a57e;outline-offset:2px
}
.top {
  min-height:78px;display:flex;align-items:center;gap:16px;padding:9px max(24px,env(safe-area-inset-left,0px));
  border-bottom:1px solid var(--line);background:var(--paper);color:var(--ink);
  box-shadow:0 2px 12px rgba(22,47,41,.045);
}
body::before{background:var(--paper)}
.tnh-brand-link{display:inline-flex;gap:14px;align-items:center;min-width:0;flex-shrink:1;text-decoration:none;color:inherit;border-radius:8px}
.tnh-brand-mark{
 display:block;flex:none;width:108px;height:58px;overflow:hidden;
 border-right:1px solid var(--line);position:relative
}
.tnh-brand-logo{
 display:block;position:absolute;width:110px;height:110px;max-width:none;max-height:none;
 left:-2px;top:-22px;object-fit:contain;padding:0;border:0
}
.tnh-brand-wordmark{display:flex;flex-direction:column;gap:2px;min-width:0}
.tnh-brand-wordmark strong{display:block;font-weight:700;font-size:15px;line-height:1.2;letter-spacing:-.02em}
.tnh-brand-wordmark small{font-size:10.5px;color:var(--muted);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.tnh-header-nav{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.tnh-header-nav a{padding:8px 12px;color:var(--muted);font-size:12px;font-weight:600;text-decoration:none;border-radius:8px;white-space:nowrap}
.tnh-header-nav a:hover,.tnh-header-nav a:focus-visible{background:var(--tint);color:var(--brand)}
.tnh-header-nav .tnh-nav-emph{border:1px solid var(--line);color:var(--brand);background:var(--paper)}
.top .src {
  color:var(--muted);font-family:var(--f-mono);font-size:10px;letter-spacing:0;opacity:1;
  border-left:1px solid var(--line);padding-left:16px;max-width:210px;line-height:1.45
}
.shell{max-width:1880px;grid-template-columns:244px minmax(0,1fr) 274px;gap:20px;
  padding:22px max(20px,env(safe-area-inset-left,0px)) 56px
}
nav.side, aside.guide{top:calc(env(safe-area-inset-top,0px) + 96px);max-height:calc(100vh - 112px);scrollbar-width:thin}
nav.side {
  background:var(--paper);border:1px solid var(--line);border-radius:var(--ui-radius);padding:12px 9px;
  box-shadow:var(--shadow-card)
}
.side .pl{margin:17px 0 5px;padding:0 11px;font-size:10px;letter-spacing:.09em;color:#6a817d}
.side a{gap:9px;align-items:center;border-radius:8px;padding:10px 11px;line-height:1.4;transition:background .14s ease,color .14s ease}
.side a:hover{background:var(--tint);color:var(--brand)}
.side a.on{background:#e6f4ed;box-shadow:inset 3px 0 0 var(--brand);font-weight:700;color:#0c624c}
.side .no{font-family:var(--f-mono);min-width:28px;font-size:11px;font-weight:600;color:var(--brand)}
main{min-width:0}
aside.guide{gap:13px}
.card{border:1px solid var(--line);border-radius:var(--ui-radius);padding:16px;background:var(--paper);box-shadow:var(--shadow-card)}
.card h3{font-size:10px;letter-spacing:.09em;color:var(--brand);margin-bottom:12px}
.card li{line-height:1.55}
.card li+li{margin-top:6px}
.navsel{border-radius:10px;min-height:43px;box-shadow:var(--shadow-card);border-color:var(--line)}
/* Home / management overview */
.tnh-home-hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(215px,.6fr);gap:26px;
  background:linear-gradient(112deg,#0d6954,#138064);color:#fff;
  border:1px solid #176b54;border-radius:16px;box-shadow:var(--shadow-floating);
  padding:30px 32px;margin-bottom:24px;overflow:hidden;position:relative
}
.tnh-home-hero::after{content:"";position:absolute;width:220px;height:220px;border:1px solid rgba(255,255,255,.16);border-radius:50%;right:-94px;top:-105px;pointer-events:none}
.tnh-eyebrow{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#c1f0dc}
.tnh-home-hero h1{font-size:clamp(21px,2.5vw,28px);letter-spacing:-.035em;line-height:1.25;margin:10px 0 10px;color:#fff}
.tnh-home-hero p{max-width:62ch;font-size:12.5px;line-height:1.65;margin:0;color:#e0f6ed}
.tnh-home-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}
.tnh-home-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:37px;padding:9px 15px;
  text-decoration:none;border-radius:8px;font-size:12px;font-weight:700;border:1px solid rgba(255,255,255,.5);color:#fff
}
.tnh-home-actions a.tnh-action-main{background:#fff;border-color:#fff;color:#09634e}
.tnh-home-actions a:hover{filter:brightness(.94)}
.tnh-hero-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-content:center}
.tnh-hero-metric{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.11);
  padding:13px 14px;border-radius:10px;min-height:78px;display:flex;flex-direction:column;justify-content:center;gap:4px}
.tnh-hero-metric b{font-family:var(--f-mono);font-size:24px;letter-spacing:-.04em;line-height:1.1;color:#fff}
.tnh-hero-metric span{font-size:10px;color:#e2f5ee}
.home>h2{font-size:17px;font-weight:700;letter-spacing:-.02em;margin:25px 0 10px}
.home .lead{max-width:95ch;color:var(--muted);font-size:12.5px}
.plgrid{grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:12px;margin-bottom:26px}
.plc{padding:0;gap:0;overflow:hidden;border-radius:var(--ui-radius);border-color:var(--line);box-shadow:var(--shadow-card)}
.plc .h{gap:10px;padding:15px 16px 12px;align-items:baseline;border-bottom:1px solid var(--line2)}
.plc .h b{flex:none;background:var(--tint);color:var(--brand);font-size:10px;border-radius:6px;padding:4px 7px}
.plc .h h3{font-size:13px;color:var(--ink);font-weight:700}
.plc a{grid-template-columns:55px minmax(0,1fr);border:0;border-bottom:1px solid var(--line2);border-radius:0;padding:11px 16px;gap:11px;align-items:start;transition:background .12s ease}
.plc a:last-child{border-bottom:0}
.plc a:hover{background:var(--tint);border-color:var(--line2)}
.plc a .no{font-weight:700;font-family:var(--f-mono);color:var(--brand)}
.plc a small{font-size:10.5px;line-height:1.5;margin-top:4px}
.home .tw{border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-card);background:var(--paper)}
table.sc{border:0}
table.sc th{font-size:10px;letter-spacing:.045em;background:#edf4f2;color:#496460;position:sticky;top:0;z-index:1}
table.sc th, table.sc td{padding:12px 15px;border-color:var(--line2)}
table.sc tbody tr:hover{background:#f7fbf9}
.scenario-step a:hover{color:var(--brand)}
/* Form workspace */
.form-workspace-head{display:flex;gap:16px;align-items:center;justify-content:space-between;
 background:var(--paper);border:1px solid var(--line);border-radius:var(--ui-radius);
 padding:17px 19px;margin-bottom:12px;box-shadow:var(--shadow-card)
}
.form-workspace-head .form-eyebrow{font-family:var(--f-mono);font-size:10px;font-weight:700;color:var(--accent);letter-spacing:.08em}
.form-workspace-head h2{font-size:17px;line-height:1.35;margin:4px 0 3px;font-weight:700;letter-spacing:-.02em}
.form-workspace-head p{margin:0;font-size:11.5px;color:var(--muted)}
.form-workspace-head .form-right{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.form-workspace-head .form-right span{font-size:10px;padding:6px 9px;border-radius:7px;border:1px solid var(--line);background:var(--tint);color:var(--brand);font-weight:600;white-space:nowrap}
.bar{background:var(--paper);border:1px solid var(--line);border-radius:var(--ui-radius);
 padding:10px;gap:7px;margin-bottom:14px;box-shadow:var(--shadow-card)
}
.btn{border:1px solid var(--line);border-radius:8px;background:var(--paper);padding:9px 12px;
 font-size:11.5px;font-weight:600;min-height:36px;transition:background .12s ease,border-color .12s ease,transform .12s ease;
 box-shadow:0 1px 2px rgba(13,63,45,.025)
}
.btn:hover{background:var(--tint);border-color:#9dc9b7}
.btn.pri{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn.pri:hover{background:#09513f;border-color:#09513f}
.bar .btn{white-space:nowrap}
.seg{border-color:var(--line);border-radius:8px}
.seg button{font-size:11.5px;font-weight:650;padding:8px 12px}
.seg button[aria-pressed=true]{background:var(--tint);color:var(--brand)}
.prog{flex-wrap:nowrap;white-space:nowrap;font-size:11px}
.prog i{width:64px;background:var(--line2)}
.prog i b{background:var(--brand)}
.paper{border:1px solid #d5e0de;border-radius:10px;box-shadow:0 2px 15px rgba(20,54,44,.05);padding:25px 28px 22px}
.paper+.paper{margin-top:18px}
.paper .hd{border-color:var(--line);border-radius:5px}
.paper .hd .k{color:var(--brand);letter-spacing:.08em}
.paper h1.tt{letter-spacing:-.01em}
.sec{border-color:var(--line);border-radius:5px;overflow:hidden}
.sec .n{background:var(--brand)}
.sec .t{background:var(--tint);color:var(--ink)}
.part{color:var(--brand);border-color:var(--brand);border-radius:6px}
table.grid thead th, table.mx thead th{background:#eaf4f0;color:#244b42;letter-spacing:.015em}
table.kv th{background:#eff6f3;color:#4c6660;letter-spacing:.005em}
table.grid td,table.grid th,table.kv td,table.kv th,table.mx td,table.mx th,table.sg td,table.sg th{border-color:#d7e4df}
table.grid tbody tr:nth-child(even),table.mx tbody tr:nth-child(even){background:#fbfdfc}
table.grid tbody tr:hover,table.mx tbody tr:hover{background:#f1f9f5}
.in{background:var(--fill);border-color:var(--fill-line);border-radius:6px;min-height:34px;font-size:12px}
.in:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(8,124,96,.09)}
.in.auto,table.grid td.fx,table.grid td.cc,table.mx td.fx,table.mx td.cc{background:var(--calc)}
.rowdel{border-radius:5px}
.rowdel:hover{background:var(--bad-bg)}
.addrow{border-color:#a9cbbd;border-radius:8px;color:var(--brand);padding:7px 12px}
.addrow:hover{background:var(--tint)}
.page-tools,.col-editor{border-color:var(--line);border-radius:8px;background:#f4faf6}
.col-editor summary{color:var(--brand)}
.sheet-tools{border-color:var(--line)!important;background:var(--tint)!important;border-radius:8px!important}
.sheet-tools .btn{font-weight:600}
/* Scrollbars: data tables stay scrollable rather than silently clipped */
.tw{scrollbar-color:#b8d7c9 transparent;scrollbar-width:thin}
.tw:focus-within{outline-offset:2px}
.fhint{border-radius:10px}
.toast{border-radius:9px;box-shadow:var(--shadow-floating)}
/* Dark tokens: follow existing supported system & explicit dark settings */
}
@media screen and (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --ws:#101b19;--paper:#172621;--ink:#e2f2ec;--muted:#a1b8af;
    --line:#30483e;--line2:#263a32;--brand:#27a77d;--brand-ink:#071e17;
    --tint:#203b30;--accent:#5bd2a5;--fill:#172d23;--fill-line:#35644f;
    --calc:#25392f;--shadow-card:0 3px 12px rgba(0,0,0,.12);--shadow-floating:0 10px 30px rgba(0,0,0,.25);
  }
}
@media screen{
:root[data-theme=dark]{
 --ws:#101b19;--paper:#172621;--ink:#e2f2ec;--muted:#a1b8af;
 --line:#30483e;--line2:#263a32;--brand:#27a77d;--brand-ink:#071e17;
 --tint:#203b30;--accent:#5bd2a5;--fill:#172d23;--fill-line:#35644f;
 --calc:#25392f;--shadow-card:0 3px 12px rgba(0,0,0,.12);--shadow-floating:0 10px 30px rgba(0,0,0,.25)
}
:root:is([data-theme=dark]) .side a.on{background:#204732;color:#c8f9e5}
:root:is([data-theme=dark]) .tnh-home-hero{background:linear-gradient(112deg,#145f48,#257c5c)}
:root:is([data-theme=dark]) table.sc th,
:root:is([data-theme=dark]) table.grid thead th,
:root:is([data-theme=dark]) table.mx thead th,
:root:is([data-theme=dark]) table.kv th{background:#203b30;color:#d5efe3}
:root:is([data-theme=dark]) table.grid tbody tr:nth-child(even),
:root:is([data-theme=dark]) table.mx tbody tr:nth-child(even){background:#1a2b23}
:root:is([data-theme=dark]) table.grid tbody tr:hover,
:root:is([data-theme=dark]) table.mx tbody tr:hover{background:#234632}
:root:is([data-theme=dark]) .btn.pri{color:#062117}
:root:is([data-theme=dark]) .top{background:var(--paper)}
:root:is([data-theme=dark]) .tnh-brand-mark{background:#fff;border-radius:5px}
}
@media screen and (max-width:1460px){
 .shell{grid-template-columns:222px minmax(0,1fr) 258px;gap:14px;padding-inline:16px}
 .top .src{display:none}
}
@media screen and (max-width:1160px){
 .shell{grid-template-columns:210px minmax(0,1fr)}
 aside.guide{position:static;grid-column:2;max-height:none}
 .tnh-header-nav{margin-left:auto}
 .tnh-home-hero{grid-template-columns:minmax(0,1fr) 210px;padding:25px}
 .bar{position:static}
}
@media screen and (max-width:820px){
 .top{min-height:68px;padding:10px 14px;gap:8px}
 .tnh-brand-mark{width:77px;height:49px;padding-right:7px}.tnh-brand-logo{width:91px;height:91px;left:-8px;top:-19px}
 .tnh-brand-wordmark strong{font-size:13px}
 .tnh-brand-wordmark small{font-size:9px}
 .tnh-header-nav{width:100%;justify-content:space-between;gap:3px}
 .tnh-header-nav a{font-size:10.5px;padding:7px 9px}
 .shell{grid-template-columns:minmax(0,1fr);padding:14px 12px 42px}
 nav.side{display:none}
 aside.guide{grid-column:1}
 .tnh-home-hero{grid-template-columns:1fr;padding:22px 20px;gap:20px}
 .tnh-hero-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}
 .tnh-hero-metric{padding:10px;min-height:68px}
 .tnh-hero-metric b{font-size:19px}
 .tnh-hero-metric span{font-size:9px}
 .form-workspace-head{padding:14px;flex-direction:column;align-items:flex-start}
 .form-workspace-head h2{font-size:15px}
 .bar{padding:9px}
 .bar .btn{flex:1 1 auto}
 .paper{padding:17px 12px}
 .home .lead{font-size:12px}
 .plgrid{grid-template-columns:1fr}
}
@media screen and (max-width:500px){
 .tnh-hero-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
 .tnh-home-hero{padding:20px 16px}
 .tnh-home-hero h1{font-size:22px}
 .tnh-home-actions a{flex:1 1 auto}
 .top{align-items:flex-start}
 .tnh-header-nav{justify-content:flex-start}
 .home .plc .h{padding:13px}
 .form-workspace-head .form-right{gap:5px}
 .form-workspace-head .form-right span{font-size:9px}
 .bar .prog{width:100%;justify-content:flex-end}
}
@media (prefers-reduced-motion:reduce){.btn,.plc a,.side a{transition:none!important}}