/* =========================
 * THEME & RESET
 * =======================*/
:root{
  --primary:#2563eb;
  --primary-ghost:#e8f0ff;
  --danger:#dc2626;
  --muted:#6b7280;
  --border:#e5e7eb;
  --bg:#fafafa;
  --radius:12px;

  /* Master table widths */
  --col-num-w:120px;   /* 案件番号 */
  --col-cust-w:140px;  /* 顧客 */
  --col-act-w:120px;   /* 操作 */
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  padding:24px;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
  background:#fff; color:#111827;
}

.container, .dash-wrap{ max-width:1200px; margin:0 auto; padding:16px 20px; }
h1{ font-size:28px; margin:0 0 20px; }
.muted{ color:var(--muted); }

/* =========================
 * HEADER (Master header riêng)
 * =======================*/
.title-with-logo{
  display:flex; align-items:center; gap:16px; flex-wrap:nowrap; margin:20px 40px;
}
.title-with-logo .logo{ width:110px; height:auto; flex:0 0 auto; object-fit:contain; }
.title-with-logo .logo-title{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.title-with-logo nav{ margin-left:auto; display:flex; gap:8px; }

@media (max-width:600px){
  .title-with-logo{ flex-wrap:wrap; }
  .title-with-logo nav{ margin-left:0; width:100%; justify-content:flex-start; }
}

/* Header/toolbar dùng cho dashboard */
.dash-wrap .head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:nowrap; }
.dash-wrap .head input{
  width:110px; padding:6px 8px; border:1px solid var(--border); border-radius:8px;
}

.toolbar, .head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.toolbar input, .toolbar select, .head input, .head select{
  padding:6px 10px; border:1px solid var(--border); border-radius:8px;
}

/* =========================
 * BUTTONS
 * =======================*/
