/* Glassy Aero — kính bóng kiểu Aero: viền sáng, dải bóng trên thanh tiêu đề và nút, nền trời sáng. */
@layer themes {
  :root[data-theme="glassy-aero"] {
    --aero-1: color-mix(in srgb, var(--erp-primary) 55%, #ffffff);
    --aero-ink: color-mix(in srgb, var(--erp-primary) 60%, #000000);
    --erp-bg: color-mix(in srgb, var(--erp-primary) 15%, #ffffff); --erp-bg-image: linear-gradient(180deg, color-mix(in srgb, var(--erp-primary) 26%, #ffffff) 0%, color-mix(in srgb, var(--erp-primary) 10%, #ffffff) 45%, color-mix(in srgb, var(--erp-primary) 4%, #ffffff) 100%);
    --erp-surface: #ffffff; --erp-surface-2: color-mix(in srgb, var(--erp-primary) 5%, #ffffff); --erp-surface-3: color-mix(in srgb, var(--erp-primary) 11%, #ffffff); --erp-panel-bg: rgba(255, 255, 255, .76);
    --erp-text: #102a43; --erp-text-muted: #3a556e; --erp-text-faint: #4d6680;
    --erp-border: color-mix(in srgb, var(--aero-1) 38%, transparent); --erp-border-strong: color-mix(in srgb, var(--aero-1) 55%, transparent);
    --erp-accent: #0b62c4;
    --erp-radius: 6px; --erp-radius-lg: 10px; --erp-blur: 12px; --erp-chrome-blur: 14px;
    --erp-shadow-sm: 0 1px 3px color-mix(in srgb, var(--aero-ink) 14%, transparent); --erp-shadow: 0 4px 14px color-mix(in srgb, var(--aero-ink) 16%, transparent); --erp-shadow-lg: 0 18px 42px color-mix(in srgb, var(--aero-ink) 28%, transparent);
    --erp-chrome-bg: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--erp-primary) 14%, #ffffff) 48%, color-mix(in srgb, var(--erp-primary) 30%, #ffffff) 52%, color-mix(in srgb, var(--erp-primary) 20%, #ffffff) 100%);
    --erp-chrome-text: color-mix(in srgb, var(--erp-primary) 25%, #0b1724); --erp-chrome-muted: color-mix(in srgb, var(--erp-primary) 40%, #1e2f45); --erp-chrome-hover: rgba(255, 255, 255, .6);
    --erp-ribbon-bg: rgba(255, 255, 255, .74); --erp-ribbon-tabs-bg: transparent; --erp-ribbon-tab-text: color-mix(in srgb, var(--erp-primary) 25%, #0b1724);
    --erp-ribbon-tab-active-bg: rgba(255, 255, 255, .94); --erp-ribbon-tab-active-text: var(--erp-primary); --erp-ribbon-border: color-mix(in srgb, var(--aero-1) 45%, transparent);
    --erp-ribbon-btn-hover: color-mix(in srgb, var(--erp-primary) 10%, #ffffff); --erp-ribbon-btn-active: color-mix(in srgb, var(--erp-primary) 22%, #ffffff);
    --erp-grid-head: color-mix(in srgb, var(--erp-primary) 7%, #ffffff); --erp-grid-line: color-mix(in srgb, var(--erp-primary) 12%, #ffffff); --erp-grid-selected: color-mix(in srgb, var(--erp-primary) 18%, #ffffff); --erp-grid-hover: color-mix(in srgb, var(--erp-primary) 8%, #ffffff);
    --erp-input-border: color-mix(in srgb, var(--aero-1) 5%, transparent);
  }
  :root[data-theme="glassy-aero"] .erp-titlebar { border-bottom: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 1px 0 color-mix(in srgb, var(--aero-1) 35%, transparent); }
  :root[data-theme="glassy-aero"] .erp-ribbon { box-shadow: inset 0 1px 0 #fff; }
  :root[data-theme="glassy-aero"] .erp-rbtn:hover { background: linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--erp-primary) 14%, #ffffff)); border-color: var(--aero-1); box-shadow: inset 0 1px 0 #fff; }
  :root[data-theme="glassy-aero"] .erp-btn { background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--erp-primary) 6%, #ffffff) 50%, color-mix(in srgb, var(--erp-primary) 13%, #ffffff) 51%, color-mix(in srgb, var(--erp-primary) 8%, #ffffff) 100%); }
  :root[data-theme="glassy-aero"] .erp-btn--primary, :root[data-theme="glassy-aero"] .erp-tbtn--primary {
    background: linear-gradient(180deg, color-mix(in srgb, var(--erp-primary) 70%, #ffffff) 0%, color-mix(in srgb, var(--erp-primary) 90%, #ffffff) 50%, var(--erp-primary) 51%, color-mix(in srgb, var(--erp-primary) 85%, #ffffff) 100%); color: var(--erp-on-primary); border-color: var(--aero-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
  }
  :root[data-theme="glassy-aero"] .erp-grid__table thead th { background: linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--erp-primary) 9%, #ffffff)); }
  :root[data-theme="glassy-aero"] .erp-toolbar, :root[data-theme="glassy-aero"] .erp-fieldset, :root[data-theme="glassy-aero"] .erp-filter { box-shadow: inset 0 1px 0 #fff, var(--erp-shadow-sm); border-color: rgba(255, 255, 255, .95); }
}