@layer legacy {
.premium-admin-row { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-2); padding: var(--ui-space-1-5) var(--ui-space-2); border-radius: var(--ui-radius-control); background: var(--ux-hover); }
.premium-admin-copy { min-width: 0; display: flex; flex-direction: column; gap: var(--ui-space-0-5); }
.premium-admin-copy strong, .premium-admin-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.premium-admin-copy strong { font-size: var(--fs-body); }
.premium-admin-copy small { font-size: var(--fs-caption); color: var(--ui-text-secondary); }
.premium-feature-switches { flex: 0 0 auto; display: flex; align-items: center; gap: var(--ui-space-2); font-size: var(--fs-caption); color: var(--ui-text-secondary); }
.premium-feature-switches label { display: inline-flex; align-items: center; gap: var(--ui-space-1); white-space: nowrap; }
.premium-feature-switches input { accent-color: var(--ui-accent); }

.premium-admin-page {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  height: calc(100% - var(--shell-gap));
  display: flex;
  flex-direction: column;
  margin: 0 var(--shell-gap) var(--shell-gap) 0;
  padding: 0;
  color: var(--ui-text-primary);
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: hidden;
  user-select: text;
}
.premium-admin-header-bar {
  flex: 0 0 auto;
  display: flex;
  justify-content: safe center;
  align-items: center;
  width: 100%;
  min-width: 0;
  /* Đệm trên: thanh tab không dính mép trên thân trang (BA 14/10/2026). */
  padding: var(--ui-space-3) var(--ui-space-3) var(--ui-space-2);
  background: transparent;
}
/* Cửa sổ hẹp: thanh tab cuộn ngang trong khung thay vì bị cắt mép trái. */
.premium-admin-tabs {
  max-width: 100%;
  overflow-x: auto;
}
/* Tab quản trị là SEGMENTED CHUẨN (.ui-segmented + __item, ui-components.css). */
.premium-admin-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--dt-dimension-layout-1200);
  margin: 0 auto;
  padding: var(--ui-space-4) var(--ui-space-5);
  border: var(--ui-stroke-thin) solid var(--ux-border);
  border-radius: var(--ui-radius-panel);
  background: var(--ux-raised);
  box-shadow: var(--elev-2);
  overflow-y: auto;
}
#premiumAdminAccountsPanel {
  overflow-y: hidden;
}
#premiumAdminAccountsPanel .premium-admin-panel-head {
  flex: 0 0 auto;
  margin-bottom: var(--ui-space-2);
}
#premiumAdminAccountsPanel .premium-admin-grid-toolbar {
  flex: 0 0 auto;
  margin-bottom: var(--ui-space-2-5);
}
#premiumAdminAccountsPanel .premium-admin-table-container {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: auto;
}
#premiumAdminAccountsPanel .premium-admin-pagination {
  flex: 0 0 auto;
  margin-top: var(--ui-space-2-5);
  padding-top: var(--ui-space-2);
  border-top: var(--ui-stroke-thin) solid var(--ux-divider);
}
#premiumAdminPermanentPanel {
  overflow-y: hidden;
}
#premiumAdminPermanentPanel .premium-admin-panel-head,
#premiumAdminPermanentPanel .premium-whitelist-summary,
#premiumAdminPermanentPanel .premium-whitelist-add-box,
#premiumAdminPermanentPanel .premium-admin-subhead {
  flex: 0 0 auto;
}
#premiumAdminPermanentPanel .premium-admin-table-container {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: auto;
}
.premium-admin-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3-5); margin-bottom: var(--ui-space-2-5); }
.premium-admin-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-space-2); margin-bottom: var(--ui-space-2-5); }
.premium-admin-summary article { display: flex; flex-direction: column; gap: var(--ui-space-1); padding: var(--ui-space-2) var(--ui-space-2-5); border-radius: var(--ui-radius-panel); background: light-dark(rgba(var(--ui-accent-rgb), .06), rgba(var(--ui-accent-rgb), .14)); }
.premium-admin-summary span { color: var(--ui-text-secondary); font-size: var(--fs-caption); font-weight: var(--fw-semibold); }
.premium-admin-summary strong { color: var(--ui-text-primary); font-size: var(--fs-title); line-height: var(--lh-none); }
.premium-admin-panel-head h2 { margin: 0 0 var(--ui-space-1); font-size: var(--fs-body); color: var(--ui-text-primary); }
.premium-admin-panel-head p { margin: 0; font-size: var(--fs-caption); color: var(--ui-text-secondary); }
.premium-admin-search { width: min(var(--dt-dimension-layout-288), 44vw); height: var(--dt-dimension-row-list-dense); padding: 0 var(--ui-space-2); border: var(--ui-stroke-thin) solid var(--ux-input-border); border-radius: var(--ui-radius-control); background: var(--ux-input-bg); color: var(--ui-text-primary); font: inherit; font-size: var(--fs-caption); outline: none; }
.premium-admin-search:focus { border-color: var(--ux-control-border-active); box-shadow: var(--ui-control-ring); caret-color: var(--ui-accent); }
.premium-admin-table { display: flex; flex-direction: column; gap: var(--ui-space-1); }
.premium-commercial-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-2); }
/* Nhãn ô nhập của form. Hàng công tắc chế độ cộng đồng dùng component chuẩn
   .settings-option-row nên được trừ ra, không bị ép thành cột + chữ nhãn 12/700. */
.premium-commercial-form label:not(.settings-option-row) { display: flex; flex-direction: column; gap: var(--ui-space-1); color: var(--ui-text-secondary); font-size: var(--fs-caption); font-weight: var(--fw-bold); }
.premium-commercial-form label:not(.settings-option-row) > span { display: flex; align-items: center; gap: var(--ui-space-1-5); }
/* Trừ công tắc: không thì rule ô nhập kéo công tắc thành một ô nhập rộng 100%. */
.premium-commercial-form input:not([role="switch"]) { width: 100%; height: var(--ui-size-sm); padding: 0 var(--ui-space-2); border: var(--ui-stroke-thin) solid var(--ux-input-border); border-radius: var(--ui-radius-control); background: var(--ux-input-bg); color: var(--ui-text-primary); font: inherit; font-size: var(--fs-caption); }
.premium-commercial-wide, .premium-commercial-divider, .premium-commercial-actions { grid-column: 1 / -1; }
.premium-commercial-divider { margin-top: var(--ui-space-1); padding-top: var(--ui-space-3); border-top: var(--ui-stroke-thin) solid rgba(var(--ui-black-rgb),.08); color: var(--ui-text-primary); font-size: var(--fs-body); font-weight: var(--fw-heavy); }
.premium-commercial-actions { display: flex; justify-content: flex-end; margin-top: var(--ui-space-0-5); }
/* Nhóm "Chế độ cộng đồng": vỏ bọc chỉ để ẩn/hiện cả nhóm, con của nó vẫn là ô
   lưới của form (cùng khoảng cách với nhóm VietQR). Hàng công tắc canh mép trái
   thẳng với nhãn ô nhập, và không tô nền hover — ô nhập trong form cũng không. */
.premium-commercial-group { display: contents; }
.premium-commercial-form .settings-option-row { padding-inline: 0; }
.premium-commercial-form .settings-option-row:hover { background: transparent; }
.premium-activate-btn { margin-left: auto; }
.premium-donation-qr { width: var(--dt-dimension-layout-96); height: var(--dt-dimension-layout-96); padding: var(--ui-space-1); border-radius: var(--ui-radius-control); background: var(--ux-raised); object-fit: contain; }
.premium-admin-table .premium-admin-row { min-height: var(--ui-size-touch); padding: var(--ui-space-2) var(--ui-space-2); }
@media (max-width: 680px) { .premium-admin-summary, .premium-commercial-form { grid-template-columns: 1fr; } .premium-admin-panel-head { align-items: flex-start; flex-direction: column; } .premium-admin-search { width: 100%; } .premium-admin-row { align-items: flex-start; flex-direction: column; } .premium-feature-switches { width: 100%; } .premium-activate-btn { width: 100%; margin-left: 0; } }

