.typography {
  --fontfamily-english: Noto Sans;
  --fontfamily-thai: Noto Sans Thai;
  --fontsize-remark: 12;
  --fontsize-caption: 14;
  --fontsize-body: 16;
  --fontsize-title: 20;
  --fontsize-headline2: 34;
  --fontsize-headline1: 40;
  --letterSpacing0: 0;
  --lineheight-150: 150;
  --paragraphSpacing0: 0;
  --paragraphIndent0: 0;
  --listSpacing0: 0;
}

.theme-color {
  --system-white:#ffffff;
  --system-black:#000000;
  --surface-ground:#ffffff;
  --surface-underground:#fafafa;
  --base-content-headline:#1e1e1e;
  --base-content-title:#3a3a3a;
  --base-content-body:#606060;
  --base-content-caption:#696969;
  --base-content-remark:#9b9b9b;
  --base-status-success:#339933;
  --base-status-warning:#ffa800;
  --base-status-error:#ea2222;
  --base-status-info:#0094ff;
  --base-border-divider:var(--global-neutral-gray-50);
  --global-primary-primary-0:#ffffff;
  --global-primary-primary-50:#fef6e6;
  --global-primary-primary-100:#fde3b0;
  --global-primary-primary-200:#fcd68a;
  --global-primary-primary-300:#fbc355;
  --global-primary-primary-400:#fab834;
  --global-primary-primary-500:#f9a601;
  --global-primary-primary-600:#e39701;
  --global-primary-primary-700:#b17601;
  --global-primary-primary-800:#895b01;
  --global-primary-primary-900:#694600;
  --global-secondary-secondary-0:#ffffff;
  --global-secondary-secondary-50:#ededed;
  --global-secondary-secondary-100:#c7c7c7;
  --global-secondary-secondary-200:#ababab;
  --global-secondary-secondary-300:#858585;
  --global-secondary-secondary-400:#6d6d6d;
  --global-secondary-secondary-500:#494949;
  --global-secondary-secondary-600:#424242;
  --global-secondary-secondary-700:#343434;
  --global-secondary-secondary-800:#282828;
  --global-secondary-secondary-900:#1f1f1f;
  --global-tertiary-tertiary-0:#ffffff;
  --global-tertiary-tertiary-50:#ededed;
  --global-tertiary-tertiary-100:#b7c3d1;
  --global-tertiary-tertiary-200:#95a6bb;
  --global-tertiary-tertiary-300:#647e9d;
  --global-tertiary-tertiary-400:#466589;
  --global-tertiary-tertiary-500:#183e6c;
  --global-tertiary-tertiary-600:#163862;
  --global-tertiary-tertiary-700:#112c4d;
  --global-tertiary-tertiary-800:#0d223b;
  --global-tertiary-tertiary-900:#0a1a2d;
  --global-neutral-gray-0:#ffffff;
  --global-neutral-gray-50:#f0f0f0;
  --global-neutral-gray-100:#d1d1d1;
  --global-neutral-gray-200:#bababa;
  --global-neutral-gray-300:#9b9b9b;
  --global-neutral-gray-400:#878787;
  --global-neutral-gray-500:#696969;
  --global-neutral-gray-600:#606060;
  --global-neutral-gray-700:#4b4b4b;
  --global-neutral-gray-800:#3a3a3a;
  --global-neutral-gray-900:#2c2c2c;
  --accent-background-red:#fde9e9;
  --accent-background-green:#ebf5eb;
  --accent-background-blue:#e6f4ff;
  --accent-background-orange:#fff6e6;
  --accent-content-green:#339933;
  --accent-content-orange:#ffa800;
  --accent-content-red:#ea2222;
  --accent-content-blue:#0094ff;
  --accent-border-blue:#0094ff;
  --accent-border-green:#339933;
  --accent-border-orange:#ffa800;
  --accent-border-red:#ea2222;
  --comp-button-primary-normal-background:var(--global-primary-primary-500);
  --comp-button-primary-hover-background:var(--global-primary-primary-600);
  --comp-button-primary-disable-background:var(--global-primary-primary-200);
  --comp-button-primary-normal-border:var(--global-primary-primary-500);
  --comp-button-primary-normal-content:var(--base-content-white);
  --comp-button-primary-hover-border:var(--global-primary-primary-500);
  --comp-button-primary-hover-content:var(--base-content-white);
  --comp-button-primary-disable-border:var(--global-primary-primary-200);
  --comp-button-primary-disable-content:var(--base-content-white);
  --base-content-white:#ffffff;
  --comp-radio-selected-background:var(--surface-ground);
  --comp-radio-selected-border:var(--global-primary-primary-500);
  --comp-radio-selected-item:var(--global-primary-primary-500);
  --comp-radio-disable-background:var(--surface-ground);
  --comp-radio-disable-border:var(--global-primary-primary-200);
  --comp-radio-disable-item:var(--global-primary-primary-200);
  --comp-radio-default-background:var(--surface-ground);
  --comp-radio-default-border:var(--global-neutral-gray-100);
  --comp-input-normal-background:#ffffff;
  --comp-input-normal-border:var(--global-neutral-gray-100);
  --comp-input-normal-divider:var(--global-neutral-gray-100);
  --comp-input-normal-placeholder:var(--global-neutral-gray-100);
  --comp-button-secondary-normal-background:var(--global-primary-primary-50);
  --comp-button-secondary-normal-border:var(--global-primary-primary-50);
  --comp-button-secondary-normal-content:var(--global-primary-primary-500);
  --comp-button-secondary-hover-background:var(--global-primary-primary-100);
  --comp-button-secondary-hover-border:var(--global-primary-primary-100);
  --comp-button-secondary-hover-content:var(--global-primary-primary-500);
  --comp-button-secondary-disable-background:var(--global-primary-primary-50);
  --comp-button-secondary-disable-border:var(--global-primary-primary-50);
  --comp-button-secondary-disable-content:var(--global-primary-primary-300);
  --comp-button-ghost-normal-background:var(--surface-ground);
  --comp-button-ghost-normal-border:var(--global-primary-primary-500);
  --comp-button-ghost-normal-content:var(--global-primary-primary-500);
  --comp-button-ghost-hover-background:var(--global-primary-primary-50);
  --comp-button-ghost-hover-border:var(--global-primary-primary-500);
  --comp-button-ghost-hover-content:var(--global-primary-primary-500);
  --comp-button-ghost-disable-background:var(--surface-ground);
  --comp-button-ghost-disable-border:var(--global-primary-primary-200);
  --comp-button-ghost-disable-content:var(--global-primary-primary-200);
  --comp-button-tertiary-normal-background:var(--surface-ground);
  --comp-button-tertiary-normal-border:var(--surface-ground);
  --comp-button-tertiary-normal-content:var(--global-primary-primary-500);
  --comp-button-tertiary-hover-background:var(--global-primary-primary-50);
  --comp-button-tertiary-hover-border:var(--global-primary-primary-50);
  --comp-button-tertiary-hover-content:var(--global-primary-primary-500);
  --comp-button-tertiary-disable-background:var(--surface-ground);
  --comp-button-tertiary-disable-border:var(--surface-ground);
  --comp-button-tertiary-disable-content:var(--global-primary-primary-200);
  --comp-button-alink-normal-background:var(--surface-ground);
  --comp-button-alink-normal-border:var(--surface-ground);
  --comp-button-alink-normal-content:var(--global-primary-primary-500);
  --comp-button-alink-hover-background:var(--surface-ground);
  --comp-button-alink-hover-border:var(--surface-ground);
  --comp-button-alink-hover-content:var(--global-primary-primary-600);
  --comp-button-alink-disable-background:var(--surface-ground);
  --comp-button-alink-disable-border:var(--surface-ground);
  --comp-button-alink-disable-content:var(--global-primary-primary-200);
  --comp-button-disable-normal-background:var(--global-neutral-gray-50);
  --comp-button-disable-normal-content:var(--global-neutral-gray-300);
  --comp-checkbox-default-background:var(--surface-ground);
  --comp-checkbox-default-border:var(--global-neutral-gray-100);
  --comp-checkbox-selected-background:var(--global-primary-primary-500);
  --comp-checkbox-selected-border:var(--global-primary-primary-500);
  --comp-checkbox-selected-icon:var(--base-content-white);
  --comp-checkbox-disable-background:var(--global-primary-primary-200);
  --comp-checkbox-disable-border:var(--global-primary-primary-200);
  --comp-checkbox-disable-icon:var(--base-content-white);
  --comp-input-normal-action:var(--global-primary-primary-500);
  --comp-input-typing-background:#ffffff;
  --comp-input-typing-border:var(--global-primary-primary-500);
  --comp-input-typing-divider:var(--global-neutral-gray-100);
  --comp-input-typing-placeholder:var(--global-neutral-gray-100);
  --comp-input-typing-action:var(--global-primary-primary-500);
  --comp-input-typing-content:var(--base-content-title);
  --comp-input-filled-background:#ffffff;
  --comp-input-filled-border:var(--global-neutral-gray-100);
  --comp-input-filled-divider:var(--global-neutral-gray-100);
  --comp-input-filled-placeholder:var(--global-neutral-gray-100);
  --comp-input-filled-action:var(--global-primary-primary-500);
  --comp-input-filled-content:var(--base-content-title);
  --comp-input-error-background:#ffffff;
  --comp-input-error-border:var(--accent-border-red);
  --comp-input-error-divider:var(--global-neutral-gray-100);
  --comp-input-error-placeholder:var(--global-neutral-gray-100);
  --comp-input-error-action:var(--global-primary-primary-500);
  --comp-input-error-content:var(--base-content-title);
  --comp-input-disable-background:var(--global-neutral-gray-50);
  --comp-input-disable-border:var(--global-neutral-gray-100);
  --comp-input-disable-divider:var(--global-neutral-gray-100);
  --comp-input-disable-placeholder:var(--global-neutral-gray-100);
  --comp-input-disable-action:var(--global-neutral-gray-300);
  --comp-input-disable-content:var(--global-neutral-gray-300);
  --comp-card-campaigncard-background:#ffffff;
  --comp-card-campaigncard-content:var(--base-content-title);
  --comp-card-campaigncard-point:var(--global-primary-primary-500);
  --comp-card-campaigncard-divider:var(--surface-underground);
  --comp-tabs-tab-active-background:var(--global-primary-primary-500);
  --comp-tabs-tab-active-border:var(--global-primary-primary-500);
  --comp-tabs-tab-active-content:var(--base-content-white);
  --comp-tabs-tab-inactive-background:var(--global-primary-primary-0);
  --comp-tabs-tab-inactive-border:var(--global-primary-primary-500);
  --comp-tabs-tab-inactive-content:var(--global-primary-primary-500);
  --comp-tabs-tabgroup-active-background:var(--global-primary-primary-500);
  --comp-tabs-tabgroup-active-content:var(--base-content-white);
  --comp-tabs-tabgroup-inactive-background:var(--global-primary-primary-0);
  --comp-tabs-tabgroup-inactive-content:var(--base-content-remark);
  --comp-tabs-tabgroup-tabbar:#ffffff;
  --comp-tabs-tabline-tabbar:#ffffff;
  --comp-tabs-tabline-active-content:var(--global-primary-primary-500);
  --comp-tabs-tabline-inactive-content:var(--base-content-remark);
  --comp-tabs-tabline-active-border:var(--global-primary-primary-500);
  --comp-navigation-menu-header-background:var(--global-primary-primary-500);
  --comp-navigation-menu-header-content:var(--base-content-white);
  --comp-navigation-menu-footer-background:#ffffff;
  --comp-navigation-menu-footer-active:var(--global-primary-primary-500);
  --comp-navigation-menu-footer-inactive:var(--global-neutral-gray-300);
  --base-content-highlight:var(--global-primary-primary-500);
  --comp-card-mini-member-card-background:#ffffff;
  --comp-card-mini-member-card-content:var(--base-content-title);
  --comp-card-mini-member-card-point:var(--base-content-title);
  --comp-card-mini-member-card-badge:var(--global-primary-primary-500);
  --comp-card-mini-member-card-image-border:var(--global-primary-primary-500);
  --comp-card-mini-member-card-content-on-badge:var(--base-content-white);
  --base-empty-content:var(--global-primary-primary-300);
  --comp-card-campaigncard-remark:var(--base-content-remark);
  --comp-popup-background:#ffffff;
  --comp-popup-title:var(--base-content-title);
  --comp-popup-subtitle:var(--base-content-caption);
  --comp-popup-remark:var(--base-content-remark);
  --comp-popup-highlight:var(--global-primary-primary-500);
  --comp-popup-header:var(--global-primary-primary-500);
  --background:#ffffff;
  --border:var(--global-neutral-gray-100);
  --comp-upload-normal-background:#ffffff;
  --comp-upload-normal-border:var(--global-neutral-gray-100);
  --comp-upload-error-background:#ffffff;
  --comp-upload-error-border:var(--base-status-error);
  --comp-button-default-normal-background:var(--global-neutral-gray-0);
  --comp-button-default-normal-border:var(--global-neutral-gray-100);
  --comp-button-default-normal-content:var(--global-neutral-gray-800);
  --comp-button-default-hover-background:var(--global-neutral-gray-50);
  --comp-button-default-hover-border:var(--global-neutral-gray-100);
  --comp-button-default-hover-content:var(--global-neutral-gray-800);
  --comp-button-default-disable-background:var(--surface-ground);
  --comp-button-default-disable-border:var(--global-neutral-gray-100);
  --comp-button-default-disable-content:var(--global-neutral-gray-200);
  --comp-button-danger-normal-background:var(--surface-ground);
  --comp-button-danger-normal-border:var(--surface-ground);
  --comp-button-danger-normal-content:var(--accent-content-red);
  --comp-button-danger-hover-background:var(--accent-background-red);
  --comp-button-danger-hover-border:var(--accent-background-red);
  --comp-button-danger-hover-content:var(--accent-content-red);
  --base-border-border:var(--global-neutral-gray-100);
  --comp-language-dropdown-normal-background:var(--comp-navigation-menu-header-background);
  --comp-language-dropdown-normal-border:#ffffff;
  --comp-language-dropdown-normal-action:var(--base-content-white);
  --comp-language-dropdown-normal-content:var(--base-content-white);
  --comp-card-member-card-default-background:var(--global-primary-primary-50);
  --comp-card-member-card-default-content:var(--base-content-title);
  --comp-card-member-card-default-subtitle:var(--base-content-body);
  --comp-card-member-card-default-icon:var(--global-primary-primary-500);
  --accent-background-gray:#fafafa;
  --comp-card-member-card-default-badge:var(--global-primary-primary-500);
  --comp-card-member-card-default-content-on-badge:var(--base-content-white);
  --comp-card-member-card-tier1-0:#b35018;
  --comp-card-member-card-tier1-25:#f4a070;
  --comp-card-member-card-tier1-100:#b35018;
  --comp-qty-active-background:var(--surface-ground);
  --comp-qty-active-border:var(--global-primary-primary-500);
  --comp-qty-active-icon:var(--global-primary-primary-500);
  --comp-qty-inactive-background:var(--surface-ground);
  --comp-qty-inactive-border:var(--base-border-border);
  --comp-qty-inactive-icon:var(--global-neutral-gray-300);
  --comp-card-member-card-tier2-0:#a4a4a4;
  --comp-card-member-card-tier2-25:#c7c7c7;
  --comp-card-member-card-tier2-100:#aeaeae;
  --comp-card-member-card-tier3-0:#ac914b;
  --comp-card-member-card-tier3-25:#cab274;
  --comp-card-member-card-tier3-100:#bda156;
  --comp-card-member-card-tier4-0:#393939;
  --comp-card-member-card-tier4-25:#575757;
  --comp-card-member-card-tier4-100:#393939;
  --comp-card-member-card-tier5-0:#2b337b;
  --comp-card-member-card-tier5-25:#424b98;
  --comp-card-member-card-tier5-100:#2b337b;
  --comp-card-member-card-tier1-badge:#994516;
  --comp-card-member-card-tier1-content-on-badge:var(--base-content-white);
  --comp-card-member-card-tier2-badge:#707070;
  --comp-card-member-card-tier2-content-on-badge:var(--base-content-white);
  --comp-card-member-card-tier3-badge:#998244;
  --comp-card-member-card-tier3-content-on-badge:var(--base-content-white);
  --comp-card-member-card-tier4-badge:#222222;
  --comp-card-member-card-tier4-content-on-badge:var(--base-content-white);
  --comp-card-member-card-tier5-badge:#11174d;
  --comp-card-member-card-tier5-content-on-badge:var(--base-content-white);
  --comp-card-member-card-tier1-image-border:var(--comp-card-member-card-tier1-badge);
  --comp-card-member-card-default-image-border:var(--comp-card-member-card-default-badge);
  --comp-card-member-card-tier2-image-border:var(--comp-card-member-card-tier2-badge);
  --comp-card-member-card-tier3-image-border:var(--comp-card-member-card-tier3-badge);
  --comp-card-member-card-tier4-image-border:var(--comp-card-member-card-tier4-badge);
  --comp-card-member-card-tier5-image-border:var(--comp-card-member-card-tier5-badge);
  --comp-card-member-card-tier1-dark-background:#f9af84;
  --comp-card-member-card-tier1-dark-content:#a8430a;
  --comp-card-member-card-tier2-dark-background:#b9b9b9;
  --comp-card-member-card-tier2-dark-content:#777777;
  --comp-card-member-card-tier3-dark-background:#d8be76;
  --comp-card-member-card-tier3-dark-content:#9f843b;
  --comp-card-member-card-tier4-dark-background:#616161;
  --comp-card-member-card-tier4-dark-content:#1e1e1e;
  --comp-card-member-card-tier5-dark-background:#4b549f;
  --comp-card-member-card-tier5-dark-content:#11174d;
  --comp-card-member-card-tier1-light-background:#f9af84;
  --comp-card-member-card-tier1-light-content:#ffffff;
  --comp-card-member-card-tier2-light-background:#b9b9b9;
  --comp-card-member-card-tier2-light-content:#ffffff;
  --comp-card-member-card-tier3-light-background:#d8be76;
  --comp-card-member-card-tier3-light-content:#ffffff;
  --comp-card-member-card-tier4-light-background:#616161;
  --comp-card-member-card-tier4-light-content:#ffffff;
  --comp-card-member-card-tier5-light-background:#4b549f;
  --comp-card-member-card-tier5-light-content:#ffffff;
  --comp-input-collectpoints-normal-background:var(--system-white);
  --comp-input-collectpoints-normal-border:var(--global-neutral-gray-100);
  --comp-input-collectpoints-normal-placeholder:var(--global-neutral-gray-100);
  --comp-input-collectpoints-normal-camerabackground:var(--global-primary-primary-500);
  --comp-input-collectpoints-typing-background:var(--system-white);
  --comp-input-collectpoints-typing-border:var(--global-primary-primary-500);
  --comp-input-collectpoints-typing-divider:var(--global-neutral-gray-100);
  --comp-input-collectpoints-typing-placeholder:var(--global-neutral-gray-100);
  --comp-input-collectpoints-typing-camerabackground:var(--global-primary-primary-500);
  --comp-input-collectpoints-typing-content:var(--base-content-title);
  --comp-input-collectpoints-normal-cameraicon:var(--base-content-white);
  --comp-input-collectpoints-normal-deleteiconinactive:var(--base-content-remark);
  --comp-input-collectpoints-normal-deleteiconactive:var(--base-content-title);
  --comp-input-collectpoints-typing-cameraicon:var(--base-content-white);
  --comp-input-collectpoints-typing-deleteiconactive:var(--base-content-title);
  --comp-input-collectpoints-filled-background:var(--system-white);
  --comp-input-collectpoints-filled-border:var(--global-neutral-gray-100);
  --comp-input-collectpoints-filled-content:var(--base-content-title);
  --comp-input-collectpoints-filled-camerabackground:var(--global-primary-primary-500);
  --comp-input-collectpoints-filled-cameraicon:var(--base-content-white);
  --comp-input-collectpoints-filled-deleteiconactive:var(--base-content-title);
  --comp-input-collectpoints-filled-clearicon:var(--base-content-remark);
  --comp-input-collectpoints-error-background:var(--system-white);
  --comp-input-collectpoints-error-border:var(--base-status-error);
  --comp-input-collectpoints-error-content:var(--base-content-title);
  --comp-input-collectpoints-error-camerabackground:var(--global-primary-primary-500);
  --comp-input-collectpoints-error-clearicon:var(--base-content-remark);
  --comp-input-collectpoints-error-cameraicon:var(--base-content-white);
  --comp-input-collectpoints-error-deleteiconactive:var(--base-content-title);
  --comp-input-collectpoints-error-reamrk:var(--base-status-error);
  --comp-input-collectpoints-typing-deleteiconinactive:var(--base-content-remark);
  --comp-input-collectpoints-filled-deleteiconinactive:var(--base-content-remark);
  --comp-input-collectpoints-error-deleteiconinactive:var(--base-content-remark);
  --comp-select-item-normal-background:var(--surface-ground);
  --comp-select-item-normal-border:var(--base-border-border);
  --comp-select-item-normal-content:var(--base-content-title);
  --comp-select-item-selected-background:var(--global-primary-primary-50);
  --comp-select-item-selected-border:var(--global-primary-primary-500);
  --comp-select-item-selected-content:var(--global-primary-primary-500);
  --comp-badge-background:var(--base-status-error);
  --comp-badge-content:#ffffff;
  --comp-scrollbar-track-bg:var(--surface-underground);
  --comp-scrollbar-thumb-bg:var(--base-content-highlight);
  --comp-step-item-active-background:var(--surface-ground);
  --comp-step-item-active-border:var(--global-primary-primary-500);
  --comp-step-item-active-content:var(--global-primary-primary-500);
  --comp-step-item-inactive-background:var(--surface-ground);
  --comp-step-item-inactive-border:var(--base-border-border);
  --comp-step-item-inactive-content:var(--base-content-remark);
  --comp-step-line-active-color:var(--global-primary-primary-500);
  --comp-step-line-inactive-color:var(--base-border-border);
  --comp-step-item-complete-background:var(--global-primary-primary-500);
  --comp-step-item-complete-border:var(--global-primary-primary-500);
  --comp-step-item-complete-content:var(--base-content-white);
}

