
:root{--navy:#142d32;--green:#13796c;--mint:#e7f4ef;--ink:#20383e;--muted:#708187;--line:#e5ebeb;--bg:#f5f8f8}*{box-sizing:border-box}body{margin:0;font:14px/1.55 'Segoe UI',Arial,sans-serif;color:var(--ink);background:var(--bg)}button,input,select,textarea{font:inherit}button,a,input,select,textarea{outline-offset:4px}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}button{border:0}a{color:var(--green)}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.app{display:grid;grid-template-columns:238px 1fr;min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:238px;background:var(--navy);color:#a9bdbe;display:flex;flex-direction:column;padding:32px 20px;z-index:10}.brand{display:flex;align-items:center;gap:12px;padding:0 12px;color:white}.brand-icon{width:39px;height:39px;background:#8ad2b5;border-radius:11px;color:var(--navy);display:grid;place-items:center}.brand strong{font-size:24px;letter-spacing:-.8px;line-height:1.1}.brand small{display:block;color:#9eb7b8;font-size:11px;margin-top:5px;letter-spacing:.5px}.nav-label{font-size:10px;font-weight:700;letter-spacing:1.7px;margin:43px 14px 12px}.nav{display:flex;align-items:center;gap:13px;text-align:left;width:100%;border-radius:8px;color:inherit;background:transparent;padding:13px 14px;margin:3px 0}.nav:hover{background:#203d42;color:white}.nav.active{background:#284b4e;color:#c3eddb}.nav b{margin-left:auto;font-size:11px;padding:0 6px;background:#496461;border-radius:4px}.sidebar-bottom{margin-top:auto;padding-top:40px}.local-card{padding:16px 14px;border:1px solid #385056;border-radius:9px;font-size:12px;margin-bottom:18px}.local-card strong{color:#d1e9e0;display:flex;align-items:center;gap:7px;margin-bottom:5px}.dot{width:6px;height:6px;border-radius:50%;background:#9fdbc0;display:inline-block}.profile{display:flex;align-items:center;gap:11px;padding:10px}.avatar{width:35px;height:35px;background:#d9eae4;border-radius:50%;display:grid;place-items:center;color:#36584d;font-weight:600;font-size:12px}.profile strong{font-size:12px;color:white}.profile small{display:block;font-size:11px}main{grid-column:2;min-width:0}.topbar{height:81px;border-bottom:1px solid var(--line);background:white;display:flex;align-items:center;justify-content:space-between;padding:0 40px;gap:12px}.crumb{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:12px}.crumb b{color:#334b50;font-weight:500}.top-right{display:flex;align-items:center;gap:22px}.today{font-size:12px;color:#667c81}.preview-pill{background:#f4f6f6;color:#677e82;padding:5px 9px;border:1px solid var(--line);border-radius:5px;font-size:11px}.content{max-width:1600px;margin:auto;padding:34px 40px 30px}.heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:26px}h1{font-size:28px;font-weight:650;letter-spacing:-.7px;margin:0 0 5px}h2{font-size:17px;margin:0}h3{font-size:14px;margin:0}p{margin:5px 0}.sub{color:var(--muted);font-size:13px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--green);color:white;border:1px solid var(--green);padding:10px 16px;border-radius:7px;font-weight:600;font-size:12px;text-decoration:none;white-space:nowrap}.btn:hover{filter:brightness(.95)}.btn.secondary{background:white;color:#50666b;border-color:#dbe4e4}.btn.ghost{background:transparent;color:var(--green);border-color:transparent}.btn svg{width:17px;height:17px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:25px}.stat{background:white;border:1px solid var(--line);border-radius:10px;padding:19px 21px;position:relative}.stat-top{display:flex;align-items:center;justify-content:space-between;color:#667c81;font-size:12px}.stat-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:#edf5f6;color:#537b83}.stat:nth-child(2) .stat-icon{background:#fff6e4;color:#b28631}.stat:nth-child(3) .stat-icon{background:#eaf5ef;color:#388b68}.stat:nth-child(4) .stat-icon{background:#fdf0eb;color:#bf8063}.number{display:block;font-size:32px;font-weight:650;letter-spacing:-1px;margin:2px 0}.stat-foot{font-size:11px;color:#8a989c}.stat-foot span{color:var(--green)}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 272px;gap:24px;align-items:start}.panel{border:1px solid var(--line);border-radius:10px;background:white;overflow:hidden}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:21px 22px;gap:10px}.panel-head small{display:block;color:var(--muted);font-size:11px;margin-top:2px}.toolbar{display:flex;gap:12px;padding:0 22px 18px}.search{position:relative;flex:1}.search svg{position:absolute;top:11px;left:12px;width:17px;height:17px;color:#8b9da1}.search input{width:100%;padding-left:37px;background:#fafcfc}input,select,textarea{border:1px solid #dce5e5;border-radius:6px;background:white;color:#334c51;padding:9px 11px;min-width:0}input:focus,select:focus,textarea:focus{border-color:var(--green);outline:2px solid #cfe9df;outline-offset:0}.tabs{padding:0 22px;display:flex;gap:21px;border-bottom:1px solid var(--line);overflow:auto}.tab{color:#788b90;background:none;white-space:nowrap;font-size:12px;padding:0 0 13px;border-bottom:2px solid transparent}.tab.active{color:var(--green);border-color:var(--green);font-weight:650}.tab span{background:#f0f4f4;border-radius:4px;padding:1px 5px;margin-left:4px;font-size:10px}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;text-align:left;white-space:nowrap}thead{background:#fafcfc}th{font-size:10px;text-transform:uppercase;letter-spacing:.65px;color:#8b999d;font-weight:600;padding:13px 18px}td{font-size:12px;padding:17px 18px;border-top:1px solid #edf1f1}th:first-child,td:first-child{padding-left:22px}.record-title{font-weight:600;color:#2c464c;max-width:230px;overflow:hidden;text-overflow:ellipsis;display:block;text-align:left;background:none;padding:0}.record-title:hover{color:var(--green);text-decoration:underline}.record-sub{font-size:10px;color:#8c9a9f;margin-top:4px;display:flex;gap:8px}.code{color:#4d737a;font-weight:600;display:block}.badge{font-size:10px;border-radius:5px;padding:4px 8px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;background:#edf3f4;color:#61808a}.badge:before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}.badge.review{background:#eef1fb;color:#6d79ae}.badge.pending{background:#fff6e7;color:#ac8238}.badge.signed{background:#e8f6ef;color:#328565}.badge.need{background:#fcf0eb;color:#ba795e}.badge.done{background:#eff3f4;color:#71888f}.icon-btn{background:none;color:#799096;padding:7px;display:inline-flex;border-radius:5px}.icon-btn:hover{background:#edf5f2;color:var(--green)}.table-foot{padding:15px 22px;display:flex;justify-content:space-between;font-size:11px;color:#92a0a4;border-top:1px solid var(--line)}.side-stack{display:grid;gap:20px}.side-head{padding:19px 18px 13px;display:flex;justify-content:space-between;align-items:center}.side-head h2{font-size:13px}.side-head svg{width:17px;color:#8e9c9f}.expiry-item{margin:0 18px;padding:13px 0;border-bottom:1px solid #eef2f2}.expiry-item:last-child{border:0;padding-bottom:19px}.expiry-item strong{font-size:11px;font-weight:600;display:block}.expiry-item small{font-size:10px;color:#89999e}.expiry-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:7px}.days{font-size:10px;color:#b4823e;background:#fff5e5;border-radius:4px;padding:2px 6px}.days.urgent{background:#fdf0eb;color:#ba7659}.text-btn{background:none;color:var(--green);font-size:10px;padding:0}.activity{padding:2px 18px 16px}.event{display:grid;grid-template-columns:13px 1fr;gap:9px;position:relative;padding:10px 0}.event:before{content:'';position:absolute;left:4px;top:23px;bottom:-10px;width:1px;background:#e2edeb}.event:last-child:before{display:none}.event-dot{height:8px;width:8px;border-radius:50%;background:#83b9a4;margin-top:5px;border:2px solid #e2f1e9}.event p{font-size:11px;margin:0}.event small{color:#97a4a7;font-size:10px}.bottom-note{display:flex;justify-content:space-between;gap:12px;color:#98a6aa;font-size:10px;margin-top:25px}.empty{padding:55px 20px;text-align:center;color:#7d9196}.empty svg{width:36px;height:36px;color:#b0c8c3;margin-bottom:10px}.portal-intro{background:var(--mint);border:1px solid #cfe5dc;padding:20px 24px;border-radius:9px;margin-bottom:22px;display:flex;align-items:center;justify-content:space-between;gap:20px}.portal-intro h2{color:#286b5c}.portal-intro p{font-size:12px;color:#5e8278}.portal-card{padding:22px;display:flex;gap:18px;align-items:center;justify-content:space-between;border-top:1px solid var(--line)}.portal-card h3{font-size:14px}.portal-card small{color:var(--muted)}.info-banner{font-size:12px;background:#fff8e9;color:#8d7441;border:1px solid #f0e5cd;border-radius:7px;padding:11px 15px;margin:0 0 22px}.action-group{display:flex;gap:8px;flex-wrap:wrap}.drawer-backdrop{position:fixed;inset:0;background:#142d326b;z-index:50}.drawer{position:fixed;right:0;top:0;bottom:0;width:520px;max-width:100%;background:white;z-index:51;overflow:auto;box-shadow:-15px 0 70px #102f3320;padding:28px}.drawer-title{display:flex;justify-content:space-between;align-items:start;border-bottom:1px solid var(--line);padding-bottom:20px}.eyebrow{font-size:10px;letter-spacing:1.5px;color:var(--green);font-weight:700;text-transform:uppercase;margin-bottom:8px}.drawer h2{font-size:23px;letter-spacing:-.4px;margin-top:12px;line-height:1.3}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:23px 0}.detail-grid dt{font-size:10px;color:#8a9b9f;margin-bottom:4px}.detail-grid dd{margin:0;font-size:12px;overflow-wrap:anywhere}.detail-block{border-top:1px solid var(--line);padding-top:20px;margin-top:22px}.detail-block h3{margin-bottom:12px}.progress{display:flex;margin:24px 0 10px;gap:3px}.progress span{height:4px;background:#e7eeee;flex:1;border-radius:3px}.progress span.on{background:#5fa58c}.timeline{padding-left:2px}.timeline .event{padding:12px 0}.timeline .event p{font-size:12px}.timeline .event small{font-size:10px}.file{border:1px solid var(--line);border-radius:6px;padding:10px;margin:8px 0;display:flex;gap:9px;align-items:center;font-size:12px}.file a{flex:1;overflow-wrap:anywhere}.file small{color:var(--muted)}.drawer-actions{display:flex;gap:8px;margin-top:24px;flex-wrap:wrap}dialog{border:1px solid var(--line);border-radius:12px;padding:0;width:620px;max-width:calc(100% - 28px);box-shadow:0 25px 100px #102d3333;color:var(--ink)}dialog::backdrop{background:#142d326b}dialog .modal-head{padding:22px 25px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}form{padding:22px 25px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:17px}.field{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:600}.field.full{grid-column:1/-1}.field small{font-size:10px;font-weight:400;color:#8a9b9f}textarea{min-height:74px;resize:vertical}.modal-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:24px}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);z-index:100;background:var(--navy);color:white;padding:12px 22px;border-radius:8px;box-shadow:0 5px 20px #102e3326;font-size:13px;max-width:90%}.help{padding:0 26px 26px}.help h3{margin:20px 0 6px}.help p{font-size:13px;color:#647b80}.help .action-group{margin-top:22px}[hidden]{display:none!important}.mobile-brand{display:none}.sparse{color:#a0adb0;font-size:11px}.menu-close{display:none}
@media(min-width:1450px){td{padding-top:22px;padding-bottom:22px}.content{padding-top:40px}.stats{margin-bottom:28px}}
.side-stack{grid-template-columns:1fr}@media(max-width:1250px){.sidebar{width:208px;padding:28px 14px}.app{grid-template-columns:208px 1fr}.content{padding:28px 25px}.topbar{padding:0 25px}.workspace{grid-template-columns:minmax(0,1fr)}.side-stack{grid-template-columns:1fr}.stat{padding:16px}.stats{gap:12px}}
@media(max-width:760px){.app{display:block}.sidebar{width:245px;transform:translateX(-100%);visibility:hidden;transition:transform .2s}.sidebar.open{transform:none;visibility:visible}.brand{padding:0 5px;gap:10px}.brand small{font-size:9px;white-space:nowrap}.brand-icon{flex-shrink:0}.menu-close{display:block;margin-left:auto;color:white}.topbar{height:64px;padding:0 18px}.mobile-brand{display:flex;align-items:center;gap:12px;font-weight:650}.crumb,.today{display:none}.top-right{gap:8px}.content{padding:24px 17px}.heading{align-items:flex-start}h1{font-size:23px}.heading .sub{font-size:12px;max-width:210px}.heading .btn{padding:10px}.heading .btn span{display:none}.stats{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}.number{font-size:29px}.stat{padding:13px 15px}.stat-top{font-size:11px}.stat-icon{width:27px;height:27px}.stat-foot{font-size:10px}.toolbar{flex-wrap:wrap;padding:0 16px 15px;gap:8px}.toolbar .search{flex-basis:100%}.toolbar select{flex:1;font-size:12px}.panel-head{padding:18px 16px}.tabs{padding:0 16px;gap:17px}.side-stack{grid-template-columns:1fr}.bottom-note{flex-direction:column;gap:2px}.panel-head .btn{font-size:11px;padding:7px 9px}.drawer{padding:22px}.portal-intro{align-items:stretch;flex-direction:column;gap:10px;padding:18px}.portal-card{padding:18px;gap:10px;align-items:flex-start}.portal-card .btn{padding:7px 9px;font-size:11px}.fields{grid-template-columns:1fr}.field.full{grid-column:auto}form{padding:20px}.stat-foot{line-height:1.4}.action-group .btn{font-size:11px}}

.auth-layout{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:white}.auth-brand{background:#142d32;color:#c9ded8;padding:70px 12%;display:flex;flex-direction:column;justify-content:center}.auth-logo{font-size:44px;font-weight:700;letter-spacing:-2px;margin-bottom:65px;color:#b6e5d1}.auth-brand h1{font-size:38px;line-height:1.25;color:white;margin-bottom:20px}.auth-brand p{max-width:410px}.auth-brand .eyebrow{color:#9ad2b9}.auth-foot{margin-top:70px;font-size:12px;color:#90aaa5}.auth-content{display:flex;align-items:center;justify-content:center;padding:40px 24px}.auth-form{width:100%;max-width:380px;padding:0}.auth-form h2{font-size:27px;margin-bottom:8px}.auth-form>.field{margin-top:22px}.auth-form>.btn{margin-top:14px;width:100%}.form-error{font-size:12px;color:#b14336;white-space:pre-wrap;margin-top:14px}.detail-content{padding:24px}.detail-block h3{margin-bottom:12px}.danger{color:#ad463b;background:#fff2ee;border-color:#f1d0c8}.text-link{background:transparent;color:#13796c;font-size:12px;padding:5px}.footer-info{font-size:11px;margin-top:20px}.search input{padding-left:12px}.toolbar #statusFilter{max-width:210px}.brand-icon{font-size:24px}.record-title{max-width:250px}.profile{margin-top:15px}@media(max-width:760px){.auth-layout{grid-template-columns:1fr}.auth-brand{padding:28px 25px}.auth-logo{font-size:30px;margin-bottom:20px}.auth-brand h1{font-size:25px}.auth-brand p:not(.eyebrow),.auth-foot{display:none}.auth-content{padding:35px 24px}.panel-head{align-items:flex-start;flex-direction:column}.panel-head .action-group{gap:5px}.toolbar #statusFilter{max-width:100%;flex:1}.heading .btn{font-size:11px}}

/* Ưu tiên danh sách hồ sơ, thu gọn phần theo dõi và thống kê phía trên. */
#application .content{padding-top:24px}
#application .heading{margin-bottom:14px}
#application .heading h1{font-size:20px;letter-spacing:-.35px;margin-bottom:3px}
#application .heading .eyebrow{font-size:9px;margin-bottom:4px}
#application .heading .sub{font-size:12px}
#application .stats{gap:12px;margin-bottom:18px}
#application .stats .stat{padding:10px 16px}
#application .stats .stat-top{font-size:12px}
#application .stats .number{font-size:24px;line-height:1.3;margin:3px 0 0}
.record-list-panel #listTitle{font-size:22px}
.record-list-panel .panel-head small{font-size:13px}
.record-list-panel .toolbar input,.record-list-panel .toolbar select{font-size:16px}
.record-list-panel th{font-size:13px;line-height:1.5;letter-spacing:.35px;padding-top:16px;padding-bottom:16px}
.record-list-panel td{font-size:16px;line-height:1.5;padding-top:19px;padding-bottom:19px}
.record-list-panel .record-title{font-size:17px;line-height:1.5;max-width:320px;white-space:normal}
.record-list-panel .record-sub,.record-list-panel .sparse{font-size:14px;line-height:1.5}
.record-list-panel .badge{font-size:14px;padding:5px 9px}
.record-list-panel .text-link{font-size:16px}
@media(max-width:760px){
 #application .content{padding-top:18px}
 #application .heading h1{font-size:18px}
 #application .stats{gap:8px;margin-bottom:14px}
 #application .stats .stat{padding:9px 12px}
 #application .stats .stat-top{font-size:11px}
 #application .stats .number{font-size:22px}
 .record-list-panel #listTitle{font-size:20px}
 .record-list-panel th{font-size:12px}
}

/* Cổng xem hồ sơ công khai và lối vào quản trị. */
.top-right{flex-wrap:wrap;justify-content:flex-end}
@media(max-width:760px){.topbar{height:auto;min-height:64px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}.top-right{gap:6px}#accountName{display:none}.top-right .btn{font-size:12px;padding:8px 10px}}
