/* --- Nền tảng Layout & Base --- */
body {
  min-width: 0;
  overflow-x: clip;
}

.admin-layout {
  min-height: 100vh;
  background: var(--bg);
  display: flex;
}

/* --- Sidebar Hiện Đại --- */
#admin-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 220px;
  background: #0f172a; /* Slate 900 sâu sang trọng */
  color: #f1f5f9;
  padding: 20px 14px;
  z-index: 20;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), padding 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

#admin-sidebar::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.sidebar-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #94a3b8;
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.sidebar-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.toggle-icon {
  transition: transform 0.25s ease;
}

/* --- Mini Sidebar State (Thu gọn dạng Icon) --- */
body.sidebar-collapsed #admin-sidebar {
  width: 68px;
  padding: 20px 8px;
}

body.sidebar-collapsed .sidebar-toggle-btn .toggle-icon {
  transform: rotate(180deg);
}

body.sidebar-collapsed .admin-brand {
  padding: 8px 0 20px;
  justify-content: center;
}

body.sidebar-collapsed .admin-brand-logo,
body.sidebar-collapsed .admin-brand-text,
body.sidebar-collapsed .admin-nav-label,
body.sidebar-collapsed .admin-nav a span {
  display: none !important;
}

body.sidebar-collapsed .sidebar-toggle-btn {
  margin-left: 0;
}

body.sidebar-collapsed .admin-nav a {
  justify-content: center;
  padding: 10px 0;
}

.admin-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-brand-logo {
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  padding: 2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.admin-brand-text {
  display: flex;
  flex-direction: column;
}

.brand-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
}

.brand-sub {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
}

.admin-nav {
  display: grid;
  gap: 4px;
  margin-top: 20px;
}

.admin-nav-label {
  padding: 16px 12px 6px;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.admin-nav a {
  display: flex;
  min-height: 40px;
  align-items: center;
  border-radius: 8px;
  padding: 8px 12px;
  color: #94a3b8;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s ease;
  gap: 10px;
}

.admin-nav a svg {
  opacity: 0.7;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.admin-nav a:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #f1f5f9;
  text-decoration: none;
}

.admin-nav a:hover svg {
  opacity: 1;
  transform: translateX(2px);
}

.admin-nav a.active {
  background: var(--primary);
  color: #fff;
}

.admin-nav a.active svg {
  opacity: 1;
  color: var(--accent);
}

/* --- Header & Breadcrumb --- */
.admin-content {
  min-width: 0;
  flex: 1;
  margin-left: 220px;
  display: flex;
  flex-direction: column;
  transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

body.sidebar-collapsed .admin-content {
  margin-left: 68px !important;
}

.admin-header {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.admin-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.admin-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
}

.admin-breadcrumb svg {
  color: #94a3b8;
}

.admin-breadcrumb .current {
  color: var(--text);
  font-weight: 700;
}

.admin-header-right {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}


.user-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 16px;
  border-left: 1px solid var(--border);
}

.user-profile .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 2px 6px rgba(26, 43, 109, 0.15);
  overflow: hidden;
}

.user-profile .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; background: #fff; }
.user-profile .avatar > [hidden] { display: none; }

.user-info {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.user-info strong {
  font-size: 13px;
  color: var(--text);
}

.user-info small {
  font-size: 11px;
  color: var(--muted);
}

.menu-toggle {
  display: none;
  padding: 8px;
  border-radius: 8px;
}

/* --- Nội dung chính & Tiêu đề --- */
.admin-main {
  width: min(1280px, 100%);
  margin: 0 auto;
  padding: 24px;
}

.page-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.page-title h1 {
  margin: 4px 0 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
}

.eyebrow {
  color: var(--secondary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* --- Khối & Cards Thống Kê (Dashboard) --- */
.surface {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.metric-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-radius: var(--radius-md);
  color: inherit;
  transition: all 0.2s ease;
}

.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  border-color: rgba(26, 43, 109, 0.15);
}

.metric-info {
  display: flex;
  flex-direction: column;
}

.metric-label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}

.metric-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  margin: 4px 0;
  line-height: 1;
}

.metric-desc {
  font-size: 11px;
  color: var(--muted);
}

.metric-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: grid;
  place-items: center;
}

.metric-icon svg {
  width: 22px;
  height: 22px;
}

