/* =============================================================================
   MÀN DANH SÁCH ĐƠN HÀNG MUA (/purchase/orderpurchase) + ĐƠN HÀNG BÁN (/sales/ordersale)
   -----------------------------------------------------------------------------
   Phạm vi: CHỈ hai màn danh sách, bật bằng <VoucherView Class="op-list"> ở
   OrderPurchaseManager.razor / OrderSaleManager.razor. DOM chung của cả hai:
     .voucher-container.voucher-split.op-list > SfSplitter (dọc)
       pane 1: .voucher-panel--list  = .voucher-action (ToolbarVoucherCustom) + .voucher-list (SfGrid)
       pane 2: .voucher-panel--detail = SfTab (1 tab) > SfGrid chi tiết
   Popup chi tiết phiếu KHÔNG nằm ở đây — xem order-purchase.css (.op-form-root).

   Vì sao file toàn cục chứ không phải VoucherView.razor.css / ToolbarVoucherCustom.razor.css:
   CSS isolation của module được gộp bằng @import tới tên CÓ fingerprint, dev server chỉ phục
   vụ tên KHÔNG fingerprint ⇒ 404 (xem voucher.css, khối .vhb-btn). Nên cả hai file isolation
   đều không tới trình duyệt khi chạy dev — kể cả quy tắc bố cục (thẻ panel, khe splitter,
   toolbar flex-wrap). Những quy tắc bố cục cần cho giao diện được KHAI LẠI ở đây.

   Luật của file:
     1. Mọi selector bắt đầu bằng .op-list.voucher-split — độ đặc hiệu ≥ (0,3,0), thắng cả bản
        isolation (thêm [b-…]) nếu bản build publish có nạp được bundle. KHÔNG dùng :has(),
        KHÔNG để '*' ở vế phải cùng, không xâu chuỗi :not() dài trên selector theo từng ô lưới.
     2. VIỀN luôn xám trung tính — màu chỉ nằm ở NỀN, chữ, icon, nút (không viền màu, không
        vạch màu bên trái, không gạch chân màu).
     3. Nền trang + card cùng tông XANH TRỜI, card sáng hơn nền một bậc, tách bằng viền xám
        #bcc3ce + bóng đổ nhẹ. Hạn chế nền trắng ở mọi chỗ.
     4. Ô nhập: nền theo card nhưng nhạt hơn (không xám, không trắng); viền thường #a3aab7,
        hover ĐẬM hơn #6f7889; focus giữ nền, chỉ đổi viền + vòng sáng mờ.
     5. Thân bảng xám nhạt #f5f6f8 / #eceef2, tiêu đề cột xanh nhạt chữ xanh đậm #1b3f6e.
        Cột ghim (checkbox + STT) là position:sticky ⇒ nền ô phải ĐỤC, đặt trên td/th.
     6. Nút hành động luôn ĐỔ NỀN màu (không nút viền nền trắng).
     7. Bo góc một thang: card 12px, thẻ con/bảng/panel 10px, nút/ô nhập 8px, chip 999px.
   File phải nạp SAU cms.css + smart-custom.css (tiêu đề lưới, tab, phân trang dùng !important).
   ============================================================================= */

/* ---------- Token + nền trang ----------
   Bảng màu soi theo order-purchase.css (form đã được duyệt) nhưng khai lại trên gốc danh sách
   vì token --op-* chỉ sống trong .op-form-root. */