/* =====================================================================
   PREMIUM ADMIN DASHBOARD & DATA GRID ENHANCEMENTS
   ===================================================================== */
.premium-dashboard-section {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2);
  margin-bottom: var(--ui-space-3);
  padding-bottom: var(--ui-space-2-5);
  border-bottom: var(--ui-stroke-thin) solid var(--ux-divider);
}
.premium-dashboard-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.premium-dashboard-section-title {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  margin-bottom: var(--ui-space-px);
}
.premium-dashboard-section-title h3 {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--ui-text-primary);
}
.premium-dashboard-dot {
  width: var(--ui-space-2);
  height: var(--ui-space-2);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-accent);
  flex: 0 0 auto;
}
.premium-dashboard-dot.is-green {
  background: var(--ui-success);
}
.premium-dashboard-dot.is-purple {
  background: var(--ui-module-project);
}
.premium-admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ui-space-2);
}
.premium-admin-kpi-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.premium-kpi-card {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-0-5);
  padding: var(--ui-space-2) var(--ui-space-3);
  border-radius: var(--ui-radius-panel);
  background: var(--ux-row);
  border: var(--ui-stroke-thin) solid var(--ux-border);
}
.premium-kpi-card.is-accent {
  background: color-mix(in srgb, var(--ui-accent) 8%, var(--ux-row));
  border-color: color-mix(in srgb, var(--ui-accent) 25%, var(--ux-border));
}
.premium-kpi-card.is-gold {
  background: color-mix(in srgb, var(--ui-brand-premium) 8%, var(--ux-row));
  border-color: color-mix(in srgb, var(--ui-brand-premium) 25%, var(--ux-border));
}
.premium-kpi-card.is-green {
  background: color-mix(in srgb, var(--ui-success) 8%, var(--ux-row));
  border-color: color-mix(in srgb, var(--ui-success) 25%, var(--ux-border));
}
.premium-kpi-label {
  font-size: var(--fs-micro);
  color: var(--ui-text-secondary);
  font-weight: var(--fw-semibold);
}
.premium-kpi-value {
  font-size: var(--fs-title);
  font-weight: var(--fw-bold);
  color: var(--ui-text-primary);
  line-height: var(--lh-flat);
}
.premium-kpi-sub {
  font-size: var(--fs-micro);
  color: var(--ui-text-secondary);
  margin-top: var(--ui-space-px);
}
.premium-kpi-bar-track {
  width: 100%;
  height: var(--ui-space-1);
  border-radius: var(--ui-radius-pill);
  background: var(--ux-fill);
  overflow: hidden;
  margin-top: var(--ui-space-1);
}
.premium-kpi-bar-fill {
  height: 100%;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-accent);
  transition: width var(--ui-duration-standard) var(--ui-ease);
}
.premium-admin-cohorts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ui-space-2);
  margin-top: var(--ui-space-0-5);
}
.premium-cohort-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-2);
  padding: var(--ui-space-1-5) var(--ui-space-3);
  border-radius: var(--ui-radius-control);
  background: var(--ux-sunken);
  border: var(--ui-stroke-thin) solid var(--ux-border);
}
.premium-cohort-info {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  min-width: 0;
}
.premium-cohort-info strong {
  font-size: var(--fs-caption);
  color: var(--ui-text-primary);
  display: block;
}
.premium-cohort-info p {
  margin: 0;
  font-size: var(--fs-micro);
  color: var(--ui-text-secondary);
}
.premium-cohort-count {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--ui-text-primary);
  flex: 0 0 auto;
}
.premium-cohort-icon {
  font-size: var(--fs-body);
  flex: 0 0 auto;
}
.premium-cohort-card.is-warning .premium-cohort-count {
  color: var(--ui-warning);
}
.premium-cohort-card.is-danger .premium-cohort-count {
  color: var(--ui-danger);
}
.premium-cohort-card.is-purple .premium-cohort-count {
  color: var(--ui-module-project);
}
.premium-dashboard-commerce-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ui-space-2);
  margin-top: var(--ui-space-1);
}
.premium-breakdown-card,
.premium-recent-orders-card {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
  padding: var(--ui-space-2) var(--ui-space-3);
  border-radius: var(--ui-radius-panel);
  background: var(--ux-row);
  border: var(--ui-stroke-thin) solid var(--ux-border);
  min-width: 0;
}
.premium-breakdown-card h4,
.premium-recent-orders-card h4 {
  margin: 0;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--ui-text-primary);
}
.premium-breakdown-list {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2);
  margin-top: var(--ui-space-1);
}
.premium-breakdown-item {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
}
.premium-breakdown-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-micro);
  color: var(--ui-text-secondary);
}
.premium-breakdown-head strong {
  color: var(--ui-text-primary);
}
.premium-recent-orders-list {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1-5);
  max-height: var(--dt-dimension-layout-240);
  overflow-y: auto;
}
.premium-recent-order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-2);
  padding: var(--ui-space-1-5) var(--ui-space-2);
  border-radius: var(--ui-radius-control);
  background: var(--ux-sunken);
  font-size: var(--fs-micro);
}
.premium-order-info {
  display: flex;
  align-items: center;
  gap: var(--ui-space-1-5);
  min-width: 0;
}
.premium-order-code {
  font-family: monospace;
  color: var(--ui-text-secondary);
}
.premium-order-email {
  color: var(--ui-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: var(--dt-dimension-layout-144);
}
.premium-order-details {
  display: flex;
  align-items: center;
  gap: var(--ui-space-1-5);
  flex: 0 0 auto;
}
.premium-order-amount {
  color: var(--ui-accent);
}
.premium-order-time {
  color: var(--ui-text-secondary);
}

/* Smart Data Grid Toolbar & Table */
.premium-admin-grid-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-2-5);
  margin-bottom: var(--ui-space-3);
  flex-wrap: wrap;
}
.premium-admin-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 var(--dt-dimension-layout-208);
  min-width: 0;
}
.premium-admin-search-wrap .premium-admin-search {
  width: 100%;
  padding-left: 28px; /* audit-keep: hình học riêng của khối, nằm giữa hai bậc thang (chênh hơn 2px) */
}
.premium-admin-search-icon {
  position: absolute;
  left: var(--ui-space-2);
  font-size: var(--fs-micro);
  color: var(--ui-text-secondary);
  pointer-events: none;
}
.premium-admin-filter-group {
  display: flex;
  align-items: center;
  gap: var(--ui-space-1-5);
  flex-wrap: wrap;
}
.premium-admin-filter-group .token-select-wrap {
  width: auto;
  max-width: none;
}
.premium-admin-filter-group .token-select-trigger {
  width: auto;
  min-width: var(--dt-dimension-layout-144);
  max-width: none;
  white-space: nowrap;
  height: var(--ui-size-md);
  padding: 0 var(--ui-space-2-5);
}
.premium-admin-filter-group .token-select-label {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}
.premium-admin-filter-group .setting-select {
  width: auto;
  min-width: var(--dt-dimension-layout-144);
  max-width: none;
  height: var(--ui-size-md);
  font-size: var(--fs-caption);
}
.premium-admin-table-container {
  width: 100%;
  overflow-x: auto;
  border: var(--ui-stroke-thin) solid var(--ux-border);
  border-radius: var(--ui-radius-control);
  background: var(--ux-base);
}
.premium-admin-grid-table {
  width: 100%;
  border-collapse: collapse;
  /* BA 29/09/2026: bảng quản trị theo Fluent DataGrid — chữ body-sm 13, không 11-12. */
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  text-align: left;
}
.premium-admin-grid-table th {
  padding: var(--ui-space-2) var(--ui-space-2-5);
  border-bottom: var(--ui-stroke-thin) solid var(--ux-divider);
  font-weight: var(--fw-semibold);
  color: var(--ui-text-secondary);
  background: var(--ux-sunken);
  white-space: nowrap;
  user-select: none;
}
.premium-admin-grid-table td {
  padding: var(--ui-space-2) var(--ui-space-2-5);
  border-bottom: var(--ui-stroke-thin) solid var(--ux-divider);
  color: var(--ui-text-primary);
  vertical-align: middle;
}
.premium-admin-grid-table tr:last-child td {
  border-bottom: none;
}
.premium-admin-grid-table tr:hover td {
  background: var(--ux-hover);
}
.premium-admin-grid-table.is-compact td {
  padding: var(--ui-space-1) var(--ui-space-2);
  font-size: var(--fs-caption);
}
.premium-td-index {
  text-align: center;
  color: var(--ui-text-secondary);
}
.premium-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ui-control-h-compact);
  height: var(--ui-control-h-compact);
  border-radius: var(--ui-radius-pill);
  background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
  color: var(--ui-accent);
  font-weight: var(--fw-bold);
  font-size: var(--fs-micro);
}
.premium-email-wrap {
  display: flex;
  align-items: center;
  gap: var(--ui-space-1-5);
  min-width: 0;
}
.premium-email-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-caption);
}
.premium-status-col {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-0-5);
}
.premium-status-text {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
}
.premium-status-text.is-success {
  color: var(--ui-success);
}
.premium-status-text.is-purple {
  color: var(--ui-module-project);
}
.premium-text-muted {
  color: var(--ui-text-secondary);
  font-size: var(--fs-micro);
}
.premium-td-time {
  white-space: nowrap;
}
.premium-td-actions {
  white-space: nowrap;
  width: var(--dt-dimension-layout-256);
}
.premium-action-group {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
}
.premium-action-group .token-select-wrap {
  min-width: var(--dt-dimension-layout-160);
  max-width: var(--dt-dimension-layout-160);
  flex: 0 0 var(--dt-dimension-layout-160);}
