/* QC 10.47.1 — bộ Linh Phương, sinh tự động từ src/ (npm run export). Không sửa tay. */
:root {
  color-scheme: light;

  /* Màu */
  --skin-navy: #353b44;
  --skin-navy-strong: #111418;
  --skin-navy-mid: #4b5058;
  --skin-navy-soft: #f1f2f4;
  --skin-green: #38bb53;
  --skin-green-dark: #2ea247;
  --skin-green-hover: #35b04e;
  --skin-link: #1c6bb0;
  --skin-danger: #d64545;
  --skin-warn: #e8a33d;
  --skin-page: #f7f8fc;
  --skin-surface: #ffffff;
  --skin-border: #e2e8f2;
  --skin-border-strong: #cfd8e6;
  --skin-ink: #374151;
  --skin-muted: #64748b;
  --skin-field: #f7f8fc;
  --skin-blue: #1a73c8;
  --skin-blue-soft: #eef6ff;
  --skin-blue-border: #c2e0fc;
  --skin-orange: #e2820f;
  --skin-orange-soft: #fdecd9;
  --skin-green-soft: #e1f6e8;
  --skin-primary: #3a86ee;
  --skin-primary-light: #7ab6f7;
  --skin-primary-pale: #c2e0fc;
  --skin-primary-mist: #eef6ff;
  --skin-sky: #3a86ee;
  --skin-sky-soft: #eef6ff;
  --skin-sky-ink: #0c4a6e;
  --skin-launcher: #3a86ee;
  --skin-launcher-hover: #2f74ec;
  --skin-launcher-border-hover: #7ab6f7;
  --skin-launcher-panel: #f5f8fc;
  --skin-menu-ink: #33506f;
  --skin-menu-text: #020b27;
  --skin-menu-icon: #657384;
  --skin-toggle-ink: #0c4a6e;
  --skin-count: #e41e3f;
  --skin-close: #dc2626;
  --skin-lock: #5b6b80;
  --skin-heading: #3a86ee;
  --skin-heading-sub: #60778b;
  --skin-heading-icon: #3a86ee;
  --skin-heading-icon-bg: #eef6ff;
  --skin-workspace-card-border: #e4edf5;
  --skin-select-border: #d5dfeb;
  --skin-focus-outline: #7ab6f7;
  --skin-placeholder: #9aa8bd;
  --skin-table-head: #eef6ff;
  --skin-table-head-ink: #2b506c;
  --skin-table-rule: #eaf0f6;
  --skin-table-hover: #f5fbff;
  --skin-table-selected: #e8f6ff;
  --skin-cell-note: #688099;
  --skin-metric-border: #e4edf6;
  --skin-metric-tint: #eef6ff;
  --skin-metric-icon: #3a86ee;
  --skin-metric-icon-bg: #eef6ff;
  --skin-metric-value: #353b44;
  --skin-stock-low: #f08a12;
  --skin-stock-out: #94a3b8;
  --skin-stock-paused: #e0692f;
  --skin-locked: #e2e8f0;
  --skin-lock-active: #c0392b;
  --skin-error-fill: #fdecec;
  --skin-error-border: #f5c2c2;
  --skin-error-ink: #a02c2c;
  --skin-success-fill: #eaf7ee;
  --skin-success-border: #bfe6cb;
  --skin-success-ink: #256b3a;
  --skin-warning-fill: #fff6e5;
  --skin-warning-border: #ffd79a;
  --skin-warning-ink: #8a5300;
  --skin-danger-button: #f0f0f0;
  --skin-danger-button-border: #f2c9c9;
  --skin-soft-button: #e8f1fd;
  --skin-soft-button-hover: #dbe9fb;
  --skin-backdrop: rgba(10, 30, 55, 0.42);
  --skin-scrim: rgba(10, 30, 55, 0.38);
  --skin-footer: #353b44;
  --skin-footer-ink: rgba(255, 255, 255, 0.92);
  --skin-footer-link: rgba(255, 255, 255, 0.86);
  --skin-footer-text: rgba(255, 255, 255, 0.82);
  --skin-footer-copy: rgba(255, 255, 255, 0.72);
  --skin-footer-rule: rgba(255, 255, 255, 0.16);
  --skin-hero-gradient: linear-gradient(96deg, #1f2328 0%, #1f3a33 26%, #1d5545 44%, #1c7c73 74%, #26914c 100%);
  --skin-primary-gradient: linear-gradient(180deg, #3a86ee 0%, #7ab6f7 22%, #c2e0fc 50%, #eef6ff 100%);
  --skin-tone-blue: linear-gradient(135deg, #60a5fa 0%, #1d4ed8 100%);
  --skin-tone-blue-ink: #1d4ed8;
  --skin-tone-violet: linear-gradient(135deg, #a78bfa 0%, #6d28d9 100%);
  --skin-tone-violet-ink: #6d28d9;
  --skin-tone-orange: linear-gradient(135deg, #fdba74 0%, #ea580c 100%);
  --skin-tone-orange-ink: #ea580c;
  --skin-tone-green: linear-gradient(135deg, #6ee7b7 0%, #059669 100%);
  --skin-tone-green-ink: #059669;
  --skin-tone-teal: linear-gradient(135deg, #5eead4 0%, #0d9488 100%);
  --skin-tone-teal-ink: #0d9488;
  --skin-tone-rose: linear-gradient(135deg, #fda4af 0%, #e11d48 100%);
  --skin-tone-rose-ink: #e11d48;
  --skin-tone-indigo: linear-gradient(135deg, #a5b4fc 0%, #4338ca 100%);
  --skin-tone-indigo-ink: #4338ca;
  --skin-tone-amber: linear-gradient(135deg, #fcd34d 0%, #d97706 100%);
  --skin-tone-amber-ink: #d97706;
  --skin-tone-slate: linear-gradient(135deg, #94a3b8 0%, #475569 100%);
  --skin-tone-slate-ink: #475569;
  --skin-app-violet: #7b4fc9;
  --skin-app-violet-soft: #f1ebfb;
  --skin-app-violet-ink: #5b34a6;
  --skin-app-orange: #ea5b0c;
  --skin-app-orange-soft: #fff1e6;
  --skin-app-orange-ink: #c2410c;
  --skin-app-green: #12a150;
  --skin-app-green-soft: #e8f7ee;
  --skin-app-green-ink: #0f7a3d;

  /* Màu nhãn vai trò (trên nền sáng / trên nền xanh đậm) */
  --skin-role-admin: #dc2626;
  --skin-role-admin-on-dark: #ff7b7b;
  --skin-role-manager: #db2777;
  --skin-role-manager-on-dark: #ff9ad2;
  --skin-role-sales: #ea580c;
  --skin-role-sales-on-dark: #ffad5c;

  /* Tên biến gốc của website Linh Phương */
  --navy: var(--skin-navy);
  --navy-strong: var(--skin-navy-strong);
  --navy-mid: var(--skin-navy-mid);
  --navy-soft: var(--skin-navy-soft);
  --green: var(--skin-green);
  --green-dark: var(--skin-green-dark);
  --link: var(--skin-link);
  --danger: var(--skin-danger);
  --warn: var(--skin-warn);
  --page: var(--skin-page);
  --surface: var(--skin-surface);
  --border: var(--skin-border);
  --border-strong: var(--skin-border-strong);
  --ink: var(--skin-ink);
  --muted: var(--skin-muted);
  --field: var(--skin-field);
  --radius: var(--skin-radius-card);
  --radius-sm: var(--skin-radius-row);
  --shadow-card: var(--skin-shadow-card);
  --font: var(--skin-font-brand);
  --font-ui: var(--skin-font-ui);
  --ease-ios: var(--skin-ease-ios);
  --ease-ios-spring: var(--skin-ease-ios-spring);
  --motion-fast: var(--skin-motion-fast);
  --motion-base: var(--skin-motion-base);
  --motion-slow: var(--skin-motion-slow);
  --blue: var(--skin-blue);
  --blue-soft: var(--skin-blue-soft);
  --blue-border: var(--skin-blue-border);
  --orange: var(--skin-orange);
  --orange-soft: var(--skin-orange-soft);
  --green-soft: var(--skin-green-soft);

  /* Chữ */
  --skin-font-ui: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --skin-font-brand: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --skin-font-body: 400 15px/1.6 var(--skin-font-ui);
  --skin-font-brand-name: 700 19px/1.1 var(--skin-font-brand);
  --skin-font-brand-name-tracking: 0.01em;
  --skin-font-brand-name-transform: uppercase;
  --skin-font-input-phone: 400 16px/1.6 var(--skin-font-ui);

  /* Bo góc */
  --skin-radius-pill: 999px;
  --skin-radius-card: 12px;
  --skin-radius-card-workspace: 9px;
  --skin-radius-panel: 16px;
  --skin-radius-modal: 14px;
  --skin-radius-flyout: 14px;
  --skin-radius-launcher: 18px;
  --skin-radius-dropdown: 12px;
  --skin-radius-toast: 12px;
  --skin-radius-input: 10px;
  --skin-radius-input-public: 8px;
  --skin-radius-control: 10px;
  --skin-radius-menu-item: 9px;
  --skin-radius-row: 8px;
  --skin-radius-app-icon: 11px;
  --skin-app-icon-bg: transparent;

  /* Độ nổi */
  --skin-shadow-card: 0 1px 2px rgba(15, 57, 99, 0.06), 0 8px 24px rgba(15, 57, 99, 0.06);
  --skin-shadow-lift: 0 16px 34px rgba(15, 57, 99, 0.12);
  --skin-shadow-card-workspace: 0 2px 9px rgba(40, 91, 132, 0.063);
  --skin-shadow-flyout: 0 16px 40px rgba(15, 57, 99, 0.16);
  --skin-shadow-dropdown: 0 16px 34px rgba(15, 57, 99, 0.18);
  --skin-shadow-launcher: 0 22px 50px rgba(15, 57, 99, 0.22);
  --skin-shadow-modal: 0 24px 60px rgba(10, 30, 55, 0.28);
  --skin-shadow-toast: 0 14px 36px rgba(10, 30, 55, 0.18);
  --skin-shadow-confirm: 0 18px 40px rgba(15, 57, 99, 0.24);
  --skin-shadow-tabbar: 0 -4px 16px rgba(15, 57, 99, 0.08);
  --skin-shadow-input: 0 1px 2px rgba(15, 57, 99, 0.06), 0 2px 6px rgba(15, 57, 99, 0.05);
  --skin-shadow-focus: 0 0 0 3px rgba(27, 87, 159, 0.12);
  --skin-shadow-active-side: none;
  --skin-shadow-active-top: none;
  --skin-shadow-overdue: inset 3px 0 0 #f08c00;

  /* Lớp chồng */
  --skin-z-topbar: 30;
  --skin-z-sidebar: 40;
  --skin-z-dropdown: 40;
  --skin-z-topbar-list: 50;
  --skin-z-modal: 60;
  --skin-z-modal-phone: 120;
  --skin-z-login: 150;
  --skin-z-confirm: 70;
  --skin-z-launcher: 80;
  --skin-z-tabbar: 80;
  --skin-z-floating: 100;
  --skin-z-flyout: 120;
  --skin-z-sheet-phone: 130;
  --skin-z-toast: 200;

  /* Chuyển động */
  --skin-ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
  --skin-ease-ios-spring: cubic-bezier(0.22, 1.12, 0.36, 1);
  --skin-motion-fast: 180ms;
  --skin-motion-base: 420ms;
  --skin-motion-slow: 520ms;
  --skin-motion-button: 150ms;
  --skin-press-scale: 0.96;
  --skin-hover-lift: -2px;
  --skin-stagger-step: 60ms;
  --skin-toast-auto-hide: 5000ms;
  --skin-animation-page: skin-page-in 520ms cubic-bezier(0.32, 0.72, 0, 1) backwards;
  --skin-animation-header: skin-fade 420ms cubic-bezier(0.32, 0.72, 0, 1) backwards;
  --skin-animation-block: skin-rise 420ms cubic-bezier(0.32, 0.72, 0, 1) backwards;
  --skin-animation-sheet: skin-pop 420ms cubic-bezier(0.32, 0.72, 0, 1) backwards;
  --skin-animation-backdrop: skin-fade 180ms cubic-bezier(0.25, 0.1, 0.25, 1) backwards;
  --skin-animation-toast: skin-drop 180ms cubic-bezier(0, 0, 0.58, 1) backwards;

  /* Chuyển động điện thoại kiểu app Pet / MoMo (motion.phone) */
  --skin-animation-tab-icon: skin-icon-pop 420ms cubic-bezier(0.32, 0.72, 0, 1) backwards;
  --skin-phone-tab-press: 0.94;
  --skin-phone-tile-press: 0.88;
  --skin-phone-tile-stagger: 28ms;
  --skin-phone-row-press: 0.98;
  --skin-phone-drawer-width: min(84vw, 360px);
  --skin-phone-drawer-edge: 24px;
  --skin-phone-drawer-backdrop: 0.42;

  /* Chuyển động điện thoại theo bộ kit MoMo (@momo-kits/foundation 0.167.1, motion.phone) */
  --skin-ease-quad-in-out: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --skin-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --skin-ease-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --skin-ease-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --skin-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --skin-phone-press: 100ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --skin-phone-press-inset: 2px;
  --skin-phone-icon-press-opacity: 0.5;
  --skin-animation-tab-screen: skin-tab-screen 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955) backwards;
  --skin-phone-tab-indicator: 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --skin-animation-modal: skin-zoom 250ms cubic-bezier(0.2, 0, 0, 1) backwards;
  --skin-phone-modal-exit: 200ms cubic-bezier(0, 0, 1, 1);
  --skin-phone-sheet-enter: 350ms cubic-bezier(0.05, 0.7, 0.1, 1);
  --skin-phone-sheet-exit: 200ms cubic-bezier(0.3, 0, 0.8, 0.15);
  --skin-phone-sheet-dismiss-drag: 100px;
  --skin-phone-sheet-snap: 932ms linear(0, 0.0238, 0.0833, 0.1585, 0.2415, 0.3296, 0.4112, 0.4875, 0.5572, 0.6225, 0.6777, 0.7261, 0.7699, 0.806, 0.8369, 0.8643, 0.8866, 0.9053, 0.9212, 0.935, 0.9461, 0.9553, 0.9633, 0.9697, 0.975, 0.9795, 0.9832, 0.9861, 0.9886, 0.9907, 0.9924, 0.9937, 0.9949, 0.9958, 0.9966, 0.9972, 0.9977, 0.9981, 0.9985, 0.9988, 1);
  --skin-phone-skeleton-shimmer: 1000ms;
  --skin-phone-skeleton-reveal: 500ms;
  --skin-phone-badge-pulse: 2762ms linear(0, 0.0641, 0.2214, 0.4259, 0.6392, 0.8333, 0.9906, 1.1031, 1.1703, 1.1975, 1.1929, 1.1664, 1.1278, 1.0852, 1.0448, 1.0109, 0.9856, 0.9694, 0.9616, 0.9607, 0.9648, 0.9718, 0.9802, 0.9885, 0.9957, 1.0014, 1.0052, 1.0073, 1.0079, 1.0074, 1.0061, 1.0045, 1.0028, 1.0013, 1, 0.9992, 0.9986, 0.9984, 0.9985, 0.9987, 1);
  --skin-phone-badge-pulse-scale: 1.1;
  --skin-phone-carousel: 500ms cubic-bezier(0.25, 1, 0.5, 1);
  --skin-phone-collapse: 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --skin-phone-progress: 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955);

  /* Bố cục — điểm ngắt 640 / 760 (điện thoại; xoay ngang: cao ≤500 và rộng ≤1000) / 900 / 1100 / 1500px (CSS không dùng biến trong @media) */
  --skin-container-max: 2200px;
  --skin-container-padding: clamp(16px, 2.2vw, 36px);
  --skin-header-height: 70.4px;
  --skin-header-height-tablet: 66px;
  --skin-header-height-phone: 59.6px;
  --skin-logo-width: 112px;
  --skin-logo-width-phone: 88px;
  --skin-sidebar-width: 196px;
  --skin-sidebar-width-min: 0;
  --skin-sidebar-width-max: 240px;
  --skin-sidebar-width-collapsed: 58px;
  --skin-sidebar-bottom-gap: 0;
  --skin-panel-gap: 0;
  --skin-panel-radius: 0;
  --skin-sidebar-min-height: 240px;
  --skin-topbar-height: 58px;
  --skin-topbar-compact-height: 48px;
  --skin-topbar-rule-width: 0.5px;
  --skin-topbar-collapse-size: 28px;
  --skin-topbar-collapse-icon: 16px;
  --skin-topbar-rule-color: rgba(15, 23, 42, 0.07);
  --skin-topbar-compact-padding-x: 16px;
  --skin-topbar-compact-padding-y: 4px;
  --skin-topbar-compact-brand-icon: 28px;
  --skin-topbar-compact-brand-font: 16px;
  --skin-topbar-compact-control: 32px;
  --skin-folder-compact-search-width: 320px;
  --skin-folder-compact-search-height: 28px;
  --skin-folder-compact-toolbar-height: 36px;
  --skin-folder-compact-padding: 12px;
  --skin-folder-compact-section-gap: 12px;
  --skin-folder-compact-title-size: 16px;
  --skin-folder-menu-min-width: 230px;
  --skin-folder-menu-padding-y: 8px;
  --skin-folder-menu-row-height: 36px;
  --skin-folder-menu-padding-x: 16px;
  --skin-folder-menu-gap: 16px;
  --skin-folder-menu-font-size: 14px;
  --skin-folder-menu-radius: 4px;
  --skin-folder-menu-shadow: 0 2px 6px 2px rgba(60, 64, 67, .15), 0 1px 2px rgba(60, 64, 67, .3);

  /* Menu trên (menu chính, một dòng với đầu trang, 10.25.0) */
  --skin-topbar-item-height: 40px;
  --skin-topbar-item-padding: 9px 12px 9px 12px;
  --skin-topbar-item-gap: 2px;
  --skin-topbar-item-inner-gap: 7px;
  --skin-topbar-item-radius: 10px;
  --skin-topbar-icon: 17px;
  --skin-topbar-gap: 10px;
  --skin-topbar-font: 500 14px/1.429 var(--skin-font-ui);
  --skin-topbar-font-active: 700 14px/1.429 var(--skin-font-ui);
  --skin-tabbar-reserve: 76px;
  --skin-touch-min: 40px;
  --skin-touch-secondary: 36px;

  /* Nút */
  --skin-btn-navy-bg: #ffffff;
  --skin-btn-navy-fg: #3a86ee;
  --skin-btn-navy-border: #3a86ee;
  --skin-btn-navy-hover-bg: #eef6ff;
  --skin-btn-navy-hover-fg: #2f74ec;
  --skin-btn-navy-hover-border: #2f74ec;
  --skin-btn-green-bg: #ffffff;
  --skin-btn-green-fg: #3a86ee;
  --skin-btn-green-border: #3a86ee;
  --skin-btn-green-hover-bg: #eef6ff;
  --skin-btn-green-hover-fg: #2f74ec;
  --skin-btn-green-hover-border: #2f74ec;
  --skin-btn-outline-bg: #ffffff;
  --skin-btn-outline-fg: #3a86ee;
  --skin-btn-outline-border: #c2e0fc;
  --skin-btn-outline-hover-bg: #eef6ff;
  --skin-btn-outline-hover-fg: #2f74ec;
  --skin-btn-outline-hover-border: #7ab6f7;
  --skin-btn-soft-bg: #ffffff;
  --skin-btn-soft-fg: #3a86ee;
  --skin-btn-soft-border: #c2e0fc;
  --skin-btn-soft-hover-bg: #eef6ff;
  --skin-btn-soft-hover-fg: #2f74ec;
  --skin-btn-soft-hover-border: #7ab6f7;
  --skin-btn-danger-bg: #ffffff;
  --skin-btn-danger-fg: #d64545;
  --skin-btn-danger-border: #f2c9c9;
  --skin-btn-danger-hover-bg: #fdecec;
  --skin-btn-danger-hover-fg: #d64545;
  --skin-btn-danger-hover-border: #f2c9c9;
  --skin-btn-ghost-light-bg: #ffffff;
  --skin-btn-ghost-light-fg: #3a86ee;
  --skin-btn-ghost-light-hover-bg: #eef6ff;
  --skin-btn-ghost-light-hover-fg: #2f74ec;
  --skin-btn-ghost-light-border: transparent;
  --skin-btn-ghost-light-hover-border: transparent;
  --skin-btn-md-padding: 0 26px 0 26px;
  --skin-btn-md-height: 44px;
  --skin-btn-md-font: 600 14px/normal var(--skin-font-ui);
  --skin-btn-sm-padding: 0 12px 0 12px;
  --skin-btn-sm-height: 32px;
  --skin-btn-sm-font: 600 12.5px/normal var(--skin-font-ui);
  --skin-btn-disabled-opacity: 0.6;
  --skin-btn-row-gap: 8px;
  --skin-icon-button-size: 34px;
  --skin-icon-button-icon: 16px;
  --skin-icon-button-radius: 10px;
  --skin-checkbox-size: 16px;
  --skin-checkbox-border: 1.5px;
  --skin-checkbox-radius: 4px;
  --skin-checkbox-tick: 12px;
  --skin-checkbox-border-off: #cfd8e6;
  --skin-checkbox-border-on: #3a86ee;
  --skin-checkbox-tick-color: #3a86ee;

  /* Chip, nhãn, tab */
  --skin-chip-padding: 8px 18px 8px 18px;
  --skin-chip-font: 600 13px/normal var(--skin-font-ui);
  --skin-chip-bg: #ffffff;
  --skin-chip-fg: #353b44;
  --skin-chip-border: #c2e0fc;
  --skin-chip-hover-bg: #ffffff;
  --skin-chip-hover-fg: #4b5058;
  --skin-chip-hover-border: #4b5058;
  --skin-chip-active-bg: #1a73c8;
  --skin-chip-active-fg: #ffffff;
  --skin-chip-active-border: #1a73c8;
  --skin-badge-padding: 4px 12px 4px 12px;
  --skin-badge-font: 600 11.5px/1.6 var(--skin-font-ui);
  --skin-badge-default-bg: #3a86ee;
  --skin-badge-default-fg: #ffffff;
  --skin-badge-in-stock-bg: #38bb53;
  --skin-badge-in-stock-fg: #ffffff;
  --skin-badge-low-stock-bg: #f08a12;
  --skin-badge-low-stock-fg: #ffffff;
  --skin-badge-out-of-stock-bg: #94a3b8;
  --skin-badge-out-of-stock-fg: #ffffff;
  --skin-badge-temporarily-out-bg: #e0692f;
  --skin-badge-temporarily-out-fg: #ffffff;
  --skin-badge-coming-soon-bg: #e8a33d;
  --skin-badge-coming-soon-fg: #ffffff;
  --skin-badge-locked-bg: #e2e8f0;
  --skin-badge-locked-fg: #353b44;
  --skin-badge-otc-bg: #edf8f1;
  --skin-badge-otc-fg: #15803d;
  --skin-badge-rx-bg: #fff1f3;
  --skin-badge-rx-fg: #be123c;
  --skin-badge-rx-optional-bg: #eef5ff;
  --skin-badge-rx-optional-fg: #1d4ed8;
  --skin-status-unpaid-bg: #fef2f2;
  --skin-status-unpaid-fg: #b91c1c;
  --skin-status-unpaid-border: #fca5a5;
  --skin-status-paid-bg: #f0fdf4;
  --skin-status-paid-fg: #15803d;
  --skin-status-paid-border: #86efac;
  --skin-status-loyalty-bg: #fff4e5;
  --skin-status-loyalty-fg: #c2410c;
  --skin-status-loyalty-border: #f6cf9c;
  --skin-status-overdue-bg: #fff1e0;
  --skin-status-overdue-fg: #a14b00;
  --skin-rating-star: #f59e0b;
  --skin-rating-empty: #d6dde6;
  --skin-tab-padding: 9px 10px 9px 10px;
  --skin-tab-font: 600 12.5px/normal var(--skin-font-ui);
  --skin-tab-bg: #ffffff;
  --skin-tab-fg: #64748b;
  --skin-tab-border: #e2e8f2;
  --skin-tab-active-bg: #eef6ff;
  --skin-tab-active-fg: #1a73c8;
  --skin-tab-active-border: #7ab6f7;
  --skin-tab-panels-stack: 1 / 1;
  --skin-tab-panels-inactive: hidden;
  --skin-tab-panels-align: start;

  /* Ô nhập */
  --skin-input-padding: 7px 10px 7px 10px;
  --skin-input-height: 36px;
  --skin-input-font: 400 13px/1.6 var(--skin-font-ui);
  --skin-input-bg: #fbfdff;
  --skin-input-fg: #214261;
  --skin-input-border: #dce7f0;
  --skin-input-shadow: 0 1px 2px rgba(15, 57, 99, 0.06), 0 2px 6px rgba(15, 57, 99, 0.05);
  --skin-input-focus-bg: #ffffff;
  --skin-input-focus-fg: #214261;
  --skin-input-focus-border: #4b5058;
  --skin-input-focus-shadow: 0 0 0 3px rgba(27, 87, 159, 0.12);
  --skin-label-font: 600 12.5px/1.6 var(--skin-font-ui);
  --skin-label-color: #353b44;

  /* Thẻ, thông báo trong trang, bảng */
  --skin-card-bg: #ffffff;
  --skin-card-fg: #374151;
  --skin-card-border: #e2e8f2;
  --skin-card-border-width: 1px;
  --skin-card-radius: 12px;
  --skin-card-padding: 24px 24px 24px 24px;
  --skin-card-shadow: 0 1px 2px rgba(15, 57, 99, 0.06), 0 8px 24px rgba(15, 57, 99, 0.06);
  --skin-card-workspace-bg: #ffffff;
  --skin-card-workspace-fg: #374151;
  --skin-card-workspace-border: #e4edf5;
  --skin-card-workspace-border-width: 1px;
  --skin-card-workspace-radius: 9px;
  --skin-card-workspace-padding: 18px 18px 18px 18px;
  --skin-card-workspace-shadow: 0 2px 9px rgba(40, 91, 132, 0.063);
  --skin-card-title-font: 700 16px/1.6 var(--skin-font-ui);
  --skin-card-title-color: #3a86ee;
  --skin-gallery-tile-min: 280px;
  --skin-gallery-gap: 16px;
  --skin-gallery-row-gap: 28px;
  --skin-gallery-thumb-ratio: 16 / 9;
  --skin-gallery-radius: 12px;
  --skin-gallery-thumb-bg: #f1f2f4;
  --skin-gallery-name-gap: 10px;
  --skin-gallery-name-font: 700 16px/1.6 var(--skin-font-ui);
  --skin-gallery-name-color: #353b44;
  --skin-gallery-meta-font: 400 12.5px/1.6 var(--skin-font-ui);
  --skin-gallery-meta-color: #64748b;
  --skin-gallery-hover-lift: -2px;
  --skin-gallery-hover-shadow: 0 16px 34px rgba(15, 57, 99, 0.12);
  --skin-alert-padding: 12px 15px 12px 15px;
  --skin-alert-error-bg: #fdecec;
  --skin-alert-error-fg: #a02c2c;
  --skin-alert-error-border: #f5c2c2;
  --skin-alert-success-bg: #eaf7ee;
  --skin-alert-success-fg: #256b3a;
  --skin-alert-success-border: #bfe6cb;
  --skin-alert-warning-bg: #fff6e5;
  --skin-alert-warning-fg: #8a5300;
  --skin-alert-warning-border: #ffd79a;
  --skin-table-font: 400 12px/1.6 var(--skin-font-ui);
  --skin-table-head-font: 700 11px/1.6 var(--skin-font-ui);
  --skin-table-head-color: #2b506c;
  --skin-table-head-bg: #eef6ff;
  --skin-table-head-padding: 13px 10px 13px 10px;
  --skin-table-cell-padding: 12px 10px 12px 10px;

  /* Lớp nổi */
  --skin-modal-bg: #ffffff;
  --skin-modal-fg: #374151;
  --skin-modal-border-width: 0;
  --skin-modal-radius: 14px;
  --skin-modal-padding: 24px 24px 24px 24px;
  --skin-modal-shadow: 0 24px 60px rgba(10, 30, 55, 0.28);
  --skin-modal-width: 520px;
  --skin-toast-bg: #ffffff;
  --skin-toast-fg: #374151;
  --skin-toast-border: #e2e8f2;
  --skin-toast-border-width: 1px;
  --skin-toast-radius: 12px;
  --skin-toast-padding: 12px 12px 12px 14px;
  --skin-toast-shadow: 0 14px 36px rgba(10, 30, 55, 0.18);
  --skin-toast-width: 460px;
  --skin-toast-top: 84px;
  --skin-toast-top-phone: 12px;
  --skin-toast-font: 400 14px/1.45 var(--skin-font-ui);
  --skin-toast-success-bg: #f0fdf4;
  --skin-toast-success-fg: #166534;
  --skin-toast-success-border: #86efac;
  --skin-toast-error-bg: #fef2f2;
  --skin-toast-error-fg: #991b1b;
  --skin-toast-error-border: #fca5a5;
  --skin-toast-warning-bg: #fffbeb;
  --skin-toast-warning-fg: #92400e;
  --skin-toast-warning-border: #fcd34d;
  --skin-toast-info-bg: #eff6ff;
  --skin-toast-info-fg: #1e3a8a;
  --skin-toast-info-border: #93c5fd;
  --skin-confirm-bg: #ffffff;
  --skin-confirm-fg: #374151;
  --skin-confirm-border: #cfd8e6;
  --skin-confirm-border-width: 1px;
  --skin-confirm-radius: 12px;
  --skin-confirm-padding: 12px 14px 12px 14px;
  --skin-confirm-shadow: 0 18px 40px rgba(15, 57, 99, 0.24);
  --skin-confirm-bottom-phone: 88px;
  --skin-dropdown-bg: #ffffff;
  --skin-dropdown-fg: #374151;
  --skin-dropdown-border: #cfd8e6;
  --skin-dropdown-border-width: 1px;
  --skin-dropdown-radius: 12px;
  --skin-dropdown-padding: 8px 8px 8px 8px;
  --skin-dropdown-shadow: 0 16px 34px rgba(15, 57, 99, 0.18);
  --skin-dropdown-row-padding: 10px 10px 10px 10px;
  --skin-dropdown-row-radius: 8px;
  --skin-dropdown-row-gap: 8px;
  --skin-dropdown-row-icon: 16px;
  --skin-dropdown-row-font: 400 13.5px/1.6 var(--skin-font-ui);
  --skin-dropdown-row-fg: #374151;
  --skin-dropdown-row-hover-bg: #f1f2f4;
  --skin-dropdown-row-hover-fg: #353b44;
  --skin-dropdown-row-danger-fg: #d64545;
  --skin-flyout-bg: #ffffff;
  --skin-flyout-fg: #374151;
  --skin-flyout-border: #e2e8f2;
  --skin-flyout-border-width: 1px;
  --skin-flyout-radius: 14px;
  --skin-flyout-padding: 14px 10px 10px 10px;
  --skin-flyout-shadow: 0 16px 40px rgba(15, 57, 99, 0.16);
  --skin-flyout-mega-padding: 12px 10px 8px 10px;
  --skin-flyout-mega-section-gap: 8px;
  --skin-flyout-mega-title-font: 700 13px/1.6 var(--skin-font-ui);
  --skin-flyout-mega-title-color: #374151;
  --skin-flyout-mega-title-margin: 0 6px 6px 6px;
  --skin-flyout-mega-tile: 84px;
  --skin-flyout-mega-tile-gap: 2px;
  --skin-flyout-mega-columns: 6;
  --skin-flyout-mega-tile-padding: 7px 3px 6px 3px;
  --skin-flyout-mega-tile-radius: 10px;
  --skin-flyout-mega-tile-inner-gap: 5px;
  --skin-flyout-mega-tile-font: 400 12px/1.3 var(--skin-font-ui);
  --skin-flyout-mega-item-bg: transparent;
  --skin-flyout-mega-item-fg: #33506f;
  --skin-flyout-mega-item-hover-bg: #f5f8fc;
  --skin-flyout-mega-item-hover-fg: #353b44;
  --skin-flyout-mega-item-active-bg: #eef6ff;
  --skin-flyout-mega-item-active-fg: #353b44;
  --skin-flyout-mega-icon: 36px;
  --skin-flyout-mega-icon-radius: 10px;
  --skin-flyout-mega-icon-lift: 2px;
  --skin-flyout-mega-tile-min-stacked: 80px;
  --skin-flyout-mega-tone-blue-fg: #1d63c9;
  --skin-flyout-mega-tone-blue-bg: linear-gradient(145deg, #e8f1ff 0%, #d6e6ff 100%);
  --skin-flyout-mega-tone-green-fg: #15803d;
  --skin-flyout-mega-tone-green-bg: linear-gradient(145deg, #e9f9ef 0%, #d3f2df 100%);
  --skin-flyout-mega-tone-orange-fg: #c2410c;
  --skin-flyout-mega-tone-orange-bg: linear-gradient(145deg, #fff1e6 0%, #ffe1cc 100%);
  --skin-flyout-mega-tone-purple-fg: #7c3aed;
  --skin-flyout-mega-tone-purple-bg: linear-gradient(145deg, #f3edff 0%, #e6dbff 100%);
  --skin-flyout-mega-tone-rose-fg: #db2777;
  --skin-flyout-mega-tone-rose-bg: linear-gradient(145deg, #ffeef5 0%, #ffdbe9 100%);
  --skin-flyout-mega-tone-teal-fg: #0f766e;
  --skin-flyout-mega-tone-teal-bg: linear-gradient(145deg, #e6f8f6 0%, #cdf0eb 100%);
  --skin-flyout-mega-tone-amber-fg: #b45309;
  --skin-flyout-mega-tone-amber-bg: linear-gradient(145deg, #fff7e0 0%, #ffebb8 100%);
  --skin-flyout-mega-tone-indigo-fg: #4338ca;
  --skin-flyout-mega-tone-indigo-bg: linear-gradient(145deg, #eef0ff 0%, #dde1ff 100%);
  --skin-floating-bg: #ffffff;
  --skin-floating-fg: #1f1f1f;
  --skin-floating-border-width: 0;
  --skin-floating-radius: 28px;
  --skin-floating-padding: 0 0 0 0;
  --skin-floating-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
  --skin-chat-composer-surface: 50%;
  --skin-chat-composer-blur: 6px;
  --skin-chat-composer-saturation: 1.6;
  --skin-floating-width: 280px;
  --skin-floating-min-width: 240px;
  --skin-floating-max-width: 360px;
  --skin-floating-inset: 24px;
  --skin-floating-head-height: 64px;
  --skin-floating-head-divider: transparent;
  --skin-floating-title-font: 400 18px/1.33 var(--skin-font-ui);
  --skin-floating-title-color: #1f1f1f;
  --skin-floating-button-size: 40px;
  --skin-floating-button-icon: 20px;
  --skin-floating-button-gap: 0;
  --skin-floating-button-radius: 20px;
  --skin-floating-button-bg: transparent;
  --skin-floating-button-fg: #444746;
  --skin-floating-button-hover-bg: rgba(31, 31, 31, 0.08);
  --skin-floating-button-hover-fg: #444746;
  --skin-floating-body-padding: 0 24px 24px 24px;
  --skin-floating-body-gap: 10px;
  --skin-floating-offset: 8px;
  --skin-floating-edge-margin: 8px;
  --skin-floating-actions-gap: 8px;
  --skin-floating-actions-top: 24px;
  --skin-floating-action-height: 40px;
  --skin-floating-action-padding: 0 12px 0 12px;
  --skin-floating-action-min-width: 64px;
  --skin-floating-action-radius: 20px;
  --skin-floating-action-font: 500 14px/1.43 var(--skin-font-ui);
  --skin-floating-action-bg: transparent;
  --skin-floating-action-fg: #0b57d0;
  --skin-floating-action-hover-bg: rgba(11, 87, 208, 0.08);
  --skin-floating-action-hover-fg: #0b57d0;
  --skin-floating-action-pressed-bg: rgba(11, 87, 208, 0.1);
  --skin-floating-action-pressed-fg: #0b57d0;
  --skin-launcher-panel-bg: #f5f8fc;
  --skin-launcher-panel-fg: #374151;
  --skin-launcher-panel-border: #e2e8f2;
  --skin-launcher-panel-border-width: 1px;
  --skin-launcher-panel-radius: 18px;
  --skin-launcher-panel-padding: 14px 18px 18px 18px;
  --skin-launcher-panel-shadow: 0 22px 50px rgba(15, 57, 99, 0.22);
  --skin-launcher-phone-inset: 10px;
  --skin-launcher-locked-opacity: 0.6;

  /* Mục bị khoá với người xem */
  --skin-blocked-opacity: 0.45;
  --skin-blocked-filter: grayscale(1);
  --skin-blocked-tip-top: 56px;
  --skin-blocked-tip-above-gap: 6px;
  --skin-blocked-tip-max-width: min(260px, calc(100% - 16px));
  --skin-blocked-tip-bg: #3a86ee;
  --skin-blocked-tip-fg: #ffffff;
  --skin-blocked-tip-border-width: 0;
  --skin-blocked-tip-radius: 8px;
  --skin-blocked-tip-padding: 8px 12px 8px 12px;
  --skin-blocked-tip-shadow: 0 6px 18px rgba(15, 41, 77, 0.25);
  --skin-blocked-tip-font: 600 13px/1.4 var(--skin-font-ui);
  --skin-blocked-tip-color: #ffffff;
  --skin-z-blocked-tip: 30;
  --skin-blocked-tip-duration: 150ms;
  --skin-blocked-tip-rise: 4px;

  /* Khung đăng nhập */
  --skin-login-width: 360px;
  --skin-login-card-bg: #ffffff;
  --skin-login-card-fg: #374151;
  --skin-login-card-border: #e2e8f2;
  --skin-login-card-border-width: 1px;
  --skin-login-card-radius: 14px;
  --skin-login-card-padding: 20px 20px 16px 20px;
  --skin-login-card-shadow: 0 1px 2px rgba(15, 57, 99, 0.06), 0 8px 24px rgba(15, 57, 99, 0.06);
  --skin-login-title-font: 700 19px/1.6 var(--skin-font-ui);
  --skin-login-title-color: #353b44;
  --skin-login-field-height: 36px;
  --skin-login-quick-bg: #ffffff;
  --skin-login-quick-fg: #0f2f5a;
  --skin-login-quick-border: #dadce0;
  --skin-login-quick-border-width: 1px;
  --skin-login-quick-radius: 4px;
  --skin-login-quick-padding: 8px 10px 8px 10px;
  --skin-login-quick-shadow: none;
  --skin-login-quick-hover-bg: #f7faff;
  --skin-login-quick-hover-fg: #0f2f5a;
  --skin-login-quick-hover-border: #c6dafc;
  --skin-login-social-bg: #ffffff;
  --skin-login-social-fg: #353b44;
  --skin-login-social-border: #e2e8f2;
  --skin-login-social-border-width: 1px;
  --skin-login-social-radius: 8px;
  --skin-login-social-padding: 0 8px 0 8px;
  --skin-login-social-shadow: none;
  --skin-login-social-hover-bg: #f1f2f4;
  --skin-login-social-hover-fg: #353b44;
  --skin-login-social-hover-border: #4b5058;
  --skin-login-muted: #5e6d82;

  /* Các thanh */
  --skin-header-button-bg: #ffffff;
  --skin-header-button-fg: #353b44;
  --skin-header-button-border: #e2e8f2;
  --skin-header-button-hover-bg: #f1f2f4;
  --skin-header-button-hover-fg: #353b44;
  --skin-header-button-hover-border: #4b5058;
  --skin-account-bg: #ffffff;
  --skin-account-fg: #353b44;
  --skin-account-border: #cfd8e6;
  --skin-account-open-bg: #3a86ee;
  --skin-account-open-fg: #ffffff;
  --skin-account-open-border: #3a86ee;
  --skin-launcher-button-bg: #ffffff;
  --skin-launcher-button-fg: #3a86ee;
  --skin-launcher-button-border: #e2e8f2;
  --skin-launcher-button-hover-bg: #ffffff;
  --skin-launcher-button-hover-fg: #2f74ec;
  --skin-launcher-button-hover-border: #7ab6f7;
  --skin-nav-font: 600 13px/1.6 var(--skin-font-ui);
  --skin-nav-font-tracking: 0.03em;
  --skin-nav-font-transform: uppercase;
  --skin-header-search-height: 40px;
  --skin-header-search-radius: 999px;
  --skin-header-search-font: 400 14px/1.6 var(--skin-font-ui);
  --skin-header-search-padding-left: 36px;
  --skin-header-search-padding-right: 46px;
  --skin-header-search-max-width: 380px;
  --skin-header-search-centered-max: 560px;
  --skin-header-search-bg: #f7f8fc;
  --skin-header-search-border: #cfd8e6;
  --skin-header-search-focus-bg: #ffffff;
  --skin-header-search-focus-border: #4b5058;
  --skin-header-search-voice: 34px;
  --skin-header-search-listening-bg: #dc2626;
  --skin-header-search-listening-fg: #ffffff;

  /* Thẻ số liệu có biểu tượng (KPI) */
  --skin-kpi-bg: #ffffff;
  --skin-kpi-fg: #374151;
  --skin-kpi-border: #e2e8f2;
  --skin-kpi-border-width: 1px;
  --skin-kpi-radius: 14px;
  --skin-kpi-padding: 14px 16px 14px 16px;
  --skin-kpi-shadow: 0 2px 8px rgba(15, 57, 99, 0.05);
  --skin-kpi-hover-border: #bcd3f0;
  --skin-kpi-hover-shadow: 0 6px 16px rgba(15, 57, 99, 0.1);
  --skin-kpi-min-width: 190px;
  --skin-kpi-icon: 42px;
  --skin-kpi-icon-radius: 12px;
  --skin-kpi-label-font: 400 12.5px/1.6 var(--skin-font-ui);
  --skin-kpi-label-color: #64748b;
  --skin-kpi-value-font: 700 22px/1.25 var(--skin-font-ui);
  --skin-kpi-value-color: #353b44;
  --skin-kpi-note-font: 400 12px/1.6 var(--skin-font-ui);
  --skin-kpi-note-color: #64748b;
  --skin-kpi-tone-blue-bg: #e8f1ff;
  --skin-kpi-tone-blue-fg: #1d63c9;
  --skin-kpi-tone-green-bg: #e9f9ef;
  --skin-kpi-tone-green-fg: #15803d;
  --skin-kpi-tone-purple-bg: #f3edff;
  --skin-kpi-tone-purple-fg: #7c3aed;
  --skin-kpi-tone-amber-bg: #fff7e0;
  --skin-kpi-tone-amber-fg: #b45309;
  --skin-kpi-tone-teal-bg: #e6f8f6;
  --skin-kpi-tone-teal-fg: #0f766e;
  --skin-sidebar-bg: #ffffff;
  --skin-sidebar-fg: #353b44;
  --skin-sidebar-border: #e2e8f2;
  --skin-sidebar-border-width: 1px;
  --skin-sidebar-radius: 16px;
  --skin-sidebar-padding: 12px 8px 12px 8px;
  --skin-sidebar-shadow: 0 1px 2px rgba(15, 57, 99, 0.06), 0 8px 24px rgba(15, 57, 99, 0.06);
  --skin-menu-hover-bg: transparent;
  --skin-menu-hover-fg: #020b27;
  --skin-menu-font: 500 14px/1.429 var(--skin-font-ui);
  --skin-topbar-bg: #ffffff;
  --skin-topbar-fg: #353b44;
  --skin-topbar-border: #e2e8f2;
  --skin-topbar-border-width: 1px;
  --skin-topbar-radius: 16px;
  --skin-topbar-padding: 8px 10px 8px 10px;
  --skin-topbar-shadow: 0 1px 2px rgba(15, 57, 99, 0.06), 0 8px 24px rgba(15, 57, 99, 0.06);
  --skin-tabbar-active: #3a86ee;
  --skin-tabbar-font: 500 11px/1.15 var(--skin-font-ui);
  --skin-page-title-font: 700 23px/1.25 var(--skin-font-ui);
  --skin-page-title-color: #3a86ee;
  --skin-page-subtitle-font: 400 13px/1.6 var(--skin-font-ui);
  --skin-page-subtitle-color: #60778b;
}

@keyframes skin-fade {
  from { opacity: 0; }
  to { opacity: 1; transform: none; }
}
@keyframes skin-rise {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes skin-page-in {
  from { opacity: 0; transform: translate3d(26px, 0, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes skin-pop {
  from { opacity: 0; transform: scale(0.94) translate3d(0, 18px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes skin-drop {
  from { opacity: 0; transform: translate3d(0, -8px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes skin-icon-pop {
  from { opacity: 0; transform: scale(0.2) translate3d(0, 0, 0); }
  60% { opacity: 1; transform: scale(1.25) translate3d(0, 0, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes skin-tab-screen {
  from { opacity: 0.3; transform: scale(0.97) translate3d(0, 0, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes skin-zoom {
  from { opacity: 0; transform: scale(0.8) translate3d(0, 0, 0); }
  to { opacity: 1; transform: none; }
}

/* Tôn trọng thiết lập giảm chuyển động của hệ điều hành. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}