.op-list.voucher-split.voucher-container {
  --ol-page-bg: linear-gradient(160deg, #cbe0f7 0%, #d8e8fa 50%, #cadff6 100%);
  --ol-card: linear-gradient(180deg, #f1f7ff 0%, #e7f1fd 100%);
  --ol-card-solid: #ecf4fe;
  --ol-toolbar: linear-gradient(90deg, #d3e6fb 0%, #e0edfc 55%, #eaf3fe 100%);
  --ol-head-bg: linear-gradient(180deg, #d6e6f9 0%, #c4dbf4 100%);
  --ol-head-bg-solid: #cfe1f7;
  --ol-head-text: #1b3f6e;
  --ol-text: #1b1c1f;
  --ol-row: #f5f6f8;
  --ol-row-alt: #eceef2;
  --ol-row-hover: #dde9f7;
  --ol-row-sel: #c9def7;
  --ol-group-bg: #e3edf9;
  --ol-group-drop: #dce9f8;
  --ol-input-bg: #f7fbff;
  --ol-input-border: #a3aab7;
  --ol-input-border-hover: #6f7889;
  --ol-input-ring: 0 0 0 3px rgba(42, 120, 214, .20);
  --ol-border: #bcc3ce;
  --ol-border-soft: #dfe3e9;
  --ol-divider: #c9d1dc;
  --ol-shadow: 0 3px 10px rgba(20, 60, 120, .13), 0 1px 2px rgba(27, 28, 31, .08);
  --ol-radius: 12px;
  --ol-radius-sm: 8px;
  --ol-radius-pill: 999px;
  --ol-accent: var(--st-s2, #2a78d6);
  --ol-accent-2: #4f97ea;
  --ol-accent-700: #1d5fb0;
  --ol-good: var(--st-good, #0E9F4F);
  --ol-good-2: #22b865;
  --ol-good-700: #0b8442;
  --ol-teal: #0f8fa8;
  --ol-teal-2: #1fb3c9;
  --ol-teal-700: #0c7489;
  --ol-danger-soft: #fde3e4;
  --ol-danger-soft-hover: #fbcdd0;
  --ol-danger-text: #b02a37;
  --ol-soft-btn: #dce9f8;
  --ol-soft-btn-hover: #cadef5;

  display: block;
  height: auto; /* chiều cao do SfSplitter mang (tham số SplitterHeight) */
  width: auto;
  min-width: 0;
  /* Lề âm + padding bằng nhau: nền xanh trời tràn ra vùng padding của .tabs-body mà vị trí,
     chiều cao của splitter giữ NGUYÊN — thêm padding thuần là cộng 16px chiều cao ⇒ sinh cuộn
     ngoài (xem ghi chú chiều cao ở VoucherView.razor.css). */
  margin: -8px;
  padding: 8px;
  background: var(--ol-page-bg);
  border-radius: var(--ol-radius);
}

/* ---------- Splitter: pane chỉ là khung trong suốt, "thẻ" vẽ ở .voucher-panel ---------- */
.op-list.voucher-split .e-splitter {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.op-list.voucher-split .e-splitter > .e-pane {
  background: transparent;
  border: 0;
  padding: 0;
  overflow: hidden;
}

/* Thanh kéo thành khe 12px giữa hai card.
   !important vì Syncfusion ghi height: 1px thẳng vào thuộc tính style. */
.op-list.voucher-split .e-splitter > .e-split-bar.e-split-bar-vertical {
  height: 12px !important;
  background: transparent;
  border: 0;
  border-radius: var(--ol-radius-sm);
  transition: background-color .15s ease;
}

.op-list.voucher-split .e-splitter > .e-split-bar.e-split-bar-vertical.e-split-bar-hover,
.op-list.voucher-split .e-splitter > .e-split-bar.e-split-bar-vertical.e-split-bar-active,
.op-list.voucher-split .e-splitter > .e-split-bar.e-split-bar-vertical:hover {
  background: rgba(42, 120, 214, .12);
}

/* Tay nắm: viên thuốc xám bo tròn, bỏ icon chấm của theme */
.op-list.voucher-split .e-splitter > .e-split-bar.e-split-bar-vertical .e-resize-handler {
  width: 44px;
  height: 4px;
  border-radius: var(--ol-radius-pill);
  background: #9aa7b8;
  color: transparent;
}

.op-list.voucher-split .e-splitter > .e-split-bar.e-split-bar-vertical .e-resize-handler::before {
  content: none;
}

.op-list.voucher-split .e-splitter > .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-resize-handler,
.op-list.voucher-split .e-splitter > .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-resize-handler {
  background: var(--ol-accent);
}

/* ---------- Card ----------
   overflow:hidden là thứ bo góc lưới/tab vuông của Syncfusion bên trong — đừng bỏ. */
.op-list.voucher-split .voucher-panel {
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  background: var(--ol-card);
  border: 1px solid var(--ol-border);
  border-radius: var(--ol-radius);
  box-shadow: var(--ol-shadow);
  overflow: hidden;
}

/* Panel 1: thanh công cụ nằm trên, lưới danh sách ăn hết phần còn lại */
.op-list.voucher-split .voucher-panel--list {
  display: flex;
  flex-direction: column;
}

/* flex: 1 1 0 + min-height: 0 mới cho lưới co lại được */
.op-list.voucher-split .voucher-list {
  flex: 1 1 0;
  min-height: 0;
}

.op-list.voucher-split .voucher-panel--detail > .e-tab {
  height: 100%;
}

/* ---------- Thanh công cụ ----------
   Không sticky ở bố cục panel (giữ như bản gốc); góc trên do card bo. */
.op-list.voucher-split .voucher-action {
  position: static;
  flex: 0 0 auto;
  background: var(--ol-toolbar);
  border: 0;
  border-bottom: 1px solid var(--ol-divider);
  border-radius: 0;
}

/* Bố cục khai lại từ ToolbarVoucherCustom.razor.css (bản isolation 404 khi chạy dev):
   cho cả HÀNG xuống dòng thay vì bóp từng nút. */
.op-list.voucher-split .header-container {
  width: 100%;
  min-width: 0;
}

.op-list.voucher-split .top-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 12px;
  row-gap: 6px;
  padding: 7px 10px;
}

.op-list.voucher-split .header-left {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

/* "Thời gian: [__/__ - __/__] [Lọc]" luôn nằm trên MỘT dòng, không co */
.op-list.voucher-split .header-filter {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
}

.op-list.voucher-split .header-filter-label {
  margin: 0;
  white-space: nowrap;
  font-weight: 600;
  color: var(--ol-head-text);
}

.op-list.voucher-split .header-custom-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.op-list.voucher-split .header-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-left: auto;
}

.op-list.voucher-split .header-action,
.op-list.voucher-split .header-button {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
}

/* Vạch ngăn nhóm nút nghiệp vụ và nhóm cấu hình lưới — xám trung tính */
.op-list.voucher-split .header-button {
  position: relative;
  padding-left: 10px;
}

.op-list.voucher-split .header-button::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  border-left: 1px solid var(--ol-divider);
}

/* ---------- Ô chọn khoảng ngày ----------
   Đủ chỗ cho "01/09/2026 - 30/09/2026"; nền xanh nhạt theo toolbar, viền xám. */
.op-list.voucher-split .header-filter .e-input-group.e-date-range-wrapper {
  width: 230px;
  min-width: 230px;
  flex: 0 0 auto;
  background: var(--ol-input-bg);
  border: 1px solid var(--ol-input-border);
  border-radius: var(--ol-radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.op-list.voucher-split .header-filter .e-input-group.e-date-range-wrapper:hover {
  border-color: var(--ol-input-border-hover);
}

/* Focus bị smart-custom.css khoá (viền #007bff + box-shadow:none, !important, (0,6,0)):
   phải !important cùng độ đặc hiệu và nạp sau. Nền giữ nguyên, chỉ đổi viền + vòng sáng. */
.op-list.voucher-split .header-filter .e-input-group.e-control-wrapper.e-date-range-wrapper.e-input-focus {
  background: var(--ol-input-bg);
  border-color: var(--ol-accent) !important;
  box-shadow: var(--ol-input-ring) !important;
}

.op-list.voucher-split .header-filter .e-date-range-wrapper input.e-input {
  background: transparent;
  color: var(--ol-text);
}

.op-list.voucher-split .header-filter .e-date-range-wrapper .e-input-group-icon {
  background: transparent;
  color: var(--ol-head-text);
  border-radius: 0 var(--ol-radius-sm) var(--ol-radius-sm) 0;
}

/* ---------- Nút trên thanh công cụ: đổ nền, bo 8px, không co, không vỡ chữ ---------- */
.op-list.voucher-split .header-container .e-btn,
.op-list.voucher-split .header-container .e-dropdown-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: var(--ol-radius-sm);
  font-weight: 600;
  text-transform: none;
}

/* Syncfusion tự chèn margin-right cho icon; đã có gap nên bỏ để khoảng cách đều */
.op-list.voucher-split .header-container .e-btn .e-btn-icon,
.op-list.voucher-split .header-container .e-dropdown-btn .e-btn-icon {
  margin: 0;
  width: auto;
}

/* Xanh lá = hành động chính (Lọc, Thêm). Viền trùng màu nền — không thành "viền màu" riêng. */
.op-list.voucher-split .header-container .e-btn.e-success {
  background: linear-gradient(135deg, var(--ol-good) 0%, var(--ol-good-2) 100%);
  border-color: var(--ol-good);
  color: #fff;
  box-shadow: 0 1px 2px rgba(27, 28, 31, .12);
}

.op-list.voucher-split .header-container .e-btn.e-success:hover,
.op-list.voucher-split .header-container .e-btn.e-success:focus,
.op-list.voucher-split .header-container .e-btn.e-success:active,
.op-list.voucher-split .header-container .e-btn.e-success.e-active {
  background: linear-gradient(135deg, var(--ol-good-700) 0%, var(--ol-good) 100%);
  border-color: var(--ol-good-700);
  color: #fff;
  box-shadow: 0 2px 6px rgba(14, 159, 79, .30);
}

/* Xanh dương = thao tác nghiệp vụ (Duyệt phiếu / Áp xe / Tạo phiếu xuất / Xác nhận đã giao).
   Markup vẫn là e-outline: nền đặc thay cho nền trắng + viền cyan của theme. */
.op-list.voucher-split .header-actions .e-btn.e-outline.e-info {
  background: linear-gradient(135deg, var(--ol-accent) 0%, var(--ol-accent-2) 100%);
  border-color: var(--ol-accent);
  color: #fff;
  box-shadow: 0 1px 2px rgba(27, 28, 31, .12);
}

.op-list.voucher-split .header-actions .e-btn.e-outline.e-info:hover,
.op-list.voucher-split .header-actions .e-btn.e-outline.e-info:focus,
.op-list.voucher-split .header-actions .e-btn.e-outline.e-info:active,
.op-list.voucher-split .header-actions .e-btn.e-outline.e-info.e-active {
  background: linear-gradient(135deg, var(--ol-accent-700) 0%, var(--ol-accent) 100%);
  border-color: var(--ol-accent-700);
  color: #fff;
  box-shadow: 0 2px 6px rgba(42, 120, 214, .30);
}

/* Xanh ngọc = in / phát hành (In phiếu, Phát hành HĐ) — tách khỏi nhóm thao tác phiếu */
.op-list.voucher-split .header-actions .e-btn.e-dropdown-btn.e-outline.e-info,
.op-list.voucher-split .header-actions .e-btn.e-outline.e-info.skip-navigate {
  background: linear-gradient(135deg, var(--ol-teal) 0%, var(--ol-teal-2) 100%);
  border-color: var(--ol-teal);
  color: #fff;
}

.op-list.voucher-split .header-actions .e-btn.e-dropdown-btn.e-outline.e-info:hover,
.op-list.voucher-split .header-actions .e-btn.e-dropdown-btn.e-outline.e-info:focus,
.op-list.voucher-split .header-actions .e-btn.e-dropdown-btn.e-outline.e-info.e-active,
.op-list.voucher-split .header-actions .e-btn.e-outline.e-info.skip-navigate:hover,
.op-list.voucher-split .header-actions .e-btn.e-outline.e-info.skip-navigate:focus {
  background: linear-gradient(135deg, var(--ol-teal-700) 0%, var(--ol-teal) 100%);
  border-color: var(--ol-teal-700);
  color: #fff;
  box-shadow: 0 2px 6px rgba(15, 143, 168, .30);
}

/* Đỏ nhạt = Xoá: nền đỏ dịu chữ đỏ đậm, không để khối đỏ đặc giành sự chú ý với "Thêm" */
.op-list.voucher-split .header-actions .e-btn.e-outline.e-danger {
  background: var(--ol-danger-soft);
  border-color: var(--ol-danger-soft);
  color: var(--ol-danger-text);
  box-shadow: 0 1px 2px rgba(27, 28, 31, .08);
}

.op-list.voucher-split .header-actions .e-btn.e-outline.e-danger:hover,
.op-list.voucher-split .header-actions .e-btn.e-outline.e-danger:focus,
.op-list.voucher-split .header-actions .e-btn.e-outline.e-danger:active,
.op-list.voucher-split .header-actions .e-btn.e-outline.e-danger.e-active {
  background: var(--ol-danger-soft-hover);
  border-color: var(--ol-danger-soft-hover);
  color: var(--ol-danger-text);
}

/* Quầng focus bàn phím vẫn phải thấy được. Dùng outline chứ không box-shadow: các quy tắc
   :focus ở trên (đặc hiệu hơn) đã dùng box-shadow, chồng lên là mất quầng. */
.op-list.voucher-split .header-container .e-btn:focus-visible {
  outline: 2px solid rgba(42, 120, 214, .55);
  outline-offset: 2px;
}

.op-list.voucher-split .header-container .e-btn:disabled,
.op-list.voucher-split .header-container .e-btn.e-disabled {
  opacity: .55;
  box-shadow: none;
}

/* "Sắp xếp cột" / "Quản trị": nút cấu hình, nền xanh nhạt chữ xanh đậm — dịu hơn nút nghiệp
   vụ. smart-custom.css để nền trong suốt, chữ #2481ff và viền xanh vuông góc khi mở. */
.op-list.voucher-split .header-button .e-dropdown-btn.dropdownbtn-custom {
  background: var(--ol-soft-btn);
  border: 1px solid var(--ol-soft-btn);
  border-radius: var(--ol-radius-sm);
  color: var(--ol-head-text);
}

.op-list.voucher-split .header-button .e-dropdown-btn.dropdownbtn-custom:hover,
.op-list.voucher-split .header-button .e-dropdown-btn.dropdownbtn-custom:focus,
.op-list.voucher-split .header-button .e-dropdown-btn.dropdownbtn-custom.e-active {
  background: var(--ol-soft-btn-hover);
  border: 1px solid var(--ol-soft-btn-hover);
  border-radius: var(--ol-radius-sm);
  color: var(--ol-head-text);
}

/* ---------- Lưới Syncfusion (danh sách + chi tiết) ----------
   Bỏ khung ngoài: card đã có viền, overflow:hidden của card bo góc cho lưới. */
.op-list.voucher-split .e-grid {
  border: 0;
  border-radius: 0;
  background: var(--ol-card-solid);
}

.op-list.voucher-split .voucher-panel--detail .e-grid {
  height: 100%;
}

/* Header dính (EnableStickyHeader) ⇒ nền đục */
.op-list.voucher-split .e-grid .e-gridheader {
  background: var(--ol-card-solid);
  border-top: 0;
  border-bottom: 1px solid var(--ol-divider);
}

.op-list.voucher-split .e-grid .e-gridheader .e-headercontent {
  background: transparent;
  border: 0;
}

/* Tiêu đề cột: xanh nhạt, dải chuyển màu ĐỤC (ô ghim checkbox/STT là sticky) */
.op-list.voucher-split .e-grid .e-gridheader .e-headercell,
.op-list.voucher-split .e-grid .e-gridheader .e-headercell.e-leftfreeze {
  background: var(--ol-head-bg);
  border-color: var(--ol-divider);
}

/* Chữ tiêu đề xanh đậm: cms.css ép black/500 !important tới (0,5,0) ⇒ !important + nạp sau.
   KHÔNG nhắm .e-icons: khung checkbox "chọn tất cả" cũng mang .e-icons, tô màu là mất dấu tick. */
.op-list.voucher-split .e-grid .e-gridheader .e-headercell,
.op-list.voucher-split .e-grid .e-gridheader .e-headercell .e-headercelldiv,
.op-list.voucher-split .e-grid .e-gridheader .e-headercell .e-headertext,
.op-list.voucher-split .e-grid .e-gridheader .e-headercell .e-sortfilterdiv,
.op-list.voucher-split .e-grid .e-gridheader .e-headercell .e-filtermenudiv {
  color: var(--ol-head-text) !important;
  font-weight: 600 !important;
}

/* Hàng lọc: nền card đục (ô ghim cũng vậy), ô nhập bo 8px nền xanh nhạt */
.op-list.voucher-split .e-grid .e-gridheader .e-filterbarcell {
  background: var(--ol-card-solid);
  border-color: var(--ol-border-soft);
}

.op-list.voucher-split .e-grid .e-filterbarcell .e-input-group {
  background: var(--ol-input-bg);
  border: 1px solid var(--ol-input-border);
  border-radius: var(--ol-radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.op-list.voucher-split .e-grid .e-filterbarcell .e-input-group::before,
.op-list.voucher-split .e-grid .e-filterbarcell .e-input-group::after {
  display: none; /* bỏ gạch chân kiểu material */
}

.op-list.voucher-split .e-grid .e-filterbarcell .e-input-group:hover {
  border-color: var(--ol-input-border-hover);
}

.op-list.voucher-split .e-grid .e-filterbarcell .e-input-group.e-input-focus,
.op-list.voucher-split .e-grid .e-filterbarcell .e-input-group.e-control-wrapper.e-input-focus {
  background: var(--ol-input-bg);
  border-color: var(--ol-accent) !important;
  box-shadow: var(--ol-input-ring) !important;
}

.op-list.voucher-split .e-grid .e-filterbarcell .e-input-group input.e-filtertext {
  background: transparent;
  border: 0;
  color: var(--ol-text);
}

/* Thân bảng: xám nhạt, màu ĐỤC đặt thẳng trên td — cột ghim là sticky, nền trong suốt hoặc
   đặt trên tr sẽ để lộ dải trắng / chữ xuyên qua. (0,5,0) thắng nền ô ghim của theme (0,3,0). */
.op-list.voucher-split .e-grid .e-gridcontent,
.op-list.voucher-split .e-grid .e-gridcontent .e-content {
  background: var(--ol-row);
}

.op-list.voucher-split .e-grid .e-row .e-rowcell {
  background: var(--ol-row);
  border-color: var(--ol-border-soft);
}

.op-list.voucher-split .e-grid .e-altrow .e-rowcell {
  background: var(--ol-row-alt);
}

/* Hover: theme tô bằng linear-gradient trên selector rất dài ⇒ phải dùng shorthand background
   + !important (không thì gradient của theme vẫn phủ lên). */
.op-list.voucher-split .e-grid.e-gridhover .e-row:hover .e-rowcell,
.op-list.voucher-split .e-grid.e-gridhover .e-rowcell.e-frozenhover {
  background: var(--ol-row-hover) !important;
}

/* Dòng / ô đang chọn: xanh đục thay hồng --st-red-100 của smart-custom.css. Đặt SAU hover và
   cùng độ đặc hiệu để dòng đang chọn không đổi màu khi rê chuột. */
.op-list.voucher-split .e-grid .e-gridcontent .e-row .e-rowcell.e-selectionbackground,
.op-list.voucher-split .e-grid .e-gridcontent .e-row .e-rowcell.e-cellselectionbackground {
  background: var(--ol-row-sel) !important;
  color: var(--ol-text);
}

/* Vạch ngăn cột ghim: xám trung tính */
.op-list.voucher-split .e-grid .e-rowcell.e-freezeleftborder,
.op-list.voucher-split .e-grid .e-headercell.e-freezeleftborder {
  border-right-color: var(--ol-divider);
}

/* Nhóm dòng (đơn bán bật AllowGrouping từ CMS): vùng kéo nhóm + dòng tiêu đề nhóm xanh nhạt.
   Tiêu đề nhóm là sticky ⇒ màu đục. Giữ z-index !important của smart-custom.css. */
.op-list.voucher-split .e-grid .e-groupdroparea {
  background: var(--ol-group-drop);
  border: 0;
  border-bottom: 1px solid var(--ol-divider);
  border-radius: 0;
  color: var(--ol-head-text);
}

.op-list.voucher-split .e-grid .e-groupdroparea .e-groupheadercell {
  background: var(--ol-soft-btn-hover);
  border: 1px solid var(--ol-divider);
  border-radius: var(--ol-radius-pill);
  color: var(--ol-head-text);
}

.op-list.voucher-split .e-grid .e-gridcontent .e-groupcaptionrow .e-groupcaption,
.op-list.voucher-split .e-grid .e-gridcontent .e-groupcaptionrow .e-recordplusexpand,
.op-list.voucher-split .e-grid .e-gridcontent .e-groupcaptionrow .e-recordpluscollapse,
.op-list.voucher-split .e-grid .e-gridcontent .e-indentcell {
  background: var(--ol-group-bg);
  border-color: var(--ol-border-soft);
  color: var(--ol-head-text);
}

/* Dòng tổng (CMS bật EnableSum) */
.op-list.voucher-split .e-grid .e-gridfooter {
  background: var(--ol-card-solid);
  border-top: 1px solid var(--ol-divider);
}

.op-list.voucher-split .e-grid .e-summaryrow .e-summarycell {
  background: var(--ol-card-solid);
  border-color: var(--ol-border-soft);
  color: var(--ol-head-text);
  font-weight: 600;
}

/* ---------- Checkbox: khung nền xanh nhạt viền xám, đã chọn = nền xanh dấu tick trắng ----------
   smart-custom.css vẽ tick ĐỎ trên nền TRẮNG; theme có biến thể :hover / :focus tới (0,6,0). */
.op-list.voucher-split .e-checkbox-wrapper.e-css .e-frame {
  background-color: var(--ol-input-bg);
  border-color: #8a94a6;
  border-radius: 6px;
}

.op-list.voucher-split .e-checkbox-wrapper.e-css:hover .e-frame,
.op-list.voucher-split .e-checkbox-wrapper.e-css .e-checkbox:focus + .e-frame {
  background-color: var(--ol-input-bg);
  border-color: var(--ol-input-border-hover);
}

.op-list.voucher-split .e-checkbox-wrapper.e-css .e-frame.e-check,
.op-list.voucher-split .e-checkbox-wrapper.e-css .e-frame.e-stop,
.op-list.voucher-split .e-checkbox-wrapper.e-css:hover .e-frame.e-check,
.op-list.voucher-split .e-checkbox-wrapper.e-css:hover .e-frame.e-stop,
.op-list.voucher-split .e-checkbox-wrapper.e-css:active .e-frame.e-check,
.op-list.voucher-split .e-checkbox-wrapper.e-css .e-checkbox:focus + .e-frame.e-check,
.op-list.voucher-split .e-checkbox-wrapper.e-css .e-checkbox:focus + .e-frame.e-stop {
  background-color: var(--ol-accent);
  border-color: var(--ol-accent);
  color: #fff;
}

/* ---------- Thanh phân trang ----------
   Giữ số đo 40px / 28px của smart-custom.css, chỉ đổi màu + bo góc. */
.op-list.voucher-split .e-grid .e-gridpager {
  background: var(--ol-card-solid);
  border-top: 1px solid var(--ol-divider);
}

.op-list.voucher-split .e-grid .e-gridpager .e-pagercontainer {
  background: transparent;
}

.op-list.voucher-split .e-grid .e-gridpager .e-pagercontainer .e-numericitem,
.op-list.voucher-split .e-grid .e-gridpager .e-pagercontainer .e-first,
.op-list.voucher-split .e-grid .e-gridpager .e-pagercontainer .e-prev,
.op-list.voucher-split .e-grid .e-gridpager .e-pagercontainer .e-next,
.op-list.voucher-split .e-grid .e-gridpager .e-pagercontainer .e-last {
  border-radius: var(--ol-radius-sm);
  color: var(--ol-head-text);
}

.op-list.voucher-split .e-grid .e-gridpager .e-pagercontainer .e-numericitem:hover,
.op-list.voucher-split .e-grid .e-gridpager .e-pagercontainer .e-first:hover,
.op-list.voucher-split .e-grid .e-gridpager .e-pagercontainer .e-prev:hover,
.op-list.voucher-split .e-grid .e-gridpager .e-pagercontainer .e-next:hover,
.op-list.voucher-split .e-grid .e-gridpager .e-pagercontainer .e-last:hover {
  background: rgba(42, 120, 214, .12);
}

/* Trang đang đứng: smart-custom.css đặt #007bff !important tới (0,4,0) */
.op-list.voucher-split .e-grid .e-gridpager .e-pagercontainer .e-numericitem.e-currentitem {
  background: linear-gradient(135deg, var(--ol-accent) 0%, var(--ol-accent-2) 100%) !important;
  color: #fff !important;
  box-shadow: 0 1px 3px rgba(42, 120, 214, .35);
}

.op-list.voucher-split .e-grid .e-gridpager .e-pagerdropdown .e-input-group {
  background: var(--ol-input-bg);
  border: 1px solid var(--ol-input-border);
  border-radius: var(--ol-radius-sm);
}

.op-list.voucher-split .e-grid .e-gridpager .e-pagerdropdown .e-input-group:hover {
  border-color: var(--ol-input-border-hover);
}

.op-list.voucher-split .e-grid .e-gridpager .e-pagerdropdown .e-input-group.e-control-wrapper.e-input-focus {
  border-color: var(--ol-accent) !important;
  box-shadow: var(--ol-input-ring) !important;
}

.op-list.voucher-split .e-grid .e-gridpager .e-pagerdropdown input.e-input,
.op-list.voucher-split .e-grid .e-gridpager .e-pagerdropdown .e-input-group-icon {
  background: transparent;
}

/* ---------- Tab của panel chi tiết ----------
   smart-custom.css dựng tab kiểu "Chrome" cho MỌI .e-tab: tab đang chọn nền trắng + VIỀN ĐỎ,
   chữ đỏ. Ở đây: dải tiêu đề xanh nhạt, tab đang chọn là viên thuốc nền xanh dịu, không viền,
   không gạch chân. Dùng '>' để không rớt xuống tab lồng bên trong (nếu có).
   Giữ header 38px: SfTab tính chiều cao .e-content từ header lúc render. */
.op-list.voucher-split .voucher-panel--detail > .e-tab {
  border: 0;
  background: transparent;
}

.op-list.voucher-split .voucher-panel--detail > .e-tab > .e-tab-header {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 38px;
  min-height: 38px;
  padding: 0 8px;
  background: var(--ol-toolbar);
  border: 0;
  border-bottom: 1px solid var(--ol-divider);
  border-radius: 0;
}

/* Đường kẻ đáy của theme vẽ bằng ::before — đã có border-bottom xám ở trên */
.op-list.voucher-split .voucher-panel--detail > .e-tab > .e-tab-header::before {
  display: none;
}

.op-list.voucher-split .voucher-panel--detail > .e-tab > .e-tab-header .e-toolbar-items {
  background: transparent;
}

/* Gỡ pill + viền đỏ của smart-custom.css */
.op-list.voucher-split .voucher-panel--detail > .e-tab > .e-tab-header .e-toolbar-item,
.op-list.voucher-split .voucher-panel--detail > .e-tab > .e-tab-header .e-toolbar-item:hover,
.op-list.voucher-split .voucher-panel--detail > .e-tab > .e-tab-header .e-toolbar-item.e-active,
.op-list.voucher-split .voucher-panel--detail > .e-tab > .e-tab-header .e-toolbar-item.e-active:hover {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-weight: inherit;
}

.op-list.voucher-split .voucher-panel--detail > .e-tab > .e-tab-header .e-toolbar-item .e-tab-wrap,
.op-list.voucher-split .voucher-panel--detail > .e-tab > .e-tab-header .e-toolbar-item .e-tab-wrap:hover {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--ol-radius-pill);
  background: transparent;
}

/* Tab đang chọn: viên thuốc nền xanh dịu (chỉ nền, không viền màu) */
.op-list.voucher-split .voucher-panel--detail > .e-tab > .e-tab-header .e-toolbar-item.e-active .e-tab-wrap,
.op-list.voucher-split .voucher-panel--detail > .e-tab > .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:hover {
  background: linear-gradient(180deg, #c9ddf6 0%, #bcd5f3 100%);
  box-shadow: 0 1px 2px rgba(20, 60, 120, .12);
}

.op-list.voucher-split .voucher-panel--detail > .e-tab > .e-tab-header .e-toolbar-item .e-tab-text,
.op-list.voucher-split .voucher-panel--detail > .e-tab > .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-text,
.op-list.voucher-split .voucher-panel--detail > .e-tab > .e-tab-header .e-toolbar-item.e-active .e-tab-text,
.op-list.voucher-split .voucher-panel--detail > .e-tab > .e-tab-header .e-toolbar-item.e-active.e-ileft .e-tab-text,
.op-list.voucher-split .voucher-panel--detail > .e-tab > .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:hover .e-tab-text,
.op-list.voucher-split .voucher-panel--detail > .e-tab > .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:active .e-tab-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--ol-head-text);
  text-transform: none;
}

/* Không gạch chân màu */
.op-list.voucher-split .voucher-panel--detail > .e-tab > .e-tab-header .e-indicator {
  display: none;
}

.op-list.voucher-split .voucher-panel--detail > .e-tab > .e-content {
  background: transparent;
  border: 0;
}

.op-list.voucher-split .voucher-panel--detail > .e-tab > .e-content > .e-item {
  padding: 0;
}

/* ---------- Thanh cuộn mảnh bo tròn (chỉ vùng cuộn của lưới / tab) ---------- */
.op-list.voucher-split .e-grid .e-content::-webkit-scrollbar,
.op-list.voucher-split .voucher-panel--detail > .e-tab > .e-content::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.op-list.voucher-split .e-grid .e-content::-webkit-scrollbar-track,
.op-list.voucher-split .e-grid .e-content::-webkit-scrollbar-corner,
.op-list.voucher-split .voucher-panel--detail > .e-tab > .e-content::-webkit-scrollbar-track {
  background: transparent;
}

.op-list.voucher-split .e-grid .e-content::-webkit-scrollbar-thumb,
.op-list.voucher-split .voucher-panel--detail > .e-tab > .e-content::-webkit-scrollbar-thumb {
  background: #b8c2cf;
  border-radius: var(--ol-radius-pill);
}

.op-list.voucher-split .e-grid .e-content::-webkit-scrollbar-thumb:hover,
.op-list.voucher-split .voucher-panel--detail > .e-tab > .e-content::-webkit-scrollbar-thumb:hover {
  background: #9aa7b8;
}

/* ---------- Màn hẹp (khai lại từ ToolbarVoucherCustom.razor.css) ---------- */
/* Không đủ chỗ cho một hàng: cụm nút xuống dòng riêng, canh TRÁI thẳng với bộ lọc */
@media (max-width: 1280px) {
  .op-list.voucher-split .header-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
}

/* Rất hẹp: bỏ nhãn "Thời gian:" (ô đã có icon lịch) và vạch ngăn */
@media (max-width: 640px) {
  .op-list.voucher-split .header-filter-label {
    display: none;
  }

  .op-list.voucher-split .header-button {
    padding-left: 0;
  }

  .op-list.voucher-split .header-button::before {
    display: none;
  }
}