/* admin.css — admin CMS (S12a/S12b/S12.1/S12.2). Requires base.css + commerce.css. */
/* ==================== Admin (Session 12a) ==================== */

/* ---- Demo banner (fixed below navbar) ---- */
.admin-banner-demo {
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  z-index: 40;
  background-color: rgba(80, 178, 192, 0.12);
  border-bottom: 1px solid rgba(80, 178, 192, 0.35);
  color: #201E1F;
  padding: 10px 20px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.admin-banner-demo .banner-msg {
  flex: 1 1 auto;
  max-width: 980px;
}

.admin-banner-demo .banner-close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  background: rgba(80, 178, 192, 0.18);
  color: #201E1F;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: background-color 0.2s ease;
}

.admin-banner-demo .banner-close:hover {
  background: rgba(80, 178, 192, 0.32);
}

.admin-banner-demo.hidden {
  display: none;
}

/* Body padding adjust khi banner active — main content cần đẩy xuống */
body.has-admin-banner {
  padding-top: 44px;
}

@media (max-width: 640px) {
  .admin-banner-demo {
    font-size: 12px;
    padding: 8px 14px;
  }
  body.has-admin-banner {
    padding-top: 56px;
  }
}

/* ---- Shell layout (reuses account-shell pattern) ---- */
.admin-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 1024px) {
  .admin-shell {
    flex-direction: row;
    gap: 32px;
    align-items: flex-start;
  }
}

/* ---- Sidebar ---- */
.admin-sidebar {
  position: sticky;
  top: 132px;
}

@media (max-width: 1023px) {
  .admin-sidebar {
    position: relative;
    top: 0;
    width: 100%;
  }
}

/* ---- Sidebar nav (extends .account-nav pattern) ---- */
.admin-nav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.admin-nav::-webkit-scrollbar { display: none; }

@media (min-width: 1024px) {
  .admin-nav {
    flex-direction: column;
    overflow-x: visible;
  }
}

.admin-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 500;
  font-size: 14px;
  color: #4A4548;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  text-align: left;
  font-family: inherit;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.admin-nav-item:hover {
  background-color: rgba(255, 64, 0, 0.06);
  color: #201E1F;
}

@media (min-width: 1024px) {
  .admin-nav-item.is-active {
    background-color: rgba(255, 64, 0, 0.1);
    color: #FF4000;
    box-shadow: inset 3px 0 0 #FF4000;
    font-weight: 600;
  }
}

@media (max-width: 1023px) {
  .admin-nav-item.is-active {
    background-color: #FF4000;
    color: #FEEFDD;
    font-weight: 600;
  }
}

/* Disabled state (for S12b tabs) */
.admin-nav-item.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.admin-nav-item .item-soon-badge {
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(80, 178, 192, 0.18);
  color: #50B2C0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---- Sidebar profile mini ---- */
.admin-profile-mini {
  background: #FFFFFF;
  border: 1px solid #F8DBC0;
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-profile-mini .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #FAAA8D;
  flex-shrink: 0;
}

.admin-profile-mini .info {
  min-width: 0;
  flex: 1;
}

.admin-profile-mini .name {
  font-weight: 600;
  font-size: 14px;
  color: #201E1F;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Tab content ---- */
.admin-tab-content[hidden] { display: none; }

/* ---- Role badges ---- */
.admin-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid;
  letter-spacing: 0.02em;
}

.admin-role-badge.is-admin {
  background-color: rgba(255, 64, 0, 0.12);
  color: #FF4000;
  border-color: rgba(255, 64, 0, 0.3);
}

.admin-role-badge.is-editor {
  background-color: rgba(80, 178, 192, 0.12);
  color: #2d8e9c;
  border-color: rgba(80, 178, 192, 0.35);
}

.admin-role-badge.is-viewer {
  background-color: rgba(142, 133, 136, 0.1);
  color: #4A4548;
  border-color: rgba(142, 133, 136, 0.25);
}

/* S12.1: 4-role refactor — viewer split into thành viên (peach) + học viên (success green) */
.admin-role-badge.is-thanh-vien {
  background-color: rgba(250, 170, 141, 0.18);
  color: #c25e3c;
  border-color: rgba(250, 170, 141, 0.4);
}

.admin-role-badge.is-hoc-vien {
  background-color: rgba(91, 168, 90, 0.14);
  color: #4d9b4d;
  border-color: rgba(91, 168, 90, 0.3);
}

/* ---- Status badges ---- */
.admin-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.admin-status-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.admin-status-badge.is-active {
  background-color: rgba(91, 168, 90, 0.14);
  color: #4d9b4d;
}

.admin-status-badge.is-suspended {
  background-color: rgba(255, 64, 0, 0.12);
  color: #FF4000;
}

/* ---- Stat card (Dashboard) ---- */
.admin-stat-card {
  background: #FFFFFF;
  border: 1px solid #F8DBC0;
  border-radius: 14px;
  padding: 12px 15px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.admin-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -18px rgba(250, 170, 141, 0.4);
}

.admin-stat-card .icon-tile {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 14px;
}

.admin-stat-card .stat-number {
  font-family: 'Be Vietnam Pro', system-ui, sans-serif;
  font-weight: 800;
  font-size: 32px;
  color: #201E1F;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.admin-stat-card .stat-label {
  font-size: 13px;
  color: #8E8588;
  margin-top: 4px;
  font-weight: 500;
}

.admin-stat-card .stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(91, 168, 90, 0.14);
  color: #4d9b4d;
}

