:root{
  --bg:#f7f8f7;
  --panel:#ffffff;
  --text:#10213a;
  --muted:#718096;
  --line:#e7ebe9;
  --brand:#123c3a;
  --brand-deep:#0c302f;
  --brand2:#1d5a56;
  --gold:#d0ad54;
  --gold2:#b8953f;
  --green:#16a46b;
  --blue:#2f7fe8;
  --red:#e44859;
  --purple:#7a55df;
  --orange:#eda61d;
  --shadow:0 12px 34px rgba(18,43,48,.07);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;font-family:Inter,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}
button{color:inherit}
.hidden{display:none!important}
a{text-decoration:none;color:inherit}
svg{display:block}

/* LOGIN */
.login-shell{min-height:100vh;display:grid;place-items:center;background:linear-gradient(140deg,#123d3a 0%,#0b2d2b 68%,#071f1e 100%);padding:24px;position:relative;overflow:hidden}
.login-shell:before{content:"";position:absolute;inset:auto -10% -24% -10%;height:62%;background:url('/assets/phong-canh-workspace.png') center 57%/cover no-repeat;opacity:.18;filter:saturate(.65)}
.login-shell:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,34,32,.08),rgba(8,34,32,.76));pointer-events:none}
.login-card{position:relative;z-index:1;width:min(430px,100%);background:#fff;border-radius:26px;padding:34px 36px;box-shadow:0 32px 90px rgba(0,0,0,.28)}
.login-logo{width:82px;height:82px;display:block;margin:0 auto 20px;border-radius:19px;object-fit:cover;box-shadow:0 10px 25px rgba(155,20,32,.16)}
.login-card h1{font-size:26px;line-height:1.25;margin:0 0 8px;text-align:center;letter-spacing:-.3px}
.login-card>p{text-align:center;color:var(--muted);margin:0 0 24px;font-size:14px;line-height:1.55}
.form-stack{display:grid;gap:14px}.form-stack label,.field{display:grid;gap:7px;font-size:13px;font-weight:700}
.form-stack input,.field input,.field select,.field textarea{width:100%;border:1px solid #dfe5e3;border-radius:11px;padding:12px 13px;background:#fff;outline:none;transition:.15s}
.form-stack input:focus,.field input:focus,.field select:focus,.field textarea:focus{border-color:#6bb7a9;box-shadow:0 0 0 3px rgba(40,125,114,.1)}
.login-note{margin-top:18px;background:#f6f8f8;border-radius:11px;padding:11px 12px;color:#657384;font-size:12px;line-height:1.55;text-align:center}
.error-text{color:#c2384b;font-size:13px;margin-top:12px}

/* BUTTONS */
.btn{border:0;border-radius:10px;padding:10px 15px;font-weight:800;cursor:pointer;transition:.15s}.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--brand);color:#fff}.btn.secondary{background:#edf3f2;color:var(--brand)}.btn.warn{background:#fff2da;color:#996800}.btn.danger{background:#ffe9ec;color:#b52f43}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn.sm{padding:7px 10px;border-radius:8px;font-size:12px}.btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* SHELL */
.app-shell{min-height:100vh;display:grid;grid-template-columns:240px minmax(0,1fr)}
.sidebar{background:linear-gradient(180deg,#153f3d 0%,#0c302f 100%);color:#fff;min-height:100vh;position:fixed;width:240px;left:0;top:0;bottom:0;display:flex;flex-direction:column;z-index:20;overflow:hidden}
.side-brand{display:flex;align-items:center;gap:10px;padding:17px 22px 19px;min-height:94px}
.qc-wordmark{font-size:46px;line-height:.86;font-weight:900;color:#e5c664;letter-spacing:-8px;min-width:65px;transform:skew(-4deg)}
.qc-brand-copy b{display:block;color:#e8ca68;font-size:15px;line-height:1.05;letter-spacing:.3px}.qc-brand-copy small{display:block;font-size:8px;color:#d8bb61;letter-spacing:1.7px;margin-top:5px;font-weight:700}
.sidebar nav{display:grid;gap:4px;padding:2px 8px;position:relative;z-index:2}
.nav-item{display:flex;align-items:center;gap:12px;color:#e5efee;padding:12px 14px;border-radius:10px;cursor:pointer;font-size:14px;transition:.15s}
.nav-item:hover{background:rgba(255,255,255,.07)}
.nav-item.active{background:linear-gradient(90deg,#b89642 0%,#d2b35d 100%);color:#fff;font-weight:800;box-shadow:0 8px 20px rgba(0,0,0,.11)}
.nav-icon{width:24px;height:24px;display:grid;place-items:center;color:currentColor;flex:0 0 24px}.nav-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.side-footer-art{margin-top:auto;min-height:245px;position:relative;background:url('/assets/phong-canh-workspace.png') center 58%/cover no-repeat}
.side-footer-art:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,48,47,.78) 0%,rgba(12,48,47,.82) 24%,rgba(8,38,37,.98) 100%)}
.side-footer-copy{position:absolute;left:22px;right:20px;bottom:23px;z-index:1}.side-footer-copy b{display:block;font-size:14px;line-height:1.45}.side-footer-copy small{display:block;color:#c3d3d1;line-height:1.55;margin-top:10px;font-size:11px;font-style:italic}.side-footer-copy span{display:block;width:32px;height:3px;background:#e5c35d;border-radius:10px;margin-top:17px}
.workspace{grid-column:2;min-width:0;min-height:100vh;display:flex;flex-direction:column}
.topbar{height:77px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:10}
.top-title{display:flex;align-items:center;gap:16px}.top-title b{display:block;font-size:16px}.top-title small,.profile small{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.top-actions,.profile{display:flex;align-items:center;gap:10px}.profile{gap:11px}.profile-copy{min-width:86px}.profile-copy b{font-size:14px}.profile-copy small{font-size:11px;color:#687793}
.icon-btn{border:0;background:transparent;cursor:pointer;width:36px;height:36px;display:grid;place-items:center;border-radius:9px;color:#183751;position:relative}.icon-btn:hover{background:#f3f6f5}.icon-btn svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.top-menu{margin-left:-7px}
.notification-btn .notif-dot{position:absolute;right:5px;top:4px;width:8px;height:8px;border-radius:50%;background:#e33a4c;border:2px solid #fff;box-sizing:content-box}
.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#1593a3,#237d92);color:#fff;font-weight:900;font-size:13px}
.main{padding:17px 22px 22px;max-width:1500px;width:100%;margin:0 auto;flex:1}
.app-footer{border-top:1px solid var(--line);background:#fff;padding:15px 28px 17px;display:flex;justify-content:space-between;gap:20px;color:#77859a;font-size:11px}.app-footer>div{display:flex;flex-direction:column;gap:6px}.app-footer>div:last-child{text-align:right}.app-footer b{color:#53637c;font-size:11px}

/* DASHBOARD - MATCHES APPROVED MOCKUP */
.dashboard-hero{display:grid;grid-template-columns:minmax(380px,.85fr) minmax(520px,1.2fr);gap:22px;align-items:stretch;margin-bottom:14px}
.hero-copy{padding:18px 10px 13px}.hero-copy h1{font-size:32px;letter-spacing:-.7px;margin:0 0 7px;line-height:1.1}.hero-copy .hero-subtitle{font-size:18px;color:#182a42;margin:0 0 24px}.hero-copy .hero-quote{font-size:14px;color:#617087;font-style:italic;line-height:1.55;margin:0}
.hero-visual{min-height:171px;border-radius:12px;overflow:hidden;position:relative;background:url('/assets/phong-canh-workspace.png') center 55%/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(0,0,0,.03)}
.hero-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,37,38,.04) 0%,rgba(11,37,38,.06) 54%,rgba(37,33,20,.76) 100%)}
.hero-visual .hero-badge{position:absolute;right:24px;top:50%;transform:translateY(-50%);z-index:1;color:#fff;text-align:left;font-size:18px;line-height:1.55;font-style:italic}.hero-visual .hero-badge strong{display:block;font-size:16px;font-style:normal;letter-spacing:.8px;margin-bottom:3px}.hero-visual .hero-badge span{display:block;width:34px;height:3px;background:#e8c560;margin-top:13px}
.dashboard-quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px}.dashboard-quick{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:flex;align-items:center;gap:15px;min-height:86px;cursor:pointer;transition:.17s}.dashboard-quick:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#dfe5e2}.dashboard-quick .quick-icon{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;flex:0 0 48px}.dashboard-quick .quick-icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.dashboard-quick b{display:block;font-size:14px;margin-bottom:4px}.dashboard-quick small{display:block;color:#718096;font-size:12px;line-height:1.35}.dashboard-quick .quick-arrow{margin-left:auto;color:#1a314e;font-size:24px;line-height:1}.quick-green{background:#e8f8f0;color:#14975e}.quick-gold{background:#fff4dd;color:#d69718}.quick-blue{background:#e9f2ff;color:#2f79e6}.quick-purple{background:#f0ebff;color:#7554dc}
.dashboard-main-grid{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(300px,.85fr);gap:14px;margin-bottom:14px}.dashboard-bottom-grid{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(300px,.85fr);gap:14px}
.dashboard-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;box-shadow:0 1px 0 rgba(0,0,0,.01)}
.dashboard-card-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:14px}.dashboard-card-head h2{font-size:16px;margin:0;letter-spacing:-.2px}.dashboard-card-head a{font-size:12px;color:#257be5;cursor:pointer}.month-switcher{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden;height:34px;background:#fff}.month-switcher span{padding:0 16px;font-size:12px;color:#50617b}.month-switcher button{height:100%;width:36px;border:0;background:#fff;border-right:1px solid var(--line);cursor:pointer;color:#48627f}.month-switcher button:last-child{border-right:0;border-left:1px solid var(--line)}
.dashboard-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.dashboard-metric{border-radius:10px;padding:14px 13px 13px;min-height:142px;display:flex;flex-direction:column}.dashboard-metric .metric-icon{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;margin-bottom:9px}.dashboard-metric .metric-icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.dashboard-metric strong{font-size:24px;line-height:1.05;margin-bottom:5px;letter-spacing:-.4px}.dashboard-metric .metric-label{font-size:12px;color:#5f6f86;margin-bottom:9px}.dashboard-metric .metric-note{font-size:11px;color:#617087;margin-top:auto;line-height:1.45}.metric-green{background:#edf9f3}.metric-green .metric-icon{background:#d9f4e6;color:#159d64}.metric-blue{background:#eef5ff}.metric-blue .metric-icon{background:#dcecff;color:#2c7ae8}.metric-red{background:#fff0ef}.metric-red .metric-icon{background:#ffe0df;color:#e54b55}.metric-purple{background:#f3efff}.metric-purple .metric-icon{background:#e9e0ff;color:#7654df}
.metric-trend{display:inline-flex;align-items:center;gap:4px;background:#def6e7;color:#139457;border-radius:999px;padding:3px 7px;font-size:10px;font-weight:800;margin-right:5px}
.task-list,.announcement-list{display:grid}.task-row,.announcement-row{display:flex;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid var(--line)}.task-row:last-child,.announcement-row:last-child{border-bottom:0}.task-icon,.announcement-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:0 0 38px}.task-icon svg,.announcement-icon svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.task-copy,.announcement-copy{min-width:0;flex:1}.task-copy b,.announcement-copy b{font-size:12px;display:block;line-height:1.35}.task-copy small,.announcement-copy small{font-size:11px;color:#7a8799;display:block;margin-top:4px}.task-arrow{color:#6b7b91;font-size:18px}.task-red{background:#ffebee;color:#e54457}.task-gold{background:#fff3dd;color:#df9d19}.task-blue{background:#eaf3ff;color:#2f7de8}.task-green{background:#e8f8f0;color:#16a064}.count-badge{display:inline-grid;place-items:center;min-width:21px;height:21px;padding:0 6px;border-radius:999px;background:#e63e50;color:#fff;font-size:11px;margin-left:6px}
.announcement-dot{width:7px;height:7px;border-radius:50%;background:#e4374a;flex:0 0 7px}.announcement-green{background:#e7f8ef;color:#159c62}.announcement-blue{background:#e9f3ff;color:#2c7be6}.announcement-gold{background:#fff2d9;color:#d89a16}
.recent-table{width:100%;border-collapse:collapse}.recent-table th,.recent-table td{font-size:12px;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}.recent-table th{color:#4d5f78;background:#fafbfb;font-weight:700}.recent-table tr:last-child td{border-bottom:0}.recent-table td:last-child{text-align:center}.more-dots{border:0;background:transparent;cursor:pointer;letter-spacing:2px;color:#677994;font-weight:900}.empty-dashboard{min-height:170px;display:grid;place-items:center;text-align:center;color:#7b8799;font-size:13px;background:#fbfcfc;border-radius:9px}

/* LEGACY / INTERNAL PAGES */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}.page-head h1{margin:0;font-size:26px;letter-spacing:-.4px}.page-head p{margin:6px 0 0;color:var(--muted);font-size:13px}
.hero{background:linear-gradient(120deg,#fff 0%,#fbf7ec 100%);border:1px solid #ece6d7;border-radius:16px;padding:22px 24px;margin-bottom:16px;position:relative;overflow:hidden}.hero:after{content:'QC';position:absolute;right:30px;top:7px;font-size:110px;font-weight:900;color:rgba(202,164,81,.13);letter-spacing:-12px}.hero h2{margin:0 0 6px;font-size:28px}.hero p{margin:0;color:#59677b}.hero .quote{margin-top:18px;font-style:italic;color:#7b6b4c;font-size:13px}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 0 rgba(0,0,0,.02);padding:17px}.metric{min-height:124px}.metric .top{display:flex;justify-content:space-between;align-items:center}.metric .label{font-weight:800;font-size:13px}.metric .icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-weight:900}.metric .icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.metric .value{font-size:27px;font-weight:900;margin:13px 0 4px}.metric small{color:var(--muted);font-size:11px}.soft-green{background:#eefaf4}.soft-blue{background:#eff5ff}.soft-gold{background:#fff8e9}.soft-purple{background:#f4f0ff}.soft-red{background:#fff0f1}
.grid-2{display:grid;grid-template-columns:2fr 1fr;gap:14px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.section-title h3{margin:0;font-size:16px}.section-title a{color:var(--blue);font-size:12px;cursor:pointer}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:10px}.table{width:100%;border-collapse:collapse;min-width:760px;background:#fff}.table th,.table td{padding:10px 11px;border-bottom:1px solid var(--line);text-align:left;font-size:12px;white-space:nowrap}.table th{background:#f7f9f9;color:#536276;font-size:11px}.table tr:last-child td{border-bottom:0}.tag{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;font-size:10px;font-weight:800}.tag.green{background:#e9f8ef;color:#178b50}.tag.gold{background:#fff4db;color:#9a6c00}.tag.red{background:#ffecee;color:#bf4050}.tag.blue{background:#edf4ff;color:#2767c8}.tag.gray{background:#eef1f2;color:#68747b}.tag.purple{background:#f2edff;color:#6741c2}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.quick{border:1px solid var(--line);border-radius:12px;padding:15px;background:#fff;cursor:pointer;transition:.15s}.quick:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.quick b{display:block;margin-top:8px}.quick small{color:var(--muted)}
.list{display:grid;gap:0}.list-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.list-row:last-child{border-bottom:0}.list-row b{font-size:13px}.list-row small{color:var(--muted);display:block;margin-top:3px}.bar{height:8px;background:#edf1f0;border-radius:99px;overflow:hidden}.bar>span{display:block;height:100%;background:linear-gradient(90deg,#31a978,#77c39f);border-radius:99px}.muted{color:var(--muted)}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}.filters input,.filters select{border:1px solid var(--line);background:#fff;border-radius:9px;padding:9px 10px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.form-grid .wide{grid-column:1/-1}
.modal{position:fixed;inset:0;background:rgba(10,25,28,.52);z-index:100;display:grid;place-items:center;padding:18px}.modal-card{width:min(700px,100%);max-height:88vh;overflow:auto;background:#fff;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.2)}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:17px 20px;border-bottom:1px solid var(--line)}.modal-head h3{margin:0}.modal-body,.modal-card>#modalBody{padding:20px}.toast{position:fixed;right:22px;bottom:22px;z-index:200;background:#173e3a;color:#fff;padding:12px 16px;border-radius:11px;box-shadow:var(--shadow);font-size:13px}.notice{border:1px solid #eedca9;background:#fff9e7;color:#765d20;border-radius:11px;padding:12px 14px;font-size:13px;line-height:1.5;margin-bottom:14px}.danger-note{border-color:#f2c5cb;background:#fff2f4;color:#8f3040}.empty{padding:30px;text-align:center;color:var(--muted)}.kpi-line{display:flex;justify-content:space-between;gap:10px;font-size:13px;margin:9px 0}.kpi-line strong{font-size:14px}
.payslip{max-width:900px}.payslip-head{display:flex;justify-content:space-between;gap:20px;border-bottom:2px solid var(--brand);padding-bottom:14px;margin-bottom:16px}.payslip-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.salary-line{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed #dde4e2}.salary-line.total{font-size:18px;font-weight:900;border-bottom:0;border-top:2px solid var(--brand);margin-top:6px;padding-top:14px}.role-note{background:#eff7f5;border-radius:11px;padding:12px 14px;color:#315c56;font-size:13px;margin-bottom:15px}.mini-chart{height:180px;display:flex;align-items:flex-end;gap:12px;padding:20px 8px 5px}.mini-chart .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--muted);font-size:11px}.mini-chart .barcol{width:70%;min-height:3px;background:linear-gradient(180deg,#6aa9f1,#377de5);border-radius:8px 8px 2px 2px}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.setting-group{background:#fff;border:1px solid var(--line);border-radius:14px;padding:17px}.setting-group h3{margin:0 0 4px}.setting-group>p{color:var(--muted);font-size:12px;margin:0 0 16px}.footer-note{color:var(--muted);font-size:11px;margin-top:20px;text-align:center}

@media(max-width:1180px){.dashboard-hero{grid-template-columns:1fr}.hero-visual{min-height:150px}.dashboard-quick-grid{grid-template-columns:repeat(2,1fr)}.dashboard-main-grid,.dashboard-bottom-grid{grid-template-columns:1fr}.dashboard-metrics{grid-template-columns:repeat(2,1fr)}.cards{grid-template-columns:repeat(2,1fr)}.grid-2{grid-template-columns:1fr}.quick-grid{grid-template-columns:repeat(2,1fr)}.settings-grid{grid-template-columns:1fr}}
@media(max-width:800px){.app-shell{display:block}.sidebar{transform:translateX(-105%);transition:.2s;width:250px}.sidebar.open{transform:translateX(0)}.workspace{margin:0}.topbar{padding:0 14px}.top-title small,.profile-copy{display:none}.main{padding:14px}.dashboard-hero{display:block}.hero-copy{padding:8px 2px 16px}.hero-copy h1{font-size:27px}.hero-copy .hero-subtitle{font-size:16px;margin-bottom:14px}.hero-visual{min-height:135px}.dashboard-quick-grid{grid-template-columns:1fr 1fr}.dashboard-metrics{grid-template-columns:1fr 1fr}.cards{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}.hero:after{display:none}.hero h2{font-size:24px}.page-head{align-items:flex-start;flex-direction:column}.quick-grid{grid-template-columns:1fr 1fr}.settings-grid{grid-template-columns:1fr}.payslip-grid{grid-template-columns:1fr}.app-footer{display:none}}
@media(max-width:520px){.dashboard-quick-grid,.dashboard-metrics,.cards,.quick-grid{grid-template-columns:1fr}.main{padding:12px}.topbar{height:66px}.login-card{padding:25px}.page-head h1{font-size:24px}.hero-visual .hero-badge{font-size:15px;right:16px}.dashboard-card{padding:14px}.dashboard-card-head{align-items:flex-start}.month-switcher{display:none}}
@media print{.sidebar,.topbar,.page-head .btn-row,.no-print,.app-footer{display:none!important}.workspace{grid-column:1}.main{padding:0}.card{border:0;box-shadow:none}.payslip{max-width:none}}

/* =====================================================
   QUANG CHAU PAYROLL UI 1.2.0 — BRAND + DATA INPUT FLOW
   ===================================================== */
:root{
  --bg:#f6f5f3;
  --panel:#ffffff;
  --text:#1c2230;
  --muted:#777b86;
  --line:#ece6e2;
  --brand:#bf1520;
  --brand-deep:#8e1018;
  --brand-soft:#fff0f1;
  --gold:#c99a3d;
  --gold-soft:#fff8e8;
  --green:#16875f;
  --blue:#4169b1;
  --red:#bf1520;
  --purple:#7555a6;
  --shadow:0 16px 40px rgba(70,27,28,.08);
}
body{background:var(--bg);color:var(--text)}
.login-shell{background:linear-gradient(145deg,#7d0d15 0%,#a9111c 46%,#5f0b11 100%)}
.login-shell:before{opacity:.16;filter:saturate(.75);mix-blend-mode:screen}
.login-shell:after{background:linear-gradient(180deg,rgba(107,9,17,.12),rgba(67,5,10,.68))}
.login-logo{box-shadow:0 14px 35px rgba(191,21,32,.22)}
.btn.primary{background:linear-gradient(135deg,#c71825,#a90f19);box-shadow:0 7px 18px rgba(191,21,32,.16)}
.btn.secondary{background:#faf4f4;color:#9d1720;border:1px solid #eedadd}
.form-stack input:focus,.field input:focus,.field select:focus,.field textarea:focus{border-color:#d8656d;box-shadow:0 0 0 3px rgba(191,21,32,.08)}

.sidebar{background:linear-gradient(180deg,#98121b 0%,#7f0d15 100%);width:248px}
.app-shell{grid-template-columns:248px minmax(0,1fr)}
.side-brand{min-height:102px;padding:16px 18px;gap:12px;border-bottom:1px solid rgba(255,255,255,.12)}
.side-logo-wrap{width:58px;height:58px;padding:4px;border-radius:15px;background:#fff;box-shadow:0 8px 22px rgba(66,0,4,.22);flex:0 0 58px}
.side-logo{width:100%;height:100%;display:block;border-radius:11px;object-fit:cover}
.qc-brand-copy b{color:#fff;font-size:15px;letter-spacing:.35px}.qc-brand-copy small{color:#f2c9cc;font-size:8px;letter-spacing:1.2px}
.sidebar nav{padding:10px 10px 4px;gap:5px}.nav-item{color:#f9e9ea;padding:12px 14px;border-radius:11px}.nav-item:hover{background:rgba(255,255,255,.09)}
.nav-item.active{background:#fff;color:#a5111a;box-shadow:0 10px 22px rgba(74,2,7,.18);font-weight:850}.nav-item.active:after{content:"";width:4px;height:24px;border-radius:8px;background:var(--gold);margin-left:auto}
.side-footer-art{min-height:220px;background-position:center 55%}.side-footer-art:before{background:linear-gradient(180deg,rgba(126,13,21,.45),rgba(89,6,12,.95))}.side-footer-copy span{background:#e7bd66}
.topbar{height:76px;padding:0 30px;border-bottom-color:#eee7e3}.top-title b{font-size:17px}.avatar{background:linear-gradient(135deg,#bf1520,#8f1018)}
.main{padding:22px 26px 28px;max-width:1540px}.app-footer{background:#fff}

.brand-hero{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(330px,.75fr);min-height:154px;border-radius:20px;overflow:hidden;margin-bottom:18px;background:linear-gradient(112deg,#fff 0%,#fff8f7 54%,#f7e7e7 100%);border:1px solid #ecdedd;box-shadow:0 8px 26px rgba(97,37,40,.045);position:relative}
.brand-hero:after{content:"";position:absolute;right:0;top:0;bottom:0;width:42%;background:linear-gradient(90deg,rgba(191,21,32,.06),rgba(130,11,18,.78)),url('/assets/phong-canh-workspace.png') center 48%/cover no-repeat;z-index:0}
.brand-hero-copy{padding:28px 30px;position:relative;z-index:1}.brand-eyebrow,.section-kicker{display:block;font-size:10px;font-weight:900;letter-spacing:1.45px;color:#a8151e;text-transform:uppercase;margin-bottom:8px}.brand-hero h1{margin:0 0 8px;font-size:31px;letter-spacing:-.75px}.brand-hero p{margin:0;max-width:720px;color:#6f7078;font-size:14px;line-height:1.6}.brand-hero-mark{position:relative;z-index:2;display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:22px 26px;color:#fff}.brand-hero-mark img{width:68px;height:68px;border-radius:17px;object-fit:cover;border:4px solid rgba(255,255,255,.92);box-shadow:0 12px 30px rgba(64,0,5,.2)}.brand-hero-mark b{display:block;font-size:15px}.brand-hero-mark span{display:block;margin-top:4px;color:#f7dadd;font-size:11px;line-height:1.4}.employee-brand-hero{min-height:148px}

.input-roadmap-card{background:#fff;border:1px solid #e8dfdc;border-radius:20px;padding:22px 24px;margin-bottom:16px;box-shadow:var(--shadow)}
.roadmap-head{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-bottom:18px}.roadmap-head h2{margin:0 0 5px;font-size:21px;letter-spacing:-.35px}.roadmap-head p{margin:0;color:var(--muted);font-size:12px}
.readiness-ring{--p:0;width:82px;height:82px;border-radius:50%;display:grid;place-items:center;flex:0 0 82px;background:conic-gradient(#bf1520 calc(var(--p)*1%),#f0e7e5 0);position:relative}.readiness-ring:before{content:"";position:absolute;inset:7px;background:#fff;border-radius:50%}.readiness-ring div{position:relative;text-align:center}.readiness-ring strong{display:block;font-size:19px;line-height:1}.readiness-ring span{font-size:9px;color:#777;margin-top:3px;display:block}
.input-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}.input-step{border:1px solid #eee7e4;background:#fbfaf9;border-radius:14px;padding:13px;display:grid;grid-template-columns:32px 1fr;gap:10px;text-align:left;cursor:pointer;min-height:108px;transition:.16s}.input-step:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(81,38,39,.07);border-color:#e2cdce}.input-step.done{background:#f8fbf9;border-color:#dcebe4}.input-step.pending{background:#fffaf9}.step-number{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#f4e6e7;color:#aa1620;font-weight:900}.input-step.done .step-number{background:#e4f3eb;color:#16825c}.step-copy{min-width:0}.step-copy b{display:block;font-size:12px;margin:1px 0 4px}.step-copy small{display:block;font-size:10.5px;color:#7b7c84;line-height:1.45}.step-cta{grid-column:1/-1;font-size:10px;color:#9a141d;font-weight:800;margin-top:auto}

.summary-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}.summary-card{background:#fff;border:1px solid #ece5e2;border-radius:16px;padding:15px 16px;display:flex;gap:12px;align-items:flex-start;min-height:108px}.summary-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#fff0f1;color:#b31620;flex:0 0 40px}.summary-icon svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.summary-card small{display:block;color:#7b7c84;font-size:10.5px;margin-bottom:5px}.summary-card strong{display:block;font-size:20px;letter-spacing:-.35px;margin-bottom:6px}.summary-card span:last-child{font-size:10.5px;color:#85858a;line-height:1.4}.compact-summary{grid-template-columns:repeat(3,minmax(0,1fr))}

.dashboard-card{border-radius:17px;border-color:#eae3e0;box-shadow:0 8px 24px rgba(76,39,40,.04)}.dashboard-card-head h2{font-size:16px}.dashboard-card-head p.head-note{margin:5px 0 0;color:#85838a;font-size:11px}.data-work-grid{grid-template-columns:minmax(0,1.75fr) minmax(330px,.8fr)}
.action-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.action-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}.manager-actions{grid-template-columns:repeat(3,minmax(0,1fr))}.action-tile{border:1px solid #ece5e2;background:#fff;border-radius:14px;padding:14px;text-align:left;cursor:pointer;min-height:104px;transition:.16s}.action-tile:hover{transform:translateY(-2px);border-color:#dfc8ca;box-shadow:0 10px 24px rgba(83,34,36,.07)}.action-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#fff0f1;color:#b31520;margin-bottom:11px}.action-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.action-tile b{display:block;font-size:12px;margin-bottom:4px}.action-tile small{display:block;color:#85858c;font-size:10.5px;line-height:1.45}
.task-button{width:100%;border:0;background:transparent;text-align:left;cursor:pointer}.task-button:hover{background:#fff9f8}.task-icon.task-red{background:#fff0f1;color:#b71620}.task-icon.task-gold{background:#fff7e9;color:#b9872d}.count-badge{background:#bf1520}.dashboard-card-head a{color:#ad1721}
.control-list{display:grid}.control-list button{border:0;background:transparent;display:grid;grid-template-columns:38px 1fr 24px;gap:11px;align-items:center;text-align:left;padding:12px 0;border-bottom:1px solid #eee8e5;cursor:pointer}.control-list button:last-child{border-bottom:0}.control-list>button>span{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#fff0f1;color:#ae1620}.control-list svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9}.control-list b{font-size:12px}.control-list small{display:block;color:#86858b;font-size:10.5px;margin-top:3px}.control-list em{font-style:normal;color:#a9141d;font-weight:900}

.input-explainer{background:linear-gradient(105deg,#fff 0%,#fff8f7 100%);border:1px solid #eadadb;border-radius:18px;padding:20px 22px;display:grid;grid-template-columns:minmax(300px,.9fr) minmax(500px,1.3fr);gap:22px;align-items:center;margin-bottom:16px}.input-explainer h2{margin:0 0 6px;font-size:20px}.input-explainer p{margin:0;color:#7a797f;font-size:12px;line-height:1.6}.input-mini-flow{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}.input-mini-flow span{padding:8px 10px;border-radius:10px;background:#fff;border:1px solid #eadfdd;font-size:10px;font-weight:800}.input-mini-flow i{font-style:normal;color:#bd1722;font-weight:900}.input-mini-flow b{font-size:11px;color:#9e1520;margin-left:4px}
.data-entry-layout{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(310px,.7fr);gap:14px}.data-entry-side{display:grid;align-content:start;gap:14px}.entry-guide-card h2{font-size:17px;margin:0 0 7px}.entry-guide-card>p{font-size:11px;color:#7f7e84;line-height:1.6;margin:0 0 14px}.guide-items{display:grid;gap:9px;margin-bottom:14px}.guide-items>div{background:#fbf8f7;border:1px solid #eee5e3;border-radius:11px;padding:10px}.guide-items b{display:block;font-size:11px}.guide-items small{display:block;color:#85838a;font-size:10px;margin-top:3px;line-height:1.4}.wide-btn{width:100%;margin-top:8px}.rate-list{display:grid;gap:0;border:1px solid #eee5e2;border-radius:12px;overflow:hidden}.rate-list>div{display:flex;justify-content:space-between;gap:10px;padding:10px 11px;border-bottom:1px solid #eee8e5;background:#fff}.rate-list>div:last-child{border-bottom:0}.rate-list span{font-size:10.5px;color:#727177}.rate-list b{font-size:10.5px}.entry-warning{margin-top:12px;background:#fff8e9;border:1px solid #f1dfb5;border-radius:11px;padding:10px 11px;color:#7d6228;font-size:10px;line-height:1.5}
.legal-status{display:grid;grid-template-columns:48px 1fr auto;gap:14px;align-items:center;border-radius:16px;padding:16px 18px;margin-bottom:14px;border:1px solid}.legal-status.verified{background:#f2faf6;border-color:#d7ebdf}.legal-status.unverified{background:#fff6f5;border-color:#efd0d2}.legal-status-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center}.verified .legal-status-icon{background:#dff2e8;color:#16815a}.unverified .legal-status-icon{background:#ffe4e5;color:#b71923}.legal-status-icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}.legal-status b{font-size:13px}.legal-status p{margin:4px 0 0;font-size:10.5px;color:#74747a;line-height:1.45}.status-pill{font-size:9px;font-weight:900;letter-spacing:.8px;border-radius:999px;padding:7px 9px;background:#fff}.verified .status-pill{color:#167755}.unverified .status-pill{color:#ac1720}

.metric-green{background:#f1f8f4}.metric-blue{background:#f2f5fb}.metric-red{background:#fff1f1}.metric-purple{background:#f6f3fa}.dashboard-metric.metric-red .metric-icon,.announcement-gold{background:#ffe6e7;color:#b71721}.quick-gold,.task-gold{background:#fff6e6;color:#b9872d}
.notice.danger-note{border-color:#efc8cc;background:#fff5f5;color:#9b1820}
.tag.red{background:#ffe8e9;color:#ad1620}.tag.gold{background:#fff5df;color:#987120}.tag.green{background:#e8f5ee;color:#177351}
.barcol{background:#bf1520!important}

@media(max-width:1220px){.input-steps{grid-template-columns:repeat(3,1fr)}.action-grid{grid-template-columns:repeat(2,1fr)}.data-entry-layout,.data-work-grid{grid-template-columns:1fr}.input-explainer{grid-template-columns:1fr}.input-mini-flow{justify-content:flex-start}}
@media(max-width:900px){.sidebar{width:250px}.brand-hero{grid-template-columns:1fr}.brand-hero:after{width:100%;opacity:.12}.brand-hero-mark{justify-content:flex-start;color:#8c1119;padding-top:0}.brand-hero-mark span{color:#8f6a6c}.summary-cards{grid-template-columns:repeat(2,1fr)}.input-steps{grid-template-columns:repeat(2,1fr)}.action-strip{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.main{padding:12px}.brand-hero-copy{padding:20px}.brand-hero h1{font-size:26px}.brand-hero-mark{padding:0 20px 20px}.input-roadmap-card{padding:16px}.roadmap-head{align-items:flex-start}.readiness-ring{width:68px;height:68px;flex-basis:68px}.input-steps,.summary-cards,.compact-summary,.action-grid,.action-strip{grid-template-columns:1fr}.legal-status{grid-template-columns:44px 1fr}.status-pill{grid-column:1/-1;width:max-content}.input-mini-flow span{font-size:9px}}

/* =====================================================
   PAYROLL COCKPIT 1.3.0 — SIMPLE INPUT + LIVE PAYSLIP
   ===================================================== */
.payroll-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin:2px 0 14px}.payroll-page-head h1{margin:2px 0 6px;font-size:27px;letter-spacing:-.55px}.payroll-page-head p{margin:0;color:#7a7d86;font-size:13px}.payroll-top-controls{display:flex;gap:10px;align-items:center}.payroll-top-controls select{min-width:230px;background:#fff;border:1px solid #e7dcda;border-radius:11px;padding:10px 12px;font-weight:750;color:#283041;outline:none}.payroll-top-controls select:focus{border-color:#d75d66;box-shadow:0 0 0 3px rgba(191,21,32,.07)}
.payroll-stepper{display:grid;grid-template-columns:1fr 24px 1fr 24px 1fr 24px 1fr;align-items:center;background:#fff;border:1px solid #eee5e2;border-radius:16px;padding:13px 16px;margin-bottom:14px;box-shadow:0 8px 22px rgba(73,30,32,.035)}.payroll-stepper>i{font-style:normal;color:#d9cfd0;text-align:center;font-weight:900}.payroll-stepper .step{display:grid;grid-template-columns:34px 1fr;column-gap:9px;align-items:center;opacity:.48}.payroll-stepper .step.active{opacity:1}.payroll-stepper .step>span{grid-row:1/3;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#e7e8eb;color:#697080;font-weight:900;font-size:12px}.payroll-stepper .step.active>span{background:linear-gradient(135deg,#c91b28,#a90f19);color:#fff;box-shadow:0 6px 14px rgba(191,21,32,.18)}.payroll-stepper .step b{font-size:11px}.payroll-stepper .step small{font-size:9px;color:#8b8d93;margin-top:2px}
.payroll-editor-layout{display:grid;grid-template-columns:minmax(560px,1.12fr) minmax(470px,.88fr);gap:14px;align-items:start}.payroll-entry-panel{display:grid;gap:12px}.payroll-person-card,.payroll-input-card,.payslip-preview-panel,.payroll-workflow-actions{background:#fff;border:1px solid #ebe3e0;border-radius:17px;box-shadow:0 10px 28px rgba(75,31,32,.045)}.payroll-person-card,.payroll-input-card{padding:16px}.panel-title,.preview-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:13px}.panel-title h2,.preview-head h2{margin:0;font-size:16px}.panel-title p{margin:4px 0 0;color:#84858c;font-size:10.5px}.period-status{display:flex;align-items:center}.payroll-select-label{display:grid;gap:6px;color:#4e535d;font-size:11px;font-weight:800}.payroll-select-label select{width:100%;border:1px solid #e0d9d7;border-radius:10px;padding:10px 12px;background:#fff;color:#253047;font-weight:700}.person-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.person-meta>div{background:#f8f7f6;border:1px solid #eee9e7;border-radius:10px;padding:9px 10px}.person-meta span{display:block;color:#8a8b91;font-size:9px;margin-bottom:4px}.person-meta b{font-size:11px}
.entry-tip{display:flex;align-items:center;gap:8px;background:#eef5ff;border:1px solid #dce9fb;color:#36639d;border-radius:10px;padding:9px 10px;font-size:10px;line-height:1.45;margin-bottom:12px}.entry-tip svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;flex:0 0 16px}
.salary-input-columns{display:grid;grid-template-columns:1fr 1fr;gap:10px}.salary-input-group{border-radius:13px;padding:12px}.salary-input-group.income-group{background:linear-gradient(180deg,#fff8f8,#fffafa);border:1px solid #f1dfe1}.salary-input-group.deduction-group{background:linear-gradient(180deg,#f6f9fd,#f9fbfe);border:1px solid #e1e8f2}.salary-input-group h3{display:flex;align-items:center;gap:7px;margin:0 0 10px;font-size:12px}.salary-input-group h3 svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}.income-group h3{color:#ad1721}.deduction-group h3{color:#2e65a8}.salary-input-group>label:not(.toggle-row):not(.note-field){display:grid;grid-template-columns:minmax(120px,1fr) minmax(130px,.92fr);align-items:center;gap:9px;margin:6px 0}.salary-input-group label>span{font-size:10.5px;color:#4f5562;font-weight:650}.money-field{display:grid;grid-template-columns:minmax(0,1fr) auto;border:1px solid #dedfe4;background:#fff;border-radius:8px;overflow:hidden;min-height:34px}.money-field:focus-within{border-color:#d45c65;box-shadow:0 0 0 2px rgba(191,21,32,.06)}.money-field input{width:100%;border:0;outline:0;padding:7px 8px;text-align:right;background:transparent;font-size:11px;font-weight:700;color:#20293b}.money-field em{display:grid;place-items:center;min-width:37px;padding:0 7px;border-left:1px solid #e5e5e7;background:#f5f6f7;color:#777d87;font-size:9px;font-style:normal;font-weight:700}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px dashed #dfe4ea;padding:8px 0}.toggle-row input{width:36px;height:20px;accent-color:#bf1520}.auto-deduction-list{border:1px solid #e2e7ef;border-radius:9px;overflow:hidden;background:#fff;margin:7px 0}.auto-deduction-list>div{display:flex;align-items:center;justify-content:space-between;padding:7px 9px;border-bottom:1px solid #edf0f4;font-size:9.5px}.auto-deduction-list>div:last-child{border-bottom:0}.auto-deduction-list span{color:#697180}.auto-deduction-list b{color:#26324a}.note-field{display:grid;gap:6px;margin-top:8px}.note-field textarea{width:100%;border:1px solid #dde2e9;border-radius:8px;background:#fff;padding:8px;resize:vertical;font-size:10.5px;outline:none}
.payroll-total-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.payroll-total-strip>div{border-radius:11px;padding:11px 12px}.payroll-total-strip span{display:block;font-size:9.5px;margin-bottom:5px}.payroll-total-strip strong{font-size:18px;letter-spacing:-.35px}.payroll-total-strip .gross{background:#eaf7ef;color:#19734f}.payroll-total-strip .deduct{background:#fff0f1;color:#ae1721}.payroll-total-strip .net{background:#edf4fd;color:#245da0}.payroll-form-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:11px;padding-top:11px;border-top:1px solid #eee8e5}
.payslip-preview-panel{padding:13px;position:sticky;top:93px}.preview-head{padding:2px 2px 7px}.preview-head .section-kicker{margin-bottom:3px}.preview-head .btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;display:inline-block;vertical-align:-3px;margin-right:4px}.salary-slip-paper{background:#fff;border:1px solid #ddd;box-shadow:0 8px 28px rgba(0,0,0,.08);padding:17px 18px;color:#111;font-family:"Times New Roman",Times,serif;font-size:10px}.paper-company{text-align:center;line-height:1.28}.paper-company b{display:block;font-size:11px}.paper-company span{display:block;font-size:9px}.salary-slip-paper h2{text-align:center;font-size:13px;margin:3px 0}.paper-date{text-align:right;font-size:9px;margin:0 0 5px}.salary-slip-paper table{width:100%;border-collapse:collapse}.salary-slip-paper th,.salary-slip-paper td{border:1px solid #222;padding:3px 4px;line-height:1.18;vertical-align:middle}.salary-slip-paper th{font-weight:700}.salary-slip-paper .num{text-align:right;white-space:nowrap}.paper-meta th{width:21%;text-align:left}.paper-meta td{width:29%}.paper-two-col{display:grid;grid-template-columns:1fr 1fr;margin-top:-1px}.paper-two-col table+table{margin-left:-1px}.paper-two-col thead th:first-child{width:10%}.paper-two-col thead th:last-child{width:29%}.paper-total td{font-weight:700}.paper-spacer td{height:20px}.paper-net{margin-top:-1px}.paper-net th{text-align:left;width:52%}.paper-sign{display:grid;grid-template-columns:1fr 1fr;text-align:center;gap:20px;padding:18px 16px 6px}.paper-sign b,.paper-sign span{display:block}.paper-sign span{font-style:italic;margin-top:3px}.preview-valid{display:flex;align-items:center;gap:9px;background:#eef8f2;color:#287353;border:1px solid #daede1;border-radius:10px;padding:9px 10px;margin-top:10px}.preview-valid svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}.preview-valid b{display:block;font-size:10px}.preview-valid span{display:block;font-size:9px;color:#6c7d74;margin-top:2px}.modal-slip{max-width:780px;margin:auto}
.payroll-workflow-actions{margin-top:13px;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;gap:15px}.payroll-workflow-actions>div:first-child{font-size:11px}.payroll-workflow-actions span{color:#777b84}.payroll-empty{text-align:center;padding:52px 20px}.payroll-empty-icon{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:#fff0f1;color:#b51822;margin:0 auto 14px}.payroll-empty-icon svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.8}.payroll-empty h2{margin:0 0 7px}.payroll-empty p{color:#7e8189;margin:0 0 18px}

@media(max-width:1280px){.payroll-editor-layout{grid-template-columns:1fr}.payslip-preview-panel{position:static}.salary-slip-paper{max-width:760px;margin:auto}}
@media(max-width:900px){.payroll-page-head{display:grid}.payroll-top-controls{justify-content:space-between}.payroll-stepper{grid-template-columns:1fr 1fr;gap:8px}.payroll-stepper>i{display:none}.salary-input-columns{grid-template-columns:1fr}.person-meta{grid-template-columns:1fr 1fr}.payroll-total-strip{grid-template-columns:1fr}.paper-two-col{grid-template-columns:1fr}.paper-two-col table+table{margin-left:0;margin-top:-1px}}
@media(max-width:560px){.payroll-top-controls{display:grid}.payroll-top-controls select{min-width:0;width:100%}.payroll-stepper{grid-template-columns:1fr}.person-meta{grid-template-columns:1fr}.salary-input-group>label:not(.toggle-row):not(.note-field){grid-template-columns:1fr}.payroll-form-actions{justify-content:stretch}.payroll-form-actions .btn{flex:1}.payroll-workflow-actions{align-items:flex-start;display:grid}.salary-slip-paper{padding:10px;font-size:8px}.paper-company b{font-size:9px}.salary-slip-paper h2{font-size:11px}}

@media print{
  body *{visibility:hidden!important}
  #livePayslip,#livePayslip *,.modal-slip,.modal-slip *{visibility:visible!important}
  #livePayslip,.modal-slip{position:absolute!important;left:0;top:0;width:100%!important;max-width:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;background:#fff!important}
  .paper-inner{width:100%!important}
  @page{size:A4 portrait;margin:12mm}
}

/* ==========================================================
   QC PAYROLL V1.4.0 — FULL BRAND UI SYSTEM
   Mục tiêu: toàn bộ ứng dụng đồng nhất với màn hình nhập lương.
   ========================================================== */
:root{
  --qc-red:#c8102e;
  --qc-red-dark:#9f0b20;
  --qc-red-deep:#7d0919;
  --qc-red-soft:#fff1f3;
  --qc-gold:#e6b83f;
  --qc-ink:#172033;
  --qc-muted:#737b8c;
  --qc-bg:#f5f6f9;
  --qc-line:#e7e9ef;
  --qc-card:#ffffff;
}
body{background:var(--qc-bg);color:var(--qc-ink)}
.app-shell{background:var(--qc-bg)}
.sidebar{
  width:232px!important;
  background:linear-gradient(180deg,var(--qc-red) 0%,#b00e26 56%,var(--qc-red-dark) 100%)!important;
  color:#fff!important;
  border-right:0!important;
  box-shadow:12px 0 35px rgba(116,4,22,.10);
}
.side-brand{
  height:86px!important;
  padding:13px 18px!important;
  border-bottom:1px solid rgba(255,255,255,.16)!important;
  background:rgba(108,0,15,.12)!important;
  gap:12px!important;
}
.side-logo-wrap{width:52px!important;height:52px!important;border-radius:13px!important;border:2px solid rgba(255,255,255,.92)!important;overflow:hidden;background:#fff!important;box-shadow:0 8px 20px rgba(76,0,10,.16)}
.side-logo{width:100%!important;height:100%!important;object-fit:cover!important}
.qc-brand-copy b{color:#fff!important;letter-spacing:.7px!important;font-size:15px!important}
.qc-brand-copy small{color:rgba(255,255,255,.74)!important;letter-spacing:1.4px!important;font-size:7px!important;margin-top:4px!important}
.sidebar nav{padding:17px 10px!important}
.nav-item{color:rgba(255,255,255,.88)!important;border-radius:10px!important;margin:3px 0!important;padding:11px 13px!important;font-weight:700!important;border:1px solid transparent!important;gap:11px!important}
.nav-item:hover{background:rgba(255,255,255,.09)!important;color:#fff!important}
.nav-item.active{background:#fff!important;color:var(--qc-red)!important;box-shadow:0 9px 24px rgba(96,0,13,.18)!important;border-color:rgba(255,255,255,.5)!important}
.nav-item.active::after{background:var(--qc-gold)!important;width:4px!important;height:26px!important;border-radius:99px!important;right:8px!important}
.nav-icon{width:25px!important;height:25px!important;border-radius:8px!important;border:1px solid rgba(255,255,255,.22)!important;background:rgba(255,255,255,.07)!important}
.nav-item.active .nav-icon{background:var(--qc-red-soft)!important;border-color:#f7cbd1!important}
.nav-icon svg{width:15px!important;height:15px!important}
.side-footer-art{margin-top:auto!important;min-height:160px!important;background:linear-gradient(150deg,rgba(93,1,17,.04),rgba(82,0,14,.48))!important;border-top:1px solid rgba(255,255,255,.12)!important;display:flex!important;align-items:flex-end!important;position:relative!important;overflow:hidden!important}
.side-footer-art::before{content:'QC';position:absolute;right:-12px;bottom:25px;font-size:92px;font-weight:1000;letter-spacing:-9px;color:rgba(255,255,255,.055)}
.side-footer-copy{padding:21px 18px!important;color:#fff!important;position:relative;z-index:1}
.side-footer-copy .side-footer-kicker{font-size:8px!important;letter-spacing:2px!important;color:#f7ce76!important;font-weight:900!important;margin-bottom:8px!important;display:block!important}
.side-footer-copy b{font-size:14px!important;line-height:1.45!important;color:#fff!important}
.side-footer-copy small{font-size:9px!important;color:rgba(255,255,255,.65)!important;margin-top:8px!important;line-height:1.55!important}
.side-footer-copy>span:last-child{width:34px!important;height:3px!important;background:var(--qc-gold)!important;margin-top:13px!important}
.workspace{margin-left:232px!important;min-height:100vh!important}
.topbar{
  height:76px!important;
  padding:0 26px!important;
  background:linear-gradient(100deg,var(--qc-red) 0%,#bb0e29 72%,var(--qc-red-dark) 100%)!important;
  border-bottom:0!important;
  box-shadow:0 6px 22px rgba(138,8,29,.16)!important;
  color:#fff!important;
  position:sticky!important;top:0!important;z-index:25!important;
}
.top-title b{color:#fff!important;font-size:16px!important}
.top-title small{color:rgba(255,255,255,.73)!important;font-size:10px!important;margin-top:3px!important}
.icon-btn{color:inherit!important}
.topbar .icon-btn{border-color:rgba(255,255,255,.18)!important;background:rgba(255,255,255,.08)!important;color:#fff!important}
.topbar .icon-btn:hover{background:rgba(255,255,255,.15)!important}
.topbar .icon-btn svg{stroke:#fff!important}
.top-menu{display:none!important}
.top-actions{gap:10px!important}
.top-period-chip{display:flex;align-items:center;height:38px;padding:0 14px;border-radius:10px;background:#fff;color:#2b3040;font-size:11px;font-weight:850;box-shadow:0 5px 16px rgba(80,0,10,.12)}
.profile{padding-left:5px!important;gap:9px!important}
.profile-copy b{color:#fff!important}.profile-copy small{color:rgba(255,255,255,.75)!important}
.avatar{background:#fff!important;color:var(--qc-red)!important;border:2px solid rgba(255,255,255,.32)!important;font-weight:900!important;box-shadow:0 5px 15px rgba(88,0,15,.18)!important}
.notif-dot{border-color:var(--qc-red)!important;background:#ffd35f!important}
.main{padding:22px 24px 28px!important;max-width:1540px!important;margin:0 auto!important}
.app-footer{margin-left:0!important;background:#fff!important;border-top:1px solid var(--qc-line)!important;padding:14px 24px!important;color:#8a909d!important}
.page-head{background:#fff!important;border:1px solid var(--qc-line)!important;border-radius:15px!important;padding:17px 19px!important;margin:0 0 14px!important;box-shadow:0 7px 22px rgba(25,31,45,.035)!important;align-items:center!important;position:relative!important;overflow:hidden!important}
.page-head::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--qc-red),#e0384f)}
.page-kicker{display:block;color:var(--qc-red)!important;font-size:8px!important;font-weight:950!important;letter-spacing:1.6px!important;margin-bottom:5px!important}
.page-head h1{font-size:22px!important;margin:0 0 4px!important;letter-spacing:-.4px!important;color:#172033!important}
.page-head p{margin:0!important;color:var(--qc-muted)!important;font-size:11px!important}
.card,.dashboard-card,.summary-card,.input-explainer,.legal-status,.input-roadmap-card,.payroll-person-card,.payroll-input-card,.payslip-preview-panel,.payroll-workflow-actions{border:1px solid var(--qc-line)!important;box-shadow:0 8px 24px rgba(23,32,51,.04)!important;border-radius:14px!important;background:#fff!important}
.btn{border-radius:9px!important;font-weight:850!important;letter-spacing:.05px!important;min-height:36px!important}
.btn.primary{background:linear-gradient(135deg,var(--qc-red),#ad0c25)!important;border-color:var(--qc-red)!important;color:#fff!important;box-shadow:0 7px 15px rgba(200,16,46,.16)!important}
.btn.primary:hover{filter:brightness(.96)!important;transform:translateY(-1px)}
.btn.secondary{background:#fff!important;border-color:#dadde5!important;color:#30384a!important}
.btn.secondary:hover{border-color:#e8a0aa!important;color:var(--qc-red)!important;background:#fff7f8!important}
.table-wrap{border:1px solid #eceef2!important;border-radius:11px!important;background:#fff!important}
.table thead th{background:#f8f9fb!important;color:#5f6674!important;text-transform:none!important;font-size:10px!important;letter-spacing:.1px!important;border-bottom:1px solid #e4e7ed!important}
.table td{border-bottom:1px solid #eef0f3!important;color:#303647!important;font-size:11px!important}
.table tbody tr:hover td{background:#fffafb!important}
.field input,.field select,.field textarea,.form-grid input,.form-grid select,.form-grid textarea{border:1px solid #dfe2e8!important;border-radius:8px!important;background:#fff!important;min-height:38px!important;color:#232b3d!important;outline:none!important}
.field input:focus,.field select:focus,.field textarea:focus,.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{border-color:#dc7c89!important;box-shadow:0 0 0 3px rgba(200,16,46,.075)!important}
.notice{border-radius:11px!important;border:1px solid #f0d8db!important;background:#fff7f8!important;color:#7d2531!important}
.tag{border-radius:999px!important;font-size:9px!important;font-weight:850!important}
.tag.green{background:#eaf8f0!important;color:#277552!important}.tag.red{background:#fff0f2!important;color:#b0132a!important}.tag.gold{background:#fff8e5!important;color:#946f12!important}.tag.blue{background:#eef5ff!important;color:#315f9d!important}
.summary-cards.compact-summary{gap:11px!important}.summary-card{padding:14px 15px!important;min-height:108px!important}.summary-card .summary-icon{background:var(--qc-red-soft)!important;color:var(--qc-red)!important;border-radius:10px!important}.summary-card strong{font-size:20px!important;color:#172033!important}.summary-card small{color:#858b97!important}.summary-card span{color:#8b909b!important}
.legal-status{padding:14px 16px!important}.legal-status.unverified{background:#fff7f7!important;border-color:#f0ced2!important}.legal-status.verified{background:#f4fbf6!important;border-color:#d9eddf!important}.legal-status-icon{background:#ffe8eb!important;color:var(--qc-red)!important;border-radius:10px!important}.status-pill{background:#fff!important;border:1px solid #f2d8dc!important;color:var(--qc-red)!important}
.legal-input-flow{display:grid;grid-template-columns:1fr 28px 1fr 28px 1fr 28px 1fr;gap:8px;align-items:center;background:#fff;border:1px solid var(--qc-line);border-radius:14px;padding:12px 14px;margin:0 0 12px;box-shadow:0 8px 24px rgba(23,32,51,.035)}
.legal-input-flow>div{display:grid;grid-template-columns:30px 1fr;column-gap:9px;align-items:center;padding:7px 8px;border-radius:10px;background:#fafbfc;border:1px solid #eef0f4}
.legal-input-flow>div>span{grid-row:1/3;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--qc-red);color:#fff;font-size:10px;font-weight:900}.legal-input-flow>div b{font-size:10.5px}.legal-input-flow>div small{font-size:8.5px;color:#858b97;margin-top:2px}.legal-input-flow>div.done{background:#f4fbf6;border-color:#dceee2}.legal-input-flow>div.done>span{background:#2c9b65}.legal-input-flow>i{display:grid;place-items:center;color:#c8ccd4}.legal-input-flow>i svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.data-entry-layout{gap:12px!important;align-items:start!important}.entry-guide-card{border-top:3px solid var(--qc-red)!important}.entry-warning{background:#fff7f8!important;border-color:#efd6da!important;color:#85404a!important;border-radius:9px!important}
.rate-list>div{border-color:#eceef2!important}.rate-list b{color:#20283a!important}
.input-explainer{border-top:3px solid var(--qc-red)!important;background:#fff!important}.section-kicker{color:var(--qc-red)!important}.input-mini-flow span{background:#fff5f6!important;border-color:#f0d4d8!important;color:#8f2030!important}.input-mini-flow b{color:var(--qc-red)!important}
.brand-hero{background:linear-gradient(118deg,#fff 0%,#fff 58%,#fff3f4 100%)!important;border:1px solid var(--qc-line)!important;box-shadow:0 8px 24px rgba(23,32,51,.035)!important}.brand-hero::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--qc-red)}.brand-eyebrow{color:var(--qc-red)!important}.brand-hero-mark{background:linear-gradient(135deg,var(--qc-red),#97091e)!important;color:#fff!important}.brand-hero-mark img{border:2px solid rgba(255,255,255,.85)!important;border-radius:12px!important;background:#fff!important}.brand-hero-mark span{color:rgba(255,255,255,.72)!important}
.action-tile{border-color:var(--qc-line)!important;background:#fff!important}.action-tile:hover{border-color:#e9adb5!important;box-shadow:0 10px 24px rgba(200,16,46,.07)!important}.action-icon{background:var(--qc-red-soft)!important;color:var(--qc-red)!important}
.input-roadmap-card{border-top:3px solid var(--qc-red)!important}.input-step.pending{border-color:#eadfe1!important}.input-step.done{border-color:#d9ebdf!important}.input-step .step-number{background:var(--qc-red)!important}.input-step.done .step-number{background:#2d9d66!important}.step-cta{color:var(--qc-red)!important}
.payroll-page-head{background:#fff!important;border:1px solid var(--qc-line)!important;border-radius:14px!important;padding:14px 16px!important;margin-bottom:11px!important}.payroll-page-head::before{content:'QUANG CHÂU · PAYROLL';display:block;color:var(--qc-red);font-size:8px;font-weight:950;letter-spacing:1.4px;margin-bottom:4px}.payroll-stepper{border-top:3px solid var(--qc-red)!important}.payroll-stepper .step.active>span{background:linear-gradient(135deg,var(--qc-red),#a80c23)!important}.payroll-input-card{border-top:3px solid var(--qc-red)!important}.salary-input-group.income-group{background:#fff8f9!important;border-color:#f1dfe2!important}.income-group h3{color:var(--qc-red)!important}.money-field:focus-within{border-color:#d97d89!important;box-shadow:0 0 0 3px rgba(200,16,46,.06)!important}.payroll-total-strip .gross{background:#f1faf4!important}.payroll-total-strip .deduct{background:#fff1f3!important;color:#a70f27!important}.payroll-total-strip .net{background:#fff5e2!important;color:#70550c!important}.payslip-preview-panel{border-top:3px solid #252a35!important}.preview-valid{background:#f1faf4!important;border-color:#d9eddf!important}
.login-shell{background:linear-gradient(135deg,#9f0b20 0%,#c8102e 48%,#7d0919 100%)!important}.login-card{border-radius:18px!important;border:1px solid rgba(255,255,255,.18)!important;box-shadow:0 28px 80px rgba(75,0,14,.28)!important}.login-logo{border-radius:18px!important;box-shadow:0 10px 30px rgba(134,5,26,.14)!important}
@media(max-width:1000px){.legal-input-flow{grid-template-columns:1fr 1fr}.legal-input-flow>i{display:none}.top-period-chip{display:none}}
@media(max-width:820px){.sidebar{width:232px!important}.workspace{margin-left:0!important}.top-menu{display:grid!important}.main{padding:14px!important}.topbar{padding:0 14px!important}.profile-copy{display:none!important}}
@media(max-width:560px){.legal-input-flow{grid-template-columns:1fr}.page-head{align-items:flex-start!important}.page-head .btn-row{width:100%!important}.page-head .btn-row .btn{width:100%!important}}