/* Phông Be Vietnam Pro (SIL OFL 1.1, xem fonts/OFL.txt) đóng gói kèm phần mềm, không phụ thuộc Internet */
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/be-vietnam-pro-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:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/be-vietnam-pro-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:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/be-vietnam-pro-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:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/be-vietnam-pro-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:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/be-vietnam-pro-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:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/be-vietnam-pro-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:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/be-vietnam-pro-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:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/be-vietnam-pro-latin-ext-700-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:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/be-vietnam-pro-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:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/be-vietnam-pro-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:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/be-vietnam-pro-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:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/be-vietnam-pro-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}
/* Layout: sidebar điều hướng theo phân hệ + vùng làm việc; dưới 820px chuyển sang thanh tab dưới cho thiết bị di động */
/* Bản 1.3: hệ màu theo lựa chọn của người dùng (Giao diện → chế độ sáng/tối, tông màu, kiểu thanh bên, cỡ chữ, mật độ).
   JS đặt trên <html>: data-mode="light|dark" (đã quy đổi từ "tự động"), data-color, data-side, data-size, data-density. */
:root{
  --bg:#f4f6f9; --panel:#ffffff; --panel2:#f3f5f8; --ink:#141a23; --muted:#5a6474; --line:#e3e7ed; --line2:#d0d7e1;
  --nation:#c8102e;
  /* tông màu (mặc định: xanh hành chính) */
  --accent:#1f5fbf; --accent-ink:#ffffff;
  --brand:#0d2a57; --brand-hi:#1a3d76; --brand-ink:#c6d3ea; --gold:#d4a72c;
  --accent-soft:color-mix(in srgb, var(--accent) 11%, var(--panel));
  --accent-line:color-mix(in srgb, var(--accent) 30%, var(--panel));
  /* thanh bên dùng màu thương hiệu; kiểu "sáng" đổi sang nền trắng */
  --side:var(--brand); --side-hi:var(--brand-hi); --side-ink:var(--brand-ink); --side-strong:#ffffff; --side-mark:var(--gold); --side-line:var(--brand-hi);
  /* màu trạng thái cố định, không đổi theo tông */
  --amber:#a15f0b; --amber-soft:#fbefd9; --red:#b42318; --red-soft:#fde6e2;
  --green:#0f766e; --green-soft:#dcf1ee; --blue:#1f5fbf; --blue-soft:#e3ecfa;
  --c1:var(--accent); --c2:#d4a72c; --c3:#0f766e; --c4:#8a5aa8; --c5:#a3adbb;
  --f-ui:"Be Vietnam Pro", "Segoe UI", Roboto, Arial, sans-serif;
  --f-num:var(--f-ui);
  --r:14px; --r-sm:10px;
  --pad:20px; --gap:20px; --cell:11px;
  --zoom:1;
  --sh-1:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.04);
  --sh-2:0 6px 16px rgba(16,24,40,.08), 0 2px 4px rgba(16,24,40,.04);
  --sh-3:0 24px 60px rgba(8,14,28,.28);
}
:root[data-color="teal"]  {--accent:#0b7a72; --brand:#0a3431; --brand-hi:#144a45; --brand-ink:#bfdcd8; --gold:#e0b84a; --c3:#1f5fbf}
:root[data-color="indigo"]{--accent:#4338ca; --brand:#1e1b4b; --brand-hi:#2f2b70; --brand-ink:#cfcdf0; --gold:#e2bd55; --c4:#c2410c}
:root[data-color="green"] {--accent:#15803d; --brand:#0f2f1c; --brand-hi:#1b4a2e; --brand-ink:#c4dfcc; --gold:#e2bd55; --c3:#1f5fbf}
:root[data-color="earth"] {--accent:#b4490c; --brand:#2e1608; --brand-hi:#4b2613; --brand-ink:#ecd2c2; --gold:#f0b44c; --c2:#0e7490}
:root[data-color="slate"] {--accent:#334155; --brand:#111827; --brand-hi:#232c3b; --brand-ink:#cbd2dc; --gold:#c9a34a; --c5:#c4cbd6}

:root[data-mode="dark"]{
  --bg:#0b1018; --panel:#131a25; --panel2:#18212f; --ink:#e6ebf2; --muted:#9aa6b8; --line:#243041; --line2:#334157;
  --sh-1:none; --sh-2:0 6px 16px rgba(0,0,0,.4); --sh-3:0 24px 60px rgba(0,0,0,.55);
  --accent:#6ea1ee; --accent-ink:#081a36; --brand:#08152b; --brand-hi:#16305a; --brand-ink:#b8c6de; --gold:#e2bd55;
  --nation:#e5484d;
  --amber:#e2a74c; --amber-soft:#3a2b12; --red:#f07568; --red-soft:#3e1a16;
  --green:#4fc2b4; --green-soft:#12302d; --blue:#6ea1ee; --blue-soft:#16294a;
  --c2:#e2bd55; --c3:#4fc2b4; --c4:#c39be0; --c5:#5d6b80;
  color-scheme:dark;
}
:root[data-mode="dark"][data-color="teal"]  {--accent:#4fc2b4; --accent-ink:#062320; --brand:#061f1d; --brand-hi:#0f3a36; --brand-ink:#b3d6d1; --c3:#6ea1ee}
:root[data-mode="dark"][data-color="indigo"]{--accent:#a5a0f5; --accent-ink:#15123d; --brand:#12102e; --brand-hi:#262257; --brand-ink:#c9c6ee; --c4:#f3a06b}
:root[data-mode="dark"][data-color="green"] {--accent:#5fcf8a; --accent-ink:#062312; --brand:#0a1f13; --brand-hi:#173a25; --brand-ink:#bcd9c5; --c3:#6ea1ee}
:root[data-mode="dark"][data-color="earth"] {--accent:#f3a06b; --accent-ink:#2a1206; --brand:#1e0f06; --brand-hi:#3a2010; --brand-ink:#e6cdbd; --c2:#4cc3d9}
:root[data-mode="dark"][data-color="slate"] {--accent:#b8c2d1; --accent-ink:#111827; --brand:#0b0f17; --brand-hi:#1f2633; --brand-ink:#c3cad6}
:root[data-mode="dark"]{--accent-soft:color-mix(in srgb, var(--accent) 16%, var(--panel)); --accent-line:color-mix(in srgb, var(--accent) 38%, var(--panel))}

/* Thanh bên kiểu sáng */
:root[data-side="light"]{--side:var(--panel); --side-hi:var(--accent-soft); --side-ink:var(--muted); --side-strong:var(--ink); --side-mark:var(--accent); --side-line:var(--line)}
:root[data-side="light"] .side{border-right:1px solid var(--line)}
:root[data-side="light"] .nav a.on{color:var(--accent)}
:root[data-side="light"] .nav a:hover:not(.on){background:var(--panel2)}

/* Cỡ chữ và mật độ hiển thị */
:root[data-size="sm"]{--zoom:.92}
:root[data-size="lg"]{--zoom:1.12}
:root[data-size="xl"]{--zoom:1.25}
body{zoom:var(--zoom)}
:root[data-density="compact"]{--pad:14px; --gap:14px; --cell:7px}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
#root{min-height:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--f-ui); font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; -webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit; color:inherit}
a{color:var(--accent)}
.num{font-variant-numeric:tabular-nums lining-nums}
h1,h2,h3,h4{margin:0; text-wrap:balance; line-height:1.25}
h1{font-size:1.6rem; font-weight:700; letter-spacing:-.02em}
h2{font-size:1.05rem; font-weight:600; letter-spacing:-.01em}
h3{font-size:1rem; font-weight:600}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.eyebrow{font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600}

/* Khung ứng dụng */
.app{display:grid; grid-template-columns:260px minmax(0,1fr); min-height:100%; border-top:3px solid var(--nation)}
.side{background:var(--side); color:var(--side-ink); display:flex; flex-direction:column; position:sticky; top:0; height:calc(100vh / var(--zoom)); overflow:auto}
.brand{display:flex; gap:11px; align-items:center; padding:20px 18px 16px}
.brand .mark{width:40px; height:40px; border-radius:50%; color:var(--side-mark); box-shadow:inset 0 0 0 1.5px var(--side-mark); padding:3px; background:var(--side-hi); display:grid; place-items:center; flex:none}
.brand b{display:block; font-size:14px; color:var(--side-strong); line-height:1.25; letter-spacing:-.01em}
.brand{border-bottom:1px solid var(--side-line); margin-bottom:4px}
.brand .mark svg{width:100%; height:100%}
.brand span{display:block; white-space:nowrap; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--side-mark); font-weight:600; margin-bottom:2px}
.nav{display:flex; flex-direction:column; padding:4px 8px 16px; gap:1px}
.nav .grp{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; opacity:.55; padding:14px 10px 4px}
.nav a{display:flex; align-items:center; gap:11px; padding:8px 12px; border-radius:10px; transition:background .15s, color .15s; color:var(--side-ink); text-decoration:none; font-size:13.5px}
.nav a:hover{background:var(--side-hi)}
.nav a:hover{color:var(--side-strong)}
.nav a.on{background:var(--side-hi); color:var(--side-strong); font-weight:600; box-shadow:inset 3px 0 0 var(--side-mark)}
.nav a svg{width:17px; height:17px; flex:none; opacity:.85}
.nav a .cnt{margin-left:auto; background:var(--red); color:#fff; font-size:11px; font-weight:600; border-radius:9px; min-width:20px; text-align:center; padding:1px 6px; font-variant-numeric:tabular-nums}
.side .foot{margin-top:auto; padding:12px 16px; font-size:11.5px; opacity:.7; border-top:1px solid var(--side-line)}
.main{min-width:0; display:flex; flex-direction:column}
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:color-mix(in srgb, var(--panel) 88%, transparent); -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line); min-height:60px;
  display:flex; align-items:center; gap:12px; padding-block:10px; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)); flex-wrap:wrap}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:30; background:var(--panel)}
.top .title{font-weight:600; font-size:15px; min-width:0}
.top .sp{flex:1}
.top select{max-width:340px}
.mode{font-size:11.5px; padding:3px 8px; border-radius:20px; background:var(--panel2); border:1px solid var(--line); color:var(--muted); white-space:nowrap}
.mode.shared{color:var(--green); border-color:var(--green); background:var(--green-soft)}
.who{display:flex; align-items:center; gap:8px; font-size:13px}
.avatar{width:30px; height:30px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; font-weight:700; font-size:12px; flex:none}
.content{padding-block:var(--gap) 90px; padding-left:max(24px,env(safe-area-inset-left,0px)); padding-right:max(24px,env(safe-area-inset-right,0px)); display:flex; flex-direction:column; gap:var(--gap); max-width:1520px; width:100%}
.head{display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap}
.head .grow{flex:1; min-width:220px}
.head p{margin:6px 0 0; color:var(--muted)}

/* Thành phần */
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:var(--pad); min-width:0; box-shadow:var(--sh-1)}
.card > h2, .card > .ch{margin-bottom:16px}
.ch{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.ch h2{flex:1; min-width:160px}
.grid{display:grid; gap:calc(var(--gap) - 4px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.span2{grid-column:span 2}
.kpi{padding:16px 18px}
.kpi .v{font-size:clamp(1.3rem, 1.1rem + .6vw, 1.7rem); font-weight:700; margin-top:6px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap; line-height:1.2}
.kpi .s{font-size:12.5px; color:var(--muted); margin-top:4px}
.kpi.warn{border-color:var(--amber); background:var(--amber-soft)}
.kpi.bad{border-color:var(--red); background:var(--red-soft)}
.btn{border:1px solid var(--line2); background:var(--panel); border-radius:var(--r-sm); padding:0 14px; min-height:36px; font-weight:500; transition:background .15s, border-color .15s; cursor:pointer; display:inline-flex; align-items:center; gap:6px; font-size:13.5px; white-space:nowrap; text-decoration:none; color:var(--ink)}
.btn:hover{border-color:var(--accent); background:var(--panel2)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600; box-shadow:0 1px 2px color-mix(in srgb, var(--accent) 35%, transparent)}
.btn.primary:hover{background:color-mix(in srgb, var(--accent) 88%, #000); border-color:transparent}
.btn.ghost{background:transparent; border-color:transparent}
.btn.ghost:hover{background:var(--panel2); border-color:var(--line)}
.btn.danger{color:var(--red)}
.btn.sm{padding:0 10px; min-height:30px; font-size:12.5px}
.btn:disabled{opacity:.5; cursor:not-allowed}
.icon-btn{border:0; background:transparent; cursor:pointer; font-size:20px; line-height:1; padding:4px 8px; color:var(--muted)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
input,select,textarea{background:var(--panel); border:1px solid var(--line2); border-radius:var(--r-sm); padding:7px 11px; min-width:0; transition:border-color .15s, box-shadow .15s}
input:not([type=checkbox]):not([type=radio]):not([type=file]),select{min-height:38px}
input[type=checkbox],input[type=radio]{accent-color:var(--accent); width:16px; height:16px; margin:0; flex:none}
textarea{resize:vertical; min-height:70px}
input:focus,select:focus,textarea:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent)}
.toolbar{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.toolbar input[type=search]{flex:1; min-width:180px; max-width:340px}
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); overflow-x:auto}
.tabs button{border:0; background:none; padding:10px 14px; font-size:14px; cursor:pointer; color:var(--muted); border-bottom:2px solid transparent; white-space:nowrap; font-weight:500}
.tabs button.on{color:var(--accent); border-bottom-color:var(--accent)}
.tw{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--panel); box-shadow:var(--sh-1)}
.card .tw{box-shadow:none}
table{border-collapse:collapse; width:100%; font-size:13px}
th,td{padding:var(--cell) 12px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
th{background:var(--panel2); font-weight:600; font-size:11.5px; letter-spacing:.02em; color:var(--muted); white-space:nowrap; position:sticky; top:0}
td.r,th.r{text-align:right}
td.r{font-variant-numeric:tabular-nums; white-space:nowrap}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--panel2)}
tr.click{cursor:pointer}
tfoot td{font-weight:600; background:var(--panel2)}
.acts{white-space:nowrap; text-align:right}
.pill{display:inline-block; font-size:11.5px; padding:3px 10px; line-height:1.4; border-radius:20px; font-weight:600; white-space:nowrap; background:var(--panel2); color:var(--muted); border:1px solid var(--line)}
.pill.ok{background:var(--green-soft); color:var(--green); border-color:transparent}
.pill.warn{background:var(--amber-soft); color:var(--amber); border-color:transparent}
.pill.bad{background:var(--red-soft); color:var(--red); border-color:transparent}
.pill.info{background:var(--blue-soft); color:var(--blue); border-color:transparent}
.pill.acc{background:var(--accent-soft); color:var(--accent); border-color:transparent}
.bar{height:8px; background:color-mix(in srgb, var(--ink) 9%, transparent); border-radius:99px; overflow:hidden; min-width:70px; position:relative}
.bar i{display:block; height:100%; background:var(--accent); border-radius:99px}
.bar.warn i{background:var(--amber)} .bar.bad i{background:var(--red)}
.barl{display:flex; align-items:center; gap:8px}
.barl .bar{flex:1}
.barl span{font-variant-numeric:tabular-nums; font-size:12px; font-weight:500; width:42px; text-align:right}
.kv{display:grid; grid-template-columns:minmax(120px,190px) minmax(0,1fr); gap:6px 14px; font-size:13.5px}
.kv dt{color:var(--muted)} .kv dd{margin:0}
.empty{padding:28px; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:var(--r)}
.alert{display:flex; gap:10px; padding:10px 14px; border-radius:var(--r-sm); border-left:3px solid var(--amber); background:var(--amber-soft); font-size:13px; align-items:flex-start}
.alert.bad{border-left-color:var(--red); background:var(--red-soft)}
.alert.info{border-left-color:var(--blue); background:var(--blue-soft)}
.alert b{font-weight:600}
.list{display:flex; flex-direction:column; gap:8px}
.chart{width:100%; height:auto; display:block}
.chart text{fill:var(--muted); font-family:var(--f-ui); font-size:11px}
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin-top:6px}
.legend i{display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px}
.sample{font-size:11px; color:var(--amber); font-weight:600}

/* Gantt */
/* Gantt bản 1.7: cuộn ngang, cột trái, phải đứng yên */
.gtools{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 10px}
.gseg{display:inline-flex; border:1px solid var(--line2); border-radius:var(--r-sm); overflow:hidden}
.gseg button{border:0; background:var(--panel); padding:6px 14px; font:inherit; font-size:13px; cursor:pointer; color:var(--ink)}
.gseg button + button{border-left:1px solid var(--line2)}
.gseg button.on{background:var(--accent); color:#fff; font-weight:600}
.gwrap{overflow:auto; max-height:72vh; border:1px solid var(--line); border-radius:var(--r-sm); overscroll-behavior-x:contain}
.gantt{width:max-content; min-width:100%}
.grow-row{display:grid; grid-template-columns:280px var(--gw,600px) 190px; border-bottom:1px solid var(--line); align-items:stretch; font-size:13px}
.grow-row[hidden]{display:none}
.grow-row.hd{background:var(--panel2); font-size:11.5px; color:var(--muted); font-weight:600; position:sticky; top:0; z-index:4}
.grow-row.pk{background:var(--panel2); font-weight:600}
.grow-row > div{padding:7px 10px; min-width:0}
.grow-row .gl, .grow-row .gr{position:sticky; z-index:3; background:var(--panel); display:flex; flex-direction:column; justify-content:center}
.grow-row .gl{left:0; box-shadow:1px 0 0 var(--line)}
.grow-row .gr{right:0; box-shadow:-1px 0 0 var(--line); flex-direction:row; align-items:center; gap:4px; flex-wrap:wrap; justify-content:flex-end; text-align:right}
.grow-row.hd .gl, .grow-row.hd .gr, .grow-row.pk .gl, .grow-row.pk .gr{background:var(--panel2)}
.grow-row.pk .gl{flex-direction:row; align-items:center; gap:8px; justify-content:space-between}
.gname{cursor:pointer} .gname:hover{color:var(--accent)}
.gtog{border:0; background:none; font:inherit; font-weight:600; color:var(--ink); cursor:pointer; text-align:left; padding:0; display:flex; gap:6px; align-items:center; min-width:0}
.gtog .car{display:inline-block; transition:transform .15s; color:var(--muted)}
.grow-row.pk.shut .gtog .car{transform:rotate(-90deg)}
.gtrack{position:relative; min-height:30px; padding:0!important}
.gplan{position:absolute; top:calc(50% - 7px); height:14px; border-radius:3px; background:var(--accent-soft); border:1px solid var(--accent); overflow:hidden}
.gplan i, .gsum i{position:absolute; inset:0 auto 0 0; background:var(--accent); opacity:.85}
.gplan.warn{border-color:var(--amber); background:var(--amber-soft)} .gplan.warn i{background:var(--amber)}
.gplan.bad{border-color:var(--red); background:var(--red-soft)} .gplan.bad i{background:var(--red)}
.gplan.pend{border-style:dashed; border-color:var(--muted); background:transparent}
.gsum{position:absolute; top:calc(50% - 4px); height:8px; border-radius:2px; background:var(--line2); overflow:hidden}
.gtoday{position:absolute; top:0; bottom:0; width:0; border-left:2px dashed var(--red); z-index:2}
.gmonth{position:absolute; top:0; bottom:0; border-left:1px solid var(--line); font-size:10.5px; padding:5px 0 0 3px; color:var(--muted); white-space:nowrap; overflow:hidden}
.gmonth.m1{border-left-color:var(--line2); color:var(--ink)}
@media (max-width:820px){
  .grow-row{grid-template-columns:128px var(--gw,600px) 52px; font-size:12px}
  .grow-row > div{padding:6px 7px}
  .grow-row .gr .btn{display:none}
  .grow-row.pk .gl{flex-direction:column; align-items:flex-start; gap:2px}
  .grow-row .gl .small{font-size:10.5px}
  .gwrap{max-height:none}
}

/* Modal */
.ov{position:fixed; inset:0; background:rgba(8,20,22,.5); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); z-index:100; display:grid; place-items:center; padding:16px; animation:fade .15s ease-out}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0; transform:translateY(8px)}}
.mform{background:var(--panel); border-radius:16px; box-shadow:var(--sh-3); animation:rise .18s ease-out; width:min(720px,100%); max-height:calc(100vh / var(--zoom) - 32px); display:flex; flex-direction:column; border:1px solid var(--line)}
.mform.narrow{width:min(440px,100%)}
/* hộp thoại nhập từ Excel (bản 1.5) */
.mform.imp{width:min(1040px,100%)}
.imp-body{padding:16px 20px; overflow:auto; display:flex; flex-direction:column; gap:12px; min-height:0}
.imp-step{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.imp-step > span{flex:1 1 260px}
.imp-sum{padding:8px 12px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel2)}
.imp-body .fgrid{padding:0}
.mform header,.mform footer{display:flex; align-items:center; gap:8px; padding:14px 20px}
.mform header{border-bottom:1px solid var(--line)} .mform header h3{flex:1}
.mform footer{border-top:1px solid var(--line); justify-content:flex-end}
.fgrid{padding:20px; overflow:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 14px}
.fld{display:flex; flex-direction:column; gap:4px; min-width:0}
.fld.full{grid-column:1/-1}
.fld label{font-size:12.5px; font-weight:500; color:var(--muted)}
.fld label .req{color:var(--red)}
.fld .hint{font-size:11.5px; color:var(--muted)}
.checks{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13px}
.checks label{display:flex; gap:6px; align-items:center; color:var(--ink); font-weight:400}
.perm{width:100%; font-size:13px} .perm td,.perm th{padding:5px 8px}
.toast{box-shadow:var(--sh-2); animation:rise .2s ease-out; position:fixed; right:max(16px,env(safe-area-inset-right,0px)); bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:200; background:var(--ink); color:var(--bg); padding:12px 16px; border-radius:10px; font-size:13.5px; max-width:380px}
.toast.err{background:var(--red); color:#fff}
.thumbs{display:flex; gap:6px; flex-wrap:wrap}
.thumbs img{width:84px; height:64px; object-fit:cover; border-radius:5px; border:1px solid var(--line); cursor:zoom-in}
.lightbox img{max-width:min(1100px,100%); max-height:85vh; border-radius:6px}

/* Đăng nhập: nền xanh hành chính, mặt trống đồng in chìm, dải đỏ – vàng ở mép trên */
.auth{min-height:calc(100vh / var(--zoom)); min-height:calc(100dvh / var(--zoom)); display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); border-top:4px solid var(--nation)}
.auth .art{background:var(--brand); color:var(--brand-ink); padding:44px max(48px,env(safe-area-inset-left,0px)); display:flex; flex-direction:column; justify-content:space-between; gap:32px; position:relative; overflow:hidden; border-right:3px solid var(--gold)}
.drum-mark{position:absolute; width:min(760px,120vh); aspect-ratio:1; right:-22%; top:50%; transform:translateY(-50%); color:var(--gold); opacity:.13; pointer-events:none}
.drum-mark svg{width:100%; height:100%}
.art-head{position:relative; display:flex; align-items:center; gap:14px}
.art-head .seal{width:56px; height:56px; border-radius:50%; color:var(--gold); background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 2px var(--gold); padding:4px; flex:none}
.art-head .seal svg{width:100%; height:100%}
.art-head .org1{font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:#fff; font-weight:600}
.art-head .org2{font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); font-weight:600; margin-top:2px}
.art-title{position:relative; max-width:30rem}
.art-title h1{color:#fff; font-size:clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); letter-spacing:-.025em; line-height:1.18; text-transform:uppercase}
.art-title h1::after{content:""; display:block; width:72px; height:4px; background:var(--nation); margin-top:20px; border-radius:2px; box-shadow:80px 0 0 var(--gold)}
.art-title p{margin:18px 0 0; font-size:15px; line-height:1.6; color:var(--brand-ink)}
.auth .art .meta{position:relative; font-size:12.5px; line-height:1.7; opacity:.8}
.auth .box{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:32px max(16px,env(safe-area-inset-right,0px)) 32px max(16px,env(safe-area-inset-left,0px))}
.auth form{width:min(400px,100%); display:flex; flex-direction:column; gap:16px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:28px; box-shadow:var(--sh-2)}
.form-head h2{font-size:1.3rem; text-transform:uppercase; letter-spacing:.01em; color:var(--brand)}
.form-head h2::after{content:""; display:block; width:40px; height:3px; background:var(--nation); margin-top:10px; border-radius:2px}
.form-head p{margin:10px 0 0}
.auth .err{color:var(--red); font-size:13px; min-height:1.2em}
.auth form .btn.primary{min-height:46px; justify-content:center; font-size:15px}
.auth label.checks{flex-wrap:nowrap; align-items:flex-start; gap:10px; line-height:1.45}
.auth label.checks input{margin-top:2px}
.auth form.wide{width:min(460px,100%)}
.auth input.otp{font-size:22px; letter-spacing:.35em; text-align:center; font-variant-numeric:tabular-nums}
.mfa-steps{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:10px; font-size:14px; line-height:1.5}
.mfa-steps .qr{width:180px; height:180px; margin:10px 0 8px; padding:8px; background:#fff; border:1px solid var(--line); border-radius:10px}
.mfa-steps .qr svg{width:100%; height:100%; display:block}
.otp-key{display:block; margin-top:6px; font-size:15px; letter-spacing:.06em; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:8px 10px}
.mfa-links{margin:0; text-align:center}
.rcodes{margin:0; padding:12px 12px 12px 40px; display:grid; grid-template-columns:1fr 1fr; gap:6px 24px; background:var(--bg); border:1px solid var(--line); border-radius:10px; font-size:15px}
.rcodes code{letter-spacing:.04em}
.row-btns{display:flex; gap:8px; flex-wrap:wrap}
.mfa-state{display:flex; gap:10px; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:10px; color:var(--green)}
.mfa-state b{color:var(--ink)}
.auth-foot{margin:0; font-size:12px; color:var(--muted); text-align:center}
:root[data-mode="dark"] .form-head h2{color:var(--ink)}

/* 3D */
.viewer{position:relative; height:440px; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background:var(--panel2)}
.viewer canvas{display:block; width:100%; height:100%; touch-action:none; cursor:grab}
.viewer .hud{position:absolute; left:10px; top:10px; right:10px; display:flex; gap:8px; flex-wrap:wrap; pointer-events:none}
.viewer .hud > *{pointer-events:auto}
.viewer .tip{position:absolute; left:10px; bottom:10px; background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:8px 10px; font-size:12.5px; max-width:300px}

/* Di động */
.tabbar{display:none}
.tiles{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.tile{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-1); padding:16px 14px; transition:transform .12s; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:6px; min-height:96px}
.tile:active{transform:scale(.98)}
.tile svg{width:22px; height:22px; color:var(--accent); background:var(--accent-soft); box-sizing:content-box; padding:8px; border-radius:10px}
.tile b{font-weight:600}
.tile span{font-size:12px; color:var(--muted)}
.menu-btn{display:none}
@media (max-width:1100px){ .g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:820px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed; left:0; top:0; bottom:0; width:272px; z-index:60; transform:translateX(-105%); transition:transform .2s; height:auto; padding-top:env(safe-area-inset-top,0px)}
  .side.open{transform:none; box-shadow:0 0 0 100vmax rgba(0,0,0,.45)}
  .menu-btn{display:inline-flex}
  .top .mode, .top .who .nm{display:none}
  .top select{max-width:100%; flex:1 1 100%; order:5}
  .g2,.g3,.g4,.g5{grid-template-columns:minmax(0,1fr)}
  .span2{grid-column:auto}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .kpis > :last-child:nth-child(odd){grid-column:1/-1}
  .fgrid{grid-template-columns:minmax(0,1fr)}
  .tabbar{display:grid; grid-template-columns:repeat(5,1fr); position:fixed; left:0; right:0; bottom:0; z-index:50; background:var(--panel); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom,0px); padding-left:env(safe-area-inset-left,0px); padding-right:env(safe-area-inset-right,0px)}
  .tabbar a{display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 2px; font-size:10.5px; color:var(--muted); text-decoration:none; background:none; border:0; cursor:pointer}
  .tabbar a.on{color:var(--accent)}
  .tabbar svg{width:21px; height:21px}
  .auth{grid-template-columns:minmax(0,1fr)}
  .auth .art{padding:22px 16px 26px; min-height:0; gap:20px; border-right:0; border-bottom:3px solid var(--gold)}
  .auth .art .meta{display:none}
  .drum-mark{width:340px; right:-110px; top:auto; bottom:-150px; transform:none; opacity:.16}
  .art-head .seal{width:44px; height:44px}
  .art-head .org1,.art-head .org2{font-size:11px}
  .art-title h1{font-size:1.35rem}
  .art-title h1::after{margin-top:14px; width:56px; box-shadow:62px 0 0 var(--gold)}
  .art-title p{display:none}
  .auth .box{justify-content:flex-start; padding-top:22px}
  .auth form{padding:20px; border-radius:12px}
  .viewer{height:320px}
  .kv{grid-template-columns:minmax(0,1fr)} .kv dt{margin-top:6px}
}
/* Bảng dạng thẻ trên điện thoại: mỗi dòng thành một thẻ, nhãn cột hiện bên trái */
@media (max-width:820px){
  body{font-size:15px}
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px}
  .top{padding-block:8px; min-height:56px; gap:10px}
  .content{padding-block:18px 96px; padding-left:max(14px,env(safe-area-inset-left,0px)); padding-right:max(14px,env(safe-area-inset-right,0px)); gap:16px}
  h1{font-size:1.35rem}
  .card{padding:16px}
  .kpi{padding:14px}
  .kpi .v{font-size:1.25rem}
  .head .btn.primary{width:100%; justify-content:center; min-height:44px}
  .toolbar input[type=search]{max-width:none}
  .toolbar > *{flex:1 1 160px}
  .tw.rt{border:0; background:transparent; box-shadow:none; overflow:visible; border-radius:0}
  .rt table,.rt tbody,.rt tfoot,.rt tr,.rt td{display:block; width:100%}
  .rt thead{display:none}
  .rt tr{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:10px 14px; margin-bottom:10px; box-shadow:var(--sh-1)}
  .card .rt tr{box-shadow:none; background:var(--panel2)}
  .rt tbody tr:hover{background:var(--panel)}
  .rt td{border:0; padding:5px 0 5px 38%; position:relative; text-align:left; min-height:30px; white-space:normal}
  .rt td.r{text-align:left; white-space:normal}
  .rt td::before{content:attr(data-label); position:absolute; left:0; top:5px; width:35%; color:var(--muted); font-size:12.5px; line-height:1.4}
  .rt td[data-label=""],.rt td:not([data-label]){padding-left:0}
  .rt td[data-label=""]::before{display:none}
  .rt td:first-child{padding-left:0; font-weight:600; color:var(--accent); font-size:13px; letter-spacing:.02em}
  .rt td:first-child::before{display:none}
  .rt td.acts{padding:10px 0 2px; margin-top:6px; border-top:1px solid var(--line); text-align:left; display:flex; gap:6px; flex-wrap:wrap}
  .rt td.acts::before{display:none}
  .rt td.acts:empty{display:none}
  .rt td .btn.sm{min-height:36px}
  .rt tfoot tr{background:var(--accent-soft)}
  .rt tfoot td:empty{display:none}
}
@media (prefers-reduced-motion: reduce){ *{transition:none!important; animation:none!important} }

/* Tệp đính kèm dùng chung */
.attbox{display:flex; flex-direction:column; gap:6px}
.attlist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px}
.attlist li{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:5px 8px; border:1px solid var(--line); border-radius:6px; background:var(--panel)}
.attlist li > a, .attlist li > span:first-child{flex:1 1 220px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.attlist li.del{opacity:.55}
.attlist li.del > a{text-decoration:line-through}
.attdrop{display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; border:1.5px dashed var(--line); border-radius:8px; cursor:pointer; color:var(--muted); font-size:13px; text-align:center; position:relative}
.attdrop:hover, .attdrop.over{border-color:var(--accent); color:var(--accent)}
.attdrop input[type=file]{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.attl{display:inline-flex; flex-wrap:wrap; gap:4px 10px; align-items:center}
.attl a{white-space:nowrap; max-width:260px; overflow:hidden; text-overflow:ellipsis; display:inline-block; vertical-align:bottom}
.thumbs figure{margin:0; display:flex; flex-direction:column; gap:2px; max-width:84px}
.thumbs figcaption{font-size:11px; color:var(--muted); line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.photo-edit{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
.photo-edit figure{margin:0; display:flex; flex-direction:column; gap:4px; border:1px solid var(--line); border-radius:6px; padding:6px}
.photo-edit img{width:100%; height:96px; object-fit:cover; border-radius:4px}
.photo-edit figure.del{opacity:.45}
.aico{vertical-align:-2px; flex:none}

/* Logo đơn vị do quản trị tải lên */
.brand .mark.logo,.art-head .seal.logo,.side-prev .mark.logo{background:#fff; box-shadow:none; border-radius:10px; padding:3px}
.brand .mark img,.art-head .seal img,.side-prev .mark img{width:100%; height:100%; object-fit:contain; display:block}
.brand-prev{background:var(--brand); border-radius:12px; padding:14px 16px; margin:8px 0 12px}
.side-prev{display:flex; gap:11px; align-items:center}
.side-prev .mark{width:40px; height:40px; border-radius:50%; color:var(--gold); box-shadow:inset 0 0 0 1.5px var(--gold); padding:3px; display:grid; place-items:center; flex:none}
.side-prev .mark svg{width:100%; height:100%}
.side-prev span{display:block; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--gold); font-weight:600}
.side-prev b{display:block; font-size:14px; color:#fff}
/* Hướng dẫn sử dụng */
.guide-cat{margin:18px 0 8px; font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted)}
.guide .ch h2{flex:1}
.guide-groups{display:flex; gap:4px; flex-wrap:wrap}
.guide-text{white-space:pre-wrap; line-height:1.6}
.guide-docs{display:flex; flex-direction:column; gap:8px; margin-top:10px}
.guide-doc{display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:10px; padding:10px 12px}
.guide-doc .grow{flex:1; min-width:0} .guide-doc b{font-weight:600; word-break:break-word}
.guide-video{margin:12px 0 0} .guide-video video{width:100%; max-width:860px; border-radius:10px; background:#000; display:block}
.guide-imgs{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px} .guide-imgs img{height:120px; border-radius:8px; border:1px solid var(--line)}
.tw td .attl a{max-width:170px;display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:top}

/* Bản 1.2: ô ngày dd/mm/yyyy (thay ô ngày của trình duyệt), bảng nhập công việc nhật ký, nút sáng/tối */
.dx{position:relative; display:inline-flex; align-items:center; min-width:0}
.fld .dx{display:flex}
.dx .dx-t{flex:1; width:100%; min-width:128px; padding-right:36px; font-variant-numeric:tabular-nums}
.dx .dx-b{position:absolute; right:4px; top:50%; transform:translateY(-50%); border:0; background:transparent; color:var(--muted); padding:6px; border-radius:var(--r-sm); cursor:pointer; display:grid; place-items:center}
.dx .dx-b:hover{color:var(--accent); background:var(--panel2)}
.dx .dx-n{position:absolute; left:0; bottom:0; width:1px; height:1px; min-height:0; opacity:0; pointer-events:none; border:0; padding:0}
input.bad{border-color:var(--red); box-shadow:0 0 0 3px color-mix(in srgb, var(--red) 18%, transparent)}
.wk{display:flex; flex-direction:column; gap:6px}
.wk-h,.wk-row{display:grid; grid-template-columns:minmax(0,1fr) 120px 96px 34px; gap:6px; align-items:center}
.wk-h{font-size:12px; color:var(--muted)}
.wk-row input{width:100%}
.wk-q{text-align:right; font-variant-numeric:tabular-nums}
.wk-add{align-self:flex-start}
@media (max-width:640px){
  .wk-h{display:none}
  .wk-row{grid-template-columns:1fr 1fr 34px; padding:8px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel2)}
  /* tầng 1: tên công việc + nút xóa; tầng 2: khối lượng, đơn vị */
  .wk-row .wk-n{grid-column:1/3; grid-row:1}
  .wk-row .wk-del{grid-column:3; grid-row:1}
  .wk-row .wk-q{grid-column:1; grid-row:2}
  .wk-row .wk-u{grid-column:2/4; grid-row:2}
}
.theme-btn{padding:6px 8px}
.pager{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:10px}
.pager .sp{flex:1}
.pager select{min-height:32px; padding:4px 8px}

/* ===== Bản 1.3: bảng tự căn cột ===== */
th{min-width:var(--mw,0)}
th.wrap{white-space:normal; min-width:max(var(--mw,0px),110px)}
.nw{white-space:nowrap}
.tw.wide > table > thead th:first-child, .tw.wide > table > tbody td:first-child, .tw.wide > table > tfoot td:first-child{position:sticky; left:0; z-index:1; background:var(--panel); box-shadow:inset -1px 0 0 var(--line)}
.tw.wide > table > thead th:first-child{z-index:3; background:var(--panel2)}
.tw.wide > table > tfoot td:first-child, .tw.wide > table > tbody tr:hover td:first-child{background:var(--panel2)}
.card .tw.wide > table > tbody td:first-child{background:var(--panel)}
@media (max-width:820px){
  .rt td.nw{white-space:normal}
  .rt th{min-width:0}
  .tw.rt.wide > table > tbody td:first-child{position:static; box-shadow:none; background:transparent}
}

/* ===== Bản 1.3: làm mới chi tiết giao diện ===== */
.top{min-height:64px}
.top .title{font-size:15.5px; letter-spacing:-.01em}
.head h1{font-size:clamp(1.4rem, 1.2rem + .5vw, 1.75rem)}
.card > h2, .card > .ch{margin-bottom:14px}
.card h2{font-size:1.02rem}
.kpi{position:relative; overflow:hidden}
.kpi.warn{border-color:color-mix(in srgb, var(--amber) 45%, var(--line)); background:color-mix(in srgb, var(--amber-soft) 70%, var(--panel))}
.kpi.bad{border-color:color-mix(in srgb, var(--red) 40%, var(--line)); background:color-mix(in srgb, var(--red-soft) 70%, var(--panel))}
.kpi .v{color:var(--ink)}
.tw{border-radius:var(--r)}
th{text-transform:none; font-size:12px}
tbody tr{transition:background .12s}
.tabs button{border-radius:8px 8px 0 0}
.tabs button:hover:not(.on){color:var(--ink); background:var(--panel2)}
.tabs button.on{font-weight:600}
@media (min-width:821px){ .tabs{flex-wrap:wrap; overflow:visible} .tabs button{padding:10px 13px} }
.pill.acc{background:var(--accent-soft); color:var(--accent)}
.btn{border-radius:var(--r-sm)}
.btn.primary{background:var(--accent)}
.empty{background:var(--panel2); border-style:dashed}
.side{scrollbar-width:thin; scrollbar-color:var(--side-hi) transparent}
.nav a.on svg{opacity:1; color:var(--side-mark)}
:root[data-side="light"] .nav a.on svg{color:var(--accent)}
:root[data-density="compact"] .kpi{padding:12px 14px}
:root[data-density="compact"] .kpi .v{margin-top:2px}
:root[data-density="compact"] .nav a{padding:6px 12px}
:root[data-density="compact"] .top{min-height:54px; padding-block:6px}
.theme-btn{min-width:36px; justify-content:center}
@media (min-width:821px){
  .top{flex-wrap:nowrap}
  .top .title{flex:0 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .top select{flex:0 1 340px; min-width:150px}
  .top .who{flex:none}
}
@media (min-width:821px) and (max-width:1360px){ .top .mode{font-size:0; padding:0; width:12px; height:12px; border-radius:50%; background:var(--green); border:0; flex:none} .top .mode:not(.shared){background:var(--red)} }
@media (min-width:821px) and (max-width:1100px){ .top .who .nm{display:none} }

/* Hộp thoại Giao diện */
.ap .ap-body{padding:18px 20px; overflow:auto; display:flex; flex-direction:column; gap:18px}
.ap-group{border:0; margin:0; padding:0; min-width:0}
.ap-group legend{font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:8px; padding:0}
.seg{display:flex; flex-wrap:wrap; gap:6px}
.seg label{position:relative; display:inline-flex; align-items:center; min-height:40px; padding:0 14px; border:1px solid var(--line2); border-radius:var(--r-sm); cursor:pointer; font-size:13.5px; background:var(--panel); transition:border-color .15s, background .15s}
.seg label:hover{border-color:var(--accent)}
.seg label.on{border-color:var(--accent); background:var(--accent-soft); color:var(--accent); font-weight:600}
.seg input, .swatches input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.seg label:has(input:focus-visible), .swatches label:has(input:focus-visible){outline:2px solid var(--accent); outline-offset:2px}
.swatches{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.sw{position:relative; display:flex; align-items:center; gap:10px; min-height:48px; padding:8px 10px; border:1px solid var(--line2); border-radius:var(--r-sm); cursor:pointer; font-size:13px; background:var(--panel)}
.sw:hover{border-color:var(--ink)}
.sw.on{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); font-weight:600}
.sw .chip{width:28px; height:28px; border-radius:50%; background:var(--b); flex:none; display:grid; place-items:center; box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.sw .chip i{width:14px; height:14px; border-radius:50%; background:var(--a); box-shadow:0 0 0 2px rgba(255,255,255,.85)}
@media (max-width:520px){ .swatches{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* Bộ lọc báo cáo: lưới đều cột, tự xuống dòng theo bề rộng */
@media (min-width:821px){
  .toolbar.filters{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px}
  .toolbar.filters > select, .toolbar.filters > input{max-width:none!important; width:100%}
  .toolbar.filters > label{display:flex; align-items:center; gap:8px}
  .toolbar.filters > label .dx, .toolbar.filters > label input{flex:1}
  td.acts{white-space:normal; min-width:96px}
  td.acts .btn{margin:2px 0}
}
@media (max-width:820px){ .top .ap-btn{display:none} .top .title{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .top .sp{display:none} }
.mform.ap{width:min(600px,100%)}
@media (max-width:820px){ .head .toolbar{width:100%} .head .toolbar .btn{flex:1 1 auto; justify-content:center; min-height:44px} .head .toolbar .btn.primary{width:auto} }

/* ===== Bản 1.3: tiết chế chi tiết trang trí, văn phong tự nhiên ===== */
.eyebrow{text-transform:none; letter-spacing:0; font-size:13px; font-weight:500; color:var(--muted)}
.kpi .v{margin-top:4px}
.kpi.warn .v{color:var(--amber)} .kpi.bad .v{color:var(--red)}
.kpi.warn, .kpi.bad{background:var(--panel)}
.kpi.warn{border-color:color-mix(in srgb, var(--amber) 35%, var(--line))}
.kpi.bad{border-color:color-mix(in srgb, var(--red) 35%, var(--line))}
.card, .tw, .tile{box-shadow:none}
.pill{border-radius:6px; font-weight:500; padding:2px 8px}
.nav .grp{text-transform:none; letter-spacing:0; font-size:12px; font-weight:600; opacity:.6; padding:16px 12px 4px}
.mode::before{content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:currentColor; margin-right:6px; vertical-align:1px}
@media (min-width:821px) and (max-width:1360px){ .top .mode::before{display:none} }
.btn.primary{box-shadow:none}
.head h1{letter-spacing:-.015em}

/* Bản 1.7: xem trước PDF */
.mform.pdfv{width:min(1100px,96vw); height:92vh; max-height:92vh; display:flex; flex-direction:column}
.mform.pdfv h3{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pdfbar{display:flex; gap:6px; align-items:center; padding:8px 12px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.pdfpages{flex:1; overflow:auto; background:var(--panel2); padding:12px; display:flex; flex-direction:column; align-items:center; gap:12px}
.pdfpages canvas{background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); max-width:none}

/* Bản 1.7: đợt nghiệm thu khối lượng */
.mform.wide{width:min(1240px,97vw)}
.vb-list{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:6px; overflow:hidden}
.vb{border-bottom:1px solid var(--line)} .vb:last-child{border-bottom:0}
.vb.open{background:var(--panel2)}
.vb-h{display:flex; gap:14px; align-items:center; flex-wrap:wrap; padding:10px 12px 4px}
.vb-t{all:unset; cursor:pointer; display:flex; gap:6px; align-items:baseline; min-width:180px}
.vb-t:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.vb-car{width:12px; color:var(--muted)}
.vb-a{display:flex; gap:6px; align-items:center; flex-wrap:wrap; padding:2px 12px 10px 30px}
.vb-det{padding:0 12px 12px 30px}
.vb-tools{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:8px}
.vb-grid{max-height:52vh; overflow:auto}
.vb-grid input.vbq{width:110px; text-align:right}
.vb-grid tr.bad td{background:var(--red-soft)}
.vb-grid tr.warn td{background:var(--amber-soft)}
.vb-grid tfoot td{font-weight:600; background:var(--panel2); position:sticky; bottom:0}
@media (max-width:820px){ .vb-h{gap:6px 12px} .vb-a,.vb-det{padding-left:12px} .vb-grid input.vbq{width:84px} }