.btn{ padding:8px 12px; border:1px solid var(--border); border-radius:8px; background:#fff; color:#111827; cursor:pointer; }
.btn:hover{ background:#f3f4f6; }
.btn:focus{ outline:none; }
.btn-primary{ background:var(--primary); color:#fff; border-color:var(--primary); }
.btn-primary:hover{ filter:brightness(.95); }
.btn-ghost{ background:var(--primary-ghost); color:var(--primary); border-color:transparent; }
.btn-danger{ background:var(--danger); color:#fff; border-color:var(--danger); }
.btn-danger:hover{ filter:brightness(.9); }
.btn-small{ padding:4px 8px; font-size:12px; }
.btn-icon{ display:inline-flex; align-items:center; gap:6px; }
.btn-icon svg{ width:16px; height:16px; display:block; }

/* =========================
 * CARDS / GRID
 * =======================*/
.card{ border:1px solid var(--border); border-radius:var(--radius); background:#fff; padding:12px; }

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:1100px){ .grid2{ grid-template-columns:1fr; } }

/* =========================
 * SCROLL HELPERS
 * =======================*/
/* chỉ cuộn NGANG cho vùng gắn class */
.hscroll, .card.hscroll, .scroll-x{
  overflow-x:auto;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  padding-bottom:6px;
}

/* =========================
 * SUMMARY TABLES (dashboard)
 * =======================*/
.summary-table{
  border-collapse:collapse;
  width:max-content;          /* cho phép rộng hơn khung -> xuất hiện thanh cuộn ngang */
  min-width:640px;
}
.summary-table th, .summary-table td{
  border-top:1px solid var(--border);
  padding:8px 10px;
  white-space:nowrap;
  text-align:right;
}
.summary-table th:first-child,
.summary-table td:first-child{
  text-align:left; font-weight:600;
}

/* sticky header + cột đầu */
.sticky-freeze thead th{
  position:sticky; top:0; z-index:5;
  background:#f8fafc; background-clip:padding-box;
}
.sticky-freeze th:first-child,
.sticky-freeze td:first-child{
  position:sticky; left:0; z-index:6;
  background:#f8fafc; background-clip:padding-box;
  box-shadow:2px 0 2px rgba(0,0,0,.05);
}
.sticky-freeze thead th:first-child{ z-index:7; }
.summary-table tbody tr:hover td{ background:#fafafa; }

/* =========================
 * MASTER: PROJECT TABLE
 * =======================*/
#projectTable{
  border-collapse:collapse;
  width:100%;
  background:#fff;
  table-layout:auto;
}
#projectTable th, #projectTable td{
  border-bottom:1px solid var(--border);
  padding:10px 12px;
  text-align:left;
  vertical-align:middle;
  white-space:nowrap;
}
#projectTable thead th{
  position:sticky; top:0; background:#f8fafc; font-weight:600; color:#374151; z-index:5;
}
#projectTable th:nth-child(-n+10),
#projectTable td:nth-child(-n+10){ min-width:6rem; }

/* cho phép một số cột được xuống dòng */
#projectTable th:nth-child(2), #projectTable td:nth-child(2),
#projectTable th:nth-child(5), #projectTable td:nth-child(5),
#projectTable th:nth-child(11), #projectTable td:nth-child(11){
  white-space:normal; overflow-wrap:anywhere;
}

/* Sticky LEFT: col 1 */
#projectTable thead th:nth-child(1){
  left:0; z-index:6; background:#f8fafc;
  width:var(--col-num-w); min-width:var(--col-num-w);
}
#projectTable tbody td:nth-child(1){
  position:sticky; left:0; z-index:4; background:#fff;
  width:var(--col-num-w); min-width:var(--col-num-w);
  box-shadow:1px 0 0 var(--border) inset;
}
/* Sticky LEFT: col 2 */
#projectTable thead th:nth-child(2){
  left:var(--col-num-w); z-index:6; background:#f8fafc;
  width:var(--col-cust-w); min-width:var(--col-cust-w);
}
#projectTable tbody td:nth-child(2){
  position:sticky; left:var(--col-num-w); z-index:4; background:#fff;
  width:var(--col-cust-w); min-width:var(--col-cust-w);
  box-shadow:1px 0 0 var(--border) inset;
}
/* Sticky RIGHT: last col */
#projectTable thead th:nth-child(12){
  position:sticky; right:0; z-index:6; background:#f8fafc;
  width:var(--col-act-w); min-width:var(--col-act-w);
}
#projectTable tbody td:nth-child(12){
  position:sticky; right:0; z-index:4; background:#fff;
  width:var(--col-act-w); min-width:var(--col-act-w);
  box-shadow:-1px 0 0 var(--border) inset;
}

/* =========================
 * MODAL / POPUP
 * =======================*/
