/* Dùng chung cho trang khách và trang quản lý */
:root{
  --xanh:#2F6B4F;  --xanh-nhat:#E3EFE7;
  --cam:#E07A2E;   --cam-nhat:#FBE7D6;
  --vang:#F2C14E;
  --nen:#FBF7EF;   --chu:#1F2A24;  --chu-mo:#5E6A63;
  --vien:#E6DECD;  --do:#C0392B;   --do-nhat:#FDF1EF;
  --xam-nhat:#EFEDE8;
  --bo-goc:16px;
}
*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth }
body{ font-family:"Segoe UI", Roboto, Arial, sans-serif; background:var(--nen); color:var(--chu); line-height:1.6 }
a{ color:inherit }
button,input,select,textarea{ font:inherit }
[hidden]{ display:none !important }
.the{ background:#fff; border:1px solid var(--vien); border-radius:var(--bo-goc); padding:24px }
.dang-tai{ min-height:60vh; display:grid; place-items:center; color:var(--chu-mo); padding:24px; text-align:center }

/* Ô nhập liệu */
.o{ margin-top:14px }
.o label{ display:block; font-size:14px; font-weight:700; margin-bottom:6px }
.o label small{ font-weight:400; color:var(--chu-mo) }
.o input,.o select,.o textarea{ width:100%; padding:11px 12px; border:1px solid var(--vien); border-radius:10px; font-size:16px; background:var(--nen); color:var(--chu) }
.o textarea{ resize:vertical; min-height:70px }
.o input:focus,.o select:focus,.o textarea:focus{ outline:2px solid var(--xanh); border-color:transparent }
.o.loi input,.o.loi select,.o.loi textarea{ border-color:var(--do); background:var(--do-nhat) }
.o .bao-loi{ display:none; font-size:13px; color:var(--do); margin-top:4px }
.o.loi .bao-loi{ display:block }
.sao-bat-buoc{ color:var(--do) }
.hai-cot{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px }
@media (max-width:520px){ .hai-cot{ grid-template-columns:1fr } }