:root{
  --brand-brown:#481D02;
  --brand-red:#A71516;
  --brand-orange:#F47321;
  --ink:#241a12;
  --ink-2:#6a5847;
  --bg:#FBF7F1;
  --card:#ffffff;
  --border:#e7ddd0;
  --ok:#1f7a3d;
  --warn:#b5651d;
  --danger:#a71516;
  --A:#1f7a3d; --B:#2f6f86; --C:#b5651d; --D:#a71516;
  font-size:15px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:'Segoe UI',system-ui,-apple-system,sans-serif}
a{color:var(--brand-red)}
h1,h2,h3{margin:0 0 .5rem;color:var(--brand-brown)}
button{cursor:pointer;font-family:inherit}
input,select,textarea{font-family:inherit;font-size:1rem}

/* ---------- Login ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#481D02,#A71516,#F47321)}
.login-card{background:var(--card);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.25);
  padding:2.4rem 2.2rem;width:100%;max-width:380px}
.login-card h1{font-size:1.3rem;text-align:center}
.login-card .sub{text-align:center;color:var(--ink-2);font-size:.85rem;margin-bottom:1.6rem}
.field{margin-bottom:1rem}
.field label{display:block;font-size:.82rem;color:var(--ink-2);margin-bottom:.3rem}
.field input,.field select{width:100%;padding:.6rem .7rem;border:1px solid var(--border);border-radius:8px;background:#fff}
.field input:focus,.field select:focus{outline:2px solid var(--brand-orange);border-color:var(--brand-orange)}
.btn{display:inline-block;padding:.62rem 1.2rem;border-radius:8px;border:none;font-weight:600;font-size:.92rem}
.btn-primary{background:var(--brand-red);color:#fff;width:100%}
.btn-primary:hover{background:var(--brand-brown)}
.btn-secondary{background:#fff;border:1px solid var(--border);color:var(--ink)}
.btn-ghost{background:transparent;border:none;color:var(--brand-red)}
.btn-sm{padding:.35rem .7rem;font-size:.82rem;border-radius:6px}
.error-msg{background:#fdeceb;color:var(--danger);border:1px solid #f3c9c6;border-radius:8px;padding:.55rem .8rem;font-size:.85rem;margin-bottom:1rem}
.ok-msg{background:#eaf6ee;color:var(--ok);border:1px solid #bfe6cc;border-radius:8px;padding:.55rem .8rem;font-size:.85rem;margin-bottom:1rem}

/* ---------- App shell ---------- */
.app-shell{display:flex;min-height:100vh}
.sidebar{width:230px;background:var(--brand-brown);color:#f4ece2;flex-shrink:0;display:flex;flex-direction:column}
.sidebar .brand{padding:1.1rem 1rem;font-weight:700;font-size:1.05rem;border-bottom:1px solid rgba(255,255,255,.15)}
.sidebar .brand small{display:block;font-weight:400;font-size:.72rem;opacity:.75;margin-top:.15rem}
.nav-item{display:block;padding:.7rem 1.1rem;color:#f4ece2cc;text-decoration:none;font-size:.9rem;border-left:3px solid transparent;cursor:pointer}
.nav-item:hover{background:rgba(255,255,255,.08)}
.nav-item.active{background:rgba(255,255,255,.14);border-left-color:var(--brand-orange);color:#fff;font-weight:600}
.sidebar .who{margin-top:auto;padding:1rem;border-top:1px solid rgba(255,255,255,.15);font-size:.8rem}
.sidebar .who .name{font-weight:600;color:#fff}
.sidebar .who .role{opacity:.75;font-size:.75rem}
.main{flex:1;padding:1.6rem 2rem;max-width:1200px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.4rem}
.topbar h2{margin:0}

.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1.2rem 1.3rem;margin-bottom:1.2rem}
.stat-row{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.stat{flex:1;min-width:140px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1rem 1.1rem}
.stat .label{font-size:.78rem;color:var(--ink-2)}
.stat .value{font-size:1.6rem;font-weight:700;color:var(--brand-brown)}

table{width:100%;border-collapse:collapse;font-size:.88rem}
th,td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--border)}
th{color:var(--ink-2);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.02em}
tr:hover td{background:#faf5ee}

.badge{display:inline-block;padding:.15rem .55rem;border-radius:999px;font-size:.75rem;font-weight:700;color:#fff}
.badge-A{background:var(--A)} .badge-B{background:var(--B)} .badge-C{background:var(--C)} .badge-D{background:var(--D)}
.badge-neutral{background:#8b7b68}

.pill{display:inline-block;padding:.15rem .55rem;border-radius:999px;font-size:.75rem;background:#eee;color:#555}
.pill-cho_cham{background:#fdf1de;color:#9a6a12}
.pill-da_cham{background:#e2eefb;color:#2f6f86}
.pill-da_duyet{background:#e4f5e9;color:#1f7a3d}
.pill-tra_lai{background:#fdeceb;color:#a71516}

.select-ky{padding:.4rem .6rem;border:1px solid var(--border);border-radius:8px;background:#fff}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:700px){.form-row{grid-template-columns:1fr}}

.tc-row{display:grid;grid-template-columns:2.2fr .8fr .6fr .8fr .8fr 1.4fr;gap:.6rem;align-items:center;padding:.55rem 0;border-bottom:1px dashed var(--border)}
.tc-row .th{font-weight:600;font-size:.76rem;color:var(--ink-2);text-transform:uppercase}
.tc-row input{width:100%;padding:.4rem .5rem;border:1px solid var(--border);border-radius:6px}

.empty{color:var(--ink-2);font-style:italic;padding:1.5rem 0;text-align:center}
.hint{font-size:.8rem;color:var(--ink-2)}
[hidden]{display:none!important}