/* ===== HMONG CHUẨN v1.0 (18/09/2026) — bảng màu + chữ + khung dùng chung cho mọi app HMONG =====
   Nguồn: wiki/1-cong-viec/00-chung/bo-chuan-hmong/01-chuan-giao-dien-thuong-hieu.md
   Cách dùng: <link rel="stylesheet" href="hmong-chuan.css"> rồi dùng biến --navy, --vang… và lớp .hc-* bên dưới. */
:root{
  --navy:#0F4C81; --vang:#FFC72C;            /* thương hiệu, cố định mọi app */
  --nen:#F4F6FA; --the:#FFFFFF; --chu:#1A1A1A; --mo:#6B7280; --vien:#E5E7EB;
  --xanh:#16A34A; --do:#DC2626; --cam:#F59E0B;
  --nhan:var(--navy);                        /* màu nhấn riêng từng app: X #C9761F · LUS #C2242C · VIDEO #2B7FFF · MUSIC #A855F7 · LIVE #00D4FF · KHO #0EA5E9 · CHAT navy */
  --font:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --co-than:16px; --co-nut:17px; --co-phu:12px; --co-tieu-de:20px; --bam-toi-thieu:46px;
  --bo:16px; --bo-nho:12px;
}
html,body{margin:0;background:var(--nen);color:var(--chu);font:var(--co-than)/1.4 var(--font)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
button,input,textarea,select{font:inherit}
/* Thanh đầu navy */
.hc-dau{background:var(--navy);color:#fff;padding:max(12px,env(safe-area-inset-top)) 16px 12px;display:flex;align-items:center;gap:12px;min-height:60px}
.hc-dau b{font-size:19px;letter-spacing:.5px}.hc-dau .vang{color:var(--vang)}
/* Thanh tab dưới: tối đa 4 tab, không sidebar */
.hc-tab{display:flex;background:#fff;border-top:1px solid var(--vien);padding-bottom:env(safe-area-inset-bottom)}
.hc-tab button{flex:1;background:none;border:0;color:var(--mo);padding:10px 4px 8px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:var(--co-phu);cursor:pointer}
.hc-tab button .ic{font-size:24px;line-height:1}.hc-tab button.on{color:var(--navy);font-weight:700}
/* Nút */
.hc-nut{display:block;width:100%;min-height:var(--bam-toi-thieu);padding:14px;border:0;border-radius:var(--bo-nho);background:var(--navy);color:#fff;font-size:var(--co-nut);font-weight:700;cursor:pointer}
.hc-nut.vang{background:var(--vang);color:var(--navy)}.hc-nut.phu{background:#fff;color:var(--navy);border:1.5px solid var(--navy)}.hc-nut.do{background:#FEE2E2;color:#991B1B}
/* Thẻ, ô nhập */
.hc-the{background:var(--the);border-radius:var(--bo);padding:14px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.hc-o{width:100%;padding:13px 14px;border:1.5px solid var(--vien);border-radius:var(--bo-nho);background:#fff;font-size:var(--co-than);outline:none}
.hc-o:focus{border-color:var(--navy)}
/* Nhãn Mông + phụ đề Việt nhỏ: <span class="hc-2">Nkag mus<small>Đăng nhập</small></span> */
.hc-2 small{display:block;font-size:var(--co-phu);opacity:.75;font-weight:400}
/* Nhãn trạng thái */
.hc-nhan{display:inline-flex;align-items:center;gap:4px;font-size:var(--co-phu);padding:3px 8px;border-radius:999px;font-weight:600}
.hc-nhan.xanh{background:#DCFCE7;color:#166534}.hc-nhan.vang{background:#FEF3C7;color:#92400E}.hc-nhan.xanh-nhat{background:#E0F2FE;color:#075985}.hc-nhan.xam{background:#F3F4F6;color:#374151}
/* Toast lỗi 2 câu */
.hc-toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#111;color:#fff;padding:10px 16px;border-radius:999px;font-size:14px;opacity:0;transition:.2s;pointer-events:none;z-index:9;max-width:90vw;text-align:center}
.hc-toast.hien{opacity:.95}.hc-toast small{display:block;opacity:.7;font-size:var(--co-phu)}