.popup{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; z-index:9998; }
.hidden{ display:none!important; }
.popup-content{ width:min(720px,92vw); background:#fff; border-radius:12px; padding:18px; box-shadow:0 10px 30px rgba(0,0,0,.15); overflow:visible; }
.popup-content h2{ margin:0 0 12px; }

.form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.form-grid label{ display:flex; flex-direction:column; gap:6px; font-size:14px; color:#374151; }
.form-grid input, .form-grid textarea, .form-grid select{ padding:8px 10px; border:1px solid var(--border); border-radius:8px; }
.form-grid textarea{ min-height:80px; resize:vertical; grid-column:1 / -1; }
.form-actions{ grid-column:1 / -1; margin-top:12px; display:flex; gap:8px; justify-content:flex-end; }

.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.35); z-index:10000; }
.modal.show{ display:flex; }
.modal .modal-content{ background:#fff; border-radius:10px; min-width:620px; max-width:90vw; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.2); overflow:visible; }
.modal .form-group{ display:flex; align-items:center; gap:12px; margin:8px 0; }
.modal .form-group label{ width:140px; color:#444; }
.modal .buttons{ display:flex; gap:8px; margin-top:8px; }
.modal .table{ width:100%; border-collapse:collapse; margin-top:8px; }
.modal .table th, .modal .table td{ border-top:1px solid #eee; padding:6px 8px; text-align:left; }

/* btn nhỏ + tag */
.table th:last-child,.table td:last-child{ text-align:right; white-space:nowrap; }
.btn-sm{ padding:2px 8px; border-radius:6px; border:1px solid #e5e7eb; background:#fff; cursor:pointer; font-size:12px; }
.btn-sm.danger{ background:#fee2e2; border-color:#fecaca; }
.btn-sm.ghost{ background:#eef2ff; border-color:#c7d2fe; }
.tag.muted{ font-size:12px; color:#6b7280; margin-left:4px; }

.field-error{ border-color:#ef4444!important; background:#fff5f5; }
.err-msg{ color:#ef4444; font-size:12px; margin:4px 0 8px 2px; }

/* Native selects trong modal/popup */
.modal select, .popup select{ -webkit-appearance:auto; appearance:auto; display:inline-block; }
.modal select option, .popup select option{ display:initial; }

/* =========================
 * APP CHROME (Sidebar + Content)
 * =======================*/
.app-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; border-bottom:1px solid var(--border); background:#fff;
}
.app-header .brand{ display:flex; align-items:center; gap:12px; }
.app-header .brand-logo{ width:120px; height:auto; object-fit:contain; }
.app-header .brand-name{ font-size:1.5rem; font-weight:700; }
.app-nav{ display:flex; gap:8px; margin-left:auto; }
.app-nav .btn.active{ box-shadow:0 0 0 2px var(--primary) inset; }

/* Layout tổng */
.layout{ display:flex; min-height:100vh; background:#fff; }

/* Sidebar trái bám khi cuộn */
.sidebar{
  position:sticky; top:0; align-self:flex-start;
  width:240px; min-height:100vh;
  border-right:1px solid var(--border); background:#fafafa; padding:16px 12px;
}
.side-brand{ display:flex; align-items:center; justify-content:center; padding:8px 0 16px; border-bottom:1px solid var(--border); margin-bottom:12px; }
.side-brand img{ width:120px; height:auto; object-fit:contain; }
.side-nav{ display:flex; flex-direction:column; gap:6px; }
.side-nav a{ display:block; padding:10px 12px; border-radius:8px; color:#111827; text-decoration:none; }
.side-nav a:hover{ background:#eef2ff; }
.side-nav a.active{ background:var(--primary); color:#fff; }

/* Khu vực nội dung */
.content{
  flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column;
  background:#fff;
}
.content .app-header{ position:sticky; top:0; z-index:50; background:#fff; }
.content .container{ max-width:1200px; margin:0 auto; padding:16px 20px; }

@media (max-width:960px){
  .sidebar{ width:72px; padding:12px 8px; }
  .side-brand img{ width:48px; }
  .side-nav a{ padding:10px 8px; text-align:center; }
}

/* =========================
 * MASTER list wrapper (cuộn riêng bảng khi cần)
 * =======================*/
.scroll-table{
  overflow:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--border); border-radius:8px; background:#fff;
  max-height:70vh;             /* giữ header/toolbar luôn thấy */
}
.scroll-table table{
  border-collapse:collapse; width:max-content; min-width:100%;
}
.scroll-table th, .scroll-table td{
  padding:10px 12px; border-bottom:1px solid var(--border); white-space:nowrap; text-align:left;
}
.scroll-table thead th{ position:sticky; top:0; background:#f8fafc; z-index:5; }

/* =========================
 * small theming cho nút ở master header
 * =======================*/
.title-with-logo a.btn, .title-with-logo .btn{
  background:var(--primary); color:#fff; border-color:var(--primary);
}
.title-with-logo a.btn:hover, .title-with-logo .btn:hover{
  filter:brightness(.95); color:#000;
}

#kindFilterSel, #rankFilter{ min-width:120px; }
#regMonthFilter{ min-width:140px; }

:root{
  /* ...các biến khác... */
  --sidebar-w: 200px;           /* ↓ mặc định hẹp hơn 240 */
  --sidebar-w-compact: 132px;   /* ↓ chế độ thu gọn */
}

.sidebar{
  /* thay width: 240px; bằng: */
  width: var(--sidebar-w);
}

/* Thu gọn: nhỏ hơn + padding chữ nhỏ lại */
.sidebar.compact{
  width: var(--sidebar-w-compact);
}
.sidebar.compact .side-brand img{ width: 84px; }
.sidebar.compact .side-nav a{ padding: 8px 10px; font-size: 13px; }

/* Giúp label không tràn khi sidebar hẹp */
.side-nav a{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:root{
  /* ...các biến khác... */
  --sidebar-w: 200px;          /* mặc định hẹp hơn */
  --sidebar-w-compact: 132px;  /* khi thu gọn */
}

.sidebar{ width: var(--sidebar-w); }

.sidebar.compact{
  width: var(--sidebar-w-compact);
}
.sidebar.compact .side-brand img{ width:84px; }
.sidebar.compact .side-nav a{ padding:8px 10px; font-size:13px; }

/* chống tràn chữ khi hẹp */
.side-nav a{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Điều chỉnh chiều rộng các cột cho hợp lý hơn */
#projectTable th,
#projectTable td {
  padding: 8px 10px;
}

/* Giảm độ rộng các cột không quan trọng */
#projectTable th:nth-child(1),
#projectTable td:nth-child(1) { min-width: 40px; }   /* 案件番号 */
#projectTable th:nth-child(2),
#projectTable td:nth-child(2) { min-width: 100px; }  /* 顧客 */
#projectTable th:nth-child(3),
#projectTable td:nth-child(3) { min-width: 80px; }   /* 担当 */
#projectTable th:nth-child(4),
#projectTable td:nth-child(4) { min-width: 60px; }   /* ランク */
#projectTable th:nth-child(5),
#projectTable td:nth-child(5) { min-width: 120px; }  /* カテゴリ */
#projectTable th:nth-child(6),
#projectTable td:nth-child(6) { min-width: 120px; }  /* 進捗 */

/* Tăng riêng cột 備考欄 */
#projectTable th:nth-child(11),
#projectTable td:nth-child(11) {
  min-width: 260px;           /* tăng từ ~120 → 260 */
  white-space: normal;        /* cho phép xuống dòng nếu nội dung dài */
  word-break: break-all;
}

#toggleSidebar { display: none !important; }

:root{
  --sidebar-w: 200px;          /* rộng mặc định */
  --sidebar-w-compact: 88px;   /* khi thu gọn */
}

.sidebar{
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
}

.side-nav{ display: flex; flex-direction: column; gap: 6px; }

.side-footer{
  margin-top: auto;            /* đẩy footer xuống đáy */
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.side-footer .btn{
  width: 100%;
  justify-content: center;
}

/* Thu gọn */
.sidebar.compact{ width: var(--sidebar-w-compact); transition: width .2s; }
.sidebar.compact .side-brand img{ width: 64px; }
.sidebar.compact .side-nav a{ padding: 10px 8px; font-size: 13px; }
.sidebar.compact .side-footer .btn{ padding: 8px; }
.sidebar.compact .side-footer .btn svg + *{ display: none; } /* ẩn chữ, chỉ còn icon khi thu gọn */

/* chống tràn label menu khi hẹp */
.side-nav a{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== Tracking page wider table ===== */
.page-tracking .container {
  max-width: 1600px;     /* tăng từ 1200 lên 1600 */
}

.page-tracking .scroll-table {
  max-height: none;      /* cho phép hiển thị toàn bộ bảng nếu cần */
}

.page-tracking .tracking-table {
  width: 100%;
  table-layout: auto;
  min-width: 1200px;     /* buộc bảng dài tối thiểu */
}

.page-tracking .tracking-table th,
.page-tracking .tracking-table td {
  padding: 10px 14px;
}

/* === Tracking table: cố định bề rộng cột, chỉ cao lên khi text dài === */
#trackingTable,
.tracking-table {
  table-layout: fixed;     /* khóa width theo colgroup / width cột */
  width: 100%;
  border-collapse: collapse;
}

#trackingTable th,
#trackingTable td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;     /* khi nhiều dòng, text bám trên cho gọn */
  overflow: hidden;        /* chặn tràn ngang (phòng trường hợp có chuỗi quá dài) */
  white-space: normal;     /* CHO PHÉP xuống dòng */
  word-break: break-word;  /* cắt từ nếu quá dài */
  overflow-wrap: anywhere; /* xuống dòng trong mọi trường hợp */
}

/* Cột checkbox canh giữa */
#trackingTable td:first-child,
#trackingTable th:first-child {
  text-align: center;
}

/* Ô 備考欄 có thể nhập: giữ wrap, không tràn ngang */
#trackingTable td[data-field="note"][contenteditable="true"] {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.5;
}

/* Hàng cảnh báo màu vàng (nếu bạn đang set inline bg) vẫn giữ nguyên */

/* cell-level warning/danger (chỉ ô) */
.cell-warn   { background: #fff8db; }   /* vàng nhạt */
.cell-danger { background: #ffe5e5; }   /* đỏ nhạt */

/* giữ layout cột cố định & xuống dòng trong phạm vi ô */
.haken-table, #hakenTable { table-layout: fixed; }
.haken-table th, .haken-table td,
#hakenTable th, #hakenTable td {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Cố định độ rộng cột; chỉ chiều cao hàng tăng theo nội dung */
#hakenTable {
  table-layout: fixed;   /* ✅ */
  width: 100%;
}
#hakenTable th, #hakenTable td {
  white-space: normal;   /* cho phép xuống dòng */
  overflow-wrap: anywhere;
  padding: 10px 12px;
}

/* modal tối thiểu */
.modal.hidden { display: none; }
.modal.show   { display: flex; }
.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.35);
  align-items: center; justify-content: center;
  z-index: 1000; /* cao để không bị che */
}
.modal__body {
  background: #fff; width: min(720px, 92vw);
  border-radius: 12px; padding: 16px;
}

/* đề phòng phần khác che header/nút */
.page-header, .page-header .ops { position: relative; z-index: 20; }

/* ===== HAKEN POPUP (scope theo #popup) ===== */

/* Khung modal nhỏ gọn hơn, giống master */
#popup .modal__body{
  background:#fff;
  width:min(780px, 90vw);   /* thu nhỏ khung */
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
  padding:20px 20px 16px;
  overflow:visible;
}

/* Form 2 cột: áp dụng cho wrapper .grid nằm trong .form */
#popup .form .grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px 20px;
  align-items:start;
}

/* Label + control */
#popup .form label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:14px;
  color:#374151;
}
#popup .form input,
#popup .form select,
#popup .form textarea{
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fff;
  color:#111827;
}

/* Textarea chiếm full 2 cột */
#popup .form .grid textarea{
  min-height:80px;
  resize:vertical;
  grid-column:1 / -1;
}

/* Footer nút bấm căn phải, nằm full hàng */
#popup .modal__foot{
  grid-column:1 / -1;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--border);
}

/* Mobile: tự động 1 cột */
@media (max-width:640px){
  #popup .form .grid{ grid-template-columns:1fr; }
}
/* Ẩn nút đóng (×) trong header popup */
.modal__head button,
.modal__head .btn-icon,
.modal__head [id="closePopup"],
.modal__head [id="closePopup2"] {
  display: none !important;
}

#hakenTable th:first-child, #hakenTable td:first-child { width: 64px; text-align: right; }

/* ==== Modal: layout & scroll ==== */
.modal {
  position: fixed;
  inset: 0;
  display: none;                 /* ẩn mặc định */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.35);   /* backdrop */
  z-index: 1000;
}
.modal.show { display: flex; }   /* khi JS thêm .show thì hiển thị */

.modal .modal-content {
  background: #fff;
  width: min(960px, calc(100vw - 32px));
  max-height: calc(100vh - 80px); /* ★ giới hạn chiều cao theo viewport */
  overflow: auto;                 /* ★ bật scroll dọc trong modal */
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,.15);
  display: flex;
  flex-direction: column;
}

/* khu lịch sử trong modal: có thể rất dài → cho vùng riêng scroll dọc */
#revHistWrap {
  max-height: 40vh;              /* ★ vùng lịch sử chiếm tối đa 40% chiều cao màn hình */
  overflow: auto;                /* ★ bật scroll dọc (và ngang nếu bảng rộng) */
}

