/* ===== tt-common.css — dùng chung cho cả 3 trang module Thanh Toán =====
   (index.html: Phiếu | ky.html: Lịch sử kỳ | chi-nhanh.html: Chi tiết chi nhánh)
   Tách khỏi từng trang để không phải chép lại toàn bộ CSS 3 lần. */
  :root {
    --accent: #0077cc;
    --accent-dim: #e6f2fb;
    --accent-dark: #005fa3;
    --ink: #333;
    --line: #e2e6ea;
  }
  /* Người xử lý (duyệt/thanh toán) đổi tông tím để phân biệt với trang nhân viên */
  body.quan-tri {
    --accent: #6d28d9;
    --accent-dim: #f1ebfd;
    --accent-dark: #55209e;
  }
  body {
    font-family: 'Segoe UI', sans-serif;
    background: #f4f6f8;
    color: var(--ink);
    margin: 0;
    padding: 0 0 40px;
  }
  body.quan-tri { background: #f7f5fc; }

  .thanh-tren {
    background: var(--accent);
    color: #fff;
    padding: 14px 20px;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
  }
  .thanh-tren h1 { margin: 0; font-size: 20px; display: flex; align-items: center; gap: 10px; }
  .thanh-tren .phai { display: flex; align-items: center; gap: 16px; font-size: 14px; }
  .thanh-tren a { color: #fff; text-decoration: none; opacity: .9; }
  .thanh-tren a:hover { opacity: 1; text-decoration: underline; }

  .container { max-width: 1180px; margin: 20px auto; padding: 0 16px; }
  .card { background:#fff; border-radius:12px; box-shadow:0 1px 4px rgba(0,0,0,.08); padding:16px; margin-bottom:16px; }
  .card.vien-accent { border-left: 4px solid var(--accent); }

  button { padding: 8px 14px; border:none; border-radius:6px; cursor:pointer; font-size:14px; font-family: inherit; }
  .btn-chinh { background:var(--accent); color:#fff; font-weight:600; }
  .btn-chinh:hover { background:var(--accent-dark); }
  .btn-phu { background:#e8ebee; color:#333; }
  .btn-phu:hover { background:#dce0e4; }
  .btn-xanh { background:#16a34a; color:#fff; font-weight:600; }
  .btn-do { background:#dc2626; color:#fff; font-weight:600; }
  button:disabled { opacity:.55; cursor:not-allowed; }

  .thanh-cong-cu { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
  .o-tim { flex:1; min-width:220px; position:relative; }
  .o-tim input[type=text] { width:100%; box-sizing:border-box; padding:8px 12px 8px 38px; border:1px solid #ccc; border-radius:6px; font-size:14px; }
  .o-tim > i { position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:13px; color:#98a2ad; pointer-events:none; }
  select { padding:8px 10px; border:1px solid #ccc; border-radius:6px; font-size:14px; background:#fff; font-family:inherit; }

  .tong-hop-trang-thai { display:flex; gap:8px; flex-wrap:wrap; align-items:stretch; }
  .the-tong-hop {
    flex:1; min-width:124px; border-radius:8px; padding:7px 10px;
    background:#f7f9fb; border:1px solid var(--line); border-left:3px solid #9ca3af;
  }
  .the-tong-hop .nhan-nho { font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.3px; color:#667; }
  .the-tong-hop .so-tien-lon { font-size:15px; font-weight:700; font-variant-numeric: tabular-nums; margin-top:1px; }
  .the-tong-hop .so-luong-nho { font-size:11px; color:#98a2ad; }
  .the-tong-hop.tt-0 { border-left-color:#dc2626; }
  .the-tong-hop.tt-1 { border-left-color:#2563eb; }
  .the-tong-hop.tt-2 { border-left-color:#16a34a; }
  .the-tong-hop.tt-3 { border-left-color:#9ca3af; }

  /* Vết dẫn đường ở đầu trang / đầu khối chi tiết kỳ — bấm được để quay lại từng bước */
  .duong-dan { display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:13px; margin-bottom:10px; }
  .duong-dan button {
    background:none; border:none; padding:0; font:inherit; font-size:13px;
    color:var(--accent); font-weight:600; cursor:pointer;
  }
  .duong-dan button:hover { text-decoration:underline; }
  .duong-dan .ngan { color:#c7ced6; }
  .duong-dan .hien-tai { color:#98a2ad; }

  .ghi-chu-bang { font-size:12px; color:#98a2ad; margin-top:8px; }

  /* Hạn mức tiền chi của kỳ đang chạy — dùng chung cho mọi chi nhánh */
  .dau-tien-chi { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
  /* Tóm tắt tiền chi một dòng — bản đầy đủ nằm ở tab Tổng hợp */
  .dong-tien-chi { font-size:13px; color:#667; margin-top:7px; display:flex; gap:6px; flex-wrap:wrap; align-items:baseline; }
  .dong-tien-chi b { color:var(--ink); font-variant-numeric:tabular-nums; }
  .dong-tien-chi .ngan { color:#c7ced6; }
  .vach-ngang { height:1px; background:var(--line); margin:11px 0 10px; }
  .hang-lien-ket { display:flex; justify-content:flex-end; margin-top:9px; }
  .lien-ket-tab {
    background:none; border:none; color:var(--accent); font-weight:600; font-size:13px;
    cursor:pointer; padding:0; font-family:inherit;
  }
  .lien-ket-tab:hover { text-decoration:underline; }
  .dau-tien-chi h4 { margin:0; font-size:14px; }
  .dau-tien-chi .ky-phu { font-size:12px; color:#98a2ad; font-weight:400; margin-left:6px; }
  .thanh-muc { height:5px; border-radius:99px; background:#e8ecf0; overflow:hidden; margin-top:2px; }
  .thanh-muc > span { display:block; height:100%; background:#16a34a; border-radius:99px; }
  .thanh-muc > span.canh-bao-muc { background:#d97706; }
  .thanh-muc > span.vuot-muc { background:#dc2626; }

  /* Hạn cần tiền sắp tới / đã trễ — đè lên màu chữ theo trạng thái của cả dòng */
  .qua-han, .sap-han { font-weight:600; white-space:nowrap; }
  .qua-han { color:#b91c1c !important; }
  .sap-han { color:#b45309 !important; }
  .qua-han small, .sap-han small { display:block; font-size:11px; font-weight:400; opacity:.85; }

  .bang-tong-hop { width:100%; border-collapse:collapse; font-size:13.5px; }
  .bang-tong-hop th, .bang-tong-hop td { padding:8px 10px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; }
  .bang-tong-hop th:first-child, .bang-tong-hop td:first-child { text-align:left; }
  .bang-tong-hop th { background:#f7f9fb; font-size:11.5px; text-transform:uppercase; letter-spacing:.3px; color:#667; }
  .bang-tong-hop td.tong-cot { font-weight:700; }
  /* Bảng chi tiết kỳ có cột chữ nên phải trả lại canh trái cho những cột đó */
  .bang-tong-hop td.chu, .bang-tong-hop th.chu { text-align:left; white-space:normal; }
  .bang-tong-hop tr.dong-tong td { font-weight:700; border-top:2px solid var(--line); border-bottom:none; }
  /* Cột Từ chối trong "Chi tiết theo chi nhánh" — số tham khảo, không phải tiền đã chi,
     nên tách hẳn khỏi khối cột tiền bằng viền trái + làm nhạt màu/cỡ chữ để không cạnh
     tranh sự chú ý với cột Tổng ngay bên cạnh nó trước đây. */
  .bang-tong-hop th.cot-tu-choi, .bang-tong-hop td.cot-tu-choi {
    border-left:1px solid var(--line); color:#aab1ba; font-size:12.5px; font-weight:400 !important;
  }

  table { width:100%; border-collapse:collapse; }
  th, td { padding:10px; border-bottom:1px solid var(--line); text-align:left; font-size:14px; vertical-align:middle; }
  th { background:#f7f9fb; font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:#667; }
  tr.dong-bam { cursor:pointer; }
  tr.dong-bam:hover { background:var(--accent-dim); }
  /* Màu chữ cả dòng theo trạng thái phiếu */
  tr.dong-tt-0 td { color:#b91c1c; }
  tr.dong-tt-1 td { color:#1d4ed8; }
  tr.dong-tt-2 td { color:#15803d; }
  tr.dong-tt-3 td { color:#9ca3af; text-decoration: line-through; }
  tr.dong-tt-3 td .nhan { text-decoration: none; }
  .anh-nho { width:44px; height:44px; object-fit:cover; border-radius:6px; border:1px solid var(--line); display:block; }
  .anh-trong { width:44px; height:44px; border-radius:6px; background:#f0f2f5; display:flex; align-items:center; justify-content:center; font-size:16px; color:#98a2ad; }
  .ma-phieu { font-family: ui-monospace, Consolas, monospace; font-size:12.5px; }
  .so-tien { font-variant-numeric: tabular-nums; white-space:nowrap; }

  /* Hàng lọc đặt TRÊN tiêu đề bảng danh sách: mỗi cột tự lọc theo dữ liệu của cột đó.
     Nền trắng + viền ngăn để đọc ra là thanh công cụ, không lẫn vào dải tiêu đề xám. */
  .hang-loc th {
    padding:10px 10px 12px; background:#fff; text-transform:none; letter-spacing:0;
    font-weight:400; vertical-align:top; border-bottom:1px solid var(--line);
  }
  .hang-loc select, .hang-loc input[type=date] {
    width:100%; box-sizing:border-box; padding:5px 7px; font-size:12px; color:#445;
    border:1px solid #ccc; border-radius:6px; background:#fff; font-family:inherit;
  }
  .hang-loc .loc-ngay { display:flex; flex-direction:column; gap:3px; min-width:118px; }
  .hang-loc .nut-xoa-loc { font-size:11.5px; white-space:nowrap; }

  /* Hàng tổng nằm ngay DƯỚI tiêu đề: tổng tiền của toàn bộ kết quả đang lọc (mọi trang),
     đặt đúng cột Số tiền để đọc thẳng xuống các dòng tiền bên dưới. */
  .hang-tong th {
    padding:5px 10px 7px; background:#fff; text-transform:none; letter-spacing:0; font-weight:400;
  }
  .hang-tong .o-tong { white-space:nowrap; }
  .hang-tong .o-tong b { font-size:15px; color:var(--ink); font-variant-numeric:tabular-nums; }
  .hang-tong .o-tong small { display:block; font-size:10.5px; color:#aab1ba; }

  .nhan { display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600; color:#fff; white-space:nowrap; }
  .nhan-0 { background:#dc2626; } /* chưa duyệt */
  .nhan-1 { background:#2563eb; } /* đã duyệt / chưa thanh toán */
  .nhan-2 { background:#16a34a; } /* đã thanh toán */
  .nhan-3 { background:#9ca3af; } /* từ chối */

  .phan-trang { display:flex; align-items:center; justify-content:center; gap:14px; padding:14px 0 4px; font-size:14px; }
  .phan-trang button { background:#eef1f4; }

  label { display:block; font-weight:600; font-size:13px; margin: 14px 0 5px; }
  label .bat-buoc { color:#dc2626; }
  label .tuy-chon { color:#98a2ad; font-weight:400; }
  input[type=text], input[type=number], input[type=date], textarea {
    width:100%; box-sizing:border-box; padding:9px; border:1px solid #ccc; border-radius:6px; font-size:14px; font-family:inherit;
  }
  /* Ô ngày sửa tại chỗ trong bảng chi tiết nằm cạnh 2 nút nên không chiếm hết chiều ngang */
  .hang-stk input[type=date] { width:auto; padding:6px 8px; }
  input:focus, textarea:focus, select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
  #ttSoTien { font-variant-numeric: tabular-nums; }
  /* Ô chọn chi nhánh trong modal tạo phiếu dùng full-width như các input khác, khác với
     select trong thanh công cụ (chỉ rộng vừa nội dung). */
  #ttChiNhanh { width:100%; box-sizing:border-box; padding:9px; }

  .o-kem-nut { display:flex; gap:6px; }
  .o-kem-nut input { flex:1; }
  .nut-icon {
    background:#eef1f4; color:#556; padding:0 12px; border-radius:6px;
    display:flex; align-items:center; justify-content:center; min-width:42px;
  }
  .nut-icon:hover { background:var(--accent-dim); color:var(--accent-dark); }
  .nut-icon.xong { background:#dcfce7; color:#15803d; }

  .vung-file { border:2px dashed #cfd6dd; border-radius:10px; background:#fafbfc; transition:.15s; }
  .vung-file.co-file { border-style:solid; border-color:var(--accent); background:#fff; }
  .vung-file .trong { padding:18px 14px; text-align:center; cursor:pointer; color:#667; }
  .vung-file .trong .bieu-tuong { font-size:24px; display:block; margin-bottom:6px; color:#aab3bd; }
  .vung-file .trong small { display:block; color:#98a2ad; margin-top:3px; font-size:11.5px; }
  .vung-file .da-chon { display:flex; align-items:center; gap:10px; padding:10px; }
  .vung-file .da-chon img { width:56px; height:56px; object-fit:cover; border-radius:6px; }
  .vung-file .da-chon .hop-ten { flex:1; min-width:0; }
  .vung-file .da-chon .ten { font-size:13px; font-weight:600; word-break:break-all; }
  .vung-file .da-chon .co { font-size:11.5px; color:#98a2ad; }
  .vung-file .da-chon .bo { background:#fee2e2; color:#b91c1c; padding:5px 10px; font-size:13px; }
  .canh-bao { background:#fef3c7; color:#92400e; border-radius:6px; padding:9px 12px; font-size:13px; margin-top:12px; }

  .lop-phu { display:none; position:fixed; inset:0; background:rgba(15,23,42,.5); align-items:center; justify-content:center; z-index:999; padding:16px; }
  .lop-phu.hien { display:flex; }
  .hop-modal { background:#fff; border-radius:12px; max-width:620px; width:100%; max-height:90vh; overflow:auto; }
  .hop-modal .dau { padding:16px 20px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; background:#fff; border-radius:12px 12px 0 0; }
  .hop-modal .dau h3 { margin:0; font-size:17px; }
  .hop-modal .than { padding:20px; }
  .hop-modal .chan { padding:14px 20px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:8px; }
  .dong-x { background:none; color:#98a2ad; font-size:17px; padding:0 4px; }

  .bang-tt { width:100%; font-size:14px; }
  .bang-tt td { padding:7px 0; border:none; }
  .bang-tt td:first-child { color:#788; width:140px; font-size:13px; }
  .khoi { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
  .khoi h4 { margin:0 0 8px; font-size:13px; text-transform:uppercase; letter-spacing:.4px; color:#667; }
  .hang-stk { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .hang-stk .nut-icon { padding:4px 9px; min-width:auto; font-size:12.5px; }

  /* Thẻ tệp đính kèm: ảnh xem trước + nút xem lớn / tải về */
  .the-tep { display:inline-flex; align-items:center; gap:10px; background:#f7f9fb; border:1px solid var(--line); border-radius:8px; padding:8px; margin:0 8px 8px 0; }
  .the-tep img { width:72px; height:72px; object-fit:cover; border-radius:6px; cursor:zoom-in; }
  .the-tep .hop-nut { display:flex; flex-direction:column; gap:5px; }
  .the-tep .hop-nut a, .the-tep .hop-nut button {
    font-size:12.5px; padding:5px 10px; border-radius:5px; text-decoration:none;
    background:#eef1f4; color:#445; text-align:center; border:none; cursor:pointer; font-family:inherit;
  }
  .the-tep .hop-nut a:hover, .the-tep .hop-nut button:hover { background:var(--accent-dim); color:var(--accent-dark); }
  .the-tep .hop-nut .nut-xoa-tep { color:#b91c1c; }
  .the-tep .hop-nut .nut-xoa-tep:hover { background:#fee2e2; color:#b91c1c; }
  .the-tep .ten-tep { font-size:13px; font-weight:600; max-width:200px; word-break:break-all; }
  .the-qr { border-color:#a78bfa; background:#faf7ff; }

  .hop-xac-nhan { background:#fffbeb; border:1px solid #fcd34d; border-radius:8px; padding:14px; margin-top:12px; }
  .hop-xac-nhan p { margin:0 0 12px; font-size:14px; }

  .anh-lon { display:none; position:fixed; inset:0; background:rgba(0,0,0,.9); align-items:center; justify-content:center; z-index:1000; flex-direction:column; gap:14px; }
  .anh-lon.hien { display:flex; }
  .anh-lon img { max-width:92vw; max-height:82vh; border-radius:6px; background:#fff; }
  .anh-lon .thanh-nut { display:flex; gap:10px; }
  .anh-lon .thanh-nut a, .anh-lon .thanh-nut button {
    background:rgba(255,255,255,.92); color:#222; padding:8px 16px; border-radius:6px;
    text-decoration:none; font-size:14px; border:none; cursor:pointer; font-family:inherit; font-weight:600;
  }

  .trong-rong { text-align:center; color:#98a2ad; padding:36px 10px; }
  @media (max-width: 720px) {
    .bang-cuon { overflow-x:auto; }
    .container { padding:0 10px; }
  }

.lien-ket-tab { text-decoration:none; display:inline-flex; align-items:center; gap:4px; }
.duong-dan a { color:var(--accent); font-weight:600; text-decoration:none; }
.duong-dan a:hover { text-decoration:underline; }

.thong-bao-quyen { text-align:center; color:#98a2ad; padding:40px 16px; }
.thong-bao-quyen a { color:var(--accent); font-weight:600; }