/* =====================================================================
   EDOC UI — hệ token & lớp giao diện dùng chung
   Nguồn chân lý duy nhất cho màu / chữ / khoảng cách / z-index của toàn app.
   Các trang chỉ tham chiếu biến (var(--eu-*)) và lớp .eu-*, không hard-code màu.
   Thứ tự nạp: sau Bootstrap + theme Radzen (để các quy tắc hài hoà bên dưới thắng).
   ===================================================================== */

:root {
  /* ---- Màu nhận diện ---- */
  --eu-brand-50:  #E8F7FF;
  --eu-brand-100: #C2E6FF;
  --eu-brand-200: #95DCFF;
  --eu-brand-400: #1DBBFF;   /* nhận diện: logo, icon, dấu nhấn */
  --eu-brand-600: #0A8CD0;   /* nút chính, link (AA trên nền trắng) */
  --eu-brand-700: #0872AA;   /* hover, chữ nhấn */

  /* ---- Xám ngả xanh ---- */
  --eu-n0:   #FFFFFF;
  --eu-n50:  #F3F6FA;
  --eu-n100: #EEF2F5;
  --eu-n200: #DDE3EA;
  --eu-n300: #C5CED8;
  --eu-n400: #9AA7B4;
  --eu-n600: #5B6B7A;
  --eu-n800: #2A3641;
  --eu-n900: #17212A;

  /* ---- Vai trò ---- */
  --eu-bg:        var(--eu-n50);
  --eu-surface:   var(--eu-n0);
  --eu-surface-2: var(--eu-n100);
  --eu-ink:       var(--eu-n900);
  --eu-ink-2:     var(--eu-n800);
  --eu-muted:     var(--eu-n600);
  --eu-faint:     var(--eu-n400);
  --eu-rule:      var(--eu-n200);
  --eu-focus:     0 0 0 3px rgba(10, 140, 208, .25);

  /* ---- Ngữ nghĩa (chỉ dùng cho trạng thái) ---- */
  --eu-ok:      #1E9E5A;  --eu-ok-bg:   #E4F5EC;  --eu-ok-ink:   #176B40;
  --eu-warn:    #E39A12;  --eu-warn-bg: #FFF3DA;  --eu-warn-ink: #8A5A00;
  --eu-bad:     #D9463D;  --eu-bad-bg:  #FBE9E7;  --eu-bad-ink:  #A8322B;
  --eu-info:    var(--eu-brand-600); --eu-info-bg: var(--eu-brand-50); --eu-info-ink: var(--eu-brand-700);
  --eu-neutral-bg: var(--eu-n100); --eu-neutral-ink: var(--eu-n600);

  /* ---- Chữ ---- */
  --eu-font: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --eu-brand-grad: linear-gradient(135deg, #0A8CD0 0%, #1DBBFF 100%);
  --eu-brand-shadow: 0 6px 16px rgba(10, 140, 208, .28);
  --eu-mono: Consolas, "Cascadia Mono", Menlo, monospace;
  --eu-fs-11: 11px; --eu-fs-12: 12px; --eu-fs-13: 13px; --eu-fs-14: 14px;
  --eu-fs-16: 16px; --eu-fs-20: 20px; --eu-fs-24: 24px;

  /* ---- Khoảng cách / kích thước ---- */
  --eu-sp-1: 4px; --eu-sp-2: 8px; --eu-sp-3: 12px; --eu-sp-4: 16px; --eu-sp-6: 24px; --eu-sp-8: 32px;
  --eu-control-h: 32px;
  --eu-row-h: 36px;
  --eu-header-h: 52px;
  --eu-nav-w: 232px;
  --eu-nav-rail-w: 60px;
  --eu-radius: 6px;
  --eu-radius-lg: 10px;
  --eu-shadow-1: 0 1px 2px rgba(23,33,42,.05), 0 4px 16px rgba(23,33,42,.06);
  --eu-shadow-2: 0 4px 12px rgba(23,33,42,.10), 0 12px 32px rgba(23,33,42,.10);

  /* ---- Lớp ---- */
  --eu-z-sticky: 10; --eu-z-nav: 20; --eu-z-header: 30; --eu-z-drawer: 40;
  --eu-z-dialog: 50; --eu-z-menu: 60; --eu-z-toast: 70;
}

/* =====================================================================
   1. NỀN
   ===================================================================== */
html, body {
  font-family: var(--eu-font) !important;
  font-size: var(--eu-fs-14);
  color: var(--eu-ink);
  background: var(--eu-bg);
  -webkit-font-smoothing: antialiased;
}
body { margin: 0; }
h1, h2, h3, h4, h5, h6 { color: var(--eu-ink); }
a { color: var(--eu-brand-600); }
a:hover { color: var(--eu-brand-700); }
::selection { background: var(--eu-brand-100); }
*:focus-visible { outline: none; box-shadow: var(--eu-focus); border-radius: var(--eu-radius); }

/* Thanh cuộn mảnh, cùng tông */
* { scrollbar-width: thin; scrollbar-color: var(--eu-n300) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--eu-n300); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--eu-n400); background-clip: padding-box; border: 2px solid transparent; }
*::-webkit-scrollbar-track { background: transparent; }

.eu-num { font-variant-numeric: tabular-nums; }
.eu-mono { font-family: var(--eu-mono); }
.eu-muted { color: var(--eu-muted); }
.eu-hide { display: none !important; }

/* =====================================================================
   2. NÚT
   ===================================================================== */
