@charset "UTF-8";
:root {
  --day:#F89B28;
  --day-w:#FFF2C9;
  --tommorow:#395F18;
  --tommorow-w:#FEFFC4;
  --sefl:#0B4A3B;
  --sefl-w:#FFD15C;
  --down:#395F18;
  --down-w:#FEF6C7;
  --work:#51A7BF;
  --work-w:#DAF4FF;
  --go:#662C1B;
  --go-w:#FFD15C;
  --pink:#FF7973;
  --pink-w:#FDEBEC;

  --color-white:#FFFFFF;

  --primary-500:#0066ff;  
  --primary-300:#6699ff;
  --primary-200:#ccffff;
}

/* Các lớp offset và ordering giúp bạn điều chỉnh vị trí của các cột trong một hàng */
/* Lớp container, row, và col */
/* Container classes */
.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

/* Container responsive for various breakpoints */
.container-sm {
  max-width: 540px;
}

.container-md {
  max-width: 720px;
}

.container-lg {
  max-width: 960px;
}

.container-xl {
  max-width: 1140px;
}

.container-xxl {
  max-width: 1320px;
}

/* Row classes */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.row-cols-1 {
  --bs-columns: 1;
}

.row-cols-2 {
  --bs-columns: 2;
}

.row-cols-3 {
  --bs-columns: 3;
}

.row-cols-4 {
  --bs-columns: 4;
}

.row-cols-5 {
  --bs-columns: 5;
}

.row-cols-6 {
  --bs-columns: 6;
}

.row-cols-7 {
  --bs-columns: 7;
}

.row-cols-8 {
  --bs-columns: 8;
}

.row-cols-9 {
  --bs-columns: 9;
}

.row-cols-10 {
  --bs-columns: 10;
}

.row-cols-11 {
  --bs-columns: 11;
}

.row-cols-12 {
  --bs-columns: 12;
}

/* Basic column classes */
.col {
  flex: 0 0 auto;
  width: 100%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
}

/* Column size classes for different breakpoints */
.col-1 {
  flex: 0 0 auto;
  width: 8.33333%;
}

.col-2 {
  flex: 0 0 auto;
  width: 16.66667%;
}

.col-3 {
  flex: 0 0 auto;
  width: 25%;
}

.col-4 {
  flex: 0 0 auto;
  width: 33.33333%;
}

.col-5 {
  flex: 0 0 auto;
  width: 41.66667%;
}

.col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.col-7 {
  flex: 0 0 auto;
  width: 58.33333%;
}

.col-8 {
  flex: 0 0 auto;
  width: 66.66667%;
}

.col-9 {
  flex: 0 0 auto;
  width: 75%;
}

.col-10 {
  flex: 0 0 auto;
  width: 83.33333%;
}

.col-11 {
  flex: 0 0 auto;
  width: 91.66667%;
}

.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

/* Column classes for different screen sizes */
.col-sm-1 {
  width: 8.33333%;
}

.col-sm-2 {
  width: 16.66667%;
}

.col-sm-3 {
  width: 25%;
}

.col-sm-4 {
  width: 33.33333%;
}

.col-sm-5 {
  width: 41.66667%;
}

.col-sm-6 {
  width: 50%;
}

.col-sm-7 {
  width: 58.33333%;
}

.col-sm-8 {
  width: 66.66667%;
}

.col-sm-9 {
  width: 75%;
}

.col-sm-10 {
  width: 83.33333%;
}

.col-sm-11 {
  width: 91.66667%;
}

.col-sm-12 {
  width: 100%;
}

/* Similar classes for larger screen sizes */
.col-md-1 {
  width: 8.33333%;
}

.col-md-2 {
  width: 16.66667%;
}

.col-md-3 {
  width: 25%;
}

.col-md-4 {
  width: 33.33333%;
}

.col-md-5 {
  width: 41.66667%;
}

.col-md-6 {
  width: 50%;
}

.col-md-7 {
  width: 58.33333%;
}

.col-md-8 {
  width: 66.66667%;
}

.col-md-9 {
  width: 75%;
}

.col-md-10 {
  width: 83.33333%;
}

.col-md-11 {
  width: 91.66667%;
}

.col-md-12 {
  width: 100%;
}

/* For large screens */
.col-lg-1 {
  width: 8.33333%;
}

.col-lg-2 {
  width: 16.66667%;
}

.col-lg-3 {
  width: 25%;
}

.col-lg-4 {
  width: 33.33333%;
}

.col-lg-5 {
  width: 41.66667%;
}

.col-lg-6 {
  width: 50%;
}

.col-lg-7 {
  width: 58.33333%;
}

.col-lg-8 {
  width: 66.66667%;
}

.col-lg-9 {
  width: 75%;
}

.col-lg-10 {
  width: 83.33333%;
}

.col-lg-11 {
  width: 91.66667%;
}

.col-lg-12 {
  width: 100%;
}

/* Offset classes */
.offset-1 {
  margin-left: 8.33333%;
}

.offset-2 {
  margin-left: 16.66667%;
}

.offset-3 {
  margin-left: 25%;
}

.offset-4 {
  margin-left: 33.33333%;
}

.offset-5 {
  margin-left: 41.66667%;
}

.offset-6 {
  margin-left: 50%;
}

.offset-7 {
  margin-left: 58.33333%;
}

.offset-8 {
  margin-left: 66.66667%;
}

.offset-9 {
  margin-left: 75%;
}

.offset-10 {
  margin-left: 83.33333%;
}

.offset-11 {
  margin-left: 91.66667%;
}

/* Similar classes for different screen sizes (sm, md, lg) */
.offset-sm-1 {
  margin-left: 8.33333%;
}