.premium-action-group .token-select-trigger {
  height: var(--ui-size-md);
  min-height: var(--ui-size-md);
  padding: 0 var(--ui-space-2);
  font-size: var(--fs-micro);}
.premium-action-group .token-select-label {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}
.premium-action-group .premium-save-btn {
  flex: 0 0 auto;
  width: var(--ui-space-12);
  min-width: var(--ui-space-12);
  height: var(--ui-size-md);
  padding: 0 var(--ui-space-2);
  text-align: center;
  justify-content: center;
}
.premium-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1);
  padding: var(--ui-space-0-5) var(--ui-space-1-5);
  border-radius: var(--ui-radius-pill);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-flat);
  border: var(--ui-stroke-thin) solid transparent;
  width: max-content;
}
.premium-badge.is-vip {
  background: color-mix(in srgb, var(--ui-success) 14%, transparent);
  color: var(--ui-success);
  border-color: color-mix(in srgb, var(--ui-success) 30%, transparent);
}
.premium-badge.is-permanent {
  background: color-mix(in srgb, var(--ui-module-project) 14%, transparent);
  color: var(--ui-module-project);
  border-color: color-mix(in srgb, var(--ui-module-project) 30%, transparent);
}
.premium-badge.is-standard {
  background: var(--ux-fill);
  color: var(--ui-text-secondary);
  border-color: var(--ux-border);
}
.premium-badge.is-owner {
  background: color-mix(in srgb, var(--ui-brand-premium) 16%, transparent);
  color: var(--ui-brand-premium-ink);
  border-color: color-mix(in srgb, var(--ui-brand-premium) 30%, transparent);
}
.premium-badge.is-warning {
  background: color-mix(in srgb, var(--ui-warning) 14%, transparent);
  color: var(--ui-warning);
  border-color: color-mix(in srgb, var(--ui-warning) 30%, transparent);
}
.premium-badge.is-expired {
  background: color-mix(in srgb, var(--ui-danger) 12%, transparent);
  color: var(--ui-danger);
  border-color: color-mix(in srgb, var(--ui-danger) 25%, transparent);
}

/* Khóa mềm cho tính năng Premium trong Cài đặt (markup gắn data-premium-gate,
   settingsPanel.js#renderPremiumLocks bật lớp này).

   Cố ý KHÔNG dùng thuộc tính `disabled` trên từng control: control disabled
   nuốt luôn sự kiện click, nên người dùng bấm vào chỉ thấy một ô chết mà không
   có lời giải thích. Ở đây các con bị tắt pointer-events để không còn hover/
   focus giả, còn cú bấm rơi lên chính vùng khóa — lớp bắt sự kiện pha capture
   đổi nó thành một chuyến đi tới trang Premium. */
.premium-badge.is-locked {
  display: none;
  background: color-mix(in srgb, var(--ui-module-project) 14%, transparent);
  color: var(--ui-module-project);
  border-color: color-mix(in srgb, var(--ui-module-project) 30%, transparent);
}
.is-premium-locked .premium-badge.is-locked { display: inline-flex; }
.is-premium-locked { cursor: pointer; }
.is-premium-locked .settings-card-body,
.is-premium-locked .settings-option-copy { opacity: 0.55; }
.is-premium-locked .settings-card-body *,
.is-premium-locked .settings-option-copy *,
.is-premium-locked .checkbox-box,
.is-premium-locked .sync-status-dot { pointer-events: none; }

.premium-table-loading,
.premium-table-empty {
  padding: var(--ui-space-6);
  text-align: center;
  color: var(--ui-text-secondary);
  font-style: italic;
}

/* Pagination */
.premium-admin-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-3);
  margin-top: var(--ui-space-3);
  flex-wrap: wrap;
}
.premium-pagination-left {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  font-size: var(--fs-caption);
  color: var(--ui-text-secondary);
}
.premium-pagesize-select {
  width: auto;
  min-width: var(--dt-dimension-layout-88);
  height: var(--ui-size-md);
  font-size: var(--fs-caption);
}
.premium-pagination-right {
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  flex-wrap: wrap;
}
.premium-pagination-buttons {
  display: flex;
  align-items: center;
  gap: var(--ui-space-1);
}
.premium-page-btn {
  min-width: var(--ui-size-md);
  height: var(--ui-size-md);
  padding: 0 var(--ui-space-1-5);
  border: var(--ui-stroke-thin) solid var(--ux-border);
  border-radius: var(--ui-radius-control);
  background: var(--ux-raised);
  color: var(--ui-text-primary);
  font-size: var(--fs-caption);
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--ui-duration-standard) var(--ui-ease);
}
.premium-page-btn:hover {
  background: var(--ux-hover);
}
.premium-page-btn.is-active {
  background: var(--ui-accent-solid);
  color: var(--ui-text-on-accent);
  border-color: var(--ui-accent);
  font-weight: var(--fw-bold);
}
.premium-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.premium-page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ui-size-sm);
  height: var(--dt-dimension-row-list-dense);
  color: var(--ui-text-secondary);
  font-size: var(--fs-caption);
  user-select: none;
}
.premium-pagination-jump {
  display: flex;
  align-items: center;
  gap: var(--ui-space-1-5);
  font-size: var(--fs-caption);
  color: var(--ui-text-secondary);
}
.premium-page-jump-input {
  width: var(--dt-dimension-layout-56);
  height: var(--dt-dimension-row-list-dense);
  padding: 0 var(--ui-space-1-5);
  border: var(--ui-stroke-thin) solid var(--ux-input-border);
  border-radius: var(--ui-radius-control);
  background: var(--ux-input-bg);
  color: var(--ui-text-primary);
  font-size: var(--fs-caption);
  text-align: center;
  -moz-appearance: textfield;
}
.premium-page-jump-input::-webkit-outer-spin-button,
.premium-page-jump-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.premium-page-jump-btn {
  min-width: var(--ui-size-lg);
  height: var(--dt-dimension-row-list-dense);
  font-size: var(--fs-caption);
}

/* Whitelist Panel */
.premium-whitelist-summary {
  margin-bottom: var(--ui-space-2);
}
.premium-whitelist-add-box {
  padding: var(--ui-space-2) var(--ui-space-3);
  border-radius: var(--ui-radius-control);
  background: var(--ux-row);
  border: var(--ui-stroke-thin) solid var(--ux-border);
  margin-bottom: var(--ui-space-2-5);
}
.premium-whitelist-add-box h3 {
  margin: 0 0 var(--ui-space-1-5);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--ui-text-primary);
}

