/* ============================================================
   NGUỒN NHÀ — CSS DÙNG CHUNG (Design System)
   Nạp 1 lần ở mọi trang: <link rel="stylesheet" href="/assets/css/app.css">
   ============================================================ */
:root{
  --p-50:#FFFBEB; --p-100:#FEF3C7; --p-200:#FDE39A; --p-300:#FBCB6B;
  --p-400:#F8B23E; --p-500:#F59E0B; --p-600:#D97706; --p-700:#B45F04; --p-800:#8A4903;

  --b-50:#FBF6EF; --b-100:#F3E7D8; --b-200:#E4CBA8; --b-300:#D6B58C; --b-400:#B98A54;
  --b-500:#9C6A32; --b-600:#7C4A21; --b-700:#5C3518; --b-800:#402410;

  --n-bg:#FFF9F2; --n-surface:#FFFFFF; --n-surface2:#F7EFE5; --n-border:#E8D8C5;
  --n-text:#3B2A1E; --n-text2:#756658; --n-text3:#A89B90; --n-onprimary:#FFFFFF; --n-onbrown:#FFFFFF;

  --success:#16A34A; --success-bg:#DCFCE7; --warning:#CA8A04; --warning-bg:#FEF9C3;
  --error:#DC2626; --error-bg:#FEE2E2; --special:#7C3AED; --special-bg:#EDE9FE;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;

  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --n-bg:#1F160D; --n-surface:#2A1F14; --n-surface2:#241A11; --n-border:#4A3624;
    --n-text:#F3E7D8; --n-text2:#C9B8A6; --n-text3:#8A7864; --n-onprimary:#2C1B06; --n-onbrown:#2C1B06;
    --p-500:#F5A83C; --p-600:#F0932B; --p-100:#4A3512; --b-600:#C99568; --b-100:#3A2A1D; --b-300:#5A4530;
    --success:#4ADE80; --success-bg:#14532D; --warning:#FBBF24; --warning-bg:#422006;
    --error:#F87171; --error-bg:#450A0A; --special:#A78BFA; --special-bg:#2E1065;
  }
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--n-bg); color:var(--n-text);
  font-family:"Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  display:flex; justify-content:center;
}
a{color:inherit}
#app{width:100%;max-width:440px;min-height:100vh;display:flex;flex-direction:column}
#app.wide{max-width:1180px}

/* ---- Header nâu đất chuẩn (dùng khi màn có thanh header) ---- */
.app-header{background:var(--b-600);color:#fff;padding:16px 18px;display:flex;align-items:center;gap:10px;flex-shrink:0}
.app-header .logo{display:flex;align-items:center;gap:8px;flex:1}
.app-header .logo svg{color:var(--p-500)}
.app-header .logo span{font-size:15px;font-weight:700}
.app-header .icon-btn{background:none;border:none;color:var(--p-500);padding:2px;display:flex;cursor:pointer}
.app-header .avatar{width:28px;height:28px;border-radius:50%;background:rgba(245,158,11,.25);color:var(--p-500);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;border:1px solid var(--p-500)}

#content{flex:1;padding:18px;padding-bottom:96px}

/* ---- Typography ---- */
h1,h2,h3{margin:0;font-family:inherit}
p{margin:0}
.section-lbl{font-size:13px;font-weight:600;color:var(--n-text);margin:0 0 10px}

/* ---- Buttons ---- */
.btn{font-family:inherit;font-size:14px;font-weight:700;border-radius:var(--r-md);padding:12px 16px;border:none;cursor:pointer}
.btn-primary{background:var(--p-500);color:var(--n-onprimary)}
.btn-outline{background:var(--n-surface);color:var(--n-text);border:1px solid var(--n-border)}
.btn-brown{background:var(--b-600);color:var(--n-onbrown)}
.btn-danger{background:var(--error);color:#fff}
.btn-block{width:100%;text-align:center}

/* ---- Form ---- */
.field{margin-bottom:16px}
.field label{display:block;font-size:12.5px;font-weight:500;color:var(--n-text2);margin-bottom:6px}
.field .req{color:var(--error)}
input,select,textarea{
  width:100%;font-family:inherit;font-size:14.5px;padding:11px 13px;border:1px solid var(--n-border);
  border-radius:var(--r-sm);background:var(--n-surface);color:var(--n-text);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--p-500);outline-offset:1px;border-color:var(--p-500)}
.err-msg{font-size:12px;color:var(--error);margin-top:5px}

/* ---- Card / stat / badge ---- */
.card{background:var(--n-surface);border:1px solid var(--n-border);border-radius:var(--r-lg);padding:16px}
.stat{background:var(--n-surface);border:1px solid var(--n-border);border-radius:var(--r-md);padding:12px 8px;text-align:center}
.stat .num{font-size:19px;font-weight:700;margin:0;line-height:1.2}
.stat .lbl{font-size:11px;color:var(--n-text2);margin:3px 0 0}
.pill{font-size:11px;font-weight:600;padding:3px 10px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:4px}
.pill-success{background:var(--success-bg);color:var(--success)}
.pill-warning{background:var(--warning-bg);color:var(--warning)}
.pill-error{background:var(--error-bg);color:var(--error)}
.pill-brown{background:var(--b-100);color:var(--b-600)}

/* ---- Bottom nav ---- */
.bottomnav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:440px;
  background:var(--n-surface);border-top:1px solid var(--n-border);
  display:flex;justify-content:space-around;padding:8px 4px calc(8px + env(safe-area-inset-bottom,0px));
}
.navitem{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:9px;color:var(--n-text3);
  background:none;border:none;flex:1;font-family:inherit;text-decoration:none}
.navitem.active{color:var(--p-600);font-weight:700}
.navplus{background:var(--p-500);color:#fff;border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center}