.offset-md-1 {
  margin-left: 8.33333%;
}

.offset-lg-1 {
  margin-left: 8.33333%;
}

/* Margin : Khoảng cách ngoài */
/* Margin classes */
.m-0 {
  margin: 0;
}

.m-1 {
  margin: 0.25rem;
}

.m-2 {
  margin: 0.5rem;
}

.m-3 {
  margin: 1rem;
}

.m-4 {
  margin: 1.5rem;
}

.m-5 {
  margin: 3rem;
}

.m-auto {
  margin: auto;
}

/* Margin top */
.mt-0 {
  margin-top: 0;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 1rem;
}

.mt-4 {
  margin-top: 1.5rem;
}

.mt-5 {
  margin-top: 3rem;
}

/* Margin bottom */
.mb-0 {
  margin-bottom: 0;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 1rem;
}

.mb-4 {
  margin-bottom: 1.5rem;
}

.mb-5 {
  margin-bottom: 3rem;
}

/* Margin left */
.ml-0 {
  margin-left: 0;
}

.ml-1 {
  margin-left: 0.25rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-3 {
  margin-left: 1rem;
}

.ml-4 {
  margin-left: 1.5rem;
}

.ml-5 {
  margin-left: 3rem;
}

/* Margin right */
.mr-0 {
  margin-right: 0;
}

.mr-1 {
  margin-right: 0.25rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mr-3 {
  margin-right: 1rem;
}

.mr-4 {
  margin-right: 1.5rem;
}

.mr-5 {
  margin-right: 3rem;
}

/* Horizontal margin (left and right) */
.mx-0 {
  margin-left: 0;
  margin-right: 0;
}

.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.mx-3 {
  margin-left: 1rem;
  margin-right: 1rem;
}

.mx-4 {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.mx-5 {
  margin-left: 3rem;
  margin-right: 3rem;
}

/* Vertical margin (top and bottom) */
.my-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.my-3 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.my-4 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.my-5 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

/* Padding classes */
.p-0 {
  padding: 0;
}

.p-1 {
  padding: 0.25rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-3 {
  padding: 1rem;
}

.p-4 {
  padding: 1.5rem;
}

.p-5 {
  padding: 3rem;
}

/* Padding top */
.pt-0 {
  padding-top: 0;
}

.pt-1 {
  padding-top: 0.25rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-3 {
  padding-top: 1rem;
}

.pt-4 {
  padding-top: 1.5rem;
}

.pt-5 {
  padding-top: 3rem;
}

/* Padding bottom */
.pb-0 {
  padding-bottom: 0;
}

.pb-1 {
  padding-bottom: 0.25rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-3 {
  padding-bottom: 1rem;
}

.pb-4 {
  padding-bottom: 1.5rem;
}

.pb-5 {
  padding-bottom: 3rem;
}

/* Padding left */
.pl-0 {
  padding-left: 0;
}

.pl-1 {
  padding-left: 0.25rem;
}

.pl-2 {
  padding-left: 0.5rem;
}

.pl-3 {
  padding-left: 1rem;
}

.pl-4 {
  padding-left: 1.5rem;
}

.pl-5 {
  padding-left: 3rem;
}

/* Padding right */
.pr-0 {
  padding-right: 0;
}

.pr-1 {
  padding-right: 0.25rem;
}

.pr-2 {
  padding-right: 0.5rem;
}

.pr-3 {
  padding-right: 1rem;
}

.pr-4 {
  padding-right: 1.5rem;
}

.pr-5 {
  padding-right: 3rem;
}

/* Horizontal padding (left and right) */
.px-0 {
  padding-left: 0;
  padding-right: 0;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-3 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-4 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-5 {
  padding-left: 3rem;
  padding-right: 3rem;
}

/* Vertical padding (top and bottom) */
.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-3 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-4 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-5 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

/* Margin classes */
.m-0 {
  margin: 0;
}

.m-1 {
  margin: 0.25rem;
}

.m-2 {
  margin: 0.5rem;
}

.m-3 {
  margin: 1rem;
}

.m-4 {
  margin: 1.5rem;
}

.m-5 {
  margin: 3rem;
}

.m-auto {
  margin: auto;
}

/* Margin top */
.mt-0 {
  margin-top: 0;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 1rem;
}

.mt-4 {
  margin-top: 1.5rem;
}

.mt-5 {
  margin-top: 3rem;
}

/* Margin bottom */
.mb-0 {
  margin-bottom: 0;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 1rem;
}

.mb-4 {
  margin-bottom: 1.5rem;
}

.mb-5 {
  margin-bottom: 3rem;
}

/* Margin left */
.ml-0 {
  margin-left: 0;
}

.ml-1 {
  margin-left: 0.25rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-3 {
  margin-left: 1rem;
}

.ml-4 {
  margin-left: 1.5rem;
}

.ml-5 {
  margin-left: 3rem;
}

/* Margin right */
.mr-0 {
  margin-right: 0;
}

.mr-1 {
  margin-right: 0.25rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mr-3 {
  margin-right: 1rem;
}

.mr-4 {
  margin-right: 1.5rem;
}

.mr-5 {
  margin-right: 3rem;
}

/* Horizontal margin (left and right) */
.mx-0 {
  margin-left: 0;
  margin-right: 0;
}

.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.mx-3 {
  margin-left: 1rem;
  margin-right: 1rem;
}

.mx-4 {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.mx-5 {
  margin-left: 3rem;
  margin-right: 3rem;
}

/* Vertical margin (top and bottom) */
.my-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.my-3 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.my-4 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.my-5 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}