.admin-stat-card .stat-trend.is-warn {
  background: rgba(255, 64, 0, 0.12);
  color: #FF4000;
}

/* ---- Data table ---- */
.admin-data-table-wrap {
  background: #FFFFFF;
  border: 1px solid #F8DBC0;
  border-radius: 20px;
  overflow: hidden;
}

.admin-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.admin-data-table thead th {
  background: #FCE0CE;
  color: #4A4548;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #F2C5A5;
  white-space: nowrap;
}

.admin-data-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid #F8DBC0;
  vertical-align: middle;
}

.admin-data-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-data-table tbody tr {
  transition: background-color 0.15s ease;
}

.admin-data-table tbody tr:hover {
  background-color: #FEEFDD;
}

.admin-data-table .user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-data-table .user-cell img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid #F2C5A5;
  flex-shrink: 0;
}

.admin-data-table .user-cell .name {
  font-weight: 600;
  color: #201E1F;
}

.admin-data-table .actions-cell {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

/* Mobile: convert table → card stack dưới 768px */
@media (max-width: 767px) {
  .admin-data-table thead {
    display: none;
  }
  .admin-data-table,
  .admin-data-table tbody,
  .admin-data-table tr,
  .admin-data-table td {
    display: block;
    width: 100%;
  }
  .admin-data-table tr {
    background: #FFFFFF;
    border: 1px solid #F8DBC0;
    border-radius: 16px;
    margin-bottom: 12px;
    padding: 14px;
  }
  .admin-data-table tbody td {
    border: 0;
    padding: 6px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }
  .admin-data-table tbody td::before {
    content: attr(data-label);
    font-size: 11px;
    color: #8E8588;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
  }
  .admin-data-table tbody td.user-cell-td::before { display: none; }
  .admin-data-table .actions-cell { justify-content: flex-end; }
  .admin-data-table-wrap {
    background: transparent;
    border: 0;
    overflow: visible;
  }
}

/* ---- Action button (small ghost) ---- */
.admin-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid #F2C5A5;
  background: #FFFFFF;
  color: #4A4548;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.admin-action-btn:hover {
  background: #FEEFDD;
  border-color: #FF4000;
  color: #FF4000;
}

.admin-action-btn.is-danger:hover {
  background: rgba(255, 64, 0, 0.08);
  color: #FF4000;
}

/* Hiện/Ẩn toggle khi đang bật trạng thái "ẩn" — nổi xanh báo "click để hiện" */
.admin-action-btn.is-success {
  background: #E8F7E6;
  border-color: #5BA85A;
  color: #2F7A2E;
}
.admin-action-btn.is-success:hover {
  background: #D6EFD3;
  border-color: #2F7A2E;
  color: #2F7A2E;
}

/* Card đang ẩn khỏi public — mờ + dải caution + cursor info */
.admin-catalog-card.is-inactive {
  opacity: 0.6;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 12px,
    rgba(255, 64, 0, 0.04) 12px,
    rgba(255, 64, 0, 0.04) 24px
  );
}
.admin-catalog-card.is-inactive:hover { opacity: 0.85; }

/* Inline status badge cạnh tên (Ẩn / Hết hàng) */
.admin-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.admin-status-badge.is-hidden {
  background: rgba(255, 64, 0, 0.12);
  color: #C53000;
  border: 1px solid rgba(255, 64, 0, 0.25);
}
.admin-status-badge.is-warn {
  background: rgba(250, 170, 141, 0.18);
  color: #8E5430;
  border: 1px solid rgba(250, 170, 141, 0.4);
}
.admin-status-badge.is-oos {
  background: rgba(255, 64, 0, 0.10);
  color: #C53000;
  border: 1px solid rgba(255, 64, 0, 0.3);
}

/* Card khi item Hết hàng — viền đỏ nhạt + gạch chéo nhẹ ở giá */
.admin-catalog-card.is-oos {
  border-color: rgba(255, 64, 0, 0.35);
}
.admin-catalog-card.is-oos .cc-price-sale,
.admin-catalog-card.is-oos .cc-price-original {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  opacity: 0.65;
}

