/* ===== Nen: chep tu license.giauco.vn (app/static/style.css) de hai trang cung mot
   ngon ngu thiet ke. Sua tong mau thi sua ca hai. Phan rieng cua trang nay nam o
   cuoi tep, sau dong ===== RIENG TRANG ADS =====                                 */
/* Trang quản trị giấy phép — nền trắng + accent xanh ngọc, cùng tông với app.giauco.vn.
   Không đóng kèm font: trang này chỉ Giang dùng, dùng font hệ điều hành cho nhẹ. */

:root {
  --bg: #ffffff; --nen-2: #f5f5f5; --nen-3: #ebebeb;
  --vien: #dedede; --vien-2: #cacaca;
  --chu: #10171a; --chu-2: #485559; --chu-3: #727e82;
  --xanh: #00a49d; --xanh-dam: #008c89; --xanh-nhat: #d5f6f4;
  --ok: #20a04e; --ok-nhat: #def8e2;
  --cam: #c97f00; --cam-nhat: #fff0cc;
  --do: #db0003; --do-nhat: #ffebe7;
  --tim: #6a4fb6; --tim-nhat: #ece7fb;   /* riêng cho "chỉ để tải" — không lẫn trạng thái nào */
  --r: 8px; --r-nho: 6px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--chu); font: 14px/1.55 var(--font); }
h1 { font-size: 21px; margin: 0; }
h2 { font-size: 15px; margin: 0 0 12px; }
a { color: var(--xanh); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--mono); font-size: 12.8px; }
.mut { color: var(--chu-3); font-size: 12.6px; font-weight: 400; }
.nho { font-size: 12px; }
.so { font-variant-numeric: tabular-nums; }

/* ---- khung: thanh bên trái + phần nội dung ---- */
/* Thanh ngang cũ ăn hết một dải ngang màn hình chỉ để chứa hai đường dẫn. Thanh bên đứng
   yên khi cuộn, và còn chỗ cho các mục sau này. */
.ray {
  position: fixed; left: 0; top: 0; bottom: 0; width: 186px; z-index: 10;
  display: flex; flex-direction: column; gap: 4px; padding: 16px 12px;
  background: var(--nen-2); border-right: 1px solid var(--vien);
}
.ray .hieu {
  display: block; padding: 4px 10px 14px; color: var(--chu);
  font-weight: 700; font-size: 15px; line-height: 1.25;
}
.ray .hieu:hover { text-decoration: none; }
.ray .hieu .mut { display: block; font-weight: 400; }
.ray nav { display: flex; flex-direction: column; gap: 2px; }
.ray nav a {
  padding: 8px 11px; border-radius: var(--r-nho);
  color: var(--chu-2); font-size: 13.6px; font-weight: 600;
}
.ray nav a:hover { background: var(--nen-3); color: var(--chu); text-decoration: none; }
.ray nav a.dang { background: var(--xanh-nhat); color: var(--xanh-dam); }
.cuoi-ray { margin-top: auto; }

/* Trai het man: bang 32 nha ma bo trong 1060px thi nua man phai bo khong.
   Van xuoi khong chay theo — .doan-nhan-dinh tu gioi han 68ch de con doc duoc. */
.khung { max-width: none; margin: 0; padding: 22px 24px 60px; }
.khung.rong { padding-left: 16px; padding-right: 16px; }
body.co-ray > main { margin-left: 186px; }
.giua { max-width: 420px; margin: 8vh auto; padding: 0 20px; }

/* ---- dải tiêu đề đầu mỗi trang ---- */
/* Tên trang + một dòng nói trang này làm gì + nút việc chính bên phải. Trước chỉ có mỗi
   dòng h1 trơ trọi, mở trang lên không biết đang ở đâu và làm được gì tiếp. */
.dau-trang {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
  padding-bottom: 13px; border-bottom: 1px solid var(--vien);
}
.dau-trang .phu-de { margin: 5px 0 0; font-size: 12.8px; color: var(--chu-3); }
.dau-trang .ben-trai { min-width: 0; }
/* Nút phụ (quay lại) không được hút mắt bằng nút việc chính. */
.nut.nhat-nut { color: var(--chu-2); background: var(--bg); border-color: var(--vien-2); }
.nut.nhat-nut:hover { background: var(--nen-2); color: var(--chu); }

/* ---- khối ---- */
.the {
  border: 1px solid var(--vien); border-radius: var(--r); background: var(--bg);
  padding: 16px 18px; margin-bottom: 16px;
}
.the.hep { padding: 24px; }
.the > summary { cursor: pointer; list-style: none; }
.the > summary::-webkit-details-marker { display: none; }
.the > summary::before { content: "▸ "; color: var(--chu-3); }
.the[open] > summary::before { content: "▾ "; }
.the > summary + * { margin-top: 16px; }
.trong { border: 1px dashed var(--vien-2); border-radius: var(--r); padding: 28px;
         text-align: center; color: var(--chu-3); }
.lui { display: inline-block; margin-bottom: 12px; font-size: 13px; }

/* ---- form ---- */
label { display: block; font-size: 12.6px; color: var(--chu-2); margin-bottom: 4px; }
input[type=text], input[type=password], input[type=number], input[type=date],
input[type=search], select {
  width: 100%; padding: 8px 10px; font: 14px var(--font); color: var(--chu);
  background: var(--bg); border: 1px solid var(--vien-2); border-radius: var(--r-nho);
}
input:focus, select:focus { outline: none; border-color: var(--xanh);
                            box-shadow: 0 0 0 3px var(--xanh-nhat); }
.luoi-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.luoi-form .rong-o { grid-column: 1 / -1; }
.luoi-form .hep-o { max-width: 240px; }
.tick { display: flex; align-items: center; gap: 8px; padding: 7px 10px; margin-top: 6px;
        border: 1px solid var(--vien); border-radius: var(--r-nho); cursor: pointer; }
.tick:has(input:checked) { border-color: var(--xanh); background: var(--xanh-nhat); }
.tick input { width: auto; accent-color: var(--xanh); margin: 0; }
/* Ô "Mã chỉ để tải" tô màu khác hẳn ô chọn module để không tick nhầm khi phát mã bán. */
.tick.tick-tai:has(input:checked) { border-color: var(--tim); background: var(--tim-nhat); }
.tick.tick-tai input { accent-color: var(--tim); }
/* Tick "chỉ để tải" thì làm mờ + khoá khối chọn phần cho khỏi mâu thuẫn. Đây chỉ là chỉ dấu
   nhìn thấy được — máy chủ vẫn bỏ qua module đã tick nên không dựa vào CSS để đúng luật. */
.luoi-form:has(.o-chi-tai input:checked) .o-phan-ban { opacity: .42; pointer-events: none; }
/* Một dòng cho mỗi phần bán: tick/tên + ô ngày hết hạn + mấy nút hẹn nhanh. Cho xuống dòng
   được vì màn hẹp thì 3 nút hẹn giờ không đủ chỗ nằm cùng hàng với tên phần. */
.phan-dong { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 6px; }
.phan-dong .tick { flex: 1 1 260px; margin: 0; }
.phan-dong input[type="date"] { width: auto; }