/* Tab "Hoạt động sử dụng": hai tab con (Tổng quan | Danh sách tài khoản) dưới tiêu đề,
   bộ lọc dùng chung. Panel không tự cuộn; mỗi view chiếm phần còn lại — Tổng quan tự
   cuộn, Danh sách để khung bảng cuộn (giống tab Danh sách tài khoản) nên bảng luôn có
   trọn chiều cao thay vì bị KPI + biểu đồ ép còn vài dòng. */
#premiumAdminUsagePanel {
  overflow-y: hidden;
}
#premiumAdminUsagePanel > :is(.premium-admin-panel-head, .premium-usage-tabs, .premium-admin-grid-toolbar, .setting-note) {
  flex: 0 0 auto;
}
#premiumAdminUsagePanel .premium-admin-panel-head {
  margin-bottom: var(--ui-space-2);
}
.premium-usage-tabs {
  display: flex;
  align-items: flex-end;
  gap: var(--ui-space-1);
  margin-bottom: var(--ui-space-2-5);
  border-bottom: var(--ui-stroke-thin) solid var(--ux-divider);
}
.premium-usage-tab-count {
  font-weight: var(--fw-normal);
  color: var(--ui-text-secondary);
}
.premium-usage-view {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2);
}
#premiumUsageOverviewView {
  overflow-y: auto;
}
#premiumUsageOverviewView > * {
  flex: 0 0 auto;
}
#premiumUsageOverviewView .premium-dashboard-commerce-split {
  margin-top: 0;
}
.premium-usage-chart {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--ui-space-1);
  margin-top: var(--ui-space-1);
}
/* Cột biểu đồ giãn theo thẻ Module bên cạnh, không để khoảng trống dưới đáy thẻ. */
.premium-usage-chart-bars {
  display: grid;
  flex: 1 1 auto;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--ui-space-0-5);
  min-height: var(--dt-dimension-layout-120);
}
.premium-usage-chart-col {
  display: flex;
  align-items: flex-end;
  min-width: 0;
  border-radius: var(--ui-radius-control);
  background: var(--ux-fill);
}
.premium-usage-chart-bar {
  display: block;
  width: 100%;
  min-height: var(--ui-stroke-thin);
  border-radius: var(--ui-radius-control);
  background: var(--ui-accent);
  transition: height var(--ui-duration-standard) var(--ui-ease);
}
.premium-usage-chart-axis {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-micro);
  color: var(--ui-text-secondary);
}
/* Tab "Cài đặt & phân phối": panel tự cuộn (mặc định của .premium-admin-panel),
   các khối xếp dọc theo một nhịp khoảng cách thay vì margin rời từng khối. */
#premiumAdminInstallsPanel {
  gap: var(--ui-space-2);
}
#premiumAdminInstallsPanel > * {
  flex: 0 0 auto;
}
#premiumAdminInstallsPanel :is(.premium-admin-panel-head, .premium-dashboard-commerce-split) {
  margin: 0;
}
.premium-usage-level {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
}
.premium-usage-level.is-active { color: var(--ui-success); }
.premium-usage-level.is-light { color: var(--ui-warning); }
.premium-usage-level.is-dormant { color: var(--ui-text-secondary); }
.premium-usage-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
/* Tiêu đề cột đứng yên khi cuộn danh sách dài. */
.premium-usage-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  /* Giữ màu sunken của tiêu đề bảng nhưng phủ đặc để hàng cuộn bên dưới không lộ qua. */
  background: linear-gradient(var(--ux-sunken), var(--ux-sunken)), var(--ux-base);
}
.premium-usage-table td {
  font-size: var(--fs-caption);
}

@media (max-width: 900px) {
  .premium-admin-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .premium-admin-cohorts { grid-template-columns: 1fr; }
  .premium-dashboard-commerce-split { grid-template-columns: 1fr; }
}

/* Premium is a dedicated workspace, not a settings card. Tô nền theo
   --ui-module-premium-rgb (vàng/hổ phách — token module riêng cho Premium,
   trước đây trang này lại dùng nhầm tông xanh của module Project). */
.premium-page { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; overflow: auto; margin: var(--ui-space-2-5); padding: 28px clamp(var(--ui-space-6), 5vw, 76px) 52px; color: var(--ui-text-primary); background: radial-gradient(circle at 92% 4%, rgba(var(--ui-module-premium-rgb), .19), transparent 24%), var(--ux-base); border: 1px solid var(--stroke); border-radius: var(--ui-radius-panel); box-shadow: var(--elev-4); } /* audit-keep: chiều rộng dòng đọc/clamp theo viewport, không thuộc thang */
.premium-page-showcase { display: grid; grid-template-columns: .92fr 1.08fr; gap: var(--ui-space-8); min-height: var(--dt-component-premium-visual-showcase-min-height); max-width: 1160px; margin: 0 auto var(--ui-space-4-5); padding: var(--ui-space-8) var(--ui-space-10); overflow: hidden; border: 1px solid var(--dt-component-premium-visual-showcase-border); border-radius: var(--ui-radius-panel); background: var(--dt-component-premium-visual-showcase-background); color: var(--ui-text-on-accent); } /* audit-keep: hình học riêng của khối, nằm giữa hai bậc thang (chênh hơn 2px) */
.premium-showcase-copy { position: relative; z-index: 1; }
.premium-showcase-kicker { display: block; margin-bottom: var(--ui-space-3); color: var(--dt-component-premium-visual-text-kicker); font-size: var(--fs-caption); font-weight: var(--fw-overline); letter-spacing: var(--ls-overline); }
/* Cỡ tiêu đề theo bậc thang chữ (hero 36 / display-lg 28), chọn theo bố cục thay vì
   co giãn liên tục bằng vw — giá trị trung gian của clamp() nằm ngoài type ramp. */