/* Inline status select trên catalog card — pill đổi màu theo status */
.admin-status-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 6px 26px 6px 12px;
  border-radius: 999px;
  border: 1px solid #F2C5A5;
  background: #FFFFFF;
  color: #4A4548;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%234A4548' d='M5 6 0 0h10z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.admin-status-select:hover { border-color: #FF4000; }
.admin-status-select:focus-visible { outline: 2px solid #FF4000; outline-offset: 1px; }
.admin-status-select.is-active {
  background-color: #E8F7E6;
  border-color: #5BA85A;
  color: #2F7A2E;
}
.admin-status-select.is-inactive {
  background-color: #FCE0CE;
  border-color: rgba(255, 64, 0, 0.35);
  color: #C53000;
}
.admin-status-select.is-out-of-stock {
  background-color: #FFE5DC;
  border-color: rgba(255, 64, 0, 0.5);
  color: #C53000;
}

/* ⭐ Featured toggle — star button cạnh status select */
.admin-featured-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid #F2C5A5;
  background: #FFFFFF;
  color: #8E8588;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  line-height: 1;
}
.admin-featured-toggle:hover {
  border-color: #FF4000;
  color: #FF4000;
  transform: scale(1.08);
}
.admin-featured-toggle.is-on {
  background: linear-gradient(135deg, #FFB930, #FF4000);
  color: #FFFFFF;
  border-color: #FF4000;
  box-shadow: 0 4px 12px -4px rgba(255, 64, 0, 0.45);
}
.admin-featured-toggle.is-on:hover {
  filter: brightness(1.1);
}
.admin-featured-toggle:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* Card khi item nổi bật — accent border + subtle glow để admin nhận diện nhanh */
.admin-catalog-card.is-featured {
  border-color: rgba(255, 64, 0, 0.4);
  box-shadow: 0 12px 24px -12px rgba(255, 64, 0, 0.18), 0 0 0 1px rgba(255, 185, 48, 0.25) inset;
  position: relative;
}
.admin-catalog-card.is-featured::before {
  content: "⭐ Nổi bật";
  position: absolute;
  top: -10px;
  right: 16px;
  background: linear-gradient(135deg, #FFB930, #FF4000);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  box-shadow: 0 4px 10px -3px rgba(255, 64, 0, 0.4);
  z-index: 1;
}

/* ---- Filter pills (reused from .order-filter pattern) ---- */
.admin-filter {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.admin-filter button {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #F2C5A5;
  background: #FFFFFF;
  color: #4A4548;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.admin-filter button:hover {
  border-color: #FF4000;
  color: #FF4000;
}

.admin-filter button.is-active {
  background: #FF4000;
  border-color: #FF4000;
  color: #FEEFDD;
}

/* ---- Search input ---- */
.admin-search {
  width: 100%;
  max-width: 320px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid #F2C5A5;
  background: #FFFFFF;
  font-size: 14px;
  font-family: inherit;
  color: #201E1F;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-search:focus {
  outline: none;
  border-color: #FF4000;
  box-shadow: 0 0 0 3px rgba(255, 64, 0, 0.15);
}

/* ---- Activity feed (Dashboard recent activity) ---- */
.admin-activity-list {
  display: flex;
  flex-direction: column;
}

.admin-activity-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #F8DBC0;
}

.admin-activity-item:last-child {
  border-bottom: 0;
}

.admin-activity-item .icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(80, 178, 192, 0.12);
  color: #50B2C0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.admin-activity-item .body {
  flex: 1;
  min-width: 0;
}

.admin-activity-item .body .actor {
  font-weight: 600;
  color: #201E1F;
  font-size: 13px;
}

.admin-activity-item .body .desc {
  color: #4A4548;
  font-size: 13px;
}

.admin-activity-item .body .time {
  color: #8E8588;
  font-size: 11px;
  margin-top: 2px;
}

/* ---- Quick action card ---- */
.admin-quick-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid #F2C5A5;
  background: #FFFFFF;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: inherit;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.admin-quick-action:hover {
  transform: translateY(-2px);
  border-color: #FF4000;
  box-shadow: 0 12px 24px -12px rgba(255, 64, 0, 0.25);
}

.admin-quick-action .qa-icon {
  font-size: 22px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 64, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.admin-quick-action .qa-title {
  font-weight: 600;
  font-size: 13px;
  color: #201E1F;
}

.admin-quick-action .qa-desc {
  font-size: 11px;
  color: #8E8588;
  margin-top: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .admin-stat-card,
  .admin-quick-action,
  .admin-action-btn,
  .admin-filter button,
  .admin-search {
    transition: none !important;
  }
  .admin-stat-card:hover,
  .admin-quick-action:hover {
    transform: none !important;
  }
}

/* ==================== Admin (Session 12b) ==================== */

/* ---- Catalog sub-tabs (underline pills, smaller than main admin-nav) ---- */
.admin-catalog-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid #F8DBC0;
  margin-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: none;
}

