/* Tab Thông báo — cấu hình Telegram. Dùng lại biến màu và .tbl/.vd-note của app.
   Chuẩn bảng: table-layout fixed + % cố định, tên hàng in đậm. */

.tb-khoi{margin:0 0 22px}
.tb-khoi h3{margin:0 0 10px;font-size:15.5px;color:#1e2a2e;display:flex;align-items:baseline;gap:10px}
.tb-dem{font-size:12.5px;font-weight:400;color:#6b7a80}
.tb-xam{color:#8a9599;font-size:13px}
.tb-ok{color:#0f6e56;font-weight:600}
.tb-do{color:#b3261e}
.tb-nghi{opacity:.55}
.tb-im{background:#fafafa}
.tb-hang-nut{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.btn-nho{padding:5px 10px;font-size:12.5px}

/* --- bảng ghép nối --- */
.tbl-tb-nguoi{table-layout:fixed}
.tbl-tb-nguoi .c-ng{width:30%}
.tbl-tb-nguoi .c-v{width:26%}
.tbl-tb-nguoi .c-tt{width:24%}
.tbl-tb-nguoi .c-tt2{width:20%}
.tb-vai{display:inline-block;background:#e6f2ef;color:#0f6e56;border:1px solid #cbe5dd;
  border-radius:20px;padding:2px 9px;font-size:12px;margin:0 4px 4px 0}

/* --- bảng nhóm --- */
.tbl-tb-nhom{table-layout:fixed}
.tbl-tb-nhom .c-ten{width:34%}
.tbl-tb-nhom .c-qtv{width:24%}
.tbl-tb-nhom .c-tin{width:14%}
.tbl-tb-nhom .c-tt{width:28%}
.tb-nut{display:flex;flex-wrap:wrap;gap:5px}

/* --- ma trận người × nhóm --- */
.tbl-tb-mt{table-layout:fixed}
.tbl-tb-mt .c-ng{width:26%}
.tbl-tb-mt th{font-size:12px;line-height:1.3;white-space:normal;vertical-align:bottom}
.tbl-tb-mt .c-o{text-align:center}
.tb-o{border:1px solid transparent;border-radius:7px;padding:5px 9px;font-size:12.5px;
  cursor:pointer;font-family:inherit;width:100%;max-width:130px}
.tb-o-trong{background:#e6f2ef;border-color:#9fd5c5;color:#0b5945;font-weight:600}
.tb-o-trong:hover{background:#d3ebe3}
.tb-o-moi{background:#fdf2dd;border-color:#e8cf9a;color:#7a5410}
.tb-o-moi:hover{background:#f8e8c8}
.tb-o-ngoai{background:#fff;border-color:#d8dfe1;color:#5d6b70}
.tb-o-ngoai:hover{background:#f2f6f7;border-color:#b7c4c8}

/* --- định tuyến --- */
.tb-dt-nhom{font-size:12.5px;font-weight:600;color:#5d6b70;text-transform:uppercase;
  letter-spacing:.4px;margin:14px 0 6px}
.tbl-tb-dt{table-layout:fixed}
/* Tổng 5 cột phải đúng 100% — bảng để table-layout:fixed nên cộng thiếu/thừa là vỡ. */
.tbl-tb-dt .c-mt{width:37%}
.tbl-tb-dt .c-b{width:7%;text-align:center}
.tbl-tb-dt .c-r{width:14%;text-align:center}
.tbl-tb-dt .c-n{width:29%}
.tbl-tb-dt .c-t{width:13%;text-align:center}
.tbl-tb-dt td.c-t{text-align:center}
.tbl-tb-dt td.c-b,.tbl-tb-dt td.c-r{text-align:center}
.tbl-tb-dt select{width:100%;font-size:12.5px;padding:4px 6px}
/* Ô tick to hơn mặc định: cột chỉ rộng 8% nên ô nhỏ rất khó bấm trúng trên điện thoại,
   và mắt khó nối ô với tiêu đề cột ở trên. */
.tbl-tb-dt td.c-b input,.tbl-tb-dt td.c-r input{width:17px;height:17px;cursor:pointer;margin:0}

/* Ô chọn "tin quản trị gửi cho ai" — đặt đầu khối 4 vì nó chi phối 4 loại tin bên dưới. */
.tb-qt-nhan{margin:0 0 14px;padding:11px 13px;border:1px solid var(--vien);
  border-radius:10px;background:#fbfcfc}
.tb-qt-tieu{font-size:13.5px;font-weight:700;color:var(--teal-d)}
.tb-qt-nhan select{width:100%;max-width:460px;font-size:13px;padding:6px 8px}
.tb-qt-nhac{margin:0 0 8px;padding:7px 9px;border-radius:8px;font-size:12.5px;
  background:#fff8ea;border:1px solid #f0dcb4}
.tb-qt-nhac.xau{background:#fdf5f5;border-color:#f0c9c9}

/* Nút Thử dùng lại .btn-nho đã khai ở đầu file — KHÔNG khai lại ở đây.
   Khai trùng thì bản sau đè bản trước và làm nhỏ mọi nút .btn-nho khác trong tab. */
.tbl-tb-dt td.c-t .btn{width:100%}
.tbl-tb-dt td.c-t .btn:disabled{opacity:.4;cursor:not-allowed}

/* Khung kết quả thử — nằm ngay dưới tên loại tin, đọc xong biết ai nhận được ai không. */
.tb-dt-kq{margin-top:6px;padding:7px 9px;border-radius:8px;font-size:12px;line-height:1.55;
  border:1px solid var(--vien);background:#fafbfb}
.tb-dt-kq.tot{border-color:#b7e0c4;background:#f2fbf5}
.tb-dt-kq.xau{border-color:#f0c9c9;background:#fdf5f5}
.tb-dt-kq ul{margin:5px 0 0;padding-left:16px}
.tb-dt-kq li{margin:2px 0}

/* Hàng có thay đổi chưa lưu — vạch cam bên trái để đếm bằng mắt được ngay. */
.tbl-tb-dt tr.tb-cho>td{background:#fff8ea}
.tbl-tb-dt tr.tb-cho>td:first-child{box-shadow:inset 3px 0 0 var(--cam)}

/* Thanh lưu gộp: dính đáy khối để cuộn tới đâu vẫn bấm được. */
.tb-dt-luu{position:sticky;bottom:0;display:flex;align-items:center;gap:10px;
  margin-top:12px;padding:10px 12px;background:#fff;border:1px solid var(--vien);
  border-radius:10px;box-shadow:0 -2px 10px rgba(0,0,0,.06)}
.tb-dt-dem{flex:1;font-size:13px;color:var(--xam)}
.tb-dt-dem.co{color:var(--cam-d);font-weight:700}
.tb-dt-luu .btn{white-space:nowrap}
.tb-dt-luu .btn:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:640px){
  .tb-dt-luu{flex-wrap:wrap}
  .tb-dt-dem{flex:1 0 100%}
}

/* --- nhắc quá hạn (chặng 3) --- */
.tbl-tb-moc{table-layout:fixed}
.tbl-tb-moc .c-mt{width:24%}
.tbl-tb-moc .c-sn{width:12%}
.tbl-tb-moc .ten{font-weight:600}
.tbl-tb-moc .phu{display:block;font-size:12px;color:#6b7a80;font-weight:400;margin-top:2px}
.tbl-tb-moc input[type=number]{font-family:inherit;font-size:13px;padding:4px 6px}

/* --- nhật ký --- */
.tb-nk summary{cursor:pointer;font-size:13px;color:#0f6e56;padding:6px 0}
.tbl-tb-log{table-layout:fixed}
.tbl-tb-log .c-l{width:16%}
.tbl-tb-log .c-lo{width:22%}
.tbl-tb-log .c-d{width:12%}
.tbl-tb-log .c-k{width:50%}
.tb-log-loi{background:#fdf3f3}

/* --- hộp hiện mã ghép nối --- */
.tb-ma-box{background:#0f6e56;color:#fff;border-radius:12px;padding:16px 18px;margin:0 0 16px}
.tb-ma-so{font-size:38px;font-weight:700;letter-spacing:7px;font-family:var(--mono,monospace);line-height:1.1}
.tb-ma-ten{font-size:13px;opacity:.92;margin-top:4px}
.tb-ma-ten b{color:#fff}
.tb-ma-loi{background:rgba(255,255,255,.14);border-radius:8px;padding:9px 11px;
  margin:11px 0 10px;font-size:13px;line-height:1.55}
.tb-ma-nut .btn-teal{background:#fff;color:#0f6e56;border-color:#fff}
.tb-ma-nut .btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}

/* --- điện thoại: bảng ma trận và bảng nhóm xếp thành thẻ --- */
@media (max-width:760px){
  .tb-khoi h3{flex-direction:column;gap:2px}
  .tb-ma-so{font-size:30px;letter-spacing:5px}
  .tbl-tb-nguoi,.tbl-tb-nhom,.tbl-tb-mt,.tbl-tb-dt,.tbl-tb-log{min-width:560px}
  .tblbox{overflow-x:auto}
  .tb-hang-nut .btn{flex:1 1 auto}
}