@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&display=swap');

.row {
  margin-left: 0px;
  margin-right: 0px;
}

.container-fluid {
  margin-left: 0px;
  margin-right: 0px;
  padding-left: 0px;
  padding-right: 0px;
}



.italic {
  font-style: italic;
}

.underline {
  text-decoration: underline;
}

.extralight {
  font-weight: 200 !important;
}

.medium {
  font-weight: 450 !important;
}

.bold {
  font-weight: 600 !important;
}

/* --------------------------- */
.x-small {
  font-family: "Crimson Pro";
  font-size: var(--font-size-x-small);
  font-weight: 300;
  line-height: var(--font-line-height-x-small);
  letter-spacing: var(--font-letter-spacing-x-small);
  margin: 0px;
}

.small {
  font-family: "Crimson Pro";
  font-size: var(--font-size-small);
  font-weight: 300;
  line-height: var(--font-line-height-small);
  letter-spacing: var(--font-letter-spacing-small);
  margin: 0px;

}

.caption {
  font-family: "Crimson Pro";
  font-size: var(--font-size-caption);
  font-weight: 300;
  line-height: var(--font-line-height-caption);
  letter-spacing: var(--font-letter-spacing-caption);
  margin: 0px;

}

.paragraph,
p,
li,
span {
  font-family: "Crimson Pro";
  font-size: var(--font-size-paragraph);
  font-weight: 300;
  line-height: var(--font-line-height-paragraph);
  letter-spacing: var(--font-letter-spacing-paragraph);
  margin: 0px;

}

h6,
.h6 {
  font-family: "Crimson Pro";
  font-size: var(--font-size-h6);
  font-weight: 300;
  line-height: var(--font-line-height-h6);
  letter-spacing: var(--font-letter-spacing-h6);
  margin: 0px;

}

h5,
.h5 {
  font-family: "Crimson Pro";
  font-size: var(--font-size-h5);
  font-weight: 300;
  line-height: var(--font-line-height-h5);
  letter-spacing: var(--font-letter-spacing-h5);
  margin: 0px;

}

h4,
.h4 {
  font-family: "Crimson Pro";
  font-size: var(--font-size-h4);
  font-weight: 300;
  line-height: var(--font-line-height-h4);
  letter-spacing: var(--font-letter-spacing-h4);
  margin: 0px;

}

h3,
.h3 {
  font-family: "Crimson Pro";
  font-size: var(--font-size-h3);
  font-weight: 300;
  line-height: var(--font-line-height-h3);
  letter-spacing: var(--font-letter-spacing-h3);
  margin: 0px;

}

h2,
.h2 {
  font-family: "Crimson Pro";
  font-size: var(--font-size-h2);
  font-weight: 300;
  line-height: var(--font-line-height-h2);
  letter-spacing: var(--font-letter-spacing-h2);
  margin: 0px;

}

h1,
.h1 {
  font-family: "Crimson Pro";
  font-size: var(--font-size-h1);
  font-weight: 300;
  line-height: var(--font-line-height-h1);
  letter-spacing: var(--font-letter-spacing-h1);
  margin: 0px;

}

.title {
  font-family: "Crimson Pro";
  font-size: var(--font-size-title);
  font-weight: 300;
  line-height: var(--font-line-height-title);
  letter-spacing: var(--font-letter-spacing-title);
  margin: 0px;

}

.xl-title {
  font-family: "Crimson Pro";
  font-size: var(--font-size-xl-title);
  font-weight: 300;
  line-height: var(--font-line-height-xl-title);
  letter-spacing: var(--font-letter-spacing-xl-title);
  margin: 0px;

}

/* --------------------------- */

html,
body {
  margin: 0px !important;
  max-width: 100vw !important;
  overflow-x: hidden;
  overflow-y: scroll;
  background: var(--main-colors-background-b-200-slide-bg);
}

html {
  scroll-behavior: smooth;
}

hr {
  /* border: 0.1px solid var(--main-color-10) !important; */
  border: 0.5px solid var(--transparent-foreground---main-color-80) !important;
}