.admin-catalog-tabs::-webkit-scrollbar { display: none; }

.admin-catalog-tabs button {
  padding: 10px 16px;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #4A4548;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.admin-catalog-tabs button:hover {
  color: #FF4000;
}

.admin-catalog-tabs button.is-active {
  color: #FF4000;
  border-bottom-color: #FF4000;
  font-weight: 600;
}

/* ---- Catalog item card (table-like row) ---- */
.admin-catalog-card {
  background: #FFFFFF;
  border: 1px solid #F8DBC0;
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-catalog-card:hover {
  border-color: #F2C5A5;
  box-shadow: 0 8px 18px -10px rgba(250, 170, 141, 0.45);
}

.admin-catalog-card .cc-emoji {
  font-size: 28px;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 64, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.admin-catalog-card .cc-info {
  flex: 1;
  min-width: 0;
}

.admin-catalog-card .cc-name {
  font-weight: 600;
  font-size: 15px;
  color: #201E1F;
  margin-bottom: 4px;
}

.admin-catalog-card .cc-meta {
  font-size: 12px;
  color: #8E8588;
}

.admin-catalog-card .cc-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.admin-catalog-card .cc-price-original {
  font-size: 11px;
  color: #8E8588;
  text-decoration: line-through;
}

.admin-catalog-card .cc-price-sale {
  font-weight: 700;
  font-size: 15px;
  color: #FF4000;
  font-family: 'Be Vietnam Pro', system-ui, sans-serif;
}

.admin-catalog-card .cc-price-from {
  font-size: 11px;
  color: #8E8588;
  margin-right: 4px;
}

@media (max-width: 640px) {
  .admin-catalog-card {
    flex-wrap: wrap;
  }
  .admin-catalog-card .cc-price {
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
  }
}

/* ---- Inline price input ---- */
.admin-inline-price {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.admin-inline-price input {
  width: 110px;
  padding: 4px 8px;
  border: 1px solid #FF4000;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #FF4000;
  background: #FFFFFF;
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 64, 0, 0.12);
  text-align: right;
}

.admin-inline-price input:focus {
  border-color: #FF4000;
}

.admin-inline-edit-trigger {
  cursor: pointer;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.2s ease;
}

.admin-inline-edit-trigger:hover {
  border-bottom-color: #FF4000;
}

/* ---- Blog editor modal (extends confirm-modal) ---- */
.admin-blog-editor {
  width: 100%;
  max-width: 720px;
  max-height: 88vh;
  overflow-y: auto;
}

.admin-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 640px) {
  .admin-form-grid.cols-2 {
    grid-template-columns: 1fr 1fr;
  }
}

.admin-form-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #4A4548;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-form-field input[type="text"],
.admin-form-field input[type="number"],
.admin-form-field select,
.admin-form-field textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #F2C5A5;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  color: #201E1F;
  background: #FFFFFF;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-form-field input:focus,
.admin-form-field select:focus,
.admin-form-field textarea:focus {
  outline: none;
  border-color: #FF4000;
  box-shadow: 0 0 0 3px rgba(255, 64, 0, 0.15);
}

.admin-form-field textarea {
  min-height: 120px;
  resize: vertical;
  font-family: inherit;
}

.admin-form-field .field-help {
  font-size: 11px;
  color: #8E8588;
  margin-top: 4px;
}

.admin-form-field.has-error input,
.admin-form-field.has-error textarea {
  border-color: #FF4000;
}

/* ---- Settings section ---- */
.admin-settings-section {
  background: #FFFFFF;
  border: 1px solid #F8DBC0;
  border-radius: 20px;
  padding: 22px;
  margin-bottom: 16px;
}

.admin-settings-section .section-title {
  font-family: 'Be Vietnam Pro', system-ui, sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #201E1F;
  margin-bottom: 4px;
}

.admin-settings-section .section-desc {
  font-size: 13px;
  color: #8E8588;
  margin-bottom: 18px;
}

.admin-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #F8DBC0;
}

.admin-toggle-row:last-child {
  border-bottom: 0;
}

.admin-toggle-row .row-label {
  font-weight: 500;
  color: #201E1F;
  font-size: 14px;
}

.admin-toggle-row .row-desc {
  font-size: 12px;
  color: #8E8588;
  margin-top: 2px;
}

/* ---- Blog list item ---- */
.admin-blog-item {
  background: #FFFFFF;
  border: 1px solid #F8DBC0;
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}

