/* page-history-service + khung chung của 3 trang lịch sử (.lt-page: history-service, history, dong-tien).
 * Số đo lấy từ ceoacc client/history-service, client/history, client/dong-tien (giá trị CSS trước zoom .86).
 * Bảng dùng ftDataTable (static/js/pages/orders.js); CSS .ft-dt-* của orders.css chỉ áp cho #page-orders/#page-affiliates,
 * nên phần bảng kiểu DataTables bootstrap4 của 3 trang này khai báo ở đây (cùng giá trị gốc). */

/* ===== Thẻ ===== */
.lt-page .lt-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; margin-bottom: 30px;
  border: 1px solid var(--cg-line); border-radius: var(--cg-radius);
  background: linear-gradient(155deg, #fff 65%, #f7f9fd);
  box-shadow: var(--cg-shadow); color: var(--cg-text); font-size: 14px; line-height: 22.4px;
}
.lt-page .lt-card-header {
  padding: 16px 20px; border-bottom: 0 solid var(--cg-line); border-radius: calc(var(--cg-radius) - 1px) calc(var(--cg-radius) - 1px) 0 0;
  background: var(--cg-surface);
}
.lt-page .lt-card-header-flex { display: flex; align-items: center; justify-content: space-between; }
.lt-page .lt-card-title {
  margin: 0; color: var(--cg-text);
  font-family: "Plus Jakarta Sans", sans-serif; font-size: 17px; font-weight: 700; line-height: 25.5px;
}
.cg-dark .lt-page .lt-card { background: linear-gradient(155deg, var(--cg-surface) 65%, var(--cg-soft)); }

