:root{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#24343b;background:#f5f7f8;font-synthesis:none;font-size:14px;--teal: #0f766e;--muted: #849198;--border: #e7ecee}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{cursor:pointer}button:disabled{cursor:wait;opacity:.5}button:focus-visible,a:focus-visible{outline:3px solid #5eead4;outline-offset:3px}button{border:0;background:none;color:inherit}input,select,textarea{width:100%;border:1px solid #dce4e7;border-radius:8px;padding:12px;background:#fff;color:#24343b;outline:none}input:focus,select:focus,textarea:focus{border-color:#0f766e;box-shadow:0 0 0 3px #0f766e14}textarea{resize:vertical}h1,h2,h3,p{margin-top:0}h1{font-size:32px;letter-spacing:-1.2px;margin-bottom:12px;font-weight:650}h2{font-size:18px;letter-spacing:-.3px}small{color:var(--muted);font-size:12px;line-height:1.7}.eyebrow{font-size:10px;letter-spacing:1.8px;color:var(--teal);font-weight:700;display:block;margin-bottom:14px}.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 18px;border-radius:8px;background:var(--teal);color:#fff;font-weight:600;font-size:13px;box-shadow:0 3px 8px #0f766e13;white-space:nowrap}.button:hover{filter:brightness(.96)}.button.secondary{background:#fff;color:#344950;border:1px solid #dce4e7;box-shadow:none}.muted{color:var(--muted)}.app-shell{display:flex;min-height:100vh}.sidebar{width:250px;position:fixed;inset:0 auto 0 0;background:#fff;border-right:1px solid var(--border);padding:34px 22px 0;display:flex;flex-direction:column;z-index:10}.brand{display:flex;align-items:center;font-size:27px;font-weight:700;letter-spacing:-1px;padding:0 10px}.brand img{width:35px;height:35px;margin-right:10px}.brand span,.login-brand span{color:var(--teal)}.workspace{display:flex;gap:10px;align-items:center;background:#f6f8f9;border:1px solid var(--border);border-radius:9px;padding:13px 10px;margin:34px 0 31px}.workspace b{font-size:12px}.workspace small{display:block;font-size:10px}.workspace-icon{background:#fff;border:1px solid var(--border);border-radius:7px;padding:8px;color:var(--teal);font-weight:700}.live-dot{height:6px;width:6px;background:#34b88a;border-radius:50%;display:inline-block;flex-shrink:0}.nav-caption{font-size:9px;color:#9aa5aa;letter-spacing:1.4px;margin:0 12px 14px}.sidebar nav{display:flex;flex-direction:column;gap:6px}.sidebar nav a{padding:13px 15px;display:flex;align-items:center;gap:12px;border-radius:8px;color:#718088;font-weight:500}.sidebar nav a.active{background:#e9f5f2;color:var(--teal);font-weight:650}.sidebar-note{margin:auto 0 25px;border:1px solid #e1ece8;background:linear-gradient(135deg,#f0f8f5,#fff);border-radius:10px;padding:18px 15px}.sidebar-note>span{color:#0f766e;font-size:22px}.sidebar-note b{display:block;font-size:11px;margin:12px 0 8px}.sidebar-note p{font-size:11px;color:#82938e;line-height:1.8;margin:0}.profile{display:flex;align-items:center;gap:10px;padding:19px 0;border-top:1px solid var(--border)}.profile b{font-size:12px;display:block;max-width:126px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile small{font-size:10px;display:block}.profile button{margin-left:auto;color:#819198}.avatar{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#e7f2ed;color:#387a63;font-size:12px;flex-shrink:0}.avatar.small{width:25px;height:25px;font-size:10px}.main-shell{margin-left:250px;flex:1;min-width:0;display:flex;flex-direction:column}.topbar{height:75px;padding:0 42px;border-bottom:1px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#8c989e}.topbar b{font-weight:500;color:#50616a}.topbar .muted{padding:0 10px}.topbar-right{display:flex;align-items:center;gap:8px}.mobile-menu{display:none}main{padding:38px 42px;max-width:1600px;width:100%;margin:0 auto;flex:1}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:0 0 28px}.page-heading p{color:#869299;font-size:12px;line-height:1.8;margin:0}.heading-dot{color:#0f766e}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:25px}.stat{padding:20px 22px;background:#fff;border:1px solid var(--border);border-radius:12px}.stat-top{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#6f8087;font-size:12px}.stat-icon{display:flex;align-items:center;justify-content:center;width:35px;height:35px;border-radius:10px}.teal{color:#0f766e;background:#e9f5f2}.blue{color:#538ec8;background:#eef5fd}.green{color:#55a980;background:#eefaef}.orange{color:#c58d4b;background:#fff5e9}.stat strong{display:block;font-size:32px;font-weight:600;letter-spacing:-1px;margin:12px 0 7px}.stat small{font-size:10px}.overview-banner{display:flex;align-items:center;justify-content:space-between;border:1px solid #ddebe6;border-radius:12px;background:radial-gradient(ellipse at 90% 60%,#dfefe6 0,transparent 55%),#edf5f1;padding:26px 30px;margin-bottom:27px;position:relative;overflow:hidden}.overview-banner h2{font-size:22px;color:#254c40;margin-bottom:8px}.overview-banner .eyebrow{font-size:8px;color:#68917f;margin-bottom:10px}.overview-banner p{font-size:11px;color:#7b948a;margin:0}.banner-link{display:flex;align-items:center;gap:12px;color:#376956;font-size:12px;white-space:nowrap}.panel{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden}.panel-heading{display:flex;align-items:center;justify-content:space-between;padding:24px 25px 20px;gap:12px}.panel-heading h2{font-size:16px;margin-bottom:7px}.panel-heading p{font-size:11px;color:#95a1a7;margin:0}.tag{font-size:10px;color:#8b989e;border:1px solid var(--border);border-radius:6px;padding:6px 9px}.filters{display:flex;align-items:center;justify-content:space-between;padding:0 25px 18px;gap:14px;flex-wrap:wrap}.tabs{display:flex;gap:3px}.tabs button{font-size:11px;color:#8c999f;white-space:nowrap;padding:8px 10px;border-radius:6px}.tabs .selected{color:#0f766e;background:#eef6f3;font-weight:600}.search{display:flex;align-items:center;border:1px solid var(--border);border-radius:7px;padding:0 10px;gap:7px;color:#9aa5aa}.search input{border:0;padding:9px 0;font-size:11px;width:165px;box-shadow:none}.search button{font-size:10px}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left;white-space:nowrap}thead{background:#f8fafb}th{font-size:9px;font-weight:600;letter-spacing:.8px;color:#97a3a9;padding:14px 20px}th:first-child,td:first-child{padding-left:25px}td{padding:21px 20px;border-top:1px solid #f0f3f4;font-size:11px;color:#6f8189}tbody tr:hover{background:#fbfdfc}.order-title{display:flex;align-items:center;gap:11px}.order-title b{display:block;color:#344951;font-size:12px;white-space:normal;min-width:130px}.order-title small{display:block;font-size:10px;margin-top:6px}.order-title small span{color:#a9b3b8}.category-icon{width:35px;height:35px;border-radius:9px;background:#ecf5f3;color:#427e70;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0}.category-icon.devops{color:#8676b4;background:#f2effa}.category-icon.outsource{color:#6186b0;background:#edf3fa}.status{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:5px;font-size:10px;white-space:nowrap;background:#f0f3f5;color:#839198}.status:before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor}.status.in_progress{color:#4c8ab9;background:#eef6fd}.status.completed{color:#488f6a;background:#edf8f1}.status.review{color:#a58b45;background:#fdf8e8}.status.on_hold{color:#9a7caa;background:#f6f0f9}.status.cancelled{color:#b56e6e;background:#fcf0f0}.progress-cell{min-width:90px}.progress-cell>span{font-size:10px}.progress-track{height:4px;border-radius:4px;background:#edf1f2;overflow:hidden;margin-top:7px}.progress-track i{display:block;height:100%;background:#3e9e86;border-radius:4px}.assignee{display:flex;align-items:center;gap:7px;font-size:11px}.late{color:#c17858}.late small{color:#c17858;display:block;font-size:9px}.pagination{display:flex;justify-content:center;align-items:center;gap:20px;padding:20px}.pagination span{font-size:11px;color:#7c8d94}.app-footer{display:flex;justify-content:space-between;color:#adb7bc;font-size:10px;padding:24px 42px}.app-footer span{font-size:9px}.empty{text-align:center;padding:50px 24px}.empty-symbol{font-size:40px;color:#72ab9b}.empty h3{font-size:16px;margin:12px 0}.empty p{color:#94a0a6;font-size:12px}.empty .button{margin-top:10px}.loading{padding:60px;text-align:center;color:#80928e}.error{color:#aa4949;background:#fdf0ef;border:1px solid #f4d5d1;border-radius:8px;padding:12px;margin:12px 0;font-size:12px}.offline{background:#fff4de;color:#8a6b26;padding:12px 42px;font-size:12px}.back{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#71868c;margin-bottom:24px}.order-form{max-width:860px;padding:28px}.order-form h2{padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid var(--border)}.order-form h2:not(:first-child){margin-top:25px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.full{grid-column:1/-1}label{display:flex;flex-direction:column;gap:9px;font-size:12px;color:#5a6e76}label small{font-size:10px}.field-error{color:#b24a4a}.form-actions{display:flex;justify-content:flex-end;gap:12px;padding-top:25px;margin-top:25px;border-top:1px solid var(--border)}.detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:23px}.detail-panel{padding:25px;margin-bottom:23px}.detail-panel .panel-heading{padding:0 0 23px}.detail-meta{display:flex;gap:25px;flex-wrap:wrap}.detail-meta>span{display:flex;align-items:center;gap:10px;color:#8d9fa6}.detail-meta small{font-size:10px}.detail-meta b{font-size:12px;display:block;color:#4d636c}.detail-progress{margin:25px 0 30px}.detail-progress>span{display:flex;justify-content:space-between;font-size:11px;color:#88989f}.detail-progress .progress-track{height:7px;margin-top:12px}.detail-panel h3{font-size:12px}.description{white-space:pre-wrap;line-height:1.9;font-size:13px;color:#7d8d95;overflow-wrap:anywhere}.progress-form{padding:24px;align-self:start}.progress-form .eyebrow{font-size:8px}.progress-form p{font-size:11px;color:#94a2a9;line-height:1.8}.progress-form label{margin:17px 0}.progress-form .button{width:100%;margin-top:6px}.timeline{margin-top:25px}.timeline article{display:flex;gap:14px;padding-bottom:25px;position:relative}.timeline-dot{width:9px;height:9px;margin-top:4px;background:#89b7a5;border:2px solid #e4f3eb;border-radius:50%;flex-shrink:0}.timeline article:not(:last-child):before{content:"";position:absolute;left:4px;top:15px;bottom:0;border-left:1px solid #e7eeea}.timeline b{font-size:12px}.timeline time{display:block;color:#a1adb3;font-size:9px;margin:5px 0 10px}.timeline p{font-size:12px;color:#758990;white-space:pre-wrap;overflow-wrap:anywhere;margin-bottom:8px}.login{min-height:100vh;position:relative;background:#fff;display:grid;grid-template-columns:1fr 1fr}.login-brand{position:absolute;top:40px;left:6%;display:flex;align-items:center;gap:12px;font-size:29px;letter-spacing:-1px}.login-brand img{width:36px}.login-content{padding:180px 10% 100px 12%;align-self:center}.login-content h1{font-size:42px;line-height:1.25;letter-spacing:-1.5px}.login-content h1 em{font-style:normal;color:#0f766e}.login-content p{color:#8c9d9f;font-size:14px;line-height:1.9;margin:25px 0 35px}.login-content .eyebrow{font-size:9px}.zalo{background:#1477ef;margin-bottom:18px;padding:15px 20px}.zalo b{font-size:18px}.login-content small{display:block;font-size:10px}.login-art{background:#edf5f0;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.orbit{position:absolute;width:520px;height:520px;border-radius:50%;border:1px solid #cce0d4;box-shadow:0 0 0 70px #edf5f0,0 0 0 71px #d5e6dc,0 0 0 140px #edf5f0,0 0 0 141px #dcebe2;transform:translate(70px,50px)}.art-card{position:relative;background:#ffffffcf;border:1px solid white;border-radius:22px;padding:45px;width:340px;box-shadow:0 30px 70px #68887b12;transform:rotate(-4deg)}.art-card .eyebrow{font-size:8px;color:#91a99d}.art-card h2{font-size:38px;font-weight:500;line-height:1.2;letter-spacing:-1px;color:#365c4a;margin:25px 0}.art-progress{height:5px;background:#e1eae4;border-radius:4px}.art-progress span{display:block;width:72%;height:100%;background:#63a58c;border-radius:4px}.art-card p{font-size:11px;color:#91a69b;margin:18px 0 0}.login footer{position:absolute;bottom:30px;left:6%;font-size:9px;color:#a8b5b5}.pending{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;text-align:center}.pending img{width:65px;margin-bottom:25px}.pending h1{font-size:26px}.pending p{color:#87969a;margin:20px}.pending .button{margin:8px}@media(min-width:1550px){main{padding:44px 55px}.sidebar{width:270px}.main-shell{margin-left:270px}}@media(max-width:1250px){main{padding:30px 25px}.sidebar{width:220px;padding:30px 17px 0}.main-shell{margin-left:220px}.topbar{padding:0 25px}.stats{gap:12px}.stat{padding:17px}.stat small{font-size:9px}.detail-grid{grid-template-columns:minmax(0,1fr) 280px}.order-title small span,.tag{display:none}}@media(max-width:900px){.sidebar{width:190px;padding:25px 13px 0}.main-shell{margin-left:190px}.workspace b{font-size:10px}.workspace small{font-size:9px}.stats{grid-template-columns:repeat(2,1fr)}.detail-grid{grid-template-columns:1fr}.progress-form{max-width:none}.topbar-right{display:none}.login-content h1{font-size:33px}.art-card{width:280px;padding:30px}.art-card h2{font-size:32px}}@media(max-width:640px){.sidebar{transform:translate(-100%);transition:transform .2s;width:250px;box-shadow:20px 0 40px #0001}.sidebar.open{transform:translate(0)}.main-shell{margin-left:0}.mobile-menu{display:flex;padding:0}.topbar{height:60px;padding:0 20px;justify-content:flex-start;gap:15px;font-size:10px}.topbar svg{width:20px}main{padding:27px 18px}.page-heading{align-items:flex-start;gap:12px}.page-heading h1{font-size:25px;letter-spacing:-.8px}.page-heading p{font-size:11px}.page-heading>.button{font-size:0;padding:11px}.page-heading>.button svg{width:18px}.eyebrow{font-size:8px;letter-spacing:1.3px}.stats{gap:10px;margin-bottom:18px}.stat{padding:15px}.stat strong{font-size:27px}.stat-top{font-size:10px}.stat-icon{width:30px;height:30px}.stat small{font-size:8px}.overview-banner{padding:20px;display:block;margin-bottom:20px}.overview-banner h2{font-size:19px}.overview-banner .eyebrow{font-size:7px}.banner-link{margin-top:17px;font-size:10px}.panel-heading{padding:20px}.panel-heading h2{font-size:15px}.filters{padding:0 16px 16px}.tabs{width:100%;overflow-x:auto}.tabs button{padding:8px;font-size:10px}.search{width:100%}.search input{flex:1;width:auto}.table-wrap table{min-width:680px}td{padding:18px 15px}th:first-child,td:first-child{padding-left:18px}.app-footer{padding:20px;font-size:8px}.app-footer span{font-size:8px}.form-grid{grid-template-columns:1fr}.order-form,.detail-panel{padding:20px}.detail-meta{gap:18px}.detail-meta b{font-size:11px}.detail-panel h2{font-size:15px}.login{display:block;min-height:100dvh}.login-brand{left:8%;top:30px}.login-content{padding:160px 8% 100px}.login-content h1{font-size:35px}.login-art{display:none}.login footer{left:8%}.progress-form{padding:20px}.offline{padding:12px 20px}}@media(max-width:640px){.table-wrap .order-table{min-width:0;white-space:normal}.order-table thead{display:none}.order-table tbody{display:block}.order-table tr{display:grid;grid-template-columns:1fr 1fr;position:relative;padding:18px;gap:16px;border-top:1px solid #edf1f2}.order-table td{display:block;padding:0;border:0}.order-table td:first-child{grid-column:1 / -1;padding:0 23px 0 0}.order-table td:last-child{position:absolute;right:16px;top:22px}.order-table td:nth-child(2):before{content:"TRẠNG THÁI"}.order-table td:nth-child(3):before{content:"TIẾN ĐỘ"}.order-table td:nth-child(4):before{content:"PHỤ TRÁCH"}.order-table td:nth-child(5):before{content:"HẠN BÀN GIAO"}.order-table td:nth-child(n+2):nth-child(-n+5):before{display:block;font-size:8px;letter-spacing:.7px;color:#99a6ac;margin-bottom:7px}.order-table .order-title b{min-width:0;font-size:13px}.order-table .progress-cell{min-width:0}}