.admin-blog-item .bi-emoji {
  font-size: 24px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(80, 178, 192, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.admin-blog-item .bi-info {
  flex: 1;
  min-width: 0;
}

.admin-blog-item .bi-title {
  font-weight: 600;
  font-size: 14px;
  color: #201E1F;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-blog-item .bi-meta {
  font-size: 11px;
  color: #8E8588;
  display: flex;
  gap: 10px;
  align-items: center;
}

.admin-blog-item .bi-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.admin-blog-item .is-custom-tag {
  background: rgba(80, 178, 192, 0.15);
  color: #2d8e9c;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
}

@media (max-width: 640px) {
  .admin-blog-item {
    flex-wrap: wrap;
  }
  .admin-blog-item .bi-info {
    min-width: 60%;
  }
  .admin-blog-item .bi-actions {
    width: 100%;
    justify-content: flex-end;
    margin-top: 6px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .admin-catalog-card,
  .admin-catalog-tabs button,
  .admin-form-field input,
  .admin-form-field textarea,
  .admin-form-field select {
    transition: none !important;
  }
}


/* ---- Blog typography (S12.1) — duplicated from blog.css: admin editor preview uses .blog-justify ---- */
/* ==================== Blog typography (S12.1 — admin auto-format text) ==================== */
/* Apply to <p> wraps generated by plainTextToBlogHTML(). Render trong post-detail-modal
   của blog.html cũng như preview admin. Override post-detail-content p với justify. */
.blog-justify {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  line-height: 1.75;
  font-size: 15px;
  color: #4A4548;
  margin-bottom: 14px;
}

.blog-justify:last-child { margin-bottom: 0; }

.blog-justify strong {
  color: #201E1F;
  font-weight: 700;
}

.blog-justify em {
  color: #8E8588;
  font-style: italic;
}

/* Mobile: bỏ justify để tránh khoảng trắng quá lớn giữa từ */
@media (max-width: 640px) {
  .blog-justify {
    text-align: left;
    hyphens: none;
  }
}


/* ==================== Admin catalog actions (S12.1 — Sửa/Xóa per item) ==================== */
.admin-catalog-actions {
  display: flex;
  gap: 6px;
  margin-left: 12px;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .admin-catalog-card .admin-catalog-actions {
    width: 100%;
    margin-left: 0;
    margin-top: 8px;
    justify-content: flex-end;
  }
}

/* "Thêm mới" button row */
.admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.admin-toolbar .toolbar-info {
  font-size: 13px;
  color: #8E8588;
}

/* ==================== Settings: Theme picker (S12.1) ==================== */
.admin-color-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 640px) {
  .admin-color-grid { grid-template-columns: 1fr; }
}

.admin-color-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #4A4548;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.color-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.color-input-row input[type="color"] {
  width: 44px;
  height: 40px;
  border: 1px solid #F2C5A5;
  border-radius: 10px;
  background: #FFFFFF;
  cursor: pointer;
  padding: 2px;
  flex-shrink: 0;
}

.color-input-row input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid #F2C5A5;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  background: #FFFFFF;
  color: #201E1F;
}

.color-input-row input[type="text"]:focus {
  outline: none;
  border-color: #FF4000;
  box-shadow: 0 0 0 3px rgba(255, 64, 0, 0.15);
}

.color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #F2C5A5;
  flex-shrink: 0;
  background: #FFFFFF;
}

/* ==================== Settings: Image fields with preview (S12.1) ==================== */
.admin-image-field {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.admin-image-field .admin-form-field {
  flex: 1;
  min-width: 0;
}

.admin-image-field .image-preview {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  border: 1px dashed #F2C5A5;
  background: #FCE0CE;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #8E8588;
}

.admin-image-field .image-preview.has-image {
  border-style: solid;
  background-color: #FFFFFF;
}

.admin-image-field .image-preview::before {
  content: '🖼️';
  opacity: 0.4;
}

.admin-image-field .image-preview.has-image::before { content: ''; }

@media (max-width: 480px) {
  .admin-image-field {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-image-field .image-preview {
    width: 100%;
    height: 80px;
  }
}


/* ==================== Course CMS (S12.2) ==================== */
.admin-course-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #4A4548;
  cursor: pointer;
  padding: 6px 0;
  margin-bottom: 10px;
}

.admin-course-detail-back:hover { color: #FF4000; }

/* Course summary card (detail header) */
.admin-course-summary {
  background: linear-gradient(135deg, rgba(255, 64, 0, 0.06), rgba(80, 178, 192, 0.04));
  border: 1px solid #F2C5A5;
  border-radius: 24px;
  padding: 22px;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

.admin-course-summary .summary-emoji {
  font-size: 40px;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: #FFFFFF;
  border: 1px solid #F2C5A5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.admin-course-summary .summary-info {
  flex: 1;
  min-width: 240px;
}

.admin-course-summary .summary-name {
  font-family: 'Be Vietnam Pro', system-ui, sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: #201E1F;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

.admin-course-summary .summary-meta {
  font-size: 13px;
  color: #4A4548;
  margin-bottom: 8px;
}

.admin-course-summary .summary-desc {
  font-size: 13px;
  color: #4A4548;
  line-height: 1.55;
}

.admin-course-summary .summary-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .admin-course-summary .summary-actions {
    flex-direction: row;
    width: 100%;
  }
}

/* Modules wrapper */
.admin-course-modules {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.admin-module-card {
  background: #FFFFFF;
  border: 1px solid #F8DBC0;
  border-radius: 18px;
  overflow: hidden;
}

.admin-module-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: #FCE0CE;
  border-bottom: 1px solid #F2C5A5;
}

.admin-module-header .module-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #FF4000;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 64, 0, 0.12);
}

.admin-module-header .module-name {
  font-weight: 700;
  font-size: 15px;
  color: #201E1F;
  flex: 1;
  min-width: 0;
}

.admin-module-header input.module-name-input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid #FF4000;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #201E1F;
  background: #FFFFFF;
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 64, 0, 0.12);
}