/* Biến thể màu cho Icon Metric */
.metric-icon.bg-blue { background: #eff6ff; color: #3b82f6; }
.metric-icon.bg-green { background: #f0fdf4; color: #22c55e; }
.metric-icon.bg-orange { background: #fff7ed; color: #f97316; }
.metric-icon.bg-purple { background: #faf5ff; color: #a855f7; }

/* --- Lưới widgets Dashboard --- */
.dashboard-widgets {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}

.dashboard-charts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 16px;
}

.widget {
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

.widget-header.no-border {
  border-bottom: none;
  padding-bottom: 0;
}

.widget-header h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

.widget-subtitle {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.dashboard-state {
  min-height: 168px;
  color: var(--muted);
}

.status-chart {
  display: grid;
  grid-template-columns: 156px minmax(0, 1fr);
  align-items: center;
  gap: 28px;
}

.donut-chart {
  width: 156px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.donut-center {
  width: 96px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  background: #fff;
  box-shadow: 0 0 0 1px var(--border);
}

.donut-center strong {
  color: var(--text);
  font-size: 24px;
  line-height: 1.1;
}

.donut-center span {
  color: var(--muted);
  font-size: 11px;
}

.chart-legend,
.bar-chart {
  list-style: none;
  padding: 0;
  margin: 0;
}

.chart-legend {
  display: grid;
  gap: 10px;
}

.chart-legend li,
.legend-label,
.bar-chart-label,
.activity-meta {
  display: flex;
  align-items: center;
}

.chart-legend li,
.bar-chart-label {
  justify-content: space-between;
  gap: 12px;
}

.legend-label {
  gap: 8px;
  color: var(--text);
  font-size: 13px;
}

.legend-label i {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--legend-color);
}

.chart-legend strong,
.bar-chart-label strong {
  color: var(--text);
  font-size: 13px;
}

.bar-chart {
  display: grid;
  gap: 15px;
}

.bar-chart li {
  min-width: 0;
}

.bar-chart-label a {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-chart-label a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.bar-track {
  height: 8px;
  margin-top: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-soft);
}

.bar-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3157c8, #5b7de1);
}

.dashboard-empty,
.dashboard-error {
  min-height: 150px;
  display: grid;
  place-items: center;
  padding: 20px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  text-align: center;
}

.dashboard-error {
  color: var(--danger);
  background: #fef2f2;
}

.activity-feed {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.activity-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.activity-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
}

.bg-blue-soft { background: #e0f2fe; color: #0369a1; }
.bg-green-soft { background: #dcfce7; color: #15803d; }
.bg-purple-soft { background: #f3e8ff; color: #6b21a8; }

.activity-content {
  flex: 1;
  font-size: 13px;
  line-height: 1.4;
}

.activity-content p {
  margin: 0 0 2px;
}

.activity-content small {
  color: var(--muted);
  font-size: 11px;
}

.activity-meta {
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
}

.shortcut-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.shortcut-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  transition: all 0.2s ease;
  text-align: center;
}

.shortcut-btn svg {
  width: 20px;
  height: 20px;
  color: var(--primary);
  transition: transform 0.2s ease;
}

.shortcut-btn:hover {
  background: #fff;
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.shortcut-btn:hover svg {
  transform: translateY(-2px);
}

/* --- Bộ lọc, Forms & Bảng dữ liệu --- */
.filters {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  align-items: flex-end;
  gap: 14px;
  padding: 18px;
  margin-bottom: 20px;
}

.filters .btn {
  margin-bottom: 0;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.article-row-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

.actions .btn {
  min-height: 36px;
  padding: 6px 12px;
  font-size: 13px;
}

.documents-admin-table {
  min-width: 1060px;
}

.documents-admin-table th,
.documents-admin-table td {
  vertical-align: middle;
}

.documents-admin-table tr {
  min-height: 76px;
}

.document-title-cell {
  max-width: 520px;
  white-space: normal;
  line-height: 1.45;
}

.document-updated-cell {
  color: #64748b;
  font-size: 13px;
  white-space: nowrap;
}

.document-actions {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 8px;
  min-width: 190px;
}

.document-actions .btn,
.document-actions a.btn {
  min-width: 54px;
  min-height: 36px;
  border-radius: 999px;
  padding: 6px 12px;
  white-space: nowrap;
}

.document-order-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.document-icon-btn,
.document-actions .document-icon-btn,
.document-actions a.document-icon-btn {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  display: inline-grid;
  place-items: center;
}

.document-view-btn svg,
.document-order-actions svg {
  display: block;
}

.status-toggle {
  border: 0;
  cursor: pointer;
}

.status-toggle:disabled,
.document-icon-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.status-select {
  min-height: 36px;
  height: 36px;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
}

.status-select:hover {
  border-color: var(--primary);
  background: var(--surface-soft);
}

.status-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgb(26 43 109 / 14%);
}

.badge {
  text-transform: capitalize;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 999px !important;
  font-size: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.badge.success {
  background: #10b981 !important;
  color: #fff !important;
}

.badge.warning {
  background: #f59e0b !important;
  color: #fff !important;
}

.badge.danger {
  background: #ef4444 !important;
  color: #fff !important;
}

.badge.draft {
  background: #6b7280 !important;
  color: #fff !important;
}

.data-table tr:hover td {
  background: var(--surface-soft);
}

.data-table td a {
  color: rgb(26, 32, 44);
  text-decoration: none;
}

.data-table td a:hover {
  color: var(--primary);
  text-decoration: underline;
}

/* --- Layout Biên Tập (Editor & Configuration) --- */
.editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.5fr) minmax(280px, 1fr);
  gap: 20px;
  align-items: start;
}

.form-section {
  padding: 20px;
}

.form-section h2 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 700;
}

.editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: var(--surface-soft);
}

.editor-toolbar button {
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.editor-toolbar button:hover {
  background: var(--surface-soft);
  border-color: var(--primary);
}

.content-editor {
  min-height: 360px;
  border: 1px solid var(--border);
  border-radius: 0 0 8px 8px;
  background: #fff;
  padding: 16px;
  outline: none;
}

.content-editor:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgb(26 43 109 / 10%);
}

.placement-order {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: var(--bg);
  font-weight: 700;
}

.placement-order.placement-label-badge {
  width: auto;
  padding: 0 10px;
  border-radius: 16px;
  font-size: 12px;
  white-space: nowrap;
}

/* --- Toasts --- */
.toast-region {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 100;
  display: grid;
  gap: 8px;
}

.toast {
  max-width: 360px;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  padding: 12px 16px;
  box-shadow: var(--shadow-lg);
  font-weight: 600;
  font-size: 14px;
}

.toast.error {
  background: var(--danger);
}

/* --- Cấu hình Trang (Page Config) --- */
.page-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.page-config-card {
  display: flex;
  min-height: 180px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  padding: 20px;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
}

.page-config-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.page-config-card h2 {
  margin: 12px 0 4px;
  font-size: 18px;
  font-weight: 700;
}

.page-config-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.page-editor-title {
  align-items: center;
}

.page-title-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-title-box {
  display: flex;
  flex-direction: column;
}

.slot-editor {
  display: grid;
  gap: 18px;
}

.slot-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.slot-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  border-bottom: 1px solid var(--border);
}

.slot-card-head h2 {
  margin: 4px 0;
  font-size: 18px;
  font-weight: 700;
}

.slot-card-head p {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0 0;
  color: var(--muted);
  font-size: 13px;
}

.slot-desc-icon {
  flex-shrink: 0;
  color: #2563eb;
}

.slot-key {
  font: 600 12px/1.4 monospace;
  color: var(--secondary);
}

.slot-items {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 18px;
  list-style: none;
}

.slot-item {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  background: #fff;
}

.slot-item-copy {
  min-width: 0;
  flex: 1;
}

.slot-item-copy strong {
  display: block;
  font-weight: 700;
}

.slot-item-copy small {
  display: block;
  color: var(--muted);
}

.slot-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 28px 16px;
  text-align: center;
  background: #f8fafc;
  border: 1px dashed var(--border, #cbd5e1);
  border-radius: 10px;
}

.slot-empty-state .empty-icon {
  color: #94a3b8;
  margin-bottom: 4px;
}

.slot-empty-state strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #475569;
}

.slot-empty-state small {
  display: block;
  font-size: 12px;
  color: var(--muted, #64748b);
}

.slot-add {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 0 18px 18px;
}

.slot-add select {
  min-height: 40px;
  height: 40px;
  border: 1.5px solid var(--border, #cbd5e1);
  border-radius: var(--radius-sm, 8px);
  background-color: #ffffff;
  padding: 0 36px 0 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text, #1e293b);
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}

.slot-add select:hover {
  border-color: var(--primary, #1a2b6d);
  background-color: var(--surface-soft, #f8fafc);
}

.slot-add select:focus {
  border-color: var(--primary, #1a2b6d);
  box-shadow: 0 0 0 3px rgb(26 43 109 / 14%);
}

.switch {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.switch input {
  width: 18px;
  height: 18px;
}

.config-alert {
  margin-bottom: 18px;
  border: 1px solid #b8c3e8;
  border-radius: 10px;
  background: #eef2ff;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 14px;
}

.config-alert.error {
  border-color: #efb5b5;
  background: #fff1f1;
  color: #921d1d;
}

.config-alert.success {
  border-color: #9fd8bc;
  background: #effbf5;
  color: #17623b;
}

/* --- Dialogs --- */
.item-dialog, .preview-dialog, .modal, dialog {
  width: min(680px, calc(100% - 28px));
  max-height: 90vh;
  border: 0;
  border-radius: 14px;
  padding: 0;
  box-shadow: var(--shadow-lg);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.item-dialog::-webkit-scrollbar, .preview-dialog::-webkit-scrollbar, .modal::-webkit-scrollbar, dialog::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.item-dialog::backdrop, .preview-dialog::backdrop {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
}

.item-dialog form {
  padding: 0;
  margin: 0;
}

.dialog-head, .modal-head, .dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.modal-head {
  padding: 12px 20px;
}

.modal-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.modal-head .icon-btn {
  width: 32px;
  height: 32px;
}

.dialog-head {
  position: sticky;
  top: 0;
  margin: 0;
  padding: 18px 22px 14px 22px;
  background: #ffffff;
  z-index: 10;
  border-bottom: 1px solid var(--border);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.dialog-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

#item-fields {
  padding: 20px 22px 8px 22px;
}

.required-star {
  color: #ef4444;
  font-weight: bold;
  margin-left: 2px;
}

.banner-image-group {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.banner-image-group legend {
  padding: 0 6px;
  color: #0f172a;
  font-weight: 600;
}

.banner-image-group .image-preview-container {
  margin-top: 0 !important;
}

.banner-image-error {
  color: #b91c1c;
  font-size: 12px;
  line-height: 1.5;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--muted, #64748b);
  cursor: pointer;
  transition: color 0.15s ease;
}

.icon-btn:hover, .icon-btn:focus {
  background: transparent !important;
  box-shadow: none !important;
  color: #0f172a;
}

/* --- Custom File Upload Field --- */
.file-upload-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.file-dropzone {
  position: relative;
  border: 2px dashed #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  padding: 16px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.file-dropzone:hover, .file-dropzone.dragover {
  border-color: var(--primary, #2563eb);
  background: #eff6ff;
}

.file-input-hidden {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.dropzone-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.dropzone-icon {
  color: var(--primary, #2563eb);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.file-dropzone:hover .dropzone-icon {
  transform: translateY(-2px);
}

.dropzone-text {
  text-align: left;
}

.dropzone-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}

.dropzone-sub {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

.file-selected-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  z-index: 3;
  position: relative;
}

.btn-clear-file {
  background: transparent;
  border: 0;
  color: #94a3b8;
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.btn-clear-file:hover {
  color: #ef4444;
}

.dialog-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px 24px 24px;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

.dialog-actions .btn {
  flex: 1;
  min-height: 42px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.checkbox-field {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 10px;
  cursor: pointer;
  user-select: none;
  width: fit-content;
}

.checkbox-field input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 4px !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  accent-color: #2563eb !important;
  cursor: pointer;
  flex-shrink: 0;
}

.checkbox-field span {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  cursor: pointer;
}

.preview-dialog {
  width: min(1280px, calc(100% - 30px));
  height: min(860px, calc(100vh - 30px));
  border: 0;
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow-lg);
}

.preview-dialog iframe {
  width: 100%;
  height: calc(100% - 54px);
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* --- Responsive & Animations --- */
@media(max-width: 900px) {
  #admin-sidebar {
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  body.nav-open #admin-sidebar {
    transform: none;
    box-shadow: 4px 0 24px rgba(15, 23, 42, 0.15);
  }
  .admin-content {
    margin-left: 0;
  }
  .menu-toggle {
    display: inline-flex;
  }
  .filters, .editor-layout, .dashboard-widgets, .dashboard-charts {
    grid-template-columns: 1fr;
  }
  .admin-main {
    padding: 16px;
  }
  .admin-header {
    padding: 0 16px;
  }
}

@media(max-width: 700px) {
  .status-chart {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .chart-legend {
    width: min(100%, 260px);
  }
  .page-editor-title, .slot-card-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .slot-item {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .slot-item-copy {
    flex-basis: calc(100% - 54px);
  }
  .slot-item .actions {
    width: 100%;
    padding-left: 48px;
  }
  .slot-add {
    align-items: stretch;
    flex-direction: column;
  }
}

@media(max-width: 560px) {
  .page-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
  .page-title .actions {
    width: 100%;
  }
  .page-title .actions .btn {
    flex: 1;
  }
  .form-section {
    padding: 16px;
  }
}

@media(prefers-reduced-motion: reduce) {
  #admin-sidebar {
    transition: none;
  }
}

/* --- Thư viện thông báo Toast tùy biến (Custom Toast) --- */
.admin-toast-region,
.admin-toast-region:popover-open {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  inset: auto 24px auto auto;
  top: 24px;
  right: 24px;
  overflow: visible;
  overflow-x: hidden;
}

.admin-toast {
  pointer-events: auto;
  min-width: 320px;
  max-width: 420px;
  background: #fff;
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08), 0 3px 10px rgba(15, 23, 42, 0.04);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transform: translateX(120%);
  animation: toast-slide-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: all 0.25s ease;
}

.admin-toast.success { border-left-color: var(--success); }
.admin-toast.error { border-left-color: var(--danger); }
.admin-toast.warning { border-left-color: var(--warning); }
.admin-toast.info { border-left-color: #3b82f6; }

.toast-body {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.toast-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.admin-toast.success .toast-icon { color: var(--success); }
.admin-toast.error .toast-icon { color: var(--danger); }
.admin-toast.warning .toast-icon { color: var(--warning); }
.admin-toast.info .toast-icon { color: #3b82f6; }

.toast-body span {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}

.toast-close {
  background: none;
  border: 0;
  color: #94a3b8;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.toast-close:hover {
  background: var(--bg);
  color: var(--text);
}

.admin-toast.fade-out {
  animation: toast-fade-out 0.25s ease forwards;
}

@keyframes toast-slide-in {
  to { transform: translateX(0); }
}

@keyframes toast-fade-out {
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* --- Form xác nhận Yes/No dạng Modal (Custom Confirm Modal) --- */
.confirm-dialog {
  border: 0;
  border-radius: 12px;
  padding: 0;
  max-width: 400px;
  width: calc(100% - 32px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  background: #fff;
  overflow: hidden;
  animation: confirm-zoom-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.confirm-dialog::backdrop {
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(4px);
  animation: confirm-fade-in 0.2s ease forwards;
}

.confirm-dialog-content {
  padding: 24px;
}

.confirm-dialog-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.confirm-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.confirm-icon.danger { background: #fee2e2; color: var(--danger); }
.confirm-icon.info { background: #dbeafe; color: #2563eb; }

.confirm-icon svg {
  width: 20px;
  height: 20px;
}

.confirm-dialog-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.confirm-dialog-body {
  margin-bottom: 20px;
  padding-left: 52px; /* Lùi lề để thẳng hàng với tiêu đề */
}

.confirm-dialog-body p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

.confirm-dialog-footer {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  padding-left: 0;
  width: 100%;
}

.confirm-dialog-footer .btn {
  flex: 1;
  min-height: 40px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

@keyframes confirm-zoom-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes confirm-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --- Tiêu đề có nút Quay lại (Back Button) --- */
.title-with-back {
  display: flex;
  align-items: center;
  gap: 14px;
}

.btn-back,
.builder-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  background: #fff !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.btn-back:hover,
.builder-icon-btn:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: var(--primary) !important;
  transform: translateX(-2px);
}

.btn-back svg {
  width: 18px;
  height: 18px;
}

/* --- Dấu * đỏ cho nhãn bắt buộc --- */
.required {
  color: var(--danger);
  margin-left: 4px;
  font-weight: 700;
}

/* --- Tiêu đề cha Section có Icon --- */
.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  border-bottom: 1.5px solid var(--border);
  padding-bottom: 10px;
  margin-bottom: 0px !important; /* Đã có gap của form-section xử lý */
}

.section-title svg {
  color: var(--primary);
  flex-shrink: 0;
}

/* --- Giãn cách gap cho Editor layout để tránh quá sát nhau --- */
.editor-layout .stack {
  gap: 24px !important;
}

.editor-layout .field {
  gap: 8px !important;
}

.form-section {
  padding: 24px !important;
  display: grid;
  gap: 24px;
}

/* --- Thiết kế lại Khung tải Ảnh đại diện (Thumbnail Upload Box) --- */
.thumbnail-upload-container {
  display: grid;
  gap: 12px;
}

.thumbnail-preview-box {
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.thumbnail-preview-box:hover {
  border-color: var(--primary);
  background: #f1f5f9;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #64748b;
  text-align: center;
  padding: 24px;
}

.upload-placeholder svg {
  color: #94a3b8;
  margin-bottom: 4px;
  transition: transform 0.2s ease;
}

.thumbnail-preview-box:hover .upload-placeholder svg {
  transform: translateY(-4px) scale(1.05);
  color: var(--primary);
}

.upload-placeholder span {
  font-size: 14px;
  font-weight: 600;
  color: #334155;
}

.upload-placeholder small {
  font-size: 12px;
  color: #94a3b8;
}

#thumbnail-preview-img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}

.thumbnail-url-field input {
  font-size: 13px !important;
  color: var(--text);
  border-color: #cbd5e1;
}

.thumbnail-url-field input::placeholder {
  color: #94a3b8;
}

/* --- Thiết kế lại danh mục dạng Button click (Checkbox list) --- */
.category-selector-list {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  max-height: 220px;
  overflow-y: auto;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.category-select-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600 !important;
  font-size: 13.5px;
  color: var(--text);
  transition: background 0.15s ease, color 0.15s ease;
  user-select: none;
}

.category-select-item:hover {
  background: var(--surface-soft);
}

.category-select-item input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 4px !important;
  background: #fff !important;
  cursor: pointer;
  accent-color: #2563eb !important; /* Màu xanh nước biển đậm */
  box-shadow: none !important;
}

/* --- Tùy biến Quill Editor cho cao cấp và đồng bộ --- */
.field-editor {
  display: flex;
  flex-direction: column;
}

#editor-container {
  min-height: 260px;
  font-family: var(--font);
  font-size: 14.5px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background: #fff;
  border-color: var(--border) !important;
}

.ql-toolbar.ql-snow {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background: var(--surface-soft);
  border-color: var(--border) !important;
  padding: 10px !important;
}

.ql-editor {
  min-height: 220px;
  line-height: 1.6;
}

.ql-editor img {
  cursor: pointer;
}

.ql-editor img.ql-image-selected {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

.ql-editor.ql-blank::before {
  font-style: normal !important;
  color: #94a3b8 !important;
  font-size: 14px;
}

/* --- Thiết kế lại nút Lọc --- */
.btn-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px !important;
  font-weight: 700;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
}

.btn-filter:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-filter svg {
  flex-shrink: 0;
}

/* --- Thiết kế lại khung Không có bài viết (Empty State) --- */
.empty-state {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 54px 24px !important;
  background: #fff !important;
  border: 2px dashed var(--border) !important;
  border-radius: var(--radius-md) !important;
  text-align: center !important;
  color: var(--muted) !important;
  box-shadow: none !important;
}

.empty-state .empty-icon {
  display: block !important;
  margin: 0 auto 4px auto !important;
  color: #94a3b8 !important;
  animation: float-empty 3s ease-in-out infinite;
}

.empty-state span {
  display: block !important;
  width: 100% !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  text-align: center !important;
}

@keyframes float-empty {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* --- Autocomplete Dropdown --- */
.autocomplete-item:hover {
  background-color: #f1f5f9;
}
.autocomplete-item div {
  transition: color 0.15s ease;
}
.autocomplete-item:hover div {
  color: var(--primary) !important;
}

/* --- Lightbox Thumbnail Hover --- */
.slot-item-thumb:hover {
  transform: scale(1.06);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15);
}
/* ==========================================================================
   ADMIN MOBILE RESPONSIVE & CARD VIEW TABLE - VAFHP ADMIN WEB
   ========================================================================== */

/* --- 1. Màn hình Tablet & Mobile lớn (max-width: 900px) --- */
@media (max-width: 900px) {
  /* Thêm lớp mờ nền (backdrop overlay) khi mở Sidebar trên Mobile */
  body.nav-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    z-index: 15;
  }

  /* Đảm bảo Sidebar nổi hẳn lên trên lớp nền mờ */
  #admin-sidebar {
    z-index: 20 !important;
    box-shadow: none;
  }

  body.nav-open #admin-sidebar {
    box-shadow: 4px 0 24px rgba(15, 23, 42, 0.35) !important;
  }
}

/* --- 2. Màn hình Mobile vừa & nhỏ (max-width: 768px) --- */
@media (max-width: 768px) {
  /* Tối ưu Header: Ẩn bớt text phụ để không vỡ topbar */
  .admin-header-right .user-info small {
    display: none !important;
  }

  .user-profile {
    padding-left: 0 !important;
    border-left: 0 !important;
  }

  .admin-header {
    gap: 10px;
  }

  .admin-header-left,
  .admin-header-right {
    gap: 10px;
  }

  /* Bộ lọc danh sách (Articles, Comments, Contact): Xếp chồng 1 cột */
  .filters,
  .comment-header-actions,
  .comment-header-actions .filter-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .filters .field,
  .comment-header-actions .field,
  .filters .btn-filter,
  .comment-header-actions .btn,
  .search-box,
  .status-box {
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  /* --- CHUYỂN BẢNG DỮ LIỆU THÀNH THẺ CARD (KHÔNG KÉO NGANG) --- */
  .table-wrap {
    width: 100% !important;
    overflow-x: visible !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .data-table {
    min-width: 0 !important;
    width: 100% !important;
    display: block !important;
  }

  .data-table thead {
    display: none !important;
  }

  .data-table tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
  }

  .data-table tr {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    background: #ffffff !important;
    border: 1px solid var(--border, #cbd5e1) !important;
    border-radius: 14px !important;
    padding: 16px !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05) !important;
    box-sizing: border-box !important;
  }

  .data-table td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
    text-align: left !important;
    font-size: 14px !important;
  }

  /* Làm nổi bật ô đầu tiên (Tên danh mục / Tiêu đề bài viết) */
  .data-table tr td:first-child {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--text, #0f172a) !important;
    padding-bottom: 4px !important;
    border-bottom: 1px dashed #f1f5f9 !important;
  }

  /* Các ô thông tin phụ (Thời gian, trạng thái, lượt xem...) */
  .data-table tr td:not(:first-child):not(.actions) {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    color: #475569 !important;
    font-size: 13px !important;
  }

  /* Nút thao tác (Sửa, Xóa) xếp dàn đều dưới đáy thẻ */
  .data-table td.actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin-top: 8px !important;
    padding-top: 12px !important;
    border-top: 1px solid #e2e8f0 !important;
  }

  .data-table td.actions .btn,
  .data-table td.actions a.btn {
    flex: 1 !important;
    margin: 0 !important;
    min-height: 38px !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .quick-actions {
    display: flex !important;
    width: 100% !important;
    gap: 6px !important;
  }

  .quick-actions .btn {
    flex: 1 !important;
  }

  /* Tối ưu Modals / Dialogs trên màn hình nhỏ */
  .modal,
  .item-dialog,
  .preview-dialog,
  .confirm-dialog,
  dialog {
    width: calc(100vw - 24px) !important;
    max-height: 88vh !important;
    margin: auto !important;
  }

  .dialog-actions,
  .modal-foot,
  .confirm-dialog-footer {
    flex-direction: column-reverse !important;
    gap: 8px !important;
  }

  .dialog-actions .btn,
  .modal-foot .btn,
  .confirm-dialog-footer .btn {
    width: 100% !important;
  }
}

/* --- 3. Màn hình Mobile siêu nhỏ (max-width: 480px) --- */
@media (max-width: 480px) {
  /* Đăng xuất / User profile compact */
  .admin-header {
    padding-inline: 8px;
  }

  .admin-breadcrumb > :first-child,
  .admin-breadcrumb > svg,
  .admin-header-right .user-info,
  .admin-logout-btn span {
    display: none;
  }

  .menu-toggle,
  .admin-logout-btn,
  .user-profile {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }

  .user-profile .avatar {
    width: 32px;
    height: 32px;
    font-size: 11px;
  }

  /* Page title buttons xếp chồng toàn bộ */
  .page-title .actions {
    flex-direction: column;
    width: 100%;
  }

  .page-title .actions .btn,
  .page-title .actions a {
    width: 100%;
    justify-content: center;
  }
}
/* Auth/profile and user CRUD */
.user-profile{text-decoration:none;color:inherit}.user-dialog{width:min(760px,calc(100% - 32px));border:0;border-radius:14px;padding:0;box-shadow:0 20px 60px rgba(15,23,42,.28)}.user-dialog::backdrop{background:rgba(15,23,42,.55)}.user-form,.account-form{display:grid;gap:16px}.user-form{padding:24px}.user-form label,.account-form label{display:grid;gap:7px;font-weight:600}.user-form input,.user-form select,.account-form input,.account-form select,.filter-bar input,.filter-bar select{min-height:42px;border:1px solid #cbd5e1;border-radius:8px;padding:9px 11px;font:inherit;font-weight:400!important;background:#fff}.user-form fieldset,.account-form fieldset{display:grid;gap:14px;border:1px solid #dbe3ee;border-radius:10px;padding:16px}.dialog-heading,.dialog-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}.dialog-heading button{border:0;background:transparent;font-size:28px;cursor:pointer}.dialog-actions{justify-content:flex-end}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.checkbox-label{display:flex!important;align-items:center;align-self:end;min-height:42px}.checkbox-label input{min-height:auto;width:auto}.filter-bar{display:flex;gap:12px;flex-wrap:wrap;padding:16px;margin-bottom:18px}.account-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:22px}.account-card{padding:24px;border-radius:12px}.account-card:first-child,.danger-card{grid-column:1/-1}.danger-card{border:1px solid #fecaca}.field-status,[data-address-status],#user-form-status{color:#b42318}.badge.success{background:#dcfce7;color:#166534}.badge.danger{background:#fee2e2;color:#991b1b}@media(max-width:760px){.form-grid,.account-grid{grid-template-columns:1fr}.account-card{grid-column:1}.filter-bar>*{width:100%}}
.admin-logout-btn { display: inline-flex; align-items: center; gap: 6px; color: #dc2626; border-color: #fca5a5; }
.admin-logout-btn:hover { color: #b91c1c; border-color: #dc2626; background-color: #fef2f2; }
.role-badge--admin { background: #e0e7ff; color: #3730a3; }
.role-badge--user { background: #f1f5f9; color: #475569; }
.users-table .data-table th { padding: 12px 16px; text-transform: none; }

/* Users & Profile Page Layout Styles */
.users-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 20px; margin-bottom: 20px; background: #ffffff; border: 1px solid var(--border); border-radius: 12px; }
.users-filter-bar input, .users-filter-bar select { height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; background: #ffffff; color: var(--text); }
.users-filter-bar input { flex: 1 1 220px; }
.users-filter-bar select { flex: 0 0 160px; }
.users-filter-submit { display: inline-flex; align-items: center; gap: 6px; height: 40px; }
.users-panel { padding: 20px; background: #ffffff; border: 1px solid var(--border); border-radius: 12px; }
.users-panel-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.users-count { font-size: 14px; font-weight: 600; color: #475569; }
.user-identity { display: flex; align-items: center; gap: 12px; }
.user-identity small { display: block; color: var(--muted); font-size: 12px; }
.user-row-avatar { width: 36px; height: 36px; border-radius: 50%; background: #e0e7ff; color: #3730a3; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.role-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.role-badge svg { width: 14px; height: 14px; }

.profile-layout { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; margin-top: 20px; }
@media (max-width: 992px) { .profile-layout { grid-template-columns: 1fr; } }
.profile-summary-card { padding: 24px; background: #ffffff; border: 1px solid var(--border); border-radius: 12px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.profile-summary-avatar { position: relative; width: 88px; height: 88px; border-radius: 50%; background: #eef2ff; color: #4f46e5; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; box-shadow: 0 4px 12px rgba(79, 70, 229, 0.18); overflow: hidden; }
.profile-summary-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; background: #fff; }
.profile-summary-avatar > [hidden] { display: none; }
.profile-avatar-upload { cursor: pointer; border: 2px solid #ffffff; outline: 1px solid #c7d2fe; transition: box-shadow 180ms ease, outline-color 180ms ease; }
.profile-avatar-upload:hover, .profile-avatar-upload:focus-visible { outline-color: #4f46e5; box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.16); }
.profile-avatar-fallback { display: grid; place-items: center; width: 100%; height: 100%; }
.profile-avatar-fallback svg { width: 46px; height: 46px; }
.profile-avatar-camera { position: absolute; inset: 0; display: grid; place-items: center; color: #ffffff; background: rgba(15, 23, 42, 0.58); border-radius: 50%; opacity: 0; transform: scale(.96); transition: opacity 180ms ease, transform 180ms ease; pointer-events: none; }
.profile-avatar-camera svg { width: 28px; height: 28px; }
.profile-avatar-upload:hover .profile-avatar-camera, .profile-avatar-upload:focus-visible .profile-avatar-camera, .profile-avatar-upload.is-upload-active .profile-avatar-camera { opacity: 1; transform: scale(1); }
.profile-avatar-controls { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-top: 4px; }
.profile-avatar-controls p { flex-basis: 100%; margin: 2px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.profile-summary-copy h2 { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.profile-summary-copy p { font-size: 13px; color: var(--muted); margin: 0; }
.profile-summary-badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.profile-active-state { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; background: #dcfce7; color: #15803d; font-size: 12px; font-weight: 600; }
.profile-badge-icon { width: 14px; height: 14px; flex: 0 0 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.profile-summary-note { padding: 12px; background: #f8fafc; border-radius: 8px; font-size: 12px; color: #64748b; text-align: left; width: 100%; border: 1px solid #e2e8f0; }
.profile-summary-note strong { display: block; color: var(--text); margin-bottom: 2px; }
.profile-settings-stack { display: flex; flex-direction: column; gap: 24px; }
.profile-settings-card { padding: 24px; background: #ffffff; border: 1px solid var(--border); border-radius: 12px; }
.settings-card-heading { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #f1f5f9; }
.settings-card-heading h2 { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.settings-card-heading p { font-size: 13px; color: var(--muted); margin: 0; }
.settings-card-icon { width: 44px; height: 44px; border-radius: 10px; background: #e0e7ff; color: #4338ca; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.settings-card-icon svg { width: 22px; height: 22px; }
.settings-card-icon.danger { background: #fee2e2; color: #dc2626; }
.profile-security-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (max-width: 768px) { .profile-security-grid { grid-template-columns: 1fr; } }
.account-form { display: flex; flex-direction: column; gap: 16px; }
.account-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text); }
.account-form input, .account-form select { min-height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 15px; font-weight: 400; }
.account-form input[readonly] { color: #64748b; background: #f1f5f9; border-style: dashed; cursor: default; }
.field-label { display: inline-flex; align-items: center; gap: 7px; }
.field-label > svg { width: 17px; height: 17px; flex: 0 0 17px; fill: none; stroke: #64748b; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.account-form .ts-wrapper { width: 100%; }
.account-form .ts-control { min-height: 44px; align-items: center; border-color: var(--border); border-radius: 8px; font-size: 15px; }
.account-form .ts-wrapper.disabled { opacity: .62; }
.account-form fieldset { border: 1px solid var(--border); border-radius: 8px; padding: 16px; margin: 0; }
.account-form legend { font-weight: 600; font-size: 13px; padding: 0 6px; color: var(--text); }
.fieldset-help { font-size: 12px; color: var(--muted); margin-top: 0; margin-bottom: 12px; }
.profile-form-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.required-star { color: #ef4444; margin-left: 2px; font-weight: bold; }
.field-help, .field-error { font-size: 12px; font-weight: 400; line-height: 1.45; }
.field-help { color: var(--muted); }
.field-error { color: #b42318; }
.account-form input[aria-invalid="true"] { border-color: #dc2626; }

/* Global Focus State Override */
input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18) !important;
}

@media (max-width: 768px) {
  .profile-settings-card { padding: 18px; }
  .account-form input, .account-form select, .account-form .ts-control { font-size: 16px; }
  .profile-form-actions .btn, .account-form > .btn { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .profile-avatar-upload, .profile-avatar-camera { transition: none; }
}

#editor-container[contenteditable="true"] {
  min-height: 280px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 0 0 8px 8px;
  background: #fff;
  outline: none;
  white-space: pre-wrap;
}

#editor-container[contenteditable="true"]:empty::before {
  content: attr(data-placeholder);
  color: #94a3b8;
  pointer-events: none;
}

.field-error {
  margin: 0;
  color: #dc2626;
  font-size: 13px;
}

:focus-visible {
  outline: 2px solid #3b82f6 !important;
  outline-offset: 2px !important;
}

.user-form { padding: 20px !important; gap: 10px !important; }
#user-dialog .dialog-heading { justify-content: space-between; margin: -20px -20px 4px; padding: 18px 20px; border-bottom: 1px solid var(--border, #e2e8f0); text-align: center; }
#user-dialog .dialog-heading h2 { margin: 0; font-size: 20px; line-height: 1.4; }
#user-dialog #password-field[hidden] { display: none !important; }
#user-dialog fieldset { gap: 10px; padding: 14px 16px; }
#user-dialog .fieldset-help { margin: 0; }
#user-dialog .ts-wrapper { width: 100%; }
#user-dialog .ts-control { min-height: 44px; align-items: center; border-color: #cbd5e1; border-radius: 8px; font: inherit; }
#user-dialog .ts-wrapper.disabled { opacity: .62; }
#user-dialog .ts-dropdown { z-index: 1100; }
#user-form-status { margin: 0 !important; }
#user-form-status:empty { display: none !important; }
.user-dialog .dialog-actions { width: 100%; justify-content: center; gap: 16px; margin-top: 4px !important; padding: 4px 0 0 !important; }
.user-dialog .dialog-actions .btn { flex: 1 1 0; min-width: 0; max-width: none; min-height: 44px; justify-content: center; }
@media (max-width: 760px) {
  .user-dialog .dialog-actions .btn { width: 100%; max-width: none; }
}

/* Tùy chỉnh Grid.js: Ẩn cuộn ngang và giữ nhãn Hoạt động không xuống dòng */
.gridjs-wrapper {
  border-radius: 8px;
}

.gridjs-td .badge {
  white-space: nowrap !important;
  display: inline-block !important;
}

.gridjs-td .actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

.category-tree-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding-inline-start: calc(var(--category-depth, 0) * 18px);
  color: #334155;
}

.category-filter {
  max-width: 240px;
  margin-bottom: 16px;
}

.category-tree-name strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-tree-connector {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border-inline-start: 1.5px solid #94a3b8;
  border-bottom: 1.5px solid #94a3b8;
}

.gridjs-wrapper {
  overflow-x: hidden !important;
  width: 100% !important;
  border-radius: 8px;
}

.gridjs-table {
  width: 100% !important;
  table-layout: fixed !important;
}

#category-tree-grid .gridjs-wrapper {
  overflow-x: auto !important;
}

#category-tree-grid .gridjs-table {
  min-width: 980px;
}

.gridjs-td, .gridjs-th {
  padding: 12px 10px !important;
  font-size: 13.5px !important;
  border-right: 1px solid var(--border) !important;
}

.gridjs-td:last-child, .gridjs-th:last-child {
  border-right: none !important;
}

.gridjs-td .badge {
  white-space: nowrap !important;
  display: inline-block !important;
  word-break: normal !important;
}

.gridjs-td .actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

@media (max-width: 640px) {
  .category-tree-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  #category-tree-search {
    width: 100%;
  }

  .category-tree-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .category-tree-page-buttons {
    justify-content: flex-start;
  }
}

/* Custom Tom Select đồng nhất giao diện với các ô Input trong Modal Form */
.ts-wrapper select,
select.tomselect,
select.ts-hidden-accessible,
select[tabindex="-1"] {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

.ts-wrapper {
  width: 100% !important;
}

.ts-wrapper.single .ts-control {
  min-height: 42px !important;
  height: 42px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 0 12px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
}

.ts-wrapper.single .ts-control input {
  font-family: inherit !important;
  font-size: 14px !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

#category-form .ts-wrapper.single .ts-control {
  flex-wrap: nowrap !important;
  line-height: 24px !important;
}

#category-form .ts-wrapper.single .ts-control .item {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 24px;
}

#category-form .ts-wrapper.single .ts-control input {
  flex: 1 1 32px !important;
  width: auto !important;
  min-width: 32px !important;
  height: 24px !important;
  line-height: 24px !important;
}

.ts-wrapper.single.focus .ts-control,
.ts-wrapper.single.input-active .ts-control,
.ts-wrapper.focus .ts-control,
.ts-control:focus {
  border-color: #cbd5e1 !important;
  box-shadow: none !important;
  outline: none !important;
}

.ts-dropdown {
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
  margin-top: 4px !important;
  padding: 4px !important;
  z-index: 99999 !important;
  background: #ffffff !important;
}

.ts-dropdown .option {
  padding: 8px 12px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  cursor: pointer !important;
}

.ts-dropdown .option.active, .ts-dropdown .option:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

/* Căn giữa tiêu đề và 2 nút Hủy / Lưu cân đối trong Modal Danh mục */
#category-dialog .modal-head {
  justify-content: center !important;
  text-align: center !important;
  padding: 20px 24px !important;
}

#category-dialog .modal-head h2 {
  text-align: center !important;
  width: 100% !important;
  font-size: 20px !important;
  line-height: 1.4 !important;
}

#category-dialog .modal-foot {
  justify-content: center !important;
  gap: 16px !important;
  padding: 16px 22px 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#category-dialog .modal-foot .btn {
  flex: 1 1 0 !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
  justify-content: center !important;
  text-align: center !important;
  border-radius: 8px !important;
  font-size: 15px !important;
}

/* Tùy chỉnh nút 'x' xóa tìm kiếm màu đỏ trong Grid.js */
.gridjs-search-input::-webkit-search-cancel-button,
#category-table input[type="search"]::-webkit-search-cancel-button,
#category-search-input::-webkit-search-cancel-button,
#article-search-input::-webkit-search-cancel-button,
#user-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  height: 14px;
  width: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>") center no-repeat;
  cursor: pointer;
}

/* Ẩn hoàn toàn khung chân footer của Grid.js khi không có kết quả tìm kiếm (Không có danh mục nào) */
.gridjs-container:has(td.gridjs-message) .gridjs-footer,
.gridjs-container:has(.gridjs-no-records) .gridjs-footer,
.gridjs-container:has(.gridjs-not-found) .gridjs-footer {
  display: none !important;
}

#category-table .category-grid-empty .gridjs-footer {
  display: none !important;
}

#category-table .gridjs-container:has(td.gridjs-message) .gridjs-footer {
  display: none !important;
}

#category-table .category-grid-empty .gridjs-message {
  min-height: 260px;
  padding: 32px 20px !important;
  color: var(--text-muted, #64748b);
}

#category-table .category-empty-state,
#users-table .category-empty-state {
  display: flex;
  min-height: 196px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

#category-table .category-empty-state-panel,
#users-table .category-empty-state-panel {
  min-height: 260px;
  margin-top: 0;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  background: #fff;
}

#category-table .category-empty-icon,
#users-table .category-empty-icon {
  color: #94a3b8;
  margin-bottom: 4px;
}

#category-table .category-empty-state strong,
#users-table .category-empty-state strong {
  color: #475569;
  font-size: 15px;
  font-weight: 700;
}

#category-table .category-empty-state span,
#users-table .category-empty-state span {
  color: #94a3b8;
  font-size: 13px;
}

#article-table .article-empty-state {
  display: flex;
  min-height: 260px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 0;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  background: #fff;
  text-align: center;
  box-sizing: border-box;
}

#article-table .article-empty-icon {
  display: block;
  flex: 0 0 auto;
  margin: 0 0 4px;
  color: #94a3b8;
}

#article-table .article-empty-state strong {
  color: #475569;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

#article-table .article-empty-state span {
  display: block;
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.5;
}

.category-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}

.category-search-field {
  display: block;
  flex: 0 0 320px;
  margin: 0;
}

.category-search-field input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--border, #cbd5e1);
  border-radius: 8px;
  padding: 8px 12px;
  font: inherit;
  background: #fff;
}

/* Căn chỉnh header Grid.js chứa ô tìm kiếm và bộ lọc Trạng thái nằm sát cạnh nhau */
#category-table .gridjs-head {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 4px !important;
  padding-bottom: 12px !important;
}

#category-table .gridjs-search {
  float: none !important;
  margin: 0 !important;
  flex: 0 0 320px !important;
}

.category-status-filter-container {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  width: 180px !important;
  flex: 0 0 180px !important;
  white-space: nowrap !important;
}

.category-status-filter-container .ts-wrapper {
  width: 100% !important;
}

/* Toolbar trang người dùng: ô tìm kiếm, hai bộ lọc Tom Select và bộ đếm kết quả */
.users-toolbar {
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.users-toolbar .users-count {
  margin-left: auto;
  white-space: nowrap;
}

.users-toolbar .users-count.error {
  color: #b42318;
}

/* Canh menu thao tác theo mép trái của nút ba chấm. */
#users-table .action-dropdown-menu {
  left: 0 !important;
  right: auto !important;
}

/* Đảm bảo dropdown menu 3 chấm không bị cắt bởi overflow của Grid.js. */
#category-table .gridjs-wrapper,
#category-table .gridjs-table,
#category-table td.gridjs-td,
#users-table .gridjs-wrapper,
#users-table .gridjs-table,
#users-table td.gridjs-td {
  overflow: visible !important;
}

/* Menu dòng cuối cần vượt qua footer phân trang nhưng chỉ trong bảng Users. */
#users-table .gridjs-container {
  overflow: visible;
}

#users-table .gridjs-wrapper {
  position: relative;
  z-index: 6;
}

/* CSS Action Dropdown nút 3 chấm hình tròn ở cột Thao tác */
.action-dropdown {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.action-dropdown-toggle {
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #475569 !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

.action-dropdown-toggle:hover,
.action-dropdown-toggle:focus,
.action-dropdown-toggle.active {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
  outline: none !important;
  box-shadow: none !important;
}

.action-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  right: auto !important;
  min-width: 145px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding: 4px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.action-dropdown-menu.hidden {
  display: none !important;
}

.action-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: #334155;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.action-dropdown-item:hover {
  background-color: #f8fafc;
  color: #0f172a;
}

.action-dropdown-item.text-danger {
  color: #ef4444;
}

.action-dropdown-item.text-danger:hover {
  background-color: #fef2f2;
  color: #dc2626;
}

.action-dropdown-item.text-primary {
  color: #3b82f6;
}

.action-dropdown-item.text-primary:hover {
  background-color: #eff6ff;
  color: #2563eb;
}

/* --- Tùy chỉnh Thư viện Grid.js --- */
.gridjs-container {
  font-family: inherit;
  color: var(--text, #1e293b);
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid var(--border, #e2e8f0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.gridjs-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.gridjs-search {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  float: none !important;
  width: auto !important;
}

.category-status-filter-container {
  min-width: 170px;
  display: inline-block;
}

#category-table .gridjs-head {
  gap: 4px !important;
  flex-wrap: nowrap !important;
}

#category-table .gridjs-search {
  flex: 0 0 320px !important;
  margin-right: 0 !important;
}

#category-table .category-status-filter-container {
  min-width: 0 !important;
  width: 180px !important;
  flex: 0 0 180px !important;
  margin-left: 0 !important;
}

.gridjs-search-input {
  border-radius: 8px;
  border: 1px solid var(--border, #cbd5e1);
  padding: 8px 12px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.gridjs-search-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.gridjs-table {
  width: 100%;
  border-collapse: collapse;
}

.gridjs-th {
  background: #f8fafc;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border, #e2e8f0);
}

.gridjs-td {
  padding: 12px 16px;
  font-size: 14px;
  border-bottom: 1px solid var(--border, #f1f5f9);
  vertical-align: middle;
}

.gridjs-tr:last-child .gridjs-td {
  border-bottom: none;
}

.gridjs-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border, #e2e8f0);
  background: #f8fafc;
}

.gridjs-pagination .gridjs-pages button {
  border-radius: 6px;
  border: 1px solid var(--border, #cbd5e1);
  background: #ffffff;
  color: #475569;
  font-weight: 500;
  padding: 5px 10px;
  margin: 0 2px;
  transition: all 0.2s ease;
}

.gridjs-pagination .gridjs-pages button:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* --- Action 3-Dots Dropdown Menu --- */
.action-dropdown-wrap {
  position: relative;
  display: inline-block;
}

.action-circle-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border, #cbd5e1);
  background: #ffffff;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  outline: none;
}

.action-circle-btn:hover,
.action-circle-btn.active {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.action-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 160px;
  background: #ffffff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  z-index: 1000;
  display: none;
  padding: 6px 0;
}

.action-dropdown-menu.show {
  display: block;
  animation: fadeInDown 0.15s ease-out;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.action-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: #334155;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.action-dropdown-item:hover {
  background: #f8fafc;
  color: #0f172a;
}

.action-dropdown-item.danger {
  color: #dc2626;
}

.action-dropdown-item.danger:hover {
  background: #fef2f2;
  color: #b91c1c;
}

.action-dropdown-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.gridjs-pagination .gridjs-pages button.gridjs-currentPage {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}
/* Membership review */
.membership-admin-toolbar { margin-bottom: 18px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); display: grid; grid-template-columns: minmax(240px, 1fr) minmax(180px, .35fr) auto; gap: 12px; align-items: center; }
.membership-admin-toolbar input, .membership-admin-toolbar select { width: 100%; min-height: 44px; border: 1px solid var(--border); border-radius: 9px; padding: 9px 12px; background: #fff; color: var(--text); font: inherit; }
.membership-admin-toolbar p { margin: 0; color: var(--text-muted); font-size: .85rem; white-space: nowrap; }
.membership-request-list { display: grid; gap: 16px; }
.membership-request-card { padding: 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm); }
.membership-request-card > header { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
.membership-request-card h2 { margin: 3px 0 5px; font-size: 1.1rem; }
.membership-request-card header p { margin: 0; color: var(--text-muted); font-size: .84rem; }
.membership-request-card__eyebrow { color: var(--primary) !important; font-size: .7rem !important; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.membership-status { padding: 6px 10px; border-radius: 999px; font-size: .74rem; font-weight: 750; white-space: nowrap; }
.membership-status--pending { background: #fff7ed; color: #9a3412; }
.membership-status--approved { background: #ecfdf5; color: #166534; }
.membership-status--rejected { background: #fef2f2; color: #991b1b; }
.membership-request-meta { margin: 18px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.membership-request-meta div { min-width: 0; }
.membership-request-meta dt { margin-bottom: 4px; color: var(--text-muted); font-size: .75rem; font-weight: 700; }
.membership-request-meta dd { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.membership-document-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.membership-document-link { min-height: 58px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; color: var(--primary); display: grid; align-content: center; gap: 3px; text-decoration: none; }
.membership-document-link:hover { border-color: var(--primary); background: var(--surface-muted); }
.membership-document-link small { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.membership-request-card > footer { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }
.membership-review-dialog { width: min(520px, calc(100% - 24px)); padding: 0; border: 0; border-radius: 14px; box-shadow: var(--shadow-overlay); }
.membership-review-dialog::backdrop { background: rgba(15,23,42,.55); }
.membership-review-dialog form { padding: 22px; display: grid; gap: 16px; }
.membership-review-dialog h2 { margin: 0; }
.membership-review-dialog label { display: grid; gap: 7px; font-weight: 650; }
.membership-review-dialog input, .membership-review-dialog textarea { width: 100%; min-height: 44px; border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; font: inherit; }
.membership-review-dialog textarea { min-height: 104px; resize: vertical; }
.membership-review-dialog small { color: var(--text-muted); font-weight: 400; }
.membership-review-dialog .dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }
.role-badge--member { background: #ecfdf5; color: #166534; }

@media (max-width: 760px) {
  .membership-admin-toolbar, .membership-request-meta, .membership-document-grid { grid-template-columns: 1fr; }
  .membership-request-card > header { display: grid; }
  .membership-status { width: fit-content; }
  .membership-request-card > footer .btn { flex: 1; }
}

.category-sort-button {
  min-height: 44px;
}

.category-page-button {
  min-width: 44px;
  min-height: 44px;
}
/* --- UX polish: scan-friendly admin surfaces --- */
.admin-main { padding-bottom: 40px; }
.admin-header { box-shadow: 0 1px 0 rgba(15, 23, 42, .04); }
.surface, .form-section, .table-wrap, .category-toolbar, .filter-bar { border-color: #dbe4ef; }
.surface:hover { box-shadow: 0 10px 28px rgba(15, 23, 42, .08); }
.page-title { align-items: flex-start; }
.page-title .actions { align-items: center; justify-content: flex-end; }
.filters, .filter-bar, .category-toolbar { position: sticky; top: 76px; z-index: 8; background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); border: 1px solid #dbe4ef; border-radius: 12px; box-shadow: 0 8px 24px rgba(15, 23, 42, .06); }
.filters label, .filter-bar label, .user-form label, .account-form label, .form-section label { color: #334155; font-size: 13px; }
.filters input, .filters select, .filter-bar input, .filter-bar select, .form-section input, .form-section select, .form-section textarea, .user-form input, .user-form select, .account-form input, .account-form select { min-height: 42px; border-color: #cbd5e1; border-radius: 8px; }
.filters input:focus, .filters select:focus, .filter-bar input:focus, .filter-bar select:focus, .form-section input:focus, .form-section select:focus, .form-section textarea:focus, .user-form input:focus, .user-form select:focus, .account-form input:focus, .account-form select:focus { border-color: var(--primary); outline: 0; box-shadow: 0 0 0 3px rgb(26 43 109 / 14%); }
.table-wrap, .gridjs-wrapper { border: 1px solid #dbe4ef; border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, .05); }
.data-table th, .gridjs-th { position: sticky; top: 64px; z-index: 4; background: #f8fafc !important; color: #475569; font-size: 12px; letter-spacing: .02em; }
.data-table tr, .gridjs-tr { transition: background-color .16s ease, box-shadow .16s ease; }
.data-table tr:hover td, .gridjs-tr:hover .gridjs-td { background: #f8fbff !important; }
.data-table tr:focus-within td, .gridjs-tr:focus-within .gridjs-td { background: #f1f7ff !important; box-shadow: inset 3px 0 0 var(--primary); }
.actions .btn, .document-actions .btn, .document-actions a.btn, .quick-actions .btn { min-height: 38px; }
.btn:focus-visible, .icon-btn:focus-visible, .sidebar-toggle-btn:focus-visible, .admin-nav a:focus-visible, .action-dropdown-toggle:focus-visible { outline: 3px solid rgb(37 99 235 / 25%); outline-offset: 2px; }
.badge, .role-badge, .status-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; }
@media (max-width: 900px) {
  .filters, .filter-bar, .category-toolbar { position: static; box-shadow: var(--shadow-sm); }
  .page-title { display: grid; grid-template-columns: 1fr; }
  .page-title .actions { justify-content: stretch; }
  .page-title .actions .btn, .page-title .actions a { flex: 1 1 160px; justify-content: center; }
}
/* Categories admin: align toolbar and table with other management pages */
body[data-page="categories"] .category-toolbar {
  position: static !important;
  top: auto !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid #dbe4ef;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
  backdrop-filter: none;
}
body[data-page="categories"] .category-search-field {
  flex: 1 1 340px;
  max-width: 520px;
}
body[data-page="categories"] .category-search-field input,
body[data-page="categories"] .category-status-filter-container .ts-control {
  min-height: 44px !important;
  border-color: #cbd5e1 !important;
  border-radius: 10px !important;
  background: #fff !important;
}
body[data-page="categories"] .category-search-field input:focus,
body[data-page="categories"] .category-status-filter-container .ts-wrapper.focus .ts-control {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgb(26 43 109 / 14%) !important;
}
body[data-page="categories"] .category-status-filter-container {
  width: 220px !important;
  flex: 0 1 220px !important;
}
body[data-page="categories"] #category-table .gridjs-container {
  border: 1px solid #dbe4ef;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
  overflow: hidden;
}
body[data-page="categories"] #category-table .gridjs-head,
body[data-page="categories"] #category-table .gridjs-search {
  display: none !important;
}
body[data-page="categories"] #category-table .gridjs-wrapper {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow-x: auto !important;
}
body[data-page="categories"] #category-table .gridjs-table {
  min-width: 920px;
  table-layout: auto !important;
}
body[data-page="categories"] #category-table .gridjs-th {
  position: sticky;
  top: 64px;
  z-index: 3;
  padding: 14px 16px !important;
  border-right: 0 !important;
  background: #f8fafc !important;
  color: #475569;
  font-size: 12px !important;
  font-weight: 800;
  text-transform: none;
  letter-spacing: .01em;
}
body[data-page="categories"] #category-table .gridjs-td {
  padding: 14px 16px !important;
  border-right: 0 !important;
  border-bottom: 1px solid #eef2f7 !important;
  color: #334155;
  font-size: 14px !important;
}
body[data-page="categories"] #category-table .gridjs-tr:hover .gridjs-td,
body[data-page="categories"] #category-table .gridjs-tr:focus-within .gridjs-td {
  background: #f8fbff !important;
}
body[data-page="categories"] .category-tree-name {
  min-height: 36px;
  color: #0f172a;
}
body[data-page="categories"] .category-tree-name strong {
  font-weight: 750;
}
body[data-page="categories"] .category-tree-connector {
  border-color: #94a3b8;
  opacity: .85;
}
body[data-page="categories"] #category-table .actions {
  justify-content: flex-start;
  gap: 8px !important;
}
body[data-page="categories"] #category-table .actions .btn,
body[data-page="categories"] #category-table .actions a.btn {
  min-height: 36px;
  border-radius: 999px;
  white-space: nowrap;
}
body[data-page="categories"] #category-table .gridjs-footer {
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}
@media (max-width: 760px) {
  body[data-page="categories"] .category-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    padding: 14px;
  }
  body[data-page="categories"] .category-search-field,
  body[data-page="categories"] .category-status-filter-container {
    width: 100% !important;
    max-width: none;
    flex-basis: auto !important;
  }
}


/* Management pages: categories, articles, documents, comments */
body[data-page="categories"],
body[data-page="articles"],
body[data-page="documents"],
body[data-page="comments"] {
  --mgmt-border: #d8e0ec;
  --mgmt-border-soft: #edf2f7;
  --mgmt-ink: #172033;
  --mgmt-muted: #64748b;
  --mgmt-panel: #ffffff;
  --mgmt-soft: #f7f9fc;
}

body[data-page="categories"] .admin-main,
body[data-page="articles"] .admin-main,
body[data-page="documents"] .admin-main,
body[data-page="comments"] .admin-main {
  width: min(1360px, 100%);
  padding: 28px clamp(16px, 2.4vw, 32px) 44px;
}

body[data-page="categories"] .page-title,
body[data-page="articles"] .page-title,
body[data-page="documents"] .page-title,
body[data-page="comments"] .page-title {
  align-items: flex-start;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--mgmt-border-soft);
}

body[data-page="categories"] .page-title h1,
body[data-page="articles"] .page-title h1,
body[data-page="documents"] .page-title h1,
body[data-page="comments"] .page-title h1 {
  margin: 0;
  color: var(--mgmt-ink);
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.2;
}

body[data-page="categories"] .page-title p,
body[data-page="articles"] .page-title p,
body[data-page="documents"] .page-title p,
body[data-page="comments"] .page-title p {
  max-width: 720px;
  margin: 8px 0 0;
  color: var(--mgmt-muted);
  line-height: 1.6;
}

body[data-page="categories"] .page-title > .btn,
body[data-page="articles"] .page-title > .btn,
body[data-page="documents"] .page-title .actions .btn {
  min-height: 42px;
  border-radius: 10px;
  padding-inline: 16px;
  box-shadow: 0 8px 18px rgba(26, 43, 109, .14);
}

body[data-page="categories"] .category-toolbar,
body[data-page="articles"] .article-toolbar,
body[data-page="comments"] .management-toolbar {
  position: static !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid var(--mgmt-border);
  border-radius: 8px;
  background: var(--mgmt-panel);
  box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
  backdrop-filter: none;
}

body[data-page="categories"] .category-search-field,
body[data-page="articles"] .category-search-field,
body[data-page="comments"] .search-box {
  position: relative;
  flex: 1 1 360px;
  max-width: none;
  margin: 0;
}

body[data-page="comments"] .filter-group {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

body[data-page="comments"] .search-box svg {
  position: absolute;
  left: 13px;
  top: 50%;
  color: var(--mgmt-muted);
  pointer-events: none;
  transform: translateY(-50%);
}

body[data-page="comments"] .search-box input {
  padding-left: 40px;
}

body[data-page="categories"] .category-status-filter-container,
body[data-page="articles"] .category-status-filter-container,
body[data-page="comments"] .status-box {
  flex: 0 1 230px !important;
  width: 230px !important;
  min-width: 210px;
  margin: 0;
}

body[data-page="categories"] .category-search-field input,
body[data-page="articles"] .category-search-field input,
body[data-page="comments"] .form-control,
body[data-page="categories"] .category-status-filter-container .ts-control,
body[data-page="articles"] .category-status-filter-container .ts-control,
body[data-page="categories"] .category-status-filter-container select,
body[data-page="articles"] .category-status-filter-container select {
  width: 100%;
  min-height: 42px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--mgmt-ink);
  font: inherit;
  box-shadow: none !important;
}

body[data-page="comments"] .management-toolbar .btn {
  min-height: 42px;
  border-radius: 8px;
}

body[data-page="categories"] #category-table .gridjs-container,
body[data-page="articles"] #article-table .gridjs-container,
body[data-page="documents"] #documents-table,
body[data-page="comments"] .management-panel {
  border: 1px solid var(--mgmt-border) !important;
  border-radius: 8px !important;
  background: var(--mgmt-panel);
  box-shadow: 0 10px 26px rgba(15, 23, 42, .06) !important;
  overflow: hidden;
}

body[data-page="documents"] #documents-table {
  padding: 0 !important;
}

body[data-page="comments"] .table-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--mgmt-border-soft);
  background: var(--mgmt-soft);
}

body[data-page="comments"] .table-card-title {
  margin: 0;
  color: var(--mgmt-ink);
  font-size: 14px;
  font-weight: 750;
}

body[data-page="categories"] #category-table .gridjs-wrapper,
body[data-page="articles"] #article-table .gridjs-wrapper,
body[data-page="documents"] .documents-table-wrap,
body[data-page="comments"] .table-wrap {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow-x: auto !important;
}

body[data-page="categories"] #category-table .gridjs-table,
body[data-page="articles"] #article-table .gridjs-table,
body[data-page="documents"] .documents-admin-table,
body[data-page="comments"] .data-table {
  min-width: 980px;
  table-layout: fixed;
}

body[data-page="comments"] .data-table {
  min-width: 1080px;
}

body[data-page="documents"] .documents-admin-table {
  min-width: 1120px;
}

body[data-page="categories"] #category-table .gridjs-th,
body[data-page="articles"] #article-table .gridjs-th,
body[data-page="documents"] .data-table th,
body[data-page="comments"] .data-table th {
  position: static;
  padding: 13px 16px !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--mgmt-border-soft) !important;
  background: var(--mgmt-soft) !important;
  color: #526174;
  font-size: 12px !important;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: none;
  white-space: nowrap;
}

body[data-page="categories"] #category-table .gridjs-td,
body[data-page="articles"] #article-table .gridjs-td,
body[data-page="documents"] .data-table td,
body[data-page="comments"] .data-table td {
  padding: 15px 16px !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--mgmt-border-soft) !important;
  color: #334155;
  font-size: 14px !important;
  line-height: 1.5;
  vertical-align: top;
}

body[data-page="categories"] #category-table .gridjs-tr:hover .gridjs-td,
body[data-page="articles"] #article-table .gridjs-tr:hover .gridjs-td,
body[data-page="documents"] .data-table tr:hover td,
body[data-page="comments"] .data-table tr:hover td {
  background: #f8fbff !important;
}

body[data-page="categories"] .category-tree-name,
body[data-page="articles"] #article-table strong,
body[data-page="documents"] .doc-num,
body[data-page="comments"] .data-table td strong {
  color: #111827;
  font-weight: 750;
}

body[data-page="categories"] #category-table .gridjs-td:nth-child(2),
body[data-page="categories"] #category-table .gridjs-td:nth-child(3),
body[data-page="comments"] .comment-meta-info,
body[data-page="documents"] .document-updated-cell {
  color: var(--mgmt-muted);
  font-size: 12.5px;
}

body[data-page="articles"] #article-table .gridjs-td:nth-child(2),
body[data-page="articles"] #article-table .gridjs-td:nth-child(4),
body[data-page="documents"] .data-table td:nth-child(2),
body[data-page="documents"] .data-table td:nth-child(3),
body[data-page="comments"] .data-table td:nth-child(4) {
  color: var(--mgmt-muted);
  white-space: nowrap;
}

body[data-page="articles"] #article-table .gridjs-td:nth-child(5) {
  font-variant-numeric: tabular-nums;
}

body[data-page="comments"] .comment-content-cell {
  max-width: none;
}

body[data-page="comments"] .comment-text {
  display: -webkit-box;
  margin-bottom: 8px;
  overflow: hidden;
  color: #263449;
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

body[data-page="categories"] #category-table .actions,
body[data-page="articles"] #article-table .article-row-actions,
body[data-page="documents"] .document-actions,
body[data-page="comments"] .quick-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  justify-content: flex-start;
}

body[data-page="comments"] .quick-actions {
  flex-wrap: wrap !important;
  margin-top: 0;
}

body[data-page="articles"] #article-table .article-row-actions .btn,
body[data-page="documents"] .document-actions .btn,
body[data-page="documents"] .document-actions a.btn,
body[data-page="comments"] .quick-actions .btn {
  min-height: 34px;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12.5px;
  white-space: nowrap;
}

body[data-page="documents"] .document-icon-btn,
body[data-page="documents"] .document-actions .document-icon-btn,
body[data-page="documents"] .document-actions a.document-icon-btn {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  border-radius: 8px;
  padding: 0;
}

body[data-page="documents"] .document-title-cell {
  max-width: none;
  color: #1f2937;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

body[data-page="documents"] .document-order-actions {
  gap: 4px;
}

body[data-page="categories"] .badge,
body[data-page="articles"] .badge,
body[data-page="documents"] .badge,
body[data-page="comments"] .badge {
  min-height: 24px;
  border-radius: 999px !important;
  padding: 4px 10px;
  box-shadow: none;
  text-transform: none;
  white-space: nowrap;
}

body[data-page="categories"] .category-empty-state,
body[data-page="articles"] .article-empty-state,
body[data-page="documents"] .dashboard-empty,
body[data-page="comments"] .empty-state,
body[data-page="comments"] .state,
body[data-page="comments"] #comment-table > div:not(.table-wrap) {
  display: grid !important;
  min-height: 240px;
  place-items: center;
  padding: 44px 20px !important;
  border: 0 !important;
  background: #fff !important;
  color: var(--mgmt-muted);
  text-align: center;
}

body[data-page="categories"] .category-table-controls {
  display: none !important;
}

body[data-page="documents"] .modal.item-dialog {
  width: min(640px, calc(100% - 28px)) !important;
  border-radius: 12px;
}

body[data-page="documents"] #item-fields {
  padding: 20px 24px !important;
}

body[data-page="documents"] #item-fields .field {
  gap: 7px;
}

body[data-page="documents"] #item-fields .field label {
  color: #334155;
  font-size: 13px;
}

body[data-page="documents"] #upload-pdf-btn {
  min-height: 40px;
  border-radius: 8px;
}

body[data-page="documents"] #pdf-upload-status {
  min-width: 0;
  color: var(--mgmt-muted) !important;
  font-size: 12.5px !important;
  line-height: 1.45;
}

@media (max-width: 900px) {
  body[data-page="categories"] .page-title,
  body[data-page="articles"] .page-title,
  body[data-page="documents"] .page-title,
  body[data-page="comments"] .page-title {
    display: grid;
    grid-template-columns: 1fr;
  }

  body[data-page="categories"] .page-title > .btn,
  body[data-page="articles"] .page-title > .btn,
  body[data-page="documents"] .page-title .actions,
  body[data-page="comments"] .management-toolbar .btn {
    width: 100%;
  }

  body[data-page="categories"] .category-toolbar,
  body[data-page="articles"] .article-toolbar,
  body[data-page="comments"] .management-toolbar,
  body[data-page="comments"] .filter-group {
    display: grid;
    grid-template-columns: 1fr;
  }

  body[data-page="categories"] .category-search-field,
  body[data-page="articles"] .category-search-field,
  body[data-page="comments"] .search-box,
  body[data-page="categories"] .category-status-filter-container,
  body[data-page="articles"] .category-status-filter-container,
  body[data-page="comments"] .status-box {
    width: 100% !important;
    min-width: 0;
    flex-basis: auto !important;
  }
}


/* Admin responsive table repair: no horizontal page/table scrolling */
body[data-page="documents"],
body[data-page="comments"],
body[data-page="contact-messages"],
body[data-page="users"] {
  overflow-x: clip;
}

body[data-page="documents"] .admin-main,
body[data-page="comments"] .admin-main,
body[data-page="contact-messages"] .admin-main,
body[data-page="users"] .admin-main {
  width: min(1360px, 100%);
  max-width: 100%;
}

body[data-page="contact-messages"] .filters,
body[data-page="users"] .users-toolbar {
  position: static !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid #d8e0ec;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
}

/* Keep Tom Select filter menus above the sticky management table header. */
body[data-page="users"] .users-toolbar,
body[data-page="categories"] .category-toolbar {
  position: relative !important;
  z-index: 20 !important;
}

body[data-page="contact-messages"] .filters .field:first-child,
body[data-page="users"] .users-toolbar .category-search-field {
  flex: 1 1 320px;
  min-width: 220px;
  margin: 0;
}

body[data-page="contact-messages"] .filters .field:nth-child(2),
body[data-page="users"] .users-toolbar .category-status-filter-container {
  flex: 0 1 210px !important;
  width: auto !important;
  min-width: 180px;
  margin: 0 !important;
}

body[data-page="contact-messages"] .filters .btn,
body[data-page="users"] .users-count {
  flex: 0 0 auto;
}

body[data-page="users"] .users-count {
  margin-left: auto;
  padding: 0 4px;
  color: #64748b;
  font-size: 13px;
}

body[data-page="contact-messages"] .filters input,
body[data-page="contact-messages"] .filters select,
body[data-page="users"] .users-toolbar input,
body[data-page="users"] .users-toolbar .ts-control {
  width: 100%;
  min-height: 42px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body[data-page="documents"] .table-wrap,
body[data-page="comments"] .table-wrap,
body[data-page="contact-messages"] .table-wrap,
body[data-page="users"] .gridjs-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body[data-page="documents"] .data-table,
body[data-page="comments"] .data-table,
body[data-page="contact-messages"] .data-table,
body[data-page="users"] .gridjs-table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  table-layout: fixed !important;
}

body[data-page="documents"] .data-table th,
body[data-page="documents"] .data-table td,
body[data-page="comments"] .data-table th,
body[data-page="comments"] .data-table td,
body[data-page="contact-messages"] .data-table th,
body[data-page="contact-messages"] .data-table td,
body[data-page="users"] .gridjs-th,
body[data-page="users"] .gridjs-td {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis;
  border-right: 0 !important;
  vertical-align: top;
}

body[data-page="documents"] .data-table td,
body[data-page="comments"] .data-table td,
body[data-page="contact-messages"] .data-table td,
body[data-page="users"] .gridjs-td {
  overflow-wrap: anywhere;
}

body[data-page="documents"] .data-table th:nth-child(1) { width: 13% !important; }
body[data-page="documents"] .data-table th:nth-child(2) { width: 10% !important; }
body[data-page="documents"] .data-table th:nth-child(3) { width: 12% !important; }
body[data-page="documents"] .data-table th:nth-child(4) { width: 32% !important; }
body[data-page="documents"] .data-table th:nth-child(5) { width: 10% !important; }
body[data-page="documents"] .data-table th:nth-child(6) { width: 8% !important; }
body[data-page="documents"] .data-table th:nth-child(7) { width: 15% !important; }

body[data-page="contact-messages"] .data-table th:nth-child(1) { width: 19% !important; }
body[data-page="contact-messages"] .data-table th:nth-child(2) { width: 33% !important; }
body[data-page="contact-messages"] .data-table th:nth-child(3) { width: 15% !important; }
body[data-page="contact-messages"] .data-table th:nth-child(4) { width: 18% !important; }
body[data-page="contact-messages"] .data-table th:nth-child(5) { width: 15% !important; }

body[data-page="comments"] .data-table th:nth-child(1) { width: 18% !important; }
body[data-page="comments"] .data-table th:nth-child(2) { width: 19% !important; }
body[data-page="comments"] .data-table th:nth-child(3) { width: 29% !important; }
body[data-page="comments"] .data-table th:nth-child(4) { width: 16% !important; }
body[data-page="comments"] .data-table th:nth-child(5) { width: 18% !important; }

body[data-page="documents"] .document-title-cell,
body[data-page="contact-messages"] .contact-message-copy,
body[data-page="comments"] .comment-text,
body[data-page="users"] .gridjs-td:nth-child(5) {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}

body[data-page="documents"] .document-title-cell,
body[data-page="contact-messages"] .contact-message-copy {
  -webkit-line-clamp: 2;
}

body[data-page="comments"] .comment-text,
body[data-page="users"] .gridjs-td:nth-child(5) {
  -webkit-line-clamp: 3;
}

body[data-page="contact-messages"] .contact-message-copy {
  max-width: none !important;
  margin: 5px 0 0;
  white-space: normal !important;
}

body[data-page="documents"] .document-updated-cell,
body[data-page="comments"] .data-table td:nth-child(4),
body[data-page="contact-messages"] .data-table td:nth-child(3),
body[data-page="users"] .gridjs-td:nth-child(6) {
  white-space: normal !important;
  color: #64748b;
  font-size: 12.5px !important;
  line-height: 1.45;
}

body[data-page="documents"] .document-actions,
body[data-page="comments"] .quick-actions,
body[data-page="contact-messages"] .data-table td.actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}

body[data-page="comments"] .quick-actions .btn,
body[data-page="contact-messages"] .data-table td.actions .btn,
body[data-page="documents"] .document-actions .btn,
body[data-page="documents"] .document-actions a.btn {
  min-width: 0 !important;
  min-height: 32px !important;
  border-radius: 8px;
  padding: 5px 9px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

body[data-page="comments"] .quick-actions .btn,
body[data-page="contact-messages"] .data-table td.actions .btn {
  flex: 1 1 0;
}

body[data-page="documents"] .document-icon-btn,
body[data-page="documents"] .document-actions .document-icon-btn,
body[data-page="documents"] .document-actions a.document-icon-btn {
  flex: 0 0 32px;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
}

body[data-page="contact-messages"] .contact-message-status {
  display: block;
  width: 100%;
  min-width: 0 !important;
  margin-top: 8px;
}

body[data-page="users"] #users-table .gridjs-container,
body[data-page="users"] #users-table .gridjs-wrapper,
body[data-page="users"] #users-table .gridjs-table,
body[data-page="users"] #users-table td.gridjs-td {
  overflow: visible !important;
}

body[data-page="users"] .user-identity,
body[data-page="users"] .user-identity span:last-child,
body[data-page="users"] .user-identity strong,
body[data-page="users"] .user-identity small {
  min-width: 0;
}

body[data-page="users"] .user-identity strong,
body[data-page="users"] .user-identity small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  body[data-page="documents"] .data-table th:nth-child(3),
  body[data-page="documents"] .data-table td:nth-child(3),
  body[data-page="users"] .gridjs-th:nth-child(6),
  body[data-page="users"] .gridjs-td:nth-child(6) {
    display: none !important;
  }

  body[data-page="documents"] .data-table th:nth-child(4) { width: 38% !important; }
  body[data-page="comments"] .data-table th:nth-child(3) { width: 28% !important; }
}

@media (max-width: 760px) {
  body[data-page="contact-messages"] .filters,
  body[data-page="users"] .users-toolbar {
    display: grid !important;
    grid-template-columns: 1fr;
  }

  body[data-page="contact-messages"] .filters .field,
  body[data-page="contact-messages"] .filters .btn,
  body[data-page="users"] .users-toolbar .category-search-field,
  body[data-page="users"] .users-toolbar .category-status-filter-container,
  body[data-page="users"] .users-count {
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }

  body[data-page="documents"] .table-wrap,
  body[data-page="comments"] .table-wrap,
  body[data-page="contact-messages"] .table-wrap {
    overflow-x: visible !important;
  }

  body[data-page="documents"] .data-table,
  body[data-page="comments"] .data-table,
  body[data-page="contact-messages"] .data-table {
    display: block !important;
    width: 100% !important;
  }

  body[data-page="documents"] .data-table thead,
  body[data-page="comments"] .data-table thead,
  body[data-page="contact-messages"] .data-table thead {
    display: none !important;
  }

  body[data-page="documents"] .data-table tbody,
  body[data-page="comments"] .data-table tbody,
  body[data-page="contact-messages"] .data-table tbody {
    display: grid !important;
    gap: 14px !important;
  }

  body[data-page="documents"] .data-table tr,
  body[data-page="comments"] .data-table tr,
  body[data-page="contact-messages"] .data-table tr {
    display: grid !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 14px !important;
    border: 1px solid #d8e0ec !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .05) !important;
  }

  body[data-page="documents"] .data-table td,
  body[data-page="comments"] .data-table td,
  body[data-page="contact-messages"] .data-table td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
  }

  body[data-page="documents"] .data-table tr td:first-child,
  body[data-page="comments"] .data-table tr td:first-child,
  body[data-page="contact-messages"] .data-table tr td:first-child {
    padding-bottom: 8px !important;
    border-bottom: 1px dashed #e2e8f0 !important;
  }

  body[data-page="documents"] .document-actions,
  body[data-page="comments"] .quick-actions,
  body[data-page="contact-messages"] .data-table td.actions {
    justify-content: stretch !important;
    padding-top: 10px !important;
    border-top: 1px solid #edf2f7 !important;
  }

  body[data-page="documents"] .document-actions .btn:not(.document-icon-btn),
  body[data-page="contact-messages"] .data-table td.actions .btn,
  body[data-page="comments"] .quick-actions .btn {
    flex: 1 1 0 !important;
  }

  body[data-page="users"] .gridjs-wrapper {
    overflow-x: hidden !important;
  }

  body[data-page="users"] .gridjs-th:nth-child(2),
  body[data-page="users"] .gridjs-td:nth-child(2),
  body[data-page="users"] .gridjs-th:nth-child(5),
  body[data-page="users"] .gridjs-td:nth-child(5),
  body[data-page="users"] .gridjs-th:nth-child(6),
  body[data-page="users"] .gridjs-td:nth-child(6) {
    display: none !important;
  }

  body[data-page="users"] .gridjs-th,
  body[data-page="users"] .gridjs-td {
    padding: 12px 8px !important;
  }

  body[data-page="users"] .role-badge span {
    display: none;
  }
}

@media (max-width: 520px) {
  body[data-page="documents"] .document-actions {
    flex-wrap: wrap !important;
  }

  body[data-page="documents"] .document-actions .btn:not(.document-icon-btn) {
    flex: 1 1 calc(50% - 6px) !important;
  }

  body[data-page="comments"] .quick-actions,
  body[data-page="contact-messages"] .data-table td.actions {
    flex-wrap: nowrap !important;
  }

  body[data-page="comments"] .quick-actions .btn,
  body[data-page="contact-messages"] .data-table td.actions .btn {
    padding-inline: 6px !important;
  }
}


/* Users Grid.js final overflow guard */
body[data-page="users"] #users-table .gridjs-container,
body[data-page="users"] #users-table .gridjs-wrapper,
body[data-page="users"] #users-table .gridjs-table {
  max-width: 100% !important;
}

body[data-page="users"] #users-table .gridjs-th,
body[data-page="users"] #users-table .gridjs-td {
  overflow: hidden !important;
}

