@charset "UTF-8";
body {
  font-family: "Roboto", sans-serif;
}

:root {
  --color-1: #294563;
  --color-2: #D22E50;
  --color-3: #3B9BD5;
  --color-4: #FF9100;
  --color-5: #019A2C;
  --color-6: #6A3407;
  --color-7: #FFFFFF;
  --color-8: #F9F9F9;
  --color-9: #EEEEEE;
  --color-10: #909090;
  --color-11: #353A3E;
  --color-12: #191919;
  --color-13: #FFFFFF;
  --color-14: #000000;
  --color-15: #EFF3F7;
  /*
  - Color-1: Primary (CTA, Text link,...)
  - Color-2: Secondary (Hover, Active,...)
  - Color-3: Title
  - Color-4: Sub title
  - Color-5: Caption
  - Color-6: Paragraph
  - Color-7: Nền 1
  - Color-8: Nền 2
  - Color-9: Nền 3
  - Color-10: Nền 4
  - Color-11: info
  - Color-12: error
  - Color-13: success
  - Color-14: warning
  Màu sắc (Sử dụng tối đa 14 màu, từ màu 10 - 14: Không thay đổi; các màu còn lại có thể áp dụng với các thành phần khác nhau theo phong cách thiết kế)
  */
  --fs-1: 2.5rem;
  --fs-2: 2rem;
  --fs-3: 1.75rem;
  --fs-4: 1.5rem;
  --fs-5: 1.25rem;
  --fs-6: 1rem;
  --fs-7: 0.875rem;
  --fs-8: 0.75rem;
  --fs-9: 0.625rem;
  --rounded-1: 1px;
  --rounded-2: 2px;
  --rounded-3: 3px;
  --rounded-4: 4px;
  --rounded-5: 5px;
  --rounded-6: 6px;
  --rounded-7: 7px;
  --rounded-8: 8px;
  --rounded-9: 9px;
  --rounded-10: 10px;
  --fw-1: 300;
  --fw-2: 400;
  --fw-3: 500;
  --fw-4: 600;
  --fw-5: 700;
  --fw-6: 800;
  --spacing-6: 80px;
}

.py-6 {
  padding-top: var(--spacing-6);
  padding-bottom: var(--spacing-6);
}

.fs-1 {
  font-size: var(--fs-1);
}
.fs-2 {
  font-size: var(--fs-2);
}
.fs-3 {
  font-size: var(--fs-3);
}
.fs-4 {
  font-size: var(--fs-4);
}
.fs-5 {
  font-size: var(--fs-5);
}
.fs-6 {
  font-size: var(--fs-6);
}
.fs-7 {
  font-size: var(--fs-7);
}
.fs-8 {
  font-size: var(--fs-8);
}
.fs-9 {
  font-size: var(--fs-9);
}

.fw-1 {
  font-weight: var(--fw-1);
}
.fw-2 {
  font-weight: var(--fw-2);
}
.fw-3 {
  font-weight: var(--fw-3);
}
.fw-4 {
  font-weight: var(--fw-4);
}
.fw-5 {
  font-weight: var(--fw-5);
}
.fw-6 {
  font-weight: var(--fw-6);
}

.color-1 {
  color: var(--color-1);
}
.color-2 {
  color: var(--color-2);
}
.color-3 {
  color: var(--color-3);
}
.color-4 {
  color: var(--color-4);
}
.color-5 {
  color: var(--color-5);
}
.color-6 {
  color: var(--color-6);
}
.color-7 {
  color: var(--color-7);
}
.color-8 {
  color: var(--color-8);
}
.color-9 {
  color: var(--color-9);
}
.color-10 {
  color: var(--color-10);
}
.color-11 {
  color: var(--color-11);
}
.color-12 {
  color: var(--color-12);
}
.color-13 {
  color: var(--color-13);
}
.color-14 {
  color: var(--color-14);
}
.color-15 {
  color: var(--color-15);
}

.bg-color-1 {
  background-color: var(--color-1);
}
.bg-color-2 {
  background-color: var(--color-2);
}
.bg-color-3 {
  background-color: var(--color-3);
}
.bg-color-4 {
  background-color: var(--color-4);
}
.bg-color-5 {
  background-color: var(--color-5);
}
.bg-color-6 {
  background-color: var(--color-6);
}
.bg-color-7 {
  background-color: var(--color-7);
}
.bg-color-8 {
  background-color: var(--color-8);
}
.bg-color-9 {
  background-color: var(--color-9);
}
.bg-color-10 {
  background-color: var(--color-10);
}
.bg-color-11 {
  background-color: var(--color-11);
}
.bg-color-12 {
  background-color: var(--color-12);
}
.bg-color-13 {
  background-color: var(--color-13);
}
.bg-color-14 {
  background-color: var(--color-14);
}
.bg-color-15 {
  background-color: var(--color-15);
}

.border-color-1 {
  border-color: var(--color-1);
}
.border-color-2 {
  border-color: var(--color-2);
}
.border-color-3 {
  border-color: var(--color-3);
}
.border-color-4 {
  border-color: var(--color-4);
}
.border-color-5 {
  border-color: var(--color-5);
}
.border-color-6 {
  border-color: var(--color-6);
}
.border-color-7 {
  border-color: var(--color-7);
}
.border-color-8 {
  border-color: var(--color-8);
}
.border-color-9 {
  border-color: var(--color-9);
}
.border-color-10 {
  border-color: var(--color-10);
}
.border-color-11 {
  border-color: var(--color-11);
}
.border-color-12 {
  border-color: var(--color-12);
}
.border-color-13 {
  border-color: var(--color-13);
}
.border-color-14 {
  border-color: var(--color-14);
}
.border-color-15 {
  color: var(--color-15);
}

.rounded-1 {
  border-radius: var(--rounded-1);
}
.rounded-2 {
  border-radius: var(--rounded-2);
}
.rounded-3 {
  border-radius: var(--rounded-3);
}
.rounded-4 {
  border-radius: var(--rounded-4);
}
.rounded-5 {
  border-radius: var(--rounded-5);
}
.rounded-6 {
  border-radius: var(--rounded-6);
}
.rounded-7 {
  border-radius: var(--rounded-7);
}
.rounded-8 {
  border-radius: var(--rounded-8);
}
.rounded-9 {
  border-radius: var(--rounded-9);
}
.rounded-10 {
  border-radius: var(--rounded-10);
}

h1.title {
  color: var(--color-1);
  font-size: var(--fs-1);
}

h2.title {
  color: var(--color-1);
  font-size: var(--fs-1);
}

h3.title {
  color: var(--color-1);
  font-size: var(--fs-1);
}

h4.title {
  color: var(--color-1);
  font-size: var(--fs-1);
}

h5.title {
  color: var(--color-1);
  font-size: var(--fs-1);
}

h6.title {
  color: var(--color-1);
  font-size: var(--fs-1);
}

.btn--color-1 {
  background-color: var(--color-1);
  color: var(--color-2);
  border-color: var(--color-1);
}
.btn--color-1:hover {
  background-color: var(--color-1);
  color: var(--color-2);
  border-color: var(--color-1);
}
.btn--color-1.active {
  background-color: var(--color-1);
  color: var(--color-2);
  border-color: var(--color-1);
}

.color-hover-1:hover {
  color: var(--color-1) !important;
}