html {
  font-size: 62.5%;
}
:root {
    /*
    replace font family and font weight
    */
    --font-body-family: 'asap', sans-serif;
    --font-body-weight: 400;
    --font-headings-family: 'Roboto', sans-serif;
    --font-headings-weight: 700;

    /* For text color */
    --color-foreground: #212121;

    /* For background color */
    --color-background: #FFFFFF;

    --color-background-body: #f2f4f7;

    /* For primary color : button, link  */

    --color-primary: #FF8662;

    /* base on design  */
    --color-secondary: #FF8662;

    --color-link:  #ff9d02 ;
    /* For cta color */
    --color-accent: #FFE711;

    --color-neutral-50 : #EBEBEB;
    --color-neutral-100 : #BFBFBF;
    --color-neutral-200 : #999999;
    --color-neutral-300 : #666666;
    --color-neutral-400 : #464646;


    /* For line border color or shadow color */
    --color-label: var(--color-neutral-200);
    --color-price:  #ff3c02;
    --color-price-compare: #929292;
    --color-sale-bg: #ee1926;
    --color-sale: #ffffff;
    --color-addtocart: #ffffff;
    --color-addtocart-bg: #ff3c02;
    --color-coupon-primary: #2a83e9;
    --color-coupon-secondary: #212121;

    /* For error state */
    --color-error: #EE1926;

    /* For success state */
    --color-success: #2BAD14 ;

    /* For warning state */
    --color-warning: #F2BC1B;

    /* header */
    --header-live-color: #ff0000;
    --color-header: var(--color-foreground);
    --color-header-bg:  var(--color-background);
    --header-height: 8.4rem;
    --logo-width : 20.4rem;
    --color-cart-bubble: #FFFFFF;
    --color-cart-bubble-bg: #EE1926;
    --color-search: var(--color-primary);
    --color-sub-header-bg: #284ea1;
    --color-sub-header: #ffffff;
    --color-sub-header-link: #faa634;

    /* Font size for body text */
    --font-size-body: 1.6rem;

    /* Font size for text h1 - h6 */
    --font-size-h1: 4.8rem;
    --font-size-h2: 4rem;
    --font-size-h3: 3.2rem;
    --font-size-h4: 2.8rem;
    --font-size-h5: 2rem;
    --font-size-h6: 1.6rem;

    /*  if any title different
    --font-title-1: 3rem;
    --font-title-2: 2.25rem;
    */

    /* Rounded config */
    --rounded: 0.8rem;
    --rounded-lg: calc( var(--rounded) * 1.5 );
    --rounded-sm: calc( var(--rounded) / 2 );
    --rounded-xs: calc( var(--rounded) / 4 );
    --rounded-full: 9999px;

    --rounded-button: 0.4rem;
    --rounded-input: 0.4rem;



    /* Spacing */

    /**
    * ---------------------------------------------------------------------
    * SPACING VARIABLES
    *
    * We are using a spacing inspired from frameworks like Tailwind CSS.
    * ---------------------------------------------------------------------
    */
    --spacing-0-5: 0.2rem; /* 2px */
    --spacing-1: 0.4rem; /* 4px */
    --spacing-1-5: 0.6rem; /* 6px */
    --spacing-2: 0.8rem; /* 8px */
    --spacing-2-5: 1rem; /* 10px */
    --spacing-3: 1.2rem; /* 12px */
    --spacing-3-5: 1.4rem; /* 14px */
    --spacing-4: 1.6rem; /* 16px */
    --spacing-4-5: 1.8rem; /* 18px */
    --spacing-5: 2rem; /* 20px */
    --spacing-5-5: 2.2rem; /* 22px */
    --spacing-6: 2.4rem; /* 24px */
    --spacing-6-5: 2.6rem; /* 26px */
    --spacing-7: 2.8rem; /* 28px */
    --spacing-7-5: 3rem; /* 30px */
    --spacing-8: 3.2rem; /* 32px */
    --spacing-8-5: 3.4rem; /* 34px */
    --spacing-9: 3.6rem; /* 36px */
    --spacing-9-5: 3.8rem; /* 38px */
    --spacing-10: 4rem; /* 40px */
    --spacing-11: 4.4rem; /* 44px */
    --spacing-12: 4.8rem; /* 48px */
    --spacing-14: 5.6rem; /* 56px */
    --spacing-16: 6.4rem; /* 64px */
    --spacing-18: 7.2rem; /* 72px */
    --spacing-20: 8rem; /* 80px */
    --spacing-24: 9.6rem; /* 96px */

    /* Container */

    --container-padding: var(--spacing-3);
    --grid-gutter: var(--spacing-2);

    --shadow-l: 0px 2rem 4.8rem 0px rgba(51, 51, 51, 0.20);
    --navigation-width: 40rem;

    --product-aspect-ratio: 1/1;




    --swatch-den: #000000;

    --swatch-trang: #FFFFFF;

    --swatch-xanh-duong: #0000FF;

    --swatch-nau: #A52A2A;

    --swatch-xanh-la: #7FFF00;

    --swatch-socola: #D2691E;

    --swatch-hong: #FF00FF;

    --swatch-vang: #FFD700;

    --swatch-xam: #808080;

    --swatch-xanh-la: #00FF00;

    --swatch-hong: #FF00FF;

    --swatch-do-cam: #FFE4B5;

    --swatch-do: #FF0000;

    --swatch-o-liu: #808000;

    --swatch-cam: #FFA500;

    --swatch-hong: #FFC0CB;

    --swatch-tim: #DDA0DD;

    --swatch-xanh-ngoc: #40E0D0;
}

a{
  color: unset;
}

.page-content a{
  text-decoration: none !important;
}

ul{
  list-style: none;
}

.none-margin-p p{
  margin:  0 !important;
}

.reset_btn{
  border: none;
  background-color: transparent;
}

.f-width{width: 100%;}

.reset_btn:hover, .reset_btn:focus{
  border: none;
  background-color: transparent;
}

.btn{
  font-size: 16px;
  color: #000;
  border: 1px solid #EBEBEB;
  border-radius: 4px;
  background-color: #fff;
}

.btn:hover, .btn:focus{
  background-color: transparent;
}

ins, del {
  text-decoration: none;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}