body[data-page="users"] #users-table .gridjs-th:last-child,
body[data-page="users"] #users-table .gridjs-td:last-child {
  overflow: visible !important;
}


/* Final viewport fit guard for affected admin pages */
body[data-page="documents"] .admin-main,
body[data-page="comments"] .admin-main,
body[data-page="contact-messages"] .admin-main,
body[data-page="users"] .admin-main {
  box-sizing: border-box;
  width: min(1360px, 100%) !important;
  max-width: 100% !important;
}


/* Final column layout for Users and Contact Messages */
@media (max-width: 1440px) {
  body[data-page="contact-messages"] .data-table th:nth-child(3),
  body[data-page="contact-messages"] .data-table td:nth-child(3),
  body[data-page="users"] #users-table .gridjs-th:nth-child(2),
  body[data-page="users"] #users-table .gridjs-td:nth-child(2),
  body[data-page="users"] #users-table .gridjs-th:nth-child(5),
  body[data-page="users"] #users-table .gridjs-td:nth-child(5),
  body[data-page="users"] #users-table .gridjs-th:nth-child(6),
  body[data-page="users"] #users-table .gridjs-td:nth-child(6) {
    display: none !important;
  }

  body[data-page="contact-messages"] .data-table th:nth-child(1) { width: 24% !important; }
  body[data-page="contact-messages"] .data-table th:nth-child(2) { width: 38% !important; }
  body[data-page="contact-messages"] .data-table th:nth-child(4) { width: 22% !important; }
  body[data-page="contact-messages"] .data-table th:nth-child(5) { width: 16% !important; }

  body[data-page="users"] #users-table .gridjs-th:nth-child(1) { width: 42% !important; }
  body[data-page="users"] #users-table .gridjs-th:nth-child(3) { width: 22% !important; }
  body[data-page="users"] #users-table .gridjs-th:nth-child(4) { width: 18% !important; }
  body[data-page="users"] #users-table .gridjs-th:nth-child(7) { width: 18% !important; }

  body[data-page="users"] #users-table .gridjs-table,
  body[data-page="contact-messages"] .data-table {
    table-layout: fixed !important;
  }
}

