/* 1. Inter Regular (Cơ bản) - Weight 400 */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter_28pt-Italic.woff2") format("woff2");
  font-style: italic;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter_28pt-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 2. Inter Medium (Vừa) - Weight 500 */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter_28pt-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* 3. Inter SemiBold (Bán đậm) - Weight 600 */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter_28pt-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* 4. Inter Bold (Đậm) - Weight 700 */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter_28pt-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 5. Inter ExtraBold (Rất đậm) - Weight 800 */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter_28pt-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* 6. Inter Black (Siêu đậm) - Weight 900 */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter_28pt-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
/* 1. Light (200 hoặc 300) */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto/Roboto-ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

/* 2. Regular (400) */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto/Roboto-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 3. Italic */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto/Roboto-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* 4. Medium (500) */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto/Roboto-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* 5. SemiBold (600) */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto/Roboto-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* 6. Bold (700) */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto/Roboto-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 7. ExtraBold (800) */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto/Roboto-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-main: "Inter";
	--second-font: "Roboto";
  /* Colors */
  --color-primary: #ffffff;
  --color-secondary: #1173d4;
  --color-text: #111111;
  /* Màu chữ */
  --color-text-secondary: #333333;
  --color-text-red: #e41b21;
  --color-text-white: #ffffff;
  --color-bg-main: #ffffff;
  --color-bg-light: #f5f5f5;
  --color-bg-btn: #e41b21;

  --space-1: 0.25rem;
  /* 4px */
  --space-2: 0.5rem;
  /* 8px */
  --space-3: 0.75rem;
  /* 12px */
  --space-4: 1rem;
  /* 16px - Đơn vị chuẩn */
  --space-5: 1.5rem;
  /* 24px */
  --space-6: 2rem;
  /* 32px */
  --space-8: 3rem;
  /* 48px */
  --space-10: 4rem;
  /* 64px */

  /* Base size */
  --text-2xs: 0.6875rem;
  /* 11px */
  --text-xs: 0.75rem;
  /* 12px */
  --text-13: 0.8125rem;
  /* 13px */
  --text-sm: 0.875rem;
  /* 14px */
  --text-base: 1rem;
  /* 16px */
  --text-lg: 1.125rem;
  /* 18px */
  --text-xl: 1.25rem;
  /* 20px */
  --text-2xl: 1.563rem;
  /* 25px */
  --text-3xl: 1.953rem;
  /* 31px */
  --text-34: 2.125rem;
  /* 34px */
  --text-4xl: 2.441rem;
  /* 39px */
  --text-40: 2.5rem;
  /* 40px */
  --text-5xl: 3.052rem;
  /* 49px */

  /* Border Radius */
  --radius-sm: 4px;
  /* Small - buttons, inputs */
  --radius-md: 10px;
  /* Medium - cards */
  --radius-lg: 12px;
  /* Large - containers */
  --radius-xl: 16px;
  /* Extra large - sections */
  --radius-2xl: 18px;
  /* 2X large - hero cards */
  --radius-3xl: 20px;
  /* 3X large - major sections */
  --radius-pill: 999px;
  /* Pills and circles */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
}

body {
  font-family: var(--font-main) !important;
  line-height: 1.6;

  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tự động gán size cho các thẻ Heading */
h1 {
  text-transform: uppercase;
  font-size: clamp(50px, 5vw, 72px);
  color: var(--color-text-white) !important;
  line-height: 1.2;
}

h2 {
  font-size: var(--text-4xl);
  color: var(--color-text) !important;
}

h3 {
  font-size: var(--text-3xl);
  color: var(--color-text-secondary) !important;
}

h4 {
  font-size: var(--text-2xl);
  color: var(--color-text-secondary) !important;
}

h5 {
  font-size: var(--text-xl);
  color: var(--color-text-secondary) !important;
}

h6 {
  color: var(--color-text-secondary) !important;
  font-size: var(--text-lg);
}

small,
.text-small {
  font-size: var(--text-sm);
  /* 14px */
}

.btn-common {
  color: var(--color-text-white);
  border-radius: var(--radius-sm);
  padding-top: 5px;
  padding-bottom: 5px;
  box-shadow: 0 0 1px 0.5px;
}

.desc {
  font-size: clamp(14px, 2vw, 16px);
}

.head-small-text {
  color: var(--color-text-red);
  font-size: var(--text-sm);
  font-weight: bold;
  letter-spacing: 2.8px;
}