/* page-orders — số đo lấy từ ceoacc client/orders (giá trị CSS trước zoom .86) */

/* ===== Bảng kiểu DataTables dùng chung cho orders + affiliates (JS: ftDataTable trong orders.js) ===== */
:is(#page-orders, #page-affiliates) .ft-dt { padding: 14px; color: var(--cg-text); line-height: 1.6; }
:is(#page-orders, #page-affiliates) .ft-dt-top { display: flex; flex-wrap: wrap; align-items: center; }
:is(#page-orders, #page-affiliates) .ft-dt-top > div { flex: 0 0 50%; max-width: 50%; }
:is(#page-orders, #page-affiliates) .ft-dt-length { text-align: left; }
:is(#page-orders, #page-affiliates) .ft-dt-filter { text-align: right; }
:is(#page-orders, #page-affiliates) .ft-dt-top label {
  display: inline-block; margin-bottom: 8px;
  color: #213446; font-size: 12px; font-weight: 500; line-height: 19.2px; white-space: nowrap;
}
:is(#page-orders, #page-affiliates) .ft-dt-length label { padding-left: 20px; }
:is(#page-orders, #page-affiliates) .ft-dt-filter label { padding-right: 20px; }
:is(#page-orders, #page-affiliates) .ft-dt-top select,
:is(#page-orders, #page-affiliates) .ft-dt-top input {
  display: inline-block; vertical-align: middle;
  border: 1px solid #d4dfed; border-radius: 12px;
  background: var(--cg-surface); color: var(--cg-text);
  font-family: inherit; font-size: 14px; line-height: 30px;
  transition: border-color .15s, box-shadow .15s;
}
:is(#page-orders, #page-affiliates) .ft-dt-top select {
  width: 69px; height: 46px; min-height: 36px; padding: 4px 36px 4px 8px;
  -webkit-appearance: none; appearance: none; background-image: none; cursor: pointer;
}
:is(#page-orders, #page-affiliates) .ft-dt-top input { width: 174px; height: 36px; padding: 4px 8px; margin-left: 7px; vertical-align: baseline; }
:is(#page-orders, #page-affiliates) .ft-dt-top :is(select, input):focus {
  outline: 0; border-color: var(--cg-primary); box-shadow: 0 0 0 2px var(--cg-field-ring);
}
:is(#page-orders, #page-affiliates) .ft-dt-scroll { overflow-x: auto; }
:is(#page-orders, #page-affiliates) .ft-dt-table {
  width: 100%; margin: 6px 0; border-collapse: separate; border-spacing: 0;
  color: var(--cg-text); font-size: 13px; line-height: 20.8px;
}
:is(#page-orders, #page-affiliates) .ft-dt-table th {
  position: relative; padding: 15px 30px 15px 20px;
  border: 2px solid var(--cg-line); border-top: 0;
  background: var(--cg-soft); color: var(--cg-muted);
  font-size: 12px; font-weight: 600; line-height: 19.2px; text-align: left;
  white-space: nowrap; vertical-align: middle; cursor: pointer; user-select: none;
}
/* Mũi tên sắp xếp ↑↓ như DataTables: mờ .3, chiều đang sắp xếp đậm 1 */
:is(#page-orders, #page-affiliates) .ft-dt-table th.ft-sort::before,
:is(#page-orders, #page-affiliates) .ft-dt-table th.ft-sort::after {
  position: absolute; bottom: .9em; display: block; opacity: .3;
}
:is(#page-orders, #page-affiliates) .ft-dt-table th.ft-sort::before { right: 1em; content: "↑"; }
:is(#page-orders, #page-affiliates) .ft-dt-table th.ft-sort::after { right: .5em; content: "↓"; }
:is(#page-orders, #page-affiliates) .ft-dt-table th.is-asc::before,
:is(#page-orders, #page-affiliates) .ft-dt-table th.is-desc::after { opacity: 1; }
:is(#page-orders, #page-affiliates) .ft-dt-table th:focus-visible { outline: 2px solid var(--cg-primary); outline-offset: -2px; }
:is(#page-orders, #page-affiliates) .ft-dt-table td {
  padding: 15px 20px; border: 1px solid var(--cg-line); vertical-align: middle;
}
:is(#page-orders, #page-affiliates) .ft-dt-table tbody tr:hover:not(.ft-dt-empty-row) { background: var(--cg-blue-soft); }
:is(#page-orders, #page-affiliates) .ft-dt-table td.ft-dt-empty { text-align: center; }
:is(#page-orders, #page-affiliates) .ft-dt-bottom { display: flex; align-items: flex-start; }
:is(#page-orders, #page-affiliates) .ft-dt-info {
  flex: 0 0 41.6667%; max-width: 41.6667%; padding: 10.2px 15px 20px 20px;
  color: var(--cg-muted); font-size: 12px; line-height: 19.2px;
}
:is(#page-orders, #page-affiliates) .ft-dt-pagination {
  flex: 1 1 auto; display: flex; flex-wrap: wrap; justify-content: flex-end;
  margin: 2px 0 2px 15px; padding: 0 20px 20px 0; list-style: none;
}
:is(#page-orders, #page-affiliates) .ft-page-link {
  position: relative; display: block; margin-left: -1px; padding: 8px 12px;
  border: 1px solid var(--cg-line); border-radius: 10px;
  background: var(--cg-surface); color: var(--cg-primary);
  font-size: 12px; line-height: 15px; text-decoration: none;
}
:is(#page-orders, #page-affiliates) .ft-page-item:first-child .ft-page-link { margin-left: 0; }
:is(#page-orders, #page-affiliates) .ft-page-link:hover { z-index: 2; text-decoration: none; }
:is(#page-orders, #page-affiliates) .ft-page-item.is-active .ft-page-link {
  z-index: 3; color: #fff; background: var(--cg-blue); border-color: var(--cg-blue);
}
:is(#page-orders, #page-affiliates) .ft-page-item.is-disabled .ft-page-link {
  pointer-events: none; cursor: auto; color: var(--cg-muted); background: var(--cg-soft);
}
/* Nút nhỏ trong bảng (giống .btn.btn-primary.btn-sm của ceoacc) */
:is(#page-orders, #page-affiliates) .ft-btn-sm {
  display: inline-block; margin: 2px; padding: 4px 8px;
  border: 1px solid #2465bd; border-radius: 10px; background: #2465bd; color: #fff;
  font-family: "Plus Jakarta Sans", sans-serif; font-size: 12px; font-weight: 500; line-height: 18px;
  box-shadow: 0 4px 8px rgba(255,255,255,.05); cursor: pointer; white-space: nowrap;
}
:is(#page-orders, #page-affiliates) .ft-btn-sm:hover { background: #1d559f; border-color: #1d559f; }
:is(#page-orders, #page-affiliates) .ft-btn-sm i { margin-right: 4px; }
.cg-dark :is(#page-orders, #page-affiliates) .ft-dt-top label { color: var(--cg-text); }
.cg-dark :is(#page-orders, #page-affiliates) .ft-dt-top :is(select, input) { border-color: var(--cg-line); }

/* ===== Tiêu đề trang ===== */
#page-orders .od-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 13.6px; padding: 14.4px 17.6px;
  border: 1px solid var(--cg-line); border-radius: 24px;
  background: linear-gradient(135deg, #fff 35%, #eaf2ff);
  box-shadow: var(--cg-shadow); color: var(--cg-text); line-height: 21.7px;
}
#page-orders .od-hero h1 {
  margin: 0 0 2.88px; color: var(--cg-text);
  font-family: "Plus Jakarta Sans", sans-serif; font-size: 24px; font-weight: 600; line-height: 32.4px; letter-spacing: -.6px;
}
#page-orders .od-hero p { margin: 0; color: var(--cg-muted); font-size: 13px; line-height: 22.1px; }
#page-orders .od-hero-btn {
  flex: 0 0 auto; display: block; padding: 4px 8px;
  border: 1px solid var(--cg-line); border-radius: 10px;
  background: var(--cg-surface); color: var(--cg-primary);
  font-family: "Plus Jakarta Sans", sans-serif; font-size: 12px; font-weight: 500; line-height: 18px;
  text-align: center; text-decoration: none; vertical-align: middle;
}
/* ceoacc: nút này không đổi gì khi rê chuột (chỉ có vòng focus bàn phím chung) */
#page-orders .od-hero-btn:hover { color: var(--cg-primary); text-decoration: none; }
#page-orders .od-hero-btn i { margin-right: 5px; font-size: 12px; }   /* rộng 1.25em + canh giữa: mặc định của Font Awesome 7 */
.cg-dark #page-orders .od-hero { background: linear-gradient(135deg, var(--cg-surface) 35%, var(--cg-blue-soft)); }

/* ===== Khung thông báo đỏ ===== */
#page-orders .od-notice {
  display: flex; margin-bottom: 13.6px; padding: 8.8px 16px;
  border: 2px solid var(--cg-line); border-radius: 20px;
  background: var(--cg-blue-soft); color: #212529; font-size: 14px; line-height: 1.55;
}
#page-orders .od-notice-icon { display: flex; align-items: center; padding: 0 20.8px 0 0; }
#page-orders .od-notice-text { flex: 1 1 auto; min-width: 0; }
#page-orders .od-notice-inner {
  width: 100%; margin: 30px 0; text-align: center; line-height: 1.6;
  font-family: -apple-system, BlinkMacSystemFont, "Microsoft YaHei", Arial, sans-serif;
}
#page-orders .od-notice-msg { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; text-align: left; }
#page-orders .od-notice-msg span { font-size: 15px; }
#page-orders .od-notice-msg strong { color: #c0392b; font-weight: 700; }
#page-orders .od-notice-divider { display: flex; align-items: center; gap: 15px; margin: 15px 0; }
#page-orders .od-notice-divider div { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #94a3b8, transparent); }
#page-orders .od-notice-divider span { color: #94a3b8; font-size: 14px; }
.cg-dark #page-orders .od-notice { color: var(--cg-text); }
.cg-dark #page-orders .od-notice-msg strong { color: #f08a7e; }

/* ===== Thẻ bảng ===== */
#page-orders .od-card {
  display: flex; flex-direction: column; margin-bottom: 30px; overflow: hidden;
  border: 1px solid var(--cg-line); border-radius: 24px;
  background: linear-gradient(155deg, #fff 65%, #f7f9fd);
  box-shadow: var(--cg-shadow); color: var(--cg-text); line-height: 22.4px;
}
#page-orders .od-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--cg-line);
  border-radius: 23px 23px 0 0; background: var(--cg-surface);
}
#page-orders .od-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;
}
#page-orders .od-card-body { padding: 0 10px; }
.cg-dark #page-orders .od-card { background: linear-gradient(155deg, var(--cg-surface) 65%, var(--cg-soft)); }

/* ===== Bảng của trang này: phần khác với khung bảng chung (DataTables bootstrap4 của ceoacc) ===== */
#page-orders .ft-dt-length { padding-right: 15px; }   /* col-md-6 trái: padding 0 15 0 0 */
#page-orders .ft-dt-filter { padding-left: 15px; }    /* col-md-6 phải: padding 0 0 0 15 */
#page-orders .ft-dt-top select { width: auto; cursor: default; }
#page-orders .ft-dt-top input { width: auto; min-height: 36px; -webkit-appearance: none; appearance: none; }
#page-orders .ft-dt-table { overflow: hidden; }
#page-orders .ft-dt-table thead { background: rgba(51,120,255,.05); }
#page-orders .ft-dt-bottom { align-items: stretch; }
#page-orders .ft-dt-pagination { border-radius: 5px; white-space: nowrap; text-align: right; }
/* Không đặt outline ở đây: khi bấm Tab, vòng focus chung của base.css (2px, lệch 3px) hiện cùng bóng này như gốc */
#page-orders .ft-page-link:focus { z-index: 3; box-shadow: 0 0 0 .2rem rgba(51,120,255,.25); }
/* Nút "Tải về" kiểu .btn-primary của ceoacc: rê chuột không đổi, nhấn nền #0056ff */
#page-orders .ft-btn-sm:hover { border-color: #2465bd; background: #2465bd; }
#page-orders .ft-btn-sm:active { border-color: #0052f2; background: #0056ff; box-shadow: none; }
/* Vòng focus bàn phím của nút/liên kết: dùng luật chung trong base.css (không khai báo lại ở trang).
   Đầu cột sắp xếp: GIỮ vòng focus của khối bảng chung (.ft-dt-table th:focus-visible, cùng màu/độ dày với luật chung,
   vẽ vào trong ô vì bảng cắt tràn) — gốc bỏ vòng này là lỗi trợ năng, không chép. */

/* ===== Điện thoại (≤767.98px): số đo ceoacc ở khổ 375, gốc chữ html 15.5px nên rem ra số lẻ ===== */
@media (max-width: 640px) {
  #page-orders :is(.od-hero, .od-notice, .od-card) { border-radius: 20px; }
  #page-orders .od-card-header { border-radius: 19px 19px 0 0; }
}
@media (max-width: 767.98px) {
  /* ceoacc riêng trang này: .container-fluid padding ngang 10px (khung chung 15px) */
  #page-orders { margin: 0 -5px; }
  #page-orders .od-hero { align-items: flex-start; gap: 15.5px; margin-bottom: 13.18px; padding: 13.175px; }
  #page-orders .od-hero h1 { margin-bottom: 2.79px; font-size: 22px; line-height: 29.7px; letter-spacing: -.55px; }
  #page-orders .od-hero-btn { padding: 6.975px 9.3px; }
  #page-orders .od-hero-btn i { margin-right: 4.84px; }
  #page-orders .od-notice { margin-bottom: 13.18px; padding: 11.16px 12.4px; font-size: 12.71px; }
  #page-orders .od-notice-icon { padding-right: 20.15px; }
  #page-orders .od-card-header { padding: 14px 16px; }
  #page-orders .od-card-body { padding: 11.16px; background: #f3f6fb; }
  .cg-dark #page-orders .od-card-body { background: var(--cg-bg); }
  /* .table-responsive (padding 0 10) + .dataTables_wrapper (padding 14) */
  #page-orders .ft-dt { padding: 14px 24px; }
  #page-orders .ft-dt-top { flex-wrap: wrap; margin: 0 0 9.3px; }
  #page-orders .ft-dt-top > div { flex: 0 0 100%; max-width: 100%; text-align: left; }
  #page-orders .ft-dt-top label { display: flex; align-items: center; gap: 6.2px; margin-bottom: 7.75px; }
  #page-orders .ft-dt-length label { padding: 0 0 0 20px; }
  #page-orders .ft-dt-filter label { padding: 0 20px 0 0; }
  #page-orders .ft-dt-top select { font-size: 16px; padding: 3.875px 34.875px 3.875px 7.75px; }
  #page-orders .ft-dt-top input { width: 100%; min-width: 0; margin-left: 0; padding: 3.875px 7.75px; font-size: 16px; }
  #page-orders .ft-dt-scroll { overflow: visible; }
  /* Bảng thành thẻ: mỗi đơn một thẻ, mỗi ô một hàng "nhãn | giá trị" */
  #page-orders .ft-dt-table { display: inline-table; width: 100%; overflow: visible; }
  #page-orders .ft-dt-table tbody, #page-orders .ft-dt-table tr, #page-orders .ft-dt-table td { display: block; width: 100%; }
  #page-orders .ft-dt-table thead { display: none; }
  #page-orders .ft-dt-table tbody tr {
    overflow: hidden; margin-bottom: 11.16px;
    border: 1px solid #dfe7f2; border-radius: 12px; background: var(--cg-surface);
    box-shadow: 0 5px 16px rgba(28,52,86,.06);
  }
  #page-orders .ft-dt-table tbody tr:hover { background: var(--cg-surface); }
  #page-orders .ft-dt-table tbody td {
    display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10.075px; align-items: start;
    min-height: 39px; padding: 8.99px 10.85px; border: 0; border-top: 1px solid #edf1f6;
    white-space: normal; word-break: break-word; text-align: left;
  }
  /* Ô đầu (#) ẩn */
  #page-orders .ft-dt-table tbody td:first-child { display: none; }
  /* Bảng rỗng: HIỆN chữ "Bảng này trống." trong thẻ (gốc ẩn luôn ô này, chỉ còn vạch 2px = lỗi, không chép) */
  #page-orders .ft-dt-table tbody td.ft-dt-empty { display: block; min-height: 0; padding: 10.85px; border-top: 0; text-align: center; }
  #page-orders .ft-dt-table tbody td:last-child { padding-top: 10.85px; padding-bottom: 10.85px; }
  #page-orders .ft-dt-table tbody td::before { color: #77859a; font-size: 11.625px; font-weight: 750; }
  #page-orders .ft-dt-table tbody td:nth-child(2)::before { content: "Số đơn hàng"; }
  #page-orders .ft-dt-table tbody td:nth-child(3)::before { content: "sản phẩm"; }
  #page-orders .ft-dt-table tbody td:nth-child(4)::before { content: "Số lượng"; }
  #page-orders .ft-dt-table tbody td:nth-child(5)::before { content: "Sự chi trả"; }
  #page-orders .ft-dt-table tbody td:nth-child(6)::before { content: "thời gian"; }
  #page-orders .ft-dt-table tbody td:nth-child(7)::before { content: "vận hành"; }
  #page-orders .ft-dt-bottom { display: flow-root; margin: 0 0 9.3px; } /* flow-root: giữ margin 2px của phân trang như hàng flex của ceoacc */
  #page-orders .ft-dt-info { max-width: none; padding: 10.2px 15px 20px 20px; text-align: left; }
  #page-orders .ft-dt-pagination { justify-content: center; margin: 2px 0 2px 15px; padding: 0 20px 20px 0; text-align: left; }
  #page-orders .ft-page-link { padding: 7.75px 11.625px; }
  .cg-dark #page-orders .ft-dt-table tbody tr { border-color: var(--cg-line); }
  .cg-dark #page-orders .ft-dt-table tbody td { border-color: var(--cg-line); }
}