/* font-family */
@font-face {
  font-family: 'Better Together';
  src: url('https://account.truevisions.co.th/assets/fonts/BetterTogether/BetterTogether-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Better Together';
  src: url('https://account.truevisions.co.th/assets/fonts/BetterTogether/BetterTogether-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Better Together';
  src: url('https://account.truevisions.co.th/assets/fonts/BetterTogether/BetterTogether-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Better Together';
  src: url('https://account.truevisions.co.th/assets/fonts/BetterTogether/BetterTogether-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

/* variable */
:root {
  --font-family: 'Better Together';
  --font-size-48: 3rem;
  --font-size-40: 2.5rem;
  --font-size-36: 2.25rem;
  --font-size-32: 2rem;
  --font-size-28: 1.75rem;
  --font-size-24: 1.5rem;
  --font-size-18: 1.125rem;
  --font-size-16: 1rem;
  --font-size-14: 0.875rem;
  --font-size-12: 0.75rem;
  --font-size-11: 0.6875rem;
  --line-height-57: 3.5625rem;
  --line-height-48: 3rem;
  --line-height-44: 2.75rem;
  --line-height-40: 2.5rem;
  --line-height-36: 2.25rem;
  --line-height-32: 2rem;
  --line-height-28: 1.75rem;
  --line-height-24: 1.5rem;
  --line-height-20: 1.25rem;
  --line-height-16: 1rem;
  --tracking-xs: -0.0156rem;
  --tracking-m: 0rem;
  --tracking-xl: 0.0094rem;
  --tracking-l: 0.0063rem;
  --tracking-4xl: 0.0312rem;
  --tracking-2xl: 0.0156rem;
  --tracking-3xl: 0.025rem;
}

/* display */
.display-large {
  font-family: var(--font-family);

  font-size: var(--font-size-48);
  line-height: var(--line-height-57);
  letter-spacing: var(--tracking-xs);
  font-weight: 400;
}

.display-large-medium {
  font-family: var(--font-family);
  font-size: var(--font-size-48);
  line-height: var(--line-height-57);
  letter-spacing: var(--tracking-xs);
  font-weight: 500;
}

.display-large-bold {
  font-family: var(--font-family);
  font-size: var(--font-size-48);
  line-height: var(--line-height-57);
  letter-spacing: var(--tracking-xs);
  font-weight: 700;
}

.display-medium {
  font-family: var(--font-family);
  font-size: var(--font-size-40);
  line-height: var(--line-height-48);
  letter-spacing: var(--tracking-m);
  font-weight: 400;
}

.display-medium-medium {
  font-family: var(--font-family);
  font-size: var(--font-size-40);
  line-height: var(--line-height-48);
  letter-spacing: var(--tracking-m);
  font-weight: 500;
}

.display-medium-bold {
  font-family: var(--font-family);
  font-size: var(--font-size-40);
  line-height: var(--line-height-48);
  letter-spacing: var(--tracking-m);
  font-weight: 700;
}

.display-small {
  font-family: var(--font-family);
  font-size: var(--font-size-36);
  line-height: var(--line-height-44);
  letter-spacing: var(--tracking-m);
  font-weight: 400;
}

.display-small-medium {
  font-family: var(--font-family);
  font-size: var(--font-size-36);
  line-height: var(--line-height-44);
  letter-spacing: var(--tracking-m);
  font-weight: 500;
}

.display-small-bold {
  font-family: var(--font-family);
  font-size: var(--font-size-36);
  line-height: var(--line-height-44);
  letter-spacing: var(--tracking-m);
  font-weight: 700;
}
/* headline */
.headline-large {
  font-family: var(--font-family);
  font-size: var(--font-size-32);
  line-height: var(--line-height-40);
  letter-spacing: var(--tracking-m);
  font-weight: 400;
}

.headline-large-medium {
  font-family: var(--font-family);
  font-size: var(--font-size-32);
  line-height: var(--line-height-40);
  letter-spacing: var(--tracking-m);
  font-weight: 500;
}

.headline-large-bold {
  font-family: var(--font-family);
  font-size: var(--font-size-32);
  line-height: var(--line-height-40);
  letter-spacing: var(--tracking-m);
  font-weight: 700;
}

.headline-medium {
  font-family: var(--font-family);
  font-size: var(--font-size-28);
  line-height: var(--line-height-36);
  letter-spacing: var(--tracking-m);
  font-weight: 400;
}

.headline-medium-medium {
  font-family: var(--font-family);
  font-size: var(--font-size-28);
  line-height: var(--line-height-36);
  letter-spacing: var(--tracking-m);
  font-weight: 500;
}

.headline-medium-bold {
  font-family: var(--font-family);
  font-size: var(--font-size-28);
  line-height: var(--line-height-36);
  letter-spacing: var(--tracking-m);
  font-weight: 700;
}

.headline-small {
  font-family: var(--font-family);
  font-size: var(--font-size-24);
  line-height: var(--line-height-32);
  letter-spacing: var(--tracking-m);
  font-weight: 400;
}

.headline-small-medium {
  font-family: var(--font-family);
  font-size: var(--font-size-24);
  line-height: var(--line-height-32);
  letter-spacing: var(--tracking-m);
  font-weight: 500;
}

.headline-small-bold {
  font-family: var(--font-family);
  font-size: var(--font-size-24);
  line-height: var(--line-height-32);
  letter-spacing: var(--tracking-m);
  font-weight: 700;
}
/* title */

.title-large {
  font-family: var(--font-family);
  font-size: var(--font-size-18);
  line-height: var(--line-height-28);
  letter-spacing: var(--tracking-m);
  font-weight: 400;
}

.title-large-medium {
  font-family: var(--font-family);
  font-size: var(--font-size-18);
  line-height: var(--line-height-28);
  letter-spacing: var(--tracking-m);
  font-weight: 500;
}

.title-large-bold {
  font-family: var(--font-family);
  font-size: var(--font-size-18);
  line-height: var(--line-height-28);
  letter-spacing: var(--tracking-m);
  font-weight: 700;
}

.title-medium {
  font-family: var(--font-family);
  font-size: var(--font-size-16);
  line-height: var(--line-height-24);
  letter-spacing: var(--tracking-xl);
  font-weight: 400;
}

.title-medium-medium {
  font-family: var(--font-family);
  font-size: var(--font-size-16);
  line-height: var(--line-height-24);
  letter-spacing: var(--tracking-xl);
  font-weight: 500;
}

.title-medium-bold {
  font-family: var(--font-family);
  font-size: var(--font-size-16);
  line-height: var(--line-height-24);
  letter-spacing: var(--tracking-xl);
  font-weight: 700;
}

.title-small {
  font-family: var(--font-family);
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
  letter-spacing: var(--tracking-l);
  font-weight: 400;
}

.title-small-medium {
  font-family: var(--font-family);
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
  letter-spacing: var(--tracking-l);
  font-weight: 500;
}

.title-small-bold {
  font-family: var(--font-family);
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
  letter-spacing: var(--tracking-l);
  font-weight: 700;
}

/* label */
.label-large {
  font-family: var(--font-family);
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
  letter-spacing: var(--tracking-l);
  font-weight: 400;
}

.label-large-medium {
  font-family: var(--font-family);
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
  letter-spacing: var(--tracking-l);
  font-weight: 500;
}

.label-large-bold {
  font-family: var(--font-family);
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
  letter-spacing: var(--tracking-l);
  font-weight: 700;
}

.label-medium {
  font-family: var(--font-family);
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
  letter-spacing: var(--tracking-4xl);
  font-weight: 400;
}

.label-medium-medium {
  font-family: var(--font-family);
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
  letter-spacing: var(--tracking-4xl);
  font-weight: 500;
}

.label-medium-bold {
  font-family: var(--font-family);
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
  letter-spacing: var(--tracking-4xl);
  font-weight: 700;
}

.label-small {
  font-family: var(--font-family);
  font-size: var(--font-size-11);
  line-height: var(--line-height-16);
  letter-spacing: var(--tracking-4xl);
  font-weight: 400;
}

.label-small-medium {
  font-family: var(--font-family);
  font-size: var(--font-size-11);
  line-height: var(--line-height-16);
  letter-spacing: var(--tracking-4xl);
  font-weight: 500;
}

.label-small-bold {
  font-family: var(--font-family);
  font-size: var(--font-size-11);
  line-height: var(--line-height-16);
  letter-spacing: var(--tracking-4xl);
  font-weight: 700;
}

/* body */
.body-large {
  font-family: var(--font-family);
  font-size: var(--font-size-16);
  line-height: var(--line-height-24);
  letter-spacing: var(--tracking-xl);
  font-weight: 400;
}

.body-large-medium {
  font-family: var(--font-family);
  font-size: var(--font-size-16);
  line-height: var(--line-height-24);
  letter-spacing: var(--tracking-xl);
  font-weight: 500;
}

.body-large-bold {
  font-family: var(--font-family);
  font-size: var(--font-size-16);
  line-height: var(--line-height-24);
  letter-spacing: var(--tracking-xl);
  font-weight: 700;
}

.body-medium {
  font-family: var(--font-family);
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
  letter-spacing: var(--tracking-2xl);
  font-weight: 400;
}

.body-medium-medium {
  font-family: var(--font-family);
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
  letter-spacing: var(--tracking-2xl);
  font-weight: 500;
}

.body-medium-bold {
  font-family: var(--font-family);
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
  letter-spacing: var(--tracking-2xl);
  font-weight: 700;
}

.body-small {
  font-family: var(--font-family);
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
  letter-spacing: var(--tracking-xl);
  font-weight: 400;
}

.body-small-medium {
  font-family: var(--font-family);
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
  letter-spacing: var(--tracking-xl);
  font-weight: 500;
}

.body-small-bold {
  font-family: var(--font-family);
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
  letter-spacing: var(--tracking-xl);
  font-weight: 700;
}