@media (max-width: 760px) {
  body[data-page="users"] #users-table .gridjs-table,
  body[data-page="users"] #users-table .gridjs-tbody,
  body[data-page="users"] #users-table .gridjs-tr,
  body[data-page="users"] #users-table .gridjs-td,
  body[data-page="contact-messages"] .data-table,
  body[data-page="contact-messages"] .data-table tbody,
  body[data-page="contact-messages"] .data-table tr,
  body[data-page="contact-messages"] .data-table td {
    display: block !important;
    width: 100% !important;
  }

  body[data-page="users"] #users-table .gridjs-thead,
  body[data-page="contact-messages"] .data-table thead {
    display: none !important;
  }

  body[data-page="users"] #users-table .gridjs-tbody,
  body[data-page="contact-messages"] .data-table tbody {
    display: grid !important;
    gap: 12px !important;
  }

  body[data-page="users"] #users-table .gridjs-tr,
  body[data-page="contact-messages"] .data-table tr {
    padding: 14px !important;
    border: 1px solid #d8e0ec !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .05) !important;
  }

  body[data-page="users"] #users-table .gridjs-td,
  body[data-page="contact-messages"] .data-table td {
    padding: 0 0 10px !important;
    border: 0 !important;
  }

  body[data-page="users"] #users-table .gridjs-td:last-child,
  body[data-page="contact-messages"] .data-table td.actions {
    padding: 10px 0 0 !important;
    border-top: 1px solid #edf2f7 !important;
  }
}