.premium-showcase-copy h2 { margin: 0; font-size: var(--fs-hero); letter-spacing: -1.2px; line-height: var(--lh-flat); }
html:is([data-layout-mode="compact"], [data-layout-mode="tight"]) .premium-showcase-copy h2 { font-size: var(--fs-display-lg); }
.premium-showcase-copy p { max-width: var(--dt-dimension-layout-440); margin: var(--ui-space-3-5) 0 var(--ui-space-4-5); color: var(--dt-component-premium-visual-text-body); font-size: var(--fs-body); line-height: var(--lh-loose); }
.premium-showcase-pills { display: flex; flex-wrap: wrap; gap: var(--ui-space-1-5); }
.premium-showcase-pills span { padding: var(--ui-space-1) var(--ui-space-2); border: var(--ui-stroke-thin) solid var(--dt-component-premium-visual-pill-border); border-radius: var(--dt-dimension-radius-full); background: var(--dt-component-premium-visual-pill-background); color: var(--dt-component-premium-visual-pill-text); font-size: var(--fs-micro); font-weight: var(--fw-bold); }
.premium-showcase-visual { position: relative; min-height: var(--dt-component-premium-visual-showcase-visual-min-height); }
.premium-showcase-visual:before { content: ''; position: absolute; top: var(--ui-space-8); left: 50%; width: var(--dt-component-premium-visual-halo-size); height: var(--dt-component-premium-visual-halo-size); transform: translateX(-50%); border: var(--ui-stroke-thin) solid var(--dt-component-premium-visual-halo-border); border-radius: var(--ui-radius-circle); background: var(--dt-component-premium-visual-halo-background); box-shadow: var(--dt-component-premium-visual-halo-shadow); }
.premium-showcase-visual:after { content: 'PREMIUM'; position: absolute; top: var(--dt-dimension-layout-104); left: 50%; transform: translateX(-50%); color: var(--ui-text-on-accent); font-size: var(--fs-body); font-weight: var(--fw-heavy); letter-spacing: 2px; }
.premium-visual-project, .premium-visual-note, .premium-visual-score { position: absolute; z-index: 1; border: var(--ui-stroke-thin) solid rgba(var(--ui-module-project-rgb), .22); border-radius: var(--ui-radius-panel); background: rgba(var(--ui-scrim-rgb), .76); box-shadow: var(--ui-elevation-3); backdrop-filter: blur(10px); }
.premium-visual-project { top: 0; right: var(--ui-space-1); width: var(--dt-component-premium-visual-project-card-width); padding: var(--ui-space-3); }
.premium-visual-project small, .premium-visual-note small, .premium-visual-score small { display: block; color: var(--dt-component-premium-visual-visual-muted); font-size: var(--fs-micro); font-weight: var(--fw-heavy); letter-spacing: .8px; }
.premium-visual-project strong, .premium-visual-note strong, .premium-visual-score strong { display: block; margin-top: var(--ui-space-1); color: var(--dt-component-premium-visual-visual-text); font-size: var(--fs-caption); }
.premium-visual-project div { display: flex; gap: var(--ui-space-1); margin-top: var(--ui-space-3); }.premium-visual-project i { width: var(--ui-size-dense); height: var(--ui-space-1); border-radius: var(--dt-dimension-radius-full); background: var(--dt-component-premium-visual-visual-line); }.premium-visual-project i:first-child { width: var(--dt-dimension-layout-48); background: var(--dt-component-premium-visual-visual-line-accent); }
.premium-visual-note { bottom: 0; left: 0; display: flex; align-items: center; gap: var(--ui-space-2); padding: var(--ui-space-3); }.premium-visual-note > span { display: grid; place-items: center; width: var(--ui-size-dense); height: var(--dt-dimension-row-list-dense); border-radius: var(--ui-radius-control); background: var(--dt-component-premium-visual-visual-note-background); color: var(--dt-component-premium-visual-visual-note-text); font-weight: var(--fw-black); }
.premium-visual-score { right: var(--ui-space-5); bottom: var(--ui-space-px); width: var(--dt-dimension-layout-112); padding: var(--ui-space-3); }.premium-visual-score i { display: block; height: var(--ui-space-1-5); margin-top: var(--ui-space-2); overflow: hidden; border-radius: var(--dt-dimension-radius-full); background: var(--dt-component-premium-visual-progress-track); }.premium-visual-score b { display: block; width: 72%; height: 100%; border-radius: inherit; background: var(--dt-component-premium-visual-progress-fill); }
/* Nút đồng bộ trên thanh tiêu đề. Gói Thường dùng nó như một nút bấm; gói
   Premium dùng nó như một đèn trạng thái (xem syncButton.js).

   Chấm tròn chỉ hiện ở chế độ tự động: ở chế độ thủ công, một chấm xanh thường
   trực sẽ bị hiểu nhầm là "đã đồng bộ rồi" trong khi thật ra chưa ai bấm. */
@keyframes sync-spin { to { transform: rotate(360deg); } }

/* Banner nêu đúng tên tính năng vừa bị chặn, hiện ở đầu trang Premium. Dùng
   màu nhấn nhẹ chứ không phải màu cảnh báo: đây là lời giới thiệu, không phải
   thông báo lỗi — người dùng không làm gì sai cả. */
.premium-upgrade-notice {
  display: flex; align-items: flex-start; gap: var(--ui-space-3); max-width: var(--dt-dimension-layout-1200);
  margin: 0 auto var(--ui-space-3-5); padding: var(--ui-space-3-5) var(--ui-space-4-5);
  border: var(--ui-stroke-thin) solid rgba(var(--ui-accent-rgb), .28); border-radius: var(--ui-radius-panel);
  background: rgba(var(--ui-accent-rgb), .07);
}
.premium-upgrade-icon {
  flex: 0 0 auto; display: grid; place-items: center; width: var(--ui-icon-lg); height: var(--ui-icon-lg);
  border-radius: var(--ui-radius-panel); background: rgba(var(--ui-accent-rgb), .16);
  color: var(--ui-accent); font-size: var(--fs-body);
}
.premium-upgrade-notice strong { display: block; color: var(--ui-text-primary); font-size: var(--fs-body); letter-spacing: -.2px; }
.premium-upgrade-notice p { margin: var(--ui-space-1) 0 0; color: var(--ui-text-secondary); font-size: var(--fs-body); line-height: var(--lh-relaxed); }

/* Huy hiệu số ngày dùng thử còn lại, gắn trên mục Premium của rail. Dùng
   tabular-nums để con số không nhảy ngang khi đếm từ 7 xuống 1. */
