html {
  font-size: 14px;
}
:root {
  --container-default: 100%;
  --container-padding: clamp(20px, 3.33333333vw, 48px);
  --container-narrow: clamp(20px, 8.95555556vw, 186px);

  --color-black: #000000;
  --color-black-rgb: 0, 0, 0;
  --color-white: #ffffff;
  --color-white-rgb: 255, 255, 255;

  --color-body: #373532;
  --color-body-rgb: 55, 53, 50;
  --color-body-bg: #f8f4f2;
  --color-body-bg-rgb: 248, 244, 242;

  --color-gold: #b08d5b;
  --color-gold-rgb: 176, 141, 91;
  --color-lightGold: #cfb992;
  --color-lightGold-rgb: 207, 185, 146;
  --color-lighterGold: #e1ceab;
  --color-lighterGold-rgb: 225, 206, 171;
  --color-cream: #eee3cf;
  --color-cream-rgb: 238, 227, 207;
  --color-gradient-gold: linear-gradient(
    90deg,
    #cfb992 0%,
    #e1ceab 31.73%,
    #e2d2b5 49.52%,
    #e1ceab 64.42%,
    #cfb992 100%
  );

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

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

  --font-heading: "Clarice", "futura-100-thai", sans-serif;
  --font-body: "than", "Anuphan", sans-serif;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semi: 600;
  --weight-bold: 700;

  /* Base */
  --font-size-body: 1rem; /* 14px */
  --font-size-btn: 0.8571rem; /* 12px */
  --font-size-sub1: 0.9286rem; /* 13px */
  --font-size-sub2: 0.7143rem; /* 10px */

  --font-size-h5: clamp(
    1.1429rem,
    calc((16 / 1440) * 100vw),
    calc(1.1429rem * 1.2)
  ); /* 16px */

  --font-size-h4: clamp(
    1.4286rem,
    calc((20 / 1440) * 100vw),
    calc(1.4286rem * 1.2)
  ); /* 20px */

  --font-size-h3: clamp(
    2rem,
    calc((28 / 1440) * 100vw),
    calc(2rem * 1.2)
  ); /* 28px */

  --font-size-h2: clamp(
    3.1429rem,
    calc((44 / 1440) * 100vw),
    calc(3.1429rem * 1.2)
  ); /* 44px */

  --font-size-h1: clamp(
    3.7143rem,
    calc((52 / 1440) * 100vw),
    calc(3.7143rem * 1.2)
  ); /* 52px */

  --font-size-display: clamp(
    5.1429rem,
    calc((72 / 1440) * 100vw),
    calc(5.1429rem * 1.2)
  ); /* 72px */

  --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: 32px;
  --spacing-md-minus: -32px;
  --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: 38px;
  --button-height: 38px;
  --opacity: 0.5;
  --header-h: 62px;

  --transition: 0.4s;
  --transition-x2: 0.8s;
  --timing-function: ease-in-out;
}
html.th {
  font-size: 15px;
  --font-size-body: 1rem; /* 15px */
  --font-size-btn: 0.8667rem; /* 13px */
  --font-size-sub1: 0.9333rem; /* 14px */
  --font-size-sub2: 0.8rem; /* 12px */

  --font-size-h5: clamp(
    1.0667rem,
    calc((16 / 1440) * 100vw),
    calc(1.0667rem * 1.2)
  ); /* 16px */

  --font-size-h4: clamp(
    1.3333rem,
    calc((20 / 1440) * 100vw),
    calc(1.3333rem * 1.2)
  ); /* 20px */

  --font-size-h3: clamp(
    1.8667rem,
    calc((28 / 1440) * 100vw),
    calc(1.8667rem * 1.2)
  ); /* 28px */

  --font-size-h2: clamp(
    2.9333rem,
    calc((44 / 1440) * 100vw),
    calc(2.9333rem * 1.2)
  ); /* 44px */

  --font-size-h1: clamp(
    3.6rem,
    calc((54 / 1440) * 100vw),
    calc(3.6rem * 1.2)
  ); /* 54px */

  --font-size-display: clamp(
    5.0667rem,
    calc((76 / 1440) * 100vw),
    calc(5.0667rem * 1.2)
  ); /* 76px */
}

/* Min-width breakpoints */
@media (min-width: 576px) {
}
@media (min-width: 768px) {
}
@media (min-width: 992px) {
}
@media (min-width: 1200px) {
}
@media (min-width: 1400px) {
}

/* Max-width breakpoints */
@media (max-width: 575.98px) {
}
@media (max-width: 767.98px) {
  :root {
    --container-padding: 16px;
    --container-narrow: 16px;
    /* Base font-size: 14px = 1rem */
    --font-size-h5: 1rem; /* 14px */
    --font-size-h4: 1.2857rem; /* 18px */
    --font-size-h3: 1.5714rem; /* 22px */
    --font-size-h2: 1.8572rem; /* 26px */
    --font-size-h1: 2.1429rem; /* 30px */
    --font-size-display: 2.5714rem; /* 36px */
  }
  html.th {
    /* Base font-size: 15px = 1rem */
    --font-size-h5: 1.0667rem; /* 16px */
    --font-size-h4: 1.3333rem; /* 20px */
    --font-size-h3: 1.7333rem; /* 26px */
    --font-size-h2: 2rem; /* 30px */
    --font-size-h1: 2.2667rem; /* 34px */
    --font-size-display: 2.6667rem; /* 40px */
  }
}
@media (max-width: 991.98px) {
}
@media (max-width: 1199.98px) {
}
@media (max-width: 1399.98px) {
}