/* Cac phong cach giao dien. Nap SAU theme.css / app.css / kids.css.
   Chon bang thuoc tinh <html data-theme="ocean|fpt|hitech"> (xem js/theme.js).
   - ocean : mac dinh (bien goc trong theme.css + kids.css)
   - fpt   : phong cach FPT School - cam / xanh duong / xanh la, nen sang, bo cuc vuon va chuyen nghiep
   - hitech: phong cach High Tech - nen toi, kinh mo (glass), anh sang neon cyan / tim */

/* =====================================================================
   FPT
   ===================================================================== */
html[data-theme="fpt"] {
  --fpt-orange: #F37321;
  --fpt-orange-dark: #D95F12;
  --fpt-blue: #0466B2;
  --fpt-blue-dark: #034E8A;
  --fpt-navy: #0A2A5E;
  --fpt-green: #21B14B;
  --fpt-green-dark: #178A38;
  --primary: var(--fpt-orange); --primary-hover: var(--fpt-orange-dark); --primary-rgb: 243, 115, 33;
  --success: var(--fpt-green); --success-hover: var(--fpt-green-dark);
  --warning: var(--fpt-blue); --warning-hover: var(--fpt-blue-dark); --warning-ink: #FFFFFF;
  --info: var(--fpt-blue); --info-hover: var(--fpt-blue-dark);
  --fpt-stripe: linear-gradient(90deg, var(--fpt-orange) 0 33.34%, var(--fpt-blue) 33.34% 66.67%, var(--fpt-green) 66.67%);

  --sun: #FFB81C;
  --sun-deep: #E89B00;
  --ocean: var(--fpt-blue);
  --ocean-deep: var(--fpt-blue);
  --ocean-dark: var(--fpt-navy);
  --coral: var(--fpt-orange);
  --orange: var(--fpt-orange);
  --aqua: #1AA6B7;
  --leaf: var(--fpt-green);
  --leaf-deep: var(--fpt-green-dark);
  --navy: var(--fpt-navy);
  --ink: #2D3E5C;
  --muted: #6B7A90;
  --line: #E2E8F0;
  --bg: #F4F6FA;
  --card: #FFFFFF;
  --card-border: #E8EDF4;
  --soft: #EEF3FA;
  --row: #F7F9FC;
  --row-hover: #F1F5FB;
  --table-head: #F8FAFC;
  --overlay: rgba(10, 42, 94, .55);
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 4px 16px rgba(10, 42, 94, .07);
  --shadow-lg: 0 16px 40px rgba(10, 42, 94, .16);
  --font: "Segoe UI", "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --heading-weight: 800;

  --btn-primary: var(--fpt-orange);
  --btn-primary-hover: var(--fpt-orange-dark);
  --btn-primary-shadow: rgba(201, 82, 14, .35);
  --btn-green: var(--fpt-green);
  --btn-green-hover: var(--fpt-green-dark);
  --btn-green-shadow: rgba(35, 128, 47, .35);
  --btn-accent: var(--fpt-blue);
  --btn-accent-hover: var(--fpt-blue-dark);
  --btn-accent-shadow: rgba(8, 66, 125, .35);
  --on-accent: #FFFFFF;
  --btn-coral: var(--fpt-blue);
  --btn-coral-hover: var(--fpt-blue-dark);
  --btn-coral-shadow: rgba(8, 66, 125, .35);
  --btn-radius: 10px;

  --t-blue-bg: #E8F0FB;   --t-blue-ink: #0466B2;
  --t-green-bg: #E7F6E9;  --t-green-ink: #1E7A2E;
  --t-sun-bg: #FFF4E5;    --t-sun-ink: #A04A00;
  --t-red-bg: #FDECEC;    --t-red-ink: #B42318;
  --t-coral-bg: #FDEBDD;  --t-coral-ink: #B8470A;
  --t-gray-bg: #EEF1F5;   --t-gray-ink: #4B5B70;
  --t-aqua-bg: #E3F4F7;   --t-aqua-ink: #0E6E7E;
  --t-sim-bg: #FFF6E0;    --t-sim-ink: #8A5A00;   --t-sim-border: #FFB81C;

  --c-energy: var(--fpt-green);
  --c-sim: #FFB81C;
  --c-primary: var(--fpt-blue);
  --c-secondary: var(--fpt-orange);
  --c-steps: var(--fpt-blue);
  --c-bar-grad: linear-gradient(90deg, var(--fpt-blue), var(--fpt-green));
  --c-danger-grad: linear-gradient(90deg, var(--fpt-orange), #D92D20);

  --sidebar-bg: linear-gradient(180deg, #0A2A5E 0%, #0B3B7E 100%);
  --sidebar-ink: #E6EEFA;
  --sidebar-hover: rgba(255, 255, 255, .10);
  --sidebar-active-bg: #FFFFFF;
  --sidebar-active-ink: var(--fpt-navy);
  --topbar-bg: rgba(255, 255, 255, .96);
  --code-bg: #0A2A5E;
  --code-ink: #E6EEFA;
  --pre-bg: #F4F6FA;

  --m-body: var(--fpt-blue);
  --m-fin: var(--fpt-navy);
  --m-belly: #EAF2FB;
  --m-cheek: var(--fpt-orange);
  --m-bolt: var(--fpt-orange);
  --m-bolt-line: var(--fpt-orange-dark);
  --m-eye: var(--fpt-navy);
  --live-on: var(--fpt-green);

  /* Man hinh hoc sinh */
  --kid-bg:
    radial-gradient(circle at 6% 14%, rgba(243, 115, 33, .16) 0 110px, transparent 111px),
    radial-gradient(circle at 94% 18%, rgba(4, 102, 178, .13) 0 170px, transparent 171px),
    radial-gradient(circle at 88% 92%, rgba(33, 177, 75, .15) 0 150px, transparent 151px),
    radial-gradient(circle at 12% 88%, rgba(4, 102, 178, .08) 0 90px, transparent 91px),
    linear-gradient(160deg, #FFFFFF 0%, #F1F5FB 100%);
  --kid-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120 L120 70 L300 70 L180 120Z' fill='%23F37321' opacity='.9'/%3E%3Cpath d='M300 120 L420 70 L600 70 L480 120Z' fill='%230466B2' opacity='.9'/%3E%3Cpath d='M600 120 L720 70 L900 70 L780 120Z' fill='%2321B14B' opacity='.9'/%3E%3C/svg%3E");
  --kid-title: var(--fpt-navy);
  --kid-title-shadow: none;
  --kid-sub: var(--fpt-orange);
  --bubble: rgba(4, 102, 178, .07);
  --bubble-hi: rgba(4, 102, 178, .05);
  --chip-bg: #FFFFFF;
  --chip-hover: #F1F5FB;
  --kcard-shadow: 0 14px 36px rgba(10, 42, 94, .12);
  --kcard-radius: 20px;
  --kbtn-radius: 14px;
  --kbtn-bg: var(--fpt-orange);        --kbtn-ink: #FFFFFF;          --kbtn-edge: var(--fpt-orange-dark);
  --kbtn-green-bg: var(--fpt-green);   --kbtn-green-ink: #FFFFFF;    --kbtn-green-edge: var(--fpt-green-dark);
  --kbtn-coral-bg: var(--fpt-blue);    --kbtn-coral-ink: #FFFFFF;    --kbtn-coral-edge: var(--fpt-blue-dark);
  --kbtn-white-bg: #FFFFFF;            --kbtn-white-ink: var(--fpt-navy); --kbtn-white-edge: #CBD5E1;
  --key-bg: #FFFFFF; --key-edge: #CBD5E1; --key-ring: #E2E8F0;
  --key-alt-bg: #FDEBDD; --key-alt-edge: #F5B58A; --key-alt-ring: #FAD3B6;
  --code-box-bg: #F4F8FD; --code-box-border: var(--fpt-blue);
  --game-grid-bg: var(--fpt-navy);
  --game-tile-bg: rgba(255, 255, 255, .95);
  --hero-card-bg: linear-gradient(115deg, #0A2A5E 0%, #0466B2 62%, #F37321 140%);
  --avatar-big-bg: linear-gradient(135deg, #FDEBDD, #E8F0FB);
  --seg-bg: #FFFFFF;
  --progress-grad: linear-gradient(90deg, var(--fpt-blue), var(--fpt-green));
  --energy-big: var(--fpt-green);
  --confetti-1: #F37321; --confetti-2: #0466B2; --confetti-3: #21B14B; --confetti-4: #FFB81C; --confetti-5: #F37321; --confetti-6: #0466B2;

  --hero-bg:
    radial-gradient(circle at 85% 15%, rgba(243, 115, 33, .45) 0 120px, transparent 121px),
    radial-gradient(circle at 10% 95%, rgba(33, 177, 75, .35) 0 150px, transparent 151px),
    linear-gradient(140deg, #0A2A5E 0%, #0466B2 70%, #1A73C9 100%);
  --hero-ink: #FFFFFF;
  --hero-title-shadow: none;
  --hero-chip: rgba(255, 255, 255, .95);
}
/* Dai 3 mau thuong hieu tren cung moi man hinh */
html[data-theme="fpt"] body::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 5px; background: var(--fpt-stripe); z-index: 1100; pointer-events: none;
}
html[data-theme="fpt"] .topbar { top: 5px; }
html[data-theme="fpt"] .sidebar { top: 5px; height: calc(100vh - 5px); }
html[data-theme="fpt"] .shell { padding-top: 5px; }
html[data-theme="fpt"] .side-nav a.active { box-shadow: inset 4px 0 0 var(--fpt-orange), 0 4px 12px rgba(0, 0, 0, .15); }
html[data-theme="fpt"] .card h3, html[data-theme="fpt"] .card-head h3 { position: relative; padding-left: 12px; }
html[data-theme="fpt"] .card h3::before, html[data-theme="fpt"] .card-head h3::before {
  content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px; border-radius: 2px; background: var(--fpt-orange);
}
html[data-theme="fpt"] .kpi { border-top: 3px solid var(--kpi-edge, var(--fpt-blue)); }
html[data-theme="fpt"] .kpi.t-green { --kpi-edge: var(--fpt-green); }
html[data-theme="fpt"] .kpi.t-sun, html[data-theme="fpt"] .kpi.t-coral { --kpi-edge: var(--fpt-orange); }
html[data-theme="fpt"] .kpi.t-red { --kpi-edge: #D92D20; }
html[data-theme="fpt"] .bubble-card { border-top: 6px solid var(--fpt-orange); }
html[data-theme="fpt"] .chip { box-shadow: 0 2px 8px rgba(10, 42, 94, .08); border: 1px solid #E8EDF4; }
html[data-theme="fpt"] .hero-card { color: #FFFFFF; box-shadow: 0 14px 30px rgba(10, 42, 94, .22); }
html[data-theme="fpt"] .hero-card .avatar-big { box-shadow: none; }
html[data-theme="fpt"] .game-tile { box-shadow: inset 0 -5px 0 rgba(10, 42, 94, .12); }
html[data-theme="fpt"] .seg { box-shadow: 0 2px 8px rgba(10, 42, 94, .08); }
html[data-theme="fpt"] .mascot-big { filter: drop-shadow(0 12px 14px rgba(10, 42, 94, .22)); }
html[data-theme="fpt"] body.ocean::after { animation: none; height: 70px; background-size: 900px 70px; opacity: .9; }
html[data-theme="fpt"] .landing .hero .flow span { color: var(--fpt-navy); }

/* =====================================================================
   HIGH TECH
   ===================================================================== */
html[data-theme="hitech"] {
  color-scheme: dark;
  --neon: #22D3EE;
  --primary: #0EA5E9; --primary-hover: #0284C7; --primary-rgb: 14, 165, 233;
  --success: #10B981; --success-hover: #059669;
  --warning: #FBBF24; --warning-hover: #F59E0B; --warning-ink: #1A1200;
  --info: #8B5CF6; --info-hover: #7C3AED;
  --neon-2: #A78BFA;
  --neon-3: #34D399;

  --sun: #FBBF24;
  --sun-deep: #F59E0B;
  --ocean: #22D3EE;
  --ocean-deep: #38BDF8;
  --ocean-dark: #67E8F9;
  --coral: #F472B6;
  --orange: #FB923C;
  --aqua: #2DD4BF;
  --leaf: #34D399;
  --leaf-deep: #10B981;
  --danger: #EF4444;
  --danger-soft: rgba(239, 68, 68, .16);
  --navy: #E6EDFF;
  --ink: #B8C4E6;
  --muted: #7F8DB3;
  --line: #1E2A4D;
  --bg: #070B18;
  --card: #0F172E;
  --card-border: rgba(110, 160, 255, .16);
  --soft: #16203D;
  --row: #121B36;
  --row-hover: #17234A;
  --table-head: #0D1428;
  --input-bg: #0B1226;
  --on-primary: #FFFFFF;
  --on-accent: #1A1200;
  --overlay: rgba(2, 4, 12, .72);
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 8px 30px rgba(0, 0, 0, .45);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .6);
  --font: "Segoe UI Variable Text", "Segoe UI", "Inter", system-ui, -apple-system, Arial, sans-serif;
  --heading-font: "Segoe UI Variable Display", "Segoe UI", "Inter", system-ui, sans-serif;
  --heading-weight: 700;

  --btn-primary: linear-gradient(135deg, #06B6D4 0%, #3B82F6 100%);
  --btn-primary-hover: linear-gradient(135deg, #22D3EE 0%, #60A5FA 100%);
  --btn-primary-shadow: rgba(34, 211, 238, .25);
  --btn-green: linear-gradient(135deg, #10B981 0%, #059669 100%);
  --btn-green-hover: linear-gradient(135deg, #34D399 0%, #10B981 100%);
  --btn-green-shadow: rgba(16, 185, 129, .25);
  --btn-accent: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
  --btn-accent-hover: linear-gradient(135deg, #FCD34D 0%, #FBBF24 100%);
  --btn-accent-shadow: rgba(251, 191, 36, .25);
  --btn-coral: linear-gradient(135deg, #A78BFA 0%, #7C3AED 100%);
  --btn-coral-hover: linear-gradient(135deg, #C4B5FD 0%, #8B5CF6 100%);
  --btn-coral-shadow: rgba(139, 92, 246, .3);
  --btn-radius: 10px;

  --t-blue-bg: rgba(56, 189, 248, .14);   --t-blue-ink: #7DD3FC;
  --t-green-bg: rgba(52, 211, 153, .14);  --t-green-ink: #6EE7B7;
  --t-sun-bg: rgba(251, 191, 36, .14);    --t-sun-ink: #FCD34D;
  --t-red-bg: rgba(244, 63, 94, .16);     --t-red-ink: #FDA4AF;
  --t-coral-bg: rgba(244, 114, 182, .15); --t-coral-ink: #F9A8D4;
  --t-gray-bg: rgba(148, 163, 184, .14);  --t-gray-ink: #CBD5E1;
  --t-aqua-bg: rgba(45, 212, 191, .14);   --t-aqua-ink: #5EEAD4;
  --t-sim-bg: rgba(251, 146, 60, .12);    --t-sim-ink: #FDBA74;   --t-sim-border: #FB923C;

  --c-energy: #34D399;
  --c-sim: #FB923C;
  --c-primary: #22D3EE;
  --c-secondary: #A78BFA;
  --c-steps: #38BDF8;
  --c-bar-grad: linear-gradient(90deg, #22D3EE, #A78BFA);
  --c-danger-grad: linear-gradient(90deg, #FB923C, #EF4444);

  --sidebar-bg: linear-gradient(180deg, #0A1024 0%, #0C1430 100%);
  --sidebar-ink: #C7D2F5;
  --sidebar-hover: rgba(34, 211, 238, .08);
  --sidebar-active-bg: rgba(34, 211, 238, .14);
  --sidebar-active-ink: #A5F3FC;
  --topbar-bg: rgba(7, 11, 24, .82);
  --code-bg: #050912;
  --code-ink: #A5F3FC;
  --pre-bg: #0B1226;

  --m-body: #0EA5E9;
  --m-fin: #6366F1;
  --m-belly: #CFFAFE;
  --m-cheek: #F472B6;
  --m-bolt: #FBBF24;
  --m-bolt-line: #F59E0B;
  --m-eye: #0B1022;
  --live-off: #475569;
  --live-on: #34D399;

  /* Man hinh hoc sinh */
  --kid-bg:
    radial-gradient(ellipse at 15% -5%, rgba(34, 211, 238, .28), transparent 55%),
    radial-gradient(ellipse at 95% 25%, rgba(167, 139, 250, .24), transparent 55%),
    radial-gradient(ellipse at 50% 120%, rgba(52, 211, 153, .18), transparent 60%),
    linear-gradient(rgba(56, 189, 248, .06) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(56, 189, 248, .06) 1px, transparent 1px) 0 0 / 44px 44px,
    #070B18;
  --kid-wave: linear-gradient(to top, rgba(34, 211, 238, .16), transparent);
  --kid-title: #F1F5FF;
  --kid-title-shadow: 0 0 28px rgba(34, 211, 238, .45);
  --kid-sub: #67E8F9;
  --bubble: rgba(34, 211, 238, .10);
  --bubble-hi: rgba(167, 139, 250, .18);
  --chip-bg: rgba(15, 23, 46, .82);
  --chip-hover: rgba(22, 32, 61, .95);
  --kcard-shadow: 0 0 0 1px rgba(34, 211, 238, .14), 0 24px 60px rgba(0, 0, 0, .55);
  --kcard-radius: 24px;
  --kbtn-radius: 16px;
  --kbtn-bg: linear-gradient(135deg, #06B6D4, #3B82F6);     --kbtn-ink: #FFFFFF;    --kbtn-edge: #1E3A8A;
  --kbtn-green-bg: linear-gradient(135deg, #34D399, #10B981); --kbtn-green-ink: #022C1E; --kbtn-green-edge: #065F46;
  --kbtn-coral-bg: linear-gradient(135deg, #A78BFA, #7C3AED); --kbtn-coral-ink: #FFFFFF; --kbtn-coral-edge: #4C1D95;
  --kbtn-white-bg: #16203D;  --kbtn-white-ink: #E6EDFF;  --kbtn-white-edge: #050912;
  --key-bg: #121B36; --key-edge: #050912; --key-ring: rgba(56, 189, 248, .22);
  --key-alt-bg: rgba(244, 114, 182, .14); --key-alt-edge: #2A0A1E; --key-alt-ring: rgba(244, 114, 182, .35);
  --code-box-bg: #0B1226; --code-box-border: #22D3EE;
  --game-grid-bg: rgba(15, 23, 46, .85);
  --game-tile-bg: #121B36;
  --hero-card-bg: linear-gradient(120deg, rgba(34, 211, 238, .22), rgba(167, 139, 250, .26)), #0F172E;
  --avatar-big-bg: linear-gradient(135deg, #1E293B, #312E81);
  --seg-bg: rgba(15, 23, 46, .85);
  --progress-grad: linear-gradient(90deg, #22D3EE, #34D399);
  --energy-big: #34D399;
  --confetti-1: #22D3EE; --confetti-2: #A78BFA; --confetti-3: #34D399; --confetti-4: #FBBF24; --confetti-5: #F472B6; --confetti-6: #38BDF8;

  --hero-bg: var(--kid-bg);
  --hero-ink: #F1F5FF;
  --hero-title-shadow: 0 0 30px rgba(34, 211, 238, .45);
  --hero-chip: rgba(15, 23, 46, .85);
}
html[data-theme="hitech"] body { background: var(--bg); }
html[data-theme="hitech"] .card, html[data-theme="hitech"] .kpi { backdrop-filter: blur(10px); background: rgba(15, 23, 46, .82); }
html[data-theme="hitech"] .kpi::after { opacity: .9; filter: blur(14px); }
html[data-theme="hitech"] .kpi .val { text-shadow: 0 0 18px rgba(34, 211, 238, .25); }
html[data-theme="hitech"] .sidebar { border-right: 1px solid var(--line); }
html[data-theme="hitech"] .side-nav a.active { box-shadow: inset 3px 0 0 #22D3EE, 0 0 18px rgba(34, 211, 238, .15); }
html[data-theme="hitech"] .brand svg, html[data-theme="hitech"] .mascot-big, html[data-theme="hitech"] .mascot-mini { filter: drop-shadow(0 0 14px rgba(34, 211, 238, .45)); }
html[data-theme="hitech"] .chart-tip { background: #E6EDFF; color: #070B18; }
html[data-theme="hitech"] .chip { border: 1px solid var(--card-border); backdrop-filter: blur(8px); }
html[data-theme="hitech"] .bubble-card, html[data-theme="hitech"] .panel-card, html[data-theme="hitech"] .tile-card { backdrop-filter: blur(12px); background: rgba(15, 23, 46, .84); }
html[data-theme="hitech"] .hero-energy .v { text-shadow: 0 0 34px rgba(52, 211, 153, .55); }
html[data-theme="hitech"] .stat .v { text-shadow: 0 0 20px rgba(34, 211, 238, .25); }
html[data-theme="hitech"] .kbtn { text-shadow: 0 1px 0 rgba(0, 0, 0, .2); }
html[data-theme="hitech"] .kbtn.pulse { box-shadow: 0 8px 0 var(--kbtn-edge), 0 0 34px rgba(34, 211, 238, .45); }
html[data-theme="hitech"] .code-display { box-shadow: 0 0 22px rgba(34, 211, 238, .2), inset 0 0 18px rgba(34, 211, 238, .08); }
html[data-theme="hitech"] .game-grid { border: 1px solid rgba(34, 211, 238, .25); box-shadow: 0 0 40px rgba(34, 211, 238, .12); }
html[data-theme="hitech"] .game-tile { box-shadow: inset 0 0 0 1px rgba(56, 189, 248, .14); }
html[data-theme="hitech"] .klb .pos, html[data-theme="hitech"] .lb-row .rank { color: #67E8F9; }
html[data-theme="hitech"] .hero-card { color: #F1F5FF; border: 1px solid rgba(34, 211, 238, .25); box-shadow: 0 0 40px rgba(34, 211, 238, .12); }
html[data-theme="hitech"] .tabbar { backdrop-filter: blur(12px); background: rgba(15, 23, 46, .9); }
html[data-theme="hitech"] .avatar-big, html[data-theme="hitech"] .tile-card, html[data-theme="hitech"] .panel-card { box-shadow: 0 0 0 1px rgba(56, 189, 248, .12); }
html[data-theme="hitech"] body.ocean::after { animation: none; }
html[data-theme="hitech"] .floor-map { background: #0B1226; border: 1px solid var(--line); }
html[data-theme="hitech"] .floor-map .tile { background: #16203D; }
html[data-theme="hitech"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="hitech"] ::-webkit-scrollbar-thumb { background: #1E2A4D; border-radius: 10px; }
html[data-theme="hitech"] ::-webkit-scrollbar-track { background: #0A1024; }

/* ---- Icon / logo theo phong cach ---- */
html[data-theme="fpt"] {
  --g-blue: linear-gradient(135deg, #3D8FE0, #0466B2);
  --g-green: linear-gradient(135deg, #63CF70, #23802F);
  --g-orange: linear-gradient(135deg, #FF9A52, #E85D0C);
  --g-coral: linear-gradient(135deg, #F78C6B, #D9480F);
  --g-violet: linear-gradient(135deg, #7F8CF0, #3B4CCA);
  --g-aqua: linear-gradient(135deg, #3BC9DB, #0C8599);
  --tile-shadow: 0 8px 16px -8px rgba(10, 42, 94, .5);
  --logo-1: #1E73C9; --logo-2: #0A2A5E; --logo-sole: #FFFFFF; --logo-bolt: #F37321;
  --logo-toe: #FFFFFF; --logo-toe-1: #F37321; --logo-toe-2: #21B14B; --logo-arc: #21B14B;
  --wm-accent: #F37321;
}
html[data-theme="hitech"] {
  --g-blue: linear-gradient(135deg, #38BDF8, #2563EB);
  --g-green: linear-gradient(135deg, #34D399, #059669);
  --g-orange: linear-gradient(135deg, #FBBF24, #EA580C);
  --g-coral: linear-gradient(135deg, #F472B6, #BE185D);
  --g-violet: linear-gradient(135deg, #A78BFA, #6D28D9);
  --g-aqua: linear-gradient(135deg, #22D3EE, #0891B2);
  --tile-shadow: 0 0 18px -4px rgba(34, 211, 238, .55);
  --logo-1: #06B6D4; --logo-2: #6D28D9; --logo-sole: #F0FDFF; --logo-bolt: #F59E0B;
  --logo-toe: #E0F2FE; --logo-toe-1: #FBBF24; --logo-toe-2: #34D399; --logo-arc: #A5F3FC;
  --wm-accent: #22D3EE;
}
html[data-theme="hitech"] .brand-mark svg { filter: drop-shadow(0 0 12px rgba(34, 211, 238, .5)); }
html[data-theme="hitech"] .medal-badge:not(.r1):not(.r2):not(.r3) { color: #67E8F9; }

/* Linh vat ca voi chi dung o phong cach Ocean; FPT / High Tech dung hinh logo phat sang */
.art-brand { display: none; }
html[data-theme="fpt"] .art-ocean, html[data-theme="hitech"] .art-ocean { display: none; }
html[data-theme="fpt"] .art-brand, html[data-theme="hitech"] .art-brand { display: grid; }

html[data-theme="fpt"] .nav-pills .nav-link.active { color: var(--fpt-orange); }
html[data-theme="hitech"] .btn-primary { background-image: linear-gradient(135deg, #06B6D4, #3B82F6); border: 0; box-shadow: 0 6px 18px rgba(34, 211, 238, .25); }
html[data-theme="hitech"] .btn-success { background-image: linear-gradient(135deg, #10B981, #059669); border: 0; }
html[data-theme="hitech"] .btn-outline-primary { --bs-btn-bg: transparent; --bs-btn-color: #A5F3FC; --bs-btn-border-color: rgba(56, 189, 248, .35);
  --bs-btn-hover-bg: rgba(34, 211, 238, .08); --bs-btn-hover-color: #A5F3FC; --bs-btn-hover-border-color: rgba(56, 189, 248, .6); }
html[data-theme="hitech"] .nav-pills { --bs-nav-pills-link-active-bg: rgba(34, 211, 238, .14); --bs-nav-pills-link-active-color: #A5F3FC; }
html[data-theme="hitech"] .form-control:focus, html[data-theme="hitech"] .form-select:focus { border-color: #22D3EE; box-shadow: 0 0 0 3px rgba(34, 211, 238, .2), 0 0 16px rgba(34, 211, 238, .2); }
html[data-theme="hitech"] .toast { --bs-toast-bg: #0F172E; border: 1px solid var(--card-border); }
html[data-theme="hitech"] .logo-card img { filter: drop-shadow(0 0 10px rgba(34, 211, 238, .45)); }