.admin-module-header .module-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.admin-module-lessons {
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-lesson-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #F8DBC0;
  border-radius: 12px;
  background: #FEEFDD;
}

.admin-lesson-row .lesson-num {
  font-weight: 700;
  font-size: 13px;
  color: #FF4000;
  width: 24px;
  flex-shrink: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.admin-lesson-row .lesson-info {
  flex: 1;
  min-width: 0;
}

.admin-lesson-row .lesson-name {
  font-weight: 600;
  font-size: 14px;
  color: #201E1F;
  margin-bottom: 2px;
}

.admin-lesson-row .lesson-duration {
  font-size: 11px;
  color: #8E8588;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.admin-lesson-row .lesson-content-snippet {
  font-size: 12px;
  color: #4A4548;
  margin-top: 4px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.admin-lesson-row .lesson-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .admin-lesson-row {
    flex-wrap: wrap;
  }
  .admin-lesson-row .lesson-actions {
    flex-direction: row;
    width: 100%;
  }
}

/* Attachments chips */
.admin-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.admin-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #FFFFFF;
  border: 1px solid #F2C5A5;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 11px;
  color: #4A4548;
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.admin-attachment-chip:hover {
  border-color: #FF4000;
  color: #FF4000;
}

.admin-attachment-chip .chip-remove {
  background: transparent;
  border: 0;
  color: #8E8588;
  cursor: pointer;
  font-size: 12px;
  padding: 0 0 0 2px;
  line-height: 1;
}

.admin-attachment-chip .chip-remove:hover { color: #FF4000; }

.admin-attachment-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px dashed #F2C5A5;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 11px;
  color: #4A4548;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.admin-attachment-add-btn:hover {
  border-color: #FF4000;
  color: #FF4000;
}

/* "Thêm bài học" + "Thêm danh mục" buttons */
.admin-course-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: 1px dashed #F2C5A5;
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #4A4548;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.admin-course-add-btn:hover {
  border-color: #FF4000;
  color: #FF4000;
  background: rgba(255, 64, 0, 0.04);
}

.admin-course-add-btn.is-module {
  margin-top: 8px;
  border-radius: 16px;
  padding: 14px 20px;
  font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .admin-attachment-chip,
  .admin-attachment-add-btn,
  .admin-course-add-btn,
  .admin-course-detail-back {
    transition: none !important;
  }
}


/* ---- Toggle switch (duplicated from account region: admin settings uses .toggle-switch) ---- */
/* ---- Toggle switch (iOS-style) ---- */
.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.toggle-switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.toggle-switch-track {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  background-color: #F2C5A5;
  border-radius: 9999px;
  transition: background-color 0.2s ease;
}

.toggle-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background-color: #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease;
}

.toggle-switch input[type="checkbox"]:checked ~ .toggle-switch-track {
  background-color: #FF4000;
}

.toggle-switch input[type="checkbox"]:checked ~ .toggle-switch-track .toggle-switch-thumb {
  transform: translateX(20px);
}

.toggle-switch input[type="checkbox"]:focus-visible ~ .toggle-switch-track {
  outline: 2px solid #FF4000;
  outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .order-card,
  .course-mini-card,
  .course-progress-bar > div,
  .toggle-switch-track,
  .toggle-switch-thumb {
    transition: none !important;
  }
}

/* ==================== Dashboard redesign (S13 — tinted stat cards + charts) ==================== */

/* ---- Stat card v2: tint variants + icon bubble ---- */
.admin-stat-card .stat-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.admin-stat-card .stat-kicker {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: #4A4548;
  padding-top: 2px;
}

