@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(fonts/jakarta-600-vietnamese.woff2) format("woff2");
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(fonts/jakarta-600-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:"Jakarta dự phòng";src:local("Arial"),local("Helvetica"),local("Liberation Sans");
  size-adjust:104.9%;ascent-override:104%;descent-override:22%;line-gap-override:0%}
@font-face{font-family:"Jakarta dự phòng";src:local("DejaVu Sans");
  size-adjust:93.3%;ascent-override:104%;descent-override:22%;line-gap-override:0%}

:root {

  --mp-pri:        #0066cc;
  --mp-pri-d:      #0057ad;
  --mp-pri-bg:     #eaf2fd;
  --mp-ok:         #16a34a;
  --mp-ok-fg:      #15803d;
  --mp-ok-bg:      #e9f9ef;
  --mp-warn:       #f59e0b;
  --mp-warn-fg:    #b45309;
  --mp-warn-bg:    #fef6e7;
  --mp-bad:        #dc2626;
  --mp-bad-fg:     #b91c1c;
  --mp-bad-bg:     #fdeceb;
  --mp-accent:     #f48120;

  --mp-bg:         #f2f5f9;
  --mp-surface:    #ffffff;
  --mp-pane:       #f7f9fc;
  --mp-line:       #e3e8ef;
  --mp-line-2:     #f0f3f8;
  --mp-text:       #1c2733;
  --mp-muted:      #6b7684;
  --mp-hover:      #f5f8fc;
  --mp-sel:        #e8f1fc;

  --mp-rail:       #101a2c;
  --mp-rail-2:     #1a2740;
  --mp-rail-fg:    #8fa0b8;

  --mp-on-color:   #ffffff;

  --mp-av-1:       #3b6ea5;
  --mp-av-2:       #2f8a76;
  --mp-av-3:       #8a5b9e;
  --mp-av-4:       #b06b3c;
  --mp-av-5:       #4a6b8a;
  --mp-av-6:       #a04f5f;

  --mp-av-o:       36px;
  --mp-av-o-nho:   32px;
  --mp-av-o-to:    44px;
  --mp-av-le:      56px;
  --mp-av-le-nho:  48px;

  --mp-do-dai-dong: 72ch;

  --mp-icon-o:     36px;
  --mp-icon-2o:    72px;

  --mp-login-bg:   #f3f6fa;
  --mp-login-bg-2: #e9eff7;
  --mp-card:       #ffffff;
  --mp-sky-1:      #cfe6fb;
  --mp-sky-2:      #a9d2f5;
  --mp-sky-3:      #7fb9ee;
  --mp-ink:        #23415f;
  --mp-sel-2:      #eef4fb;

  --mp-danger:     var(--mp-bad);
  --mp-logo-w:     178px;
  --mp-logo-h:     55px;

  --mp-r-xs:   4px;
  --mp-r-sm:   8px;

  --mp-r-md:   8px;
  --mp-r-pill: 999px;

  --mp-sh-1: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --mp-sh-2: 0 12px 32px -8px rgba(16,24,40,.18);

  --mp-h-nut:     40px;
  --mp-h-nut-nho: 36px;

  --mp-font: "Plus Jakarta Sans", "Jakarta dự phòng", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --mp-chu-xs:  11px;
  --mp-chu-sm:  12px;
  --mp-chu-md:  13px;
  --mp-chu:     14px;
  --mp-chu-lg:  15px;
  --mp-chu-h2:  16px;
  --mp-chu-h1:  22px;

  --mp-s0: 2px;  --mp-s1: 4px;  --mp-s1h: 6px;  --mp-s2: 8px;
  --mp-s2h: 10px; --mp-s3: 12px; --mp-s3h: 14px; --mp-s4: 16px;
  --mp-s5: 20px; --mp-s6: 24px; --mp-s7: 32px;
}

html.dark-mode {
  --mp-pri:        #4d9bff;
  --mp-pri-d:      #3d8ae8;
  --mp-pri-bg:     #11223a;
  --mp-ok:         #22c55e;
  --mp-ok-fg:      #4ade80;
  --mp-ok-bg:      #10281a;
  --mp-warn:       #fbbf24;
  --mp-warn-fg:    #fcd34d;
  --mp-warn-bg:    #2b1f08;
  --mp-bad:        #ef4444;
  --mp-bad-fg:     #f87171;
  --mp-bad-bg:     #2a1414;
  --mp-accent:     #f59440;

  --mp-bg:         #121820;
  --mp-surface:    #171f29;
  --mp-pane:       #141b24;
  --mp-line:       #2a3642;
  --mp-line-2:     #222c37;
  --mp-text:       #dfe6ee;
  --mp-muted:      #97a3b2;
  --mp-hover:      #1c2530;
  --mp-sel:        #1b2d42;

  --mp-rail:       #0c141f;
  --mp-rail-2:     #16202b;
  --mp-rail-fg:    #9fb0c0;
  --mp-on-color:   #ffffff;

  --mp-login-bg:   #121820;
  --mp-login-bg-2: #0e141b;
  --mp-card:       #171f29;
  --mp-ink:        #cfe0f2;
  --mp-sel-2:      #1b2d42;

  --mp-sh-1: 0 1px 2px rgba(0,0,0,.34), 0 1px 3px rgba(0,0,0,.28);
  --mp-sh-2: 0 12px 32px -8px rgba(0,0,0,.62);
}