@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* CSS Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

html {
  /* Ẩn thanh cuộn dọc trên mọi trình duyệt */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}

/* Ẩn thanh cuộn trên Chrome, Safari và Edge */
html::-webkit-scrollbar {
  display: none;
}

body {
  margin: 0;
  font-family: var(--font-family-text);
  line-height: 1.5;
  background-color: var(--global-neutral-200);
  
  /* Ẩn thanh cuộn dọc trên mọi trình duyệt */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}

/* Ẩn thanh cuộn trên Chrome, Safari và Edge */
body::-webkit-scrollbar {
  display: none;
}

main {
  display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
  max-width: 100%;
  height: auto;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
  all:unset;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* TOKENS */
:root {
  /* Global Primary Color Tokens */
  --global-primary-50: #E8E8E9;
  --global-primary-100: #D0D1D3;
  --global-primary-200: #A1A3A7;
  --global-primary-300: #73757A;
  --global-primary-400: #44474E;
  --global-primary-500: #151922;
  --global-primary-600: #12151C;
  --global-primary-700: #0E1117;
  --global-primary-800: #0B0D11;
  --global-primary-900: #07080B;
  --global-primary-950: #050609;

  /* Global Secondary Color Tokens */
  --global-secondary-50: #FDFDFC;
  --global-secondary-100: #FCFCFA;
  --global-secondary-200: #F9F8F5;
  --global-secondary-300: #F9F8F5;
  --global-secondary-400: #F5F5EF;
  --global-secondary-500: #EFEEE5;
  --global-secondary-600: #C7C6BF;
  --global-secondary-700: #9F9F99;
  --global-secondary-800: #787773;
  --global-secondary-900: #504F4C;
  --global-secondary-950: #3C3C39;

  /* Global Neutral Color Tokens */
  --global-neutral-50: #FFFDFA;
  --global-neutral-100: #FEFCF5;
  --global-neutral-200: #FEF9EA;
  --global-neutral-300: #FDF5E0;
  --global-neutral-400: #FDF2D5;
  --global-neutral-500: #FCEFCB;
  --global-neutral-600: #D2C7A9;
  --global-neutral-700: #A89F87;
  --global-neutral-800: #7E7866;
  --global-neutral-900: #545044;
  --global-neutral-950: #3F3C33;

  /* Typography Tokens - Display */
  --font-family-display: 'Playfair Display', serif;

  /* Display 60 */
  --Display-60-Reg: 400 60px/1.2 var(--font-family-display);
  --Display-60-Med: 500 60px/1.2 var(--font-family-display);
  --Display-60-Bold: 700 60px/1.2 var(--font-family-display);

  /* Display 48 */
  --Display-48-Reg: 400 48px/1.2 var(--font-family-display);
  --Display-48-Med: 500 48px/1.2 var(--font-family-display);
  --Display-48-Bold: 700 48px/1.2 var(--font-family-display);

  /* Display 36 */
  --Display-36-Reg: 400 36px/1.2 var(--font-family-display);
  --Display-36-Med: 500 36px/1.2 var(--font-family-display);
  --Display-36-Bold: 700 36px/1.2 var(--font-family-display);

  /* Display 30 */
  --Display-30-Reg: 400 30px/1.2 var(--font-family-display);
  --Display-30-Med: 500 30px/1.2 var(--font-family-display);
  --Display-30-Bold: 700 30px/1.2 var(--font-family-display);
   
  /* Display 18 */
  --Display-18-Reg: 400 18px/1.2 var(--font-family-display);
  --Display-18-Med: 500 18px/1.2 var(--font-family-display);
  --Display-18-Bold: 700 18px/1.2 var(--font-family-display);

  /* Display 20 */
  --Display-20-Reg: 400 20px/1.2 var(--font-family-display);
  --Display-20-Med: 500 20px/1.2 var(--font-family-display);
  --Display-20-Bold: 700 20px/1.2 var(--font-family-display);

  /* Display 24 */
  --Display-24-Reg: 400 24px/1.2 var(--font-family-display);
  --Display-24-Med: 500 24px/1.2 var(--font-family-display);
  --Display-24-Bold: 700 24px/1.2 var(--font-family-display);
/* Display 16 */
--Display-16-Reg: 400 16px/1.2 var(--font-family-display);
--Display-16-Med: 500 16px/1.2 var(--font-family-display);
--Display-16-Bold: 700 16px/1.2 var(--font-family-display);
  
/* Typography Tokens - Text */
  --font-family-text: 'Poppins', sans-serif;

  /* Text 24 */
  --Text-24-Reg: 400 24px/1.5 var(--font-family-text);
  --Text-24-Med: 500 24px/1.5 var(--font-family-text);
  --Text-24-Bold: 700 24px/1.5 var(--font-family-text);

  /* Text 20 */
  --Text-20-Reg: 400 20px/1.5 var(--font-family-text);
  --Text-20-Med: 500 20px/1.5 var(--font-family-text);
  --Text-20-Bold: 700 20px/1.5 var(--font-family-text);

  /* Text 18 */
  --Text-18-Reg: 400 18px/1.5 var(--font-family-text);
  --Text-18-Med: 500 18px/1.5 var(--font-family-text);
  --Text-18-Bold: 700 18px/1.5 var(--font-family-text);

  /* Text 16 */
  --Text-16-Reg: 400 16px/1.5 var(--font-family-text);
  --Text-16-Med: 500 16px/1.5 var(--font-family-text);
  --Text-16-Bold: 700 16px/1.5 var(--font-family-text);

  /* Text 14 */
  --Text-14-Reg: 400 14px/1.5 var(--font-family-text);
  --Text-14-Med: 500 14px/1.5 var(--font-family-text);
  --Text-14-Bold: 700 14px/1.5 var(--font-family-text);

  /* Text 13 */
  --Text-13-Reg: 400 13px/1.5 var(--font-family-text);
  --Text-13-Med: 500 13px/1.5 var(--font-family-text);

  /* Text 12 */
  --Text-12-Reg: 400 12px/1.5 var(--font-family-text);
  --Text-12-Med: 500 12px/1.5 var(--font-family-text);
}