.admin-stat-card .icon-bubble {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 3px 9px -3px rgba(32, 30, 31, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.admin-stat-card.tint-accent {
  background: rgba(255, 64, 0, 0.08);
  border-color: rgba(255, 64, 0, 0.18);
}

.admin-stat-card.tint-teal {
  background: rgba(80, 178, 192, 0.10);
  border-color: rgba(80, 178, 192, 0.24);
}

.admin-stat-card.tint-peach {
  background: rgba(250, 170, 141, 0.15);
  border-color: rgba(250, 170, 141, 0.38);
}

.admin-stat-card.tint-success {
  background: rgba(91, 168, 90, 0.10);
  border-color: rgba(91, 168, 90, 0.24);
}

.admin-stat-card .stat-trend.is-up {
  background: rgba(91, 168, 90, 0.14);
  color: #5BA85A;
}

.admin-stat-card .stat-trend.is-down {
  background: rgba(229, 72, 77, 0.12);
  color: #E5484D;
}

.admin-stat-card .stat-trend.is-muted {
  background: rgba(32, 30, 31, 0.06);
  color: #8E8588;
}

.admin-stat-card .stat-trend .vs {
  font-weight: 500;
  color: #8E8588;
}

/* Số dài (doanh thu VND) không tràn card */
.admin-stat-card .stat-number {
  font-size: 20px;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .admin-stat-card .stat-number {
    font-size: 20px;
  }
}

/* ---- Chart card ---- */
.admin-chart-card {
  background: #FFFFFF;
  border: 1px solid #F8DBC0;
  border-radius: 20px;
  padding: 18px;
  min-width: 0;
}

.chart-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.chart-card-sub {
  font-size: 12px;
  color: #8E8588;
  font-weight: 600;
  white-space: nowrap;
}

.chart-canvas-wrap {
  position: relative;
  width: 100%;
}

/* Heights cố định per chart (KHÔNG dùng h-* utility — tailwind.css compiled
   sẵn không chứa h-44/h-56/h-28 → thiếu height làm Chart.js resize loop) */
[data-chart-wrap="revenue"] { height: 200px; }
[data-chart-wrap="status"] { height: 160px; }
[data-chart-wrap="products"] { height: 180px; }
[data-chart-wrap="traffic"] { height: 96px; }

.chart-empty {
  padding: 28px 0;
  text-align: center;
  font-size: 13px;
  color: #8E8588;
}

/* ---- Donut (trạng thái đơn hàng) ---- */
.donut-wrap {
  max-width: 200px;
  margin: 0 auto;
}

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

.donut-total {
  font-family: 'Be Vietnam Pro', system-ui, sans-serif;
  font-weight: 800;
  font-size: 26px;
  color: #201E1F;
  line-height: 1.1;
}

.donut-caption {
  font-size: 11px;
  color: #8E8588;
}

/* ---- Custom legend rows (donut) ---- */
.chart-legend {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chart-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #4A4548;
}

.chart-legend-row .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.chart-legend-row .count {
  margin-left: auto;
  font-weight: 700;
  color: #201E1F;
}

/* ---- Top pages (traffic) progress rows ---- */
.page-bar-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page-bar-row .page-bar-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  margin-bottom: 5px;
}

.page-bar-row .path {
  color: #4A4548;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-bar-row .views {
  color: #8E8588;
  font-weight: 600;
  flex-shrink: 0;
}

.page-bar-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(32, 30, 31, 0.06);
  overflow: hidden;
}

.page-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #FF4000, #FAAA8D);
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Range selector (7/30/90 ngày) ---- */
.admin-range-select {
  appearance: none;
  -webkit-appearance: none;
  background: #FFFFFF url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238E8588' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1px solid #F2C5A5;
  border-radius: 999px;
  padding: 8px 34px 8px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #201E1F;
  cursor: pointer;
  min-height: 44px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-range-select:hover {
  border-color: #FF4000;
}

.admin-range-select:focus-visible {
  outline: 2px solid rgba(255, 64, 0, 0.45);
  outline-offset: 2px;
}

/* Reduced motion (dashboard redesign) */
@media (prefers-reduced-motion: reduce) {
  .page-bar-fill,
  .admin-range-select {
    transition: none !important;
  }
}

/* ==================== Redesign polish (khung nhất quán + accordion + sổ ra) ==================== */

/* ---- Task 8: Fix cứng 1 khung cho mọi tab content ---- */
.admin-tab-content {
  background: #FFFDFB;
  border: 1px solid #F3E1CE;
  border-radius: 24px;
  padding: 18px;
}
@media (min-width: 1024px) {
  .admin-tab-content { padding: 26px; }
}
/* [hidden] vẫn thắng nhờ specificity của attribute selector (đã khai báo ở trên) */

/* ---- Task 3: Nhóm nút thao tác trên order card ---- */
.admin-order-card .order-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* ---- Task 4: Thanh chip điều hướng nhóm Cài đặt (accordion) ---- */
.admin-settings-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.admin-settings-nav button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #F2C5A5;
  background: #FFFFFF;
  color: #4A4548;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  min-height: 40px;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.admin-settings-nav button:hover {
  border-color: #FF4000;
  color: #FF4000;
}
.admin-settings-nav button.is-active {
  background: #FF4000;
  border-color: #FF4000;
  color: #FFFFFF;
  box-shadow: 0 6px 16px -8px rgba(255, 64, 0, 0.6);
}
.admin-settings-section[hidden] { display: none; }

