/**
 * ============================================================================
 * THEMES.CSS — HỆ THỐNG 36 THEME ĐA GIAO DIỆN (PHASE 12)
 * ============================================================================
 * Nhóm A: 5 Presets màu đơn
 * Nhóm B: 15 Themes x 2 Biến thể (Nền & bóng / Tối giản) = 30 Themes
 * Nhóm C: Tùy chỉnh màu (Custom Color) qua CSS variables
 * Default: Tím Đêm (:root, .theme-dark-purple)
 */

/* ============================================================================
 * 0. DEFAULT: TÍM ĐÊM (THEME GỐC)
 * ============================================================================ */
:root, .theme-dark-purple {
  --bg-page: #080522;
  --bg-page-gradient: radial-gradient(circle at 50% 30%, #150F3B, #08051A);
  --bg-sidebar: rgba(11, 8, 38, 0.95);
  --bg-card: rgba(11, 8, 38, 0.7);
  --bg-card-alt: rgba(20, 14, 56, 0.8);
  --bg-input: rgba(255, 255, 255, 0.05);
  --bg-overlay: rgba(0, 0, 0, 0.6);
  --border-color: rgba(142, 77, 255, 0.2);
  --border-card: rgba(142, 77, 255, 0.15);
  --text-primary: #FFFFFF;
  --text-secondary: #A6ADCE;
  --text-muted: rgba(255, 255, 255, 0.4);
  --color-primary: #8E4DFF;
  --color-primary-light: #C4B5FD;
  --color-primary-rgb: 142, 77, 255;
  --color-primary-dark: #6B2ECC;
  --color-accent-kpi: #C4B5FD;
  --kpi-number-color: #FFFFFF;
  --chart-bar: #8E4DFF;
  --chart-bar-rgb: 142, 77, 255;
  --btn-bg: linear-gradient(135deg, #8E4DFF, #6B2ECC);
  --btn-text: #FFFFFF;
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-primary: 0 4px 20px rgba(142, 77, 255, 0.3);
  --nav-active-bg: rgba(142, 77, 255, 0.15);
  --nav-active-text: #C4B5FD;
  --nav-hover-bg: rgba(255, 255, 255, 0.05);
  --sidebar-border: rgba(142, 77, 255, 0.2);
  --scrollbar-thumb: rgba(142, 77, 255, 0.4);
  --text-heading: #C4B5FD;
  --header-bg: rgba(3, 8, 29, 0.7);
  --header-border: rgba(255, 255, 255, 0.05);
  --nav-btn-text: #E2E8F0;
  --glass-bg: rgba(255, 255, 255, 0.10);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.10);
  --glass-blur: 20px;
  --glass-inner: rgba(255, 255, 255, 0.08);
  --glass-inner-border: rgba(255, 255, 255, 0.15);
  --is-dark-theme: 1;
}

/* ============================================================================
 * NHÓM A — 5 PRESETS MÀU ĐƠN
 * ============================================================================ */

/* A1. Xanh gốc */
.preset-blue {
  --bg-page: #F8FAFC;
  --bg-page-gradient: radial-gradient(ellipse at 20% 30%, #C8D8F8 0%, transparent 50%), radial-gradient(ellipse at 80% 15%, #B8CCFF 0%, transparent 45%), radial-gradient(ellipse at 50% 75%, #D8E8FF 0%, transparent 55%), linear-gradient(135deg, #F0F4F8, #D8E4F8);
  --bg-sidebar: #EDF2F7;
  --bg-card: #FFFFFF;
  --bg-card-alt: #F1F5F9;
  --bg-input: #F8FAFC;
  --bg-overlay: rgba(0, 0, 0, 0.4);
  --border-color: #CBD5E1;
  --border-card: #E2E8F0;
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #94A3B8;
  --color-primary: #2563EB;
  --color-primary-light: #60A5FA;
  --color-primary-rgb: 37, 99, 235;
  --color-primary-dark: #1D4ED8;
  --color-accent-kpi: #2563EB;
  --kpi-number-color: #0F172A;
  --chart-bar: #2563EB;
  --chart-bar-rgb: 37, 99, 235;
  --btn-bg: linear-gradient(135deg, #2563EB, #1D4ED8);
  --btn-text: #FFFFFF;
  --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.05);
  --shadow-primary: 0 4px 15px rgba(37, 99, 235, 0.25);
  --nav-active-bg: rgba(37, 99, 235, 0.12);
  --nav-active-text: #1D4ED8;
  --nav-hover-bg: rgba(0, 0, 0, 0.03);
  --sidebar-border: #CBD5E1;
  --scrollbar-thumb: rgba(37, 99, 235, 0.4);
  --text-heading: #1D4ED8;
  --header-bg: rgba(237, 242, 247, 0.97);
  --header-border: #E2E8F0;
  --nav-btn-text: #475569;
  --glass-bg: rgba(255, 255, 255, 0.52);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255,255,255,0.8);
  --glass-blur: 14px;
  --glass-inner: rgba(255, 255, 255, 0.55);
  --glass-inner-border: rgba(255, 255, 255, 0.70);
  --is-dark-theme: 0;
}

/* A2. Hồng hoa */
.preset-hong-hoa {
  --bg-page: #FFF5F8;
  --bg-page-gradient: radial-gradient(ellipse at 20% 30%, #F8C0D8 0%, transparent 50%), radial-gradient(ellipse at 80% 15%, #FFB0CC 0%, transparent 45%), radial-gradient(ellipse at 50% 75%, #FFD0E8 0%, transparent 55%), linear-gradient(135deg, #FFF0F5, #FFD8EC);
  --bg-sidebar: #FCE8EF;
  --bg-card: #FFFFFF;
  --bg-card-alt: #FFF0F5;
  --bg-input: #FFF5F8;
  --bg-overlay: rgba(0, 0, 0, 0.4);
  --border-color: #F8BBD0;
  --border-card: #FCE4EC;
  --text-primary: #3E1828;
  --text-secondary: #88385A;
  --text-muted: #BA708A;
  --color-primary: #C0608E;
  --color-primary-light: #E588B4;
  --color-primary-rgb: 192, 96, 142;
  --color-primary-dark: #9A406C;
  --color-accent-kpi: #C0608E;
  --kpi-number-color: #3E1828;
  --chart-bar: #C0608E;
  --chart-bar-rgb: 192, 96, 142;
  --btn-bg: linear-gradient(135deg, #C0608E, #9A406C);
  --btn-text: #FFFFFF;
  --shadow-card: 0 2px 10px rgba(192, 96, 142, 0.08);
  --shadow-primary: 0 4px 15px rgba(192, 96, 142, 0.25);
  --nav-active-bg: rgba(192, 96, 142, 0.12);
  --nav-active-text: #9A406C;
  --nav-hover-bg: rgba(192, 96, 142, 0.05);
  --sidebar-border: #F8BBD0;
  --scrollbar-thumb: rgba(192, 96, 142, 0.4);
  --text-heading: #9A406C;
  --header-bg: rgba(252, 232, 239, 0.97);
  --header-border: #FCE4EC;
  --nav-btn-text: #88385A;
  --glass-bg: rgba(255, 255, 255, 0.52);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255,255,255,0.8);
  --glass-blur: 14px;
  --glass-inner: rgba(255, 255, 255, 0.55);
  --glass-inner-border: rgba(255, 255, 255, 0.70);
  --is-dark-theme: 0;
}

/* A3. Hồng nhẹ */
.preset-hong-nhe {
  --bg-page: #FFF9FA;
  --bg-page-gradient: radial-gradient(ellipse at 20% 30%, #FFCCD8 0%, transparent 50%), radial-gradient(ellipse at 80% 15%, #FFB8C8 0%, transparent 45%), radial-gradient(ellipse at 50% 75%, #FFD8E4 0%, transparent 55%), linear-gradient(135deg, #FFF5F7, #FFD8E8);
  --bg-sidebar: #FFEDF0;
  --bg-card: #FFFFFF;
  --bg-card-alt: #FFF0F3;
  --bg-input: #FFF9FA;
  --bg-overlay: rgba(0, 0, 0, 0.4);
  --border-color: #FBCFD8;
  --border-card: #FFE0E6;
  --text-primary: #36141D;
  --text-secondary: #8A3A4D;
  --text-muted: #BA7684;
  --color-primary: #C45570;
  --color-primary-light: #E8829A;
  --color-primary-rgb: 196, 85, 112;
  --color-primary-dark: #9E334D;
  --color-accent-kpi: #C45570;
  --kpi-number-color: #36141D;
  --chart-bar: #E8829A;
  --chart-bar-rgb: 232, 130, 154;
  --btn-bg: linear-gradient(135deg, #E8829A, #C45570);
  --btn-text: #FFFFFF;
  --shadow-card: 0 2px 10px rgba(232, 130, 154, 0.08);
  --shadow-primary: 0 4px 15px rgba(232, 130, 154, 0.25);
  --nav-active-bg: rgba(232, 130, 154, 0.15);
  --nav-active-text: #C45570;
  --nav-hover-bg: rgba(232, 130, 154, 0.05);
  --sidebar-border: #FBCFD8;
  --scrollbar-thumb: rgba(232, 130, 154, 0.4);
  --text-heading: #9E334D;
  --header-bg: rgba(255, 237, 240, 0.97);
  --header-border: #FFE0E6;
  --nav-btn-text: #8A3A4D;
  --glass-bg: rgba(255, 255, 255, 0.52);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255,255,255,0.8);
  --glass-blur: 14px;
  --glass-inner: rgba(255, 255, 255, 0.55);
  --glass-inner-border: rgba(255, 255, 255, 0.70);
  --is-dark-theme: 0;
}

/* A4. Matcha Tea */
.preset-matcha {
  --bg-page: #F4F8F4;
  --bg-page-gradient: radial-gradient(ellipse at 20% 30%, #B8D8B8 0%, transparent 50%), radial-gradient(ellipse at 80% 15%, #A8CC A8 0%, transparent 45%), radial-gradient(ellipse at 50% 75%, #C8E0C8 0%, transparent 55%), linear-gradient(135deg, #F0F6F0, #D8ECD8);
  --bg-sidebar: #E5EEE5;
  --bg-card: #FFFFFF;
  --bg-card-alt: #EDF4ED;
  --bg-input: #F8FAF8;
  --bg-overlay: rgba(0, 0, 0, 0.4);
  --border-color: #C2D6C3;
  --border-card: #D5E4D6;
  --text-primary: #142816;
  --text-secondary: #2E5230;
  --text-muted: #688A6A;
  --color-primary: #3D7040;
  --color-primary-light: #6CA26F;
  --color-primary-rgb: 61, 112, 64;
  --color-primary-dark: #2C522E;
  --color-accent-kpi: #3D7040;
  --kpi-number-color: #142816;
  --chart-bar: #3D7040;
  --chart-bar-rgb: 61, 112, 64;
  --btn-bg: linear-gradient(135deg, #3D7040, #2C522E);
  --btn-text: #FFFFFF;
  --shadow-card: 0 2px 10px rgba(61, 112, 64, 0.08);
  --shadow-primary: 0 4px 15px rgba(61, 112, 64, 0.25);
  --nav-active-bg: rgba(61, 112, 64, 0.12);
  --nav-active-text: #2C522E;
  --nav-hover-bg: rgba(61, 112, 64, 0.05);
  --sidebar-border: #C2D6C3;
  --scrollbar-thumb: rgba(61, 112, 64, 0.4);
  --text-heading: #2C522E;
  --header-bg: rgba(229, 238, 229, 0.97);
  --header-border: #D5E4D6;
  --nav-btn-text: #2E5230;
  --glass-bg: rgba(255, 255, 255, 0.52);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255,255,255,0.8);
  --glass-blur: 14px;
  --glass-inner: rgba(255, 255, 255, 0.55);
  --glass-inner-border: rgba(255, 255, 255, 0.70);
  --is-dark-theme: 0;
}

/* A5. Linen Cocoa */
.preset-linen {
  --bg-page: #FAF7F2;
  --bg-page-gradient: radial-gradient(ellipse at 20% 30%, #E8D8C0 0%, transparent 50%), radial-gradient(ellipse at 80% 15%, #DCC8A8 0%, transparent 45%), radial-gradient(ellipse at 50% 75%, #EEE0C8 0%, transparent 55%), linear-gradient(135deg, #F8F3EC, #EAD8C0);
  --bg-sidebar: #EFE6D8;
  --bg-card: #FFFFFF;
  --bg-card-alt: #F5EDE1;
  --bg-input: #FAF7F2;
  --bg-overlay: rgba(0, 0, 0, 0.4);
  --border-color: #DECBB3;
  --border-card: #EADECF;
  --text-primary: #2A180D;
  --text-secondary: #5C361C;
  --text-muted: #94755F;
  --color-primary: #7D4A28;
  --color-primary-light: #AA724D;
  --color-primary-rgb: 125, 74, 40;
  --color-primary-dark: #583219;
  --color-accent-kpi: #7D4A28;
  --kpi-number-color: #2A180D;
  --chart-bar: #7D4A28;
  --chart-bar-rgb: 125, 74, 40;
  --btn-bg: linear-gradient(135deg, #7D4A28, #583219);
  --btn-text: #FFFFFF;
  --shadow-card: 0 2px 10px rgba(125, 74, 40, 0.08);
  --shadow-primary: 0 4px 15px rgba(125, 74, 40, 0.25);
  --nav-active-bg: rgba(125, 74, 40, 0.12);
  --nav-active-text: #583219;
  --nav-hover-bg: rgba(125, 74, 40, 0.05);
  --sidebar-border: #DECBB3;
  --scrollbar-thumb: rgba(125, 74, 40, 0.4);
  --text-heading: #583219;
  --header-bg: rgba(239, 230, 216, 0.97);
  --header-border: #EADECF;
  --nav-btn-text: #5C361C;
  --glass-bg: rgba(255, 255, 255, 0.52);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255,255,255,0.8);
  --glass-blur: 14px;
  --glass-inner: rgba(255, 255, 255, 0.55);
  --glass-inner-border: rgba(255, 255, 255, 0.70);
  --is-dark-theme: 0;
}

/* ============================================================================
 * NHÓM B — 15 FULL THEMES × 2 BIẾN THỂ (NỀN & BÓNG / TỐI GIẢN)
 * ============================================================================ */

/* ----------------------------------------------------------------------------
 * 1. Azure Mist (Sáng)
 * ---------------------------------------------------------------------------- */
.theme-azure-mist-full, .theme-azure-mist-minimal {
  --bg-page: #EEF4FB;
  --bg-sidebar: #E0EBF8;
  --bg-card: #FFFFFF;
  --bg-card-alt: #E8F1FC;
  --bg-input: #F4F8FD;
  --bg-overlay: rgba(15, 38, 64, 0.4);
  --border-color: #C8DDEF;
  --border-card: #D8E7F5;
  --text-primary: #0F2640;
  --text-secondary: #3060A0;
  --text-muted: #80A8D8;
  --color-primary: #2E7EC4;
  --color-primary-light: #7AB4E8;
  --color-primary-rgb: 46, 126, 196;
  --color-primary-dark: #1F5E96;
  --color-accent-kpi: #2E7EC4;
  --kpi-number-color: #0F2640;
  --chart-bar: #5B9BD5;
  --chart-bar-rgb: 91, 155, 213;
  --btn-bg: linear-gradient(135deg, #2E7EC4, #1F5E96);
  --btn-text: #FFFFFF;
  --nav-active-bg: rgba(46, 126, 196, 0.12);
  --nav-active-text: #1F5E96;
  --nav-hover-bg: rgba(46, 126, 196, 0.05);
  --sidebar-border: #C8DDEF;
  --scrollbar-thumb: rgba(46, 126, 196, 0.4);
  --text-heading: #1F5E96;
  --header-bg: rgba(224, 235, 248, 0.97);
  --header-border: #D8E7F5;
  --nav-btn-text: #3060A0;
  --glass-bg: rgba(255, 255, 255, 0.52);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255,255,255,0.8);
  --glass-blur: 14px;
  --glass-inner: rgba(255, 255, 255, 0.55);
  --glass-inner-border: rgba(255, 255, 255, 0.70);
  --is-dark-theme: 0;
}
.theme-azure-mist-full {
  --bg-page-gradient: linear-gradient(135deg, #EEF4FB, #C8DFF5, #D8EEFF);
  --shadow-card: 0 8px 32px rgba(46, 126, 196, 0.15);
  --shadow-primary: 0 4px 18px rgba(46, 126, 196, 0.3);
}
.theme-azure-mist-minimal {
  --bg-page-gradient: #EEF4FB;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-primary: 0 2px 8px rgba(46, 126, 196, 0.2);
}

/* ----------------------------------------------------------------------------
 * 2. Woodland Cottage (Sáng)
 * ---------------------------------------------------------------------------- */
.theme-woodland-cottage-full, .theme-woodland-cottage-minimal {
  --bg-page: #EFF5EA;
  --bg-sidebar: #E0EDD8;
  --bg-card: #FFFFFF;
  --bg-card-alt: #E7F1DF;
  --bg-input: #F5F9F2;
  --bg-overlay: rgba(26, 46, 16, 0.4);
  --border-color: #C8DEBB;
  --border-card: #D5E7CB;
  --text-primary: #1A2E10;
  --text-secondary: #3D5A28;
  --text-muted: #789060;
  --color-primary: #5B7A3D;
  --color-primary-light: #9ABF78;
  --color-primary-rgb: 91, 122, 61;
  --color-primary-dark: #435D29;
  --color-accent-kpi: #5B7A3D;
  --kpi-number-color: #1A2E10;
  --chart-bar: #6B8A4D;
  --chart-bar-rgb: 107, 138, 77;
  --btn-bg: linear-gradient(135deg, #5B7A3D, #435D29);
  --btn-text: #FFFFFF;
  --nav-active-bg: rgba(91, 122, 61, 0.12);
  --nav-active-text: #435D29;
  --nav-hover-bg: rgba(91, 122, 61, 0.05);
  --sidebar-border: #C8DEBB;
  --scrollbar-thumb: rgba(91, 122, 61, 0.4);
  --text-heading: #435D29;
  --header-bg: rgba(224, 237, 216, 0.97);
  --header-border: #D5E7CB;
  --nav-btn-text: #3D5A28;
  --glass-bg: rgba(255, 255, 255, 0.52);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255,255,255,0.8);
  --glass-blur: 14px;
  --glass-inner: rgba(255, 255, 255, 0.55);
  --glass-inner-border: rgba(255, 255, 255, 0.70);
  --is-dark-theme: 0;
}
.theme-woodland-cottage-full {
  --bg-page-gradient: linear-gradient(135deg, #EFF5EA, #D5E7CB, #E2EFDA);
  --shadow-card: 0 8px 30px rgba(91, 122, 61, 0.15);
  --shadow-primary: 0 4px 18px rgba(91, 122, 61, 0.28);
}
.theme-woodland-cottage-minimal {
  --bg-page-gradient: #EFF5EA;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-primary: 0 2px 8px rgba(91, 122, 61, 0.2);
}

/* ----------------------------------------------------------------------------
 * 3. Sage Blush (Sáng)
 * ---------------------------------------------------------------------------- */
.theme-sage-blush-full, .theme-sage-blush-minimal {
  --bg-page: #F4EFF5;
  --bg-sidebar: #EAE0EE;
  --bg-card: #FFFFFF;
  --bg-card-alt: #EFE7F3;
  --bg-input: #F8F4F9;
  --bg-overlay: rgba(42, 21, 48, 0.4);
  --border-color: #DDD0E4;
  --border-card: #E6DCED;
  --text-primary: #2A1530;
  --text-secondary: #7A5080;
  --text-muted: #B898C0;
  --color-primary: #9B6B8A;
  --color-primary-light: #CCA8C0;
  --color-primary-rgb: 155, 107, 138;
  --color-primary-dark: #7D4F6E;
  --color-accent-kpi: #9B6B8A;
  --kpi-number-color: #2A1530;
  --chart-bar: #B07898;
  --chart-bar-rgb: 176, 120, 152;
  --btn-bg: linear-gradient(135deg, #9B6B8A, #7D4F6E);
  --btn-text: #FFFFFF;
  --nav-active-bg: rgba(155, 107, 138, 0.12);
  --nav-active-text: #7D4F6E;
  --nav-hover-bg: rgba(155, 107, 138, 0.05);
  --sidebar-border: #DDD0E4;
  --scrollbar-thumb: rgba(155, 107, 138, 0.4);
  --text-heading: #7D4F6E;
  --header-bg: rgba(234, 224, 238, 0.97);
  --header-border: #E6DCED;
  --nav-btn-text: #7A5080;
  --glass-bg: rgba(255, 255, 255, 0.52);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255,255,255,0.8);
  --glass-blur: 14px;
  --glass-inner: rgba(255, 255, 255, 0.55);
  --glass-inner-border: rgba(255, 255, 255, 0.70);
  --is-dark-theme: 0;
}
.theme-sage-blush-full {
  --bg-page-gradient: linear-gradient(135deg, #F4EFF5, #DDD0E4, #E9DFED);
  --shadow-card: 0 8px 30px rgba(155, 107, 138, 0.15);
  --shadow-primary: 0 4px 18px rgba(155, 107, 138, 0.28);
}
.theme-sage-blush-minimal {
  --bg-page-gradient: #F4EFF5;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-primary: 0 2px 8px rgba(155, 107, 138, 0.2);
}

/* ----------------------------------------------------------------------------
 * 4. Golden Caramel (Sáng)
 * ---------------------------------------------------------------------------- */
.theme-golden-caramel-full, .theme-golden-caramel-minimal {
  --bg-page: #FDF5E6;
  --bg-sidebar: #F5E8CC;
  --bg-card: #FFFFFF;
  --bg-card-alt: #FAEFD8;
  --bg-input: #FCF7ED;
  --bg-overlay: rgba(58, 32, 0, 0.4);
  --border-color: #EDD8A8;
  --border-card: #F3E4BE;
  --text-primary: #3A2000;
  --text-secondary: #7A5010;
  --text-muted: #C09840;
  --color-primary: #C48A2C;
  --color-primary-light: #E8BF78;
  --color-primary-rgb: 196, 138, 44;
  --color-primary-dark: #9E6B1B;
  --color-accent-kpi: #C48A2C;
  --kpi-number-color: #3A2000;
  --chart-bar: #D4A040;
  --chart-bar-rgb: 212, 160, 64;
  --btn-bg: linear-gradient(135deg, #C48A2C, #9E6B1B);
  --btn-text: #FFFFFF;
  --nav-active-bg: rgba(196, 138, 44, 0.12);
  --nav-active-text: #9E6B1B;
  --nav-hover-bg: rgba(196, 138, 44, 0.05);
  --sidebar-border: #EDD8A8;
  --scrollbar-thumb: rgba(196, 138, 44, 0.4);
  --text-heading: #6D430A;
  --header-bg: rgba(245, 232, 204, 0.97);
  --header-border: #F3E4BE;
  --nav-btn-text: #7A5010;
  --glass-bg: rgba(255, 255, 255, 0.52);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255,255,255,0.8);
  --glass-blur: 14px;
  --glass-inner: rgba(255, 255, 255, 0.55);
  --glass-inner-border: rgba(255, 255, 255, 0.70);
  --is-dark-theme: 0;
}
.theme-golden-caramel-full {
  --bg-page-gradient: linear-gradient(135deg, #FDF5E6, #F2DCB3, #F9ECD2);
  --shadow-card: 0 8px 30px rgba(196, 138, 44, 0.15);
  --shadow-primary: 0 4px 18px rgba(196, 138, 44, 0.28);
}
.theme-golden-caramel-minimal {
  --bg-page-gradient: #FDF5E6;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-primary: 0 2px 8px rgba(196, 138, 44, 0.2);
}

/* ----------------------------------------------------------------------------
 * 5. Pastel Alpine Meadow (Sáng)
 * ---------------------------------------------------------------------------- */
.theme-pastel-alpine-full, .theme-pastel-alpine-minimal {
  --bg-page: #F0F6F2;
  --bg-sidebar: #E4EFE8;
  --bg-card: #FFFFFF;
  --bg-card-alt: #EAF3EC;
  --bg-input: #F5FAF6;
  --bg-overlay: rgba(24, 58, 36, 0.4);
  --border-color: #C8E4D4;
  --border-card: #D8ECDF;
  --text-primary: #183A24;
  --text-secondary: #3A6A48;
  --text-muted: #78A888;
  --color-primary: #4A7A50;
  --color-primary-light: #6B9E7A;
  --color-primary-rgb: 74, 122, 80;
  --color-primary-dark: #375B3C;
  --color-accent-kpi: #4A7A50;
  --kpi-number-color: #183A24;
  --chart-bar: #6B9E7A;
  --chart-bar-rgb: 107, 158, 122;
  --btn-bg: linear-gradient(135deg, #4A7A50, #375B3C);
  --btn-text: #FFFFFF;
  --nav-active-bg: rgba(74, 122, 80, 0.12);
  --nav-active-text: #375B3C;
  --nav-hover-bg: rgba(74, 122, 80, 0.05);
  --sidebar-border: #C8E4D4;
  --scrollbar-thumb: rgba(74, 122, 80, 0.4);
  --text-heading: #375B3C;
  --header-bg: rgba(228, 239, 232, 0.97);
  --header-border: #D8ECDF;
  --nav-btn-text: #3A6A48;
  --glass-bg: rgba(255, 255, 255, 0.52);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255,255,255,0.8);
  --glass-blur: 14px;
  --glass-inner: rgba(255, 255, 255, 0.55);
  --glass-inner-border: rgba(255, 255, 255, 0.70);
  --is-dark-theme: 0;
}
.theme-pastel-alpine-full {
  --bg-page-gradient: linear-gradient(135deg, #F0F6F2, #CCE7D7, #E0EFE5);
  --shadow-card: 0 8px 30px rgba(74, 122, 80, 0.15);
  --shadow-primary: 0 4px 18px rgba(74, 122, 80, 0.28);
}
.theme-pastel-alpine-minimal {
  --bg-page-gradient: #F0F6F2;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-primary: 0 2px 8px rgba(74, 122, 80, 0.2);
}

/* ----------------------------------------------------------------------------
 * 6. Dreamy Cosmic Sky (TỐI)
 * ---------------------------------------------------------------------------- */
.theme-dreamy-cosmic-full, .theme-dreamy-cosmic-minimal {
  --bg-page: #0F0828;
  --bg-sidebar: rgba(28, 18, 68, 0.95);
  --bg-card: rgba(28, 18, 68, 0.7);
  --bg-card-alt: rgba(38, 24, 88, 0.8);
  --bg-input: rgba(255, 255, 255, 0.06);
  --bg-overlay: rgba(0, 0, 0, 0.6);
  --border-color: rgba(123, 104, 212, 0.25);
  --border-card: rgba(123, 104, 212, 0.18);
  --text-primary: #FFFFFF;
  --text-secondary: #B8A8E8;
  --text-muted: rgba(255, 255, 255, 0.4);
  --color-primary: #7B68D4;
  --color-primary-light: #B0A0EE;
  --color-primary-rgb: 123, 104, 212;
  --color-primary-dark: #5848A8;
  --color-accent-kpi: #B0A0EE;
  --kpi-number-color: #FFFFFF;
  --chart-bar: #8878E4;
  --chart-bar-rgb: 136, 120, 228;
  --btn-bg: linear-gradient(135deg, #7B68D4, #5848A8);
  --btn-text: #FFFFFF;
  --nav-active-bg: rgba(123, 104, 212, 0.18);
  --nav-active-text: #B0A0EE;
  --nav-hover-bg: rgba(255, 255, 255, 0.05);
  --sidebar-border: rgba(123, 104, 212, 0.25);
  --scrollbar-thumb: rgba(123, 104, 212, 0.4);
  --text-heading: #B0A0EE;
  --header-bg: rgba(0, 0, 0, 0.6);
  --header-border: rgba(255, 255, 255, 0.05);
  --nav-btn-text: #E2E8F0;
  --glass-bg: rgba(255, 255, 255, 0.10);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.10);
  --glass-blur: 20px;
  --glass-inner: rgba(255, 255, 255, 0.08);
  --glass-inner-border: rgba(255, 255, 255, 0.15);
  --is-dark-theme: 1;
}
.theme-dreamy-cosmic-full {
  --bg-page-gradient: radial-gradient(ellipse at 30% 20%, #2A1A5E, #0F0828, #1A0F40);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-primary: 0 4px 20px rgba(123, 104, 212, 0.3);
}
.theme-dreamy-cosmic-minimal {
  --bg-page-gradient: #0F0828;
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-primary: 0 2px 10px rgba(123, 104, 212, 0.2);
}

/* ----------------------------------------------------------------------------
 * 7. Sunset Meadow Breeze (Sáng)
 * ---------------------------------------------------------------------------- */
.theme-sunset-meadow-full, .theme-sunset-meadow-minimal {
  --bg-page: #FFF4F0;
  --bg-sidebar: #F8E8E4;
  --bg-card: #FFFFFF;
  --bg-card-alt: #FAECE8;
  --bg-input: #FCF6F4;
  --bg-overlay: rgba(58, 16, 8, 0.4);
  --border-color: #F0D0C0;
  --border-card: #F7DDD3;
  --text-primary: #3A1008;
  --text-secondary: #8A4030;
  --text-muted: #C08070;
  --color-primary: #E07A5F;
  --color-primary-light: #F0A898;
  --color-primary-rgb: 224, 122, 95;
  --color-primary-dark: #B85840;
  --color-accent-kpi: #E07A5F;
  --kpi-number-color: #3A1008;
  --chart-bar: #E8907A;
  --chart-bar-rgb: 232, 144, 122;
  --btn-bg: linear-gradient(135deg, #E07A5F, #B85840);
  --btn-text: #FFFFFF;
  --nav-active-bg: rgba(224, 122, 95, 0.12);
  --nav-active-text: #B85840;
  --nav-hover-bg: rgba(224, 122, 95, 0.05);
  --sidebar-border: #F0D0C0;
  --scrollbar-thumb: rgba(224, 122, 95, 0.4);
  --text-heading: #B85840;
  --header-bg: rgba(248, 232, 228, 0.97);
  --header-border: #F7DDD3;
  --nav-btn-text: #8A4030;
  --glass-bg: rgba(255, 255, 255, 0.52);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255,255,255,0.8);
  --glass-blur: 14px;
  --glass-inner: rgba(255, 255, 255, 0.55);
  --glass-inner-border: rgba(255, 255, 255, 0.70);
  --is-dark-theme: 0;
}
.theme-sunset-meadow-full {
  --bg-page-gradient: radial-gradient(ellipse at 20% 30%, #FFBBA0 0%, transparent 50%), radial-gradient(ellipse at 80% 15%, #FFA888 0%, transparent 45%), radial-gradient(ellipse at 50% 75%, #FFD0C0 0%, transparent 55%), linear-gradient(135deg, #FFF4F0, #FFD0BE);
  --shadow-card: 0 8px 30px rgba(224, 122, 95, 0.15);
  --shadow-primary: 0 4px 18px rgba(224, 122, 95, 0.28);
}
.theme-sunset-meadow-minimal {
  --bg-page-gradient: #FFF4F0;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-primary: 0 2px 8px rgba(224, 122, 95, 0.2);
}

/* ----------------------------------------------------------------------------
 * 8. Neon Seoul (TỐI)
 * ---------------------------------------------------------------------------- */
.theme-neon-seoul-full, .theme-neon-seoul-minimal {
  --bg-page: #080F0F;
  --bg-sidebar: rgba(8, 28, 28, 0.95);
  --bg-card: rgba(8, 28, 28, 0.7);
  --bg-card-alt: rgba(12, 38, 38, 0.8);
  --bg-input: rgba(255, 255, 255, 0.05);
  --bg-overlay: rgba(0, 0, 0, 0.6);
  --border-color: rgba(0, 212, 170, 0.2);
  --border-card: rgba(0, 212, 170, 0.15);
  --text-primary: #FFFFFF;
  --text-secondary: #80E8D8;
  --text-muted: rgba(255, 255, 255, 0.4);
  --color-primary: #00D4AA;
  --color-primary-light: #60E8D0;
  --color-primary-rgb: 0, 212, 170;
  --color-primary-dark: #00A888;
  --color-accent-kpi: #60E8D0;
  --kpi-number-color: #FFFFFF;
  --chart-bar: #00C4A0;
  --chart-bar-rgb: 0, 196, 160;
  --btn-bg: linear-gradient(135deg, #00D4AA, #00A888);
  --btn-text: #080F0F;
  --nav-active-bg: rgba(0, 212, 170, 0.15);
  --nav-active-text: #00D4AA;
  --nav-hover-bg: rgba(255, 255, 255, 0.05);
  --sidebar-border: rgba(0, 212, 170, 0.2);
  --scrollbar-thumb: rgba(0, 212, 170, 0.4);
  --text-heading: #60E8D0;
  --header-bg: rgba(0, 0, 0, 0.6);
  --header-border: rgba(255, 255, 255, 0.05);
  --nav-btn-text: #E2E8F0;
  --glass-bg: rgba(255, 255, 255, 0.10);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.10);
  --glass-blur: 20px;
  --glass-inner: rgba(255, 255, 255, 0.08);
  --glass-inner-border: rgba(255, 255, 255, 0.15);
  --is-dark-theme: 1;
}
.theme-neon-seoul-full {
  --bg-page-gradient: radial-gradient(ellipse at 50% 0%, #0D2828, #080F0F, #0F1A1A);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-primary: 0 4px 20px rgba(0, 212, 170, 0.3);
}
.theme-neon-seoul-minimal {
  --bg-page-gradient: #080F0F;
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-primary: 0 2px 10px rgba(0, 212, 170, 0.2);
}

/* ----------------------------------------------------------------------------
 * 9. Mystic Blue Room (TỐI)
 * ---------------------------------------------------------------------------- */
.theme-mystic-blue-full, .theme-mystic-blue-minimal {
  --bg-page: #060E20;
  --bg-sidebar: rgba(10, 24, 48, 0.95);
  --bg-card: rgba(10, 24, 48, 0.7);
  --bg-card-alt: rgba(15, 34, 64, 0.8);
  --bg-input: rgba(255, 255, 255, 0.05);
  --bg-overlay: rgba(0, 0, 0, 0.6);
  --border-color: rgba(59, 95, 160, 0.25);
  --border-card: rgba(59, 95, 160, 0.18);
  --text-primary: #FFFFFF;
  --text-secondary: #90B0E0;
  --text-muted: rgba(255, 255, 255, 0.4);
  --color-primary: #3B5FA0;
  --color-primary-light: #7898D0;
  --color-primary-rgb: 59, 95, 160;
  --color-primary-dark: #284070;
  --color-accent-kpi: #7898D0;
  --kpi-number-color: #FFFFFF;
  --chart-bar: #5080C0;
  --chart-bar-rgb: 80, 128, 192;
  --btn-bg: linear-gradient(135deg, #3B5FA0, #284070);
  --btn-text: #FFFFFF;
  --nav-active-bg: rgba(59, 95, 160, 0.18);
  --nav-active-text: #90B0E0;
  --nav-hover-bg: rgba(255, 255, 255, 0.05);
  --sidebar-border: rgba(59, 95, 160, 0.25);
  --scrollbar-thumb: rgba(59, 95, 160, 0.4);
  --text-heading: #7898D0;
  --header-bg: rgba(0, 0, 0, 0.6);
  --header-border: rgba(255, 255, 255, 0.05);
  --nav-btn-text: #E2E8F0;
  --glass-bg: rgba(255, 255, 255, 0.10);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.10);
  --glass-blur: 20px;
  --glass-inner: rgba(255, 255, 255, 0.08);
  --glass-inner-border: rgba(255, 255, 255, 0.15);
  --is-dark-theme: 1;
}
.theme-mystic-blue-full {
  --bg-page-gradient: radial-gradient(ellipse at 20% 50%, #0F2040, #060E20, #0A1828);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-primary: 0 4px 20px rgba(59, 95, 160, 0.3);
}
.theme-mystic-blue-minimal {
  --bg-page-gradient: #060E20;
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-primary: 0 2px 10px rgba(59, 95, 160, 0.2);
}

/* ----------------------------------------------------------------------------
 * 10. Blue Lime Canopy (Sáng)
 * ---------------------------------------------------------------------------- */
.theme-blue-lime-full, .theme-blue-lime-minimal {
  --bg-page: #EAFAF6;
  --bg-sidebar: #D8F0E8;
  --bg-card: #FFFFFF;
  --bg-card-alt: #E3F5F0;
  --bg-input: #F2FCF9;
  --bg-overlay: rgba(15, 40, 32, 0.4);
  --border-color: #B8E4D8;
  --border-card: #CCEFE6;
  --text-primary: #0F2820;
  --text-secondary: #2A6858;
  --text-muted: #60A890;
  --color-primary: #3AADA8;
  --color-primary-light: #80CCC8;
  --color-primary-rgb: 58, 173, 168;
  --color-primary-dark: #28807C;
  --color-accent-kpi: #3AADA8;
  --kpi-number-color: #0F2820;
  --chart-bar: #50BCB8;
  --chart-bar-rgb: 80, 188, 184;
  --btn-bg: linear-gradient(135deg, #3AADA8, #28807C);
  --btn-text: #FFFFFF;
  --nav-active-bg: rgba(58, 173, 168, 0.12);
  --nav-active-text: #28807C;
  --nav-hover-bg: rgba(58, 173, 168, 0.05);
  --sidebar-border: #B8E4D8;
  --scrollbar-thumb: rgba(58, 173, 168, 0.4);
  --text-heading: #28807C;
  --header-bg: rgba(216, 240, 232, 0.97);
  --header-border: #CCEFE6;
  --nav-btn-text: #2A6858;
  --glass-bg: rgba(255, 255, 255, 0.52);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255,255,255,0.8);
  --glass-blur: 14px;
  --glass-inner: rgba(255, 255, 255, 0.55);
  --glass-inner-border: rgba(255, 255, 255, 0.70);
  --is-dark-theme: 0;
}
.theme-blue-lime-full {
  --bg-page-gradient: radial-gradient(ellipse at 20% 30%, #A8E8D8 0%, transparent 50%), radial-gradient(ellipse at 80% 15%, #90DCC8 0%, transparent 45%), radial-gradient(ellipse at 50% 75%, #B8EEE0 0%, transparent 55%), linear-gradient(135deg, #EAFAF6, #B8EFE4);
  --shadow-card: 0 8px 30px rgba(58, 173, 168, 0.15);
  --shadow-primary: 0 4px 18px rgba(58, 173, 168, 0.28);
}
.theme-blue-lime-minimal {
  --bg-page-gradient: #EAFAF6;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-primary: 0 2px 8px rgba(58, 173, 168, 0.2);
}

/* ----------------------------------------------------------------------------
 * 11. Cloud Meadow (Sáng rất nhạt)
 * ---------------------------------------------------------------------------- */
.theme-cloud-meadow-full, .theme-cloud-meadow-minimal {
  --bg-page: #F5F9FD;
  --bg-sidebar: #E8F4FC;
  --bg-card: #FFFFFF;
  --bg-card-alt: #EEF7FD;
  --bg-input: #FAFCFE;
  --bg-overlay: rgba(15, 32, 48, 0.4);
  --border-color: #CCE4F4;
  --border-card: #DDEEFA;
  --text-primary: #0F2030;
  --text-secondary: #3A6888;
  --text-muted: #80A8C8;
  --color-primary: #5888B0;
  --color-primary-light: #7EB0D4;
  --color-primary-rgb: 88, 136, 176;
  --color-primary-dark: #3E6A8E;
  --color-accent-kpi: #5888B0;
  --kpi-number-color: #0F2030;
  --chart-bar: #7EB0D4;
  --chart-bar-rgb: 126, 176, 212;
  --btn-bg: linear-gradient(135deg, #5888B0, #3E6A8E);
  --btn-text: #FFFFFF;
  --nav-active-bg: rgba(88, 136, 176, 0.12);
  --nav-active-text: #3E6A8E;
  --nav-hover-bg: rgba(88, 136, 176, 0.05);
  --sidebar-border: #CCE4F4;
  --scrollbar-thumb: rgba(88, 136, 176, 0.4);
  --text-heading: #3E6A8E;
  --header-bg: rgba(232, 244, 252, 0.97);
  --header-border: #DDEEFA;
  --nav-btn-text: #3A6888;
  --glass-bg: rgba(255, 255, 255, 0.52);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255,255,255,0.8);
  --glass-blur: 14px;
  --glass-inner: rgba(255, 255, 255, 0.55);
  --glass-inner-border: rgba(255, 255, 255, 0.70);
  --is-dark-theme: 0;
}
.theme-cloud-meadow-full {
  --bg-page-gradient: radial-gradient(ellipse at 25% 25%, #B8D8F8 0%, transparent 50%), radial-gradient(ellipse at 75% 15%, #A8CCF0 0%, transparent 45%), radial-gradient(ellipse at 50% 70%, #C8E4F8 0%, transparent 55%), linear-gradient(135deg, #F5F9FD, #C8E4F8);
  --shadow-card: 0 8px 30px rgba(88, 136, 176, 0.15);
  --shadow-primary: 0 4px 18px rgba(88, 136, 176, 0.28);
}
.theme-cloud-meadow-minimal {
  --bg-page-gradient: #F5F9FD;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-primary: 0 2px 8px rgba(88, 136, 176, 0.2);
}

/* ----------------------------------------------------------------------------
 * 12. Soft Blue + White (Sáng trắng)
 * ---------------------------------------------------------------------------- */
.theme-soft-blue-white-full, .theme-soft-blue-white-minimal,
.theme-soft-blue-full, .theme-soft-blue-minimal {
  --bg-page: #FFFFFF;
  --bg-sidebar: #F0F7FF;
  --bg-card: #FFFFFF;
  --bg-card-alt: #F4F9FF;
  --bg-input: #F8FBFF;
  --bg-overlay: rgba(10, 26, 48, 0.4);
  --border-color: #C8E0F8;
  --border-card: #DCECFB;
  --text-primary: #0A1A30;
  --text-secondary: #285888;
  --text-muted: #70A0C8;
  --color-primary: #4A9AC4;
  --color-primary-light: #88C0E0;
  --color-primary-rgb: 74, 154, 196;
  --color-primary-dark: #327599;
  --color-accent-kpi: #4A9AC4;
  --kpi-number-color: #0A1A30;
  --chart-bar: #60AAD8;
  --chart-bar-rgb: 96, 170, 216;
  --btn-bg: linear-gradient(135deg, #4A9AC4, #327599);
  --btn-text: #FFFFFF;
  --nav-active-bg: rgba(74, 154, 196, 0.12);
  --nav-active-text: #327599;
  --nav-hover-bg: rgba(74, 154, 196, 0.05);
  --sidebar-border: #B8D8F8;
  --scrollbar-thumb: rgba(74, 154, 196, 0.4);
  --text-heading: #327599;
  --header-bg: rgba(240, 247, 255, 0.97);
  --header-border: #DCECFB;
  --nav-btn-text: #285888;
  --glass-bg: rgba(255, 255, 255, 0.52);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255,255,255,0.8);
  --glass-blur: 14px;
  --glass-inner: rgba(255, 255, 255, 0.55);
  --glass-inner-border: rgba(255, 255, 255, 0.70);
  --is-dark-theme: 0;
}
.theme-soft-blue-white-full, .theme-soft-blue-full {
  --bg-page-gradient: radial-gradient(ellipse at 20% 30%, #C8E8FF 0%, transparent 50%), radial-gradient(ellipse at 80% 15%, #B8DCFF 0%, transparent 45%), radial-gradient(ellipse at 50% 75%, #D8F0FF 0%, transparent 55%), linear-gradient(135deg, #FFFFFF, #D8EEFF);
  --shadow-card: 0 8px 30px rgba(74, 154, 196, 0.12);
  --shadow-primary: 0 4px 18px rgba(74, 154, 196, 0.25);
}
.theme-soft-blue-white-minimal, .theme-soft-blue-minimal {
  --bg-page-gradient: #FFFFFF;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-primary: 0 2px 8px rgba(74, 154, 196, 0.2);
}

/* ----------------------------------------------------------------------------
 * 13. Blossom Noir (TỐI)
 * ---------------------------------------------------------------------------- */
.theme-blossom-noir-full, .theme-blossom-noir-minimal {
  --bg-page: #0F0510;
  --bg-sidebar: rgba(28, 8, 28, 0.95);
  --bg-card: rgba(28, 8, 28, 0.7);
  --bg-card-alt: rgba(38, 12, 38, 0.8);
  --bg-input: rgba(255, 255, 255, 0.05);
  --bg-overlay: rgba(0, 0, 0, 0.6);
  --border-color: rgba(232, 149, 180, 0.2);
  --border-card: rgba(232, 149, 180, 0.15);
  --text-primary: #FFFFFF;
  --text-secondary: #E8B8D0;
  --text-muted: rgba(255, 255, 255, 0.4);
  --color-primary: #E895B4;
  --color-primary-light: #F0B8D0;
  --color-primary-rgb: 232, 149, 180;
  --color-primary-dark: #C06890;
  --color-accent-kpi: #F0B8D0;
  --kpi-number-color: #FFFFFF;
  --chart-bar: #E0A0C0;
  --chart-bar-rgb: 224, 160, 192;
  --btn-bg: linear-gradient(135deg, #E895B4, #C06890);
  --btn-text: #FFFFFF;
  --nav-active-bg: rgba(232, 149, 180, 0.18);
  --nav-active-text: #F0B8D0;
  --nav-hover-bg: rgba(255, 255, 255, 0.05);
  --sidebar-border: rgba(232, 149, 180, 0.2);
  --scrollbar-thumb: rgba(232, 149, 180, 0.4);
  --text-heading: #F0B8D0;
  --header-bg: rgba(0, 0, 0, 0.6);
  --header-border: rgba(255, 255, 255, 0.05);
  --nav-btn-text: #E2E8F0;
  --glass-bg: rgba(255, 255, 255, 0.10);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.10);
  --glass-blur: 20px;
  --glass-inner: rgba(255, 255, 255, 0.08);
  --glass-inner-border: rgba(255, 255, 255, 0.15);
  --is-dark-theme: 1;
}
.theme-blossom-noir-full {
  --bg-page-gradient: radial-gradient(ellipse at 70% 30%, #2A0820, #0F0510, #1A0818);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-primary: 0 4px 20px rgba(232, 149, 180, 0.3);
}
.theme-blossom-noir-minimal {
  --bg-page-gradient: #0F0510;
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-primary: 0 2px 10px rgba(232, 149, 180, 0.2);
}

/* ----------------------------------------------------------------------------
 * 14. Violet Planet (TỐI)
 * ---------------------------------------------------------------------------- */
.theme-violet-planet-full, .theme-violet-planet-minimal {
  --bg-page: #0A0520;
  --bg-sidebar: rgba(18, 8, 48, 0.95);
  --bg-card: rgba(18, 8, 48, 0.7);
  --bg-card-alt: rgba(26, 12, 64, 0.8);
  --bg-input: rgba(255, 255, 255, 0.05);
  --bg-overlay: rgba(0, 0, 0, 0.6);
  --border-color: rgba(139, 92, 246, 0.22);
  --border-card: rgba(139, 92, 246, 0.16);
  --text-primary: #FFFFFF;
  --text-secondary: #C4B5FD;
  --text-muted: rgba(255, 255, 255, 0.4);
  --color-primary: #8B5CF6;
  --color-primary-light: #BDA8FA;
  --color-primary-rgb: 139, 92, 246;
  --color-primary-dark: #6840C8;
  --color-accent-kpi: #BDA8FA;
  --kpi-number-color: #FFFFFF;
  --chart-bar: #9E6EF8;
  --chart-bar-rgb: 158, 110, 248;
  --btn-bg: linear-gradient(135deg, #8B5CF6, #6840C8);
  --btn-text: #FFFFFF;
  --nav-active-bg: rgba(139, 92, 246, 0.18);
  --nav-active-text: #BDA8FA;
  --nav-hover-bg: rgba(255, 255, 255, 0.05);
  --sidebar-border: rgba(139, 92, 246, 0.22);
  --scrollbar-thumb: rgba(139, 92, 246, 0.4);
  --text-heading: #BDA8FA;
  --header-bg: rgba(0, 0, 0, 0.6);
  --header-border: rgba(255, 255, 255, 0.05);
  --nav-btn-text: #E2E8F0;
  --glass-bg: rgba(255, 255, 255, 0.10);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.10);
  --glass-blur: 20px;
  --glass-inner: rgba(255, 255, 255, 0.08);
  --glass-inner-border: rgba(255, 255, 255, 0.15);
  --is-dark-theme: 1;
}
.theme-violet-planet-full {
  --bg-page-gradient: radial-gradient(ellipse at 50% 20%, #1A0840, #0A0520, #120830);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-primary: 0 4px 20px rgba(139, 92, 246, 0.3);
}
.theme-violet-planet-minimal {
  --bg-page-gradient: #0A0520;
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-primary: 0 2px 10px rgba(139, 92, 246, 0.2);
}

/* ----------------------------------------------------------------------------
 * 15. Claude (Sáng ấm)
 * ---------------------------------------------------------------------------- */
.theme-claude-full, .theme-claude-minimal {
  --bg-page: #FAFAF8;
  --bg-sidebar: #F4F0E8;
  --bg-card: #FFFFFF;
  --bg-card-alt: #F6F2EA;
  --bg-input: #FCFAF6;
  --bg-overlay: rgba(26, 16, 8, 0.4);
  --border-color: #E8DCCC;
  --border-card: #F0E6D8;
  --text-primary: #1A1008;
  --text-secondary: #6A4A20;
  --text-muted: #B09070;
  --color-primary: #D97706;
  --color-primary-light: #F0A840;
  --color-primary-rgb: 217, 119, 6;
  --color-primary-dark: #AC5E04;
  --color-accent-kpi: #D97706;
  --kpi-number-color: #1A1008;
  --chart-bar: #E08820;
  --chart-bar-rgb: 224, 136, 32;
  --btn-bg: linear-gradient(135deg, #D97706, #AC5E04);
  --btn-text: #FFFFFF;
  --nav-active-bg: rgba(217, 119, 6, 0.12);
  --nav-active-text: #AC5E04;
  --nav-hover-bg: rgba(217, 119, 6, 0.05);
  --sidebar-border: #E8DCCC;
  --scrollbar-thumb: rgba(217, 119, 6, 0.4);
  --text-heading: #7C3D00;
  --header-bg: rgba(244, 240, 232, 0.97);
  --header-border: #F0E6D8;
  --nav-btn-text: #6A4A20;
  --glass-bg: rgba(255, 255, 255, 0.52);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255,255,255,0.8);
  --glass-blur: 14px;
  --glass-inner: rgba(255, 255, 255, 0.55);
  --glass-inner-border: rgba(255, 255, 255, 0.70);
  --is-dark-theme: 0;
}
.theme-claude-full {
  --bg-page-gradient: radial-gradient(ellipse at 20% 30%, #F0D8B0 0%, transparent 50%), radial-gradient(ellipse at 80% 15%, #E8C898 0%, transparent 45%), radial-gradient(ellipse at 50% 75%, #F4E0C0 0%, transparent 55%), linear-gradient(135deg, #FAFAF8, #F0E0C8);
  --shadow-card: 0 8px 30px rgba(217, 119, 6, 0.15);
  --shadow-primary: 0 4px 18px rgba(217, 119, 6, 0.28);
}
.theme-claude-minimal {
  --bg-page-gradient: #FAFAF8;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-primary: 0 2px 8px rgba(217, 119, 6, 0.2);
}

/* ============================================================================
 * THEME SWITCHER PANEL CSS
 * ============================================================================ */
.theme-switcher-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.theme-switcher-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.theme-switcher-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 620px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  color: var(--text-primary);
  animation: themeSwitcherPop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes themeSwitcherPop {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.theme-switcher-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: var(--bg-card-alt);
  border-bottom: 1px solid var(--border-card);
}

.theme-switcher-header h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
}

.theme-switcher-close {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  transition: all 0.15s;
}

.theme-switcher-close:hover {
  background: var(--bg-input);
  color: var(--text-primary);
}

.theme-switcher-body {
  padding: 20px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.theme-group-label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* Presets row */
.theme-presets-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
  gap: 8px;
}

.theme-preset-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-card-alt);
  border: 1px solid var(--border-card);
  border-radius: 12px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-primary);
  transition: all 0.18s ease;
  user-select: none;
}

.theme-preset-item:hover {
  border-color: var(--color-primary);
  background: var(--nav-hover-bg);
  transform: translateY(-1px);
}

.theme-preset-item.active {
  border-color: var(--color-primary);
  background: var(--nav-active-bg);
  color: var(--color-primary);
  font-weight: 700;
}

.theme-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}

.theme-check {
  margin-left: auto;
  font-size: 12px;
  font-weight: 900;
  color: var(--color-primary);
  display: none;
}

.theme-preset-item.active .theme-check,
.theme-full-item.active .theme-check {
  display: inline-block;
}

/* Full themes grid */
.theme-full-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}

.theme-full-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-card-alt);
  border: 1px solid var(--border-card);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
}

.theme-full-item:hover {
  border-color: var(--color-primary);
  background: var(--nav-hover-bg);
  transform: translateY(-1px);
}

.theme-full-item.active {
  border-color: var(--color-primary);
  background: var(--nav-active-bg);
}

.theme-orb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.theme-item-meta {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.theme-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.theme-variant {
  font-size: 11px;
  color: var(--text-secondary);
}

/* Custom color row */
.theme-custom-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-card-alt);
  border: 1px solid var(--border-card);
  border-radius: 14px;
  flex-wrap: wrap;
}

.theme-custom-row input[type="color"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  background: transparent;
  padding: 0;
}

.theme-custom-row input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.theme-custom-row input[type="color"]::-webkit-color-swatch {
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.theme-custom-hex {
  flex: 1;
  min-width: 120px;
  padding: 8px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 13px;
  font-family: monospace;
  font-weight: 600;
  text-transform: uppercase;
}

.theme-custom-hex:focus {
  outline: none;
  border-color: var(--color-primary);
}

.theme-btn-apply-custom {
  padding: 8px 16px;
  background: var(--btn-bg);
  color: var(--btn-text);
  border: none;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.theme-btn-apply-custom:hover {
  opacity: 0.9;
}

.theme-switcher-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: var(--bg-card-alt);
  border-top: 1px solid var(--border-card);
  font-size: 12px;
  color: var(--text-secondary);
}

.theme-current-badge {
  font-weight: 600;
  color: var(--color-primary);
}

/* Sidebar theme button */
.sidebar-theme-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  margin-top: 4px;
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  border-radius: 12px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.sidebar-theme-btn i {
  font-size: 14px;
  color: var(--color-primary);
  width: 18px;
  text-align: center;
}

.sidebar-theme-btn:hover {
  background: var(--nav-hover-bg);
  border-color: var(--color-primary);
  color: var(--text-primary);
}

/* Responsive modal */
@media (max-width: 640px) {
  .theme-full-grid {
    grid-template-columns: 1fr;
    max-height: 240px;
  }
  .theme-switcher-content {
    max-height: 92vh;
  }
}