@charset "UTF-8";

.theme-new {
  /* 基础色 */
  --color-sp-900: #3939B7;
  --color-sp-600: #396DEA;
  --color-sp-500-base: 55, 130, 255;
  --color-sp-500: rgb(var(--color-sp-500-base));
  --color-sp-400: #318FFF;
  --color-sp-300: #44A0FF;
  --color-sp-100: #E3F1FF;
  --color-ap-900: #3C2022;
  --color-ap-600: #E62626;
  --color-ap-500-base: 250, 51, 51;
  --color-ap-500: rgb(var(--color-ap-500-base));
  --color-ap-400: #F4494E;
  --color-ap-300: #EA6D72;
  --color-ap-100: #FFDFDF;
  --color-m-900: #3C2022;
  --color-m-600: #E62626;
  --color-m-500-base: 250, 51, 51;
  --color-m-500: rgb(var(--color-m-500-base));
  --color-m-400: #F4494E;
  --color-m-300: #EA6D72;
  --color-m-100: #FFDFDF;

  /* 功能色 */
  --color-sp-default: var(--color-sp-500);
  --color-sp-hover: var(--color-sp-400);
  --color-sp-click: var(--color-sp-600);
  --color-sp-bg-1: rgba(var(--color-sp-500-base), 0.1);
  --color-sp-bg-2: rgba(var(--color-sp-500-base), 0.2);
  --color-sr-reverse: var(--color-gray-0);
  --color-ap-default: var(--color-ap-500);
  --color-ap-hover: var(--color-ap-400);
  --color-ap-click: var(--color-ap-600);;
  --color-ap-bg-1: rgba(var(--color-ap-500-base), 0.1);
  --color-ap-bg-2: rgba(var(--color-ap-500-base), 0.2);
  --color-ar-reverse: var(--color-gray-0);
  --color-m-default: var(--color-m-500);
  --color-m-hover: var(--color-m-400);
  --color-m-click: var(--color-m-600);
  --color-m-bg-1: rgba(var(--color-m-500-base), 0.1);
  --color-m-bg-2: rgba(var(--color-m-500-base), 0.2);
  --color-m-reverse: var(--color-gray-0);

  /* 背景色 */
  --color-bg-site: #05082E;
  --color-bg-app-1: #FFFFFF;
  --color-bg-app-2: #FFFFFF;
  --color-bg-nav: #05082E;
  --color-bg-footer-1: #000112;
  --color-bg-footer-2: rgba(255, 255, 255, 0.15);

  /* 前景色 */
  /* --color-neutral-1: #FFFFFF;
  --color-neutral-2: #EAEAF8;
  --color-neutral-3: #BFC0D4;
  --color-neutral-4: #6B6C7F; */
  
  /* 容器色 */
  --color-container-1: #3F4476;
  --color-container-2: #2B305F;
  --color-container-3: #1E234E;
  --color-container-4: #161A38;
  
  /* 次要前景色 */
  --color-secondary-neutral-1: #05082E;
  --color-secondary-neutral-2: #6B6C7F;
  --color-secondary-neutral-3: #9191A4;
  --color-secondary-neutral-4: #BFC0D4;
  
  /* 次要容器色 */
  --color-secondary-container-1: #FFFFFF;
  --color-secondary-container-2: #EAEAF8;
  --color-secondary-container-3: #F2F2FF;

  /* 常量色 */
  /* blue */
  --color-blue-600: #3A6AF0;
  --color-blue-500-base: 55, 130, 255;
  --color-blue-500: rgb(var(--color-blue-500-base));
  --color-blue-400: #318FFF;
  --color-blue-100: #DCE6FF;
  --color-blue-bg-1: rgba(var(--color-blue-500-base), 0.1);
  --color-blue-bg-2: rgba(var(--color-blue-500-base), 0.2);
  
  /* red */
  --color-red-600: #EB2732;
  --color-red-500-base: 250, 51, 51;
  --color-red-500: rgb(var(--color-red-500-base));
  --color-red-400: #F4494E;
  --color-red-100: #FFDFDF;
  --color-red-bg-1: rgba(var(--color-red-500-base), 0.1);
  --color-red-bg-2: rgba(var(--color-red-500-base), 0.2);
  
  /* green */
  --color-green-600: #2CAB00;
  --color-green-500-base: 38, 207, 118;
  --color-green-500: rgb(var(--color-green-500-base));
  --color-green-100: #E6F9EF;
  --color-green-bg-1: rgba(var(--color-green-500-base), 0.1);
  --color-green-bg-2: rgba(var(--color-green-500-base), 0.2);
  
  /* yellow */
  --color-yellow-600: #FF7B00;
  --color-yellow-500-base: 255, 150, 51;
  --color-yellow-500: rgb(var(--color-yellow-500-base));
  --color-yellow-100: #FFF4E1;
  --color-yellow-bg-1: rgba(var(--color-yellow-500-base), 0.1);
  --color-yellow-bg-2: rgba(var(--color-yellow-500-base), 0.2);
  
  /* gray */
  --color-gray-900: #000000;
  --color-gray-600: #4E545A;
  --color-gray-500: #848C94;
  --color-gray-300: #CBCED2;
  --color-gray-100: #E9EBEF;
  --color-gray-0: #FFFFFF;

  /* Radius */
  --border-radius-primary: 8px;
  --border-radius-secondary: 8px;
  --border-radius-button: 25px;

  /* Shadow */
  --shadow-low: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
  --shadow-medium: 0px 4px 8px 0px rgba(0, 0, 0, 0.12);
  --shadow-high: 0px 8px 16px 0px rgba(0, 0, 0, 0.16);
}