/* Source-level compact tables for Users and Contact Messages */
body[data-page="users"] #users-table .gridjs-table,
body[data-page="contact-messages"] .contact-messages-table {
  table-layout: fixed !important;
  width: 100% !important;
  min-width: 0 !important;
}

body[data-page="users"] #users-table .gridjs-th,
body[data-page="users"] #users-table .gridjs-td,
body[data-page="contact-messages"] .contact-messages-table th,
body[data-page="contact-messages"] .contact-messages-table td {
  box-sizing: border-box;
  min-width: 0;
}

body[data-page="users"] #users-table .gridjs-th:nth-child(1) { width: 44% !important; }
body[data-page="users"] #users-table .gridjs-th:nth-child(2) { width: 18% !important; }
body[data-page="users"] #users-table .gridjs-th:nth-child(3) { width: 16% !important; }
body[data-page="users"] #users-table .gridjs-th:nth-child(4) { width: 22% !important; }

body[data-page="users"] .user-identity-compact {
  align-items: flex-start;
  min-width: 0;
}

body[data-page="users"] .user-identity-compact > span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body[data-page="users"] .user-identity-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 10px;
  max-width: 100%;
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
}

body[data-page="users"] .user-identity-meta span {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-page="users"] .user-status-stack {
  display: inline-grid;
  gap: 4px;
  min-width: 0;
}