.dimension {
  --radius-rounded: 100;
  --radius-xl: 20;
  --radius-lg: 16;
  --radius-md: 12;
  --radius-sm: 8;
  --radius-xs: 4;
  --size-xs2: 16;
  --size-xs: 20;
  --size-sm: 24;
  --size-md: 28;
  --size-lg: 32;
  --size-xl: 40;
  --size-xl2: 44;
  --borderwidth-reg: 1;
  --borderwidth-bold: 2;
  --size-xs3: 12;
  --gap-lg: 16;
  --gap-sm: 8;
  --gap-md: 12;
  --gap-xs: 4;
  --gap-xs2: 2;
  --radius-xl2: 24;
  --radius-xl3: 28;
  --radius-xl4: 32;
  --radius-xl5: 36;
  --radius-xl6: 40;
  --radius-xl7: 44;
  --radius-xl8: 48;
  --padding-xs: 4;
  --padding-sm: 8;
  --padding-md: 12;
  --padding-lg: 16;
  --padding-xl: 20;
  --padding-xl2: 24;
  --padding-xl3: 28;
  --padding-xl4: 32;
  --padding-xl5: 36;
  --padding-xl6: 40;
  --padding-xl7: 44;
  --padding-xl8: 48;
  --padding-none: 0;
  --size-xl3: 48;
  --size-xl4: 56;
  --size-xl5: 64;
  --size-xl6: 72;
  --size-xl7: 80;
  --gap-xl: 20;
  --gap-xl2: 24;
  --gap-xl3: 32;
  --gap-xl4: 40;
}