:root {
  --header-h: 54px;
  --container-default: 100%;
  --container-padding: clamp(
    20px,
    1.66666667vw,
    24px
  ); /* 1.39vw ≈ 20px at 1440px */
  --container-narrow: clamp(
    20px,
    6.94444444vw,
    100px
  ); /* 1.39vw ≈ 20px at 1440px */

  --color-black: #000000;
  --color-black-rgb: 0, 0, 0;
  --color-white: #ffffff;
  --color-white-rgb: 255, 255, 255;
  --color-body: #434a4f;
  --color-body-rgb: 67, 74, 79;
  --color-body-bg: #ffffff;
  --color-body-bg-rgb: 255, 255, 255;
  --color-red1: #e31e36;
  --color-red1-rgb: 227, 30, 54;
  --color-red2: #90181b;
  --color-red2-rgb: 144, 24, 26;
  --color-grayLighter: #c7c8ca;
  --color-grayLighter-rgb: 199, 200, 202;
  --color-grayLight: #9f9f9f;
  --color-grayLight-rgb: 159, 159, 159;
  --color-gray: #939598;
  --color-gray-rgb: 147, 149, 152;
  --color-grayDark: #525252;
  --color-grayDark-rgb: 82, 82, 82;

  --color-border: var(--color-gray);
  --color-error: #ff0000;
  --color-placeholder: inherit;

  --filter-black: brightness(0);
  --filter-white: brightness(0) invert(1);

  --font-body: "IBM Plex Sans Thai", sans-serif;
  --font-heading: var(--font-body);
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semi: 600;
  --weight-bold: 700;

  /* Base font-size: 14px = 1rem */
  --font-size-btn: 0.9286rem; /* 13px */
  --font-size-body: 1rem; /* 14px */
  --font-size-tagline: 1rem; /* 14px */
  --font-size-menu: clamp(
    1.429rem,
    calc((20 / 1440) * 100vw),
    calc(1.429rem * 1.2)
  ); /* 20px */
  --font-size-h6: clamp(
    1rem,
    calc((14 / 1440) * 100vw),
    calc(1rem * 1.2)
  ); /* 14px */
  --font-size-h5: clamp(
    1.0714rem,
    calc((15 / 1440) * 100vw),
    calc(1.0714rem * 1.2)
  ); /* 15px */
  --font-size-h4: clamp(
    1.1429rem,
    calc((16 / 1440) * 100vw),
    calc(1.1429rem * 1.2)
  ); /* 16px */
  --font-size-h3: clamp(
    1.2857rem,
    calc((18 / 1440) * 100vw),
    calc(1.2857rem * 1.2)
  ); /* 18px */
  --font-size-h2: clamp(
    1.5714rem,
    calc((22 / 1440) * 100vw),
    calc(1.5714rem * 1.2)
  ); /* 22px */
  --font-size-h1: clamp(
    3.1429rem,
    calc((44 / 1440) * 100vw),
    calc(3.1429rem * 1.2)
  ); /* 44px */

  --spacing-5xl: 150px;
  --spacing-5xl-minus: -150px;
  --spacing-4xl: 120px;
  --spacing-4xl-minus: -120px;
  --spacing-3xl: 100px;
  --spacing-3xl-minus: -100px;
  --spacing-2xl: 72px;
  --spacing-2xl-minus: -72px;
  --spacing-xl: 64px;
  --spacing-xl-minus: -64px;
  --spacing-2lg: 48px;
  --spacing-2lg-minus: -48px;
  --spacing-lg: 40px;
  --spacing-lg-minus: -40px;
  --spacing-2md: 36px;
  --spacing-2md-minus: -36px;
  --spacing-md: 30px;
  --spacing-md-minus: -30px;
  --spacing-2sm: 24px;
  --spacing-2sm-minus: -24px;
  --spacing-sm: 20px;
  --spacing-sm-minus: -20px;
  --spacing-xs: 16px;
  --spacing-xs-minus: -16px;
  --spacing-2xs: 12px;
  --spacing-2xs-minus: -12px;
  --spacing-3xs: 8px;
  --spacing-3xs-minus: -8px;
  --spacing-4xs: 4px;
  --spacing-4xs-minus: -4px;

  --input-height: 48px;
  --button-height: 48px;
  --opacity: 0.5;

  --transition: 0.4s;
  --transition-x2: 0.8s;
  --timing-function: ease-in-out;

  /* Color */
  --color-mode-body: var(--color-body);
  --color-mode-body-rgb: var(--color-body-rgb);
  --color-mode-body-bg: var(--color-body-bg);
  --color-mode-body-bg-rgb: var(--color-body-bg-rgb);
  --color-mode-red1: var(--color-red1);
  --color-mode-red2: var(--color-red2);

  --color-mode-gray1: var(--color-gray);
  --color-mode-gray1-rgb: var(--color-gray-rgb);
  --color-mode-gray2: var(--color-grayLighter);
  --color-mode-gray2-rgb: var(--color-grayLighter-rgb);
  --color-mode-header-bg: var(--color-white);
  --color-mode-btn-bg: #e9e9e9;

  --filter-mode: var(--filter-black);
}
@media (prefers-color-scheme: dark) {
  :root {
    --filter-mode: var(--filter-white);
    /* Color */
    --color-mode-body: var(--color-body-bg);
    --color-mode-body-rgb: var(--color-body-bg-rgb);
    --color-mode-body-bg: var(--color-black);
    --color-mode-body-bg-rgb: var(--color-black-rgb);
    --color-mode-red1: var(--color-red1);
    --color-mode-red2: var(--color-red1);

    --color-mode-gray1: var(--color-grayLight);
    --color-mode-gray1-rgb: var(--color-grayLight-rgb);
    --color-mode-gray2: var(--color-grayDark);
    --color-mode-gray2-rgb: var(--color-grayDark-rgb);
    --color-mode-header-bg: #2D2F31;
    --color-mode-btn-bg: var(--color-black);
  }
}
[data-theme="light"] {
  --filter-mode: var(--filter-black);
  --color-mode-body: var(--color-body);
  --color-mode-body-rgb: var(--color-body-rgb);
  --color-mode-body-bg: var(--color-body-bg);
  --color-mode-body-bg-rgb: var(--color-body-bg-rgb);
  --color-mode-red1: var(--color-red1);
  --color-mode-red2: var(--color-red2);

  --color-mode-gray1: var(--color-gray);
  --color-mode-gray1-rgb: var(--color-gray-rgb);
  --color-mode-gray2: var(--color-grayLighter);
  --color-mode-gray2-rgb: var(--color-grayLighter-rgb);
  --color-mode-header-bg: var(--color-white);
  --color-mode-btn-bg: #e9e9e9;
}
[data-theme="dark"] {
  --filter-mode: var(--filter-white);
  /* Color */
  --color-mode-body: var(--color-body-bg);
  --color-mode-body-rgb: var(--color-body-bg-rgb);
  --color-mode-body-bg: var(--color-black);
  --color-mode-body-bg-rgb: var(--color-black-rgb);
  --color-mode-red1: var(--color-red1);
  --color-mode-red2: var(--color-red1);

  --color-mode-gray1: var(--color-grayLight);
  --color-mode-gray1-rgb: var(--color-grayLight-rgb);
  --color-mode-gray2: var(--color-grayDark);
  --color-mode-gray2-rgb: var(--color-grayDark-rgb);
  --color-mode-header-bg: #2D2F31;
  --color-mode-btn-bg: var(--color-black);
}
html {
  font-size: 14px;
}

@media (max-width: 1399.98px) {
}
@media (max-width: 1199.98px) {
}
@media (max-width: 991.98px) {
}
@media (max-width: 767.98px) {
  html {
    font-size: 14px;
  }
  :root {
    --container-padding: 16px;
    --container-narrow: 16px;

    /* Base font-size: 14px = 1rem */
    --font-size-body: 1rem; /* 14px */
    --font-size-btn: 1rem; /* 14px */
    --font-size-tagline: 1.0714rem; /* 15px */
    --font-size-h6: 1rem; /* 14px */
    --font-size-h5: 1.0714rem; /* 15px */
    --font-size-h4: 1.1429rem; /* 16px */
    --font-size-h3: 1.2857rem; /* 18px */
    --font-size-h2: 1.5714rem; /* 22px */
    --font-size-h1: 2.4286rem; /* 34px */
  }
}
@media (max-width: 575.98px) {
}