.nav-rail-item { position: relative; }
.nav-rail-trial {
  position: absolute; top: var(--ui-space-1); right: var(--ui-space-1); min-width: var(--ui-icon-sm); height: var(--ui-icon-sm); padding: 0 var(--ui-space-1);
  display: grid; place-items: center; border-radius: var(--dt-dimension-radius-full);
  background: var(--ui-accent-solid); color: var(--ui-text-on-accent); font-size: var(--fs-micro); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.nav-rail-trial.is-urgent { background: var(--ui-warning); }

/* Thẻ mời đăng nhập ở góc dưới phải. Cố ý KHÔNG phải overlay chặn màn hình —
   người mới cài đang làm việc thật, chặn họ lại để quảng cáo là cách nhanh nhất
   để bị gỡ. Không dùng position: fixed kèm z-index cao nhất: thẻ này phải nằm
   dưới mọi hộp thoại thật, nên z-index giữ ở mức vừa phải. */
.premium-invite {
  position: fixed; right: 18px; bottom: 18px; z-index: 60; width: min(320px, calc(100vw - 36px)); /* audit-keep: thứ tự chồng lớp cục bộ phải giữ đúng số so với hàng xóm cùng ngữ cảnh xếp chồng, thang layer không có bậc tương ứng */
  padding: var(--ui-space-4) var(--ui-space-4) var(--ui-space-3-5); border: var(--ui-stroke-thin) solid var(--stroke); border-radius: var(--ui-radius-panel);
  background: rgba(var(--ui-surface-raised-rgb), .97); box-shadow: var(--elev-3);
  opacity: 0; transform: translateY(10px); transition: opacity var(--ui-duration-standard) var(--ui-ease), transform var(--ui-duration-standard) var(--ui-ease);
}
.premium-invite.is-open { opacity: 1; transform: translateY(0); }
.premium-invite-close {
  position: absolute; top: var(--ui-space-2); right: var(--ui-space-2); width: var(--ui-size-sm); height: var(--ui-size-sm); padding: 0;
  border: none; border-radius: var(--ui-radius-control); background: transparent;
  color: var(--ui-text-muted); font-size: var(--fs-title); line-height: var(--lh-none); cursor: pointer;
}
.premium-invite-close:hover { background: rgba(var(--ui-accent-rgb), .1); color: var(--ui-text-primary); }
.premium-invite-title { display: block; padding-right: var(--ui-space-6); color: var(--ui-text-primary); font-size: var(--fs-body); letter-spacing: -.2px; }
.premium-invite-copy { margin: var(--ui-space-2) 0 var(--ui-space-3); color: var(--ui-text-secondary); font-size: var(--fs-body); line-height: var(--lh-relaxed); }
.premium-invite-copy b { color: var(--ui-text-primary); }
.premium-invite-actions { display: flex; justify-content: flex-end; gap: var(--ui-space-2); }
.premium-invite-actions button {
  height: var(--ui-size-md); padding: 0 var(--ui-space-3-5); border-radius: var(--ui-radius-control);
  font-size: var(--fs-body); font-weight: var(--fw-semibold); cursor: pointer;
}
.premium-invite-later { border: var(--ui-stroke-thin) solid var(--stroke); background: transparent; color: var(--ui-text-secondary); }
.premium-invite-later:hover { color: var(--ui-text-primary); }
.premium-invite-cta { border: none; background: var(--ui-accent-solid); color: var(--ui-text-on-accent); }
.premium-invite-cta:hover { filter: brightness(1.07); }
@media (prefers-reduced-motion: reduce) { .premium-invite { transition: none; } }

/* Bảng so sánh Thường / Premium. Đặt giữa phần trưng bày và danh sách gói: đây
   là chỗ người dùng tự trả lời "tôi mất gì nếu không nâng cấp" trước khi nhìn
   tới giá. Cột trạng thái dùng chữ chứ không chỉ dấu ✓/✗ để trình đọc màn hình
   đọc ra được, và để hai cột không phụ thuộc vào riêng màu sắc. */
 /* audit-keep: hình học riêng của khối, nằm giữa hai bậc thang (chênh hơn 2px) */

.premium-page-card { min-height: var(--dt-component-premium-visual-card-min-height); padding: var(--ui-space-6); border: 1px solid var(--ux-border); border-radius: var(--ui-radius-panel); background: light-dark(var(--ux-raised), var(--dt-component-premium-visual-dark-card-background)); box-shadow: var(--elev-3); max-width: 1160px; margin: 0 auto var(--ui-space-4); border-color: light-dark(var(--ux-border), var(--dt-component-premium-visual-dark-card-border)); } /* audit-keep: hình học riêng của khối, nằm giữa hai bậc thang (chênh hơn 2px) */
.premium-card-heading { display: flex; align-items: center; gap: var(--ui-space-2-5); margin-bottom: var(--ui-space-4-5); }.premium-card-heading>span { display: grid; place-items: center; width: var(--ui-size-md); height: var(--ui-size-md); border-radius: var(--ui-radius-panel); background: rgba(var(--ui-module-premium-rgb), .14); color: var(--ui-module-premium); font-size: var(--fs-title); }.premium-card-heading small { display: block; color: var(--ui-text-secondary); font-size: var(--fs-micro); font-weight: var(--fw-heavy); letter-spacing: .75px; }.premium-card-heading h2 { margin: var(--ui-space-0-5) 0 0; color: var(--ui-text-primary); font-size: var(--fs-title); letter-spacing: -.35px; }

/* Thẻ tài khoản & trạng thái Premium — câu trả lời đầu tiên "tôi là ai, đang
   ở đâu", nên đứng ngay sau hero, trước cả phần trưng bày tính năng. */
.premium-account-body { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--ui-space-4-5); }
.premium-account-identity { display: flex; align-items: center; gap: var(--ui-space-3); min-width: 0; }
.premium-account-identity .profile-avatar { flex: none; width: var(--ui-size-touch); height: var(--ui-size-touch); font-size: var(--fs-title); border: var(--ui-stroke-thick) solid rgba(var(--ui-module-premium-rgb), .3); }
.premium-account-copy { min-width: 0; display: flex; flex-direction: column; gap: var(--ui-space-0-5); }
.premium-account-copy strong { color: var(--ui-text-primary); font-size: var(--fs-body); font-weight: var(--fw-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.premium-account-email { color: var(--ui-text-secondary); font-size: var(--fs-caption); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.premium-account-status { min-width: var(--dt-dimension-layout-224); }
/* Tên gói/trạng thái Premium là thông tin CHÍNH của cả thẻ — trước dùng
   chung kiểu chữ bé của .settings-inline-note (11px) nên gần như vô hình.
   Nâng hẳn lên một bậc riêng, đậm và rõ. */
.premium-access-panel .settings-inline-note { margin: var(--ui-space-3) 0 var(--ui-space-1-5); padding: 0; background: transparent; align-items: center; gap: var(--ui-space-2); }
.premium-access-panel #premiumStatusText { color: var(--ui-text-primary); font-size: var(--fs-title); font-weight: var(--fw-heavy); }
.premium-access-panel #premiumStatusDot { width: var(--ui-space-2); height: var(--ui-space-2); margin-top: 0; color: var(--ui-text-muted); }
.premium-access-panel #premiumStatusDot.is-active { color: var(--ui-module-premium); }
.premium-access-panel .setting-note-static { max-width: var(--dt-dimension-layout-480); margin: 0; }
.premium-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); margin-top: var(--ui-space-4); }
.premium-page-actions .premium-activate-btn { margin-left: auto; }

/* 3 gói Premium — thay hẳn khung #premiumPlanGrid cũ (chưa từng nối dây) và
   dòng giá tĩnh cũ: mỗi gói giờ có nút mua riêng ngay trên thẻ. */
.premium-plans-section { max-width: var(--dt-dimension-layout-1200); margin: 0 auto var(--ui-space-4-5); }
.premium-plans-heading { margin-bottom: var(--ui-space-3-5); }
.premium-plans-heading h2 { margin: var(--ui-space-1) 0 0; color: var(--ui-text-primary); font-size: var(--fs-display-lg); font-weight: var(--fw-heavy); letter-spacing: -.6px; }
html:is([data-layout-mode="compact"], [data-layout-mode="tight"]) .premium-plans-heading h2 { font-size: var(--fs-headline); }
/* Nền đục hẳn (--ux-raised, giống thẻ gói) thay vì mảng màu alpha thấp — cùng
   một lỗi "trong suốt trên nền Kính/Acrylic" đã gặp ở thẻ gói Theo năm. */
.premium-promo-banner { margin: 0 0 var(--ui-space-3); padding: var(--ui-space-3) var(--ui-space-4); border: var(--ui-stroke-thin) solid var(--dt-component-premium-visual-plan-featured-border); border-radius: var(--ui-radius-panel); background: var(--dt-component-premium-visual-plan-featured-background), var(--ux-raised); color: color-mix(in srgb, var(--ui-module-premium) 75%, var(--ui-mix-shade)); font-size: var(--fs-body); font-weight: var(--fw-bold); }
.premium-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-space-3-5); align-items: stretch; }
.premium-plan-grid.loading, .premium-plan-grid.is-error { display: block; padding: var(--ui-space-4-5); color: var(--ui-text-secondary); font-size: var(--fs-body); text-align: center; }
.premium-plan-card { position: relative; display: flex; flex-direction: column; gap: var(--ui-space-3); padding: var(--ui-space-6) var(--ui-space-5); border: var(--ui-stroke-thin) solid var(--ux-border); border-radius: var(--ui-radius-panel); background: var(--ux-raised); box-shadow: var(--elev-2); transition: transform var(--ui-duration-fast) var(--ui-ease), box-shadow var(--ui-duration-fast) var(--ui-ease); }
.premium-plan-card:hover { transform: var(--ui-interaction-stable-transform); box-shadow: var(--elev-3); }
/* Phủ gradient vàng nhạt LÊN TRÊN nền đục --ux-raised, không thay hẳn nó —
   thay hẳn thì ở chế độ nền Kính/Acrylic, gradient alpha thấp sẽ gần như
   trong suốt, lộ hình nền desktop xuyên qua thẻ (đã xảy ra thực tế). */
.premium-plan-card.is-featured { border-color: light-dark(var(--dt-component-premium-visual-plan-featured-border), var(--dt-component-premium-visual-dark-plan-featured-border)); background: var(--premium-featured-gradient), light-dark(var(--ux-raised), transparent); box-shadow: var(--elev-3); }
:root { --premium-featured-gradient: var(--dt-component-premium-visual-plan-featured-background); }
html[data-mode="dark"] { --premium-featured-gradient: var(--dt-component-premium-visual-dark-plan-featured-background); }
.premium-plan-card.is-featured:hover { box-shadow: var(--elev-4); }
/* Gói vĩnh viễn — thẻ "cao cấp nhất": nền đặc tông vàng-cam (dùng lại chất
   liệu orb đã có sẵn) thay vì chỉ viền nhạt như gói năm, để mắt nhìn thấy
   ngay đây là lựa chọn giá trị nhất mà không cần đọc chữ. */