/* bảng trong lịch sử nếu quá rộng thì vẫn xem được theo chiều ngang */
#revHistWrap .table { min-width: 720px; }

/* sticky nút hành động ngay dưới phần input (tùy thích) */
.modal .buttons {
  display: flex;
  gap: 8px;
  margin: 12px 0;
}

/* responsive nhỏ hơn */
@media (max-width: 768px) {
  .modal .modal-content {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }
  #revHistWrap { max-height: 50vh; }
}

/* ===== Revenue modal: dễ xem hơn cho phần 履歴 ===== */

/* Modal cao hơn chút, cuộn bên trong */
.modal .modal-content{
  max-height: calc(100vh - 40px);   /* trước là -80px */
  overflow: auto;
}

/* Vùng lịch sử: cao hơn, có viền & nền nhẹ, cuộn dọc riêng */
#revHistWrap{
  height: 48vh;                     /* ★ cao hẳn: ~nửa màn hình */
  max-height: 60vh;
  min-height: 240px;
  overflow: auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fafafa;
  padding: 6px 0;                   /* nhẹ để không vỡ layout */
  scrollbar-gutter: stable both-edges;
}

/* Bảng trong lịch sử: full width, có thể trượt ngang nếu nhiều cột */
#revHistWrap .table{
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

/* Header dính (sticky) + nền sáng + bóng nhẹ khi cuộn */
#revHistWrap thead th{
  position: sticky; top: 0; z-index: 2;
  background: #f8fafc;
  box-shadow: 0 2px 0 rgba(0,0,0,.03);
}