/* Bốn ô lọc + ô tìm: cho xuống dòng khi màn hẹp, không thì ô tìm bị bóp còn một mẩu. */
.hang-loc { display: flex; gap: 9px; margin: 16px 0 12px; flex-wrap: wrap; }
.hang-loc input { flex: 1 1 240px; }
.hang-loc select { max-width: 168px; }
/* Nhắc đang lọc — mở lại trang thấy ít mã hẳn đi mà không biết vì sao là hoảng. */
.go-loc { margin-left: 10px; background: var(--cam-nhat); color: var(--cam);
          font-size: 11.6px; vertical-align: middle; }
.go-loc:hover { background: var(--cam); color: #fff; text-decoration: none; }
.hang-nut { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.gon { display: inline; margin: 0; }

button, .nut {
  display: inline-block; padding: 8px 14px; font: 600 13.5px var(--font); cursor: pointer;
  color: #fff; background: var(--xanh); border: 1px solid var(--xanh);
  border-radius: var(--r-nho);
}
button:hover, .nut:hover { background: var(--xanh-dam); text-decoration: none; }
button.nhat { color: var(--chu-2); background: var(--bg); border-color: var(--vien-2); }
button.nhat:hover { background: var(--nen-2); color: var(--chu); }
button.nguy { color: var(--do); background: var(--bg); border-color: var(--vien-2); }
button.nguy:hover { background: var(--do-nhat); border-color: var(--do); }
button.rong { width: 100%; margin-top: 14px; }

/* Nút chép mã — nhãn tự đổi thành "✓ Đã chép" 1,5 giây (static/sao-chep.js) */
button.chep { margin-left: 8px; padding: 5px 11px; font-size: 12.6px; vertical-align: middle; }
button.chep-nho { margin-left: 6px; padding: 2px 7px; font-size: 11.4px; }
button.chep.xong { color: var(--ok); background: var(--ok-nhat); border-color: var(--ok); }

/* ---- báo ---- */
.bao { padding: 11px 13px; border-radius: var(--r-nho); margin-bottom: 14px; font-size: 13.2px; }
.bao.xanh { background: var(--ok-nhat); border: 1px solid var(--ok); color: var(--ok); }
.bao.do { background: var(--do-nhat); border: 1px solid var(--do); color: var(--do); }

/* ---- bảng ---- */
.cuon { overflow-x: auto; }
.bang { width: 100%; border-collapse: collapse; font-size: 13.3px; }
.bang.nho { font-size: 12.4px; }
.bang th {
  text-align: left; padding: 9px 11px; font: 600 12px var(--font); letter-spacing: .04em;
  text-transform: uppercase; color: var(--chu-3);
  background: var(--nen-2); border-bottom: 1px solid var(--vien);
}
.bang td { padding: 10px 11px; border-bottom: 1px solid var(--vien); vertical-align: top; }
.bang td.o-ma { white-space: nowrap; }
.bang-nhap td.o-khach { white-space: normal; }
.bang .o-stt { width: 34px; padding-right: 4px; text-align: right; color: var(--chu-3); }
.bang tbody tr[onclick] { cursor: pointer; }
.bang tbody tr[onclick]:hover td { background: var(--nen-2); }

/* ---- nhãn ---- */
.v { display: inline-block; padding: 3px 8px; border-radius: 999px; font: 600 11.6px var(--font);
     background: var(--nen-3); color: var(--chu-2); white-space: nowrap; }
.v.xanh { background: var(--ok-nhat); color: var(--ok); }
.v.cam  { background: var(--cam-nhat); color: var(--cam); }
.v.do   { background: var(--do-nhat); color: var(--do); }
.v.tai  { background: var(--tim-nhat); color: var(--tim); }
.the-nho { display: inline-block; padding: 2px 7px; margin: 1px 3px 1px 0; border-radius: var(--r-nho);
           background: var(--xanh-nhat); color: var(--xanh-dam); font: 600 11.6px var(--mono); }
/* Mỗi phần bán một màu — hai chip cùng màu thì phải đọc chữ mới biết mã này bán phần nào.
   Phần mới thêm sau chưa có màu riêng thì rơi về màu xanh mặc định ở trên, không vỡ gì. */
.the-nho[data-phan="bocsub"]    { background: var(--tim-nhat); color: var(--tim); }
.the-nho[data-phan="editvideo"] { background: var(--xanh-nhat); color: var(--xanh-dam); }
/* Bảng danh sách: mỗi phần đã bán một dòng riêng, kèm hạn của chính nó — hai phần bán
   hạn khác nhau nên gộp một dòng là không nói được cái nào hết ngày nào. */
.dong-phan { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dong-phan + .dong-phan { margin-top: 4px; }
/* Chip tên phần rộng bằng nhau để cột ngày của hai dòng thẳng hàng — lệch nhau thì phải
   dò từng dòng mới biết phần nào hết ngày nào. */
.dong-phan .the-nho { margin: 0; min-width: 58px; text-align: center; }
/* Trong bảng thì KHÔNG cho xuống dòng: trang đã trải hết màn, để nó gãy là mỗi phần chiếm
   hai dòng, dòng cao gấp đôi mà chẳng thêm chữ nào. */
.bang-nhap .dong-phan { flex-wrap: nowrap; white-space: nowrap; }
.bang-nhap .dong-phan:only-child .the-nho { min-width: 0; }

.ma-lon { display: inline-block; padding: 6px 12px; border-radius: var(--r-nho);
          background: var(--nen-2); border: 1px solid var(--vien);
          font: 700 16px var(--mono); letter-spacing: .06em; user-select: all; }
.dau-ma { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---- màn Tổng quan ---- */
/* Học lối trình bày của app.giauco.vn: thẻ có viền màu ở trên, nhãn chữ nhỏ in hoa, số to,
   dòng phụ nói thêm — và THẺ NÀO CŨNG BẤM ĐƯỢC, sang thẳng bảng đã lọc đúng nhóm. Nhìn
   thấy con số lạ là mở ra xem ngay, không phải tự dựng lại bộ lọc. */
.luoi-the { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
            margin-bottom: 16px; }
.luoi-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.the-so {
  position: relative; overflow: hidden; display: block;
  padding: 14px 16px 13px; border: 1px solid var(--vien); border-radius: var(--r);
  background: var(--bg); color: var(--chu);
}
.the-so::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px;
                  background: var(--net, var(--xanh)); }
a.the-so:hover { border-color: var(--net, var(--xanh)); text-decoration: none;
                 box-shadow: 0 1px 6px rgba(0,0,0,.07); }
.the-so .nhan { display: block; font: 600 12px var(--font); letter-spacing: .05em;
                text-transform: uppercase; color: var(--chu-3); }
.the-so .con-so { display: block; margin: 5px 0 3px; font-size: 24px; line-height: 1.15;
                  font-variant-numeric: tabular-nums; color: var(--net, var(--chu)); }
.the-so .con-so .dv { font-size: 14px; font-weight: 600; opacity: .65; }
.the-so .phu { display: block; font-size: 12.2px; color: var(--chu-3); }
a.phu:hover { color: var(--xanh-dam); }
.the-so.mau-ok   { --net: var(--ok); }
.the-so.mau-xanh { --net: var(--xanh); }
.the-so.mau-cam  { --net: var(--cam); }
.the-so.mau-tim  { --net: var(--tim); }
.the-so.mau-xam  { --net: var(--vien-2); }
.the-so.mau-xam .con-so { color: var(--chu); }

.dau-khoi { display: flex; align-items: baseline; justify-content: space-between;
            gap: 10px; margin-bottom: 12px; }
.dau-khoi h2 { margin: 0; }

.luoi-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
          margin-bottom: 12px; }

/* Biểu đồ tròn vẽ bằng SVG thuần — không kéo thư viện biểu đồ vào một trang tĩnh.
   Chu vi đúng 100 (r=15.9155) nên dasharray nhận thẳng phần trăm. */
.khoi-vong { display: flex; align-items: center; gap: 14px; }
.vong { flex: 0 0 96px; width: 96px; height: 96px; transform: rotate(-90deg); }
.vong circle { fill: none; stroke-width: 5.2; }
.vong .nen { stroke: var(--nen-3); }
.vong .mieng { transition: stroke-width .12s; }
.vong .mieng:hover { stroke-width: 6.4; }
.vong .mieng.ok { stroke: var(--ok); } .vong .mieng.cam { stroke: var(--cam); }
.vong .mieng.xanh { stroke: var(--xanh); } .vong .mieng.tim { stroke: var(--tim); }
.vong .mieng.xam { stroke: var(--vien-2); }
.vong .mieng.do { stroke: var(--do); }
/* Chữ giữa vòng phải xoay ngược lại — cả thẻ svg đã xoay -90° để đoạn đầu bắt từ 12 giờ. */
.vong text { transform: rotate(90deg); transform-origin: 21px 21px;
             text-anchor: middle; fill: var(--chu); }
.vong .giua-vong { font: 700 9px var(--font); }
.vong .duoi-vong { font: 400 3.4px var(--font); fill: var(--chu-3);
                   letter-spacing: .06em; text-transform: uppercase; }

/* Chú thích xếp dọc bên phải vòng: nhãn · số · phần trăm. */
.chu-thich.doc { flex-direction: column; gap: 5px; margin-top: 0; font-size: 12.2px; }
/* gap 8px: không có nó thì nhãn dài dính liền vào con số — "Đã mở app42 68%". */
.chu-thich.doc a, .chu-thich.doc span { display: flex; align-items: center; gap: 8px;
                                        width: 100%; white-space: nowrap; }
.chu-thich.doc b { margin-left: auto; font-variant-numeric: tabular-nums; }
.chu-thich.doc em { min-width: 34px; text-align: right; font-style: normal;
                    color: var(--chu-3); font-size: 11.4px; }

/* Một thanh chia tỉ lệ thay cho ba con số rời — nhìn phát biết nhóm nào chiếm bao nhiêu. */
.thanh-ty-le { display: flex; height: 12px; border-radius: 999px; overflow: hidden;
               background: var(--nen-3); }
.thanh-ty-le .doan { display: block; transition: filter .15s; }
.thanh-ty-le .doan:hover { filter: brightness(.88); }
.doan.ok { background: var(--ok); } .doan.cam { background: var(--cam); }
.doan.xanh { background: var(--xanh); } .doan.tim { background: var(--tim); }
.doan.xam { background: var(--vien-2); }
.chu-thich { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 11px; font-size: 12.6px; }
.chu-thich a { color: var(--chu-2); }
.chu-thich a:hover { color: var(--xanh-dam); text-decoration: none; }
.chu-thich b { margin-left: 4px; font-variant-numeric: tabular-nums; }
.cham { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 3px;
        vertical-align: baseline; }
.cham.ok { background: var(--ok); } .cham.cam { background: var(--cam); }
.cham.xanh { background: var(--xanh); } .cham.tim { background: var(--tim); }
.cham.xam { background: var(--vien-2); }
.cham.do { background: var(--do); }

/* Cột vẽ bằng chiều cao phần trăm — một trang tĩnh không đáng kéo cả thư viện biểu đồ. */
.bieu-cot { display: flex; align-items: flex-end; gap: 10px; height: 132px; }
.bieu-cot .cot { flex: 1; display: flex; flex-direction: column; align-items: center;
                 justify-content: flex-end; height: 100%; color: inherit;
                 border-radius: var(--r-nho); }
/* Cột bấm được: sáng nền lên khi rê để biết là bấm được, chứ chữ đừng gạch chân. */
.bieu-cot a.cot:hover { background: var(--nen-2); text-decoration: none; }
.bieu-cot a.cot:hover .nhan-cot { color: var(--xanh-dam); }
.bieu-cot .tri { font: 600 11.4px var(--font); color: var(--chu-2); margin-bottom: 3px;
                 font-variant-numeric: tabular-nums; min-height: 15px; }
.bieu-cot .thanh { width: 100%; max-width: 46px; min-height: 2px; border-radius: 4px 4px 0 0; }
.bieu-cot .thanh.ok { background: var(--ok); } .bieu-cot .thanh.xanh { background: var(--xanh); }
.bieu-cot .nhan-cot { margin-top: 6px; font-size: 11.4px; color: var(--chu-3); }

/* Hàng "còn phải làm" — mỗi việc một ô bấm sang đúng danh sách. */
.hang-viec { display: flex; flex-wrap: wrap; gap: 9px; }
.hang-viec a { padding: 8px 12px; border-radius: var(--r-nho); font-size: 12.8px;
               background: var(--cam-nhat); color: var(--cam); }
.hang-viec a:hover { background: var(--cam); color: #fff; text-decoration: none; }
.hang-viec a b { font-size: 14.6px; margin-right: 3px; font-variant-numeric: tabular-nums; }
.hang-viec.nhat a { background: var(--nen-2); color: var(--chu-2); }
.hang-viec.nhat a:hover { background: var(--nen-3); color: var(--chu); }

/* Số điện thoại phải nổi hơn email: đây là chỗ gọi khách, email chỉ để lưu. */
.bang .sdt { font-size: 13px; color: var(--chu-2); font-weight: 600; }
.bang td.tien { white-space: nowrap; font-weight: 600; }

/* Nút trông như cái nhãn trạng thái — bấm ngay trong bảng, không phải mở trang chi tiết.
   Dùng cho cột Bàn giao: đánh dấu và gỡ đánh dấu cùng một chỗ. */
.v-nut {
  padding: 4px 10px; border-radius: 999px; font: 600 11.6px var(--font); white-space: nowrap;
  color: var(--chu-2); background: var(--nen-3); border: 1px solid var(--vien-2);
}
.v-nut:hover { color: var(--chu); background: var(--vien); }
.v-nut.xong { color: var(--ok); background: var(--ok-nhat); border-color: var(--ok); }
.v-nut.xong:hover { background: var(--ok); color: #fff; }

/* Hàng Lưu ở đầu form sửa — gạch chân để tách khỏi các ô nhập bên dưới. */
.hang-luu { display: flex; align-items: center; gap: 12px;
            padding-bottom: 13px; border-bottom: 1px solid var(--vien); }

/* ---- bảng điền được ---- */
/* Ô nhập trong bảng: viền mờ để bảng không thành cái lưới kẻ ô, rõ lên khi trỏ vào. */
.o-bang {
  width: 100%; min-width: 96px; padding: 6px 7px; font: 12.8px var(--font);
  background: var(--bg); border: 1px solid var(--vien); border-radius: var(--r-nho);
}
.o-bang:hover { border-color: var(--vien-2); }
/* Ô tự lưu khi rời ô, nên PHẢI nói rõ đang lưu / đã lưu / hỏng — không có dấu hiệu thì
   lưu hụt vì rớt mạng cũng chẳng ai biết, gõ cả buổi coi như mất. */
.o-bang.dang-luu { border-color: var(--xanh); background: var(--xanh-nhat); }
.o-bang.da-luu { border-color: var(--ok); background: var(--ok-nhat); }
.o-bang.loi-luu { border-color: var(--do); background: var(--do-nhat); color: var(--do); }
/* Ô đã có chữ đậm hơn ô trống: lướt mắt biết ngay còn ai chưa điền. */
.o-bang:not(:placeholder-shown) { border-color: var(--vien-2); font-weight: 600; }
.o-bang::placeholder { color: #b6bfc2; }
/* Số điện thoại 10 số và số tiền 7 chữ số đều ngắn — trước để rộng bằng cột chữ, chiếm
   chỗ của cột Ghi chú vốn mới là chỗ cần rộng. */
.o-bang.o-sdt { min-width: 100px; }
.o-bang.o-tien { min-width: 92px; text-align: right; font-weight: 600; }
/* Ghi chú là câu chữ, cần rộng hơn mấy ô số — cho nó ăn phần chỗ trống của cột trạng thái. */
.bang .o-ghi { min-width: 118px; }
.bang .o-kh { white-space: nowrap; }
.bang .o-ghi .o-bang { font-weight: 400; }
/* Bảng điền có 11 cột — chữ nhỏ hơn một nấc để vừa màn laptop, khỏi phải kéo ngang. */
.bang-nhap { font-size: 12.6px; }

/* ---- đóng băng hàng tiêu đề + ba cột đầu (kiểu Excel) ----
   Cuộn 65 dòng mà mất tên cột thì phải đếm ô mới biết đang điền cột nào; kéo ngang mà mất
   cột Mã/Khách thì không biết đang điền cho ai. Bảng cuộn TRONG khung `.cuon` chứ không
   theo cả trang — sticky chỉ bám được vào khung có thanh cuộn của chính nó. */
.cuon-bang { max-height: calc(100vh - 168px); overflow: auto; }
.bang-nhap thead th { position: sticky; top: 0; z-index: 3; }
/* Bề ngang ba cột đầu phải CỐ ĐỊNH: mốc `left` bên dưới cộng tay từ mấy số này, để bảng tự
   co giãn là các cột chồng lên nhau. */
.bang-nhap .o-stt   { width: 34px;  min-width: 34px; }
.bang-nhap .o-ma    { width: 190px; min-width: 190px; }
.bang-nhap .o-khach { width: 112px; min-width: 112px; }
.bang-nhap .o-stt, .bang-nhap .o-ma, .bang-nhap .o-khach {
  position: sticky; z-index: 2; background: var(--bg);
}
.bang-nhap .o-stt   { left: 0; }
.bang-nhap .o-ma    { left: 34px; }
.bang-nhap .o-khach { left: 224px; border-right: 1px solid var(--vien); }
/* Ô vừa dính trên vừa dính trái phải nằm trên cùng, không thì nội dung chui lên che nó. */
.bang-nhap thead th.o-stt, .bang-nhap thead th.o-ma, .bang-nhap thead th.o-khach {
  z-index: 4; background: var(--nen-2);
}
/* Ô dính có nền riêng nên không ăn theo nền hàng — phải tô lại lúc rê chuột, không thì
   rê tới đâu ba cột đầu vẫn trắng, nhìn như hai bảng rời. */
.bang-nhap tbody tr:hover td { background: var(--nen-2); }
.bang-nhap td { vertical-align: middle; }
.bang-nhap td, .bang-nhap th { padding-left: 7px; padding-right: 7px; }
.bang-nhap td.o-ma { vertical-align: top; }

/* Ô chọn chặng bàn giao tự đổi màu theo chặng — lướt mắt là thấy ai còn treo. */
.chon-giao { min-width: 102px; padding: 6px 8px; font: 600 12.6px var(--font); }
.chon-loai { min-width: 94px; padding: 6px 8px; font: 600 12.6px var(--font); }
/* Ba loại ba màu: lướt bảng là biết dòng nào là khách trả tiền thật. */
.chon-loai:has(option[value="nhan_su"]:checked) {
  background: var(--tim-nhat); color: var(--tim); border-color: var(--tim); }
.chon-loai:has(option[value="tang"]:checked) {
  background: var(--cam-nhat); color: var(--cam); border-color: var(--cam); }
.chon-loai:has(option[value="khach"]:checked) {
  background: var(--xanh-nhat); color: var(--xanh-dam); border-color: var(--xanh); }
.chon-giao:has(option[value="da_gui"]:checked) {
  background: var(--cam-nhat); color: var(--cam); border-color: var(--cam); }
.chon-giao:has(option[value="xong"]:checked) {
  background: var(--ok-nhat); color: var(--ok); border-color: var(--ok); }

/* ---- form chia khối (màn Cấp mã) ---- */
/* Mười mấy ô nhập giống hệt nhau xếp liền một dãy thì lúc phát nhanh rất dễ nhảy cóc.
   Chia theo VIỆC, mỗi khối một màu và một cái tên — mắt bám được chỗ đang điền. */
.form-nhom { display: flex; flex-direction: column; gap: 12px; }
.nhom {
  position: relative; padding: 15px 16px 16px;
  border: 1px solid var(--vien); border-left: 3px solid var(--net, var(--xanh));
  border-radius: var(--r); background: var(--bg);
}
.ten-nhom {
  display: block; margin-bottom: 11px;
  font: 700 11px var(--font); letter-spacing: .06em; text-transform: uppercase;
  color: var(--net, var(--xanh));
}
.nhom-xanh { --net: var(--xanh); }
.nhom-ok   { --net: var(--ok); }
.nhom-tim  { --net: var(--tim); }
.nhom-cam  { --net: var(--cam); }
.nhom-xam  { --net: var(--vien-2); }
.nhom-xam .ten-nhom { color: var(--chu-3); }
button.to { padding: 11px 26px; font-size: 14.5px; }

/* ---- tab (trang chi tiết một mã) ---- */
.tab-nav {
  display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: 14px;
  border-bottom: 1px solid var(--vien);
}
.tab-nut {
  padding: 9px 14px; margin-bottom: -1px; border-radius: var(--r-nho) var(--r-nho) 0 0;
  color: var(--chu-2); background: transparent; border: 1px solid transparent;
  font: 600 13.4px var(--font);
}
.tab-nut:hover { background: var(--nen-2); color: var(--chu); }
.tab-nut.dang {
  color: var(--xanh-dam); background: var(--bg);
  border-color: var(--vien); border-bottom-color: var(--bg);
}
.tab-nut .dem {
  display: inline-block; min-width: 18px; padding: 1px 5px; margin-left: 5px;
  border-radius: 999px; background: var(--nen-3); color: var(--chu-2);
  font: 600 11.4px var(--font); text-align: center;
}
/* Tab ẩn phải là display:none chứ không phải [hidden] — khối con đặt display riêng sẽ
   thắng thuộc tính đó, tab "ẩn" vẫn hiện nguyên. */
.tab { display: none; }
.tab.hien { display: block; }

/* Bảng xếp hạng khách dùng nhiều — thanh ngang XẾP CHỒNG hai màu (dựng video + bóc sub),
   vẽ bằng CSS thuần như mọi biểu đồ khác trong dự án. Bề rộng tính theo người đứng đầu, số
   đo dựng sẵn ở so_sach.xep_hang. */
.xep-hang { display: flex; flex-direction: column; gap: 1px; }
.xep-hang .hang { display: flex; align-items: center; gap: 10px; padding: 6px 8px;
                  border-radius: var(--r-nho); color: inherit; }
.xep-hang a.hang:hover { background: var(--nen-2); text-decoration: none; }
.xep-hang a.hang:hover .ten { color: var(--xanh-dam); }
.xep-hang .ten { width: 176px; flex: none; font-size: 12.8px; color: var(--chu);
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xep-hang .ranh { flex: 1; display: flex; height: 15px; min-width: 40px;
                  background: var(--nen-2); border-radius: 4px; overflow: hidden; }
.xep-hang .phan { height: 100%; }
.xep-hang .phan.xanh { background: var(--xanh); }
.xep-hang .phan.tim { background: var(--tim); }
.xep-hang .tri { width: 40px; flex: none; text-align: right; font-size: 12.8px;
                 font-weight: 600; font-variant-numeric: tabular-nums; }
.xep-hang .lau { width: 92px; flex: none; text-align: right; font-size: 11.6px;
                 color: var(--chu-3); }


/* ================= RIENG TRANG ADS =================
   Khach mo bang dien thoai la chinh, nen moi thu o day phai chiu duoc man hep. */

/* Bo chon ky: hom qua / 7 ngay / 30 ngay. Trong nhu tab nho, dat ben phai tieu de. */
.chon-ky { display: flex; gap: 2px; flex-wrap: wrap; }
.chon-ky a {
  padding: 7px 13px; border-radius: var(--r-nho);
  font: 600 13.2px var(--font); color: var(--chu-2); background: var(--nen-2);
}
.chon-ky a:hover { background: var(--nen-3); color: var(--chu); text-decoration: none; }
.chon-ky a.dang { background: var(--xanh); color: #fff; }

/* Cot so trong bang: can phai + chu so deu be ngang de cot tien thang hang. */
.bang th.p, .bang td.p { text-align: right; white-space: nowrap;
                         font-variant-numeric: tabular-nums; }
/* Ten bai la mot cau — cot duy nhat duoc phep xuong dong, va cho no an phan lon be ngang. */
.bang td.o-bai { white-space: normal; min-width: 190px; line-height: 1.4; }

.nut-nho { padding: 5px 11px; font-size: 12.4px; white-space: nowrap; }

/* Nhan dinh la mot doan van dai — dong qua rong thi mat dong khi doc. */
.doan-nhan-dinh { max-width: 68ch; font-size: 14px; line-height: 1.65; color: var(--chu-2); }
.doan-nhan-dinh p { margin: 0 0 11px; }
.doan-nhan-dinh p:last-child { margin-bottom: 0; }

.chan { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--vien); }

/* Bieu do 30 cot khong vua man dien thoai -> cho cuon ngang trong khung .cuon,
   dat min-width theo so ngay (tinh trong template) chu khong bop cot lai. */
.bieu-cot .cot { min-width: 26px; }
.bieu-cot .thanh { max-width: 26px; }


/* --- pheu: nguoi thay -> bam -> nhan tin --- */
/* Ba bac ke nhau, be ngang theo TY LE SO NGUOI. Bac duoi thuong be xiu (tin nhan / nguoi
   thay ~ 0,3%) nen ep toi thieu 1,5% de van nhin thay cai thanh. */
.pheu { display: flex; flex-direction: column; gap: 8px; }
.pheu .bac { display: flex; align-items: center; gap: 10px; }
.pheu .ten-bac { width: 150px; flex: none; font-size: 12.8px; color: var(--chu-2); }
.pheu .ranh-bac { flex: 1; min-width: 40px; height: 20px; border-radius: 4px;
                  background: var(--nen-2); overflow: hidden; }
.pheu .doan { display: block; height: 100%; border-radius: 4px; }
.pheu .doan.xanh { background: var(--xanh); }
.pheu .doan.ok   { background: var(--ok); }
.pheu .doan.cam  { background: var(--cam); }
.pheu .so-bac { width: 78px; flex: none; text-align: right; font-weight: 600;
                font-variant-numeric: tabular-nums; }
.pheu .ty-bac { width: 52px; flex: none; text-align: right; font-size: 12px;
                color: var(--chu-3); font-variant-numeric: tabular-nums; }

/* Hang tong o chan bang chi tiet */
.bang tfoot td { border-top: 2px solid var(--vien-2); border-bottom: none;
                 padding-top: 11px; background: var(--nen-2); }

/* Ten bai trong thanh xep hang: cat bang dau … chu khong cho xuong dong,
   khong thi moi hang mot chieu cao khac nhau, nhin nhu rang cua. */
.xep-hang .ten { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* --- chua chay tran o kho hep --- */
/* Thanh ben an 186px, nen vung noi dung hep hon license-server. Hai khoi canh nhau
   (vong tron + xep hang) phai co cho cat chu, khong thi ten bai day so tien ra ngoai the. */
.chu-thich.doc a, .chu-thich.doc span { min-width: 0; }
.chu-thich.doc i.cham { flex: none; }
/* Ten mieng an phan con lai va cat bang dau …; so tien va % luon giu cho cua no. */
.khoi-vong .chu-thich.doc a, .khoi-vong .chu-thich.doc span > :not(i):not(b):not(em),
.khoi-vong .chu-thich.doc span { overflow: hidden; }
.chu-thich.doc b { flex: none; }
.chu-thich.doc em { flex: none; }
.khoi-vong { min-width: 0; }
.khoi-vong .chu-thich.doc { min-width: 0; flex: 1; }
.chu-thich.doc .ten-mieng { flex: 1 1 0; min-width: 0;
                            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Trong the hep thi cot ten cua bang xep hang phai co lai, nhuong cho thanh va so. */
.the .xep-hang .ten { width: auto; flex: 1 1 0; min-width: 60px; }
.the .xep-hang .ranh { flex: 0 0 62px; }
.the .xep-hang .lau { width: 54px; }


/* --- khu noi bo /admin --- */
/* Luoi tick chon nha: 33 nha xep mot cot la phai cuon ca man moi tick xong. */
.luoi-tick { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
             gap: 7px; }
.luoi-tick .tick { margin-top: 0; font-size: 12.8px; }
/* The long trong the: bo vien kep, chi giu duong ngan cach. */
.the .the { margin-bottom: 10px; border-color: var(--vien); background: var(--nen-2); }
.the .the[open] { background: var(--bg); }
.the .the > summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }


/* Dong co nap tien: to nhat de luot mat la thay ngay hom nao nap, khong phai do tung dong. */
.bang tr.dong-nap td { background: var(--ok-nhat); }
.bang tr.dong-nap:hover td { background: var(--ok-nhat); filter: brightness(.97); }


/* Bao mau cam: khong phai loi, chi la "cho nay chua co du lieu" — do la canh bao that su. */
.bao.cam-nhat { background: var(--cam-nhat); border: 1px solid var(--cam); color: var(--cam); }


/* --- bang dai: tieu de dinh o dau khi cuon --- */
/* ⚠️ `.cuon` co overflow-x:auto -> trinh duyet tu bien overflow-y thanh auto, tuc no LA
   mot vung cuon rieng. `position: sticky` ben trong se bam vao vung do chu KHONG bam trang;
   vung do lai khong gioi han chieu cao nen chang bao gio dinh -> them sticky ma khong thay
   gi doi. Phai cho khung mot CHIEU CAO TRAN thi tieu de moi dinh that.
   (CSS khong cho overflow-x:auto + overflow-y:visible — trinh duyet ep visible thanh auto.) */
.cuon.dai { max-height: calc(100vh - 190px); overflow: auto; }
.cuon.dai thead th { position: sticky; top: 0; z-index: 2; }
/* O tieu de phai co nen DAC, khong thi noi dung cuon len nhin xuyen qua. */
.cuon.dai thead th { background: var(--nen-2); }
/* Hang cong o chan bang cung dinh, o day duoi. */
.cuon.dai tfoot td { position: sticky; bottom: 0; z-index: 2; background: var(--nen-2); }

/* --- bang TRAI HET TRANG (/admin Cac nha, anh Giang 28/09: "co dinh tieu de, xem 1 trang full 50 nha") ---
   Khac .cuon.dai: KHONG co khung cuon rieng, bang dai het trang, tieu de dinh DINH MAN HINH khi cuon
   ca trang. Muon vay khung phai overflow VISIBLE — con overflow-x:auto la sticky bam vao khung
   (xem ghi chu .cuon.dai ngay tren). Man hep hon bang thi khoi @media cuoi tep tra ve khung cuon. */
.cuon.ca-trang { overflow: visible; }
.cuon.ca-trang thead th { position: sticky; top: 0; z-index: 3; background: var(--nen-2); }
/* Tieu de cot so dang nowrap: "KHACH MOI DE LAI SO" mot dong chiem 165px, ca bang ra 1.299px trong
   khung 1.169px (do 28/09). Cho tieu de xuong dong, so lieu van mot dong. */
.cuon.ca-trang .bang thead th { white-space: normal; vertical-align: bottom; min-width: 64px; }
/* Dong 45px (luat chung) thay vi 58: mot man thay duoc nhieu nha hon. */
.cuon.ca-trang .bang tbody td { padding-top: 6px; padding-bottom: 6px; vertical-align: middle; }
.cuon.ca-trang tfoot td { position: sticky; bottom: 0; z-index: 3; background: var(--nen-2);
  box-shadow: 0 -1px 0 var(--vien); }

/* --- to mau cot tien con lai --- */
/* Muc do canh bao doc theo NEN, khong doc theo chu: liec mot cai la thay dong nao can lo. */
.bang td.tien-thap { background: var(--ok-nhat); font-weight: 700; }
.bang td.tien-am   { background: var(--do-nhat); color: var(--do); font-weight: 700; }
.bang tr:hover td.tien-thap { background: var(--ok-nhat); filter: brightness(.97); }
.bang tr:hover td.tien-am   { background: var(--do-nhat); filter: brightness(.97); }


/* --- hang nut loc cua bang --- */
.hang-loc { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
            margin: 0 0 14px; }
.nhan-loc { font: 600 12px var(--font); letter-spacing: .04em; text-transform: uppercase;
            color: var(--chu-3); margin-right: 3px; }
.chip { padding: 6px 12px; border-radius: 999px; font: 600 12.8px var(--font);
        color: var(--chu-2); background: var(--nen-2); }
.chip:hover { background: var(--nen-3); color: var(--chu); text-decoration: none; }
.chip.dang { background: var(--xanh); color: #fff; }
/* The so bam duoc: vien sang len de biet la bam duoc, chu dung gach chan chu. */
a.the-so:hover .nhan { color: var(--chu-2); }
.the-so.mau-do { --net: var(--do); }
.the-so.mau-do .con-so { color: var(--do); }

/* --- so sanh voi ky truoc tren the so --- */
/* Mui ten chi huong THAY DOI, mau chi TOT/XAU — hai thu khac nhau: gia mot tin nhan
   giam la mui ten xuong nhung mau xanh. */
.the-so .doi { font-size: 12px; font-weight: 600; }
.the-so .doi.len { color: var(--ok); }
.the-so .doi.xuong { color: var(--do); }
.the-so .doi.mut { font-weight: 400; }

/* --- cham "gia moi tin nhan" chong len cot chi tieu --- */
/* Hai don vi khac nhau (dong va dong/tin) nen moi cai chuan hoa theo dinh cua chinh no;
   nguoi doc nhin HINH DANG duong cham chu khong doc gia tri tuyet doi tu chieu cao. */
.bieu-cot .than-cot { position: relative; display: flex; align-items: flex-end;
                      justify-content: center; width: 100%; flex: 1; }
.bieu-cot .cham-gia { position: absolute; left: 50%; width: 7px; height: 7px;
                      margin-left: -3.5px; border-radius: 50%;
                      background: var(--tim); box-shadow: 0 0 0 2px var(--bg); }
.cham-chu { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
            background: var(--tim); vertical-align: baseline; }

/* --- bang chi phi theo thang (tab Nap tien) --- */
/* Vach ty le nam DUOI con so chu khong thay the no: khach can con so de doi chieu voi
   sao ke ngan hang, vach chi de liec ra thang nao nang thang nao nhe. */
.vach { display: block; height: 4px; margin-top: 5px; border-radius: 999px;
        background: var(--nen-3); }
.vach i { display: block; height: 100%; border-radius: 999px; background: var(--xanh); }
.bang tr.thang-nay td { background: var(--xanh-nhat); }
.bang tr.thang-nay td:first-child { box-shadow: inset 3px 0 0 var(--xanh); }

/* ---- Trang "Bai dang hieu qua" (/admin/bai-hay) ---------------------------
   Trang nay de DOC content chu khong de so sanh so, nen moi bai la mot the co cho
   mo ra doc nguyen van, khong phai mot dong bang.                              */
.tong-ket .chu-tong-ket { white-space: pre-wrap; line-height: 1.62; font-size: 14.4px; }

.ds-bai { list-style: none; margin: 0; padding: 0; }
.mot-bai { padding: 13px 0; border-top: 1px solid var(--vien); }
.mot-bai:first-child { border-top: 0; padding-top: 4px; }

.dau-bai { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.dau-bai .hang-bai { flex: none; min-width: 24px; height: 24px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--nen-3); color: var(--chu-3); font: 700 12.4px var(--font); }
.dau-bai .ten-nha { font: 700 13.6px var(--font); letter-spacing: .01em; }
.dau-bai .so-bai { color: var(--chu-3); font-size: 12.8px; }
.dau-bai .so-bai b { color: var(--chu); }
.dau-bai .nut { margin-left: auto; }

.chu-bai { margin: 7px 0 0; }
.chu-bai > summary { cursor: pointer; font-size: 13.6px; line-height: 1.5;
  list-style: none; color: var(--chu); }
.chu-bai > summary::-webkit-details-marker { display: none; }
.chu-bai > summary::before { content: "▸ "; color: var(--chu-3); }
.chu-bai[open] > summary::before { content: "▾ "; }
.chu-bai > summary:hover { color: var(--xanh); }
/* Chu trong bai giu nguyen xuong dong cua nguoi viet: nhip xuong dong CHINH LA mot
   phan cach lam content, gop lai thanh mot khoi la mat thu team can hoc. */
.chu-bai .nguyen-van { white-space: pre-wrap; word-break: break-word; margin: 8px 0 0;
  padding: 11px 13px; border-radius: 9px; background: var(--nen-2);
  font: 400 13.4px/1.62 var(--font); max-height: 420px; overflow: auto; }
.chu-bai-trong { margin: 7px 0 0; font-size: 13.6px; }

.nhan-dinh-bai { margin: 7px 0 0; font-size: 13px; line-height: 1.55; color: var(--chu);
  padding-left: 11px; border-left: 3px solid var(--xanh); }
.nhan-dinh-bai.chua { color: var(--chu-3); border-left-color: var(--vien); }

/* Con so trong chip loc mang. Dat trong .chip nen phai tu go mau chu khi chip dang chon,
   khong thi chu xam tren nen xanh. */
.chip .dem { font-style: normal; font-weight: 400; opacity: .62; margin-left: 2px; }
.chip.dang .dem { opacity: .8; }

/* Hai hang nut ky xep doc ben phai tieu de: hang tren la Hom qua/7 ngay/30 ngay,
   hang duoi la cac thang. Xep ngang het 9 nut thi chat voi tieu de tren man hep. */
.chon-ky-nhom { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.chon-ky-nhom .chon-ky { justify-content: flex-end; }
.chon-thang a { font-size: 12.6px; padding: 6px 11px; }

/* ---- Trang "Tuong tac nhom Zalo" (/admin/tuong-tac) ------------------------
   Moi dong mot nha, moi o mot ngay. O nho, to NEN theo trang thai: liec mot cai la thay
   nha nao bo trong nhieu ngay, khong phai doc tung so.                          */
.bang-tt { border-collapse: separate; border-spacing: 2px; font-size: 12.4px; }
.bang-tt th { font: 600 10.6px/1.2 var(--font); color: var(--chu-3); text-align: center;
  padding: 0 0 5px; white-space: nowrap; }
.bang-tt td { height: 26px; padding: 0 8px; white-space: nowrap; }
.bang-tt th.o-nha, .bang-tt td.o-nha { text-align: left; }
/* Cot ten nha dinh ben trai khi cuon ngang: `.cuon` chinh la vung cuon ngang nen sticky
   left bam dung vao no. Nen DAC, khong thi o ngay truot qua nhin xuyen chu. */
.bang-tt .o-nha { position: sticky; left: 0; z-index: 1; background: var(--bg);
  max-width: 200px; overflow: hidden; text-overflow: ellipsis; font-weight: 600;
  padding-left: 0; }
.bang-tt .o-pt { color: var(--chu-2); }
.bang-tt .o-dem { text-align: right; font-weight: 600; }
.bang-tt td.o-tt { width: 26px; min-width: 26px; padding: 0; text-align: center;
  border-radius: 5px; font: 700 11px var(--font); font-variant-numeric: tabular-nums;
  cursor: default; }
.bang-tt th.cn { color: var(--vien-2); }
/* Chu nhat khong tinh: van hien de biet co ai lam, nhung mo di cho khoi lan voi ngay tinh. */
.bang-tt td.o-tt.cn { opacity: .38; }
.tt-co { background: var(--ok-nhat); color: var(--ok); }
.tt-khong { background: var(--do-nhat); color: var(--do); }
.tt-khach-cho { background: var(--do); color: #fff; }
.tt-chua { background: var(--nen-2); color: var(--chu-3); }
.chu-giai { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 12px;
  font-size: 12.2px; color: var(--chu-2); }
.chu-giai .o { display: inline-block; width: 13px; height: 13px; margin-right: 6px;
  border-radius: 3px; vertical-align: -2px; }
.chu-giai b { display: inline-block; min-width: 13px; margin-right: 4px; text-align: center; }

/* ---- canh bao token + cau hinh fanpage (khu /admin, quan tri) ---- */
.bao.cam { background: var(--cam-nhat); border: 1px solid var(--cam); color: var(--chu); }
.dai-canh-bao { padding: 11px 14px; margin-bottom: 16px; border-radius: var(--r-nho);
  font-size: 13.2px; line-height: 1.55; border: 1px solid var(--cam); background: var(--cam-nhat); }
.dai-canh-bao.do { border-color: var(--do); background: var(--do-nhat); }
.dai-canh-bao ul { margin: 4px 0 6px; padding-left: 20px; }
.dai-canh-bao a { font-weight: 600; }
.nhan-tt { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 12px;
  font-weight: 600; white-space: nowrap; }
.nhan-tt.ok { background: var(--ok-nhat); color: var(--ok); }
.nhan-tt.cam { background: var(--cam-nhat); color: var(--cam); }
.nhan-tt.do { background: var(--do-nhat); color: var(--do); }
.chu-do { color: var(--do); }
.chu-cam { color: var(--cam); }
.chu-ok { color: var(--ok); }
.luoi-token { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.luoi-token .the { margin: 0; }
.the-token { border-top: 3px solid var(--vien-2); }
.the-token.vien-ok { border-top-color: var(--ok); }
.the-token.vien-cam { border-top-color: var(--cam); }
.the-token.vien-do { border-top-color: var(--do); }
.dong-tt { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0;
  font-size: 13.2px; }
.dong-tt dt { color: var(--chu-3); }
.dong-tt dd { margin: 0; overflow-wrap: anywhere; }
.cach-xin { margin-top: 12px; font-size: 13px; color: var(--chu-2); }
.cach-xin summary { cursor: pointer; color: var(--xanh-dam); font-weight: 600; }
.cach-xin p { margin: 6px 0 0; }
.luoi-nguon { margin-bottom: 0; }
/* Tab dang khoi, hoc tu x.giauco.vn (shadcn Tabs): nen xam, tab dang mo nen trang + bong nhe.
   Dung chung cho tab cap trang va tab loc trong the. */
.tab-khoi { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; margin: 0 0 16px;
  background: var(--nen-3); border-radius: var(--r); }
.tab-khoi a { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border-radius: var(--r-nho); font-size: 13.6px; font-weight: 500; color: var(--chu-2); }
.tab-khoi a:hover { color: var(--chu); text-decoration: none; }
.tab-khoi a.dang { background: var(--bg); color: var(--chu);
  box-shadow: 0 1px 2px rgba(16, 23, 26, .12); }
.tab-khoi.nho { margin: 0; }
.tab-khoi.nho a { height: 28px; padding: 0 10px; font-size: 13px; }
/* Badge chi chua CHU SO: duoc phep duoi 12px (khong mang dau). */
.tab-khoi .dem { min-width: 18px; padding: 0 5px; border-radius: 99px; background: var(--nen-2);
  font-size: 11px; line-height: 18px; text-align: center; color: var(--chu-3); }
.tab-khoi a.dang .dem { background: var(--nen-3); color: var(--chu-2); }
.tab-khoi .dem.dem-cam { background: var(--cam-nhat); color: var(--cam); }
.thanh-cong-cu { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; }
.thanh-cong-cu .hang-nut { display: flex; align-items: center; gap: 12px; }
.mo-them { position: relative; }
.mo-them summary { list-style: none; cursor: pointer; }
.mo-them summary::-webkit-details-marker { display: none; }
.khung-them { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 300px;
  display: grid; gap: 10px; padding: 14px; background: var(--bg); border: 1px solid var(--vien);
  border-radius: var(--r); box-shadow: 0 8px 24px rgba(16, 23, 26, .12); font-size: 13px; }
.khung-them label { display: grid; gap: 4px; color: var(--chu-2); }
/* Bang gon: mot page mot dong, dong ~45px (luat chung: dong bang khong cao hon 45). */
.bang-gon td { padding-top: 6px; padding-bottom: 6px; vertical-align: middle; }
.bang-gon .o-page { max-width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bang-gon .o-page b { margin-right: 6px; }
.bang-gon .o-page .mut { font-size: 12px; }
.bang-gon .o-chon-nha { width: 200px; height: 32px; padding-top: 4px; padding-bottom: 4px; }
.bang-gon .o-nut { white-space: nowrap; text-align: right; }
.bang-gon .o-nut .gon, .bang-gon .o-nut > button { display: inline-block; margin-left: 6px; }
.bang-gon td .mut { margin-left: 6px; font-size: 12px; }
.nhan-tt.xanh { background: var(--xanh-nhat); color: var(--xanh-dam); }
.nhan-tt.xam { background: var(--nen-2); color: var(--chu-3); }
.khung-token { display: flex; gap: 8px; margin-top: 14px; }
.khung-token input { flex: 1; min-width: 0; }

/* ===== KHU AGENCY: khu quan tri mac ao "khu" cua x.giauco.vn (HRM/WORK) =====
   Cung ngon ngu voi packages/giao-dien cua SanSan: thanh ben DAM chu sang, goc vuong 3px,
   Be Vietnam Pro, nen xam nhat + the trang. Tong TIM de tach khoi HRM xanh rung.
   Chi boc khu quan tri (body.khu-agency khi co nguoi dang nhap); trang khach giu nguyen. */
.khu-agency {
  --nen-2: #f6f4fb; --nen-3: #ece8f6;
  --vien: #e6e2ee; --vien-2: #d4cde3;
  --chu: #1f1a2e; --chu-2: #454057; --chu-3: #5f596f;
  --xanh: #6a4fb6; --xanh-dam: #553d9a; --xanh-nhat: #ece7fb;
  --r: 3px; --r-nho: 3px;
  --font: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}
body.khu-agency { background: #f6f5f9; }
.khu-agency .the { background: #fff; }
.khu-agency .ray { background: #34245f; border-right-color: transparent; }
.khu-agency .ray .hieu { color: #fff; }
.khu-agency .ray .hieu .mut { color: #c9bcf0; }
.khu-agency .ray nav a { color: #e4dcf7; font-weight: 500; }
.khu-agency .ray nav a:hover { background: rgb(255 255 255 / 10%); color: #fff; }
.khu-agency .ray nav a.dang { background: rgb(255 255 255 / 16%); color: #fff; }
.khu-agency .ray .mut { color: #c9bcf0; }
.khu-agency .ray .nut, .khu-agency .ray button.nhat { background: transparent; color: #e4dcf7;
  border-color: rgb(255 255 255 / 22%); }
.khu-agency .ray .nut:hover, .khu-agency .ray button.nhat:hover { background: rgb(255 255 255 / 10%); color: #fff; }
.nhom-ray { display: block; margin: 12px 0 4px; padding: 0 11px; font-size: 12px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--chu-3); }
.khu-agency .nhom-ray { color: #a99bd6; }
.khu-agency .so, .khu-agency .con-so { font-variant-numeric: tabular-nums; }
/* Mau DU LIEU cua bieu do giu xanh ngoc: tim la mau thuong hieu cua khu, ma cham gia/tin da la
   tim (--tim) — doi ca cot sang tim thi cot va cham trung mau, chu thich "cot xanh" thanh sai. */
.khu-agency .vong .mieng.xanh { stroke: #00a49d; }
.khu-agency .doan.xanh, .khu-agency .cham.xanh, .khu-agency .phan.xanh,
.khu-agency .bieu-cot .thanh.xanh { background: #00a49d; }

/* ===== CHE DO NHUNG trong khung SanSan (x.giauco.vn/agency/*) =====
   SanSan lo sidebar, dau trang, le; trang nay chi con phan noi dung, nen trong suot, sat mep.
   Mau goc xanh ngoc cua app nay trung --primary cua SanSan nen khong can doi mau. */
body.nhung { background: transparent; }
body.nhung > main.khung { margin: 0; padding: 0 0 24px; }

/* ===== MOI KHOI @media DAT O CUOI TEP =====
   Cung do uu tien thi luat DUNG SAU thang. Khoi media xen giua se bi cac luat nen
   viet phia duoi de len — sua dung ma khong thay gi doi.                        */

@media (max-width: 720px) {
  .luoi-form { grid-template-columns: 1fr; }
  .luoi-form .hep-o { max-width: none; }
  .luoi-the { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .luoi-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .luoi-2 { grid-template-columns: minmax(0, 1fr); }
  .xep-hang .ten { width: 108px; }
  .xep-hang .lau { display: none; }
  /* Màn hẹp: thanh bên nằm ngang trên đầu, không thì nó chiếm mất nửa màn. */
  .ray { position: static; width: auto; flex-direction: row; align-items: center;
         gap: 8px; padding: 10px 14px; flex-wrap: wrap;
         border-right: none; border-bottom: 1px solid var(--vien); }
  .ray .hieu { padding: 0 8px 0 0; }
  .ray .hieu .mut { display: none; }
  .ray nav { flex-direction: row; }
  .cuoi-ray { margin-top: 0; margin-left: auto; }
  body.co-ray > main { margin-left: 0; }
}

/* Duoi 1040px: xep chong hai khoi canh nhau. Nguong nay tinh ca 186px thanh ben —
   de nguyen 720px nhu goc thi tren laptop 900px hai the con 300px, chu tran het. */
@media (max-width: 1040px) {
  .luoi-2 { grid-template-columns: minmax(0, 1fr); }
  .khoi-vong { flex-direction: row; }
}

@media (max-width: 720px) {
  /* Bon the so xep 2x2 thay vi 4 cot bep dí. */
  .luoi-the { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .khung { padding: 16px 13px 48px; }
  h1 { font-size: 18px; }
  .dau-trang { align-items: flex-start; }
  .the { padding: 13px 13px; }
  .the-so .con-so { font-size: 20px; }
  /* Bang 8 cot khong the vua man 375px — cuon ngang, va chu nho hon mot nac. */
  .bang { font-size: 12.6px; }
  .bang td.o-bai { min-width: 150px; }
  .cuon.dai { max-height: calc(100vh - 150px); }
  .pheu .ten-bac { width: 104px; font-size: 12px; }
  .pheu .so-bac { width: 62px; }
  .pheu .ty-bac { width: 42px; }
  /* Hai khoi vong tron + xep hang xep chong tren dien thoai, khong ep hai cot. */
  .luoi-2 { grid-template-columns: minmax(0, 1fr); }
  .khoi-vong { flex-direction: column; align-items: flex-start; }
  /* `align-items: flex-start` giu vong tron khoi bi keo gian, nhung no cung lam khoi chu
     thich rong theo CHU thay vi theo the -> ten bai dai la day trang tran ngang. Cho rieng
     khoi chu thich stretch lai. */
  .khoi-vong .chu-thich.doc { align-self: stretch; }
}

/* Them token Pancake phu (tab Token) */
.them-pancake { margin-top: 14px; max-width: 880px; }
.them-pancake .khung-token { max-width: 560px; }
.them-pancake .lap-page { width: 100%; margin-bottom: 12px; }
.them-pancake .hang-nut { margin: 4px 0 8px; }

/* Man hep hon bang Cac nha (~1100px): bang khong vua, tra ve khung cuon rieng co tran chieu cao
   de tieu de van dinh (trong khung). Dat CUOI tep: sau moi luat nen no de len. */
@media (max-width: 1100px) {
  .cuon.ca-trang { overflow: auto; max-height: calc(100vh - 150px); }
}