:root{
  --c-primary:#0d4d6b;     /* xanh đậm */
  --c-primary-2:#0a3a52;
  --c-accent:#f58220;      /* cam */
  --c-accent-2:#e0730e;
  --c-gray:#6c757d;
  --c-bg:#f4f6f8;
  --c-card:#ffffff;
  --c-border:#e3e7ec;
  --c-text:#1f2d3d;
  --sidebar-w:240px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  background:var(--c-bg);
  color:var(--c-text);
  font-size:14px;
}
a{color:var(--c-primary);text-decoration:none}
a:hover{color:var(--c-accent-2)}

/* Layout */
.app-wrap{display:flex;min-height:100vh}
.sidebar{
  width:var(--sidebar-w);
  background:linear-gradient(180deg,var(--c-primary),var(--c-primary-2));
  color:#fff;
  position:fixed;top:0;left:0;bottom:0;
  display:flex;flex-direction:column;
  z-index:1030;
  overflow-y:auto;
}
.sidebar .brand{
  padding:18px 16px;font-weight:700;font-size:16px;
  border-bottom:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;gap:10px;
}
.sidebar .brand img{max-height:34px}
.sidebar .nav-link{
  color:#d6e6ef;padding:11px 18px;display:flex;align-items:center;gap:10px;
  border-left:3px solid transparent;transition:.15s;
}
.sidebar .nav-link:hover{background:rgba(255,255,255,.08);color:#fff}
.sidebar .nav-link.active{
  background:rgba(245,130,32,.18);color:#fff;border-left-color:var(--c-accent);
}
.sidebar .nav-section{
  padding:14px 18px 6px;font-size:11px;text-transform:uppercase;
  letter-spacing:.06em;color:#9fc0d4;
}
.sidebar .nav-icon{width:18px;text-align:center}

.main{
  flex:1;margin-left:var(--sidebar-w);
  display:flex;flex-direction:column;min-width:0;
}
.topbar{
  background:#fff;border-bottom:1px solid var(--c-border);
  padding:10px 18px;display:flex;align-items:center;gap:14px;
  position:sticky;top:0;z-index:1020;
}
.topbar .toggle-btn{display:none;background:none;border:none;font-size:20px;color:var(--c-primary)}
.topbar h1{font-size:18px;margin:0;font-weight:600;color:var(--c-primary)}
.topbar .ms-auto{margin-left:auto}
.content{padding:18px;flex:1}

/* Cards */
.card{background:var(--c-card);border:1px solid var(--c-border);border-radius:8px;margin-bottom:16px}
.card-header{padding:12px 16px;border-bottom:1px solid var(--c-border);font-weight:600;background:#fafbfc;border-radius:8px 8px 0 0}
.card-body{padding:16px}

/* Stat boxes */
.stat-card{
  background:#fff;border:1px solid var(--c-border);border-radius:8px;
  padding:14px 16px;display:flex;flex-direction:column;gap:4px;
  border-top:3px solid var(--c-primary);
}
.stat-card.accent{border-top-color:var(--c-accent)}
.stat-card.danger{border-top-color:#dc3545}
.stat-card.success{border-top-color:#198754}
.stat-card.warning{border-top-color:#ffc107}
.stat-card .label{color:var(--c-gray);font-size:12px}
.stat-card .value{font-size:18px;font-weight:700;color:var(--c-text)}
.stat-card .sub{font-size:11px;color:var(--c-gray)}

/* Buttons */
.btn-primary{background:var(--c-primary);border-color:var(--c-primary)}
.btn-primary:hover{background:var(--c-primary-2);border-color:var(--c-primary-2)}
.btn-accent{background:var(--c-accent);border-color:var(--c-accent);color:#fff}
.btn-accent:hover{background:var(--c-accent-2);border-color:var(--c-accent-2);color:#fff}

/* Tables */
.table{margin:0;font-size:13px}
.table thead th{background:#eef3f6;color:var(--c-primary);font-weight:600;white-space:nowrap}
.table td,.table th{vertical-align:middle}
.table-hover tbody tr:hover{background:#f7f9fb}

/* Badges */
.badge-debt{background:#fdecea;color:#c0392b}
.badge-ok{background:#e6f4ea;color:#1b7a3d}

/* Forms */
.form-label{font-weight:600;font-size:13px;margin-bottom:4px}
.form-control,.form-select{font-size:13px}
.required::after{content:" *";color:#dc3545}

/* Mobile */
@media (max-width:992px){
  .sidebar{transform:translateX(-100%);transition:transform .25s}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0}
  .topbar .toggle-btn{display:inline-block}
  .sidebar-backdrop{
    position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1029;display:none;
  }
  .sidebar-backdrop.show{display:block}
}

/* Print */
@media print{
  .sidebar,.topbar,.no-print{display:none!important}
  .main{margin-left:0!important}
  .content{padding:0!important}
  body{background:#fff}
  .card{border:1px solid #ccc;box-shadow:none}
}

.print-area{display:none}
@media print{.print-area{display:block}.screen-area{display:none}}

.invoice{max-width:800px;margin:0 auto;background:#fff;padding:24px}
.invoice h2{text-align:center;margin:0 0 4px;color:var(--c-primary)}
.invoice .muted{color:var(--c-gray);font-size:12px}
.invoice table{width:100%;border-collapse:collapse;margin-top:12px}
.invoice th,.invoice td{border:1px solid #ccc;padding:6px 8px;font-size:13px;text-align:left}
.invoice th{background:#eef3f6}
.invoice .totals{margin-top:12px;width:300px;margin-left:auto}
.invoice .totals td{border:none;padding:3px 6px}
.invoice .sign{margin-top:30px;display:flex;justify-content:space-between;font-size:13px}