/* Khoảng cách ô & kẻ vạch/zebra */
#revHistWrap th, #revHistWrap td{
  padding: 8px 10px;
  border-bottom: 1px solid #eee;
}
#revHistWrap tbody tr:nth-child(even){ background: #ffffff; }
#revHistWrap tbody tr:hover{ background: #f1f5f9; }

/* Căn phải cột tiền (cột 3 trong markup hiện tại) */
#revHistWrap td:nth-child(3), #revHistWrap th:nth-child(3){
  text-align: right;
  white-space: nowrap;
}

/* Nhãn nhỏ gọn hơn một chút */
#revHistWrap .tag{ font-size: 12px; }

/* Tổng hợp ở dưới nổi bật hơn */
#revTotalYen{
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #e5e7eb;
  line-height: 1.5;
}
#revTotalYen b{ font-size: 15px; }


/* ===== Điều chỉnh riêng cột 案件名 (cột 5) và ランク (cột 7) ===== */
.page-master #projectTable th:nth-child(5),
.page-master #projectTable td:nth-child(5) {
    min-width: 280px;     /* 案件名 rộng hơn */
    white-space: normal;  /* Cho phép xuống dòng */
}

/* ランク */
.page-master #projectTable th:nth-child(7),
.page-master #projectTable td:nth-child(7) {
    min-width: 60px;      /* nhỏ lại */
    max-width: 80px;
    text-align: center;   /* canh giữa */
}

/* === Revenue modal main history area === */

#revHistWrap {
  max-height: 420px !important;   /* chỉnh tuỳ ý: 420–600 */
  overflow-y: auto !important;
  overflow-x: auto;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fafafa;
  padding: 6px;
}

/* bảng trong history */
#revHistWrap table {
  width: 100%;
  min-width: 760px; /* đủ rộng để nhìn rõ */
  border-collapse: collapse;
}

#revHistWrap th {
  position: sticky;
  top: 0;
  background: #f8fafc;
  z-index: 2;
}

#revHistWrap td,
#revHistWrap th {
  border-bottom: 1px solid #eee;
  padding: 8px 10px;
}

#revHistWrap td:nth-child(3) {
  text-align: right;
  white-space: nowrap;
}