/* Thẻ Mua vĩnh viễn nền cam: chữ/icon mực --on-orb (≥ 4.86:1) thay chữ trắng (2.1–3.2:1, dưới WCAG 1.4.3). */
.premium-plan-card.is-lifetime { border-color: transparent; background: var(--dt-component-premium-visual-orb-background); box-shadow: var(--dt-component-premium-visual-orb-shadow); color: var(--dt-component-premium-visual-on-orb); }
.premium-plan-card.is-lifetime:hover { box-shadow: var(--dt-component-premium-visual-orb-shadow), var(--elev-4); }
.premium-plan-card.is-lifetime .premium-plan-name,
.premium-plan-card.is-lifetime .premium-plan-price,
.premium-plan-card.is-lifetime .premium-plan-period { color: var(--dt-component-premium-visual-on-orb); }
.premium-plan-card.is-lifetime .premium-plan-price del { opacity: .75; }
.premium-plan-badge { position: absolute; top: calc(-1 * var(--ui-space-3)); right: var(--ui-space-4); padding: var(--ui-space-1) var(--ui-space-2-5); border-radius: var(--dt-dimension-radius-full); background: var(--dt-component-premium-visual-plan-featured-badge-background); color: var(--dt-component-premium-visual-on-orb); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: .3px; box-shadow: var(--elev-2); }
.premium-plan-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--ui-size-touch); height: var(--ui-size-touch); border-radius: var(--ui-radius-circle); border: var(--ui-stroke-thin) solid var(--ux-border); background: var(--ux-fill); font-size: var(--fs-title); line-height: 1; }
.premium-plan-card.is-lifetime .premium-plan-icon { border-color: var(--dt-component-premium-visual-on-orb); }
.premium-plan-name { color: var(--ui-text-primary); font-size: var(--fs-body); font-weight: var(--fw-bold); }
.premium-plan-price-row { display: flex; align-items: baseline; gap: var(--ui-space-2); flex-wrap: wrap; }
.premium-plan-price { color: color-mix(in srgb, var(--ui-module-premium) 75%, var(--ui-mix-shade)); font-size: var(--fs-title-lg); font-weight: var(--fw-heavy); letter-spacing: -.3px; }
.premium-plan-price del { color: var(--ui-text-muted); font-size: var(--fs-caption); font-weight: var(--fw-normal); }
.premium-plan-period { color: var(--ui-text-secondary); font-size: var(--fs-micro); }
.premium-plan-value-note { margin: 0; padding: var(--ui-space-1-5) var(--ui-space-2); border: var(--ui-stroke-thin) dashed currentColor; border-radius: var(--ui-radius-control); color: color-mix(in srgb, var(--ui-module-premium) 75%, var(--ui-mix-shade)); font-size: var(--fs-micro); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.premium-plan-card.is-lifetime .premium-plan-value-note { color: var(--dt-component-premium-visual-on-orb); }
.premium-plan-benefits { display: flex; flex-direction: column; gap: var(--ui-space-1); margin: var(--ui-space-0-5) 0 0; padding: 0; list-style: none; flex: 1 1 auto; }
.premium-plan-benefits li { position: relative; padding-left: var(--ui-space-4-5); color: var(--ui-text-primary); font-size: var(--fs-caption); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
.premium-plan-benefits li:before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--ui-module-premium); font-weight: var(--fw-bold); }
.premium-plan-card.is-lifetime .premium-plan-benefits li,
.premium-plan-card.is-lifetime .premium-plan-benefits li:before { color: var(--dt-component-premium-visual-on-orb); }

/* Lịch sử thanh toán — thu gọn mặc định, chỉ tải khi mở lần đầu (xem
   accountSync.js toggleHistoryCard()). Pattern caret giống notics.js
   treeGroupHeading(): xoay 90deg qua CSS, không animate chiều cao. */
.premium-history-card { padding: 0; overflow: hidden; }
.premium-history-toggle { display: flex; align-items: center; gap: var(--ui-space-2-5); width: 100%; padding: var(--ui-space-5) var(--ui-space-6); border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; } /* audit-keep: hình học riêng của khối, nằm giữa hai bậc thang (chênh hơn 2px) */
.premium-history-toggle .premium-card-heading { margin: 0; flex: 1; }
/* GĐ5.4 Flat Surface: ô icon tiêu đề thẻ thành glyph trần giữ màu Premium. */
html[data-surface="flat"] .premium-card-heading > span { --icon-tile-bg: transparent; }
.premium-history-toggle-caret { flex: none; display: grid; place-items: center; width: var(--ui-icon-md); height: var(--ui-icon-md); color: var(--ui-text-muted); transition: transform var(--ui-duration-standard) var(--ui-ease); }
.premium-history-toggle[aria-expanded="true"] .premium-history-toggle-caret { transform: rotate(90deg); }
.premium-history-body { padding: 0 var(--ui-space-6) var(--ui-space-5); } /* audit-keep: hình học riêng của khối, nằm giữa hai bậc thang (chênh hơn 2px) */
.premium-history-list { display: flex; flex-direction: column; gap: var(--ui-space-1-5); }
.premium-history-empty { padding: var(--ui-space-3-5) 0; color: var(--ui-text-secondary); font-size: var(--fs-body); text-align: center; }
.premium-history-row { display: flex; align-items: center; gap: var(--ui-space-2-5); padding: var(--ui-space-2-5) var(--ui-space-3); border: var(--ui-stroke-thin) solid var(--ux-border); border-radius: var(--ui-radius-control); background: var(--ux-fill); }
.premium-history-plan { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: var(--ui-space-px); }
.premium-history-plan strong { color: var(--ui-text-primary); font-size: var(--fs-caption); font-weight: var(--fw-semibold); }
.premium-history-plan span { color: var(--ui-text-secondary); font-size: var(--fs-micro); }
.premium-history-amount { color: var(--ui-text-primary); font-size: var(--fs-body); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.premium-history-badge { flex: none; padding: var(--ui-space-1) var(--ui-space-2); border-radius: var(--dt-dimension-radius-full); font-size: var(--fs-micro); font-weight: var(--fw-bold); }
.premium-history-badge.is-paid { background: var(--ui-success-bg); color: var(--ui-success); }
.premium-history-badge.is-pending { background: var(--ui-warning-bg); color: var(--ui-warning); }
.premium-history-badge.is-failed { background: var(--ui-danger-bg); color: var(--ui-danger); }

/* Card này nội dung ngắn (icon + tiêu đề + 3 nhãn ngắn) — bỏ min-height dùng
   chung của .premium-page-card (260px) kẻo trống hẳn nửa dưới, không đóng
   vai trò gì. */
.premium-security-panel { min-height: 0; }
.premium-security-list { display: flex; flex-wrap: wrap; gap: var(--ui-space-2-5) var(--ui-space-5); margin: 0; padding: 0; list-style: none; }
.premium-security-list li { position: relative; padding-left: var(--ui-space-5); color: var(--ui-text-primary); font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.premium-security-list li:before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--ui-module-premium); font-weight: var(--fw-bold); }
.premium-donation-panel { display: grid; grid-template-columns: 1fr auto; gap: var(--ui-space-8); align-items: center; max-width: 1160px; margin: 0 auto var(--ui-space-4); padding: var(--ui-space-8) var(--ui-space-10); border: 1px solid var(--dt-component-premium-visual-donation-border); border-radius: var(--ui-radius-panel); background: var(--dt-component-premium-visual-donation-background); color: var(--ui-text-on-accent); }.premium-donation-copy h2 { margin: var(--ui-space-1) 0 var(--ui-space-2-5); font-size: var(--fs-display-lg); letter-spacing: -1px; line-height: var(--lh-flat); }.premium-donation-copy p { max-width: 560px; margin: 0; color: var(--dt-component-premium-visual-donation-text); font-size: var(--fs-body); line-height: var(--lh-loose); }.premium-donation-copy strong { display: block; margin-top: var(--ui-space-3-5); color: var(--dt-component-premium-visual-donation-strong); font-size: var(--fs-caption); }.premium-donation-qr-wrap { display: grid; place-items: center; width: var(--dt-component-premium-visual-qr-frame-size); height: var(--dt-component-premium-visual-qr-frame-size); padding: var(--ui-space-3); border: 1px solid var(--dt-component-premium-visual-qr-border); border-radius: var(--ui-radius-panel); background: var(--ux-raised); box-shadow: var(--dt-component-premium-visual-qr-shadow); }.premium-donation-panel .premium-donation-qr { width: var(--dt-component-premium-visual-qr-size); height: var(--dt-component-premium-visual-qr-size); padding: 0; border-radius: var(--ui-radius-panel); object-fit: contain; } /* audit-keep: hình học riêng của khối, nằm giữa hai bậc thang (chênh hơn 2px) */

/* Popup QR thanh toán trong app (thay vì mở cửa sổ mới) — xem
   premiumCheckout.js. Scrim + panel dùng đúng bậc L4 (--ux-overlay) như mọi
   modal khác trong app, chỉ viền/khung QR mới mang tông cam premium riêng. */
