/* ============================================================
   Dandi Studio v2 — Design System (Vận hành / các cô)
   Lớp theme đè lên staff.css + style.css gốc, giữ nguyên chức năng.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#FFF9F3; --card:#FFFFFF;
  --ink:#241F2B; --ink-2:#5E5566; --muted:#93899B;
  --line:#EFE6DC; --line-2:#F7F0E8;
  --ngoc:#00AC82; --ngoc-2:#37D6A8; --ngoc-ink:#00795C; --ngoc-soft:#E6F7F1;
  --cam:#FF9A3D; --cam2:#FF7A59; --vang:#FFC24B;
  --sanho:#E4573D;
  --r:18px; --sh:0 10px 26px rgba(70,50,40,.08); --nav:70px;
  --font:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  font-family:var(--font) !important;
  color:var(--ink);
  background:
    radial-gradient(760px 340px at 112% -8%, #EAFBF4 0%, rgba(234,251,244,0) 62%),
    radial-gradient(560px 260px at -10% 0%, #FFF0E8 0%, rgba(255,240,232,0) 58%),
    var(--bg) !important;
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{letter-spacing:-.3px}
h1{font-weight:800}
h2{font-weight:800}

/* header */
header,.hd{
  background:rgba(255,249,243,.88) !important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line) !important;
}

/* cards */
.card,.item,.box,.sheet,.panel,.rowcard{
  background:var(--card) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r) !important;
  box-shadow:var(--sh) !important;
}

/* buttons */
button,.btn{
  font-family:var(--font) !important;
  font-weight:700 !important;
  border-radius:14px !important;
  transition:transform .12s ease,box-shadow .18s ease;
}
button:active,.btn:active{transform:scale(.98)}
.btn:not(.ghost):not(.sm){
  background:linear-gradient(135deg,var(--ngoc),var(--ngoc-2)) !important;
  border:0 !important;color:#fff !important;
  box-shadow:0 8px 18px rgba(0,172,130,.24);
}
.btn.ghost{background:#fff !important;border:1px solid var(--line) !important;color:var(--ngoc-ink) !important}
.btn.sm{border-radius:999px !important;font-size:12px !important}

/* form */
input,select,textarea{
  font-family:var(--font) !important;
  border:1px solid var(--line) !important;
  border-radius:14px !important;
  background:#fff !important;
  padding:11px 13px !important;
  transition:border-color .15s ease,box-shadow .15s ease;
}
input:focus,select:focus,textarea:focus{
  outline:none !important;
  border-color:#9FE3CE !important;
  box-shadow:0 0 0 3px rgba(0,172,130,.14) !important;
}
label{font-weight:600;color:var(--ink-2)}

/* chips */
.pill,.tag{border-radius:999px !important;font-weight:700 !important;font-size:11px !important;padding:5px 9px !important}
.pill.ok,.tag.ok{background:var(--ngoc-soft) !important;color:var(--ngoc-ink) !important}
.pill.warn{background:#FFF4DC !important;color:#8A6100 !important}
.pill.bad{background:#FFEDE8 !important;color:#B8402A !important}
.pill.info{background:#EFECFE !important;color:#5B4BD1 !important}

/* bottom nav */
nav.tabs,.tabs,.tabbar{
  background:rgba(255,249,243,.92) !important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line) !important;
  padding-bottom:calc(6px + env(safe-area-inset-bottom)) !important;
}
nav.tabs button,.tabs button{
  font-family:var(--font) !important;font-weight:700 !important;
  border-radius:12px !important;
}
nav.tabs button.on,.tabs button.on{color:var(--ngoc) !important}

/* tables if any */
table th{background:#FFFCF8 !important;color:#6B6273 !important;font-weight:700 !important}
table td{border-bottom:1px solid var(--line-2) !important}

/* misc */
.muted{color:var(--muted) !important}
.empty{color:var(--muted);text-align:center;padding:22px 12px}
hr{border:0;border-top:1px solid var(--line)}