/* IFS OPS Web · bố cục kiểu GymMaster cho mục Hội viên → Hợp đồng / Phiếu (09/10/2026).
   Tệp riêng của thread "Tham khảo GymMaster" — không sửa style.css (thread check-in cũng thêm vào cuối style.css). */

.gmwrap { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 14px; align-items: start; }
.gmside { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius, 12px); padding: 4px 0; position: sticky; top: 64px; max-height: calc(100vh / var(--ifs-zoom, 1) - 80px); overflow: auto; }
.gmsidehd { display: none; }
.gmsec { padding: 10px 14px; border-top: 1px solid var(--line); } .gmsec:first-of-type { border-top: 0; }
.gmsech { font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.gmgrp { display: flex; flex-direction: column; gap: 2px; }
.gmopt { display: flex; align-items: center; gap: 7px; font-size: 13.5px; padding: 3px 0; cursor: pointer; color: var(--text); }
.gmopt input { accent-color: var(--black); margin: 0; }
.gmopt i { margin-left: auto; font-style: normal; color: var(--muted); font-size: 12px; }
.gmdates { display: grid; gap: 6px; margin-top: 6px; } .gmdates input, .gmsel { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; }
.gmtool { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.gmtool .search { flex: 1 1 260px; min-width: 0; }
.gmgrow { flex: 1; }
.gmfbtn { display: none; }
.gmsum { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--sub); font-size: 13.5px; margin: 0 2px 8px; } .gmsum .bad { color: var(--danger); }
.gmtbl { padding: 0; overflow: hidden; }
.gmtbl table { font-size: 13.5px; }
.gmtbl th { background: var(--soft); position: sticky; top: 0; }
.gmtbl td { white-space: normal; vertical-align: top; }
.gmtbl td small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; } .gmtbl td small.bad, .gmtbl b.bad { color: var(--danger); }
.gmtbl td.n { text-align: right; white-space: nowrap; }
.gmtbl .gmwrapt { max-width: 340px; }
.gmact { white-space: nowrap; text-align: right; } .gmact .btn { margin-left: 4px; }
.gmlink { background: none; border: 0; padding: 0; font: inherit; color: var(--text); cursor: pointer; text-align: left; } .gmlink:hover b { text-decoration: underline; }
.pmres { margin-top: 8px; max-height: 50vh; overflow: auto; } .pmrow { width: 100%; background: none; border: 0; border-top: 1px solid var(--line); text-align: left; cursor: pointer; font: inherit; color: var(--text); }
.slipk.on { border-color: var(--black); }

@media (max-width: 900px) {
  .gmwrap { grid-template-columns: 1fr; }
  .gmside { display: none; position: fixed; inset: 0; z-index: 60; max-height: none; border-radius: 0; top: 0; padding-bottom: 80px; }
  .gmwrap.open .gmside { display: block; }
  .gmsidehd { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); }
  .gmfbtn { display: inline-flex; }
  .gmtbl table thead { display: none; }
  .gmtbl table, .gmtbl tbody, .gmtbl tr, .gmtbl td { display: block; width: 100%; }
  .gmtbl tr { border-top: 1px solid var(--line); padding: 8px 12px; }
  .gmtbl td { border: 0; padding: 2px 0; } .gmtbl td.n, .gmact { text-align: left; } .gmact { padding-top: 6px; } .gmact .btn { margin: 0 6px 0 0; }
}

/* Hội viên → Danh sách: trạng thái ở cột trái trên máy tính; điện thoại giữ hàng nút ngang */
.hvgm .gmside .hvchips { flex-direction: column; overflow: visible; margin: 0; padding: 0; gap: 4px; }
.hvgm .gmside .hvchip { justify-content: space-between; border-radius: 8px; background: transparent; min-height: 32px; }
.hvgm .gmside .hvchip.on { background: var(--black); }
.hvgm .gmmain .hvq { margin-top: 0; }
@media (max-width: 900px) {
  .hvgm .gmside { display: block; position: static; background: none; border: 0; padding: 0; max-height: none; }
  .hvgm .gmsec { padding: 0; border: 0; } .hvgm .gmsech { display: none; }
  .hvgm .gmside .hvchips { flex-direction: row; overflow-x: auto; margin-bottom: 6px; }
  .hvgm .gmside .hvchip { border-radius: 999px; }
}