body[data-page="users"] .user-status-stack small {
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
}

body[data-page="contact-messages"] .contact-messages-table th:nth-child(1) { width: 26% !important; }
body[data-page="contact-messages"] .contact-messages-table th:nth-child(2) { width: 42% !important; }
body[data-page="contact-messages"] .contact-messages-table th:nth-child(3) { width: 18% !important; }
body[data-page="contact-messages"] .contact-messages-table th:nth-child(4) { width: 14% !important; }

body[data-page="contact-messages"] .contact-message-sender,
body[data-page="contact-messages"] .contact-message-content,
body[data-page="contact-messages"] .contact-message-status-cell {
  min-width: 0;
}

body[data-page="contact-messages"] .contact-message-sender strong,
body[data-page="contact-messages"] .contact-message-email,
body[data-page="contact-messages"] .contact-message-content strong,
body[data-page="contact-messages"] .contact-message-copy {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-page="contact-messages"] .contact-message-sender strong,
body[data-page="contact-messages"] .contact-message-email,
body[data-page="contact-messages"] .contact-message-content strong {
  white-space: nowrap;
}

body[data-page="contact-messages"] .contact-message-time {
  display: block;
  margin-top: 5px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
}

body[data-page="contact-messages"] .contact-message-copy {
  display: -webkit-box;
  margin: 5px 0 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
}

body[data-page="contact-messages"] .contact-message-status-cell {
  display: grid;
  gap: 8px;
  align-content: start;
}

body[data-page="contact-messages"] .contact-message-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px;
  justify-content: flex-end;
}

body[data-page="contact-messages"] .contact-message-actions .btn {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: 8px;
}

@media (max-width: 760px) {
  body[data-page="users"] #users-table .gridjs-td:not(:last-child),
  body[data-page="contact-messages"] .contact-messages-table td:not(:last-child) {
    padding-bottom: 10px !important;
    border-bottom: 1px dashed #edf2f7 !important;
  }

  body[data-page="contact-messages"] .contact-message-actions {
    justify-content: stretch;
  }
}

/* Compact table display override after older breakpoint rules */
@media (min-width: 761px) {
  body[data-page="users"] #users-table .gridjs-th,
  body[data-page="users"] #users-table .gridjs-td,
  body[data-page="contact-messages"] .contact-messages-table th,
  body[data-page="contact-messages"] .contact-messages-table td {
    display: table-cell !important;
  }
}

/* Documents action/order overflow fix */
body[data-page="documents"] .documents-admin-table {
  table-layout: fixed !important;
  width: 100% !important;
  min-width: 0 !important;
}

body[data-page="documents"] .documents-admin-table th:nth-child(1) { width: 14% !important; }
body[data-page="documents"] .documents-admin-table th:nth-child(2) { width: 11% !important; }
body[data-page="documents"] .documents-admin-table th:nth-child(3) { width: 31% !important; }
body[data-page="documents"] .documents-admin-table th:nth-child(4) { width: 12% !important; }
body[data-page="documents"] .documents-admin-table th:nth-child(5) { width: 12% !important; }
body[data-page="documents"] .documents-admin-table th:nth-child(6) { width: 20% !important; }

body[data-page="documents"] .documents-admin-table td:nth-child(5),
body[data-page="documents"] .documents-admin-table td:nth-child(6) {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

body[data-page="documents"] .document-title-cell {
  display: grid !important;
  gap: 5px;
  overflow: hidden !important;
  -webkit-line-clamp: unset !important;
}

body[data-page="documents"] .document-title-cell strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

body[data-page="documents"] .document-updated-cell {
  display: block;
  overflow: hidden;
  color: #64748b;
  font-size: 12px !important;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap !important;
}

body[data-page="documents"] .status-toggle {
  max-width: 100%;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap !important;
}

body[data-page="documents"] .document-order-actions,
body[data-page="documents"] .document-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: max-content !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

body[data-page="documents"] .document-order-actions {
  justify-content: center;
}

body[data-page="documents"] .document-actions {
  justify-content: flex-start;
}

body[data-page="documents"] .document-actions .btn,
body[data-page="documents"] .document-actions a.btn,
body[data-page="documents"] .document-order-actions .btn {
  flex: 0 0 auto !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

body[data-page="documents"] .document-actions .btn:not(.document-icon-btn) {
  min-width: 44px !important;
  padding-inline: 9px !important;
}

@media (max-width: 760px) {
  body[data-page="documents"] .document-order-actions,
  body[data-page="documents"] .document-actions {
    min-width: 0 !important;
    width: 100%;
    justify-content: stretch !important;
  }

  body[data-page="documents"] .document-order-actions .document-icon-btn {
    flex: 1 1 0 !important;
  }
}

/* Contact messages final table layout fix */
body[data-page="contact-messages"] #contact-message-table {
  margin-top: 20px;
}

body[data-page="contact-messages"] #contact-message-table .table-wrap {
  overflow: hidden !important;
  border: 1px solid #d8e0ec !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .06) !important;
}

body[data-page="contact-messages"] .contact-messages-table {
  display: table !important;
  table-layout: fixed !important;
  width: 100% !important;
  min-width: 0 !important;
  border-collapse: collapse !important;
}

body[data-page="contact-messages"] .contact-messages-table thead {
  display: table-header-group !important;
}

body[data-page="contact-messages"] .contact-messages-table tbody {
  display: table-row-group !important;
}

body[data-page="contact-messages"] .contact-messages-table tr {
  display: table-row !important;
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-page="contact-messages"] .contact-messages-table th,
body[data-page="contact-messages"] .contact-messages-table td {
  position: static !important;
  display: table-cell !important;
  min-width: 0 !important;
  padding: 16px 18px !important;
  border-bottom: 1px solid #edf2f7 !important;
  vertical-align: middle !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

body[data-page="contact-messages"] .contact-messages-table th {
  background: #f8fafc !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.35;
  white-space: nowrap !important;
}

body[data-page="contact-messages"] .contact-messages-table th:nth-child(1),
body[data-page="contact-messages"] .contact-messages-table td:nth-child(1) { width: 25% !important; }
body[data-page="contact-messages"] .contact-messages-table th:nth-child(2),
body[data-page="contact-messages"] .contact-messages-table td:nth-child(2) { width: 37% !important; }
body[data-page="contact-messages"] .contact-messages-table th:nth-child(3),
body[data-page="contact-messages"] .contact-messages-table td:nth-child(3) { width: 20% !important; }
body[data-page="contact-messages"] .contact-messages-table th:nth-child(4),
body[data-page="contact-messages"] .contact-messages-table td:nth-child(4) {
  width: 18% !important;
  overflow: visible !important;
}

body[data-page="contact-messages"] .contact-message-status-cell {
  display: table-cell !important;
  color: #334155 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

body[data-page="contact-messages"] .contact-message-status-cell .badge {
  min-width: 96px;
  max-width: 100%;
  min-height: 30px;
  margin-bottom: 9px;
  justify-content: center;
  border-radius: 999px !important;
  padding: 5px 13px !important;
  font-size: 12px !important;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap !important;
}

body[data-page="contact-messages"] .contact-message-status {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 38px;
  margin-top: 8px !important;
  padding: 0 36px 0 12px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 9px !important;
  background-color: #fff !important;
  color: #172033;
  font: inherit;
  font-size: 13px !important;
  line-height: 38px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
}

body[data-page="contact-messages"] .contact-message-status:focus {
  border-color: #243a8f !important;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(36, 58, 143, .14) !important;
}

body[data-page="contact-messages"] .contact-message-actions {
  display: grid !important;
  grid-template-columns: minmax(72px, 1fr) minmax(72px, 1fr);
  gap: 8px !important;
  align-items: center !important;
  justify-content: stretch !important;
  min-width: 160px !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

body[data-page="contact-messages"] .contact-message-actions .btn {
  width: 100% !important;
  min-width: 0 !important;
  height: 40px;
  min-height: 40px !important;
  border-radius: 9px !important;
  padding: 0 10px !important;
  font-size: 13px !important;
  font-weight: 800;
  line-height: 40px;
  text-align: center;
  white-space: nowrap !important;
}

body[data-page="contact-messages"] .contact-message-actions .btn-outline {
  border-color: #243a8f !important;
  color: #16276f !important;
  background: #fff !important;
}

body[data-page="contact-messages"] .contact-message-actions .btn-outline:hover,
body[data-page="contact-messages"] .contact-message-actions .btn-outline:focus-visible {
  background: #eef3ff !important;
}

body[data-page="contact-messages"] .contact-message-actions .btn-danger {
  border-color: #c8211b !important;
  background: #c8211b !important;
  color: #fff !important;
}

@media (max-width: 980px) and (min-width: 761px) {
  body[data-page="contact-messages"] .contact-messages-table th:nth-child(1),
  body[data-page="contact-messages"] .contact-messages-table td:nth-child(1) { width: 24% !important; }
  body[data-page="contact-messages"] .contact-messages-table th:nth-child(2),
  body[data-page="contact-messages"] .contact-messages-table td:nth-child(2) { width: 34% !important; }
  body[data-page="contact-messages"] .contact-messages-table th:nth-child(3),
  body[data-page="contact-messages"] .contact-messages-table td:nth-child(3) { width: 22% !important; }
  body[data-page="contact-messages"] .contact-messages-table th:nth-child(4),
  body[data-page="contact-messages"] .contact-messages-table td:nth-child(4) { width: 20% !important; }

  body[data-page="contact-messages"] .contact-message-actions {
    grid-template-columns: 1fr;
    min-width: 86px !important;
  }
}

@media (max-width: 760px) {
  body[data-page="contact-messages"] #contact-message-table .table-wrap {
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-page="contact-messages"] .contact-messages-table,
  body[data-page="contact-messages"] .contact-messages-table tbody,
  body[data-page="contact-messages"] .contact-messages-table tr,
  body[data-page="contact-messages"] .contact-messages-table td {
    display: block !important;
    width: 100% !important;
  }

  body[data-page="contact-messages"] .contact-messages-table thead {
    display: none !important;
  }

  body[data-page="contact-messages"] .contact-messages-table tbody {
    display: grid !important;
    gap: 12px !important;
  }

  body[data-page="contact-messages"] .contact-messages-table tr {
    padding: 14px !important;
    border: 1px solid #d8e0ec !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .05) !important;
  }

  body[data-page="contact-messages"] .contact-messages-table td {
    padding: 0 0 10px !important;
    border-bottom: 1px dashed #edf2f7 !important;
  }

  body[data-page="contact-messages"] .contact-message-actions {
    grid-template-columns: 1fr 1fr;
    min-width: 0 !important;
  }
}
/* Contact messages: keep Save/Delete actions compact and aligned */
body[data-page="contact-messages"] .contact-message-actions {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-width: 148px !important;
  width: max-content !important;
  overflow: visible !important;
  white-space: nowrap !important;
}
body[data-page="contact-messages"] .contact-message-actions .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 64px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}
body[data-page="contact-messages"] .contact-message-actions .btn[disabled] {
  opacity: .72;
  cursor: wait;
}
body[data-page="contact-messages"] .contact-message-actions .btn-outline {
  border: 1px solid #243a8f !important;
  background: #fff !important;
  color: #16276f !important;
}
body[data-page="contact-messages"] .contact-message-actions .btn-outline:hover,
body[data-page="contact-messages"] .contact-message-actions .btn-outline:focus-visible {
  background: #eef3ff !important;
  color: #16276f !important;
}
body[data-page="contact-messages"] .contact-message-actions .btn-danger {
  border: 1px solid #c8211b !important;
  background: #c8211b !important;
  color: #fff !important;
}
body[data-page="contact-messages"] .contact-message-actions .btn-danger:hover,
body[data-page="contact-messages"] .contact-message-actions .btn-danger:focus-visible {
  background: #a91b16 !important;
  border-color: #a91b16 !important;
}
@media (max-width: 980px) and (min-width: 761px) {
  body[data-page="contact-messages"] .contact-message-actions {
    min-width: 0 !important;
    width: auto !important;
  }
  body[data-page="contact-messages"] .contact-message-actions .btn {
    min-width: 58px !important;
    padding-inline: 12px !important;
  }
}
@media (max-width: 760px) {
  body[data-page="contact-messages"] .contact-message-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  body[data-page="contact-messages"] .contact-message-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
  }
}

/* Contact messages: keep the action cell as a table cell while buttons align inside. */
body[data-page="contact-messages"] .contact-message-actions-cell {
  display: table-cell !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

body[data-page="contact-messages"] .contact-message-actions-cell .contact-message-actions {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-width: 148px !important;
  width: max-content !important;
}

body[data-page="contact-messages"] .contact-message-actions-cell .contact-message-actions .btn {
  flex: 0 0 auto !important;
  min-width: 64px !important;
  width: auto !important;
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  body[data-page="contact-messages"] .contact-message-actions-cell .contact-message-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body[data-page="contact-messages"] .contact-message-actions-cell .contact-message-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Users Grid.js header layout fix: remove the generated empty head row. */
body[data-page="users"] #users-table .gridjs-head {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

body[data-page="users"] #users-table .gridjs-thead,
body[data-page="users"] #users-table .gridjs-thead tr {
  height: auto !important;
}

body[data-page="users"] #users-table .gridjs-th {
  position: static !important;
  height: auto !important;
  padding: 16px 14px !important;
  vertical-align: middle !important;
}

/* Visible row actions: management tables show edit/delete controls directly. */
.user-row-actions,
.category-row-actions,
.contact-message-actions {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: max-content !important;
  white-space: nowrap !important;
}

.category-row-actions .action-circle-btn {
  display: none !important;
}

.category-row-actions .action-dropdown-menu {
  position: static !important;
  display: contents !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  animation: none !important;
}

.user-row-actions .btn,
.category-row-actions .btn,
.contact-message-actions .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.user-row-actions .btn svg,
.category-row-actions .btn svg {
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 auto !important;
}

body[data-page="users"] #users-table .gridjs-td:last-child,
body[data-page="categories"] #category-table .gridjs-td:last-child {
  overflow: visible !important;
  white-space: normal !important;
}

body[data-page="users"] #users-table .gridjs-th:nth-child(4),
body[data-page="categories"] #category-table .gridjs-th:last-child {
  text-align: left !important;
}