body.__xs .theme-new {
  /* Radius */
  --border-radius-primary: 0.8rem;
  --border-radius-secondary: 0.8rem;
  --border-radius-button: 2.5rem;


  /* goods item */
  --padding-detail-goods: 1rem;
  --border-width-detail-goods-action: 0.2rem;
  --border-radius-detail-goods-tag: 0.8rem;
  --border-radius-detail-goods-icon: 0.8rem;
}

/* 默认 */
:root {
  /* ====== 设计变量 ====== */
  /* 字体 */
  --font-family-base: system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,Helvetica,Arial,PingFang SC,Microsoft Yahei,Hiragino Sans GB,Heiti SC,sans-serif;
  --font-family: var(--font-family-base);

  /* 主题色 */
  --color-primary: #FA3333;
  --color-action-primary: #E62626;
  --color-primary-variant: #FFDFDF;

  /* 功能色 */
  --color-action: #3782FF;
  --color-text-button: #669EFF;
  --color-action-variant: #DCE6FF;
  --color-success: #26CF76;
  --color-success-variant: #E6F9EF;
  --color-warning: #FFCD2A;
  --color-warning-variant: #FFF4E1;
  --color-error: #FA3333;
  --color-error-variant: #FFDFDF;

  /* 中性色 */
  --color-neutral-1: #FFFFFF;
  --color-neutral-2: #EAEAF8;
  --color-neutral-3: #BFC0D4;
  --color-neutral-4: #6B6C7F;

  /* 填充色 */
  --color-fill-bg-1: #05082E;
  --color-fill-bg-2: #000112;

  --color-fill-container-1: #3F4476;
  --color-fill-container-2: #2B305F;
  --color-fill-container-3: #1E234E;
  --color-fill-secondary-container-1: #FFFFFF;
  --color-fill-secondary-container-2: #EAEAF8;
  --color-fill-secondary-container-3: #FFFFFF;

  /* 反色 */
  --color-reverse: #1F232A;

  /* 装饰色 */
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-gray-10: #EAEAF8;
  --color-gray-30: #BFC0D4;
  --color-gray-50: #6B6C7F;

  /* Other */
  --other-black-60: rgba(0, 1, 18, .6);
  --other-black-90: rgba(0, 1, 18, .9);

  /* red */
  --color-red-10: #FFDFDF;
  --color-red-50: #FA3333;
  --color-red-60: #E62626;

  /* yellow */
  --color-yellow-10: #FFF4E1;
  --color-yellow-50: #FFCD2A;
  --color-yellow-60: #FB9701;

  /* blue */
  --color-blue-10: #DCE6FF;
  --color-blue-30: #669EFF;
  --color-blue-50: #3782FF;
  --color-blue-60: #3A6AF0;

  /* ====== 位置变量 ====== */

  /* 通用 */
  --font-size-primary: 16px;
  --font-size-primary-xs: 1.3rem;

  --border-radius-primary: 4px;
  --border-radius-primary-xs: 0.4rem;
  --border-radius-secondary: 12px;
  --border-radius-secondary-xs: 1.2rem;

  --border-color-primary: var(--color-neutral-3);
  --border-color-hover-primary: var(--color-neutral-2);

  --bg-nav: var(--color-fill-bg-1);
  --bg-footer: var(--color-fill-bg-2);
  --bg-body: var(--color-fill-bg-1);
  --bg-body-detail: var(--color-fill-container-3);
  --bg-body-home:  var(--color-fill-bg-1);

  --bg-dialog: var(--color-fill-container-1);
  --color-dialog: var(--color-neutral-1);
  --border-radius-dialog: var(--border-radius-secondary);
  --border-radius-dialog-xs: var(--border-radius-secondary-xs);
  --border-radius-dialog-button: 40px;
  --border-radius-dialog-button-xs: 4rem;
  --bg-dialog-button-primary: var(--color-neutral-2);
  --color-dialog-button-primary: var(--color-fill-bg-1);
  --color-dialog-button-secondary: var(--color-neutral-2);
  --bg-toast: var(--color-fill-container-1);
  --color-toast: var(--color-neutral-1);
  --border-radius-toast: 8px;
  --border-radius-toast-xs: 0.8rem;
  --bg-image-placeholder: var(--color-fill-container-1);

  /* text */
  --font-weight-title: 500;
  --color-text-primary: var(--color-neutral-1);
  --color-text-secondary: var(--color-neutral-2);
  --color-text-tip: var(--color-neutral-3);
  --color-text-error: var(--color-error);

  --color-link: var(--color-action);

  --bg-loading: url('/loading/fade-loading.svg');

  /* nav */
  --bg-login-button: var(--color-action);
  --border-radius-login-button: var(--border-radius-primary);
  --border-radius-login-button-xs: var(--border-radius-primary-xs);

  --bg-tab-selected: var(--color-action);
  --bg-tab-hover: #E6E6FF10;

  /* search */
  --bg-search-bar: var(--color-fill-container-1);
  --border-color-search-bar: transparent;
  --color-search-bar-inner: inherit;
  --border-width-search-bar: 0;
  --border-width-search-bar-xs: 0;
  --border-radius-search-bar: 16px;
  --border-radius-search-bar-xs: 1.6rem;
  --color-search-bar-button: var(--color-neutral-1);
  --color-search-bar-dashed: var(--color-neutral-4);
  --color-search-bar-input: var(--color-neutral-1);
  --color-search-bar-input-placeholder: var(--color-neutral-3);
  /* search-xs */
  --color-search-bar-inner-xs: inherit;
  --color-search-bar-input-xs: #ffffff;
  --color-search-bar-input-placeholder-xs: #BFC0D4;

  --bg-search-dialog: var(--color-fill-container-1);
  --bg-search-dialog-search-bar: var(--color-fill-container-1);
  --bg-search-dialog-mask: var(--other-black-90);
  --color-search-dialog: var(--color-neutral-1);
  --border-radius-search-dialog: 8px;
  --border-radius-search-dialog-xs: 0.8rem;

  --bg-search-history-item: rgba(255, 255, 255, 0.05);
  --color-search-history-item: rgba(255, 255, 255, 0.7);
  --border-radius-search-history-item: 13px;
  --border-radius-search-history-item-xs: 1.3rem;

  --color-search-loading-text: var(--color-neutral-1);
  --color-search-empty-text: rgba(255, 255, 255, 0.7);

  --color-search-result-title: rgba(255, 255, 255, 0.7);
  --color-search-result-item-text: var(--color-neutral-1);
  --border-radius-search-result-item-image: 8px;
  --border-radius-search-result-item-image-xs: 0.8rem;

  /* logged-in */
  --bg-logged-in-popup: var(--color-fill-container-1);
  --border-radius-logged-in-popup: var(--border-radius-secondary);
  --border-radius-logged-in-popup-xs: var(--border-radius-secondary-xs);
  --border-radius-logged-in-popup-action: var(--border-radius-primary);
  --border-radius-logged-in-popup-action-xs: var(--border-radius-primary-xs);
  --color-logged-in-popup-action: var(--color-neutral-1);
  /* --bg-logged-in-popup-action-hover: ; */
  --bg-logged-in-popup-action-selected: var(--bg-tab-selected);
  --display-logged-in-popup-component: xxx;

  /* country select dialog */
  --bg-country-select-dialog: var(--color-fill-container-1);
  --border-radius-country-select-dialog: var(--border-radius-secondary);
  --border-radius-country-select-dialog-xs: var(--border-radius-secondary-xs);

  /* chat */
  --fixed-bottom-chat-icon: 64px;
  --fixed-right-chat-icon: 24px;
  --fixed-bottom-chat-icon-xs: 6.4rem;
  --fixed-right-chat-icon-xs: 2.4rem;
  /* --bgi-chat-icon: url(https://img-cdn-sg.payermax.com/jm-site/brand/JollyMax/chat-icon.png); */
  --bg-chat-unread-count: #F44444;
  --color-chat-unread-count: var(--color-white);
  --border-color-chat-unread-count: var(--color-white);


  /* ====== personal center start ======  */
  --bg-user-container-nav: #171C4C;
  --bg-user-container-nav-item: #8088B9;
  --bg-user-container-nav-item-selected: var(--bg-tab-selected);
  --bg-user-container-nav-item-hover: var(--bg-tab-hover);
  --color-user-container-nav-item: var(--color-neutral-1);
  --border-radius-user-container-nav-item: var(--border-radius-secondary);

  --bg-user-container-content: #101340;

  /* my profile */
  --color-my-profile-label: var(--color-neutral-3);
  --color-my-profile-value: var(--color-neutral-1);
  --color-my-profile-title: var(--color-neutral-1);
  --padding-my-profile-form: 0;
  --bg-my-profile-form: unset;
  --bg-my-profile-input: #2027694d;
  --color-my-profile-input: var(--color-neutral-1);
  --border-width-my-profile-input: 1px;
  --border-color-my-profile-input: #424B87;
  --border-radius-my-profile-input: none;

  --color-my-profile-button: var(--color-neutral-1);
  --bg-my-profile-button: var(--color-action);
  --border-radius-my-profile-button: none;

  --bg-my-profile-nickname-dialog: var(--color-fill-container-1);
  --border-radius-my-profile-nickname-dialog: var(--border-radius-secondary);
  --border-radius-my-profile-nickname-dialog-xs: var(--border-radius-secondary-xs);

  --bg-my-profile-nickname-dialog-input: var(--color-white);
  --border-radius-my-profile-nickname-dialog-input: var(--border-radius-secondary);
  --border-radius-my-profile-nickname-dialog-input-xs: var(--border-radius-secondary-xs);
  --color-my-profile-nickname-dialog-input: rgba(5, 8, 46, 1);
  --color-my-profile-nickname-dialog-input-placeholder: rgba(5, 8, 46, .5);
  --border-color-my-profile-nickname-dialog-input: #d0d3f3;

  --border-radius-my-profile-nickname-dialog-button: var(--border-radius-secondary);
  --border-radius-my-profile-nickname-dialog-button-xs: var(--border-radius-secondary-xs);
  --bg-my-profile-nickname-dialog-button: var(--color-action);
  --color-my-profile-nickname-dialog-button: var(--color-neutral-1);

  --bg-my-profile-gender-dialog: var(--color-fill-container-1);
  --border-radius-my-profile-gender-dialog: var(--border-radius-secondary);
  --border-radius-my-profile-gender-dialog-xs: var(--border-radius-secondary-xs);

  /* my coupon */
  --bg-my-coupon-tab-content: transparent;
  --bg-my-coupon-sub-type: var(--color-fill-container-2);
  --color-my-coupon-sub-type: #8088B9;
  --bg-my-coupon-sub-type-active: #4b7ff748;
  --color-my-coupon-sub-type-active: var(--color-neutral-1);
  --border-radius-my-coupon-sub-type-active: 24px;
  --border-radius-my-coupon-sub-type-active-xs: 2.4rem;

  /* redeem voucher */
  --bg-redeem-voucher-input: transparent;
  --color-redeem-voucher-input: #8088B9;
  --color-redeem-voucher-input-placeholder: #8088B9;
  --border-width-redeem-voucher-input: 1px;
  --border-width-redeem-voucher-input-xs: 0.1rem;
  --border-color-redeem-voucher-input: #424B87;
  --border-radius-redeem-voucher-input: var(--border-radius-secondary);
  --border-radius-redeem-voucher-input-xs: var(--border-radius-secondary-xs);

  --bg-redeem-voucher-button: var(--color-action);
  --border-color-redeem-voucher-button: transparent;
  --color-redeem-voucher-button: var(--color-neutral-1);
  --border-radius-redeem-voucher-button: 8px;
  --border-radius-redeem-voucher-button-xs: 2rem;
  --color-redeem-voucher-rule: #8088B9;
  --bg-redeem-voucher-rule-dotted: #8088B9;

  --bg-redeem-tip-dialog: var(--color-fill-container-1);
  --border-radius-redeem-tip-dialog: var(--border-radius-secondary);
  --border-radius-redeem-tip-dialog-xs: var(--border-radius-secondary-xs);
  --bg-redeem-country-dialog: var(--color-fill-container-1);
  --border-radius-redeem-country-dialog: var(--border-radius-secondary);
  --border-radius-redeem-country-dialog-xs: var(--border-radius-secondary-xs);

  /* order list */
  --bg-my-order-item: var(--color-fill-container-3);
  --border-radius-my-order-item: 8px;
  --border-radius-my-order-item-xs: 0.8rem;
  --color-my-order-item-neutral-1: var(--color-neutral-1);
  --color-my-order-item-neutral-2: var(--color-neutral-3);
  --color-my-order-item-neutral-3: var(--color-neutral-4);
  --border-radius-my-order-item-icon: 8px;
  --border-radius-my-order-item-icon-xs: 0.8rem;

  /* order detail */
  --bg-my-order-detail-card: var(--color-fill-container-3);
  --border-radius-my-order-detail-card: 8px;
  --border-radius-my-order-detail-card-xs: 0.8rem;

  /* ====== personal center end ======  */

  /* ====== home page start ====== */
  --bg-image-home: #05082E;

  /* banner / carousel */
  --width-carousel-indicator-circle: 0.3rem;
  --radius-carousel-indicator: 0;
  --bg-carousel-indicator-circle-active: #FFFFFF;
  --bg-carousel-indicator: #424B87;
  --bg-carousel-indicator-active: #FFFFFF;
  --bg-carousel-indicator-circle: #FA3333;
  --border-color-carousel-indicator-circle: var(--color-primary);
  --border-radius-carousel-indicator-circle: 50%;


  --bg-carousel-titlebar: var(--color-fill-container-2);

  --margin-top-carousel-titlebar-content: 0;
  --color-carousel-titlebar-title: var(--color-neutral-1);
  --color-carousel-titlebar-subtitle: var(--color-neutral-3);
  --color-carousel-titlebar-button: var(--color-fill-bg-1);

  --border-radius-carousel-titlebar-button: 22px;
  --border-radius-carousel-titlebar-button-xs: 1.1rem;
  --bg-carousel-titlebar-button: var(--color-neutral-2);

  /* marqueue */
  --bg-home-marqueue: var(--color-fill-container-3);
  --color-home-marqueue: var(--color-primary);
  --border-radius-home-marqueue: 8px;
  --border-radius-home-marqueue-xs: 0.8rem;

  /* recommend */
  --color-recommend-button: var(--color-black);
  --bg-recommend-button: var(--color-white);
  --border-radius-recommend-button: 18px;
  --border-radius-recommend-button-xs: 1.8rem;

  /* section / application */
  --bg-application: var(--color-fill-container-3);
  --bg-fun-application: transparent;
  --border-radius-application: var(--border-radius-secondary);
  --border-radius-application-xs: var(--border-radius-secondary-xs);

  --border-radius-application-img: var(--border-radius-secondary);
  --border-radius-application-img-xs: var(--border-radius-secondary-xs);
  --border-width-application-img: 0;
  --border-width-application-img-xs: 0;
  --border-color-application-img: transparent;
  --width-app-img: 160px;
  --height-app-img: 160px;
  --width-app-img-xs: 8rem;
  --height-app-img-xs: 8rem;
  --display-app-item-after: block;
  --transform-app-item-after: skewY(10deg);
  --transform-app-item-after-rtl: skewY(-10deg);
  --bottom-app-item-after: -10%;
  --margin-app-img: 28px auto 0;
  --margin-app-img-xs: 1.4rem auto 0;
  --color-app-item-title: #FFFFFF;
  --color-app-intro-desc: rgba(255,255,255,.8);
  --color-app-intro-desc-h: #FFFFFF;

  --color-application-name: var(--color-neutral-1);

  --border-radius-application-button: 18px;
  --border-radius-application-button-xs: 1rem;
  --bg-application-button: var(--color-fill-container-1);
  --color-application-button: var(--color-neutral-1);

  /* contact us */
  --bg-contact-us-dialog: var(--color-fill-container-1);
  --border-radius-contact-us-dialog: var(--border-radius-secondary);
  --border-radius-contact-us-dialog-xs: var(--border-radius-secondary-xs);
  --text-align-contact-us: center;
  /* ====== home page end ====== */

  /* ====== detail page start ======  */
  /* page intro */
  --bg-page-intro: var(--color-fill-container-3);
  --padding-page-intro: 0 24px 0 0;
  --padding-page-intro-xs: 1rem 1.5rem 0.6rem;
  --padding-page-intro-rtl: 0 0 0 24px;
  --padding-page-intro-xs-rtl: 1rem 1.5rem 0.6rem;

  --bg-page-intro-text: transparent;
  --padding-page-intro-text: 0;
  --padding-page-intro-text-xs: 0;

  --border-radius-page-intro-banner: 0.4rem 0.4rem 0 0;

  --border-radius-page-intro-app-logo: 16px;
  --border-radius-page-intro-app-logo-xs: 0.8rem;
  --border-width-page-intro-app-logo: 3px;
  --border-width-page-intro-app-logo-xs: 0.15rem;
  --border-color-page-intro-app-logo: transparent;

  --border-radius-merchant-info-locale-select: var(--border-radius-primary);
  --border-radius-merchant-info-locale-select-xs: var(--border-radius-primary-xs);
  --padding-merchant-info-locale-select: 0;
  --padding-merchant-info-locale-select-xs: 0;
  --bg-merchant-info-locale-select: transparent;
  --color-merchant-info-locale-select-country: var(--color-neutral-1);

  --bg-page-intro-activity-info: #E6E6FF1F;
  --color-page-intro-activity-info: #FFFFFFB3;

  --bg-country-select: unset;
  --radius-country-select: #3F4476;

  /* component */
  --bg-detail-component: var(--color-neutral-1);
  --margin-top-detail-component: 14px;
  --margin-top-detail-component-xs: 1.4rem;
  --padding-detail-component: 0 24px 24px;
  --padding-detail-component-xs: 0 1.2rem 1.6rem;
  --width-detail-step-slash: 33px;
  --width-detail-step-slash-xs: 3.3rem;
  --height-detail-step-slash: 22px;
  --height-detail-step-slash-xs: 2.2rem;
  --bgi-detail-step-slash: url(https://img-cdn-sg.payermax.com/jm-site/brand/JollyMax/step-bg.png);
  --color-detail-step: var(--color-primary);
  --padding-detail-step:  0 6px 0 12px;
  --padding-detail-step-xs: 0 1.2rem;
  --color-detail-step-title: #05082EB3;
  --bg-goods-pop-button: #E6E6FF;
  --color-goods-pop-button: #05082E;

  /* tabs */
  --bg-detail-tabs: #ffffffE6;
  --width-detail-tabs: fit-content;
  --border-bottom-detail-tabs: none;
  --margin-detail-tabs: 0;
  --margin-detail-tabs-xs: 0 0.8rem;
  --padding-detail-tabs: 0;
  --padding-detail-tabs-xs: 0;
  --color-detail-tabs-item: #05082E80;
  --padding-detail-tabs-item: 0 20px;
  --padding-detail-tabs-item-xs: 0 1rem;
  --color-detail-tabs-item-active: #05082E;
  --bg-detail-tabs-item-active: #FFFFFF;
  --min-width-detail-tabs-item: 180px;
  --display-detail-tabs-item-pseudo-element: block;
  --flex-detail-tabs-item-xs: 1;

  /* goods item */
  --padding-detail-goods: 10px;
  --color-detail-goods-from: rgba(var(--color-m-500-base), 0.7);
  --border-width-detail-goods: 1px;
  --border-width-detail-goods-action: 2px;
  --bg-detail-goods-icon: #F5F5F5;
  --border-radius-detail-goods-icon: 8px;
  --border-radius-detail-goods-tag: 8px;
  --bg-detail-goods-tag: linear-gradient(270deg, #6E81F4 0.32%, #FA5C5D 99.6%); 
  /* --bgi-detail-goods-discount-tag-icon: ; */
  --color-detail-goods-tag: var(--color-neutral-1);
  --bg-detail-goods-tips-dialog: var(--color-fill-container-1);
  --border-radius-detail-goods-tips-dialog: var(--border-radius-secondary);
  --border-radius-detail-goods-tips-dialog-xs: var(--border-radius-secondary-xs);
  --color-detail-goods-style-title: var(--color-fill-bg-1);
  --color-detail-goods-style-title-promo: #F68D3E;
  /* --bgi-detail-goods-style-promo-icon: ; */
  /* --bgi-detail-goods-countdown-clock-icon: ; */
  /* --bgi-detail-goods-countdown-lock-icon: ; */
  --bg-detail-goods-progress: #E4E4F0;
  --bg-detail-goods-progress-soldout: var(--color-secondary-neutral-2);
  --color-detail-goods-progress: var(--color-white);
  --bg-detail-goods-progress-inner: var(--color-primary);

  /* payment item */
  --bg-detail-payment: var(--color-neutral-1);
  --border-radius-detail-payment: var(--border-radius-secondary);
  --border-radius-detail-payment-xs: var(--border-radius-secondary-xs);
  --border-width-detail-payment: 1px;
  --border-width-detail-payment-action: 2px;
  --border-width-detail-payment-xs: 0.1rem;
  --border-width-detail-payment-action-xs: 0.2rem;
  --border-color-detail-payment: #D0D3F3;
  --padding-detail-payment: 10px;
  --padding-detail-payment-xs: 0;
  --border-color-detail-payment-action: var(--color-primary);
  --bg-detail-payment-icon: #F4F4FF;
  --bg-detail-payment-tag: var(--color-primary);
  --color-detail-payment-tag: var(--color-neutral-1);
  --border-radius-detail-payment-tag: var(--border-radius-secondary);
  --border-radius-detail-payment-tag-xs: var(--border-radius-secondary-xs);
  --bg-detail-payment-mark: var(--color-primary);
  --bg-detail-payment-mark-hook: var(--color-neutral-1);
  --color-detail-payment-name: var(--color-fill-bg-1);
  --color-detail-payment-amount: var(--color-fill-bg-1);
  --color-detail-payment-amount-origin: #05082E80;
  --bg-detail-payment-tips-dialog: var(--color-fill-container-1);
  --border-radius-detail-payment-tips-dialog: var(--border-radius-secondary);
  --border-radius-detail-payment-tips-dialog-xs: var(--border-radius-secondary-xs);

  /* user form */
  --bg-detail-user-form-input: transparent;
  --border-radius-detail-user-form-item: var(--border-radius-secondary);
  --border-radius-detail-user-form-item-xs: var(--border-radius-secondary-xs);
  --color-detail-user-form-subtitle: rgba(5, 8, 46, .7);
  --color-detail-user-form-input: rgba(5, 8, 46, 1);
  --color-detail-user-form-placeholder: rgba(5, 8, 46, .5);
  --color-detail-user-form-desc: rgba(5, 8, 46, .5);
  --border-color-detail-user-form-input: #d0d3f3;
  --border-color-detail-user-form-input-focus: var(--color-action);
  --border-color-detail-user-form-input-error: var(--color-error);
  --bg-detail-user-form-input-error: rgba(250, 51, 51, 0.1);
  --bg-detail-user-id-tips-dialog: var(--color-fill-container-1);
  --border-radius-detail-user-id-tips-dialog: var(--border-radius-secondary);
  --border-radius-detail-user-id-tips-dialog-xs: var(--border-radius-secondary-xs);
  --color-switch-remember-me: #FFFFFF;
  /* empty select */
  --bg-image-empty-select-url: url(//img-cdn-sg.payermax.com/shoplay365/prod/upload/picture/20250618060110291_no-search-result-common-qian.svg);

  /* jolly bean */
  --reward-jollybean-display: block;
  /* order confirm dialog */
  --bg-detail-order-confirm-dialog: var(--color-fill-container-1);
  --border-radius-detail-order-confirm-dialog: var(--border-radius-secondary);
  --border-radius-detail-order-confirm-dialog-xs: var(--border-radius-secondary-xs);
  --bg-detail-order-confirm-dialog-goods-box: var(--color-fill-container-2);
  --border-radius-detail-order-confirm-dialog-goods-box: var(--border-radius-secondary);
  --border-radius-detail-order-confirm-dialog-goods-box-xs: var(--border-radius-secondary-xs);
  --color-dlg-confirm: #FFFFFF;
  --color-app-dlg-confirm: rgba(255,255,255,0.7);
  --color-dlg-confirm-secondary: rgba(255,255,255, .5);
  --color-goods-desc-dlg-confirm-secondary: rgba(255, 255, 255, .7);
  ---border-color-dlg-confirm-secondary: rgba(255, 255, 255, .1);

  /* bottom acctions */
  --bottom-actions-container-width-xs: 100%;
  --bottom-actions-container-width: 100%;
  --bottom-actions-container-radius: unset;
  --bottom-actions-container-overflow: unset;
  --bg-bottom-actions: var(--color-neutral-1);
  --bg-bottom-actions-buy-button: var(--color-primary);
  --border-radius-bottom-actions-buy-button: 22px;
  --border-radius-bottom-actions-buy-button-xs: 2.2rem;
  --border-color-bottom-actions-buy-button: transparent;
  --border-color-bottom-actions-buy-button-width: 1px;
  --color-bottom-actions-buy-button: var(--color-neutral-1);

  --color-bottom-actions-amount-label: #05082EB3;
  --color-bottom-actions-amount-value: var(--color-fill-bg-1);
  --color-bottom-actions-amount-origin: var(--color-primary);
  --color-bottom-actions-discount-percent: var(--color-neutral-1);
  --color-bottom-actions-buy-button-sold-out: #FFFFFF66;
  --padding-top-bottom-actions-discount-percent: 13px;
  --padding-top-bottom-actions-discount-percent-xs: 1.6rem;
  --height-bottom-actions-buy-button: 44px;
  --height-bottom-actions-buy-button-xs: 4.4rem;
  --height-bottom-button-container: 60px;
  --height-bottom-button-container-xs: 6rem;
  --padding-bottom-button-container: 0 16px;
  --padding-bottom-button-container-xs: 0 .8rem;
  --display-bottom-actions-buy-button-skew: none;
  --bgi-bottom-actions-discount: url(https://img-cdn-sg.payermax.com/jm-site/brand/JollyMax/discount-percent-bg.png);
  --bgi-bottom-action-coupon-empty: url(https://img-cdn-sg.payermax.com/shoplay365/prod/upload/img/detail-discount-dialog-login.png);
  --bg-bottom-actions-amount-dialog: var(--color-fill-container-1);
  --border-radius-bottom-actions-amount-dialog: var(--border-radius-secondary);
  --border-radius-bottom-actions-amount-dialog-xs: var(--border-radius-secondary-xs);
  --bg-bottom-actions-buy-button-sold-out: #FA333366;

  --color-goods-title: #FFFFFF;

  --filter-arrow-icon: unset;

  /* confirm-payment-dialog */
  --bg-detail-confirm-payment-dialog: var(--color-fill-container-1);
  --color-detail-confirm-payment-dialog: var(--color-neutral-3);
  --color-detail-confirm-payment-dialog-title: #FFFFFF;
  --border-radius-detail-confirm-payment-dialog: var(--border-radius-secondary);
  --border-radius-detail-confirm-payment-dialog-xs: var(--border-radius-secondary-xs);


  /* dialog  */
  --color-tip-title: var(--color-neutral-1);
  --color-goods-pop-title: var(--color-neutral-1);

  /* calc-dialog */
  --color-calc-label: rgba(255, 255, 255, 0.7);
  --color-calc-title: #FFFFFF;
  --bg-calc-divider: rgba(255, 255, 255, 0.2);
  --color-calc-value: #FFFFFF;
  --color-calc-value-discount: #FA3333;

  /* country-select-dialog */
  --bg-country-select-dlg:#3F4476;
  --bg-current-country: #3E65FF;
  --color-country-select-text: #FFFFFF;

  --color-404-desc:#FFFFFF;

  /* top-app */
  --display-app-item-btn: block;
  /* detail footer part */
  --bg-detail-footer-part: var(--color-fill-bg-1);
  --color-detail-footer-part-goods-title: var(--color-neutral-1);
  --color-detail-footer-part-section-title: var(--color-neutral-1);
  --color-detail-footer-part-section-content: var(--color-neutral-3);
  --bg-detail-footer-part-section-item: var(--color-fill-container-3);
  --padding-detail-footer-part-section-item: var(--border-radius-secondary);
  --padding-detail-footer-part-section-item-xs: var(--border-radius-secondary-xs);

  /* ====== detail page end ======  */

  /* ====== result page start ======  */
  --bg-result-main: #141647;
  --padding-result-main: 0 40px 34px;
  --bg-result-container: #0d0f44;
  --bg-result-bottom: #242559;
  --bg-result-order-detail: rgba(20, 22, 71, 0.5);
  --padding-result-order-detail: 40px;
  --margin-result-order-detail: unset;
  --radius-result-order-detail: 0;
  --bg-result-button-part: #0C0E2C;
  --bg-result-status-container: unset;
  --padding-result-status-container: 1px 0 64px 0;
  --color-result-email-title: #c1c3d9;
  --color-result-email-title-xs: #FFFFFF;
  --weight-result-email-title: 500;
  --weight-result-email-title-xs: 400;
  --weight-email-input: 400;
  --color-result-right-content: #9292ad;;
  --color-email-input: #FFFFFF;
  --color-result-link: #3782ff;
  --color-cdk-title: #9292ad;
  --color-cdk-time: #9292ad;
  --color-cdk-value: #FFFFFF;
  --margin-color-result-divide: 0;
  --margin-how-to-use: 23px 0 0 0;
  --margin-how-to-use-xs: 0;
  --color-how-to-use-title: #C1C3D9;
  --color-how-to-use-title-xs: #C1C3D9;
  --color-how-to-use-content: inherit;
  --border-color-result-divide: #40416c;
  --border-color-result-pc-divide:rgba(255, 255, 255, 0.1);
  --bg-email-box:rgba(13, 15, 68, 0.2);
  --bg-out-email-box:rgba(13, 15, 68, 0.4);
  --bg-email-disable-box: rgba(13, 15, 68, 0);
  --border-color-email-outer: #45467d;
  --border-color-email-button-before: #585980;
  --radius-email-box: unset;
  --radius-email-box-xs: .2rem;
  --border-email-disable-box-xs: 1px solid #45467d;
  --padding-email-container: 0;
  --display-cdk-part-before: block;
  --url-cdk-part:unset;
  --padding-result-button-part: 0;
  --display-result-contact-us: unset;
  --color-result-border-left: #45467D;
  --color-result-border-left-xs:#3d3f69;
  --color-status-name: #ffd073;
  --color-result-step-container: #9292ad;
  --border-color-circle-step-icon:#45467D;
  --url-result-step-done-icon:unset;
  --url-result-step-failed-icon:unset;
  --url-result-step-success-icon:unset;
  --url-result-step-waiting-icon:unset;
  --color-result-step-title: #ffd073;
  --color-success-result-step-title:#45467d;
  --color-result-flex-container-title: #9292AD;
  --border-result-flex-container: #45467D;
  --bg-result-flex-container: #45467D;
  --bg-result-flex-container-number: #45467D;
  --color-order-number: #FFFFFF;
  --padding-result-flex-container-title: 0 8px 0 16px;
  --padding-result-flex-container-title-xs:0 .4rem 0 .8rem;
  --bg-guide-delivery-container:linear-gradient(180deg, #242651 0%, #14163E 100%);
  --border-color-guide-delivery-container: #A68D55;
  --radius-guide-delivery-container: unset;
  --box-shadow-guide-delivery-container: 0 .1rem 4.5rem 0px rgba(69,70,125,0.4);
  --color-app-goods-info:#FFFFFF;
  --weight-app-goods-info: 400;
  --border-color-gap-line: #FFFFFF;
  --border-color-gap-line-light: rgba(244, 246, 253, 0.08);
  --color-guide-user-info-title: #9292AD;
  --color-download-info-title: inherit;
  --color-guide-user-info: #8088B9;
  --color-status-user-info: #FFFFFF;
  --color-download-info-content:inherit;
  --radius-result-default-button:0;
  --radius-result-default-button-xs: .2rem;
  --border-color-result-default-button: #202769;
  --color-result-default-button: #FFFFFF;
  --border-color-result-primary-button: #3782FF;
  --color-result-primary-button: #FFFFFF;
  /* ====== result page end ======  */

  /* countryLanding */
  --bg-country-landing-dialog: var(--color-fill-container-1);
  --border-radius-country-landing-dialog: var(--border-radius-secondary);
  --border-radius-country-landing-dialog-xs: var(--border-radius-secondary-xs);

  /* footer */
  --flex-direction-footer: row-reverse;
  --align-item-footer: center;
  --align-item-footer-xs: center;

  --color-footer-section-title: var(--color-neutral-1);
  --font-size-footer-section-title: 14px;
  --font-size-footer-section-title-xs: 0.7rem;

  --padding-footer-locale-select: 8px;
  --padding-footer-locale-select-xs: 0.4rem;
  --border-color-footer-locale-select: rgba(255, 255, 255, .25);
  --border-radius-footer-locale-select: 30px;
  --border-radius-footer-locale-select-xs: 2rem;
  --color-text-footer-locale-select: var(--color-neutral-1);

  --border-color-footer-locale-select-icon: var(--color-neutral-1);
  --width-footer-locale-select-icon: 24px;
  --width-footer-locale-select-icon-xs: 2rem;

  --margin-footer-copyright: 0px;
  --margin-footer-copyright-xs: 0.6rem;
  --text-align-footer-copyright-xs: center;
  --color-footer-email-text: var(--color-yellow-50);
  --color-footer-help-center-text: var(--color-blue-30);
  --color-footer-desc-text:#FFFFFF;
  --color-footer-terms-policy-text:#FFFFFF;
  /* promote code */
  --apply-primary-btn-color: var(--color-action);
  --apply-primary-btn-radius: 22px;
  --apply-primary-btn-radius-xs: 2.2rem;
  --bg-promo-code-form-input: rgba(32, 39, 105, 0.3);
  --promo-code-form-input-color: var(--color-white);
  --promo-code-enter-border-radius-xs: 2.2rem;
  --promo-code-enter-border-radius:22px;

  /* country-language-settings-drawer */
  --bg-country-language-settings-drawer-inner: unset;
  --bg-country-language-settings-drawer-inner-actions:#101238;
  --color-country-language-settings-drawer-inner-confirm: #3782FF;
  --color-country-language-settings-drawer-inner-cancel: #8088B9;
  --bold-country-language-settings-drawer-inner-btn: normal;
  --color-country-language-settings-drawer-tab: #FFFFFF;
  --color-country-language-settings-drawer-tab-selected: #FFFFFF;
  --bg-country-language-settings-drawer-tabs:unset;
  --mask-country-language-settings-drawer-inner: linear-gradient(180deg, rgba(#101238, 0.7), rgba(#101238, 0.3)), linear-gradient(0deg, rgba(#101238, 0.7), rgba(#101238, 0.3));
  --bg-country-language-settings-drawer-tab-indicator: #3782FF;
  --color-country-language-settings-column-item:#FFFFFF;
  --border-color-country-language-settings-input: #424B87;
  --color-country-language-settings-input:#FFFFFF;
  --bg-country-language-settings-input: rgba(32, 39, 105, 0.3);
  --radius-country-language-settings-input: 0;
  --bg-country-language-settings-dropdown: #10133D;
  --color-country-language-settings-dropdown: #FFFFFF;
  --bg-country-language-settings-selected-item: #3782FF;

  --bg-default-button: #283269;
  --border-color-default-button:#283269;
  --color-default-button: #FFFFFF;
  --bg-confirm-button: #3782FF;
  --radius-default-button: 0;
  --radius-default-confirm-payment-button: 2.2rem;
  --color-intro-item-subTitle: #b3b3b3;
  --color-intro-item-text: #FFFFFF;
  --radius-banner-img-container: 16px;
  --radius-banner-img-container-xs: .8rem;
  --color-pc-uid-container-desc: #FFFFFF;
}