.premium-checkout-scrim { position: fixed; inset: 0; z-index: var(--ui-layer-modal); display: grid; place-items: center; padding: var(--ui-space-5); background: rgba(var(--ui-scrim-rgb), .55); backdrop-filter: blur(3px); opacity: 0; transition: opacity var(--ui-duration-standard) var(--ui-ease); }
.premium-checkout-scrim.is-open { opacity: 1; }
.premium-checkout-dialog { width: min(var(--dt-dimension-layout-400), 100%); max-height: calc(100vh - var(--ui-space-10)); overflow: auto; padding: var(--ui-space-5) var(--ui-space-6) var(--ui-space-6); border: var(--ui-stroke-thin) solid var(--ux-border); border-radius: var(--ui-radius-panel); background: var(--ux-overlay); box-shadow: var(--elev-4); transform: translateY(8px) scale(.98); transition: transform var(--ui-duration-standard) var(--ui-ease); }
.premium-checkout-scrim.is-open .premium-checkout-dialog { transform: translateY(0) scale(1); }
.premium-checkout-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ui-space-2-5); margin-bottom: var(--ui-space-1); }
.premium-checkout-head strong { color: var(--ui-text-primary); font-size: var(--fs-body); }
.premium-checkout-head span { display: block; margin-top: var(--ui-space-0-5); color: var(--ui-text-secondary); font-size: var(--fs-caption); }
.premium-checkout-close { flex: none; width: var(--ui-icon-lg); height: var(--ui-icon-lg); border: 0; border-radius: var(--ui-radius-control); background: transparent; color: var(--ui-text-muted); font-size: var(--fs-body); line-height: var(--lh-none); cursor: pointer; }
.premium-checkout-close:hover { background: var(--ux-hover); color: var(--ui-text-primary); }
.premium-checkout-body { display: flex; flex-direction: column; align-items: center; gap: var(--ui-space-3); margin-top: var(--ui-space-3-5); text-align: center; }
.premium-checkout-qr-wrap { display: grid; place-items: center; width: var(--dt-component-premium-visual-qr-frame-size); height: var(--dt-component-premium-visual-qr-frame-size); padding: var(--ui-space-2-5); border: var(--ui-stroke-thin) solid var(--dt-component-premium-visual-checkout-qr-border); border-radius: var(--ui-radius-panel); background: rgb(var(--ui-white-rgb)); box-shadow: var(--dt-component-premium-visual-checkout-qr-shadow); }
.premium-checkout-qr-wrap canvas, .premium-checkout-qr-wrap img { width: 100%; height: 100%; }
.premium-checkout-timer { color: var(--ui-text-secondary); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; }
.premium-checkout-timer strong { color: color-mix(in srgb, var(--ui-module-premium) 75%, var(--ui-mix-shade)); }
.premium-checkout-status { min-height: var(--dt-dimension-icon-header); color: var(--ui-text-secondary); font-size: var(--fs-caption); }
.premium-checkout-scrim.is-paid .premium-checkout-status { color: var(--ui-success); font-weight: var(--fw-bold); }
.premium-checkout-scrim.is-expired .premium-checkout-status, .premium-checkout-scrim.is-error .premium-checkout-status { color: var(--ui-danger); }
.premium-checkout-actions { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; gap: var(--ui-space-2); margin-top: var(--ui-space-1); }
/* Trước là chữ xanh gạch chân bé tí — khó bấm, khó thấy. Giờ luôn là một nút
   viền rõ ràng; khi không có QR thì nó là nút HÀNH ĐỘNG CHÍNH (is-primary),
   không còn là link phụ trợ nữa. */
.premium-checkout-link { display: inline-flex; align-items: center; justify-content: center; gap: var(--ui-space-1-5); width: 100%; padding: var(--ui-space-2-5) var(--ui-space-4); border: var(--ui-stroke-thin) solid var(--ux-border); border-radius: var(--ui-radius-control); background: var(--ux-fill); color: var(--ui-text-primary); font-size: var(--fs-caption); font-weight: var(--fw-semibold); text-decoration: none; }
.premium-checkout-link:hover { border-color: var(--ui-module-premium); color: var(--ui-module-premium); }
.premium-checkout-link.is-primary { border-color: transparent; background: var(--ui-module-premium); color: var(--ui-text-on-accent); font-size: var(--fs-body); padding: var(--ui-space-3) var(--ui-space-4-5); }
.premium-checkout-link.is-primary:hover { filter: brightness(1.08); color: var(--ui-text-on-accent); }

:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .premium-page-showcase { grid-template-columns: 1fr; }
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .premium-showcase-visual { max-width: var(--dt-dimension-layout-480); width: 100%; margin: 0 auto; }
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .premium-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .premium-donation-panel { grid-template-columns: 1fr; }
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .premium-donation-qr-wrap { justify-self: start; }
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .premium-page-actions .premium-activate-btn { margin-left: 0; }
html[data-layout-mode="tight"] .premium-page { margin: var(--ui-space-1-5); padding: var(--ui-space-5) var(--ui-space-3-5) var(--ui-space-8); }
html[data-layout-mode="tight"] .premium-page-showcase { padding: var(--ui-space-6) var(--ui-space-5); border-radius: var(--ui-radius-panel); }
html[data-layout-mode="tight"] .premium-showcase-visual { min-height: var(--dt-component-premium-visual-showcase-visual-compact-min-height); transform: scale(.88); transform-origin: center top; margin-bottom: calc(-1 * var(--ui-space-6)); }
html[data-layout-mode="tight"] .premium-page-card { padding: var(--ui-space-5); }
html[data-layout-mode="tight"] .premium-account-body { flex-direction: column; }
html[data-layout-mode="tight"] .premium-account-status { min-width: 0; width: 100%; }
html[data-layout-mode="tight"] .premium-plan-grid { grid-template-columns: 1fr; }
html[data-layout-mode="tight"] .premium-page-actions > * { width: 100%; }
html[data-layout-mode="tight"] .premium-donation-panel { gap: var(--ui-space-6); padding: var(--ui-space-6); } /* audit-keep: hình học riêng của khối, nằm giữa hai bậc thang (chênh hơn 2px) */
html[data-layout-mode="tight"] .premium-donation-qr-wrap { width: 100%; height: auto; aspect-ratio: 1; }
html[data-layout-mode="tight"] .premium-donation-panel .premium-donation-qr { width: calc(100% - var(--ui-space-5)); height: calc(100% - var(--ui-space-5)); }
html[data-layout-mode="tight"] .premium-donation-copy h2 { font-size: var(--fs-display-lg); }
} /* @layer legacy */

@layer modules {
  /* Nút mua gói: .ui-btn--primary, màu khối là màu thương hiệu Premium. */
  /* Chữ trên khối vàng là mực --on-orb (chữ trắng trên vàng chỉ 1.9–2.9:1).
     Thẻ Mua vĩnh viễn (nền cam) đảo lại: khối mực, chữ trắng (15:1). */
  .ui-btn.premium-plan-cta {
    --ui-btn-fill: var(--ui-module-premium);
    width: 100%;
    margin-top: auto;
    color: var(--dt-component-premium-visual-on-orb);
  }
  .premium-plan-card.is-lifetime .ui-btn.premium-plan-cta {
    --ui-btn-fill: var(--dt-component-premium-visual-on-orb);
    color: var(--ui-text-on-accent);
  }
}

/* Khai báo từng là !important trong @layer legacy — chuyển sang layer cuối `overrides`
   (thắng mọi khai báo thường ở mọi layer, đúng như cờ important cũ), cùng selector, cùng
   thứ tự, cùng ngữ cảnh @media. Sinh tự động 01/10/2026 (KE-HOACH-DAT-CHUAN-QUOC-TE-UI GĐ B–E);
   thuộc tính ẩn/hiện/định vị giữ cờ important vì JS gắn nội tuyến. */
@layer overrides {
  .premium-action-group .token-select-wrap { width: var(--dt-dimension-layout-160); }
  .premium-action-group .token-select-trigger { width: 100%; min-width: 100%; max-width: 100%; }
}