/* Categories: child preview on hover and clearer row actions. */
body[data-page="categories"] #category-table .gridjs-table {
  table-layout: fixed !important;
}

body[data-page="categories"] #category-table .gridjs-td:first-child {
  overflow: visible !important;
}

body[data-page="categories"] .category-tree-name {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  padding-inline-start: calc(var(--category-depth, 0) * 18px);
  outline: none;
}


body[data-page="categories"] .category-name-line {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

body[data-page="categories"] .category-name-line strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-page="categories"] .category-child-count {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

body[data-page="categories"] .category-child-count.is-empty {
  border-color: #e2e8f0;
  background: #f8fafc;
  color: #94a3b8;
}

body[data-page="categories"] .category-child-preview {
  display: grid;
  max-height: 0;
  gap: 6px;
  overflow: hidden;
  border: 0 solid #dbe4ef;
  border-radius: 10px;
  background: #f8fbff;
  opacity: 0;
  transform: translateY(-2px);
  transition: max-height .18s ease, opacity .18s ease, padding .18s ease, border-width .18s ease, transform .18s ease;
}

body[data-page="categories"] .gridjs-tr:hover .category-child-preview,
body[data-page="categories"] .gridjs-tr:focus-within .category-child-preview {
  max-height: 260px;
  padding: 10px;
  border-width: 1px;
  opacity: 1;
  transform: translateY(0);
}

body[data-page="categories"] .category-child-preview-title,
body[data-page="categories"] .category-child-more {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

body[data-page="categories"] .category-child-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  background: #fff;
  padding: 7px 9px;
}

body[data-page="categories"] .category-child-item strong,
body[data-page="categories"] .category-child-item small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-page="categories"] .category-child-item strong {
  color: #172033;
  font-size: 12px;
}

body[data-page="categories"] .category-child-item small {
  color: #64748b;
  font-size: 11px;
}


/* Categories tree table redesign. */

body[data-page="categories"] #category-table {
  min-width: 0;
}

body[data-page="categories"] #category-table .gridjs-container {
  overflow: visible !important;
}

body[data-page="categories"] #category-table .gridjs-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

body[data-page="categories"] #category-table .gridjs-table {
  width: 100% !important;
  min-width: 900px;
  table-layout: fixed !important;
}

body[data-page="categories"] #category-table .gridjs-th,
body[data-page="categories"] #category-table .gridjs-td {
  vertical-align: middle !important;
  overflow: visible !important;
}

body[data-page="categories"] #category-table .gridjs-th {
  white-space: nowrap;
  text-overflow: clip;
}

body[data-page="categories"] #category-table .gridjs-td:last-child,
body[data-page="categories"] #category-table .gridjs-th:last-child {
  min-width: 130px;
}

/* Cat tree controls: Mở tất cả / Thu gọn */
body[data-page="categories"] .cat-tree-controls {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 0 0 10px;
  padding: 0;
}

body[data-page="categories"] .cat-tree-ctrl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #dbe4ef;
  border-radius: 8px;
  background: #fff;
  color: #374151;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

body[data-page="categories"] .cat-tree-ctrl-btn:hover {
  border-color: #9db5d6;
  background: #f1f6fd;
}

/* Cat tree name cell */
body[data-page="categories"] .cat-tree-name {
  display: flex !important;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

body[data-page="categories"] .cat-tree-name.is-root {
  font-weight: 700;
}

body[data-page="categories"] .cat-tree-name.is-child {
  font-weight: 500;
  color: #374151;
}

body[data-page="categories"] .cat-tree-toggle {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  padding: 0;
}

body[data-page="categories"] .cat-tree-toggle:hover {
  background: #dbeafe;
  border-color: #93c5fd;
}

body[data-page="categories"] .cat-tree-spacer {
  flex-shrink: 0;
  display: inline-block;
  width: 22px;
  height: 22px;
}

body[data-page="categories"] .cat-tree-label {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-page="categories"] .cat-child-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

body[data-page="categories"] .cat-desc-cell {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #475569;
  font-size: 12.5px;
  line-height: 1.4;
}

/* Ensure action dropdown appears above table rows */
body[data-page="categories"] #category-table .action-dropdown-wrap {
  position: relative;
}

body[data-page="categories"] #category-table .action-dropdown-menu {
  z-index: 9999;
  min-width: 180px;
}

body[data-page="categories"] .category-child-preview {
  display: none !important;
}

body[data-page="categories"] .category-tree-toggle,
body[data-page="categories"] .category-tree-spacer {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

body[data-page="categories"] .category-tree-toggle {
  display: inline-grid;
  place-items: center;
  border: 1px solid #dbeafe;
  border-radius: 7px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

body[data-page="categories"] .category-tree-toggle:hover {
  border-color: #93c5fd;
  background: #dbeafe;
}

body[data-page="categories"] .category-tree-connector {
  flex-shrink: 0;
  width: 18px;
  height: 26px;
  border-left: 1px solid #cbd5e1;
  border-bottom: 1px solid #cbd5e1;
  transform: translateY(-7px);
}

body[data-page="categories"] .category-name-button,
body[data-page="categories"] .category-name-text {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #172033;
  text-align: left;
}

body[data-page="categories"] .category-name-content {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

body[data-page="categories"] .category-name-content .category-child-count {
  flex-shrink: 0;
  width: fit-content;
  max-width: 100%;
  min-height: 20px;
  padding: 2px 7px;
  font-size: 11px;
  line-height: 1.2;
}

body[data-page="categories"] .category-name-button {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

body[data-page="categories"] .category-tree-name.is-parent .category-name-button {
  font-weight: 800;
}

body[data-page="categories"] .category-tree-name.is-child .category-name-text {
  color: #334155;
  font-weight: 650;
}

body[data-page="categories"] .category-tree-name.is-context .category-name-button,
body[data-page="categories"] .category-tree-name.is-context .category-name-text {
  color: #64748b;
}

body[data-page="categories"] .category-description-cell {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #475569;
  line-height: 1.45;
}

body[data-page="categories"] .category-action-panel {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  flex-wrap: nowrap;
  min-width: 0;
}

body[data-page="categories"] .category-action-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 30px;
  padding: 0 9px !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
  text-decoration: none;
  flex-shrink: 0;
  line-height: 1;
}

body[data-page="categories"] .category-action-btn svg {
  width: 13px !important;
  height: 13px !important;
  flex-shrink: 0;
}

body[data-page="categories"] .cat-btn-edit {
  background: #f0f4ff;
  border-color: #c7d7fa;
  color: #2d5be3;
}

body[data-page="categories"] .cat-btn-edit:hover {
  background: #dce8ff;
  border-color: #93b4f5;
  box-shadow: 0 1px 4px rgba(45,91,227,.12);
}

body[data-page="categories"] .cat-btn-child {
  background: #f4f6fa;
  border-color: #dde3ef;
  color: #374151;
  padding: 0 8px !important;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: .01em;
}

body[data-page="categories"] .cat-btn-child:hover {
  background: #e8ecf5;
  border-color: #b0bdcf;
}

body[data-page="categories"] .cat-btn-more {
  background: transparent;
  border-color: #e2e8f0;
  color: #64748b;
  padding: 0 7px !important;
  width: 30px;
}

body[data-page="categories"] .cat-btn-more:hover {
  background: #f1f5f9;
  border-color: #c9d4e4;
  color: #334155;
}

body[data-page="categories"] .cat-btn-more[aria-expanded="true"] {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #1e293b;
}

/* Overflow dropdown menu */
body[data-page="categories"] .cat-menu-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

body[data-page="categories"] .cat-menu-dropdown {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  z-index: 9999;
  min-width: 160px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(15,23,42,.14), 0 2px 8px rgba(15,23,42,.08);
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: cat-menu-in 0.12s ease;
}

body[data-page="categories"] .cat-menu-dropdown[hidden] {
  display: none !important;
}

body[data-page="categories"] .cat-menu-dropdown--up {
  top: auto;
  bottom: calc(100% + 5px);
}

@keyframes cat-menu-in {
  from { opacity: 0; transform: translateY(-4px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

body[data-page="categories"] .cat-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border-radius: 7px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s, color 0.1s;
}

body[data-page="categories"] .cat-menu-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: .8;
}

body[data-page="categories"] .cat-menu-item:hover {
  background: #f1f5f9;
  color: #0f172a;
}

body[data-page="categories"] .cat-menu-hide:hover {
  background: #fff9e6;
  color: #92400e;
}

body[data-page="categories"] .cat-menu-restore:hover {
  background: #ecfdf5;
  color: #065f46;
}

body[data-page="categories"] .cat-menu-delete {
  color: #be123c;
}

body[data-page="categories"] .cat-menu-delete:hover {
  background: #fff1f2;
  color: #9f1239;
}

/* Remove old broad button styles no longer used */

@media (max-width: 760px) {
  body[data-page="categories"] .category-toolbar {
    display: grid;
  }

  body[data-page="categories"] .category-search-field,
  body[data-page="categories"] .category-status-filter-container {
    width: 100% !important;
    max-width: none;
  }

  body[data-page="categories"] .category-table-controls {
    justify-content: stretch;
  }

  body[data-page="categories"] .category-tree-control {
    flex: 1 1 0;
  }
}

/* Contact Messages: align the table shell and row actions with Documents. */
body[data-page="contact-messages"] #contact-message-table.surface {
  margin-top: 20px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body[data-page="contact-messages"] #contact-message-table .skeleton {
  margin: 24px !important;
}

body[data-page="contact-messages"] #contact-message-table .contact-messages-table-wrap {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body[data-page="contact-messages"] .contact-messages-table {
  table-layout: fixed !important;
  width: 100% !important;
  min-width: 0 !important;
  border-collapse: collapse !important;
}

body[data-page="contact-messages"] .contact-messages-table th:nth-child(1),
body[data-page="contact-messages"] .contact-messages-table td:nth-child(1) { width: 25% !important; }
body[data-page="contact-messages"] .contact-messages-table th:nth-child(2),
body[data-page="contact-messages"] .contact-messages-table td:nth-child(2) { width: 37% !important; }
body[data-page="contact-messages"] .contact-messages-table th:nth-child(3),
body[data-page="contact-messages"] .contact-messages-table td:nth-child(3) { width: 20% !important; }
body[data-page="contact-messages"] .contact-messages-table th:nth-child(4),
body[data-page="contact-messages"] .contact-messages-table td:nth-child(4) {
  width: 18% !important;
  overflow: visible !important;
}

body[data-page="contact-messages"] .contact-message-actions-cell {
  display: table-cell !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

body[data-page="contact-messages"] .contact-message-actions {
  justify-content: flex-start !important;
  min-width: 0 !important;
  width: max-content !important;
}

body[data-page="contact-messages"] .contact-message-actions .btn {
  width: auto !important;
  min-width: 58px !important;
  height: 36px !important;
  min-height: 36px !important;
  border-radius: 8px !important;
}

/* Dashboard recent articles: keep the table header inside its own scroll area. */
body[data-page="dashboard"] #recent-articles.dashboard-state {
  min-height: 0 !important;
}

body[data-page="dashboard"] #recent-articles .dashboard-recent-table-wrap {
  max-height: min(58vh, 560px);
  overflow: auto !important;
  border: 1px solid #d8e0ec !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body[data-page="dashboard"] #recent-articles .dashboard-recent-table {
  table-layout: fixed;
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
}

body[data-page="dashboard"] #recent-articles .dashboard-recent-table th {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid #edf2f7 !important;
  background: #f8fafc !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

body[data-page="dashboard"] #recent-articles .dashboard-recent-table td {
  padding: 18px !important;
  vertical-align: middle !important;
}

body[data-page="dashboard"] #recent-articles .article-row-actions {
  justify-content: flex-start !important;
}

@media (max-width: 760px) {
  body[data-page="dashboard"] #recent-articles .dashboard-recent-table-wrap {
    max-height: none;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
  }

  body[data-page="dashboard"] #recent-articles .dashboard-recent-table {
    min-width: 0 !important;
  }

  body[data-page="dashboard"] #recent-articles .dashboard-recent-table thead {
    display: none !important;
  }
}

@media (max-width: 760px) {
  .user-row-actions,
  .category-row-actions,
  .contact-message-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .user-row-actions .btn,
  .category-row-actions .btn,
  .contact-message-actions .btn {
    flex: 1 1 120px !important;
    min-width: 0 !important;
  }
}

/* ==========================================================================
   Responsive audit: shared controls, dashboard actions and management rows
   ========================================================================== */
.admin-content,
.admin-main,
.page-title > div,
.widget,
#category-table,
#article-table,
#documents-table {
  min-width: 0;
}

.page-title .actions,
.page-title > .btn {
  min-width: 0;
  max-width: 100%;
}

.page-title .btn,
.admin-header .btn,
.category-pagination-btn {
  white-space: nowrap;
}

.admin-header-left,
.admin-header-right,
.admin-breadcrumb,
.user-profile {
  min-width: 0;
}

.admin-header-right .admin-logout-btn {
  flex: 0 0 auto;
}

body[data-page="dashboard"] .page-title .actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

body[data-page="dashboard"] .shortcut-btn {
  min-width: 0;
  overflow-wrap: anywhere;
}

body[data-page="dashboard"] .metric-card {
  min-width: 0;
}

/* Categories keeps tree branches intact while making the pager easy to tap. */
.category-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 2px 2px;
  color: var(--muted);
  font-size: 12px;
}

.category-pagination-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.category-pagination-btn {
  display: inline-flex;
  min-width: 40px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.category-pagination-btn:hover:not(:disabled),
.category-pagination-btn.active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.category-pagination-btn:disabled {
  cursor: not-allowed;
  opacity: .45;
}

body[data-page="categories"] .cat-cell-actions,
body[data-page="categories"] .cat-actions-wrapper,
body[data-page="documents"] .doc-mgmt-cell-actions,
body[data-page="documents"] .doc-mgmt-actions-wrapper {
  min-width: 0;
  overflow: visible !important;
}

body[data-page="articles"] #article-table .gridjs-table {
  min-width: 980px;
}

body[data-page="articles"] #article-table .gridjs-td strong {
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  body[data-page="article-editor"] .editor-layout {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page="article-editor"] .editor-layout > *,
  body[data-page="article-editor"] .editor-layout .stack,
  body[data-page="article-editor"] .editor-layout .form-section {
    width: 100%;
    min-width: 0;
  }

  body[data-page="article-editor"] .form-section {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page="article-editor"] .form-section > *,
  body[data-page="article-editor"] .form-section .field,
  body[data-page="article-editor"] .form-section .field > *,
  body[data-page="article-editor"] .section-title,
  body[data-page="article-editor"] #editor-container,
  body[data-page="article-editor"] .ql-toolbar.ql-snow,
  body[data-page="article-editor"] .ql-container.ql-snow {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .admin-header {
    padding-inline: 16px;
  }

  body[data-page="dashboard"] .page-title {
    align-items: stretch;
  }

  body[data-page="dashboard"] .page-title .actions {
    justify-content: stretch;
  }

  body[data-page="dashboard"] .page-title .actions .btn {
    flex: 1 1 220px;
  }

  .category-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .category-pagination-controls {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .page-title .btn,
  .page-title .actions,
  .page-title .actions .btn,
  body[data-page="dashboard"] .page-title .actions .btn {
    width: 100%;
    max-width: none;
  }

  body[data-page="dashboard"] .shortcut-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="dashboard"] .shortcut-btn {
    min-height: 92px;
    padding: 12px 8px;
  }

  /* Grid.js article rows become cards instead of forcing a 980px table. */
  body[data-page="articles"] #article-table .gridjs-wrapper {
    overflow: visible !important;
  }

  body[data-page="articles"] #article-table .gridjs-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body[data-page="articles"] #article-table .gridjs-thead {
    display: none !important;
  }

  body[data-page="articles"] #article-table .gridjs-tbody {
    display: grid !important;
    width: 100% !important;
    gap: 14px !important;
  }

  body[data-page="articles"] #article-table .gridjs-tr {
    display: grid !important;
    width: 100% !important;
    gap: 10px !important;
    padding: 14px !important;
    border: 1px solid var(--mgmt-border, #d8e0ec) !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .05) !important;
  }

  body[data-page="articles"] #article-table .gridjs-td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  body[data-page="articles"] #article-table .gridjs-td::before {
    display: block;
    margin-bottom: 4px;
    color: #64748b;
    content: "";
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  body[data-page="articles"] #article-table .gridjs-td:nth-child(1)::before { content: "Tiêu đề"; }
  body[data-page="articles"] #article-table .gridjs-td:nth-child(2)::before { content: "Thời gian tạo"; }
  body[data-page="articles"] #article-table .gridjs-td:nth-child(3)::before { content: "Trạng thái"; }
  body[data-page="articles"] #article-table .gridjs-td:nth-child(4)::before { content: "Xuất bản"; }
  body[data-page="articles"] #article-table .gridjs-td:nth-child(5)::before { content: "Lượt xem"; }
  body[data-page="articles"] #article-table .gridjs-td:nth-child(6)::before { content: "Thao tác"; }

  body[data-page="articles"] #article-table .gridjs-td:first-child {
    padding-bottom: 8px !important;
    border-bottom: 1px dashed #e2e8f0 !important;
  }

  body[data-page="articles"] #article-table .article-row-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 8px !important;
  }

  body[data-page="articles"] #article-table .article-row-actions .btn {
    width: 100%;
    min-width: 0 !important;
    justify-content: center;
  }

  body[data-page="articles"] #article-table .gridjs-footer {
    padding-inline: 0 !important;
  }

  body[data-page="categories"] .category-pagination-summary {
    line-height: 1.4;
  }

  body[data-page="categories"] .category-pagination-controls {
    width: 100%;
  }

  body[data-page="categories"] .category-pagination-btn {
    flex: 0 0 auto;
  }
}