.blur-background {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Color variables for darkmode and lightmode ============================*/
:root {
  /* fix colors */
  --fix-white---white-100: #ffffff;
  --fix-white---white-90: rgba(255, 255, 255, 0.9);
  --fix-white---white-80: rgba(255, 255, 255, 0.8);
  --fix-white---white-70: rgba(255, 255, 255, 0.7);
  --fix-white---white-60: rgba(255, 255, 255, 0.6);
  --fix-white---white-50: rgba(255, 255, 255, 0.5);
  --fix-white---white-40: rgba(255, 255, 255, 0.4);
  --fix-white---white-30: rgba(255, 255, 255, 0.3);
  --fix-white---white-20: rgba(255, 255, 255, 0.2);
  --fix-white---white-10: rgba(255, 255, 255, 0.1);
  --fix-white---white-05: rgba(255, 255, 255, 0.05);


  --fix-black---black-100: #000000;
  --fix-black---black-90: rgba(0, 0, 0, 0.9);
  --fix-black---black-80: rgba(0, 0, 0, 0.8);
  --fix-black---black-70: rgba(0, 0, 0, 0.7);
  --fix-black---black-60: rgba(0, 0, 0, 0.6);
  --fix-black---black-50: rgba(0, 0, 0, 0.5);
  --fix-black---black-40: rgba(0, 0, 0, 0.4);
  --fix-black---black-30: rgba(0, 0, 0, 0.3);
  --fix-black---black-20: rgba(0, 0, 0, 0.2);
  --fix-black---black-10: rgba(0, 0, 0, 0.1);
  --fix-black---black-05: rgba(0, 0, 0, 0.05);


  /* light mode variables */
  --button-background: rgba(60, 37, 9, 0.50);
  --button-background-hover: rgba(115, 69, 13, 0.50);


  /* main foreground */
  --main-colors-foreground-f100: #000000;
  --main-colors-foreground-f200: #010710;
  --main-colors-foreground-f300: #02112c;
  --main-colors-foreground-f400: #1c2535;
  --main-colors-foreground-f-500-main: #373d48;
  --main-colors-foreground-f600: #53545b;
  --main-colors-foreground-f700: #706e6f;
  --main-colors-foreground-f800: #8f8985;
  --main-colors-foreground-f900: #aea69d;

  /* main background */
  --main-colors-background-b100: #ffffff;
  --main-colors-background-b-200-slide-bg: #F4EDE4;
  --main-colors-background-b-300-main: #F5EADB;
  --main-colors-background-b400: #f1d7b7;
  --main-colors-background-b500: #cabdb0;
  --main-colors-background-b600: #aea69d;
  --main-colors-background-b700: #8f8985;
  --main-colors-background-elevate-1: #F8F1E8;
  --main-colors-background-elevate-2: #FAF5EF;
  --transparent-background-elevate-blur: rgba(244, 237, 228, 0.5);


  /* transparent foreground */
  --transparent-foreground---main-color-100: #373d48;
  --transparent-foreground---main-color-90: rgba(55, 61, 72, 0.9);
  --transparent-foreground---main-color-80: rgba(55, 61, 72, 0.8);
  --transparent-foreground---main-color-70: rgba(55, 61, 72, 0.7);
  --transparent-foreground---main-color-60: rgba(55, 61, 72, 0.6);
  --transparent-foreground---main-color-50: rgba(55, 61, 72, 0.5);
  --transparent-foreground---main-color-40: rgba(55, 61, 72, 0.4);
  --transparent-foreground---main-color-30: rgba(55, 61, 72, 0.3);
  --transparent-foreground---main-color-20: rgba(55, 61, 72, 0.2);
  --transparent-foreground---main-color-10: rgba(55, 61, 72, 0.1);
  --transparent-foreground---main-color-05: rgba(55, 61, 72, 0.05);

  /* transparent background */
  --transparent-background---bg-color-100: #fbead5;
  --transparent-background---bg-color-90: rgba(251, 234, 213, 0.9);
  --transparent-background---bg-color-80: rgba(251, 234, 213, 0.8);
  --transparent-background---bg-color-70: rgba(251, 234, 213, 0.7);
  --transparent-background---bg-color-60: rgba(251, 234, 213, 0.6);
  --transparent-background---bg-color-50: rgba(251, 234, 213, 0.5);
  --transparent-background---bg-color-40: rgba(251, 234, 213, 0.4);
  --transparent-background---bg-color-30: rgba(251, 234, 213, 0.3);
  --transparent-background---bg-color-20: rgba(251, 234, 213, 0.2);
  --transparent-background---bg-color-10: rgba(251, 234, 213, 0.1);
  --transparent-background---bg-color-05: rgba(251, 234, 213, 0.05);


  /* alternative foreground */

  --alternative-foreground-blue: #3229be;
  --alternative-foreground-green: #0f591c;
  --alternative-foreground-red: #a21111;
  --alternative-foreground-yellow: #493f0e;
  --alternative-foreground-magenta: #891057;
  --alternative-foreground-cyan: #12303e;

  /* alternative background */
  --alternative-background-blue-case-study: #eae9ff;
  --alternative-background-green-further-reading: #c6fecf;
  --alternative-background-red-to-do: #fdd;
  --alternative-background-yellow-quiz: #ffeea6;
  --alternative-background-magenta: #fedcf2;
  --alternative-background-cyan: #dff3ff;


  /* highlight */
  --highlight-blue: #1c70ee;
  --highlight-green: #01b313;
  --highlight-red: #e62e2e;
  --highlight-yellow: #dca015;
  --highlight-magenta: #e523de;
}

/* Laptop size ======================= */
@media (min-width: 1201px) {
  :root {
    --font-letter-spacing-xl-title: 0px;
    --font-letter-spacing-title: 0.22px;
    --font-letter-spacing-h1: 0.2px;
    --font-letter-spacing-h2: 0.23px;
    --font-letter-spacing-h3: 0.36px;
    --font-letter-spacing-h4: 0.28px;
    --font-letter-spacing-h5: 0.24px;
    --font-letter-spacing-h6: 0.216px;
    --font-letter-spacing-paragraph: 0.200px;
    --font-letter-spacing-caption: 0.16px;
    --font-letter-spacing-small: 0.200px;
    --font-letter-spacing-x-small: 0.30px;


    --font-line-height-xl-title: 115px;
    --font-line-height-title: 78px;
    --font-line-height-h1: 61px;
    --font-line-height-h2: 57px;
    --font-line-height-h3: 38px;
    --font-line-height-h4: 31px;
    --font-line-height-h5: 29px;
    --font-line-height-h6: 27px;
    --font-line-height-paragraph: 23px;
    --font-line-height-caption: 21px;
    --font-line-height-small: 18px;
    --font-line-height-x-small: 16px;

    --font-size-xl-title: 112px;
    --font-size-title: 72px;
    --font-size-h1: 48px;
    --font-size-h2: 38px;
    --font-size-h3: 30px;
    --font-size-h4: 24px;
    --font-size-h5: 20px;
    --font-size-h6: 18px;
    --font-size-paragraph: 17px;
    --font-size-caption: 14px;
    --font-size-small: 12px;
    --font-size-x-small: 10px;

    --spacing-xxl: 48px;
    --spacing-xl: 32px;
    --spacing-l: 24px;
    --spacing-m: 20px;
    --spacing-s: 16px;
    --spacing-xs: 12px;
    --spacing-xxs: 8px;
  }
}

/* Tablet size ======================= */
@media (min-width: 575px) and (max-width: 1200px) {
  :root {
    --font-letter-spacing-xl-title: 1.343px;
    --font-letter-spacing-title: 0.72px;
    --font-letter-spacing-h1: 0.575px;
    --font-letter-spacing-h2: 0.45px;
    --font-letter-spacing-h3: 0.20px;
    --font-letter-spacing-h4: 0.20px;
    --font-letter-spacing-h5: 0.12px;
    --font-letter-spacing-h6: 0.10px;
    --font-letter-spacing-paragraph: 0.30px;
    --font-letter-spacing-caption: 0.5px;
    --font-letter-spacing-small: 0.5px;
    --font-letter-spacing-xsmall: 0.5px;

    --font-line-height-xl-title: 62px;
    --font-line-height-title: 52px;
    --font-line-height-h1: 48px;
    --font-line-height-h2: 42px;
    --font-line-height-h3: 38px;
    --font-line-height-h4: 34px;
    --font-line-height-h5: 29px;
    --font-line-height-h6: 27px;
    --font-line-height-paragraph: 24px;
    --font-line-height-caption: 22px;
    --font-line-height-small: 19px;
    --font-line-height-xsmall: 18px;


    --font-size-xl-title: 60px;
    --font-size-title: 48px;
    --font-size-h1: 42px;
    --font-size-h2: 36px;
    --font-size-h3: 30px;
    --font-size-h4: 26px;
    --font-size-h5: 20px;
    --font-size-h6: 18px;
    --font-size-paragraph: 16px;
    --font-size-caption: 14px;
    --font-size-small: 12px;
    --font-size-xsmall: 10px;

    --spacing-xxl: 48px;
    --spacing-xl: 32px;
    --spacing-l: 24px;
    --spacing-m: 20px;
    --spacing-s: 16px;
    --spacing-xs: 12px;
    --spacing-xxs: 8px;
  }
}

/* Mobile size ======================= */
@media (max-width: 575px) {
  :root {
    --font-letter-spacing-xl-title: 0px;
    --font-letter-spacing-title: 0.15px;
    --font-letter-spacing-h1: -0.10px;
    --font-letter-spacing-h2: 0.20px;
    --font-letter-spacing-h3: 0.36px;
    --font-letter-spacing-h4: 0.30px;
    --font-letter-spacing-h5: 0.30px;
    --font-letter-spacing-h6: 0.21px;
    --font-letter-spacing-paragraph: 0.40px;
    --font-letter-spacing-caption: 0.5px;
    --font-letter-spacing-small: 0.5px;
    --font-letter-spacing-xsmall: 0.5px;

    --font-line-height-xl-title: 54px;
    --font-line-height-title: 36px;
    --font-line-height-h1: 40px;
    --font-line-height-h2: 34px;
    --font-line-height-h3: 31px;
    --font-line-height-h4: 26px;
    --font-line-height-h5: 26px;
    --font-line-height-h6: 28px;
    --font-line-height-paragraph: 20px;
    --font-line-height-caption: 18px;
    --font-line-height-small: 17px;
    --font-line-height-xsmall: 16px;

    --font-size-xl-title: 52px;
    --font-size-title: 32px;
    --font-size-h1: 36px;
    --font-size-h2: 30px;
    --font-size-h3: 24px;
    --font-size-h4: 22px;
    --font-size-h5: 20px;
    --font-size-h6: 18px;
    --font-size-paragraph: 16px;
    --font-size-caption: 14px;
    --font-size-small: 12px;
    --font-size-xsmall: 10px;

    --spacing-xxl: 20px;
    --spacing-xl: 20px;
    --spacing-l: 16px;
    --spacing-m: 12px;
    --spacing-s: 8px;
    --spacing-xs: 4px;
    --spacing-xxs: 2px;
  }
}

/*  ======================= */

@media (prefers-color-scheme: dark) {
  :root {

    --button-background: rgba(80, 124, 175, 0.25);
    --button-background-hover: rgba(92, 133, 182, 0.35);

    /* main foreground */
    --main-colors-foreground-f100: #ffffff;
    --main-colors-foreground-f200: #faf9fa;
    --main-colors-foreground-f300: #f1eef1;
    --main-colors-foreground-f400: #e0dbe0;
    --main-colors-foreground-f-500-main: #c9c4ca;
    --main-colors-foreground-f600: #a8a4ad;
    --main-colors-foreground-f700: #85808e;
    --main-colors-foreground-f800: #636270;
    --main-colors-foreground-f900: #454654;

    /* main background */
    --main-colors-background-b100: #000000;
    --main-colors-background-b-200-slide-bg: #010409;
    --main-colors-background-b-300-main: #020a18;
    --main-colors-background-b400: #121721;
    --main-colors-background-b500: #262a35;
    --main-colors-background-b600: #454654;
    --main-colors-background-b700: #636270;
    --main-colors-background-elevate-1: #0F141C;
    --main-colors-background-elevate-2: #121821;
    --transparent-background-elevate-blur: rgba(1, 4, 9, 0.2);


    /* transparent foreground */
    --transparent-foreground---main-color-100: #c9c4ca;
    --transparent-foreground---main-color-90: rgba(201, 196, 202, 0.9);
    --transparent-foreground---main-color-80: rgba(201, 196, 202, 0.8);
    --transparent-foreground---main-color-70: rgba(201, 196, 202, 0.7);
    --transparent-foreground---main-color-60: rgba(201, 196, 202, 0.6);
    --transparent-foreground---main-color-50: rgba(201, 196, 202, 0.5);
    --transparent-foreground---main-color-40: rgba(201, 196, 202, 0.4);
    --transparent-foreground---main-color-30: rgba(201, 196, 202, 0.3);
    --transparent-foreground---main-color-20: rgba(201, 196, 202, 0.2);
    --transparent-foreground---main-color-10: rgba(201, 196, 202, 0.1);
    --transparent-foreground---main-color-05: rgba(201, 196, 202, 0.05);

    /* transparent background */
    --transparent-background---bg-color-100: #020a18;
    --transparent-background---bg-color-90: rgba(2, 10, 24, 0.9);
    --transparent-background---bg-color-80: rgba(2, 10, 24, 0.8);
    --transparent-background---bg-color-70: rgba(2, 10, 24, 0.7);
    --transparent-background---bg-color-60: rgba(2, 10, 24, 0.6);
    --transparent-background---bg-color-50: rgba(2, 10, 24, 0.5);
    --transparent-background---bg-color-40: rgba(2, 10, 24, 0.4);
    --transparent-background---bg-color-30: rgba(2, 10, 24, 0.3);
    --transparent-background---bg-color-20: rgba(2, 10, 24, 0.2);
    --transparent-background---bg-color-10: rgba(2, 10, 24, 0.1);
    --transparent-background---bg-color-05: rgba(2, 10, 24, 0.05);

    /* alternative foreground */
    --alternative-foreground-blue: #b0ace4;
    --alternative-foreground-green: #9fe1ab;
    --alternative-foreground-red: #e49da0;
    --alternative-foreground-yellow: #e4d1a1;
    --alternative-foreground-magenta: #e4b0d0;
    --alternative-foreground-cyan: #dff3ff;

    /* alternative background */
    --alternative-background-blue-case-study: #1e1d42;
    --alternative-background-green-further-reading: #152f19;
    --alternative-background-red-to-do: #401010;
    --alternative-background-yellow-quiz: #31280e;
    --alternative-background-magenta: #3e122f;
    --alternative-background-cyan: #12303e;

    /* highlight */
    --highlight-blue: #2e7aed;
    --highlight-green: #68ee47;
    --highlight-rred: #ff6464;
    --highlight-yellow: #ffcc54;
    --highlight-magenta: #ff64f9;
  }
}


/* Custom scroll bar ============================*/
/* width */
::-webkit-scrollbar {
  width: 0px;
  height: 4px;
  border-radius: 100px;
}

/* Track */
::-webkit-scrollbar-track {
  /* background: var(--transparent-foreground---main-color-05); */
  background: none;
}

::-webkit-scrollbar-corner {
  background-color: none;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--transparent-foreground---main-color-50);
  border-radius: 100px;
  width: 32px;
  height: 32px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--transparent-foreground---main-color-80);
}