.eu-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--eu-control-h); padding: 0 12px;
  border: 1px solid var(--eu-rule); border-radius: var(--eu-radius);
  background: var(--eu-surface); color: var(--eu-ink-2);
  font: 500 var(--eu-fs-13)/1 var(--eu-font); white-space: nowrap; cursor: pointer;
  transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s;
  user-select: none;
}
.eu-btn:hover { background: var(--eu-surface-2); border-color: var(--eu-n300); color: var(--eu-ink); }
.eu-btn:active { background: var(--eu-n200); }
.eu-btn:disabled, .eu-btn.disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.eu-btn i { font-size: 13px; line-height: 1; }
.eu-btn.primary { background: var(--eu-brand-grad); border-color: transparent; color: #fff; font-weight: 600; box-shadow: var(--eu-brand-shadow); }
.eu-btn.primary:hover { filter: brightness(1.06); color: #fff; box-shadow: 0 8px 20px rgba(10, 140, 208, .34); }
.eu-btn.ghost { background: transparent; border-color: transparent; }
.eu-btn.ghost:hover { background: var(--eu-surface-2); }
.eu-btn.danger { color: var(--eu-bad-ink); border-color: #F1C4C0; background: var(--eu-bad-bg); }
.eu-btn.danger:hover { background: #F7D6D3; }
.eu-btn.icon { width: var(--eu-control-h); padding: 0; }
.eu-btn.sm { height: 28px; padding: 0 10px; font-size: var(--eu-fs-12); }
.eu-btn.sm.icon { width: 28px; }
.eu-btn.toggle.on { background: var(--eu-brand-50); border-color: var(--eu-brand-100); color: var(--eu-brand-700); }
.eu-btn .eu-badge { min-width: 16px; height: 16px; padding: 0 5px; border-radius: 8px; background: var(--eu-brand-600); color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

/* Nhóm nút chọn 1 (segmented) */
.eu-seg { display: inline-flex; border: 1px solid var(--eu-rule); border-radius: var(--eu-radius); background: var(--eu-surface); overflow: hidden; height: var(--eu-control-h); }
.eu-seg > button, .eu-seg > .eu-seg-item {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 0; background: transparent;
  color: var(--eu-muted); font: 500 var(--eu-fs-13)/1 var(--eu-font); cursor: pointer; white-space: nowrap;
  border-right: 1px solid var(--eu-rule);
}
.eu-seg > button:last-child, .eu-seg > .eu-seg-item:last-child { border-right: 0; }
.eu-seg > button:hover { background: var(--eu-surface-2); color: var(--eu-ink); }
.eu-seg > button.active, .eu-seg > .eu-seg-item.active { background: var(--eu-brand-50); color: var(--eu-brand-700); font-weight: 600; }

/* =====================================================================
   3. Ô NHẬP, PILL, CHIP
   ===================================================================== */
.eu-input {
  height: var(--eu-control-h); padding: 0 10px; border: 1px solid var(--eu-rule); border-radius: var(--eu-radius);
  background: var(--eu-surface); color: var(--eu-ink); font: var(--eu-fs-13)/1 var(--eu-font); width: 100%;
}
.eu-input:focus { border-color: var(--eu-brand-600); box-shadow: var(--eu-focus); outline: none; }
.eu-input::placeholder { color: var(--eu-faint); }
.eu-label { display: block; font-size: var(--eu-fs-12); color: var(--eu-muted); margin-bottom: 4px; font-weight: 500; }

.eu-pill { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 999px; font-size: var(--eu-fs-11); font-weight: 600; white-space: nowrap; line-height: 1; }
.eu-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.eu-pill.ok { background: var(--eu-ok-bg); color: var(--eu-ok-ink); }
.eu-pill.warn { background: var(--eu-warn-bg); color: var(--eu-warn-ink); }
.eu-pill.bad { background: var(--eu-bad-bg); color: var(--eu-bad-ink); }
.eu-pill.info { background: var(--eu-info-bg); color: var(--eu-info-ink); }
.eu-pill.neutral { background: var(--eu-neutral-bg); color: var(--eu-neutral-ink); }

.eu-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 6px 0 10px; border-radius: 999px; background: var(--eu-brand-50); color: var(--eu-brand-700); font-size: var(--eu-fs-12); font-weight: 600; white-space: nowrap; border: 1px solid var(--eu-brand-100); }
.eu-chip .x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; cursor: pointer; opacity: .7; font-size: 11px; }
.eu-chip .x:hover { opacity: 1; background: var(--eu-brand-100); }
.eu-chip.neutral { background: var(--eu-surface-2); color: var(--eu-ink-2); border-color: var(--eu-rule); }

/* =====================================================================
   4. THẺ, KHU VỰC, TRẠNG THÁI TRỐNG
   ===================================================================== */
.eu-card { background: var(--eu-surface); border: 1px solid var(--eu-rule); border-radius: var(--eu-radius-lg); }
.eu-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 48px 16px; color: var(--eu-muted); text-align: center; }
.eu-empty i { font-size: 28px; color: var(--eu-n300); }
.eu-empty b { color: var(--eu-ink-2); font-weight: 600; }

/* =====================================================================
   5. KHUNG ỨNG DỤNG (app shell)
   .eu-app[data-nav=expanded|rail]  ·  mobile: [data-nav-open]
   ===================================================================== */
.eu-app { display: grid; grid-template-rows: var(--eu-header-h) 1fr; grid-template-columns: var(--eu-nav-w) 1fr; height: 100vh; overflow: hidden; background: var(--eu-bg); }
.eu-app[data-nav="rail"] { grid-template-columns: var(--eu-nav-rail-w) 1fr; }
.eu-app > .eu-header { grid-column: 1 / -1; }
.eu-app > .eu-nav { grid-row: 2; grid-column: 1; }
.eu-app > .eu-main { grid-row: 2; grid-column: 2; min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.eu-main > article { flex: 1; min-height: 0; overflow: auto; }

/* Header */
.eu-header { position: relative; z-index: var(--eu-z-header); display: flex; align-items: center; gap: 12px; height: var(--eu-header-h); padding: 0 16px 0 12px; background: var(--eu-surface); border-bottom: 1px solid var(--eu-rule); box-shadow: 0 1px 0 rgba(23,33,42,.03), 0 4px 14px rgba(23,33,42,.05); }
.eu-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--eu-brand-grad); opacity: .9; }
.eu-header .eu-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.eu-header .eu-brand .logo { font: 800 19px/1 var(--eu-font); letter-spacing: .04em; background: var(--eu-brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eu-header .eu-brand .logo b { font-weight: 500; }
.eu-header .eu-page-title { font-size: var(--eu-fs-14); color: var(--eu-muted); padding-left: 12px; border-left: 1px solid var(--eu-rule); }
.eu-header .eu-spacer { flex: 1; }
.eu-header .eu-hamburger { display: none; }
.eu-header .eu-branch { height: 26px; padding: 0 10px; border-radius: 999px; background: var(--eu-brand-50); color: var(--eu-brand-700); font-size: var(--eu-fs-12); font-weight: 600; display: inline-flex; align-items: center; white-space: nowrap; }
.eu-header .eu-iconbtn { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--eu-muted); background: transparent; border: 0; cursor: pointer; position: relative; }
.eu-header .eu-iconbtn:hover { background: var(--eu-surface-2); color: var(--eu-ink); }
.eu-header .eu-user { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 6px 0 4px; border-radius: 999px; cursor: pointer; }
.eu-header .eu-user:hover { background: var(--eu-surface-2); }
.eu-header .eu-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--eu-brand-400), var(--eu-brand-600)); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.eu-header .eu-user .name { font-size: var(--eu-fs-13); font-weight: 600; color: var(--eu-ink-2); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sidenav */
.eu-nav { position: relative; z-index: var(--eu-z-nav); display: flex; flex-direction: column; background: var(--eu-surface); border-right: 1px solid var(--eu-rule); overflow: hidden; }
.eu-nav .eu-nav-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 8px; }
.eu-nav .eu-nav-group { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--eu-faint); padding: 12px 10px 4px; white-space: nowrap; }
.eu-nav .eu-nav-item { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; margin: 1px 0; border-radius: var(--eu-radius); color: var(--eu-ink-2); text-decoration: none; font-size: var(--eu-fs-13); font-weight: 500; white-space: nowrap; position: relative; }
.eu-nav .eu-nav-item i { width: 18px; text-align: center; font-size: 14px; color: var(--eu-muted); flex: none; }
.eu-nav .eu-nav-item:hover { background: var(--eu-surface-2); color: var(--eu-ink); }
.eu-nav .eu-nav-item.active { background: linear-gradient(90deg, var(--eu-brand-50), rgba(232,247,255,.35)); color: var(--eu-brand-700); font-weight: 600; box-shadow: inset 0 0 0 1px var(--eu-brand-100); }
.eu-nav .eu-nav-item.active i { color: var(--eu-brand-600); }
.eu-nav .eu-nav-item.active::before { content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--eu-brand-600); }
.eu-nav .eu-nav-item .eu-nav-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--eu-bad); color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.eu-nav .eu-nav-foot { padding: 10px 12px; border-top: 1px solid var(--eu-rule); font-size: var(--eu-fs-11); color: var(--eu-faint); white-space: nowrap; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.eu-nav .eu-nav-toggle { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--eu-rule); background: var(--eu-surface); color: var(--eu-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.eu-nav .eu-nav-toggle:hover { background: var(--eu-surface-2); color: var(--eu-ink); }
.eu-nav .eu-nav-toggle i { transition: transform .2s; font-size: 11px; }
.eu-nav .eu-nav-tip { display: none; }

/* Rail: chỉ icon; tên hiện dạng tooltip khi rê chuột */
.eu-app[data-nav="rail"] .eu-nav .eu-nav-group { height: 8px; padding: 0; overflow: hidden; border-top: 1px solid var(--eu-rule); margin: 6px 6px 2px; }
.eu-app[data-nav="rail"] .eu-nav .eu-nav-item { justify-content: center; padding: 0; }
.eu-app[data-nav="rail"] .eu-nav .eu-nav-item span, .eu-app[data-nav="rail"] .eu-nav .eu-nav-item .eu-nav-badge { display: none; }
.eu-app[data-nav="rail"] .eu-nav .eu-nav-item .eu-nav-tip { display: none; position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: var(--eu-n900); color: #fff; font-size: var(--eu-fs-12); font-weight: 500; padding: 4px 8px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: var(--eu-z-menu); }
.eu-app[data-nav="rail"] .eu-nav .eu-nav-item:hover .eu-nav-tip { display: block; }
.eu-app[data-nav="rail"] .eu-nav .eu-nav-foot { justify-content: center; }
.eu-app[data-nav="rail"] .eu-nav .eu-nav-foot .copy { display: none; }
.eu-app[data-nav="rail"] .eu-nav .eu-nav-toggle i { transform: rotate(180deg); }
.eu-app[data-nav="rail"] .eu-nav .eu-nav-item.active::before { left: -6px; }

.eu-nav-backdrop { display: none; }

/* Tablet: mặc định rail (người dùng vẫn mở rộng được) */
@media (max-width: 1199px) {
  .eu-app { grid-template-columns: var(--eu-nav-rail-w) 1fr; }
  .eu-app[data-nav="expanded"] { grid-template-columns: var(--eu-nav-w) 1fr; }
  .eu-header .eu-page-title { display: none; }
}

/* Điện thoại: sidenav là ngăn kéo trượt */
@media (max-width: 767px) {
  .eu-app, .eu-app[data-nav="expanded"], .eu-app[data-nav="rail"] { grid-template-columns: 1fr; }
  .eu-app > .eu-main { grid-column: 1; }
  .eu-app > .eu-nav { position: fixed; top: var(--eu-header-h); left: 0; bottom: 0; width: var(--eu-nav-w); transform: translateX(-100%); transition: transform .2s ease; z-index: var(--eu-z-drawer); box-shadow: none; }
  .eu-app[data-nav-open] > .eu-nav { transform: translateX(0); box-shadow: var(--eu-shadow-2); }
  /* trong ngăn kéo luôn hiện đầy đủ tên */
  .eu-app[data-nav="rail"] .eu-nav .eu-nav-item { justify-content: flex-start; padding: 0 10px; }
  .eu-app[data-nav="rail"] .eu-nav .eu-nav-item span, .eu-app[data-nav="rail"] .eu-nav .eu-nav-item .eu-nav-badge { display: inline-flex; }
  .eu-app[data-nav="rail"] .eu-nav .eu-nav-group { height: auto; padding: 12px 10px 4px; border: 0; margin: 0; }
  .eu-app[data-nav="rail"] .eu-nav .eu-nav-foot .copy { display: block; }
  .eu-app[data-nav="rail"] .eu-nav .eu-nav-item .eu-nav-tip { display: none !important; }
  .eu-nav .eu-nav-toggle { display: none; }
  .eu-nav-backdrop { display: block; position: fixed; inset: var(--eu-header-h) 0 0 0; background: rgba(23,33,42,.35); z-index: calc(var(--eu-z-drawer) - 1); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .eu-app[data-nav-open] .eu-nav-backdrop { opacity: 1; pointer-events: auto; }
  .eu-header { padding: 0 8px; gap: 6px; }
  .eu-header .eu-hamburger { display: inline-flex; }
  .eu-header .eu-branch, .eu-header .eu-user .name, .eu-header .eu-user .caret { display: none; }
}

/* =====================================================================
   6. HEADER TRANG + THANH CÔNG CỤ + BỘ LỌC
   ===================================================================== */
.eu-page { display: flex; flex-direction: column; min-height: 100%; }
.eu-page-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px 8px; flex-wrap: wrap; }
.eu-page-header h1, .eu-page-header .eu-title { font-size: var(--eu-fs-20); font-weight: 650; margin: 0; letter-spacing: -.01em; color: var(--eu-ink); }
.eu-page-header .eu-count { font-size: var(--eu-fs-13); color: var(--eu-muted); font-variant-numeric: tabular-nums; }
.eu-page-header .eu-spacer { flex: 1; }
.eu-page-header .eu-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.eu-toolbar { display: flex; align-items: center; gap: 6px; padding: 0 16px 8px; flex-wrap: wrap; }
.eu-toolbar .eu-spacer { flex: 1; }
.eu-toolbar .eu-filter { min-width: 150px; max-width: 220px; }
.eu-toolbar .eu-filter .rz-dropdown, .eu-toolbar .eu-filter .rz-textbox, .eu-toolbar .eu-filter .rz-datepicker { width: 100% !important; }
.eu-chips { display: flex; align-items: center; gap: 6px; padding: 0 16px 8px; flex-wrap: wrap; }
.eu-chips .clear { font-size: var(--eu-fs-12); color: var(--eu-muted); cursor: pointer; padding: 0 6px; }
.eu-chips .clear:hover { color: var(--eu-bad-ink); }

/* Thanh chọn hàng loạt */
.eu-bulkbar { display: flex; align-items: center; gap: 8px; margin: 0 16px 8px; padding: 6px 8px 6px 12px; border-radius: var(--eu-radius-lg); background: var(--eu-n900); color: #fff; box-shadow: var(--eu-shadow-1); }
.eu-bulkbar .n { font-weight: 700; font-variant-numeric: tabular-nums; }
.eu-bulkbar .eu-btn { background: transparent; border-color: rgba(255,255,255,.28); color: #fff; height: 28px; font-size: var(--eu-fs-12); }
.eu-bulkbar .eu-btn:hover { background: rgba(255,255,255,.12); }
.eu-bulkbar .eu-btn.primary { background: var(--eu-brand-600); border-color: var(--eu-brand-600); }
.eu-bulkbar .eu-spacer { flex: 1; }
.eu-bulkbar .close { cursor: pointer; opacity: .8; padding: 4px 8px; }
.eu-bulkbar .close:hover { opacity: 1; }

/* Menu thả xuống của nút ⋯ */
.eu-menu { position: absolute; top: calc(100% + 4px); right: 0; min-width: 200px; background: var(--eu-surface); border: 1px solid var(--eu-rule); border-radius: var(--eu-radius-lg); box-shadow: var(--eu-shadow-2); padding: 4px 0; z-index: var(--eu-z-menu); }
.eu-menu-item { display: flex; align-items: center; gap: 10px; padding: 8px 14px; font-size: var(--eu-fs-13); color: var(--eu-ink-2); cursor: pointer; white-space: nowrap; }
.eu-menu-item i { width: 16px; text-align: center; color: var(--eu-muted); }
.eu-menu-item:hover { background: var(--eu-surface-2); color: var(--eu-ink); }
.eu-menu-item.disabled { opacity: .5; pointer-events: none; }
.eu-menu-sep { height: 1px; background: var(--eu-rule); margin: 4px 8px; }
.eu-anchor { position: relative; }

/* Ngăn kéo (bộ lọc khác) */
.eu-drawer-backdrop { position: fixed; inset: 0; background: rgba(23,33,42,.28); z-index: calc(var(--eu-z-drawer) - 1); }
.eu-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); background: var(--eu-surface); box-shadow: var(--eu-shadow-2); z-index: var(--eu-z-drawer); display: flex; flex-direction: column; animation: eu-slide-in .18s ease-out; }
@keyframes eu-slide-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.eu-drawer-head { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--eu-rule); }
.eu-drawer-head h3 { font-size: var(--eu-fs-16); font-weight: 650; margin: 0; flex: 1; }
.eu-drawer-body { flex: 1; overflow: auto; padding: 12px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 12px; align-content: start; }
.eu-drawer-body .span2 { grid-column: 1 / -1; }
.eu-drawer-body .rz-dropdown, .eu-drawer-body .rz-textbox, .eu-drawer-body .rz-numeric, .eu-drawer-body .rz-datepicker { width: 100% !important; }
.eu-drawer-foot { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--eu-rule); background: var(--eu-surface); }
.eu-drawer-foot .eu-spacer { flex: 1; }
@media (max-width: 767px) { .eu-drawer-body { grid-template-columns: 1fr; } }

/* Thanh phân trang */
.eu-pager { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-top: 1px solid var(--eu-rule); background: var(--eu-surface); font-size: var(--eu-fs-12); color: var(--eu-muted); position: sticky; bottom: 0; z-index: var(--eu-z-sticky); }
.eu-pager .range { font-variant-numeric: tabular-nums; }
.eu-pager .eu-spacer { flex: 1; }
.eu-pager .rz-pager { padding: 0; background: transparent; border: 0; }
.eu-pager .rz-pager .rz-paginator-element, .eu-pager .rz-pager .rz-paginator-page { min-width: 28px; height: 28px; line-height: 28px; font-size: var(--eu-fs-12); border-radius: var(--eu-radius); }

/* =====================================================================
   7. HÀI HOÀ RADZEN + BOOTSTRAP THEO TOKEN
   (áp toàn app — trang phụ tự nhận diện mạo mới không cần sửa từng trang)
   ===================================================================== */
.rz-textbox, .rz-dropdown, .rz-numeric, .rz-datepicker .rz-inputtext, .rz-multiselect, .rz-lookup, .rz-textarea, .rz-datepicker,
.rz-numeric .rz-inputtext, .rz-dropdown .rz-inputtext, .rz-multiselect .rz-inputtext,
.rz-dropdown-datagrid .rz-inputtext, .rz-autocomplete .rz-inputtext,
.form-control, .form-select {
  font-family: var(--eu-font) !important;
  font-size: var(--eu-fs-13) !important;
  border-radius: var(--eu-radius) !important;
  border-color: var(--eu-rule) !important;
  color: var(--eu-ink) !important;
  min-height: 0 !important;
}
.rz-textbox, .rz-dropdown, .rz-numeric, .rz-multiselect, .rz-lookup, .rz-datepicker,
.rz-datepicker .rz-inputtext, .rz-numeric .rz-inputtext, .rz-dropdown-datagrid .rz-inputtext,
.form-control:not(textarea), .form-select { height: var(--eu-control-h) !important; }
.rz-textbox:focus, .rz-dropdown:focus-within, .rz-numeric:focus-within, .rz-datepicker:focus-within, .rz-multiselect:focus-within,
.form-control:focus, .form-select:focus { border-color: var(--eu-brand-600) !important; box-shadow: var(--eu-focus) !important; }
.rz-placeholder, .rz-textbox::placeholder, .form-control::placeholder { color: var(--eu-faint) !important; opacity: 1; }
.rz-dropdown .rz-dropdown-trigger, .rz-multiselect .rz-multiselect-trigger { color: var(--eu-muted); }
.rz-dropdown-panel, .rz-multiselect-panel, .rz-datepicker-panel, .rz-popup, .rz-lookup-panel, .rz-autocomplete-panel { border-radius: var(--eu-radius-lg) !important; border: 1px solid var(--eu-rule) !important; box-shadow: var(--eu-shadow-2) !important; font-family: var(--eu-font) !important; }
.rz-dropdown-item, .rz-multiselect-item { font-size: var(--eu-fs-13) !important; }
.rz-dropdown-item.rz-state-highlight, .rz-multiselect-item.rz-state-highlight { background: var(--eu-brand-50) !important; color: var(--eu-brand-700) !important; }
.rz-chip { border-radius: 999px !important; background: var(--eu-brand-50) !important; color: var(--eu-brand-700) !important; font-size: var(--eu-fs-11) !important; }

.rz-button, .btn { font-family: var(--eu-font) !important; border-radius: var(--eu-radius) !important; font-size: var(--eu-fs-13) !important; }
.rz-button.rz-primary { background: var(--eu-brand-600) !important; color: #fff !important; }
.rz-button.rz-primary:hover { background: var(--eu-brand-700) !important; }
.rz-button.rz-secondary, .rz-button.rz-light { background: var(--eu-surface) !important; color: var(--eu-ink-2) !important; border: 1px solid var(--eu-rule) !important; }
.rz-button.rz-danger { background: var(--eu-bad) !important; color: #fff !important; }
.rz-button.rz-success { background: var(--eu-ok) !important; color: #fff !important; }
.rz-button-md { min-height: var(--eu-control-h) !important; height: var(--eu-control-h) !important; padding: 0 12px !important; }
.rz-button-sm { min-height: 28px !important; height: 28px !important; }
.btn-primary { background: var(--eu-brand-600) !important; border-color: var(--eu-brand-600) !important; }
.btn-primary:hover { background: var(--eu-brand-700) !important; border-color: var(--eu-brand-700) !important; }
.btn-secondary { background: var(--eu-surface) !important; color: var(--eu-ink-2) !important; border-color: var(--eu-rule) !important; }

/* Radzen DataGrid (bảng mặt hàng, danh mục, cài đặt) */
.rz-grid-table, .rz-datatable, .rz-data-grid { font-family: var(--eu-font) !important; font-size: var(--eu-fs-13) !important; }
.rz-data-grid { border: 1px solid var(--eu-rule) !important; border-radius: var(--eu-radius-lg) !important; }
.rz-grid-table thead th, .rz-datatable-thead th, .rz-data-grid .rz-datatable-thead > tr > th, .rz-grid-table th .rz-column-title {
  background: var(--eu-surface-2) !important; color: var(--eu-muted) !important; font-size: var(--eu-fs-11) !important; font-weight: 650 !important;
  letter-spacing: .05em; text-transform: uppercase; border-color: var(--eu-rule) !important;
}
.rz-grid-table tbody td, .rz-datatable-data td, .rz-data-grid .rz-datatable-data > tr > td { border-color: var(--eu-rule) !important; padding: 6px 12px !important; }
.rz-data-row:hover > td, .rz-datatable-data tr:hover > td { background: var(--eu-brand-50) !important; }
.rz-state-highlight > td, .rz-datatable-data tr.rz-state-highlight > td { background: var(--eu-brand-100) !important; }
.rz-pager { border-top: 1px solid var(--eu-rule) !important; background: var(--eu-surface) !important; }

/* Radzen dialog / BlazorDialog: bo góc, bóng, tiêu đề */
.rz-dialog, .modal-content, .dialog-content, .blazor-dialog-content { border-radius: var(--eu-radius-lg) !important; box-shadow: var(--eu-shadow-2) !important; border: 1px solid var(--eu-rule) !important; font-family: var(--eu-font) !important; }
.rz-dialog-titlebar, .modal-header { background: var(--eu-surface) !important; border-bottom: 1px solid var(--eu-rule) !important; padding: 12px 16px !important; }
.rz-dialog-title, .modal-title { font-size: var(--eu-fs-16) !important; font-weight: 650 !important; color: var(--eu-ink) !important; }
.modal-footer { border-top: 1px solid var(--eu-rule) !important; }

/* Tabs Radzen */
.rz-tabview-nav li a { font-family: var(--eu-font) !important; font-size: var(--eu-fs-13) !important; }
.rz-tabview-nav li.rz-tabview-selected a { color: var(--eu-brand-700) !important; }
.rz-tabview-nav li.rz-tabview-selected { border-bottom-color: var(--eu-brand-600) !important; }

/* Checkbox / radio */
.rz-chkbox-box.rz-state-active, .rz-radiobutton-box.rz-state-active { background: var(--eu-brand-600) !important; border-color: var(--eu-brand-600) !important; }
input[type="checkbox"] { accent-color: var(--eu-brand-600); }

/* =====================================================================
   8. BẢNG CÂY CHỨNG TỪ (EdocTable) — lớp hiển thị
   ===================================================================== */
.Table-wrapper { padding: 0 16px 8px; }
.Table-container { border: 1px solid var(--eu-rule); border-radius: var(--eu-radius-lg); background: var(--eu-surface); overflow: auto; box-shadow: var(--eu-shadow-1); }
.hierarchy-table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--eu-font) !important; font-size: var(--eu-fs-13); color: var(--eu-ink-2); }
.hierarchy-table thead th {
  font-family: var(--eu-font) !important; font-size: var(--eu-fs-11) !important; font-weight: 650 !important; letter-spacing: .05em; text-transform: uppercase;
  color: var(--eu-muted) !important; background: var(--eu-surface-2) !important; border-bottom: 1px solid var(--eu-rule) !important;
  padding: 0 12px !important; height: 34px; white-space: nowrap; position: sticky; top: 0; z-index: var(--eu-z-sticky);
}
.hierarchy-table thead th .fa-sort { opacity: 0; transition: opacity .12s; color: var(--eu-faint); }
.hierarchy-table thead th:hover .fa-sort, .hierarchy-table thead th.sorted .fa-sort { opacity: 1; }
.hierarchy-table thead th.sorted .fa-sort { color: var(--eu-brand-600); }
.hierarchy-table tbody td { padding: 0 12px !important; height: var(--eu-row-h); border-bottom: 1px solid var(--eu-rule) !important; vertical-align: middle; white-space: nowrap; font-size: var(--eu-fs-13); }
.hierarchy-table tbody tr { height: var(--eu-row-h) !important; min-height: 0 !important; }
.hierarchy-table tbody tr:last-child td { border-bottom: 0 !important; }
.hierarchy-table tbody tr.tree-band-b:not(.selected-row) > td { background-color: var(--eu-n50); }
.hierarchy-table tbody tr:not(.skeleton-row):hover > td { background-color: var(--eu-brand-50) !important; }
.hierarchy-table tr.selected-row td, .hierarchy-table td.selected-row { background-color: var(--eu-brand-100) !important; }
.hierarchy-table th.sticky-column, .hierarchy-table td.sticky-column { position: sticky; left: 0; z-index: calc(var(--eu-z-sticky) - 1); background: inherit; box-shadow: 1px 0 0 var(--eu-rule); }
.hierarchy-table thead th.sticky-column { z-index: calc(var(--eu-z-sticky) + 1); }
.hierarchy-table tbody tr:not(.selected-row) td.sticky-column { background-color: var(--eu-surface); }
.hierarchy-table tbody tr.tree-band-b:not(.selected-row) td.sticky-column { background-color: var(--eu-n50); }
.hierarchy-table tbody tr:not(.skeleton-row):hover td.sticky-column { background-color: var(--eu-brand-50); }
.hierarchy-table tbody tr.selected-row td.sticky-column { background-color: var(--eu-brand-100); }
.hierarchy-table .grid_name_column { padding: 0; }
.hierarchy-table td.tree-cell { white-space: nowrap; }
.hierarchy-table .totalversion { color: var(--eu-brand-700); font-weight: 600; text-decoration: underline dotted; text-underline-offset: 2px; }
.hierarchy-table .expand-btn { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--eu-rule); background: var(--eu-surface); }
.hierarchy-table .expand-btn:hover { background: var(--eu-brand-50); border-color: var(--eu-brand-200); }
.hierarchy-table .tree-child-count { background: var(--eu-brand-50); color: var(--eu-brand-700); }
.hierarchy-table .tree-guide { background: linear-gradient(to right, transparent 8px, var(--eu-n200) 8px, var(--eu-n200) 9px, transparent 9px); }
.hierarchy-table .tree-leaf-dot::before { background: var(--eu-n300); }
.hierarchy-table tbody tr.doc-status-Cancel > td:first-child::before { background: var(--eu-bad); }
.hierarchy-table tbody tr.doc-status-Completed > td:first-child::before { background: var(--eu-ok); }
.hierarchy-table tbody tr.doc-status-Draft > td:first-child::before { background: var(--eu-n400); }
.hierarchy-table tbody tr.doc-status-Created > td:first-child::before { background: var(--eu-brand-400); }
.hierarchy-table .field-error { font-size: var(--eu-fs-11); color: var(--eu-bad-ink); }
.hierarchy-table tr.validation-error td { box-shadow: inset 0 0 0 1px var(--eu-bad); }
.hierarchy-table tr.save-success td { box-shadow: inset 0 0 0 1px var(--eu-ok); }
.hierarchy-table input.rz-textbox, .hierarchy-table .rz-dropdown, .hierarchy-table .rz-numeric, .hierarchy-table .rz-datepicker { height: 28px !important; font-size: var(--eu-fs-12) !important; }
.hierarchy-table .rz-datepicker .rz-inputtext { height: 28px !important; }
.hierarchy-table .skeleton-bar { background: linear-gradient(90deg, var(--eu-n100) 25%, var(--eu-n50) 50%, var(--eu-n100) 75%); background-size: 200% 100%; }

/* Ô trạng thái dạng pill (RenderColumns đặt class theo trạng thái) */
.hierarchy-table .eu-status { display: inline-flex; }

/* Thao tác nhanh cuối dòng */
.hierarchy-table td.eu-rowactions { width: 1%; padding: 0 6px !important; }
.hierarchy-table .eu-rowactions .wrap { display: inline-flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.hierarchy-table tbody tr:hover .eu-rowactions .wrap { opacity: 1; }
.hierarchy-table .eu-rowactions button { width: 26px; height: 26px; border-radius: var(--eu-radius); border: 1px solid transparent; background: transparent; color: var(--eu-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.hierarchy-table .eu-rowactions button:hover { background: var(--eu-surface); border-color: var(--eu-rule); color: var(--eu-brand-700); }

/* Menu chuột phải */
.context-menu.ctx-menu-fixed { border-radius: var(--eu-radius-lg); border-color: var(--eu-rule); box-shadow: var(--eu-shadow-2); font-family: var(--eu-font); }
.context-menu.ctx-menu-fixed li { color: var(--eu-ink-2); }
.context-menu.ctx-menu-fixed li:hover { background: var(--eu-surface-2); color: var(--eu-ink); }
.context-menu.ctx-menu-fixed li .icon-right-menu { color: var(--eu-muted); width: 16px; text-align: center; }

/* Danh sách thẻ trên điện thoại (render từ cùng _visibleRows) */
.eu-doc-cards { display: none; padding: 0 12px 12px; flex-direction: column; gap: 8px; }
.eu-doc-card { position: relative; background: var(--eu-surface); border: 1px solid var(--eu-rule); border-radius: var(--eu-radius-lg); padding: 10px 12px 10px 14px; overflow: hidden; }
.eu-doc-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--eu-n300); }
.eu-doc-card.st-Created::before { background: var(--eu-brand-400); }
.eu-doc-card.st-Completed::before { background: var(--eu-ok); }
.eu-doc-card.st-Cancel::before { background: var(--eu-bad); }
.eu-doc-card.st-Draft::before { background: var(--eu-n400); }
.eu-doc-card.selected { background: var(--eu-brand-50); border-color: var(--eu-brand-100); }
.eu-doc-card .row1 { display: flex; align-items: center; gap: 8px; }
.eu-doc-card .row1 .name { font-weight: 650; font-size: var(--eu-fs-14); color: var(--eu-ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eu-doc-card .row2, .eu-doc-card .row3 { font-size: var(--eu-fs-12); color: var(--eu-muted); margin-top: 2px; display: flex; gap: 6px; flex-wrap: wrap; }
.eu-doc-card .row2 b { color: var(--eu-ink-2); font-weight: 600; }
.eu-doc-card .expand-btn { margin-right: 0; }
.eu-doc-card .cb { width: 16px; height: 16px; accent-color: var(--eu-brand-600); }
@media (max-width: 767px) {
  .Table-wrapper { display: none; }
  .eu-doc-cards { display: flex; }
  .eu-page-header { padding: 10px 12px 6px; }
  .eu-toolbar, .eu-chips { padding-left: 12px; padding-right: 12px; }
  .eu-toolbar .eu-filter { min-width: 0; max-width: none; flex: 1 1 140px; }
  .eu-bulkbar { margin: 0 12px 8px; }
}

/* =====================================================================
   9. KHUNG DIALOG / FORM
   ===================================================================== */
.eu-dialog-frame { display: flex; flex-direction: column; max-height: 100%; }
.eu-dialog-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--eu-rule); background: var(--eu-surface); }
.eu-dialog-head .title { font-size: var(--eu-fs-16); font-weight: 650; color: var(--eu-ink); }
.eu-dialog-head .code { font-family: var(--eu-mono); font-size: var(--eu-fs-12); color: var(--eu-muted); background: var(--eu-surface-2); padding: 2px 6px; border-radius: 4px; }
.eu-dialog-head .eu-spacer { flex: 1; }
.eu-dialog-body { flex: 1; overflow: auto; padding: 16px; }
.eu-dialog-foot { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--eu-rule); background: var(--eu-surface); position: sticky; bottom: 0; }
.eu-dialog-foot .eu-spacer { flex: 1; }
.eu-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.eu-form-grid .span2 { grid-column: 1 / -1; }
@media (max-width: 767px) { .eu-form-grid { grid-template-columns: 1fr; } .eu-dialog-body { padding: 12px; } }

/* Loading nhỏ */
.eu-spin { width: 14px; height: 14px; border: 2px solid var(--eu-n200); border-top-color: var(--eu-brand-600); border-radius: 50%; animation: eu-spin .7s linear infinite; display: inline-block; }
@keyframes eu-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Vùng bảng chiếm phần còn lại của trang (frame-container là flex column) */
.eu-table-area { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.eu-table-area > .Table-wrapper { flex: 1 1 auto; min-height: 0; }
.eu-pager .rz-pager .rz-paginator-summary, .eu-pager .rz-paginator-summary { display: none; }
.eu-pager .rz-pager { margin: 0; }

/* Ô "Tình trạng" trong bảng: span.status.status-{Code} → pill có chấm màu.
   (Ghi đè span.status trong Documents.razor; giữ nguyên C# render.) */
.hierarchy-table span.status, .eu-doc-cards span.status {
  display: inline-flex !important; align-items: center; gap: 5px; height: 20px; padding: 0 8px !important; border-radius: 999px !important;
  font-size: var(--eu-fs-11) !important; font-weight: 600 !important; white-space: nowrap; line-height: 1 !important;
  background: var(--eu-neutral-bg) !important; color: var(--eu-neutral-ink) !important; border: 0 !important; box-shadow: none !important; cursor: default;
}
.hierarchy-table span.status::before, .eu-doc-cards span.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.hierarchy-table span.status.status-Draft, .eu-doc-cards span.status.status-Draft { background: var(--eu-neutral-bg) !important; color: var(--eu-neutral-ink) !important; }
.hierarchy-table span.status.status-Created, .eu-doc-cards span.status.status-Created,
.hierarchy-table span.status.status-Initiated, .eu-doc-cards span.status.status-Initiated,
.hierarchy-table span.status.status-PartnerInitiated, .eu-doc-cards span.status.status-PartnerInitiated { background: var(--eu-info-bg) !important; color: var(--eu-info-ink) !important; }
.hierarchy-table span.status.status-AwaitingPartnerSignature, .eu-doc-cards span.status.status-AwaitingPartnerSignature,
.hierarchy-table span.status.status-Signing, .eu-doc-cards span.status.status-Signing,
.hierarchy-table span.status.status-LetterSent, .eu-doc-cards span.status.status-LetterSent,
.hierarchy-table span.status.status-ReSign, .eu-doc-cards span.status.status-ReSign,
.hierarchy-table span.status.status-WarehouseHandover, .eu-doc-cards span.status.status-WarehouseHandover,
.hierarchy-table span.status.status-PendingUpdate, .eu-doc-cards span.status.status-PendingUpdate { background: var(--eu-warn-bg) !important; color: var(--eu-warn-ink) !important; }
.hierarchy-table span.status.status-Completed, .eu-doc-cards span.status.status-Completed,
.hierarchy-table span.status.status-Synced, .eu-doc-cards span.status.status-Synced,
.hierarchy-table span.status.status-COMPLETED, .eu-doc-cards span.status.status-COMPLETED { background: var(--eu-ok-bg) !important; color: var(--eu-ok-ink) !important; }
.hierarchy-table span.status.status-Cancel, .eu-doc-cards span.status.status-Cancel,
.hierarchy-table span.status.status-NotSynced, .eu-doc-cards span.status.status-NotSynced { background: var(--eu-bad-bg) !important; color: var(--eu-bad-ink) !important; }

/* Ô "Tình trạng đồng bộ" đầy đủ (status-badge FULL*) → cùng ngôn ngữ pill */
.hierarchy-table .status-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: var(--eu-fs-11); font-weight: 600; white-space: nowrap; line-height: 1; }
.hierarchy-table .status-badge.FULLCOMPLETED { background: var(--eu-ok-bg); color: var(--eu-ok-ink); }
.hierarchy-table .status-badge.FULLNDHOADON, .hierarchy-table .status-badge.FULLKHAC { background: var(--eu-neutral-bg); color: var(--eu-neutral-ink); }
.hierarchy-table .status-badge.FULLPENDING { background: var(--eu-warn-bg); color: var(--eu-warn-ink); }
.hierarchy-table .status-badge.FULLNOTSYNC, .hierarchy-table .status-badge.FULLCANCEL { background: var(--eu-bad-bg); color: var(--eu-bad-ink); }

/* Ghi đè nền theo cấp và các nền cũ còn sót trong style nội tuyến của EdocTable */
.frame-container { padding: 0 !important; box-shadow: none !important; border-radius: 0 !important; background: var(--eu-bg) !important; }
.hierarchy-table tr.level-1, .hierarchy-table tr.level-2, .hierarchy-table tr.level-3, .hierarchy-table tr.level-4, .hierarchy-table tr.level-5 { background-color: transparent; }
.Table-container { box-shadow: none !important; border-radius: var(--eu-radius-lg) !important; }
.Table-wrapper { background: transparent !important; padding: 0 16px 8px !important; }

/* =====================================================================
   10. BLAZORDIALOG — khung chuẩn cho mọi dialog (Thêm/Sửa/Xem, Import, Template, Lịch sử)
   ===================================================================== */
.blazor-dialog-container { background: rgba(23,33,42,.35) !important; } /* không dùng backdrop-filter: làm khựng khi cuộn trong form */
.blazor-dialog-content { border-radius: var(--eu-radius-lg) !important; box-shadow: var(--eu-shadow-2) !important; border: 1px solid var(--eu-rule) !important; overflow: hidden; font-family: var(--eu-font); display: flex; flex-direction: column; max-height: calc(100vh - 32px); }
.blazor-dialog-header { padding: 10px 12px 10px 16px !important; border-bottom: 1px solid var(--eu-rule) !important; background: var(--eu-surface) !important; }
.blazor-dialog-header .header-title { display: flex; align-items: center; gap: 10px; width: 100%; }
.blazor-dialog-header .header-title-form { font-size: var(--eu-fs-16) !important; font-weight: 650 !important; color: var(--eu-ink) !important; margin: 0 !important; }
.blazor-dialog-header .btn-close-dialog { margin-left: auto; width: 32px !important; height: 32px !important; min-height: 0 !important; padding: 0 !important; border-radius: 50% !important; background: transparent !important; color: var(--eu-muted) !important; box-shadow: none !important; }
.blazor-dialog-header .btn-close-dialog:hover { background: var(--eu-surface-2) !important; color: var(--eu-ink) !important; }
.blazor-dialog-body { padding: 16px !important; overflow: auto; flex: 1; min-height: 0; background: var(--eu-surface); }
.blazor-dialog-footer { padding: 10px 16px !important; border-top: 1px solid var(--eu-rule) !important; background: var(--eu-surface) !important; display: flex; gap: 8px; justify-content: flex-end; }
@media (max-width: 767px) {
  .blazor-dialog-content-wrapper, .blazor-dialog-content-wrapper-xlarge, .blazor-dialog-content-wrapper-xxlarge, .blazor-dialog-content-wrapper-large { width: 100vw !important; max-width: 100vw !important; margin: 0 !important; }
  .blazor-dialog-content { border-radius: 0 !important; max-height: 100vh; height: 100vh; }
  .blazor-dialog-body { padding: 12px !important; }
  /* Form ND: lưới Bootstrap .row với col-* → 1 cột trên điện thoại */
  .blazor-dialog-body [class*="col-"] { flex: 0 0 100% !important; max-width: 100% !important; }
}
/* Form trong dialog: nhãn + control gọn theo token */
.blazor-dialog-body label, .blazor-dialog-body .form-label { font-size: var(--eu-fs-12); color: var(--eu-muted); font-weight: 500; margin-bottom: 3px; }
.blazor-dialog-body .rz-fieldset-legend, .blazor-dialog-body .rz-text-subtitle1 { font-family: var(--eu-font); }

/* =====================================================================
   11. CÁC TRANG CÒN DÙNG HEADER CŨ (Chứng từ của tôi, Đồng bộ, Danh mục, Cài đặt...)
   Ghi đè lớp legacy về token — không sửa markup từng trang.
   ===================================================================== */
.Header-container { padding: 12px 16px 6px !important; margin-bottom: 0 !important; gap: 12px; flex-wrap: wrap; }
.header-title-wrapper { font-family: var(--eu-font) !important; font-size: var(--eu-fs-20) !important; font-weight: 650 !important; text-transform: none !important; letter-spacing: -.01em; margin-left: 0 !important; color: var(--eu-ink) !important; }
.btn-header-wrapper { gap: 6px; flex-wrap: wrap; justify-content: flex-end !important; }
.btn-header { margin-right: 0 !important; }
.btn-header-template, .btn-header-cancel, .btn-header-edit, .btn-header-add, .btn-header-print, .btn-header-save-soft, .btn-template, .btn-exendFilter, .btn-header-hide-show {
  background: var(--eu-surface) !important; color: var(--eu-ink-2) !important; border: 1px solid var(--eu-rule) !important;
  border-radius: var(--eu-radius) !important; box-shadow: none !important; height: var(--eu-control-h) !important; padding: 0 12px !important;
  font-family: var(--eu-font) !important; font-size: var(--eu-fs-13) !important; font-weight: 500 !important; margin-right: 0 !important; gap: 6px;
}
.btn-header-template:hover, .btn-header-cancel:hover, .btn-header-edit:hover, .btn-header-add:hover, .btn-header-print:hover, .btn-template:hover {
  background: var(--eu-surface-2) !important; color: var(--eu-ink) !important; border-color: var(--eu-n300) !important; border-radius: var(--eu-radius) !important; scale: 1 !important;
}
.btn-header-add { background: var(--eu-brand-600) !important; color: #fff !important; border-color: var(--eu-brand-600) !important; font-weight: 600 !important; }
.btn-header-add:hover { background: var(--eu-brand-700) !important; color: #fff !important; }
.btn-header-cancel { color: var(--eu-bad-ink) !important; }
.btn-header-hide-show.active, .btn-header-template.active { background: var(--eu-brand-50) !important; color: var(--eu-brand-700) !important; border-color: var(--eu-brand-100) !important; }
.icon-header { margin-right: 0 !important; font-size: 13px !important; }
.header-text { font-size: var(--eu-fs-13) !important; }
.filter-mode-container, .btn-group.filter-mode-container { border: 1px solid var(--eu-rule); border-radius: var(--eu-radius); overflow: hidden; background: var(--eu-surface); }
.btn-filter-mode { background: transparent !important; color: var(--eu-muted) !important; border: 0 !important; border-right: 1px solid var(--eu-rule) !important; border-radius: 0 !important; height: var(--eu-control-h) !important; font-size: var(--eu-fs-13) !important; font-weight: 500 !important; box-shadow: none !important; padding: 0 12px !important; }
.btn-filter-mode:last-child { border-right: 0 !important; }
.btn-filter-mode.active { background: var(--eu-brand-50) !important; color: var(--eu-brand-700) !important; font-weight: 600 !important; }
.header-midside { padding: 0 16px; }
.search-form { gap: 8px; }
.filter-custom-select { gap: 6px; flex-wrap: wrap; }
.filter-custom-select .dialog-item { min-width: 150px; }
.lable-filter { font-family: var(--eu-font) !important; color: var(--eu-muted) !important; }
.additional-filters-overlay { border-radius: var(--eu-radius-lg); box-shadow: var(--eu-shadow-2); border: 1px solid var(--eu-rule); }
/* Radzen pager mặc định ở các trang chưa chuyển sang .eu-pager */
.rz-pager .rz-paginator-page.rz-state-active, .rz-paginator .rz-paginator-page.rz-state-active { background: var(--eu-brand-600) !important; color: #fff !important; }
@media (max-width: 767px) {
  .eu-toolbar .eu-seg { width: 100%; }
  .eu-toolbar .eu-seg > button { flex: 1; justify-content: center; }
}

/* =====================================================================
   12. TINH CHỈNH "HIỆN ĐẠI HƠN": header trang + thanh lọc thành một thẻ nổi
   ===================================================================== */
.eu-page-header { padding: 14px 16px 6px; }
.eu-page-header .eu-title { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.eu-page-header .eu-count { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--eu-brand-50); color: var(--eu-brand-700); font-weight: 600; font-size: var(--eu-fs-12); }
.eu-toolbar-card { margin: 0 16px 8px; padding: 8px 10px; background: var(--eu-surface); border: 1px solid var(--eu-rule); border-radius: var(--eu-radius-lg); box-shadow: var(--eu-shadow-1); }
.eu-toolbar-card .eu-toolbar { padding: 0; }
.eu-toolbar-card .eu-chips { padding: 8px 0 0; }
.eu-nav .eu-nav-group { color: var(--eu-brand-700); opacity: .75; }
.eu-nav .eu-nav-item i { color: var(--eu-n400); }
.eu-nav .eu-nav-item:hover i { color: var(--eu-brand-600); }
.eu-bulkbar { background: linear-gradient(90deg, var(--eu-n900), #24384A); border-radius: var(--eu-radius-lg); box-shadow: 0 6px 18px rgba(23,33,42,.18); }
.eu-chip { box-shadow: 0 1px 2px rgba(10,140,208,.08); }
.hierarchy-table thead th { background: linear-gradient(180deg, #F7F9FC, #EEF2F6) !important; }
.eu-header .eu-avatar { background: var(--eu-brand-grad); box-shadow: 0 2px 6px rgba(10,140,208,.35); }

/* =====================================================================
   13. "BỘ LỌC KHÁC": desktop = khung ngay dưới thanh lọc; điện thoại = ngăn kéo
   ===================================================================== */
.eu-extra-backdrop { display: none; }
.eu-extra { margin: 8px 0 0; background: var(--eu-surface-2); border: 1px solid var(--eu-rule); border-radius: var(--eu-radius-lg); display: flex; flex-direction: column; animation: eu-fade-down .16s ease-out; }
@keyframes eu-fade-down { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
.eu-extra-head { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 14px; border-bottom: 1px solid var(--eu-rule); }
.eu-extra-head h3 { font-size: var(--eu-fs-13); font-weight: 700; margin: 0; flex: 1; text-transform: uppercase; letter-spacing: .05em; color: var(--eu-muted); }
.eu-extra-body { padding: 12px 14px 4px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 14px; }
.eu-extra-body .dialog-item, .eu-extra-body .dialog-item-dropdown { margin-bottom: 8px !important; }
.eu-extra-body .rz-dropdown, .eu-extra-body .rz-textbox, .eu-extra-body .rz-numeric, .eu-extra-body .rz-datepicker { width: 100% !important; }
.eu-extra-body .rz-button.rz-success { height: 28px !important; min-height: 0 !important; padding: 0 10px !important; font-size: 11px !important; border-radius: var(--eu-radius) !important; }
.eu-extra-foot { display: flex; align-items: center; gap: 8px; padding: 8px 14px 10px; }
.eu-extra-foot .eu-spacer { flex: 1; }
@media (max-width: 1199px) { .eu-extra-body { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .eu-extra-backdrop { display: block; position: fixed; inset: 0; background: rgba(23,33,42,.28); z-index: calc(var(--eu-z-drawer) - 1); }
  .eu-extra { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); margin: 0; border-radius: 0; background: var(--eu-surface); box-shadow: var(--eu-shadow-2); z-index: var(--eu-z-drawer); animation: eu-slide-in .18s ease-out; }
  .eu-extra-head { height: 52px; }
  .eu-extra-head h3 { text-transform: none; letter-spacing: 0; font-size: var(--eu-fs-16); color: var(--eu-ink); }
  .eu-extra-body { flex: 1; overflow: auto; grid-template-columns: 1fr; padding: 12px 16px; }
  .eu-extra-foot { border-top: 1px solid var(--eu-rule); background: var(--eu-surface); }
}

/* =====================================================================
   14. DIALOG: chỉ MỘT vùng cuộn (thân dialog); wrapper của BlazorDialog không cuộn nữa
   ===================================================================== */
.blazor-dialog-content-wrapper-windowed { max-height: none !important; overflow: visible !important; }
.blazor-dialog-content { max-height: calc(100vh - 40px) !important; }
.blazor-dialog-container { overflow: hidden !important; display: flex; align-items: center; }
.blazor-dialog-content-wrapper { margin-top: 0 !important; margin-bottom: 0 !important; }

/* Form nhập liệu chứng từ (41 form ND) — giữ nguyên thứ tự input, chỉ chỉnh lớp vỏ */
.blazor-dialog-body .card { border: 0 !important; background: transparent; }
.blazor-dialog-body .card-header {
  margin: 18px 0 8px !important; padding: 0 0 6px !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--eu-rule) !important;
  font-size: var(--eu-fs-12) !important; font-weight: 700 !important; letter-spacing: .06em; text-transform: uppercase; color: var(--eu-brand-700) !important;
}
.blazor-dialog-body .card-header:first-child { margin-top: 0 !important; }
.blazor-dialog-body .row { row-gap: 4px; }
.blazor-dialog-body .rz-text-subtitle2, .blazor-dialog-body h3.rz-text-subtitle2 {
  font-family: var(--eu-font) !important; font-size: var(--eu-fs-12) !important; font-weight: 600 !important; color: var(--eu-muted) !important;
  margin: 0 0 4px !important; padding-top: 10px !important; line-height: 1.3 !important;
}
.blazor-dialog-body .rz-text-subtitle2 span[style*="red"] { color: var(--eu-bad) !important; margin-left: 2px; }
.blazor-dialog-body .rz-textbox, .blazor-dialog-body .rz-dropdown, .blazor-dialog-body .rz-numeric, .blazor-dialog-body .rz-datepicker,
.blazor-dialog-body .rz-multiselect, .blazor-dialog-body .rz-textarea, .blazor-dialog-body .rz-lookup { width: 100% !important; }
.blazor-dialog-body .rz-textarea { height: auto !important; min-height: 72px !important; }
.blazor-dialog-body small.text-muted { font-size: var(--eu-fs-11); color: var(--eu-faint) !important; }

/* Số chứng từ + nút Thủ công / Tự động → một cụm gọn, nút dạng pill có trạng thái */
.document-number-input { display: flex !important; align-items: center; gap: 8px; }
.document-number-input .rz-textbox { flex: 1 1 auto; width: auto !important; display: block !important; }
.document-number-input .rz-button {
  flex: none; width: auto !important; height: var(--eu-control-h) !important; min-height: 0 !important; margin: 0 !important; padding: 0 12px !important;
  border-radius: 999px !important; font-size: var(--eu-fs-12) !important; font-weight: 600 !important; box-shadow: none !important; gap: 6px;
}
.document-number-input .rz-button .rz-button-icon-left, .document-number-input .rz-button .rzi { font-size: 15px !important; margin: 0 !important; }
.document-number-input .rz-button.rz-secondary { background: var(--eu-surface) !important; color: var(--eu-ink-2) !important; border: 1px solid var(--eu-rule) !important; }
.document-number-input .rz-button.rz-success { background: var(--eu-ok-bg) !important; color: var(--eu-ok-ink) !important; border: 1px solid #BFE6CF !important; }

/* Bảng mặt hàng trong form: cân lề với các ô nhập, thanh nút gọn */
.blazor-dialog-body .rz-data-grid, .blazor-dialog-body .rz-datatable { width: 100% !important; margin: 0 !important; border-radius: var(--eu-radius-lg) !important; overflow: hidden; }
.blazor-dialog-body .rz-grid-table { table-layout: auto; }
.blazor-dialog-body .summary-row { background: var(--eu-surface-2); border-top: 1px solid var(--eu-rule); font-size: var(--eu-fs-12); border-radius: 0 0 var(--eu-radius-lg) var(--eu-radius-lg); }
.blazor-dialog-body .summary-cell { padding: 8px 12px; border-color: var(--eu-rule); }
.blazor-dialog-body .rz-data-grid .rz-datatable-data > tr > td { padding: 4px 10px !important; }
.blazor-dialog-body .rz-data-grid .rz-textbox, .blazor-dialog-body .rz-data-grid .rz-numeric, .blazor-dialog-body .rz-data-grid .rz-dropdown, .blazor-dialog-body .rz-data-grid .rz-datepicker { height: 28px !important; font-size: var(--eu-fs-12) !important; }
.blazor-dialog-body .rz-data-grid .rz-button.rz-button-sm, .blazor-dialog-body .rz-data-grid .rz-button.rz-button-xs { height: 26px !important; min-height: 0 !important; width: 26px; padding: 0 !important; border-radius: var(--eu-radius) !important; }

@media (max-width: 767px) {
  .blazor-dialog-body .row { margin-left: 0 !important; margin-right: 0 !important; }
  .blazor-dialog-body .row > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }
  .blazor-dialog-body .rz-data-grid { overflow-x: auto !important; }
  .blazor-dialog-body .rz-data-grid .rz-grid-table { min-width: 720px; }
  .blazor-dialog-header .header-title-form { font-size: var(--eu-fs-14) !important; }
  .document-number-input { flex-wrap: wrap; }
  .document-number-input .rz-textbox { flex: 1 1 100%; }
}

/* =====================================================================
   15. MENU CHUỘT PHẢI TRÊN ĐIỆN THOẠI → bottom sheet (không lệch theo toạ độ chạm)
   ===================================================================== */
@media (max-width: 767px) {
  .context-menu.ctx-menu-fixed { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: 100vw; min-width: 0; max-height: 70vh; overflow: auto; border-radius: 16px 16px 0 0; padding: 8px 0 max(10px, env(safe-area-inset-bottom)); box-shadow: 0 -8px 28px rgba(23,33,42,.22); animation: eu-sheet-up .18s ease-out; }
  .context-menu.ctx-menu-fixed::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--eu-n300); margin: 0 auto 8px; }
  .context-menu.ctx-menu-fixed li { padding: 12px 18px; font-size: var(--eu-fs-14); }
  @keyframes eu-sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* Bảng mặt hàng: thanh nút + lưới luôn chiếm trọn hàng, cân lề hai bên */
.eu-item-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 0 0 8px; flex: 0 0 100%; width: 100%; }
.blazor-dialog-body .row > .rz-data-grid, .blazor-dialog-body .row > .summary-row { flex: 0 0 100%; width: 100%; }
.eu-item-toolbar .rz-button { height: 30px !important; min-height: 0 !important; border-radius: var(--eu-radius) !important; }

/* =====================================================================
   16. VÒNG PHẢN HỒI 3: menu chuột phải thẳng hàng · nút có màu · bộ lọc khác gọn ·
       chip người dùng trên header
   ===================================================================== */

/* --- Menu chuột phải: cột icon cố định 18px → chữ luôn thẳng hàng dù icon rộng/hẹp --- */
.context-menu.ctx-menu-fixed { min-width: 208px; padding: 6px 0; }
.context-menu.ctx-menu-fixed li {
  display: grid !important; grid-template-columns: 18px 1fr; align-items: center; column-gap: 10px;
  padding: 7px 14px 7px 12px !important; font-size: var(--eu-fs-13) !important; line-height: 1.3;
}
.context-menu.ctx-menu-fixed li .icon-right-menu {
  width: 18px !important; min-width: 18px !important; margin: 0 !important; text-align: center;
  font-size: 13px; line-height: 1; color: var(--eu-brand-600);
}
.context-menu.ctx-menu-fixed li:hover .icon-right-menu { color: var(--eu-brand-700); }
.context-menu.ctx-menu-fixed li.ctx-separator { display: block !important; height: 1px; margin: 5px 10px; padding: 0 !important; background: var(--eu-rule); }
@media (max-width: 767px) {
  .context-menu.ctx-menu-fixed li { grid-template-columns: 22px 1fr; padding: 12px 18px !important; font-size: var(--eu-fs-14) !important; }
  .context-menu.ctx-menu-fixed li .icon-right-menu { width: 22px !important; min-width: 22px !important; font-size: 15px; }
}

/* --- Nút chức năng có màu theo vai trò (nền nhạt + chữ đậm; hover đậm hơn) --- */
.eu-btn.tint-green  { background: var(--eu-ok-bg);   color: var(--eu-ok-ink);   border-color: #BFE6CF; }
.eu-btn.tint-green:hover  { background: #D3EEDD; color: var(--eu-ok-ink); }
.eu-btn.tint-violet { background: #EFEBFF; color: #5A3FC0; border-color: #D9D0FF; }
.eu-btn.tint-violet:hover { background: #E4DEFF; color: #4A32A6; }
.eu-btn.tint-amber  { background: var(--eu-warn-bg); color: var(--eu-warn-ink); border-color: #F5DFA8; }
.eu-btn.tint-amber:hover  { background: #FFEAC0; color: var(--eu-warn-ink); }
.eu-btn.tint-blue   { background: var(--eu-brand-50); color: var(--eu-brand-700); border-color: var(--eu-brand-100); }
.eu-btn.tint-blue:hover   { background: var(--eu-brand-100); color: var(--eu-brand-700); }
.eu-btn.tint-slate  { background: var(--eu-surface-2); color: var(--eu-ink-2); border-color: var(--eu-n200); }
.eu-btn.tint-slate:hover  { background: var(--eu-n200); }
.eu-btn.tint-teal   { background: #E3F6F4; color: #0E6F66; border-color: #BFE7E1; }
.eu-btn.tint-teal:hover   { background: #CFEFEB; color: #0B5C55; }
.eu-btn[class*="tint-"] i { opacity: .95; }
.eu-btn.toggle.keep { background: var(--eu-surface); color: var(--eu-ink-2); }
.eu-btn.toggle.keep.on { background: var(--eu-brand-600); border-color: var(--eu-brand-600); color: #fff; box-shadow: 0 3px 10px rgba(10,140,208,.28); }
.eu-btn.toggle.keep.on:hover { background: var(--eu-brand-700); color: #fff; }
.eu-page-header .eu-actions { gap: 6px; }

/* --- "Bộ lọc khác": gọn hơn — 5 cột trên màn rộng, ô 28px, chữ 12px, lề nhỏ --- */
.eu-extra { max-width: 1240px; }
.eu-extra-head { height: 34px; padding: 0 6px 0 12px; }
.eu-extra-head h3 { font-size: var(--eu-fs-11); }
.eu-extra-body { padding: 8px 12px 0; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 10px; }
.eu-extra-body .dialog-item, .eu-extra-body .dialog-item-dropdown { margin-bottom: 6px !important; }
.eu-extra-body .lable-filter, .eu-extra-body label { font-size: var(--eu-fs-11) !important; font-weight: 600; color: var(--eu-muted); margin: 0 0 2px !important; line-height: 1.3; }
.eu-extra-body .rz-dropdown, .eu-extra-body .rz-textbox, .eu-extra-body .rz-numeric, .eu-extra-body .rz-datepicker,
.eu-extra-body .rz-numeric input, .eu-extra-body .rz-datepicker input, .eu-extra-body .rz-dropdown .rz-dropdown-label {
  height: 28px !important; min-height: 0 !important; font-size: var(--eu-fs-12) !important; line-height: 26px !important;
}
.eu-extra-body .rz-dropdown .rz-dropdown-label { padding-top: 0 !important; padding-bottom: 0 !important; }
.eu-extra-body .rz-dropdown-chips-wrapper { min-height: 26px !important; }
.eu-extra-body .rz-datepicker .rz-inputtext { height: 26px !important; font-size: var(--eu-fs-12) !important; }
.eu-extra-body .rz-button.rz-success { height: 26px !important; font-size: 11px !important; padding: 0 8px !important; }
.eu-extra-body .date-range-pair { gap: 4px; }
.eu-extra-foot { padding: 6px 12px 8px; gap: 6px; }
.eu-extra-foot .eu-btn { height: 28px; padding: 0 10px; font-size: var(--eu-fs-12); }
@media (max-width: 1399px) { .eu-extra-body { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1199px) { .eu-extra-body { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .eu-extra { max-width: none; } .eu-extra-head { height: 52px; } .eu-extra-body { grid-template-columns: 1fr; padding: 12px 16px; } }

/* --- Header: chip người dùng — avatar gradient + tên (2 dòng: tên · chi nhánh) + mũi tên --- */
.eu-header .eu-user {
  height: 38px; padding: 3px 10px 3px 4px; gap: 9px; border-radius: 999px;
  background: var(--eu-surface); border: 1px solid var(--eu-rule); box-shadow: 0 1px 2px rgba(23,33,42,.04);
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.eu-header .eu-user:hover, .eu-header .eu-user.active { background: var(--eu-brand-50); border-color: var(--eu-brand-100); box-shadow: 0 2px 8px rgba(10,140,208,.12); }
.eu-header .eu-user .eu-avatar { width: 30px; height: 30px; font-size: 12px; flex: none; }
.eu-header .eu-user .eu-user-text { display: flex; flex-direction: column; justify-content: center; line-height: 1.15; min-width: 0; }
.eu-header .eu-user .name { font-size: var(--eu-fs-13); font-weight: 600; color: var(--eu-ink); max-width: 170px; }
.eu-header .eu-user .sub { font-size: 10.5px; font-weight: 500; color: var(--eu-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.eu-header .eu-user .caret { font-size: 11px; color: var(--eu-faint); margin-left: 2px; transition: transform .2s; }
.eu-header .eu-user.active .caret { transform: rotate(180deg); color: var(--eu-brand-600); }
.eu-header .eu-branch { display: none; } /* chi nhánh đã nằm trong chip người dùng */
@media (max-width: 767px) {
  .eu-header .eu-user { padding: 3px; border-color: transparent; background: transparent; box-shadow: none; }
  .eu-header .eu-user .eu-user-text, .eu-header .eu-user .caret { display: none; }
}
.eu-header .eu-user .sub i { transform: none !important; margin: 0 4px 0 0 !important; font-size: 9px !important; color: inherit !important; }

/* =====================================================================
   17. VÒNG PHẢN HỒI 4: điện thoại (popup lọc, cuộn, tự thu gọn, phân trang gọn) ·
       nhãn IDDMS gọn · Tình trạng dạng nút · nhãn Version
   ===================================================================== */

/* --- Tình trạng: nút đặc, chữ trắng, rõ ràng (thay pill nhạt có chấm) --- */
.hierarchy-table span.status, .eu-doc-cards span.status {
  height: 22px; padding: 0 9px !important; border-radius: 6px !important; gap: 0;
  font-weight: 700 !important; letter-spacing: .01em; color: #fff !important; box-shadow: 0 1px 2px rgba(23,33,42,.14) !important;
  background: var(--eu-n400) !important;
}
.hierarchy-table span.status::before, .eu-doc-cards span.status::before { display: none; }
.hierarchy-table span.status.status-Draft, .eu-doc-cards span.status.status-Draft { background: var(--eu-n400) !important; color: #fff !important; }
.hierarchy-table span.status.status-Created, .eu-doc-cards span.status.status-Created,
.hierarchy-table span.status.status-Initiated, .eu-doc-cards span.status.status-Initiated,
.hierarchy-table span.status.status-PartnerInitiated, .eu-doc-cards span.status.status-PartnerInitiated { background: var(--eu-brand-600) !important; color: #fff !important; }
.hierarchy-table span.status.status-AwaitingPartnerSignature, .eu-doc-cards span.status.status-AwaitingPartnerSignature,
.hierarchy-table span.status.status-Signing, .eu-doc-cards span.status.status-Signing,
.hierarchy-table span.status.status-LetterSent, .eu-doc-cards span.status.status-LetterSent,
.hierarchy-table span.status.status-ReSign, .eu-doc-cards span.status.status-ReSign,
.hierarchy-table span.status.status-WarehouseHandover, .eu-doc-cards span.status.status-WarehouseHandover,
.hierarchy-table span.status.status-PendingUpdate, .eu-doc-cards span.status.status-PendingUpdate { background: var(--eu-warn) !important; color: #fff !important; }
.hierarchy-table span.status.status-Completed, .eu-doc-cards span.status.status-Completed,
.hierarchy-table span.status.status-Synced, .eu-doc-cards span.status.status-Synced,
.hierarchy-table span.status.status-COMPLETED, .eu-doc-cards span.status.status-COMPLETED { background: var(--eu-ok) !important; color: #fff !important; }
.hierarchy-table span.status.status-Cancel, .eu-doc-cards span.status.status-Cancel,
.hierarchy-table span.status.status-NotSynced, .eu-doc-cards span.status.status-NotSynced { background: var(--eu-bad) !important; color: #fff !important; }
.hierarchy-table .status-badge { height: 22px; padding: 0 9px; border-radius: 6px; font-weight: 700; color: #fff; box-shadow: 0 1px 2px rgba(23,33,42,.14); }
.hierarchy-table .status-badge.FULLCOMPLETED { background: var(--eu-ok); color: #fff; }
.hierarchy-table .status-badge.FULLNDHOADON, .hierarchy-table .status-badge.FULLKHAC { background: var(--eu-n400); color: #fff; }
.hierarchy-table .status-badge.FULLPENDING { background: var(--eu-warn); color: #fff; }
.hierarchy-table .status-badge.FULLNOTSYNC, .hierarchy-table .status-badge.FULLCANCEL { background: var(--eu-bad); color: #fff; }

/* --- IDDMS (bấm để sao chép link): nhãn nhỏ gọn, không chiếm cả ô --- */
.hierarchy-table .clickable-cell, .hierarchy-table .iddms-container.clickable-cell {
  display: inline-flex !important; align-items: center; gap: 5px; height: 22px; padding: 0 8px !important; border-radius: 6px !important;
  font-size: var(--eu-fs-12) !important; font-weight: 600 !important; line-height: 1 !important; white-space: nowrap;
  color: var(--eu-brand-700) !important; background: var(--eu-brand-50) !important; border: 1px solid var(--eu-brand-100) !important;
  transform: none !important; box-shadow: none !important; transition: background .12s, border-color .12s;
}
.hierarchy-table .clickable-cell::after { content: "\f0c5"; font-family: "Font Awesome 6 Free"; font-weight: 400; font-size: 11px; opacity: .55; }
.hierarchy-table .clickable-cell:hover { background: var(--eu-brand-100) !important; border-color: var(--eu-brand-200) !important; }
.hierarchy-table .clickable-cell:hover::after { opacity: 1; }
.hierarchy-table .iddms-container { display: inline-block; max-width: 100%; }

/* --- Version: nhãn bấm được (mở lịch sử) — chỉ nhãn này mới mở, không phải cả ô --- */
.hierarchy-table .totalversion {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 7px; border-radius: 6px;
  font-size: var(--eu-fs-12); font-weight: 700; color: var(--eu-ink-2); background: var(--eu-surface-2); border: 1px solid var(--eu-rule); cursor: pointer;
}
.hierarchy-table .totalversion:hover { background: var(--eu-brand-50); color: var(--eu-brand-700); border-color: var(--eu-brand-100); }

/* --- Phân trang gọn (điện thoại) + nút nổi — ẩn trên desktop --- */
.eu-pager-mobile { display: none; align-items: center; gap: 10px; width: 100%; }
.eu-pager-mobile .pg { flex: 1; text-align: center; font-size: var(--eu-fs-12); color: var(--eu-muted); }
.eu-pager-mobile .pg b { color: var(--eu-ink); font-size: var(--eu-fs-13); }
.eu-pager-mobile .pg .sep { margin: 0 4px; color: var(--eu-faint); }
.eu-pager-mobile .eu-btn.icon { width: 34px; height: 34px; border-radius: 10px; }
.eu-mob-fab { display: none; }

@media (max-width: 767px) {
  /* Trang cuộn theo <article> (một vùng cuộn duy nhất) — trước đây frame-container
     overflow:hidden + thẻ nằm ngoài vùng flex nên không cuộn xuống được. */
  .frame-container { height: auto !important; min-height: 100%; overflow: visible !important; display: block !important; }
  .eu-table-area { display: block; }
  .eu-main > article { overflow-x: hidden; }
  .eu-doc-cards { padding-bottom: 72px; }

  /* Popup dropdown/lookup của Radzen: không được rộng hơn màn hình */
  .rz-lookup-panel, .rz-dropdown-panel, .rz-multiselect-panel, .rz-popup, .rz-datepicker-popup, .rz-autocomplete-panel {
    max-width: calc(100vw - 16px) !important; min-width: 0 !important; box-sizing: border-box;
  }
  .rz-lookup-panel .rz-data-grid, .rz-lookup-panel .rz-datatable { max-width: 100%; overflow-x: auto; }
  .rz-lookup-panel .rz-grid-table { min-width: 0; }
  .rz-lookup-panel .rz-lookup-search { max-width: 100%; }

  /* Tự thu gọn khi cuộn: ẩn dãy nút + thẻ lọc, hiện nút nổi để mở lại */
  body.eu-mob-collapsed:not(.eu-mob-open) .eu-page-header .eu-actions,
  body.eu-mob-collapsed:not(.eu-mob-open) .eu-toolbar-card { display: none !important; }
  body.eu-mob-collapsed:not(.eu-mob-open) .eu-page-header { padding-bottom: 6px; }
  body.eu-mob-collapsed .eu-mob-fab {
    display: inline-flex; align-items: center; gap: 8px; position: fixed; right: 14px; bottom: 66px; z-index: var(--eu-z-sticky);
    height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--eu-brand-grad); color: #fff;
    font: 600 13px/1 var(--eu-font); box-shadow: 0 8px 22px rgba(10,140,208,.38); cursor: pointer;
    animation: eu-fade-down .16s ease-out;
  }

  /* Thanh phân trang gọn */
  .eu-pager { padding: 6px 10px; gap: 0; }
  .eu-pager .range, .eu-pager .rz-pager, .eu-pager .eu-spacer { display: none !important; }
  .eu-pager-mobile { display: flex; }
}

/* =====================================================================
   18. ĐIỆN THOẠI (vòng 5): chỉ MỘT danh sách (thẻ) · thanh "Bộ lọc & thao tác"
       dính trên khi cuộn · lớp phủ mở lại không đẩy danh sách · thẻ con rõ cấp
   ===================================================================== */
.eu-mob-bar, .eu-mob-panel-backdrop { display: none; }

@media (max-width: 767px) {
  /* Bảng desktop tuyệt đối không hiện trên điện thoại (style nội tuyến của EdocTable
     đặt display:flex sau <link> nên thắng quy tắc thường → cần !important). */
  .Table-wrapper { display: none !important; }
  .eu-doc-cards { padding-bottom: 16px; }

  /* Thanh ngang thay cho khối lọc khi đã cuộn qua: dính đầu vùng cuộn */
  body.eu-mob-collapsed .eu-mob-bar {
    display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: calc(var(--eu-z-sticky) + 1);
    height: 40px; margin: 0 0 8px; padding: 0 14px; background: var(--eu-surface); border-bottom: 1px solid var(--eu-rule);
    box-shadow: 0 4px 12px rgba(23,33,42,.06); font: 600 13px/1 var(--eu-font); color: var(--eu-brand-700); cursor: pointer; user-select: none;
  }
  body.eu-mob-collapsed .eu-mob-bar > i:first-child { color: var(--eu-brand-600); }
  body.eu-mob-collapsed .eu-mob-bar .caret { margin-left: auto; font-size: 11px; color: var(--eu-faint); transition: transform .18s; }
  body.eu-mob-collapsed.eu-mob-open .eu-mob-bar .caret { transform: rotate(180deg); }
  body.eu-mob-collapsed .eu-top-tools { display: none; }

  /* Mở lại: khối lọc trở thành lớp phủ đè lên danh sách (giữ nguyên vị trí cuộn) */
  body.eu-mob-collapsed.eu-mob-open .eu-top-tools {
    display: block; position: fixed; left: 0; right: 0; top: calc(var(--eu-header-h) + 40px); max-height: calc(100vh - var(--eu-header-h) - 40px);
    overflow: auto; z-index: var(--eu-z-drawer); background: var(--eu-bg); border-bottom: 1px solid var(--eu-rule);
    box-shadow: 0 16px 32px rgba(23,33,42,.18); padding-bottom: 8px; animation: eu-fade-down .16s ease-out;
  }
  body.eu-mob-collapsed.eu-mob-open .eu-mob-bar { position: fixed; left: 0; right: 0; top: var(--eu-header-h); margin: 0; z-index: calc(var(--eu-z-drawer) + 1); }
  body.eu-mob-collapsed.eu-mob-open .eu-mob-panel-backdrop { display: block; position: fixed; inset: var(--eu-header-h) 0 0 0; background: rgba(23,33,42,.28); z-index: calc(var(--eu-z-drawer) - 1); }
  body.eu-mob-collapsed.eu-mob-open .eu-top-tools .eu-page-header .eu-title { display: none; }
  body.eu-mob-collapsed.eu-mob-open .eu-top-tools .eu-page-header { padding-top: 10px; }
  .eu-mob-fab { display: none !important; }

  /* Thẻ chứng từ con: thụt lề + vạch dẫn + nền nhạt hơn, nút mở/thu có số con */
  .eu-doc-card.child { background: var(--eu-surface-2); border-style: dashed; }
  .eu-doc-card.child::before { background: var(--eu-n300); }
  .eu-doc-card.child .row1 .name { font-size: var(--eu-fs-13); font-weight: 600; }
  .eu-doc-card .expand-btn { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 6px 0 4px; border-radius: 6px; border: 1px solid var(--eu-brand-100); background: var(--eu-brand-50); color: var(--eu-brand-700); font-size: 11px; font-weight: 700; }
  .eu-doc-card .expand-btn .chevron { display: inline-block; transition: transform .15s; font-size: 10px; }
  .eu-doc-card .expand-btn.expanded .chevron { transform: rotate(90deg); }
  .eu-doc-card .expand-btn .cnt { font-variant-numeric: tabular-nums; }
  .eu-doc-card .row1 .eu-btn.sm.icon { width: 30px; height: 30px; }
}

/* =====================================================================
   19. VÒNG 6: "Bộ lọc khác" = popup nổi trên bảng (không đẩy) · placeholder không
       bị cắt · điện thoại: lưới nút/lọc đều nhau · tấm trượt chi tiết chứng từ
   ===================================================================== */

/* --- Bộ lọc khác: popup neo dưới thanh lọc, đè lên bảng (desktop/tablet) --- */
.eu-toolbar-card { position: relative; }
.eu-extra-backdrop { display: block; position: fixed; inset: 0; background: transparent; z-index: calc(var(--eu-z-drawer) - 2); }
.eu-extra {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); margin: 0; max-width: none; z-index: calc(var(--eu-z-drawer) - 1);
  background: var(--eu-surface); border: 1px solid var(--eu-rule); border-radius: var(--eu-radius-lg);
  box-shadow: 0 16px 40px rgba(23,33,42,.18), 0 2px 8px rgba(23,33,42,.06);
}
.eu-extra-head { height: 38px; padding: 0 6px 0 14px; border-bottom: 1px solid var(--eu-rule); background: var(--eu-surface-2); border-radius: var(--eu-radius-lg) var(--eu-radius-lg) 0 0; }
.eu-extra-body { padding: 10px 14px 0; gap: 0 12px; }
.eu-extra-foot { padding: 6px 14px 10px; }

/* Placeholder/nhãn trong ô dropdown bị cắt: bỏ line-height cứng, canh giữa bằng flex */
.eu-extra-body .rz-dropdown, .eu-extra-body .rz-textbox, .eu-extra-body .rz-numeric, .eu-extra-body .rz-datepicker { line-height: normal !important; }
.eu-extra-body .rz-dropdown { display: flex !important; align-items: center; }
.eu-extra-body .rz-dropdown .rz-dropdown-label, .eu-extra-body .rz-dropdown .rz-inputtext, .eu-extra-body .rz-dropdown-chips-wrapper {
  height: 26px !important; line-height: 26px !important; padding: 0 28px 0 8px !important; margin: 0 !important; display: block !important;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--eu-fs-12) !important;
}
.eu-extra-body .rz-dropdown-chips-wrapper { display: flex !important; align-items: center; gap: 4px; padding-right: 8px !important; }
.eu-extra-body .rz-dropdown .rz-dropdown-trigger { height: 26px !important; line-height: 26px !important; width: 24px !important; }
.eu-extra-body .rz-dropdown .rz-dropdown-clear-icon { line-height: 26px !important; }
.eu-extra-body .rz-textbox, .eu-extra-body .rz-numeric input, .eu-extra-body .rz-datepicker input { padding: 0 8px !important; }
.eu-extra-body .rz-numeric { display: inline-flex !important; align-items: center; }
.eu-extra-body .rz-numeric input { height: 26px !important; }

/* Tấm trượt chi tiết chứng từ (điện thoại) */
.eu-sheet-backdrop, .eu-sheet { display: none; }

@media (max-width: 767px) {
  /* Bộ lọc khác trên điện thoại vẫn là ngăn kéo toàn màn (đè lên mọi thứ) */
  .eu-extra { position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: min(420px, 100vw); border-radius: 0; box-shadow: var(--eu-shadow-2); z-index: calc(var(--eu-z-drawer) + 2); }
  .eu-extra-backdrop { background: rgba(23,33,42,.28); z-index: calc(var(--eu-z-drawer) + 1); }
  .eu-extra-head { height: 52px; border-radius: 0; }

  /* Header trang: tiêu đề + tổng một hàng; nút thao tác lưới 2 cột đều nhau; nút chính chiếm cả hàng */
  .eu-page-header { padding: 10px 12px 4px; row-gap: 8px; }
  .eu-page-header .eu-spacer { display: none; }
  .eu-page-header .eu-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; flex-basis: 100%; }
  .eu-page-header .eu-actions .eu-btn { width: 100%; justify-content: center; padding: 0 8px; }
  .eu-page-header .eu-actions .eu-btn.primary { grid-column: 1 / -1; }

  /* Thanh lọc: lưới 2 cột — chế độ & ngày & nút chiếm cả hàng */
  .eu-toolbar-card { margin: 0 12px 8px; padding: 8px; }
  .eu-toolbar { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 !important; }
  .eu-toolbar .eu-seg { grid-column: 1 / -1; display: flex; width: 100%; }
  .eu-toolbar .eu-seg button { flex: 1; justify-content: center; }
  .eu-toolbar .eu-filter { min-width: 0 !important; max-width: none !important; width: 100%; flex: none; }
  .eu-toolbar .eu-filter .rz-dropdown, .eu-toolbar .eu-filter .rz-textbox, .eu-toolbar .eu-filter .rz-datepicker { width: 100% !important; }
  .eu-toolbar .created-date-filter { grid-column: 1 / -1; }
  .eu-toolbar .date-range-pair { display: flex; align-items: center; gap: 6px; }
  .eu-toolbar .date-range-pair .rz-datepicker { flex: 1; min-width: 0; }
  .eu-toolbar-actions { grid-column: 1 / -1; display: flex; gap: 6px; }
  .eu-toolbar-actions .eu-btn.toggle { flex: 1; justify-content: center; }
  .eu-toolbar-actions .eu-btn.primary { flex: 1; justify-content: center; }
  .eu-toolbar-card .eu-chips { padding: 6px 0 0; }

  /* Lớp phủ khi mở lại từ thanh: cuộn được, chừa chỗ ở dưới */
  body.eu-mob-collapsed.eu-mob-open .eu-top-tools { padding: 0 0 12px; }

  /* Tấm trượt chi tiết */
  .eu-sheet-backdrop { display: block; position: fixed; inset: 0; background: rgba(23,33,42,.4); z-index: calc(var(--eu-z-drawer) + 3); }
  .eu-sheet {
    display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; max-height: 86vh; z-index: calc(var(--eu-z-drawer) + 4);
    background: var(--eu-surface); border-radius: 16px 16px 0 0; box-shadow: 0 -12px 36px rgba(23,33,42,.24); animation: eu-sheet-up .2s ease-out;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .eu-sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--eu-n300); margin: 8px auto 4px; flex: none; }
  .eu-sheet-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 10px 16px; border-bottom: 1px solid var(--eu-rule); flex: none; }
  .eu-sheet-head .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .eu-sheet-head .t b { font-size: var(--eu-fs-14); color: var(--eu-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .eu-sheet-head .t span { font-size: var(--eu-fs-12); color: var(--eu-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .eu-sheet-head .t .dot { margin: 0 5px; color: var(--eu-faint); }
  .eu-sheet-head span.status { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 6px; font-size: var(--eu-fs-11); font-weight: 700; color: #fff; background: var(--eu-n400); white-space: nowrap; }
  .eu-sheet-head span.status.status-Created, .eu-sheet-head span.status.status-Initiated, .eu-sheet-head span.status.status-PartnerInitiated { background: var(--eu-brand-600); }
  .eu-sheet-head span.status.status-Completed, .eu-sheet-head span.status.status-Synced, .eu-sheet-head span.status.status-COMPLETED { background: var(--eu-ok); }
  .eu-sheet-head span.status.status-Cancel, .eu-sheet-head span.status.status-NotSynced { background: var(--eu-bad); }
  .eu-sheet-head span.status.status-AwaitingPartnerSignature, .eu-sheet-head span.status.status-Signing, .eu-sheet-head span.status.status-LetterSent,
  .eu-sheet-head span.status.status-ReSign, .eu-sheet-head span.status.status-WarehouseHandover, .eu-sheet-head span.status.status-PendingUpdate { background: var(--eu-warn); }
  .eu-sheet-body { flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
  .eu-kv { display: flex; flex-direction: column; }
  .eu-kv .kv { display: grid; grid-template-columns: 42% 1fr; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--eu-rule); align-items: start; }
  .eu-kv .kv:nth-child(even) { background: var(--eu-surface-2); }
  .eu-kv .k { font-size: var(--eu-fs-11); font-weight: 600; color: var(--eu-muted); text-transform: uppercase; letter-spacing: .03em; line-height: 1.35; padding-top: 1px; }
  .eu-kv .v { font-size: var(--eu-fs-13); color: var(--eu-ink); word-break: break-word; line-height: 1.4; }
  .eu-kv .v .empty { color: var(--eu-faint); }
  .eu-sheet-foot { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--eu-rule); background: var(--eu-surface); flex: none; }
  .eu-sheet-foot .eu-btn { flex: 1; justify-content: center; height: 38px; }
  .eu-doc-card { cursor: pointer; }
  .eu-doc-card:active { background: var(--eu-brand-50); }
}

/* =====================================================================
   20. "Bộ lọc khác": ô nhập cao bằng bộ lọc thường (32px), cặp ngày gói vừa 1 ô
   ===================================================================== */
.eu-extra-body .rz-dropdown, .eu-extra-body .rz-textbox, .eu-extra-body .rz-numeric, .eu-extra-body .rz-datepicker,
.eu-extra-body .rz-numeric input, .eu-extra-body .rz-datepicker input { height: var(--eu-control-h) !important; font-size: var(--eu-fs-13) !important; }
.eu-extra-body .rz-dropdown .rz-dropdown-label, .eu-extra-body .rz-dropdown .rz-inputtext, .eu-extra-body .rz-dropdown-chips-wrapper {
  height: 30px !important; line-height: 30px !important; font-size: var(--eu-fs-13) !important; padding-left: 10px !important;
}
.eu-extra-body .rz-dropdown-chips-wrapper { min-height: 30px !important; }
.eu-extra-body .rz-dropdown .rz-dropdown-trigger { height: 30px !important; line-height: 30px !important; }
.eu-extra-body .rz-dropdown .rz-dropdown-clear-icon { line-height: 30px !important; }
.eu-extra-body .rz-numeric input { height: 30px !important; }
.eu-extra-body .rz-textbox, .eu-extra-body .rz-numeric input, .eu-extra-body .rz-datepicker input { padding-left: 10px !important; }
.eu-extra-body .rz-datepicker .rz-inputtext { height: 30px !important; font-size: var(--eu-fs-13) !important; }
.eu-extra-body .rz-button.rz-success { height: var(--eu-control-h) !important; font-size: var(--eu-fs-12) !important; padding: 0 10px !important; }
.eu-extra-body .dialog-item, .eu-extra-body .dialog-item-dropdown { margin-bottom: 10px !important; }
.eu-extra-body .lable-filter, .eu-extra-body label { font-size: var(--eu-fs-12) !important; margin-bottom: 4px !important; }

/* Cặp ngày: 2 ô chia đều đúng bằng bề rộng 1 ô lọc; icon lịch không đè chữ */
.eu-extra-body .date-range-pair { display: flex !important; align-items: center; gap: 4px; width: 100%; min-width: 0; }
.eu-extra-body .date-range-pair > span { flex: none; color: var(--eu-faint); }
.eu-extra-body .date-range-pair .rz-datepicker { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; position: relative; display: flex; }
.eu-extra-body .date-range-pair .rz-datepicker input { width: 100% !important; min-width: 0 !important; padding-right: 26px !important; text-overflow: ellipsis; }
.eu-extra-body .date-range-pair .rz-datepicker .rz-datepicker-trigger { position: absolute; right: 0; top: 0; height: 100%; width: 26px; padding: 0 !important; display: flex; align-items: center; justify-content: center; }
.eu-extra-body .date-range-pair .rz-datepicker .rz-datepicker-trigger .rzi { font-size: 15px; }

/* 20b. Sửa lệch: dropdown có padding dọc của Radzen làm nhãn 30px tràn → bỏ padding;
        icon lịch bị Radzen translateY(-50%) đẩy lên → đặt lại theo chiều cao ô */
.eu-extra-body .rz-dropdown { padding: 0 !important; justify-content: center; }
.eu-extra-body .rz-dropdown .rz-dropdown-label, .eu-extra-body .rz-dropdown .rz-inputtext { display: flex !important; align-items: center; height: 30px !important; line-height: 1 !important; }
.eu-extra-body .rz-dropdown-chips-wrapper { height: 30px !important; line-height: 1 !important; }
.eu-extra-body .rz-dropdown .rz-dropdown-trigger { position: absolute; right: 0; top: 0; bottom: 0; height: auto !important; display: flex; align-items: center; justify-content: center; line-height: 1 !important; }
.eu-extra-body .rz-dropdown .rz-dropdown-clear-icon { line-height: 1 !important; top: 50%; transform: translateY(-50%); }
.eu-extra-body .rz-datepicker .rz-datepicker-trigger, .eu-extra-body .date-range-pair .rz-datepicker .rz-datepicker-trigger {
  position: absolute !important; inset-block-start: 0 !important; top: 0 !important; bottom: 0 !important; height: auto !important; transform: none !important;
  inset-inline-end: 2px !important; right: 2px !important; width: 26px !important; padding: 0 !important; margin: 0 !important; display: flex !important; align-items: center; justify-content: center;
}
.eu-extra-body .rz-datepicker .rz-datepicker-trigger .rzi { font-size: 15px; line-height: 1; }
.eu-extra-body .rz-datepicker .rz-inputtext { padding-right: 28px !important; }
.eu-extra-body .rz-datepicker .rz-dropdown-clear-icon, .eu-extra-body .rz-datepicker .rz-datepicker-clear { top: 50%; transform: translateY(-50%); }

/* 20c. Cặp "Từ ngày – Đến ngày" ở thanh lọc: quy tắc dùng chung cho mọi trang
        (trước đây chỉ Documents.razor có style nội tuyến nên ở trang Đồng bộ bị rơi thành 2 dòng) */
.eu-toolbar .created-date-filter { min-width: 240px; max-width: 280px; }
.eu-toolbar .date-range-pair { display: flex !important; align-items: center; gap: 4px; width: 100%; min-width: 0; }
.eu-toolbar .date-range-pair > span { flex: none; color: var(--eu-faint); }
.eu-toolbar .date-range-pair .rz-datepicker { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; height: var(--eu-control-h) !important; position: relative; display: flex; }
.eu-toolbar .date-range-pair .rz-datepicker input { width: 100% !important; min-width: 0 !important; height: 30px !important; padding: 0 26px 0 8px !important; font-size: var(--eu-fs-12) !important; text-overflow: ellipsis; }
.eu-toolbar .date-range-pair .rz-datepicker .rz-datepicker-trigger {
  position: absolute !important; inset-block-start: 0 !important; top: 0 !important; bottom: 0 !important; height: auto !important; transform: none !important;
  inset-inline-end: 2px !important; right: 2px !important; width: 24px !important; padding: 0 !important; margin: 0 !important; display: flex !important; align-items: center; justify-content: center;
}
.eu-toolbar .date-range-pair .rz-datepicker .rz-datepicker-trigger .rzi { font-size: 14px; line-height: 1; }

/* 21. Dòng "Hiện thêm" khi một bộ có quá nhiều chứng từ con (dựng theo lô 50) */
.hierarchy-table tr.eu-more-row td { padding: 4px 12px !important; height: auto !important; background: var(--eu-brand-50) !important; border-bottom: 1px solid var(--eu-brand-100) !important; }
.hierarchy-table .eu-more { display: flex; align-items: center; gap: 10px; font-size: var(--eu-fs-12); color: var(--eu-brand-700); }
.hierarchy-table .eu-more > i { color: var(--eu-brand-400); }
.hierarchy-table .eu-more b { font-variant-numeric: tabular-nums; }
.hierarchy-table .eu-more .eu-btn.sm { height: 24px; font-size: var(--eu-fs-11); padding: 0 8px; }
.eu-doc-card.more { display: flex; align-items: center; gap: 8px; background: var(--eu-brand-50); border-color: var(--eu-brand-100); border-style: dashed; font-size: var(--eu-fs-12); color: var(--eu-brand-700); padding: 8px 12px; cursor: default; }
.eu-doc-card.more::before { background: var(--eu-brand-400); }
.eu-doc-card.more span { flex: 1; }

/* 22. Gợi ý "+N bộ đang ẩn" cạnh tổng số (khi công tắc Đang theo dõi / Hiện SAP ẩn trọn bộ) */
.eu-page-header .eu-hidden-hint { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--eu-warn-bg); color: var(--eu-warn-ink); font-size: var(--eu-fs-12); font-weight: 600; cursor: help; }
.eu-page-header .eu-hidden-hint i { font-size: 11px; }

/* =====================================================================
   23. DASHBOARD TỔNG QUAN (.dsh-*) — thẻ KPI có màu nhấn, biểu đồ, thanh phân bổ, bảng gần đây
   ===================================================================== */
.dsh { padding: 14px 16px 24px; display: flex; flex-direction: column; gap: 14px; }
.dsh-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dsh-title h1 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 0; color: var(--eu-ink); }
.dsh-title .sub { display: block; margin-top: 2px; font-size: var(--eu-fs-12); color: var(--eu-muted); font-variant-numeric: tabular-nums; }
.dsh-title .sub .dot { margin: 0 6px; color: var(--eu-faint); }
.dsh-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dsh-range .dsh-dates { display: flex; align-items: center; gap: 4px; }
.dsh-range .dsh-dates .rz-datepicker { width: 130px !important; }
.dsh-range .dsh-dates > span { color: var(--eu-faint); }

/* KPI */
.dsh-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dsh-kpi {
  position: relative; overflow: hidden; background: var(--eu-surface); border: 1px solid var(--eu-rule); border-radius: 14px; padding: 14px 16px 12px 16px;
  box-shadow: var(--eu-shadow-1); display: flex; flex-direction: column; gap: 4px; min-height: 108px; transition: transform .15s, box-shadow .15s;
  --acc: var(--eu-brand-600); --acc-bg: var(--eu-brand-50);
}
.dsh-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--acc); }
.dsh-kpi[onclick], .dsh-kpi.accent-brand, .dsh-kpi.accent-bad { cursor: pointer; }
.dsh-kpi:hover { transform: translateY(-2px); box-shadow: var(--eu-shadow-2); }
.dsh-kpi .ic { position: absolute; right: 14px; top: 12px; width: 36px; height: 36px; border-radius: 10px; background: var(--acc-bg); color: var(--acc); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
.dsh-kpi .v { font-size: 26px; font-weight: 750; letter-spacing: -.02em; color: var(--eu-ink); line-height: 1.1; margin-top: 2px; }
.dsh-kpi .v small { font-size: 14px; font-weight: 500; color: var(--eu-muted); margin-left: 2px; }
.dsh-kpi .l { font-size: var(--eu-fs-12); font-weight: 600; color: var(--eu-ink-2); }
.dsh-kpi .d { font-size: var(--eu-fs-11); color: var(--eu-muted); margin-top: auto; }
.dsh-kpi .d b { color: var(--eu-ink-2); }
.dsh-kpi .d.up { color: var(--eu-ok-ink); font-weight: 700; } .dsh-kpi .d.up span { color: var(--eu-muted); font-weight: 500; }
.dsh-kpi .d.down { color: var(--eu-bad-ink); font-weight: 700; } .dsh-kpi .d.down span { color: var(--eu-muted); font-weight: 500; }
.dsh-kpi .bar { height: 6px; border-radius: 3px; background: var(--eu-n100); overflow: hidden; margin-top: auto; }
.dsh-kpi .bar span { display: block; height: 100%; background: var(--acc); border-radius: 3px; transition: width .4s ease; }
.dsh-kpi.accent-brand { --acc: var(--eu-brand-600); --acc-bg: var(--eu-brand-50); }
.dsh-kpi.accent-ok { --acc: var(--eu-ok); --acc-bg: var(--eu-ok-bg); }
.dsh-kpi.accent-warn { --acc: var(--eu-warn); --acc-bg: var(--eu-warn-bg); }
.dsh-kpi.accent-bad { --acc: var(--eu-bad); --acc-bg: var(--eu-bad-bg); }
.dsh-kpi.accent-violet { --acc: #5A3FC0; --acc-bg: #EFEBFF; }
.dsh-kpi.accent-teal { --acc: #0E6F66; --acc-bg: #E3F6F4; }
.dsh-kpi.accent-slate { --acc: var(--eu-n600); --acc-bg: var(--eu-n100); }
.dsh-kpi.skel { border-color: transparent; }

/* Lưới thẻ */
.dsh-grid { display: grid; gap: 12px; }
.dsh-grid-8-4 { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.dsh-grid-7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.dsh-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dsh-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dsh-card { background: var(--eu-surface); border: 1px solid var(--eu-rule); border-radius: 14px; box-shadow: var(--eu-shadow-1); display: flex; flex-direction: column; min-width: 0; }
.dsh-card-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px 8px; }
.dsh-card-head h3 { margin: 0; font-size: var(--eu-fs-13); font-weight: 700; color: var(--eu-ink); display: inline-flex; align-items: center; gap: 8px; flex: 1; }
.dsh-card-head h3 i { color: var(--eu-brand-600); font-size: 13px; }
.dsh-card-head .hint { font-size: var(--eu-fs-11); color: var(--eu-muted); }
.dsh-card-head .hint.link { color: var(--eu-brand-700); font-weight: 600; text-decoration: none; }
.dsh-card-head .hint.link:hover { text-decoration: underline; }
.dsh-card-body { padding: 4px 16px 14px; flex: 1; min-width: 0; }
.dsh-card-body.nopad { padding: 0 0 6px; }
.dsh-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 160px; color: var(--eu-muted); font-size: var(--eu-fs-13); }
.dsh-empty i { font-size: 26px; color: var(--eu-n300); }
.dsh-empty.small { min-height: 110px; font-size: var(--eu-fs-12); }
.dsh-more { margin-top: 10px; }

/* Donut */
.dsh-donut { position: relative; }
.dsh-donut-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.dsh-donut-center b { display: block; font-size: 20px; font-weight: 750; color: var(--eu-ink); line-height: 1; }
.dsh-donut-center span { font-size: var(--eu-fs-11); color: var(--eu-muted); }
.dsh-legend { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.dsh-legend .row { display: grid; grid-template-columns: 10px 1fr auto 40px; align-items: center; gap: 8px; font-size: var(--eu-fs-12); }
.dsh-legend .sw { width: 10px; height: 10px; border-radius: 3px; }
.dsh-legend .lb { color: var(--eu-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsh-legend b { color: var(--eu-ink); }
.dsh-legend .pc { text-align: right; color: var(--eu-muted); }

/* Thanh phân bổ */
.dsh-bars { display: flex; flex-direction: column; gap: 9px; padding-top: 4px; }
.dsh-bars .bar-row { display: grid; grid-template-columns: minmax(90px, 34%) 1fr 44px 40px; align-items: center; gap: 10px; font-size: var(--eu-fs-12); }
.dsh-bars .bar-row .av { width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.dsh-bars .bar-row:has(.av) { grid-template-columns: 26px minmax(80px, 30%) 1fr 44px 40px; }
.dsh-bars .lb { color: var(--eu-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsh-bars .track { height: 8px; border-radius: 4px; background: var(--eu-n100); overflow: hidden; }
.dsh-bars .fill { display: block; height: 100%; border-radius: 4px; transition: width .4s ease; }
.dsh-bars .val { text-align: right; color: var(--eu-ink); }
.dsh-bars .pc { text-align: right; color: var(--eu-muted); }

/* Bảng gần đây */
.dsh-tablewrap { overflow-x: auto; }
.dsh-table { width: 100%; border-collapse: collapse; font-size: var(--eu-fs-12); }
.dsh-table th { text-align: left; font-size: var(--eu-fs-11); font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--eu-muted); padding: 6px 12px; border-bottom: 1px solid var(--eu-rule); white-space: nowrap; }
.dsh-table td { padding: 8px 12px; border-bottom: 1px solid var(--eu-rule); vertical-align: middle; white-space: nowrap; color: var(--eu-ink-2); }
.dsh-table tbody tr { cursor: pointer; }
.dsh-table tbody tr:hover td { background: var(--eu-brand-50); }
.dsh-table tbody tr:last-child td { border-bottom: 0; }
.dsh-table td .code { display: block; color: var(--eu-brand-700); }
.dsh-table td .nm { display: block; color: var(--eu-muted); font-size: var(--eu-fs-11); max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.dsh-table td.muted { color: var(--eu-muted); }
.dsh-table span.status { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 6px; font-size: var(--eu-fs-11); font-weight: 700; color: #fff; background: var(--eu-n400); }
.dsh-table span.status.status-Created, .dsh-table span.status.status-Initiated, .dsh-table span.status.status-PartnerInitiated { background: var(--eu-brand-600); }
.dsh-table span.status.status-Completed { background: var(--eu-ok); }
.dsh-table span.status.status-Cancel { background: var(--eu-bad); }
.dsh-table span.status.status-AwaitingPartnerSignature, .dsh-table span.status.status-Signing, .dsh-table span.status.status-LetterSent,
.dsh-table span.status.status-ReSign, .dsh-table span.status.status-WarehouseHandover, .dsh-table span.status.status-PendingUpdate { background: var(--eu-warn); }

/* Danh sách sắp hết hiệu lực */
.dsh-list { list-style: none; margin: 0; padding: 0; }
.dsh-list li { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--eu-rule); cursor: pointer; }
.dsh-list li:hover { background: var(--eu-brand-50); }
.dsh-list li:last-child { border-bottom: 0; }
.dsh-list .days { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 44px; height: 40px; border-radius: 10px; background: var(--eu-ok-bg); color: var(--eu-ok-ink); line-height: 1; }
.dsh-list .days b { font-size: 15px; font-weight: 750; }
.dsh-list .days small { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.dsh-list .days.soon { background: var(--eu-warn-bg); color: var(--eu-warn-ink); }
.dsh-list .days.urgent { background: var(--eu-bad-bg); color: var(--eu-bad-ink); }
.dsh-list .t { display: flex; flex-direction: column; min-width: 0; }
.dsh-list .t b { font-size: var(--eu-fs-13); color: var(--eu-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsh-list .t span { font-size: var(--eu-fs-11); color: var(--eu-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsh-list .dt { font-size: var(--eu-fs-12); color: var(--eu-muted); }

/* Skeleton */
.dsh .skel, .dsh .skel-block { position: relative; overflow: hidden; background: var(--eu-n100); border-radius: 12px; }
.dsh .skel::after, .dsh .skel-block::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); animation: skeleton-shimmer 1.2s ease-in-out infinite; }
@keyframes skeleton-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* Radzen chart trong dashboard: chữ theo font hệ thống */
.dsh .rz-chart text, .dsh .rz-legend-item-text { font-family: var(--eu-font) !important; font-size: 11px !important; fill: var(--eu-muted); }
.dsh .rz-chart-tooltip { font-family: var(--eu-font); }

@media (max-width: 1199px) {
  .dsh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dsh-grid-8-4, .dsh-grid-7-5, .dsh-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .dsh { padding: 10px 12px 20px; gap: 10px; }
  .dsh-kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .dsh-kpi { padding: 12px 12px 10px; min-height: 96px; }
  .dsh-kpi .v { font-size: 22px; }
  .dsh-kpi .ic { width: 30px; height: 30px; font-size: 13px; right: 10px; top: 10px; }
  .dsh-range { width: 100%; }
  .dsh-range .eu-seg { flex: 1; display: flex; }
  .dsh-range .eu-seg button { flex: 1; justify-content: center; padding: 0 6px; }
  .dsh-bars .bar-row { grid-template-columns: minmax(80px, 40%) 1fr 40px 36px; gap: 6px; }
}

/* =====================================================================
   24. ĐĂNG NHẬP (.lg-*) — 2 cột: dải thương hiệu gradient + thẻ đăng nhập
   ===================================================================== */
.lg-shell { min-height: 100vh; background: var(--eu-bg); font-family: var(--eu-font); color: var(--eu-ink); }
.lg { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 100vh; }

/* Cột trái */
.lg-side { position: relative; overflow: hidden; background: linear-gradient(160deg, #0872AA 0%, #0A8CD0 45%, #1DBBFF 100%); color: #fff; display: flex; align-items: center; }
.lg-side-inner { position: relative; z-index: 1; padding: 56px 8% 48px; max-width: 560px; }
.lg-brand { font: 800 34px/1 var(--eu-font); letter-spacing: .06em; }
.lg-brand b { font-weight: 400; opacity: .9; }
.lg-side h2 { margin: 34px 0 12px; font-size: clamp(24px, 2.6vw, 34px); font-weight: 750; line-height: 1.2; letter-spacing: -.02em; }
.lg-lead { margin: 0 0 26px; font-size: var(--eu-fs-14); line-height: 1.6; opacity: .92; max-width: 46ch; }
.lg-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lg-points li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--eu-fs-13); line-height: 1.45; opacity: .95; }
.lg-points li i { flex: none; width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.lg-foot { margin-top: 44px; font-size: var(--eu-fs-12); opacity: .75; }
.lg-orb { position: absolute; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.28), rgba(255,255,255,.04) 65%, transparent 70%); pointer-events: none; }
.lg-orb.o1 { width: 420px; height: 420px; right: -140px; top: -120px; }
.lg-orb.o2 { width: 300px; height: 300px; left: -120px; bottom: -100px; }
.lg-orb.o3 { width: 160px; height: 160px; right: 12%; bottom: 14%; opacity: .7; }

/* Cột phải */
.lg-main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; position: relative; }
.lg-card { width: min(440px, 100%); background: var(--eu-surface); border: 1px solid var(--eu-rule); border-radius: 18px; padding: 30px 30px 24px; box-shadow: 0 24px 60px rgba(23,33,42,.10), 0 2px 8px rgba(23,33,42,.05); display: flex; flex-direction: column; gap: 14px; }
.lg-card-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.lg-logo { display: none; font: 800 22px/1 var(--eu-font); letter-spacing: .06em; background: var(--eu-brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lg-logo b { font-weight: 400; }
.lg-card-head h1 { margin: 0; font-size: 24px; font-weight: 750; letter-spacing: -.02em; }
.lg-card-head p { margin: 0; font-size: var(--eu-fs-13); color: var(--eu-muted); }

.lg-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.lg-field > span { font-size: var(--eu-fs-12); font-weight: 600; color: var(--eu-ink-2); }
.lg-field .in { position: relative; display: flex; align-items: center; height: 44px; border: 1px solid var(--eu-n300); border-radius: 12px; background: var(--eu-surface); transition: border-color .15s, box-shadow .15s; }
.lg-field .in:focus-within { border-color: var(--eu-brand-600); box-shadow: var(--eu-focus); }
.lg-field .in > i:first-child { position: absolute; left: 13px; color: var(--eu-faint); font-size: 14px; pointer-events: none; }
.lg-field .in input, .lg-field .in select { flex: 1; height: 100%; width: 100%; border: 0; outline: 0; background: transparent; padding: 0 12px 0 40px; font: 500 var(--eu-fs-14) var(--eu-font); color: var(--eu-ink); border-radius: 12px; }
.lg-field .in select { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer; }
.lg-field .in.sel .caret { position: absolute; right: 12px; font-size: 11px; color: var(--eu-faint); pointer-events: none; }
.lg-field .in.disabled { background: var(--eu-surface-2); }
.lg-field .in.disabled select { color: var(--eu-faint); cursor: not-allowed; }
.lg-field .in input::placeholder { color: var(--eu-faint); font-weight: 400; }
.lg-field .in .eye { position: absolute; right: 6px; width: 32px; height: 32px; border: 0; background: transparent; border-radius: 8px; color: var(--eu-faint); cursor: pointer; }
.lg-field .in .eye:hover { background: var(--eu-surface-2); color: var(--eu-ink-2); }
.lg-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.lg-submit { margin-top: 6px; height: 46px; border: 0; border-radius: 12px; background: var(--eu-brand-grad); color: #fff; font: 700 var(--eu-fs-14) var(--eu-font); letter-spacing: .01em; display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; box-shadow: var(--eu-brand-shadow); transition: filter .15s, transform .15s, box-shadow .15s; }
.lg-submit:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(10,140,208,.36); }
.lg-submit:disabled { opacity: .7; cursor: progress; }
.lg-submit .eu-spin { border-color: rgba(255,255,255,.4); border-top-color: #fff; }
.lg-help { margin: 4px 0 0; font-size: var(--eu-fs-12); color: var(--eu-muted); display: flex; align-items: center; gap: 6px; }
.lg-mobile-foot { display: none; margin-top: 18px; font-size: var(--eu-fs-12); color: var(--eu-faint); }

@media (max-width: 991px) {
  .lg { grid-template-columns: 1fr; }
  .lg-side { display: none; }
  .lg-main { min-height: 100vh; background: radial-gradient(1200px 600px at 50% -200px, var(--eu-brand-50), var(--eu-bg) 60%); }
  .lg-logo { display: inline-block; margin-bottom: 4px; }
  .lg-mobile-foot { display: block; }
}
@media (max-width: 480px) {
  .lg-main { padding: 20px 14px; align-items: stretch; }
  .lg-card { padding: 24px 18px 20px; border-radius: 16px; }
  .lg-row2 { grid-template-columns: 1fr; }
}

/* =====================================================================
   25. WORDMARK "EDOC" dùng chung (header, đăng nhập, màn chờ) + chỉnh trang đăng nhập / donut
   ===================================================================== */
.eu-wordmark { display: inline-flex; align-items: center; gap: 8px; text-decoration: none !important; line-height: 1; }
.eu-wordmark .mark { width: 30px; height: 30px; border-radius: 9px; background: var(--eu-brand-grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; box-shadow: 0 3px 8px rgba(10,140,208,.30); flex: none; }
.eu-wordmark .txt { font-family: var(--eu-font); font-weight: 800; font-size: 19px; letter-spacing: -.02em; color: var(--eu-ink); }
.eu-wordmark .txt::first-letter { color: var(--eu-brand-600); }
.eu-wordmark.light .mark { background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35); box-shadow: none; }
.eu-wordmark.light .txt { color: #fff; }
.eu-wordmark.light .txt::first-letter { color: #fff; }
.eu-header .eu-brand.eu-wordmark .txt { font-size: 18px; }
.eu-header .eu-brand.eu-wordmark .mark { width: 28px; height: 28px; font-size: 13px; }
.lg-brand.eu-wordmark { gap: 12px; }
.lg-brand.eu-wordmark .mark { width: 48px; height: 48px; border-radius: 14px; font-size: 22px; }
.lg-brand.eu-wordmark .txt { font-size: 34px; letter-spacing: -.02em; }
.lg-logo.eu-wordmark { display: none; }
@media (max-width: 991px) { .lg-logo.eu-wordmark { display: inline-flex; margin-bottom: 6px; } }
.eu-loading-logo.eu-wordmark .txt { font-size: 22px; background: none !important; -webkit-text-fill-color: initial; color: var(--eu-ink); }
.eu-loading-logo.eu-wordmark .txt::first-letter { color: var(--eu-brand-600); }

/* Đăng nhập: bỏ danh sách điểm nổi bật → cột trái gọn hơn; 2 ô chọn xếp dọc cho đủ chỗ chữ */
.lg-side h2 { margin-top: 30px; }
.lg-lead { margin-bottom: 0; }
.lg-row2 { grid-template-columns: 1fr; }
.lg-field .in select { font-size: var(--eu-fs-14); font-weight: 500; color: var(--eu-ink); padding-left: 40px; padding-right: 36px; text-overflow: ellipsis; }
.lg-field .in select:invalid, .lg-field .in select option[value=""] { color: var(--eu-faint); }
.lg-field .in select option { color: var(--eu-ink); font-size: 14px; padding: 6px 8px; }
.lg-field .in select:has(option[value=""]:checked) { color: var(--eu-faint); font-weight: 400; }

/* Dashboard: donut thuần CSS */
.dsh-donut { width: 168px; height: 168px; margin: 6px auto 4px; position: relative; }
.dsh-donut .ring { width: 100%; height: 100%; border-radius: 50%; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 26px), #000 calc(100% - 25px)); mask: radial-gradient(farthest-side, transparent calc(100% - 26px), #000 calc(100% - 25px)); }

/* 25b. Wordmark EDOC: chữ gradient (không icon), không xuống dòng lệch ở tiêu đề đăng nhập */
.eu-wordmark .mark { display: none !important; }
.eu-wordmark .txt, .eu-wordmark.light .txt, .eu-loading-logo.eu-wordmark .txt {
  background: linear-gradient(90deg, #F59E42 0%, #F08A5D 30%, #6FA8DC 62%, #1DBBFF 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent;
  font-weight: 800; letter-spacing: .04em;
}
.eu-wordmark .txt::first-letter, .eu-wordmark.light .txt::first-letter, .eu-loading-logo.eu-wordmark .txt::first-letter { color: inherit; }
.eu-wordmark.light .txt { filter: drop-shadow(0 1px 0 rgba(255,255,255,.35)); }
.lg-brand.eu-wordmark .txt { font-size: 40px; }
.lg-side h2 { white-space: nowrap; font-size: clamp(22px, 2.3vw, 32px); }
.lg-lead { white-space: normal; max-width: none; }
@media (max-width: 1250px) { .lg-side h2 { white-space: normal; } }


/* =====================================================================
   26. SOFT UI — bo tròn lớn · bóng mềm · header/menu thành panel nổi · CHẾ ĐỘ TỐI
   Ghi đè token + một số lớp ở trên. Mọi thứ vẫn đi qua var(--eu-*) nên đổi ở đây là lan toàn app.
   Chế độ tối: html[data-theme="dark"] (js/edoc-theme.js đặt thuộc tính, lưu LocalStorage "edoc.theme").
   ===================================================================== */
:root {
  --eu-radius: 10px;
  --eu-radius-lg: 16px;
  --eu-radius-xl: 20px;
  --eu-bg: #F2F5F9;
  --eu-rule: rgba(23, 33, 42, .09);
  --eu-rule-strong: rgba(23, 33, 42, .16);
  --eu-shadow-1: 0 1px 2px rgba(23,33,42,.04), 0 10px 30px rgba(23,33,42,.06);
  --eu-shadow-2: 0 2px 6px rgba(23,33,42,.06), 0 18px 48px rgba(23,33,42,.14);
  --eu-shadow-hover: 0 6px 18px rgba(23,33,42,.10);
  --eu-glass: rgba(255, 255, 255, .82);
  --eu-thead: linear-gradient(180deg, #F8FAFD, #F1F4F8);
  --eu-header-gap: 10px;
  --eu-overlay: rgba(23, 33, 42, .38);
  color-scheme: light;
}

/* ---- Khung: header + menu trái là panel nổi, tách khỏi mép ---- */
.eu-app { grid-template-rows: calc(var(--eu-header-h) + var(--eu-header-gap)) 1fr; }
.eu-header {
  margin: var(--eu-header-gap) 12px 0; height: var(--eu-header-h);
  border: 1px solid var(--eu-rule); border-radius: 14px;
  background: var(--eu-glass); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: var(--eu-shadow-1);
}
.eu-header::after { display: none; }
.eu-header .eu-iconbtn { border-radius: 12px; background: var(--eu-surface-2); }
.eu-header .eu-iconbtn:hover { background: var(--eu-brand-50); color: var(--eu-brand-700); }
.eu-header .eu-user { background: var(--eu-surface-2); padding: 0 10px 0 4px; }
.eu-header .eu-user:hover { background: var(--eu-brand-50); }
.eu-header .eu-branch { background: transparent; border: 1px solid var(--eu-rule); color: var(--eu-muted); }

.eu-nav {
  margin: var(--eu-header-gap) 0 12px 12px;
  border: 1px solid var(--eu-rule); border-right: 1px solid var(--eu-rule);
  border-radius: var(--eu-radius-xl); box-shadow: var(--eu-shadow-1);
}
.eu-nav .eu-nav-scroll { padding: 12px 10px; }
.eu-nav .eu-nav-item { height: 38px; padding: 0 12px; margin: 2px 0; border-radius: 12px; }
.eu-nav .eu-nav-item.active { background: var(--eu-brand-50); box-shadow: inset 0 0 0 1px rgba(10,140,208,.16); }
.eu-nav .eu-nav-item.active::before { display: none; }
.eu-app[data-nav="rail"] .eu-nav .eu-nav-item { border-radius: 12px; }
.eu-main > article { border-radius: var(--eu-radius-lg); }

/* ---- Nút, nhóm chọn, ô nhập ---- */
.eu-btn { box-shadow: 0 1px 2px rgba(23,33,42,.04); transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s, transform .12s; }
.eu-btn:hover { box-shadow: var(--eu-shadow-hover); transform: translateY(-1px); }
.eu-btn:active { transform: none; }
.eu-btn.primary:hover { box-shadow: 0 10px 24px rgba(10,140,208,.36); }
.eu-seg { border: 0; background: var(--eu-surface-2); padding: 3px; gap: 2px; box-shadow: inset 0 0 0 1px var(--eu-rule); }
.eu-seg > button, .eu-seg > .eu-seg-item { border-right: 0 !important; border-radius: 8px; height: calc(var(--eu-control-h) - 6px); padding: 0 12px; }
.eu-seg > button.active, .eu-seg > .eu-seg-item.active { background: var(--eu-surface); box-shadow: 0 1px 3px rgba(23,33,42,.14); }
.eu-input, .rz-textbox, .rz-dropdown, .rz-numeric, .rz-multiselect, .rz-lookup, .rz-datepicker, .form-control, .form-select { background: var(--eu-surface) !important; }

/* ---- Tiêu đề trang: không xuống dòng / không lệch khi bo tròn ---- */
.eu-page-header { flex-wrap: nowrap; gap: 10px; min-width: 0; }
.eu-page-header .eu-title, .eu-page-header .eu-count, .eu-page-header .eu-hidden-hint { white-space: nowrap; }
.eu-page-header .eu-count, .eu-page-header .eu-hidden-hint { display: inline-flex; align-items: center; height: 24px; line-height: 1; }
.eu-page-header .eu-actions { flex-wrap: nowrap; min-width: 0; overflow-x: auto; overflow-y: hidden; padding: 3px 2px; margin: -3px -2px; scrollbar-width: none; }
.eu-page-header .eu-actions::-webkit-scrollbar { display: none; }
.eu-page-header .eu-actions .eu-btn { flex: none; }
@media (max-width: 1199px) { .eu-page-header { flex-wrap: wrap; } .eu-page-header .eu-actions { flex-wrap: wrap; overflow: visible; } }

/* ---- Thẻ, thanh lọc, chip ---- */
.eu-toolbar-card { border-radius: var(--eu-radius-lg); box-shadow: var(--eu-shadow-1); }
.eu-chip { box-shadow: none; border-color: transparent; }
.eu-extra { border-radius: var(--eu-radius-lg); box-shadow: var(--eu-shadow-2); background: var(--eu-surface); }

/* ---- Bảng chứng từ ---- */
.Table-container { border-radius: var(--eu-radius-lg) !important; box-shadow: var(--eu-shadow-1) !important; border-color: var(--eu-rule); }
.hierarchy-table thead th { background: var(--eu-thead) !important; }
.hierarchy-table tbody td { border-bottom-color: var(--eu-rule) !important; }
.hierarchy-table .expand-btn { border-radius: 8px; }
.hierarchy-table .eu-rowactions button { border-radius: 8px; }
.eu-pager { margin: 0 16px 10px; border: 1px solid var(--eu-rule); border-radius: 12px; box-shadow: var(--eu-shadow-1); position: static; }
.eu-pager .rz-pager .rz-paginator-element, .eu-pager .rz-pager .rz-paginator-page,
.rz-pager .rz-paginator-page, .rz-paginator .rz-paginator-page { border-radius: 9px !important; }
.rz-pager .rz-paginator-page.rz-state-active, .rz-paginator .rz-paginator-page.rz-state-active { box-shadow: 0 4px 10px rgba(10,140,208,.30); }
.eu-bulkbar { border-radius: 14px; }

/* ---- Menu chuột phải, menu thả, popup Radzen ---- */
.context-menu.ctx-menu-fixed { border-radius: 14px; padding: 6px; background: var(--eu-surface); border: 1px solid var(--eu-rule); }
.context-menu.ctx-menu-fixed li { border-radius: 8px; }
.eu-menu, .rz-dropdown-panel, .rz-multiselect-panel, .rz-datepicker-panel, .rz-popup, .rz-lookup-panel, .rz-autocomplete-panel { border-radius: 14px !important; }
.rz-data-grid { border-radius: var(--eu-radius-lg) !important; overflow: hidden; box-shadow: var(--eu-shadow-1); }

/* ---- Dialog ---- */
.blazor-dialog-container { background: var(--eu-overlay) !important; }
.blazor-dialog-content { border-radius: var(--eu-radius-xl) !important; border: 0 !important; box-shadow: var(--eu-shadow-2), 0 0 0 1px var(--eu-rule) !important; }
.blazor-dialog-header { padding: 12px 14px 12px 20px !important; }
.blazor-dialog-header .btn-close-dialog { border-radius: 10px !important; background: var(--eu-surface-2) !important; }
.blazor-dialog-body { padding: 18px 20px !important; }
.blazor-dialog-footer { padding: 12px 20px !important; }
.blazor-dialog-body .card-header, .blazor-dialog-body .section-title {
  display: flex !important; align-items: center; gap: 10px; margin: 10px 0 8px !important; padding: 0 !important;
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  font-size: 11px !important; font-weight: 700 !important; letter-spacing: .08em; text-transform: uppercase; color: var(--eu-brand-700) !important;
}
.blazor-dialog-body .card-header::after, .blazor-dialog-body .section-title::after { content: ""; flex: 1; height: 1px; background: var(--eu-rule); }
.rz-dialog, .modal-content, .dialog-content { border-radius: var(--eu-radius-xl) !important; border: 0 !important; box-shadow: var(--eu-shadow-2), 0 0 0 1px var(--eu-rule) !important; }
.rz-button { box-shadow: none !important; }
.rz-button.rz-primary { background: var(--eu-brand-grad) !important; box-shadow: var(--eu-brand-shadow) !important; }

/* ---- Dashboard ---- */
.dsh-kpi { border-radius: var(--eu-radius-lg); padding-left: 16px; }
.dsh-kpi::before { display: none; }
.dsh-kpi .ic { border-radius: 12px; }
.dsh-kpi:hover { box-shadow: var(--eu-shadow-hover); }
.dsh-card { border-radius: var(--eu-radius-lg); }

/* ---- Đăng nhập ---- */
.lg-card { border-radius: 22px; border-color: var(--eu-rule); }
.lg-field .in { border-radius: 12px; border-color: var(--eu-rule-strong); }

/* ---- Trang còn dùng header cũ (Cài đặt, Danh mục...) ---- */
.Header-container, .header-midside { background: transparent !important; }
.additional-filters-overlay { border-radius: var(--eu-radius-lg); }
.filter-mode-container, .btn-group.filter-mode-container { border: 0; background: var(--eu-surface-2); padding: 3px; border-radius: var(--eu-radius); box-shadow: inset 0 0 0 1px var(--eu-rule); }
.btn-filter-mode { border-right: 0 !important; border-radius: 8px !important; height: calc(var(--eu-control-h) - 6px) !important; }
.btn-filter-mode.active { background: var(--eu-surface) !important; box-shadow: 0 1px 3px rgba(23,33,42,.14); }

/* ---- Nút chuyển sáng/tối trên header ---- */
.eu-theme-btn .ic-dark { display: none; }
html[data-theme="dark"] .eu-theme-btn .ic-dark { display: inline; }
html[data-theme="dark"] .eu-theme-btn .ic-light { display: none; }

/* =====================================================================
   CHẾ ĐỘ TỐI — chỉ đổi token; các lớp bên trên tự theo. Kèm vài ghi đè cho Radzen/Bootstrap/BlazorDialog
   vốn có màu trắng cứng trong theme gốc.
   ===================================================================== */
html[data-theme="dark"] {
  color-scheme: dark;
  --eu-n0:   #161F28;
  --eu-n50:  #0E141B;
  --eu-n100: #1C2631;
  --eu-n200: #2B3844;
  --eu-n300: #3B4A5A;
  --eu-n400: #6E8092;
  --eu-n600: #A6B3C1;
  --eu-n800: #D8E0E8;
  --eu-n900: #EEF3F8;
  --eu-bg: #0E141B;
  --eu-rule: rgba(255, 255, 255, .09);
  --eu-rule-strong: rgba(255, 255, 255, .16);
  --eu-brand-50:  #11293C;
  --eu-brand-100: #173C58;
  --eu-brand-200: #1E5D88;
  --eu-ok-bg: #13301F;  --eu-ok-ink: #7DDBA6;
  --eu-warn-bg: #3A2A0A; --eu-warn-ink: #F4C96F;
  --eu-bad-bg: #3E1916;  --eu-bad-ink: #F6A299;
  --eu-focus: 0 0 0 3px rgba(29, 187, 255, .32);
  --eu-shadow-1: 0 1px 2px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.35);
  --eu-shadow-2: 0 2px 6px rgba(0,0,0,.45), 0 18px 48px rgba(0,0,0,.6);
  --eu-shadow-hover: 0 6px 18px rgba(0,0,0,.45);
  --eu-glass: rgba(22, 31, 40, .84);
  --eu-thead: linear-gradient(180deg, #1C2631, #182129);
  --eu-overlay: rgba(0, 0, 0, .55);
}
html[data-theme="dark"] body { background: var(--eu-bg); color: var(--eu-ink); }
html[data-theme="dark"] .eu-seg > button.active, html[data-theme="dark"] .btn-filter-mode.active { box-shadow: 0 1px 3px rgba(0,0,0,.5); }
html[data-theme="dark"] .eu-btn.primary, html[data-theme="dark"] .rz-button.rz-primary { box-shadow: 0 6px 16px rgba(10,140,208,.35); }
html[data-theme="dark"] .eu-bulkbar { background: linear-gradient(90deg, #243444, #1B2A38); }
html[data-theme="dark"] .hierarchy-table tbody tr.tree-band-b:not(.selected-row) > td,
html[data-theme="dark"] .hierarchy-table tbody tr.tree-band-b:not(.selected-row) td.sticky-column { background-color: #121A22; }
html[data-theme="dark"] .hierarchy-table .skeleton-bar { background: linear-gradient(90deg, var(--eu-n100) 25%, var(--eu-n200) 50%, var(--eu-n100) 75%); background-size: 200% 100%; }

/* Radzen: ô nhập, panel, lịch, lưới, nút phụ */
html[data-theme="dark"] .rz-textbox, html[data-theme="dark"] .rz-dropdown, html[data-theme="dark"] .rz-numeric, html[data-theme="dark"] .rz-multiselect,
html[data-theme="dark"] .rz-lookup, html[data-theme="dark"] .rz-datepicker, html[data-theme="dark"] .rz-textarea,
html[data-theme="dark"] .rz-inputtext, html[data-theme="dark"] .rz-spinner input, html[data-theme="dark"] .rz-dropdown-label,
html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] .form-check-input {
  background: var(--eu-surface) !important; color: var(--eu-ink) !important; border-color: var(--eu-rule) !important;
}
html[data-theme="dark"] .rz-dropdown-panel, html[data-theme="dark"] .rz-multiselect-panel, html[data-theme="dark"] .rz-datepicker-panel,
html[data-theme="dark"] .rz-popup, html[data-theme="dark"] .rz-lookup-panel, html[data-theme="dark"] .rz-autocomplete-panel,
html[data-theme="dark"] .rz-calendar, html[data-theme="dark"] .rz-calendar-header, html[data-theme="dark"] .rz-dropdown-items, html[data-theme="dark"] .rz-dropdown-filter-container,
html[data-theme="dark"] .rz-lookup-search, html[data-theme="dark"] .rz-data-grid, html[data-theme="dark"] .rz-grid-table, html[data-theme="dark"] .rz-datatable,
html[data-theme="dark"] .rz-grid-table tbody td, html[data-theme="dark"] .rz-datatable-data td, html[data-theme="dark"] .rz-data-grid .rz-datatable-data > tr > td,
html[data-theme="dark"] .rz-pager, html[data-theme="dark"] .rz-paginator, html[data-theme="dark"] .rz-dialog, html[data-theme="dark"] .rz-dialog-content,
html[data-theme="dark"] .rz-tabview, html[data-theme="dark"] .rz-tabview-panel, html[data-theme="dark"] .rz-card, html[data-theme="dark"] .rz-fieldset {
  background: var(--eu-surface) !important; color: var(--eu-ink) !important;
}
html[data-theme="dark"] .rz-dropdown-item, html[data-theme="dark"] .rz-multiselect-item, html[data-theme="dark"] .rz-calendar td span,
html[data-theme="dark"] .rz-calendar th, html[data-theme="dark"] .rz-paginator-page, html[data-theme="dark"] .rz-paginator-element,
html[data-theme="dark"] .rz-text-body1, html[data-theme="dark"] .rz-text-subtitle2, html[data-theme="dark"] .rz-text-h6 { color: var(--eu-ink) !important; }
html[data-theme="dark"] .rz-dropdown-item:hover, html[data-theme="dark"] .rz-calendar td span:hover { background: var(--eu-brand-50) !important; }
html[data-theme="dark"] .rz-data-row:hover > td, html[data-theme="dark"] .rz-datatable-data tr:hover > td { background: var(--eu-brand-50) !important; }
html[data-theme="dark"] .rz-state-highlight > td { background: var(--eu-brand-100) !important; }
html[data-theme="dark"] .rz-grid-table thead th, html[data-theme="dark"] .rz-data-grid .rz-datatable-thead > tr > th { background: var(--eu-surface-2) !important; }
html[data-theme="dark"] .rz-button.rz-secondary, html[data-theme="dark"] .rz-button.rz-light, html[data-theme="dark"] .btn-secondary { background: var(--eu-surface-2) !important; color: var(--eu-ink) !important; border-color: var(--eu-rule) !important; }
html[data-theme="dark"] .rz-chkbox-box, html[data-theme="dark"] .rz-radiobutton-box { background: var(--eu-surface-2) !important; border-color: var(--eu-rule-strong) !important; }
html[data-theme="dark"] .rz-chkbox-box.rz-state-active { background: var(--eu-brand-600) !important; }
html[data-theme="dark"] .rz-state-disabled, html[data-theme="dark"] .rz-state-disabled * { opacity: .75; }

/* BlazorDialog, Bootstrap, hộp thoại thông báo, menu chuột phải, thẻ thường */
html[data-theme="dark"] .blazor-dialog-content, html[data-theme="dark"] .blazor-dialog-body, html[data-theme="dark"] .blazor-dialog-header, html[data-theme="dark"] .blazor-dialog-footer,
html[data-theme="dark"] .dialog-content, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .success-dialog, html[data-theme="dark"] .card, html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .context-menu.ctx-menu-fixed, html[data-theme="dark"] .bell-dialog, html[data-theme="dark"] .list-group-item, html[data-theme="dark"] .offcanvas {
  background: var(--eu-surface) !important; color: var(--eu-ink) !important; border-color: var(--eu-rule) !important;
}
html[data-theme="dark"] .dropdown-item, html[data-theme="dark"] .context-menu.ctx-menu-fixed li, html[data-theme="dark"] .success-dialog h4,
html[data-theme="dark"] .blazor-dialog-body label, html[data-theme="dark"] .blazor-dialog-body .rz-text-subtitle2, html[data-theme="dark"] .blazor-dialog-body h3 { color: var(--eu-ink) !important; }
html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .context-menu.ctx-menu-fixed li:hover { background: var(--eu-surface-2) !important; }
html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-light { background: var(--eu-surface) !important; }
html[data-theme="dark"] .text-dark, html[data-theme="dark"] .text-body, html[data-theme="dark"] .text-black { color: var(--eu-ink) !important; }
html[data-theme="dark"] .table { color: var(--eu-ink); --bs-table-bg: transparent; --bs-table-color: var(--eu-ink); --bs-table-border-color: var(--eu-rule); }
html[data-theme="dark"] .frame-container { background: var(--eu-bg) !important; }
html[data-theme="dark"] .Table-container { background: var(--eu-surface); }
html[data-theme="dark"] img.invert-dark { filter: invert(1); }
html[data-theme="dark"] ::selection { background: var(--eu-brand-200); }
html[data-theme="dark"] .lg-side { background: linear-gradient(160deg, #0B3A5C 0%, #0A6FA8 45%, #1A9FE0 100%); }
html[data-theme="dark"] .lg-main { background: var(--eu-bg); }

/* ---- Khung các trang cũ (Danh mục, Cài đặt...) theo ngôn ngữ thẻ nổi ---- */
.NV-container { margin: 0 16px 12px; border-radius: var(--eu-radius-lg) !important; border: 1px solid var(--eu-rule); box-shadow: var(--eu-shadow-1); }
.Header-setting-container { margin: 0 16px 12px; border-radius: var(--eu-radius-lg); border: 1px solid var(--eu-rule) !important; box-shadow: var(--eu-shadow-1) !important; }
.auto-rule-table-section, .abbreviation-section, .tables-container > div { border-radius: var(--eu-radius-lg) !important; }
html[data-theme="dark"] .rz-cell-data, html[data-theme="dark"] .rz-grid-table td span:not(.rz-button-text):not(.rz-button-icon),
html[data-theme="dark"] .rz-column-title, html[data-theme="dark"] .Setting-content-title, html[data-theme="dark"] .header-title-wrapper,
html[data-theme="dark"] .rz-grid-table td a:not(.rz-button) { color: var(--eu-ink) !important; }
html[data-theme="dark"] .rz-grid-table thead th .rz-column-title, html[data-theme="dark"] .rz-grid-table thead th { color: var(--eu-muted) !important; }
html[data-theme="dark"] .Setting-content-title *, html[data-theme="dark"] .Header-setting * { color: var(--eu-ink); }

/* =====================================================================
   27. SỬA DIALOG (2026-09): một lớp bo duy nhất + nút đóng gọn
   ===================================================================== */

/* BlazorDialog mặc định vẽ THÊM một khung ngoài (.blazor-dialog-content-wrapper:
   nền #fefefe + viền #888 + bóng) quanh .blazor-dialog-content (margin 5px, bo góc riêng)
   → hai lớp viền bo lệch nhau. Bỏ hẳn lớp ngoài, chỉ giữ lớp bo của content. */
.blazor-dialog-content-wrapper,
.blazor-dialog-content-wrapper-small, .blazor-dialog-content-wrapper-normal,
.blazor-dialog-content-wrapper-large, .blazor-dialog-content-wrapper-xlarge,
.blazor-dialog-content-wrapper-xxlarge, .blazor-dialog-content-wrapper-windowed {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.blazor-dialog-content { margin: 0 !important; }

/* Nút X đóng dialog: không nền (RadzenButton mặc định là primary nên bị rule
   .rz-button.rz-primary phía trên tô gradient xanh) — chỉ xoay khi hover. */
.btn-close-dialog.rz-button,
.blazor-dialog-header .btn-close-dialog {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  color: var(--eu-muted) !important;
  transition: transform .25s ease, color .15s ease !important;
}

.btn-close-dialog.rz-button:hover,
.blazor-dialog-header .btn-close-dialog:hover {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--eu-ink) !important;
  transform: rotate(180deg);
}