@media (max-width: 480px) {
  .admin-header {
    padding-inline: 8px;
  }

  .admin-header-left,
  .admin-header-right {
    gap: 8px;
  }

  body[data-page="dashboard"] .shortcut-grid {
    grid-template-columns: 1fr;
  }

  .category-pagination-controls {
    justify-content: space-between;
  }

  .category-pagination-btn {
    min-width: 38px;
  }
}

/* Page editor: keep long item actions and the five toolbar buttons usable on phones. */
@media (max-width: 700px) {
  body[data-page="page-editor"] .page-title-left { width: 100%; }
  body[data-page="page-editor"] .page-title .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  body[data-page="page-editor"] .page-title .actions .btn { min-width: 0; padding-inline: 10px; }
  body[data-page="page-editor"] .slot-card-head { padding: 16px; }
  body[data-page="page-editor"] .slot-items { padding: 12px; }
  body[data-page="page-editor"] .slot-item { display: grid; grid-template-columns: 28px 48px minmax(0, 1fr); gap: 10px; padding: 10px; }
  body[data-page="page-editor"] .slot-item-copy { flex-basis: auto; }
  body[data-page="page-editor"] .slot-item--no-thumb .slot-item-copy { grid-column: 2 / -1; }
  body[data-page="page-editor"] .slot-item .actions { display: flex; grid-column: 1 / -1; width: auto; flex-wrap: wrap; padding-left: 0; }
  body[data-page="page-editor"] .slot-item .actions .btn { flex: 1 1 96px; min-width: 0; }
}

@media (max-width: 420px) {
  body[data-page="page-editor"] .page-title .actions { grid-template-columns: 1fr; }
  body[data-page="page-editor"] .slot-item { grid-template-columns: 28px minmax(0, 1fr); }
  body[data-page="page-editor"] .slot-item-thumb,
  body[data-page="page-editor"] .slot-item-thumb-placeholder { grid-column: 2; grid-row: 2; }
  body[data-page="page-editor"] .slot-item-copy { grid-column: 2; }
  body[data-page="page-editor"] .dialog-head { padding: 14px 16px; }
}

body[data-page="page-editor"] .slot-item-copy strong,
body[data-page="page-editor"] .slot-item-copy small {
  overflow-wrap: anywhere;
}

/* The Gallery editor keeps images and videos visually separated without changing their saved order. */
body[data-page="page-editor"] .slot-item--gallery-media[data-gallery-group-start] { position: relative; margin-top: 32px; }
body[data-page="page-editor"] .slot-item--gallery-media[data-gallery-group-start]::before { position: absolute; top: -23px; left: 0; color: var(--primary, #1a2b6d); content: attr(data-gallery-group-label); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
body[data-page="page-editor"] .gallery-admin-tabs { display: flex; gap: 8px; padding: 18px 18px 12px; border-top: 1px solid var(--border); }
body[data-page="page-editor"] .gallery-admin-tab { min-height: 38px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
body[data-page="page-editor"] .gallery-admin-tab.active { border-color: var(--primary); background: var(--primary); color: #fff; }
body[data-page="page-editor"] .slot-items[data-gallery-active-type="image"] [data-gallery-media-type="youtube"],
body[data-page="page-editor"] .slot-items[data-gallery-active-type="youtube"] [data-gallery-media-type="image"] { display: none; }
body[data-page="page-editor"] .slot-items[data-gallery-active-type] { padding-top: 38px; }
body[data-page="page-editor"] .slot-items[data-gallery-active-type="image"] [data-gallery-media-type="image"]:first-child,
body[data-page="page-editor"] .slot-items[data-gallery-active-type="youtube"] [data-gallery-media-type="youtube"]:first-child { margin-top: 0; }

@media (max-width: 480px) {
  body[data-page="page-editor"] .gallery-admin-tabs { padding-inline: 12px; }
  body[data-page="page-editor"] .gallery-admin-tab { flex: 1; min-width: 0; }
}

/* ============================================================================
   Final responsive pass
   Keep this block last: several management pages have legacy table rules and
   inline controls, so the viewport-specific contract belongs at the end.
   ============================================================================ */
.admin-main,
.admin-content,
.page-title > *,
.surface,
.widget,
.form-section,
.table-card,
.category-toolbar,
.filters,
.membership-request-card,
.slot-card {
  min-width: 0;
  max-width: 100%;
}

.admin-main {
  box-sizing: border-box;
}

.page-title h1,
.page-title p,
.widget-header,
.slot-card-head,
.settings-card-heading {
  overflow-wrap: anywhere;
}

.status-chart-wrap {
  display: flex;
  width: 100%;
  max-width: 340px;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 0 auto;
  padding: 12px 0;
}

.status-chart-visual {
  position: relative;
  width: 150px;
  height: 150px;
  flex: 0 0 150px;
}

.status-chart-visual canvas {
  display: block;
  max-width: 100%;
}

.status-chart-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.status-chart-center strong {
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
}

.status-chart-center span {
  color: var(--muted);
  font-size: 11px;
}

.status-chart-wrap .chart-legend {
  min-width: 0;
  width: auto;
  flex: 1 1 130px;
}

@media (max-width: 900px) {
  .admin-header {
    min-height: 64px;
    height: auto;
    padding-block: 10px;
  }

  .admin-header-left {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }

  .admin-breadcrumb {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }

  .admin-breadcrumb .current {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .admin-header-right {
    flex: 0 0 auto;
    gap: 8px;
  }

  .admin-main {
    width: 100%;
    padding-bottom: 40px;
  }
}

@media (max-width: 760px) {
  .page-title {
    width: 100%;
  }

  .page-title .actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    gap: 8px;
  }

  .page-title .actions .btn,
  .page-title > .btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    flex: 0 0 auto !important;
    border-radius: 10px;
  }

  .status-chart-wrap {
    max-width: 280px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .status-chart-visual {
    align-self: center;
  }

  .status-chart-wrap .chart-legend {
    width: 100%;
    flex-basis: auto;
  }

  body[data-page="users"] .users-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page="users"] .users-toolbar .category-search-field,
  body[data-page="users"] .users-toolbar .category-status-filter-container,
  body[data-page="users"] .users-toolbar .users-count {
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }

  body[data-page="users"] .users-toolbar .ts-wrapper,
  body[data-page="users"] .users-toolbar select {
    width: 100% !important;
  }

  /* Grid.js management rows become self-contained cards on phones. */
  body[data-page="articles"] #article-table .gridjs-table,
  body[data-page="users"] #users-table .gridjs-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
  }

  body[data-page="users"] #users-table .gridjs-tbody .gridjs-td:nth-child(n) {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body[data-page="users"] #users-table .gridjs-td::before {
    display: block;
    margin-bottom: 4px;
    color: #64748b;
    content: "";
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  body[data-page="users"] #users-table .gridjs-td:nth-child(1)::before { content: "Người dùng"; }
  body[data-page="users"] #users-table .gridjs-td:nth-child(2)::before { content: "Vai trò"; }
  body[data-page="users"] #users-table .gridjs-td:nth-child(3)::before { content: "Trạng thái"; }
  body[data-page="users"] #users-table .gridjs-td:nth-child(4)::before { content: "Thao tác"; }

  body[data-page="users"] #users-table .gridjs-td:nth-child(n) {
    padding: 0 0 10px !important;
    border: 0 !important;
    white-space: normal !important;
  }

  body[data-page="users"] #users-table .gridjs-td:last-child {
    padding-top: 10px !important;
    border-top: 1px solid #edf2f7 !important;
  }

  body[data-page="users"] .role-badge span {
    display: inline !important;
  }

  body[data-page="users"] .user-row-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
  }

  body[data-page="users"] .user-row-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
    padding-inline: 8px !important;
    white-space: normal !important;
  }

  body[data-page="articles"] #article-table .gridjs-td {
    overflow-wrap: anywhere;
  }

  /* Keep every card-style data table readable and labelled. */
  body[data-page="dashboard"] #recent-articles .table-wrap,
  body[data-page="comments"] .table-wrap,
  body[data-page="contact-messages"] .contact-messages-table-wrap {
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-page="dashboard"] #recent-articles .data-table,
  body[data-page="comments"] .data-table,
  body[data-page="contact-messages"] .contact-messages-table {
    width: 100% !important;
    min-width: 0 !important;
  }

  body[data-page="dashboard"] #recent-articles .data-table td::before,
  body[data-page="comments"] .data-table td::before,
  body[data-page="contact-messages"] .contact-messages-table td::before {
    display: block;
    margin-bottom: 4px;
    color: #64748b;
    content: attr(data-label);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  body[data-page="dashboard"] #recent-articles .article-actions-cell .article-row-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
  }

  body[data-page="dashboard"] #recent-articles .article-row-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  body[data-page="comments"] .comment-mgmt-cell-actions {
    width: 100% !important;
    padding-top: 10px !important;
    border-top: 1px solid #edf2f7 !important;
  }

  body[data-page="comments"] .comment-mgmt-actions-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100% !important;
    min-width: 0 !important;
  }

  body[data-page="comments"] .comment-mgmt-actions-wrapper .btn {
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
  }

  body[data-page="contact-messages"] .contact-message-actions-cell {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-top: 10px !important;
    border-top: 1px solid #edf2f7 !important;
    white-space: normal !important;
  }

  body[data-page="contact-messages"] .contact-message-actions-cell .contact-message-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100% !important;
    min-width: 0 !important;
  }

  body[data-page="contact-messages"] .contact-message-actions-cell .contact-message-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  body[data-page="contact-messages"] .contact-message-copy,
  body[data-page="contact-messages"] .contact-message-email,
  body[data-page="contact-messages"] .contact-message-time {
    overflow-wrap: anywhere;
  }

  body[data-page="page-editor"] .slot-card-head,
  body[data-page="page-editor"] .slot-card-head > *,
  body[data-page="profile"] .settings-card-heading > * {
    min-width: 0;
    max-width: 100%;
  }

  body[data-page="page-editor"] .slot-card-head p,
  body[data-page="profile"] .settings-card-heading p {
    overflow-wrap: anywhere;
  }

  body[data-page="page-editor"] .gallery-admin-tabs {
    flex-wrap: wrap;
  }

  body[data-page="page-editor"] .gallery-admin-tab {
    min-width: 0;
  }

  body[data-page="article-editor"] .ql-toolbar.ql-snow {
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }

  body[data-page="article-editor"] .ql-toolbar .ql-formats {
    display: inline-flex;
    max-width: none;
    vertical-align: middle;
  }

  body[data-page="article-editor"] #cropper-modal {
    padding: 12px !important;
  }

  body[data-page="article-editor"] #cropper-modal .cropper-dialog {
    max-height: calc(100vh - 24px);
    overflow: auto;
    padding: 16px !important;
  }

  body[data-page="article-editor"] #cropper-modal .cropper-dialog > div:last-child {
    flex-wrap: wrap;
  }

  body[data-page="article-editor"] #cropper-modal .cropper-dialog > div:last-child .btn {
    flex: 1 1 120px;
  }

  .faq-order-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .document-upload-row {
    flex-wrap: wrap !important;
    align-items: stretch !important;
  }

  .document-upload-row #upload-pdf-btn {
    flex: 1 1 150px;
  }

  .document-upload-row #pdf-upload-status {
    flex: 1 1 100%;
  }

  .membership-request-card > footer {
    flex-wrap: wrap;
  }

  .membership-request-card > footer .btn {
    min-width: 0;
    flex: 1 1 140px;
  }
}

@media (min-width: 761px) and (max-width: 1440px) {
  /* The current users grid has four columns; legacy rules targeted an old
     seven-column grid and accidentally hid the role column. */
  body[data-page="users"] #users-table .gridjs-th:nth-child(n),
  body[data-page="users"] #users-table .gridjs-td:nth-child(n) {
    display: table-cell !important;
  }

  body[data-page="users"] #users-table .gridjs-th:nth-child(1) { width: 44% !important; }
  body[data-page="users"] #users-table .gridjs-th:nth-child(2) { width: 18% !important; }
  body[data-page="users"] #users-table .gridjs-th:nth-child(3) { width: 16% !important; }
  body[data-page="users"] #users-table .gridjs-th:nth-child(4) { width: 22% !important; }
}

@media (min-width: 761px) and (max-width: 900px) {
  /* Tablet widths are still too narrow for the action-heavy Grid.js tables;
     use the same card treatment as phones before the table can push the page. */
  body[data-page="articles"] #article-table .gridjs-wrapper,
  body[data-page="users"] #users-table .gridjs-wrapper {
    overflow: visible !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  body[data-page="articles"] #article-table .gridjs-table,
  body[data-page="users"] #users-table .gridjs-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body[data-page="articles"] #article-table .gridjs-thead,
  body[data-page="users"] #users-table .gridjs-thead {
    display: none !important;
  }

  body[data-page="articles"] #article-table .gridjs-tbody,
  body[data-page="users"] #users-table .gridjs-tbody {
    display: grid !important;
    width: 100% !important;
    gap: 14px !important;
  }

  body[data-page="articles"] #article-table .gridjs-tr,
  body[data-page="users"] #users-table .gridjs-tr {
    display: grid !important;
    width: 100% !important;
    gap: 10px !important;
    padding: 14px !important;
    border: 1px solid var(--mgmt-border, #d8e0ec) !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .05) !important;
  }

  body[data-page="articles"] #article-table .gridjs-td,
  body[data-page="users"] #users-table .gridjs-td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 0 10px !important;
    border: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  body[data-page="articles"] #article-table .gridjs-td::before,
  body[data-page="users"] #users-table .gridjs-td::before {
    display: block;
    margin-bottom: 4px;
    color: #64748b;
    content: "";
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  body[data-page="articles"] #article-table .gridjs-td:nth-child(1)::before { content: "Tiêu đề"; }
  body[data-page="articles"] #article-table .gridjs-td:nth-child(2)::before { content: "Thời gian tạo"; }
  body[data-page="articles"] #article-table .gridjs-td:nth-child(3)::before { content: "Trạng thái"; }
  body[data-page="articles"] #article-table .gridjs-td:nth-child(4)::before { content: "Xuất bản"; }
  body[data-page="articles"] #article-table .gridjs-td:nth-child(5)::before { content: "Lượt xem"; }
  body[data-page="articles"] #article-table .gridjs-td:nth-child(6)::before { content: "Thao tác"; }
  body[data-page="users"] #users-table .gridjs-td:nth-child(1)::before { content: "Người dùng"; }
  body[data-page="users"] #users-table .gridjs-td:nth-child(2)::before { content: "Vai trò"; }
  body[data-page="users"] #users-table .gridjs-td:nth-child(3)::before { content: "Trạng thái"; }
  body[data-page="users"] #users-table .gridjs-td:nth-child(4)::before { content: "Thao tác"; }

  body[data-page="articles"] #article-table .gridjs-td:first-child,
  body[data-page="users"] #users-table .gridjs-td:first-child {
    padding-bottom: 8px !important;
    border-bottom: 1px dashed #e2e8f0 !important;
  }

  body[data-page="articles"] #article-table .article-row-actions,
  body[data-page="users"] #users-table .user-row-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
  }

  body[data-page="articles"] #article-table .article-row-actions .btn,
  body[data-page="users"] #users-table .user-row-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center;
    white-space: normal !important;
  }

  body[data-page="users"] .role-badge span {
    display: inline !important;
  }
}

@media (max-width: 480px) {
  .admin-main {
    padding-inline: 12px;
  }

  .admin-header {
    padding-inline: 8px;
  }

  .admin-header-right .admin-logout-btn {
    min-width: 44px;
    padding-inline: 10px;
  }

  .admin-header-left,
  .admin-header-right {
    gap: 8px;
  }

  .status-chart-wrap {
    max-width: 250px;
  }

  .status-chart-visual {
    width: 136px;
    height: 136px;
    flex-basis: 136px;
  }

  body[data-page="contact-messages"] .contact-message-actions-cell .contact-message-actions,
  body[data-page="comments"] .comment-mgmt-actions-wrapper {
    grid-template-columns: minmax(0, 1fr);
  }
}