:root{--bg:#f4f4f0;--ink:#171816;--line:#dedfd8;--muted:#777972;--red:#b82f25;--amber:#9a6119;--green:#287543}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,sans-serif}.hidden{display:none!important}.topbar{height:78px;max-width:1440px;margin:auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d7d8d2}.brand{display:flex;align-items:center;gap:12px}.brand>b{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;background:#171816;color:#fff;font-size:23px}.brand span>*{display:block}.brand small{font-size:9px;letter-spacing:.14em;color:#7b7d76;margin-bottom:4px}.brand strong{font-size:16px}.btn{min-height:40px;padding:0 16px;border:0;border-radius:11px;font-weight:700;cursor:pointer}.primary{background:#171816;color:#fff}.outline{background:#fff;color:#333;border:1px solid var(--line)}main{max-width:1440px;margin:auto;padding:0 28px 60px}.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:38px;align-items:end;padding:46px 0 30px}.eyebrow{font-size:11px;letter-spacing:.1em;color:#757770;font-weight:700}.hero h1{margin:15px 0 0;font-size:clamp(42px,5vw,68px);line-height:.98;letter-spacing:-.06em}.hero h1 em{font-style:normal;color:#95978f}.lead{max-width:650px;color:#686a64;line-height:1.6}.health{min-height:160px;display:flex;align-items:center;gap:22px;padding:26px;background:#171816;color:#fff;border-radius:24px 24px 6px 24px}.score{width:100px;height:100px;flex:0 0 100px;display:grid;place-content:center;text-align:center;border:9px solid #9cd6a5;border-radius:50%}.score b{font-size:28px}.score small{font-size:9px;color:#bbb}.health>div:last-child>small{font-size:9px;letter-spacing:.08em;color:#aaa}.health h2{margin:7px 0 9px;font-size:21px}.health p{margin:0;color:#bbb;font-size:11px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:28px}.metrics article{min-height:110px;display:flex;align-items:center;gap:14px;padding:20px;background:#fff;border:1px solid #e1e2dc;border-radius:16px}.metrics i{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#222;color:#fff;font-style:normal;font-weight:800}.metrics i.red{background:#fbe7e4;color:var(--red)}.metrics i.amber{background:#fff0d1;color:var(--amber)}.metrics i.green{background:#e4f4e8;color:var(--green)}.metrics small,.metrics b{display:block}.metrics small{color:#777;font-size:10px;margin-bottom:5px}.metrics b{font-size:28px}.warning{display:flex;gap:10px;align-items:center;padding:14px 16px;margin-bottom:14px;background:#fff0d8;border:1px solid #e8cc91;border-radius:12px;color:#7c5317}.warning span{font-size:12px}.workspace{overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:21px;box-shadow:0 12px 34px #0000000d}.workspace>nav{height:58px;display:flex;align-items:center;gap:4px;padding:9px 14px;border-bottom:1px solid #e5e6e1}.workspace>nav .outline{margin-left:auto}.tab{height:40px;padding:0 15px;background:transparent;border:0;border-radius:9px;font-weight:700;color:#777;cursor:pointer}.tab.active{background:#171816;color:#fff}.filters{display:grid;grid-template-columns:1fr 140px 190px 170px;gap:9px;padding:15px;background:#fafaf8;border-bottom:1px solid #e5e6e1}input,select,textarea{width:100%;min-height:41px;padding:9px 11px;background:#fff;border:1px solid #d7d8d2;border-radius:9px;color:#222}textarea{resize:vertical}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th{text-align:left;padding:15px 12px;background:#f8f8f6;color:#777;font-size:9px;text-transform:uppercase;letter-spacing:.06em}td{padding:15px 12px;border-top:1px solid #eee;font-size:12px;vertical-align:top}td:nth-child(2){min-width:310px}.sub{display:block;color:#888;font-size:10px;margin-top:5px}.pill{display:inline-block;padding:5px 8px;border-radius:99px;font-size:9px;font-weight:800;white-space:nowrap}.sev-Nghiêmtrọng{background:#fee8e5;color:#a8261e}.sev-Trungbình{background:#fff0d4;color:#885516}.sev-Nhẹ{background:#e7f4ea;color:#39704a}.status{font-size:10px;font-weight:700;white-space:nowrap}.late{display:block;color:#bd3027;font-size:10px;font-weight:800;margin-top:4px}.row-btn{border:0;background:transparent;cursor:pointer;padding:5px}.row-btn.delete{color:#b32e25}.empty{min-height:270px;display:grid;place-content:center;text-align:center}.empty b,.empty span{display:block}.empty span{margin-top:8px;color:#888;font-size:12px}.mobile-cards{display:none}.summary-head{display:flex;align-items:end;justify-content:space-between;padding:22px 24px;border-bottom:1px solid #e5e6e1}.summary-head small{color:#888;font-size:9px;letter-spacing:.1em}.summary-head h2{margin:6px 0 0;font-size:21px}.range{display:flex;align-items:center;gap:8px}.range select{width:100px}.summary-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:18px;background:#ddd;border:1px solid #ddd;border-radius:13px;overflow:hidden}.summary-metrics article{padding:16px;background:#f9f9f7}.summary-metrics small,.summary-metrics b{display:block}.summary-metrics small{color:#777;font-size:10px}.summary-metrics b{font-size:25px;margin-top:6px}.group-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 18px 20px}.group-card{overflow:hidden;border:1px solid #e1e2dc;border-radius:14px}.group-title{display:flex;justify-content:space-between;padding:13px 15px;background:#f5f5f2;font-weight:800}.task-row{display:grid;grid-template-columns:1fr repeat(3,55px);border-top:1px solid #eee}.task-row>*{padding:10px;font-size:10px}.task-row span{text-align:center}.task-row.head{color:#888;background:#fbfbfa;text-transform:uppercase}.task-row.head>*{font-size:8px}dialog{width:min(740px,calc(100% - 24px));max-height:92vh;padding:0;border:0;border-radius:19px;box-shadow:0 28px 80px #0003}dialog::backdrop{background:#0008}dialog header{display:flex;justify-content:space-between;padding:21px 22px 12px}dialog h2{margin:0;font-size:20px}dialog header p{margin:6px 0 0;color:#777;font-size:11px}.close{border:0;background:transparent;font-size:28px;cursor:pointer}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;padding:10px 22px}.form-grid label{display:grid;gap:6px}.form-grid label>span{color:#666;font-size:10px;font-weight:700}.form-grid .full{grid-column:1/-1}dialog footer{display:flex;justify-content:flex-end;gap:8px;padding:16px 22px 22px}#toast{position:fixed;z-index:99;top:18px;left:50%;transform:translateX(-50%);padding:11px 15px;background:#171816;color:#fff;border-radius:10px;font-size:12px;opacity:0;pointer-events:none;transition:.2s}#toast.show{opacity:1}@media(max-width:900px){.hero{grid-template-columns:1fr}.health{max-width:650px}.metrics{grid-template-columns:1fr 1fr}.filters{grid-template-columns:1fr 1fr}.filters input{grid-column:1/-1}.group-list{grid-template-columns:1fr}}@media(max-width:650px){.topbar{height:69px;padding:0 14px;position:sticky;top:0;z-index:20;background:#f4f4f0ee}.topbar>.btn{position:fixed;right:15px;bottom:16px;z-index:30;min-height:49px;box-shadow:0 12px 30px #0004}main{padding:0 13px 90px}.hero{padding:27px 0 22px;gap:22px}.hero h1{font-size:41px}.health{min-height:135px;padding:18px}.score{width:84px;height:84px;flex-basis:84px;border-width:7px}.metrics{gap:8px}.metrics article{display:block;min-height:108px;padding:13px}.metrics i{width:34px;height:34px;margin-bottom:11px}.metrics b{font-size:24px}.workspace{border-radius:15px}.workspace>nav{padding:7px}.tab{padding:0 10px;font-size:11px}.workspace>nav .outline{width:38px;overflow:hidden;padding:0}.filters{padding:10px}.table-wrap{display:none}.mobile-cards{display:grid;gap:8px;padding:10px;background:#f7f7f4}.mobile-card{padding:14px;background:#fff;border:1px solid #e2e3dd;border-radius:13px}.mobile-card small{color:#888}.mobile-card h3{margin:5px 0 7px;font-size:13px}.mobile-card p{margin:0 0 11px;color:#777;font-size:9px}.mobile-card footer{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.summary-head{display:block;padding:17px}.range{margin-top:14px}.summary-metrics{grid-template-columns:1fr 1fr;margin:11px}.group-list{padding:0 11px 13px}.task-row{min-width:460px}.group-card{overflow:auto}.form-grid{grid-template-columns:1fr;padding:9px 15px}.form-grid .full{grid-column:auto}dialog header,dialog footer{padding-left:15px;padding-right:15px}}