/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}


/* BUTTON ========================================================= */

.cta-small,
.cta-large {
  color: var(--fix-white---white-100) !important;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 8px;
  border: 0.5px solid var(--stroke-gradient, rgba(255, 255, 255, 0.40));
  background: var(--button-background, rgba(60, 37, 9, 0.50));
  /* Inner Glow (Light) */
  box-shadow: 0px 4px 16px 0px var(--fix-white---white-05, rgba(255, 255, 255, 0.05)) inset;
  backdrop-filter: blur(50px);
}

.cta-small:hover,
.cta-large:hover {
  background: var(--button-background-hover, rgba(60, 37, 9, 0.50));
}

.cta-small {
  padding: 4px 12px;
  box-sizing: border-box;
}

.cta-large {
  height: 44px;
  padding: 8px 24px 8px 24px;
  align-self: stretch;
}

.secondary-button-small,
.secondary-button-large {
  color: var(--main-colors-foreground-f-500-main, #373D48) !important;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border: 0.5px solid var(--Transparent-Foreground---main-color-40, rgba(55, 61, 72, 0.40));
  background: var(--main-colors-background-b-300-main, #FBEAD5);
  /* Inner Glow (Light) */
  box-shadow: 0px 4px 16px 0px var(--Fix-White---white-05, rgba(255, 255, 255, 0.05)) inset;
  backdrop-filter: blur(50px);

}

.secondary-button-small {
  padding: 4px 12px;
  box-sizing: border-box;
  border-radius: 8px;
}

.secondary-button-large {
  height: 44px;
  padding: 8px 24px 8px 24px;
  align-self: stretch;
}


/* RADIO BUTTON AS CHIP SELECTION ===================================== */

span:has(input[type="radio"]),
span:has(input[type="checkbox"]) {
  border-radius: 8px;
  border: 0.5px solid var(--transparent-foreground---main-color-40, rgba(55, 61, 72, 0.40));
  background: var(--main-colors-background-elevate-2);
  /* Inner Glow (Light) */
  box-shadow: 0px 4px 16px 0px var(--Fix-White---white-05, rgba(255, 255, 255, 0.05)) inset;
  backdrop-filter: blur(50px);
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-sizing: border-box;
  display: inline-block;
}

span:has(input[type="radio"]:checked),
span:has(input[type="checkbox"]:checked) {
  border: 0.5px solid var(--stroke-gradient, rgba(255, 255, 255, 0.40));
  background: var(--button-background, rgba(60, 37, 9, 0.50));
}

span:has(input[type="radio"]:not(:checked)),
span:has(input[type="checkbox"]:not(:checked)) {
  opacity: 0.6;
  /* background: var(--main-colors-background-b200); */
}

span:has(input[type="radio"]) input[type="radio"],
span:has(input[type="checkbox"]) input[type="checkbox"] {
  /* display: none; */
  width: 0px;
  opacity: 0;
  visibility: none;
  position: absolute;
}


span:has(label.h3) label,
span:has(label.h3) label {
  padding: 8px 16px !important;
}

span:has(input[type="radio"]) label,
span:has(input[type="checkbox"]) label {
  padding: 4px 12px;
}


span:has(input[type="radio"]:checked) label,
span:has(input[type="checkbox"]:checked) label {
  color: var(--fix-white---white-100) !important;
}

#result .result-table td,
#result .result-table th,
#result .result-table tr {
  border-left: none;
  border-right: none;
  border-top: 0.5px solid var(--transparent-foreground---main-color-10, rgba(55, 61, 72, 0.10));
  border-bottom: 0.5px solid var(--transparent-foreground---main-color-10, rgba(55, 61, 72, 0.10));
  padding-top: 8px;
  padding-bottom: 8px;

}


input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px var(--main-colors-background-elevate-2, #FFF7EB) inset !important;
  /* đổi white thành màu nền bạn muốn */
  box-shadow: 0 0 0px 1000px var(--main-colors-background-elevate-2, #FFF7EB) inset !important;
  -webkit-text-fill-color: var(--main-colors-foreground-f-500-main) !important;
}

input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px var(--main-colors-background-elevate-2, #FFF7EB) inset !important;
  -webkit-box-shadow: 0 0 0px 1000px var(--main-colors-background-elevate-2, #FFF7EB) inset !important;
  -webkit-text-fill-color: var(--main-colors-foreground-f-500-main) !important;
}