:root {
  --nen: #f6f4f0; --mat: #ffffff; --mat2: #efece6; --vien: #ddd8cf; --chu: #1f1d1a; --nhat: #6b665e;
  --cam: #e8731e; --cam-nhat: #fbe6d4; --vang: #f5c518; --do: #c8372d; --xanh: #2f7d4f; --lam: #2c6db4;
  --bong: 0 1px 3px rgba(0,0,0,.08);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --nen: #161513; --mat: #1f1e1b; --mat2: #2a2825; --vien: #3a3733; --chu: #ece8e1; --nhat: #a39d93;
    --cam-nhat: #3d2a1a; --bong: none; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--nen); color: var(--chu); font-size: 14px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: var(--mat2); border: 1px solid var(--vien); border-radius: 8px; padding: 6px 12px; cursor: pointer; }
button:hover { border-color: var(--cam); }
button.chinh { background: var(--cam); border-color: var(--cam); color: #fff; font-weight: 600; }
button:disabled { opacity: .5; cursor: default; }
input, select, textarea { background: var(--mat); border: 1px solid var(--vien); border-radius: 8px; padding: 6px 8px; }
textarea { width: 100%; resize: vertical; }
a { color: var(--cam); }
.the { background: var(--mat); border: 1px solid var(--vien); border-radius: 12px; box-shadow: var(--bong); }
.nhat { color: var(--nhat); }
.nho { font-size: 12px; }
.huy-hieu { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 12px; background: var(--mat2); }
.huy-hieu.canh-bao { background: #fde7c4; color: #8a4b00; }
.huy-hieu.xong { background: #d6f0de; color: #1d5e35; }
@media (prefers-color-scheme: dark) {
  .huy-hieu.canh-bao { background: #4a3413; color: #ffcf8a; }
  .huy-hieu.xong { background: #17391f; color: #9be0b0; }
}