html {
box-sizing: border-box;
font-size: 62.5%;
font-size-adjust: 0.53;
height: 100%;
}
:root {
/*
replace font family and font weight
*/
--font-body-family: 'Nunito', sans-serif;
--font-body-weight: 400;
--font-headings-family: 'Baloo 2', sans-serif;
--font-headings-weight: 700;
/* For text color */
--color-foreground: #4A4452;
/* For background color */
--color-background: #FFFFFF;
--color-background-body: #FFFFFF;
/* For primary color : button, link */
--color-primary: #F2487A;
--color-menu-highlight: #F2487A;
--color-primary-rgb: 242, 72, 122; /* RGB of brand primary #F2487A - used by rgba() shadows */
--color-highlight: #F2487A;
/* base on design */
--color-secondary: #14A39A;
--color-link: #D92F63 ;
/* For cta color */
--color-accent: #FDE3EA; /* hồng pastel */
--coll-bg-hover: #F2487A;
--color-neutral-50 : #F6EEE6;
--color-neutral-100 : #E4D8CC;
--color-neutral-200 : #726760;
--color-neutral-300 : #6B5F58;
--color-neutral-400 : #464646;
/* For line border color or shadow color */
--color-label: var(--color-neutral-200);
--color-price: #D92F63;
--color-price-compare: #6F6A7A;
--color-sale-bg: #F2487A;
--color-sale: #FFFFFF;
--color-addtocart: #FFFFFF;
--color-addtocart-bg: #F2487A;
/* Coupon item colors — global so items render with merchant settings everywhere (homepage section + product drawer) */
--coupon-active-bg: #ffffff;
--coupon-badge-color: #F2487A;
--coupon-active-title: #1A1A1A;
--coupon-active-desc: #666666;
--coupon-active-button-bg: #F2487A;
--coupon-active-button-text: #FFFFFF;
--color-button-primary: #F2487A;
--color-button-primary-text: #FFFFFF;
--color-footer: #2B2D52;
--color-footer-text: #FFFFFF;
--color-footer-hover: #FFC94D;
/* For error state */
--color-error: #EE1926;
/* For success state */
--color-success: #2BAD14 ;
/* For warning state */
--color-warning: #F2BC1B;
/* header */
--color-header: var(--color-foreground);
--color-header-bg: var(--color-background);
--header-height: 7rem;
--logo-width : 16rem;
--color-cart-bubble: #FFFFFF;
--color-cart-bubble-bg: var(--color-primary);
--color-search: var(--color-primary);
--color-transparent-header: #ffffff;
/* 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: 1.2rem;
--rounded-lg: calc( var(--rounded) * 1.5 );
--rounded-md: calc( var(--rounded) * 1 );
--rounded-sm: calc( var(--rounded) / 2 );
--rounded-xs: calc( var(--rounded) / 4 );
--rounded-full: 9999px;
--rounded-button: 9999px;
--rounded-input: 12px;
/* Bo góc thẻ sản phẩm - điều khiển bởi thiết lập, mặc định 0 (không bo góc) */
--product-card-rounded: 16px;
/* 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-width: 100%;
--container-padding: var(--spacing-3);
--grid-gutter: var(--spacing-6);
--shadow-l: 0px 2rem 4.8rem 0px rgba(51, 51, 51, 0.20);
--navigation-width: 40rem;
--product-aspect-ratio: 4/5;
--blogs-aspect-ratio: 4/3;
--swatch-xanh-duong: #232fff;
--swatch-hong: #f98bee;
--swatch-den: #000000;
--swatch-trang: #FFFFFF;
--swatch-xanh-den: #12293D;
--swatch-do: #f21b4a;
--swatch-kem: #f9fcdc;
--swatch-nau: #886e5d;
--swatch-xam: #ccc5c0;
--swatch-tim: #d626eb;
--swatch-xanh-la: #99f98b;
--swatch-vang: #eef95a;
--swatch-cam: #f4cc3b;
}
@media(max-width: 767px){
:root {
--logo-width: 15rem;
--header-height: 6.8rem
}
}
body {
grid-template-columns: 100%;
min-height: 100%;
margin: 0;
font-size: var(--font-size-body);
letter-spacing: -0.004em;
line-height: calc( 20 / 14 );
font-family: var(--font-body-family);
font-weight: var(--font-body-weight);
background-color: var(--color-background-body);
color: var(--color-foreground);
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
scroll-behavior: smooth;
}
.section {
padding: var(--section-padding, 0);
margin: var(--section-margin, 2rem 0 0 0);
}
@media(max-width: 767px){
.section {
padding: var(--section-padding-mb,0);
margin: var(--section-margin-mb, 2rem 0 0 0);
}
}
@media (min-width: 1200px) {
:root {
--container-width: 1200px
}
}
@media (min-width: 1440px) {
:root {
--container-width: 1440px
}
.container {
padding: 0 6rem;
}
}
/* Only section headlines use the heading font; all other text inherits the body font */
.heading, .section-heading, .flashsale-heading {
font-family: var(--font-headings-family);
}