/* ---- Task 6: Sổ ra chi tiết dòng (Users) ---- */
.admin-data-table tbody tr.user-main-row { cursor: pointer; }
.user-row-caret {
  display: inline-block;
  color: #8E8588;
  font-size: 11px;
  margin-right: 2px;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.admin-data-table tbody tr.user-main-row.is-open .user-row-caret {
  transform: rotate(90deg);
  color: #FF4000;
}
.admin-data-table tbody tr.user-detail-row > td.user-detail-cell {
  background: #FEEFDD;
  padding: 14px 16px;
}
.user-detail-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 20px;
}
.user-detail-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.user-detail-item .dt {
  font-size: 11px;
  font-weight: 600;
  color: #8E8588;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.user-detail-item .dd {
  font-size: 13px;
  color: #201E1F;
  word-break: break-word;
}

@media (max-width: 767px) {
  /* Mobile: bảng chuyển sang card-stack → ô chi tiết render dạng block, ẩn nhãn ::before */
  .admin-data-table tbody td.user-detail-cell::before { display: none; }
  .admin-data-table tbody td.user-detail-cell {
    display: block;
    padding: 4px 2px;
  }
  .admin-data-table tbody tr.user-detail-row {
    margin-top: -8px;
    padding: 12px 14px;
  }
  .user-detail-panel { grid-template-columns: 1fr 1fr; }
  .admin-order-card .order-actions { width: 100%; }
}


/* ============================================================
   ADMIN = APP 1 MÀN HÌNH (desktop ≥1024): không cuộn TRANG,
   content cuộn nội bộ, bố cục ngang chuẩn. Mobile giữ stacked scroll.
   ============================================================ */
@media (min-width: 1024px) {
  body { overflow: hidden; }
  body.has-admin-banner { padding-top: 0 !important; }
  .admin-banner-demo { display: none; }               /* dọn không gian cho app */

  main { height: 100vh; padding-top: 82px !important; padding-bottom: 14px !important; overflow: hidden; box-sizing: border-box; }
  .admin-shell { height: 100%; max-width: 1600px; overflow: hidden; gap: 22px; align-items: stretch; }

  .admin-sidebar { height: 100%; overflow-y: auto; position: static; top: auto; padding-right: 4px; scrollbar-width: thin; }
  .admin-content { height: 100%; overflow-y: auto; overflow-x: hidden; min-width: 0; padding-right: 6px; scrollbar-width: thin; margin-top: 0 !important; }
  /* Không tràn lề/viền: mọi khung tab bó trong content, con flex/grid tự co */
  .admin-tab-content { max-width: 100%; box-sizing: border-box; }
  .admin-tab-content * { min-width: 0; }
  /* Danh sách dài KHÔNG tràn đáy: bảng/list cuộn nội bộ trong hộp bó chiều cao,
     header bảng dính đầu — thẻ luôn nằm gọn trong khung, không đẩy content ra ngoài. */
  .admin-tab-content .admin-data-table-wrap { max-width: 100%; max-height: calc(100vh - 440px); overflow-y: auto; }
  .admin-tab-content [data-blog-list] { max-height: calc(100vh - 400px); overflow-y: auto; }

  /* Flex-fill: tab danh sách = khung dọc, header/filter cố định trên, vùng danh
     sách LẤP ĐẦY chiều cao còn lại + cuộn nội bộ → không dư khoảng trống dưới đáy,
     không tràn. (voice giữ max-height ở trên vì bảng lồng trong view). */
  [data-tab-content="users"],
  [data-tab-content="orders"],
  [data-tab-content="blog"],
  [data-tab-content="community"] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }
  [data-tab-content="users"] > .admin-data-table-wrap,
  [data-tab-content="orders"] > [data-orders-list],
  [data-tab-content="blog"] > [data-blog-list],
  [data-tab-content="community"] > [data-community-list] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    max-height: none !important;
  }
  .admin-content::-webkit-scrollbar, .admin-sidebar::-webkit-scrollbar { width: 8px; }
  .admin-content::-webkit-scrollbar-thumb, .admin-sidebar::-webkit-scrollbar-thumb { background: #F2C5A5; border-radius: 4px; }

  .admin-tab-content { padding: 22px 24px; min-height: calc(100% - 0px); }
  /* Bảng dài cuộn nội bộ: header dính đầu */
  .admin-data-table thead th { position: sticky; top: 0; background: #FFFDFB; z-index: 2; box-shadow: 0 1px 0 #F2C5A5; }

  /* Nav sidebar chuyên nghiệp hơn: gọn, cách đều, active rõ */
  .admin-nav { gap: 3px; }
  .admin-nav-item { padding: 11px 14px; font-size: 13.5px; border-radius: 12px; }
  .admin-nav-item.is-active { box-shadow: inset 3px 0 0 #FF4000; }
}