/* Thu chi (đợt D): sổ quỹ, phiếu thu, phiếu chi, công nợ, mẫu Thu tiền */
.rbar .tcbtns { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.tcrange { margin-bottom: 10px; } .tcrange .rads { margin: 0; } .tcdates { display: inline-flex; gap: 6px; align-items: center; }
.tcdates input { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }
.gmtool .rads { margin: 0; } .gmtool .rad small { color: var(--muted); margin-left: 2px; }
.tctiles b.bad, .rfinfo .bad, .rfsum .bad, .kv b.bad { color: var(--danger); }
.tctiles small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.tcrow { cursor: pointer; } .tcrow:hover td { background: var(--hover, var(--soft)); }
.tcwait { color: var(--warn); font-weight: 600; }
.warnline { color: var(--warn); }
.hvpend.bad { color: var(--danger); }
.rfinfo { background: var(--soft); border-radius: 10px; padding: 8px 12px; margin: 4px 0 10px; font-size: 14px; line-height: 1.5; }
.rfpay { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 8px; align-items: center; margin-bottom: 6px; }
.rfpay select, .rfpay input { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid #DBDBD7; border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 15px; }
.rfpay input { font-weight: 600; text-align: right; }
.rfsum { font-size: 13.5px; color: var(--sub); margin: 4px 0 2px; min-height: 1.2em; }
.rfmore { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin: 10px 0 12px; }
.rfmore summary { cursor: pointer; font-size: 13.5px; color: var(--sub); } .rfmore[open] summary { margin-bottom: 10px; }
.sheet h3 { font-size: 15px; margin: 14px 0 4px; }
input.auto { background: color-mix(in srgb, var(--yellow) 14%, var(--surface)); }
@media (max-width: 900px) { .rbar .tcbtns { width: 100%; } .rbar .tcbtns .btn { flex: 1; } }
@media (max-width: 900px) { .gmtbl td.n[data-l] { display: flex; justify-content: space-between; } .gmtbl td.n[data-l]::before { content: attr(data-l); color: var(--muted); font-weight: 400; } .gmtbl td.n[data-l]:empty { display: none; } }
/* Chăm sóc & gia hạn (đợt F) */
.carer { margin: 1px 0; } .carer small { display: inline; color: var(--sub); }
.carel { color: inherit; text-decoration: underline dotted; }
.carestat { font-size: 13.5px; color: var(--sub); line-height: 1.7; } .carestat b { color: var(--text); }
.caredone { align-self: end; margin-bottom: 14px; }
/* Nhân sự (đợt E) */
.nssug { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13.5px; } .nssug small { color: var(--muted); }
.nsmonth { display: inline-flex; gap: 8px; align-items: center; font-size: 13.5px; } .nsmonth input { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }
.nswk { padding: 0 6px; }
.nsgrid td.nscell { cursor: pointer; min-width: 92px; } .nsgrid td.nscell:hover { background: var(--soft); }
.nschip { display: inline-block; background: var(--soft); border-radius: 999px; padding: 1px 8px; margin: 1px 2px; font-size: 12.5px; font-weight: 600; }
.nsgrid th.nstoday { color: var(--text); text-decoration: underline; }
.gmtbl tr.off td { opacity: .55; }
.rcgrp { border-top: 1px solid var(--line); padding: 6px 0; } .rcgrp summary { cursor: pointer; }
/* Hội viên mở rộng: nhãn, dòng thời gian, hồ sơ trùng */
.hxtags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-left: auto; align-self: flex-start; }
.hxtag { margin-right: 2px; } .hxtag.alert { font-weight: 700; }
.tl { margin-top: 6px; } .tlday { font-weight: 700; font-size: 13px; margin: 12px 0 4px; color: var(--sub); }
.tlrow { display: grid; grid-template-columns: 44px auto 1fr; gap: 8px; align-items: start; padding: 5px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.tlrow small { display: block; color: var(--muted); } .tltime { color: var(--muted); font-size: 12px; padding-top: 2px; }
.dupg .rq { align-items: center; } .dupg .rad { flex: none; }