/* ===== Bảng kiểu DataTables (bootstrap4) ===== */
.lt-page .lt-resp { padding: 0 10px; overflow-x: auto; }
.lt-page .lt-row { display: flex; flex-wrap: wrap; }
.lt-page .lt-row > div { position: relative; flex: 0 0 100%; max-width: 100%; min-width: 0; }
.lt-page .lt-col-l { padding-right: 15px; }
.lt-page .lt-col-r { padding-left: 15px; }
.lt-page .lt-col-5 { padding-right: 15px; }
.lt-page .lt-col-7 { padding-left: 15px; }
@media (min-width: 768px) {
  .lt-page .lt-row > .lt-col-6 { flex-basis: 50%; max-width: 50%; }
  .lt-page .lt-row > .lt-col-5 { flex-basis: 41.666667%; max-width: 41.666667%; }
  .lt-page .lt-row > .lt-col-7 { flex-basis: 58.333333%; max-width: 58.333333%; }
}
.lt-page :is(.ft-dt-length, .ft-dt-filter) { color: var(--cg-muted); font-size: 12px; line-height: 19.2px; }
.lt-page .ft-dt-filter { text-align: right; }
.lt-page :is(.ft-dt-length, .ft-dt-filter) label {
  display: inline-block; margin-bottom: .5rem; text-align: left;
  color: #213446; font-size: 12px; font-weight: 500; line-height: 19.2px; white-space: nowrap;
}
.lt-page .ft-dt-length label { padding-left: 20px; }
.lt-page .ft-dt-filter label { padding-right: 20px; }
.lt-page .ft-dt :is(select, input) {
  display: inline-block; vertical-align: middle;
  border: 1px solid var(--cg-line-strong); border-radius: 12px;
  background: var(--cg-surface); color: var(--cg-text);
  font-family: inherit; font-size: 14px; font-weight: 400; line-height: 30px;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.lt-page .ft-dt select {
  width: auto; height: 46px; padding: .25rem 2.25rem .25rem .5rem;
  -webkit-appearance: none; appearance: none; background-image: none;
}
.lt-page .ft-dt :is(select, input):focus { border-color: var(--cg-primary); outline: 0; outline-offset: 0; }
.lt-page .ft-dt input { width: auto; height: 30px; margin-left: .5em; padding: .25rem .5rem; vertical-align: baseline; outline-offset: -1px; -webkit-appearance: none; appearance: none; }

.lt-page .ft-dt-table {
  width: 100%; margin: 6px 0; overflow: hidden;
  border-collapse: separate; border-spacing: 0;
  color: var(--cg-text); font-size: 13px; line-height: 20.8px;
}
.lt-page .ft-dt-table thead { background: rgba(51,120,255,.05); }
.lt-page .ft-dt-table th {
  position: relative; box-sizing: content-box; padding: 15px 30px 15px 20px;
  border: 2px solid var(--cg-line);
  background: var(--cg-soft); color: var(--cg-muted);
  font-size: 12px; font-weight: 600; line-height: 19.2px; text-align: left;
  vertical-align: middle; cursor: pointer; user-select: none;
}
.lt-page .ft-dt-table th.lt-center, .lt-page .ft-dt-table td.lt-center { text-align: center; }
/* Mũi tên sắp xếp ↑↓ như DataTables: mờ .3, chiều đang sắp xếp đậm 1 */
.lt-page .ft-dt-table th.ft-sort::before,
.lt-page .ft-dt-table th.ft-sort::after { position: absolute; bottom: .9em; display: block; opacity: .3; }
.lt-page .ft-dt-table th.ft-sort::before { right: 1em; content: "↑"; }
.lt-page .ft-dt-table th.ft-sort::after { right: .5em; content: "↓"; }
.lt-page .ft-dt-table th.is-asc::before,
.lt-page .ft-dt-table th.is-desc::after { opacity: 1; }
/* Gốc bỏ vòng focus ở đầu cột (lỗi trợ năng) — giữ vòng focus bàn phím, vẽ vào trong ô vì bảng cắt tràn */
.lt-page .ft-dt-table th:focus { outline: 0; }
.lt-page .ft-dt-table th:focus-visible { outline: 2px solid var(--cg-primary); outline-offset: -2px; }
.lt-page .ft-dt-table td { box-sizing: content-box; padding: 15px 20px; border: 1px solid var(--cg-line); vertical-align: middle; }
.lt-page .ft-dt-table td.ft-dt-empty { text-align: center; }
.lt-page .ft-dt-table :is(tr, td):focus { outline: none; }
/* .table-hover (history-service, dong-tien): cả dòng "Bảng này trống." cũng đổi nền khi rê chuột như gốc */
.lt-page .ft-dt-table:not(.lt-striped) tbody tr:hover { background: var(--cg-blue-soft); }
.lt-page .ft-dt-table.lt-striped tbody tr:nth-of-type(odd):not(.ft-dt-empty-row) { background: var(--cg-soft); }

.lt-page .ft-dt-info { padding: 10.2px 0 20px 20px; color: var(--cg-muted); font-size: 12px; line-height: 19.2px; }
.lt-page .lt-paginate { margin: 0; text-align: right; white-space: nowrap; }
.lt-page .ft-dt-pagination {
  display: flex; justify-content: flex-end; margin: 2px 0; padding: 0 20px 20px 0;
  border-radius: 5px; list-style: none;
}
.lt-page .ft-page-link {
  position: relative; display: block; margin-left: -1px; padding: .5rem .75rem;
  border: 1px solid var(--cg-line); border-radius: 10px;
  background: var(--cg-soft); color: var(--cg-muted);
  font-size: 12px; line-height: 15px; text-decoration: none;
}
.lt-page .ft-page-item:first-child .ft-page-link { margin-left: 0; }
.lt-page .ft-page-link:hover { z-index: 2; text-decoration: none; }
.lt-page .ft-page-link:focus { z-index: 3; box-shadow: 0 0 0 .2rem rgba(51,120,255,.25); }
.lt-page .ft-page-item.is-active .ft-page-link { z-index: 3; color: #fff; background: var(--cg-blue); border-color: var(--cg-blue); }
.lt-page .ft-page-item.is-disabled .ft-page-link { pointer-events: none; cursor: auto; }
.cg-dark .lt-page .ft-page-item.is-active .ft-page-link { color: #0f1a2a; }
.cg-dark .lt-page :is(.ft-dt-length, .ft-dt-filter) label { color: var(--cg-text); }

/* ===== Riêng history-service: hai nút đầu thẻ ===== */
#page-history-service .lt-card-header { align-items: center; }
#page-history-service .lt-hrow { display: flex; flex-wrap: wrap; margin: 0 -15px; }
#page-history-service .lt-hcol { position: relative; flex: 0 0 100%; max-width: 100%; padding: 0 15px; }
#page-history-service .lt-hcol-mb { margin-bottom: 2.5rem; }
@media (min-width: 992px) { #page-history-service .lt-hcol { flex-basis: 50%; max-width: 50%; } }
#page-history-service .lt-btn {
  display: block; width: 100%; margin-top: .625rem; padding: .625rem 1.25rem; vertical-align: middle;
  border: 1px solid; border-radius: 12px;
  font-size: 14px; font-weight: 500; line-height: 21px; text-align: center; text-decoration: none;
  cursor: pointer; transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
#page-history-service .lt-btn i { margin-right: .3125rem; }
#page-history-service .lt-btn-outline {
  border-color: var(--cg-line-strong); background: transparent; color: var(--cg-primary);
  font-family: "Plus Jakarta Sans", sans-serif;
}
#page-history-service .lt-btn-primary {
  border-color: #2465bd; background: #2465bd; color: #fff; font-family: inherit;
  box-shadow: 0 4px 8px rgba(255,255,255,.05);
}
#page-history-service .lt-btn-outline:is(:hover, :active) { border-color: var(--cg-primary); background: var(--cg-blue-soft); color: var(--cg-primary); }
#page-history-service .lt-btn-primary:focus { box-shadow: none; }
#page-history-service .lt-btn-primary:active { border-color: #0052f2; background: #0056ff; box-shadow: none; }
#page-history-service .ft-dt-table .lt-link { word-break: break-all; }

/* ===== Điện thoại ===== */
@media (max-width: 767.98px) {
  .lt-page .lt-card-header { padding: 14px 16px; }
  .lt-page :is(.ft-dt-length, .ft-dt-filter) { text-align: center; }
  .lt-page .ft-dt :is(select, input) { font-size: 16px; }
  .lt-page .ft-dt input { outline-offset: -2px; }
  .lt-page .ft-dt-table { display: inline-table; overflow: visible; }
  .lt-page .ft-dt-info { text-align: center; }
  .lt-page .lt-paginate { text-align: center; }
  .lt-page .ft-dt-pagination { justify-content: center; }
}