/* Ngôn ngữ thị giác bám theo ErpMinhLo để quen mắt: màu chủ đạo #0a8f7e,
   dòng thẻ 3 HÀNG CỐ ĐỊNH (triết lý cr3 trong CLAUDE.md của repo ERP).
   Prefix `hc-` (hàng chờ) cho mọi class của màn này. */

:root {
    --main-color: #0a8f7e;
    --main-dark: #0a6c5e;
    --do: #c0392b;
    --nen: #f4f6f7;
    --the: #fff;
    --vien: #e3e8ea;
    --chu: #253238;
    --chu-mo: #6b7b83;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--nen);
    color: var(--chu);
    font: 14px/1.45 "Segoe UI", system-ui, sans-serif;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.hc-hd {
    display: flex; align-items: center; gap: 12px;
    background: var(--main-color); color: #fff;
    padding: 10px 16px;
    position: sticky; top: 0; z-index: 20;
}
.hc-hd h1 { font-size: 16px; margin: 0; font-weight: 600; }
.hc-hd .sp { margin-left: auto; display: flex; gap: 8px; }
.hc-hd button, .hc-hd a.nut {
    background: rgba(255,255,255,.16); color: #fff; border: 0;
    border-radius: 6px; padding: 6px 12px; cursor: pointer;
    font-size: 13px; text-decoration: none;
}
.hc-hd button:hover, .hc-hd a.nut:hover { background: rgba(255,255,255,.3); }

/* ── Thanh lọc ──────────────────────────────────────────────────────────── */
.hc-loc {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 16px; background: var(--the);
    border-bottom: 1px solid var(--vien);
}
.hc-loc input[type=search] {
    flex: 1; min-width: 220px; max-width: 420px;
    padding: 7px 11px; border: 1px solid var(--vien); border-radius: 6px;
    font-size: 13px;
}
.hc-loc select {
    padding: 7px 9px; border: 1px solid var(--vien); border-radius: 6px; font-size: 13px;
}
.hc-tab { display: flex; gap: 4px; }
.hc-tab a {
    padding: 6px 13px; border-radius: 6px; text-decoration: none;
    color: var(--chu-mo); font-size: 13px;
}
.hc-tab a.on { background: var(--main-color); color: #fff; font-weight: 600; }
.hc-dem { margin-left: auto; color: var(--chu-mo); font-size: 13px; }

/* ── Dòng thẻ 3 HÀNG CỐ ĐỊNH ────────────────────────────────────────────── */
.hc-ds { padding: 12px 16px 40px; display: flex; flex-direction: column; gap: 7px; }

.cr3 {
    background: var(--the); border: 1px solid var(--vien); border-left: 4px solid var(--vien);
    border-radius: 7px; padding: 8px 12px; cursor: pointer;
}
.cr3:hover { border-color: var(--main-color); box-shadow: 0 1px 6px rgba(10,143,126,.14); }

/* Hàng 1: MÃ · tiêu đề ⟷ trạng thái (thẳng mép phải tuyệt đối) */
.cr3-top { display: flex; align-items: center; gap: 8px; }
.cr3-ma { font-weight: 700; color: var(--main-dark); white-space: nowrap; }
.cr3-ti {
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 500;
}
.cr3-st {
    margin-left: auto; flex: none;
    padding: 2px 9px; border-radius: 11px; font-size: 11.5px;
    color: #fff; white-space: nowrap;
}

/* Hàng 2: khách hàng / cơ sở — MỘT DÒNG RIÊNG */
.cr3-co {
    color: var(--chu-mo); font-size: 12.5px; margin-top: 3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Hàng 3: chip trái ⟷ chip + nút phải */
.cr3-r2 { display: flex; align-items: center; gap: 6px; margin-top: 5px; flex-wrap: nowrap; }
.cr3-l, .cr3-r { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cr3-r { margin-left: auto; flex: none; }

.chip {
    font-size: 11.5px; padding: 2px 8px; border-radius: 10px;
    background: #eef2f3; color: #506065; white-space: nowrap;
}
.chip.person { background: #e8f4f2; color: var(--main-dark); }
.chip.warn { background: #fdecea; color: var(--do); }
.chip.od { background: #fdecea; color: var(--do); font-weight: 600; }

/* Thanh điểm đầy đủ — càng thấp càng thiếu thông tin */
.hc-diem { display: flex; align-items: center; gap: 6px; }
.hc-thanh { width: 46px; height: 5px; border-radius: 3px; background: #e3e8ea; overflow: hidden; }
.hc-thanh i { display: block; height: 100%; }
.hc-diem b { font-size: 11.5px; font-weight: 600; width: 22px; text-align: right; }

.cr3[data-muc="thap"]  { border-left-color: var(--do); }
.cr3[data-muc="vua"]   { border-left-color: #e6a23c; }
.cr3[data-muc="cao"]   { border-left-color: var(--main-color); }

/* ── Rỗng ───────────────────────────────────────────────────────────────── */
.hc-rong { text-align: center; padding: 60px 20px; color: var(--chu-mo); }
.hc-rong .ico { font-size: 40px; opacity: .35; }

/* ── Modal trợ giúp (nút ?) ─────────────────────────────────────────────── */
.hc-md {
    position: fixed; inset: 0; background: rgba(0,0,0,.42);
    display: none; align-items: center; justify-content: center; z-index: 60;
}
.hc-md.mo { display: flex; }
.hc-md-in {
    background: #fff; border-radius: 10px; width: min(860px, 94vw);
    max-height: 86vh; display: flex; flex-direction: column; overflow: hidden;
}
.hc-md-hd {
    background: var(--main-color); color: #fff; padding: 10px 16px;
    display: flex; align-items: center; gap: 10px;
}
.hc-md-hd .x { margin-left: auto; cursor: pointer; font-size: 20px; line-height: 1; }
.hc-md-tab { display: flex; border-bottom: 1px solid var(--vien); }
.hc-md-tab button {
    flex: 1; padding: 10px; border: 0; background: none; cursor: pointer;
    font-size: 13.5px; color: var(--chu-mo); border-bottom: 2px solid transparent;
}
.hc-md-tab button.on { color: var(--main-dark); font-weight: 600; border-bottom-color: var(--main-color); }
.hc-md-body { padding: 16px 20px; overflow: auto; }
.hc-md-body h3 { font-size: 14px; margin: 16px 0 6px; color: var(--main-dark); }
.hc-md-body h3:first-child { margin-top: 0; }
.hc-md-body li { margin: 4px 0; }
.hc-md-body code {
    background: #eef2f3; padding: 1px 5px; border-radius: 4px; font-size: 12.5px;
}
.hc-md-pane { display: none; }
.hc-md-pane.on { display: block; }

/* ── Trang đăng nhập / đổi mật khẩu ─────────────────────────────────────────
   Dùng LẠI đúng ngôn ngữ của màn Hàng chờ, không dựng phong cách riêng: nền xám
   nhạt `--nen`, thẻ trắng viền mảnh, thanh tiêu đề xanh phẳng y như `.hc-hd`, bo
   6-7px. Trang đăng nhập là thứ ĐẦU TIÊN người dùng thấy — nếu nó trông như một
   ứng dụng khác thì cả hệ mất cảm giác liền mạch ngay từ giây đầu. */

.dn-body {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: 24px;
    background: var(--nen);            /* dự phòng nếu thiếu class */
}

/* Ba nền để chọn — đổi bằng TLA_NEN_DANGNHAP trong .env, không phải sửa mã.
   Thẻ đăng nhập giữ NGUYÊN thiết kế ở cả ba: cùng thanh tiêu đề xanh phẳng, cùng
   độ bo, cùng cỡ chữ với màn Hàng chờ. Chỉ đổi mặt nền phía sau. Nhờ vậy chọn nền
   nào cũng không phá tính liền mạch — nền là gu, còn bộ phận là hệ thống. */

/* Mặc định: xanh rất nhạt. Giữ được cảm giác dịu mắt của nền xanh mà không tương
   phản gắt với thẻ trắng như nền xanh đậm, cũng không phẳng lì như nền xám. */
.dn-body.nen-xanh-diu {
    background: linear-gradient(165deg, #eaf5f3 0%, #dcece9 55%, #d2e6e1 100%);
}

/* Xám: liền mạch tuyệt đối với màn Hàng chờ (cùng --nen). */
.dn-body.nen-xam { background: var(--nen); }

/* Xanh đậm: bản đầu tiên, tương phản mạnh nhất. */
.dn-body.nen-xanh-dam {
    background: linear-gradient(140deg, var(--main-color), var(--main-dark));
}
/* Trên nền đậm, viền thẻ chìm đi nên tăng bóng để thẻ vẫn tách khỏi nền. */
.dn-body.nen-xanh-dam .dn-hop {
    border-color: transparent; box-shadow: 0 10px 34px rgba(0,0,0,.2);
}

.dn-hop {
    width: min(390px, 100%);
    background: var(--the);
    border: 1px solid var(--vien); border-radius: 8px;
    box-shadow: 0 2px 10px rgba(37,50,56,.07);
    overflow: hidden;                    /* để thanh tiêu đề bo theo thẻ */
}

/* Thanh tiêu đề — cùng công thức với .hc-hd */
.dn-dau {
    display: flex; align-items: center; gap: 10px;
    background: var(--main-color); color: #fff;
    padding: 11px 16px;
}
.dn-ico { font-size: 19px; line-height: 1; }
.dn-dau h1 { font-size: 15.5px; margin: 0; font-weight: 600; letter-spacing: .1px; }

.dn-than { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 14px; }
.dn-mo { margin: 0; color: var(--chu-mo); font-size: 12.5px; line-height: 1.5; }

.dn-hop label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; }
.dn-hop label span { color: var(--chu-mo); font-weight: 600; }
.dn-hop label i { font-weight: 400; font-style: normal; opacity: .8; }
.dn-hop input {
    padding: 9px 11px; border: 1px solid var(--vien); border-radius: 6px;
    font-size: 14px; font-family: inherit; color: var(--chu);
}
.dn-hop input:focus {
    outline: none; border-color: var(--main-color);
    box-shadow: 0 0 0 3px rgba(10,143,126,.13);
}

.dn-hop button, .dn-nut {
    margin-top: 2px; padding: 10px; border: 0; border-radius: 6px;
    background: var(--main-color); color: #fff; font-size: 14px; font-weight: 600;
    cursor: pointer; text-align: center; text-decoration: none; font-family: inherit;
    display: block;
}
.dn-hop button:hover, .dn-nut:hover { background: var(--main-dark); }

.dn-bo {
    text-align: center; font-size: 12.5px; color: var(--chu-mo); text-decoration: none;
}
.dn-bo:hover { color: var(--main-dark); text-decoration: underline; }

.dn-loi {
    background: #fdecea; color: var(--do); border: 1px solid #f5c6c2;
    padding: 8px 11px; border-radius: 6px; font-size: 12.5px;
}
.dn-ok {
    background: #e8f4f2; color: var(--main-dark); border: 1px solid #bfe0da;
    padding: 8px 11px; border-radius: 6px; font-size: 12.5px;
}

/* Dòng chân thẻ — địa chỉ hệ, để biết đang đứng ở đâu */
.dn-chan {
    border-top: 1px solid var(--vien); padding: 9px 16px;
    font-size: 11.5px; color: var(--chu-mo); text-align: center; background: #fafbfb;
}

/* Chip người dùng + đăng xuất trên header màn Hàng chờ */
.hc-hd .nd {
    font-size: 12.5px; opacity: .92;
    padding: 5px 10px; border-radius: 6px; background: rgba(255,255,255,.13);
}