@charset "UTF-8";
/* webadspace */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/notosans/v36/o-0bIpQlx3QUlC5A4PNB6Ryti20_6n1iPHjc5aPdu3mhPy1Fig.woff2) format('woff2');
}

: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: 'Noto Sans', var(--font-family-base);

  /* 主题色 */
  --color-primary: #F85526;
  --color-action-primary: #CB4A16;
  --color-primary-variant: #FFE4DC;

  /* 功能色 */
  --color-action: #F85526;
  --color-text-button: #8599FF;
  --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: #1B1D1F;
  --color-neutral-2: #4E545A;
  --color-neutral-3: #848C94;
  --color-neutral-4: #848C94;
  --color-secondary-neutral-1: #1B1D1F;
  --color-secondary-neutral-2: #4E545A;
  --color-secondary-neutral-3: #848C94;
  --color-secondary-neutral-4: #CBCED2;

  /* 填充色 */
  --color-fill-bg-1: #F6F6F6;
  --color-fill-bg-2: #EAEAEA;

  --color-fill-container-1: #FFFFFF;
  --color-fill-container-2: #E8EDFE;
  --color-fill-container-3: #FFFFFF;
  --color-fill-secondary-container-1: #FFFFFF;
  --color-fill-secondary-container-2: #E8EDFE;
  --color-fill-secondary-container-3: #111519;

  /* 反色 */
  --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: #8599FF;
  --color-blue-50: #4B69FF;
  --color-blue-60: #305FE1;

  /* font */
  --font-color-1: var(--color-neutral-1);
  --font-color-2: var(--color-neutral-2);


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

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

  --border-radius-primary: 4px;
  --border-radius-primary-xs: 0.4rem;
  --border-radius-secondary: 8px;
  --border-radius-secondary-xs: 0.8rem;

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

  --bg-nav: #F6F6F6;
  --bg-footer: var(--color-fill-bg-2);
  --bg-body: var(--color-fill-bg-1);
  --bg-body-detail: var(--color-fill-container-1);
  --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: var(--border-radius-secondary);
  --border-radius-toast-xs: var(--border-radius-secondary-xs);
  --bg-image-placeholder: #CBCED2;

  /* text */
  --font-weight-title: 600;
  --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('https://img-cdn-sg.payermax.com/jm-site/brand/webadspace/loading.svg');

  /* nav */
  --bg-login-button: linear-gradient(90deg, #FFA742 0%, var(--color-primary) 100%);
  --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: var(--color-fill-container-2);

  /* search */
  --bg-search-bar: transparent;
  --border-color-search-bar: var(--color-fill-container-1);
  --color-search-bar-inner: var(--color-fill-container-1);
  --border-width-search-bar: 1px;
  --border-width-search-bar-xs: 0.1rem;
  --border-radius-search-bar: var(--border-radius-primary);
  --border-radius-search-bar-xs: var(--border-radius-primary-xs);
  --color-search-bar-button: var(--color-neutral-1);
  --color-search-bar-dashed: var(--color-neutral-4);
  --color-search-bar-input: var(--color-fill-container-1);
  --color-search-bar-input-placeholder: var(--color-fill-container-1);
  /* search-xs */
  --color-search-bar-inner-xs: var(--color-neutral-1);
  --color-search-bar-input-xs: var(--color-neutral-1);
  --color-search-bar-input-placeholder-xs: var(--color-neutral-3);

  --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: var(--border-radius-primary);
  --border-radius-search-dialog-xs: var(--border-radius-primary-xs);

  --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: var(--border-radius-secondary);
  --border-radius-search-result-item-image-xs: var(--border-radius-secondary-xs);

  /* 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: none;

  /* 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/Dadagold/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: transparent;
  --bg-user-container-nav-item: transparent;
  --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-primary);

  --bg-user-container-content: transparent;

  /* 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: 24px;
  --bg-my-profile-form: var(--color-fill-container-3);
  --bg-my-profile-input: var(--color-neutral-1);
  --color-my-profile-input: var(--color-fill-bg-1);
  --border-width-my-profile-input: 1px;
  --border-color-my-profile-input: var(--color-neutral-3);
  --border-radius-my-profile-input: var(--border-radius-primary);

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

  --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: var(--color-fill-bg-1);
  --color-my-profile-nickname-dialog-input-placeholder: var(--color-neutral-3);
  --border-color-my-profile-nickname-dialog-input: var(--color-neutral-3);

  --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-1);
  --color-my-coupon-sub-type: var(--color-neutral-3);
  --bg-my-coupon-sub-type-active: var(--color-action);
  --color-my-coupon-sub-type-active: var(--color-neutral-1);
  --border-radius-my-coupon-sub-type-active: var(--border-radius-primary);
  --border-radius-my-coupon-sub-type-active-xs: var(--border-radius-primary-xs);

  /* redeem voucher */
  --bg-redeem-voucher-input: var(--color-neutral-1);
  --color-redeem-voucher-input: var(--color-fill-bg-1);
  --color-redeem-voucher-input-placeholder: var(--color-neutral-3);
  --border-width-redeem-voucher-input: 1px;
  --border-width-redeem-voucher-input-xs: 0.1rem;
  --border-color-redeem-voucher-input: var(--color-neutral-3);
  --border-radius-redeem-voucher-input: var(--border-radius-secondary);
  --border-radius-redeem-voucher-input-xs: var(--border-radius-secondary-xs);

  --bg-redeem-voucher-button: linear-gradient(90deg, var(--color-primary) 0%, #FF9D42 100%);
  --border-color-redeem-voucher-button: transparent;
  --color-redeem-voucher-button: var(--color-neutral-1);
  --border-radius-redeem-voucher-button: var(--border-radius-secondary);
  --border-radius-redeem-voucher-button-xs: var(--border-radius-primary-xs);
  --color-redeem-voucher-rule: var(--color-neutral-3);
  --bg-redeem-voucher-rule-dotted: var(--color-neutral-3);

  /* order list */
  --bg-my-order-item: var(--color-fill-container-3);
  --border-radius-my-order-item: var(--border-radius-primary);
  --border-radius-my-order-item-xs: var(--border-radius-primary-xs);
  --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: var(--border-radius-primary);
  --border-radius-my-order-item-icon-xs: var(--border-radius-primary-xs);

  /* order detail */
  --bg-my-order-detail-card: #1E234E;
  --border-radius-my-order-detail-card: 8px;
  --border-radius-my-order-detail-card-xs: .8rem;

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

  /* ====== home page start ====== */
  --bg-image-home: unset;

  /* banner / carousel */
  --width-carousel-indicator-circle: 6px;
  --radius-carousel-indicator: 4px;
  --border-radius-carousel-indicator-circle: 50%;
  --bg-carousel-indicator-circle: #333333;
  --bg-carousel-indicator-circle-active: var(--color-primary);
  --bg-carousel-indicator: var(--color-secondary-neutral-4);
  --bg-carousel-indicator-active: var(--color-neutral-1);
  --bg-carousel-indicator-circle: #FA3333;
  --border-color-carousel-indicator-circle: var(--color-primary);

  --bg-carousel-titlebar: linear-gradient(180deg, var(--color-fill-container-1) 0%, var(--color-fill-container-3) 100%);

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

  --border-radius-carousel-titlebar-button: var(--border-radius-primary);
  --border-radius-carousel-titlebar-button-xs: var(--border-radius-primary-xs);
  --bg-carousel-titlebar-button: var(--color-action);

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

  /* recommend */
  --color-recommend-button: var(--color-black);
  --bg-recommend-button: var(--color-white);
  --border-radius-recommend-button: var(--border-radius-secondary);
  --border-radius-recommend-button-xs: var(--border-radius-secondary-xs);

  /* section / application */
  --bg-application: var(--color-fill-container-1);
  --bg-fun-application: transparent;
  --border-radius-application: 4px;
  --border-radius-application-xs: 4px;

  --border-radius-application-img: 4px;
  --border-radius-application-img-xs: 4px;
  --border-width-application-img: 6px;
  --border-width-application-img-xs: 0.3rem;
  --border-color-application-img: var(--color-secondary-neutral-4);
  --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: none;
  --transform-app-item-after-rtl: none;
  --bottom-app-item-after: -30%;
  --margin-app-img: 28px auto 0;
  --margin-app-img-xs: 2.8rem auto 0;
  --color-app-item-title: var(--color-neutral-1);
  --color-app-intro-desc: rgba(0,0,0,.8);


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

  --border-radius-application-button: var(--border-radius-primary);
  --border-radius-application-button-xs: var(--border-radius-primary-xs);
  --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: left;
  /* ====== home page end ====== */

  /* ====== detail page start ======  */
  /* page intro */
  --bg-page-intro: var(--color-fill-bg-1);
  --bg-shareit-app-detail:var(--color-fill-bg-1);;
  --padding-page-intro: 0 48px 0 0;
  --padding-page-intro-xs: 0 0 1.2rem;
  --padding-page-intro-rtl: 0 0 0 48px;
  --padding-page-intro-xs-rtl: 0 0 1.2rem;

  --bg-page-intro-text: transparent;
  --padding-page-intro-text: 12px;
  --padding-page-intro-text-xs: 1.2rem;

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

  --border-radius-page-intro-app-logo: var(--border-radius-primary);
  --border-radius-page-intro-app-logo-xs: var(--border-radius-primary-xs);
  --border-width-page-intro-app-logo: 3px;
  --border-width-page-intro-app-logo-xs: 0.15rem;
  --border-color-page-intro-app-logo: var(--bg-body-detail);

  --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: 4px;
  --padding-merchant-info-locale-select-xs: 0.2rem;
  --bg-merchant-info-locale-select: transparent;
  --color-merchant-info-locale-select-country: #4B69FF;

  --bg-page-intro-activity-info: #B9A278;
  --color-page-intro-activity-info: var(--bg-body-detail);

  --bg-country-select: var(--color-white);
  --radius-country-select: 4px;

  /* component */
  --bg-detail-component: transparent;
  --margin-top-detail-component: 0;
  --margin-top-detail-component-xs: 0;
  --padding-detail-component: 0 12px 24px;
  --padding-detail-component-xs: 0 1.2rem 1.6rem;
  --width-detail-step-slash: 26px;
  --width-detail-step-slash-xs: 2.6rem;
  --height-detail-step-slash: 26px;
  --height-detail-step-slash-xs: 2.6rem;
  --bgi-detail-step-slash: url(https://img-cdn-sg.payermax.com/jm-site/brand/webadspace/dadagold_step_bg.png);
  --color-detail-step: var(--color-white);
  --padding-detail-step:  0 7px;
  --padding-detail-step-xs: 0 0.7rem;
  --color-detail-step-title: var(--color-neutral-1);
  --bg-goods-pop-button: var(--color-primary);
  --color-goods-pop-button: var(--color-white);

  /* tabs */
  --bg-detail-tabs: transparent;
  --width-detail-tabs: auto;
  --border-bottom-detail-tabs: 1px solid var(--color-secondary-neutral-4);
  --margin-detail-tabs: 0 0 12px;
  --margin-detail-tabs-xs: 0 0 1.2rem;
  --padding-detail-tabs: 0 12px;
  --padding-detail-tabs-xs: 0 1.2rem;
  --color-detail-tabs-item: var(--color-neutral-3);
  --padding-detail-tabs-item: 0 12px;
  --padding-detail-tabs-item-xs: 0 1.2rem;
  --color-detail-tabs-item-active: var(--color-primary);
  --bg-detail-tabs-item-active: transparent;
  --border-bottom-detail-tabs-item-active: 1px solid var(--color-primary);
  --min-width-detail-tabs-item: auto;
  --display-detail-tabs-item-pseudo-element: none;
  --flex-detail-tabs-item-xs: none;

  /* goods item */
  --bg-detail-goods: #FDFDFE;
  --border-radius-detail-goods: var(--border-radius-secondary);
  --border-radius-detail-goods-xs: var(--border-radius-secondary-xs);
  --border-radius-detail-secondary-goods: 8px;
  --border-radius-detail-secondary-goods-xs: 0.8rem;
  --border-width-detail-goods: 1px;
  --border-width-detail-goods-action: 2px;
  --border-width-detail-goods-xs: 0.1rem;
  --border-width-detail-goods-action-xs: 0.2rem;
  --border-color-detail-goods: #D0D3F3;
  --padding-detail-goods: 10px;
  --padding-detail-goods-xs: 1rem;
  /* --padding-detail-goods-group: 0;
  --padding-detail-goods-group-xs: 0; */
  --bg-detail-goods-icon: #F5F5F5;
  --border-radius-detail-goods-icon: 9px;
  --border-radius-detail-goods-icon-xs: 0.9rem;
  --border-color-detail-goods-action: var(--color-primary);
  --bg-detail-goods-tag: var(--color-primary);
  --bgi-detail-goods-discount-tag-icon: url(https://img-cdn-sg.payermax.com/jm-site/brand/webadspace/discount-tag-icon.svg);
  --bg-detail-big-img-goods-tag: var(--color-primary);
  --color-detail-big-img-goods-tag: var(--color-white);
  --color-detail-goods-discount: var(--color-red-50);
  --color-detail-goods-tag: var(--color-white);
  --border-radius-detail-goods-tag: var(--border-radius-secondary);
  --border-radius-detail-goods-tag-xs: var(--border-radius-secondary-xs);
  --bg-detail-goods-mark: var(--color-primary);
  --bg-detail-goods-mark-hook: var(--color-fill-secondary-container-1);
  --color-detail-goods-name: var(--color-secondary-neutral-1);
  --color-detail-goods-desc: var(--color-neutral-4);
  --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-neutral-1);
  --color-detail-goods-style-title-promo: #F68D3E;
  /* --bgi-detail-goods-style-promo-icon: ; */
  --bg-detail-goods-countdown: var(--color-black);
  --bg-detail-goods-countdown-lock: var(--color-neutral-4);
  --color-detail-goods-countdown: var(--color-white);
  /* --bgi-detail-goods-countdown-clock-icon: ; */
  /* --bgi-detail-goods-countdown-lock-icon: ; */
  --color-detail-goods-preheat-desc: var(--color-yellow-60);
  --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-fill-secondary-container-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-fill-secondary-container-1);
  --color-detail-payment-name: var(--color-secondary-neutral-1);
  --color-detail-payment-amount: var(--color-secondary-neutral-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: var(--color-white);
  --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: var(--color-neutral-1);
  /* empty select */
  --bg-image-empty-select-url: url(//img-cdn-sg.payermax.com/jm-site/brand/webadspace/no-search-result-common-qian.svg);

  /* jolly bean */
  --reward-jollybean-display: none;

  /* 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: #FEEEE9;
  --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: var(--color-neutral-1);
  --color-app-dlg-confirm: var(--color-neutral-1);
  --color-dlg-confirm-secondary: var(--color-neutral-3);
  --color-goods-desc-dlg-confirm-secondary: var(--color-neutral-3);
  ---border-color-dlg-confirm-secondary: var(--color-secondary-neutral-4);


  /* bottom acctions */
  --bottom-actions-container-width-xs: unset;
  --bottom-actions-container-width: 100%;
  --bottom-actions-container-radius: 0;
  --bottom-actions-container-overflow: auto;
  --bg-bottom-actions: var(--color-fill-container-1);
  --bg-bottom-actions-buy-button: linear-gradient(270deg, #EE1207 0%, #FF9D42 100%);
  --border-radius-bottom-actions-buy-button: 4px;
  --border-radius-bottom-actions-buy-button-xs: .4rem;
  --border-color-bottom-actions-buy-button: transparent;
  --border-color-bottom-actions-buy-button-width: 0;
  --color-bottom-actions-buy-button: var(--color-fill-container-1);

  --color-bottom-actions-amount-label: #05082EB3;
  --color-bottom-actions-amount-value: var(--color-secondary-neutral-1);
  --color-bottom-actions-amount-origin: var(--color-red-50);
  --color-bottom-actions-discount-percent: var(--color-white);
  --color-bottom-actions-buy-button-sold-out: #FFFFFF;
  --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/webadspace/discount-percent-bg.png);
  --bgi-bottom-action-coupon-empty: url(https://img-cdn-sg.payermax.com/jm-site/brand/PlayKash/playKash-detail-coupon-empty.png);
  --bg-bottom-actions-amount-dialog: var(--color-fill-container-1);
  --bg-bottom-actions-buy-button-sold-out:#BEC8F6;

  --border-radius-bottom-actions-amount-dialog: var(--border-radius-secondary);
  --border-radius-bottom-actions-amount-dialog-xs: var(--border-radius-secondary-xs);

  --color-goods-title: var(--color-neutral-2);

  --filter-arrow-icon: invert(.7);



  /* confirm-payment-dialog */
  --bg-detail-confirm-payment-dialog: var(--color-fill-container-1);
  --color-detail-confirm-payment-dialog: var(--color-neutral-2);
  --color-detail-confirm-payment-dialog-title: var(--color-neutral-1);
  --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: var(--color-neutral-3);
  --color-calc-title: var(--color-neutral-1);
  --bg-calc-divider: var(--color-neutral-3);
  --color-calc-value: var(--color-neutral-1);
  --color-calc-value-discount: #FA3333;

  /* country-select-dialog */
  --bg-country-select-dlg: var(--color-fill-container-1);
  --bg-current-country: #FEEEE9;
  --color-country-select-text: var(--color-neutral-1);

  --color-404-desc:var(--color-neutral-1);

  /* top-app */
  --display-app-item-btn: none;
  /* detail footer part */
  --bg-detail-footer-part: var(--color-fill-bg-2);
  --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-primary);
  --padding-detail-footer-part-section-item-xs: var(--border-radius-primary-xs);

  /* ====== detail page end ======  */
  /* ====== result page start ======  */
  --bg-result-main: var(--color-fill-container-1);
  --padding-result-main: 0 0 34px;
  --bg-result-container: var(--color-fill-container-1);
  --bg-result-bottom: var(--color-fill-bg-1);
  --bg-result-order-detail: var(--color-fill-container-3);
  --padding-result-order-detail: 16px 30px;
  --margin-result-order-detail: 0 0 0 40px;
  --radius-result-order-detail: 8px;
  --bg-result-button-part: var(--color-fill-container-1);
  --bg-result-status-container: var(--color-fill-container-1);
  --padding-result-status-container: 1px 30px 64px 35px ;
  --color-result-email-title: var(--color-neutral-1);
  --color-result-email-title-xs: var(--color-neutral-1);
  --weight-result-email-title: 600;
  --weight-result-email-title-xs: 600;
  --weight-email-input: 600;
  --color-result-left-label: var(--color-neutral-2);
  --color-result-right-content: var(--color-neutral-1);
  --color-email-input:var(--color-neutral-1);
  --color-result-link: var(--color-primary);
  --color-cdk-title: var(--color-neutral-1);
  --color-cdk-time: var(--color-neutral-2);
  --color-cdk-value: var(--color-neutral-1);
  --margin-color-result-divide: 0 30px;
  --margin-how-to-use: 23px 30px 0 30px;
  --margin-how-to-use-xs:0;
  --color-how-to-use-title: var(--color-neutral-1);
  --color-how-to-use-title-xs: var(--color-neutral-1);
  --color-how-to-use-content: var(--color-neutral-3);
  --border-color-result-divide: var(--color-secondary-neutral-4);
  --border-color-result-pc-divide:var(--color-secondary-neutral-4);
  --bg-email-box:var(--color-white);
  --bg-out-email-box:var(--color-white);
  --bg-email-disable-box: transparent;
  --border-color-email-outer: var(--color-secondary-neutral-4);
  --border-color-email-button-before: var(--color-secondary-neutral-4);
  --radius-email-box: 12px;
  --radius-email-box-xs: 1.2rem;
  --border-email-disable-box-xs: 1px solid var(--color-secondary-neutral-4);
  --padding-email-container: 0 30px;
  --display-cdk-part-before: none;
  --url-cdk-part:url(https://img-cdn-sg.payermax.com/jm-site/brand/webadspace/cdk-bg.png);
  --padding-result-button-part:0 30px;
  --display-result-contact-us: none;
  --color-result-border-left: rgba(132, 140, 148, .3);
  --color-result-border-left-xs: rgba(132, 140, 148, .3);
  --color-status-name: var(--color-neutral-1);
  --color-result-step-container: var(--color-neutral-2);
  --border-color-circle-step-icon: var(--color-neutral-3);
  --url-result-step-done-icon:url(https://img-cdn-sg.payermax.com/jm-site/brand/webadspace/done.svg);
  --url-result-step-failed-icon:url(https://img-cdn-sg.payermax.com/jm-site/brand/webadspace/warning.svg);
  --url-result-step-success-icon:url(https://img-cdn-sg.payermax.com/jm-site/brand/webadspace/success.svg);
  --url-result-step-waiting-icon:url(https://img-cdn-sg.payermax.com/jm-site/brand/webadspace/pending.svg);
  --color-result-step-title: var(--color-neutral-2);
  --color-success-result-step-title: var(--color-neutral-2);
  --color-result-flex-container-title: var(--color-neutral-3);
  --border-result-flex-container: transparent;
  --bg-result-flex-container: transparent;
  --bg-result-flex-container-number: transparent;
  --color-order-number: var(--color-neutral-1);
  --padding-result-flex-container-title: 0 8px 0 0;
  --padding-result-flex-container-title-xs: 0 .4rem 0 0;
  --bg-guide-delivery-container:var(--color-white);
  --border-color-guide-delivery-container: var(--color-secondary-neutral-4);
  --radius-guide-delivery-container: 8px;
  --box-shadow-guide-delivery-container: none;
  --color-app-goods-info: var(--color-neutral-1);
  --weight-app-goods-info: 600;
  --border-color-gap-line: var(--color-neutral-4);
  --border-color-gap-line-light: var(--color-secondary-neutral-4);
  --color-guide-user-info-title: var(--color-neutral-3);
  --color-download-info-title: var(--color-neutral-3);
  --color-guide-user-info: var(--color-neutral-1);
  --color-download-info-content:var(--color-neutral-1);
  --color-status-user-info: var(--color-neutral-1);
  --radius-result-default-button: 8px;
  --radius-result-default-button-xs: .8rem;
  --border-color-result-default-button: var(--color-secondary-neutral-4);
  --color-result-default-button: var(--color-primary);
  --border-color-result-primary-button: var(--color-primary);
  --color-result-primary-button: var(--color-white);
  /* ====== result page end ======  */

  /* footer */
  --flex-direction-footer: column;
  --align-item-footer: flex-start;
  --align-item-footer-xs: flex-start;

  --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 12px;
  --padding-footer-locale-select-xs: 0.4rem 0.6rem;
  --border-color-footer-locale-select: var(--color-secondary-neutral-4);
  --border-radius-footer-locale-select: var(--border-radius-secondary);
  --border-radius-footer-locale-select-xs: var(--border-radius-secondary-xs);
  --color-text-footer-locale-select: var(--color-neutral-1);

  --border-color-footer-locale-select-icon: transparent;
  --width-footer-locale-select-icon: 20px;
  --width-footer-locale-select-icon-xs: 2rem;

  --margin-footer-copyright: 48px;
  --margin-footer-copyright-xs: 1.2rem;
  --text-align-footer-copyright-xs: left;
  --color-footer-email-text: var(--color-yellow-50);
  --color-footer-help-center-text: var(--color-primary);
  --color-footer-desc-text:var(--color-neutral-3);
  --color-footer-terms-policy-text:var(--color-neutral-1);
  /* promote code */
  --apply-primary-btn-color: var(--color-primary);
  --apply-primary-btn-radius: 8px;
  --apply-primary-btn-radius-xs: .8rem;
  --bg-promo-code-form-input: var(--color-neutral-1);
  --promo-code-form-input-color: var(--color-black);
  --promo-code-enter-border-radius-xs: .4rem;
  --promo-code-enter-border-radius: 4px;

  /* country-language-settings-drawer */
  --bg-country-language-settings-drawer-inner: var(--color-fill-container-1);
  --bg-country-language-settings-drawer-inner-actions: var(--color-fill-container-1);
  --color-country-language-settings-drawer-inner-confirm: var(--color-action);
  --color-country-language-settings-drawer-inner-cancel: var(--color-neutral-3);
  --bold-country-language-settings-drawer-inner-btn: bold;
  --color-country-language-settings-drawer-tab: var(--color-neutral-3);
  --color-country-language-settings-drawer-tab-selected: var(--color-neutral-1);
  --bg-country-language-settings-drawer-tabs:#F5F5FC;
  --mask-country-language-settings-drawer-inner: transparent;
  --bg-country-language-settings-drawer-tab-indicator: var(--color-action);
  --color-country-language-settings-column-item:var(--color-neutral-1);
  --border-color-country-language-settings-input: var(--color-secondary-neutral-4);
  --color-country-language-settings-input:var(--color-neutral-1);
  --bg-country-language-settings-input: var(--color-fill-container-1);
  --radius-country-language-settings-input: 4px;
  --bg-country-language-settings-dropdown: var(--color-fill-container-1);
  --color-country-language-settings-dropdown: var(--color-neutral-1);
  --bg-country-language-settings-selected-item: #FEEEE9;

  --bg-default-button: var(--color-fill-secondary-container-1);
  --border-color-default-button: var(--color-secondary-neutral-4);
  --color-default-button: var(--color-neutral-1);
  --bg-confirm-button: var(--color-primary);
  --radius-default-button: 4px;
  --radius-default-confirm-payment-button:4px;
  --color-intro-item-subTitle: var(--color-neutral-3);
  --color-intro-item-text: var(--color-neutral-1);
  --radius-banner-img-container: 4px;
  --radius-banner-img-container-xs: 4px;
  --color-pc-uid-container-desc: var(--color-neutral-1);

  --color-user-not-found-dlg-content: var(--color-neutral-2);
  --color-user-not-found-dlg-title: var(--color-neutral-1);
  --bg-user-not-found-dlg: var(--color-fill-container-1);
}