:root {

  --primaryColor: #2b5223;

  --secondaryColor: #de9341;

  --primaryDarkTextColor: #000;

  --primaryLightTextColor: #fff;

  --secondaryDarkTextColor: #000;

  --secondaryLightTextColor: #fff;

}

.primary-color {

  color: var(--primaryColor) !important;

}

.secondary-color {

  color: var(--secondaryColor) !important;

}



.btn:focus {

  box-shadow: none;

}

.btn {

  font-size: inherit;

}

.form-control:focus {

  box-shadow: none;

}

.form-control {

  font-size: inherit;

}



.bg-gradient-primary {

  --angle: 180deg;

  --colorFrom: #fff;

  --colorTo: #a3d95a;

  background: var(--colorFrom);

  background: -moz-linear-gradient(

    var(--angle),

    var(--colorFrom) 0%,

    var(--colorFrom) 30%,

    var(--colorTo) 100%

  );

  background: -webkit-linear-gradient(

    var(--angle),

    var(--colorFrom) 0%,

    var(--colorFrom) 30%,

    var(--colorTo) 100%

  );

  background: linear-gradient(

    var(--angle),

    var(--colorFrom) 0%,

    var(--colorFrom) 30%,

    var(--colorTo) 100%

  );

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=var(--colorFrom),endColorstr=var(--colorTo),GradientType=1);

  background-repeat: no-repeat;

}

body {

  font-family: var(--primaryFont);

  color: var(--primaryDarkTextColor);

  font-size: 25px;

}

.logo img {
  height: 70px;
}

a {

  text-decoration: none;

  transition: all 0.3s;

  color: inherit;

}

a:hover {

  color: var(--secondaryColor);

}

h1,

h2,

h3,

h4,

h5,

h6 {

  font-family: var(--primaryFont);

}

section {

  position: relative;

  z-index: 1;

}

.img-container {

  position: relative;

  z-index: 1;

  display: block;

  padding-bottom: 100%;

  width: 100%;

}

.img-container img {

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  object-fit: contain;

}

.title {

/*  font-family: var(--secondaryFont);*/

  color: var(--primaryColor);

  font-size: 40px;

  margin: 0;

  font-weight:600;

}

.title-description {

  color: var(--secondaryColor);

}

.ckeditor-content {

  font-size: 25px;

}

/* header */



.top-header {

  padding: 1rem 0;

  padding-top: 1.5rem;

}



.main-nav {

  font-size: 20px;

  padding: 1rem 0;

}

.main-nav .nav {

  column-gap: 2rem;

  row-gap: 5px;

}

.main-nav .nav a {

  display: block;

  text-transform: uppercase;

}

.main-nav .nav a:hover {

  color: var(--secondaryColor);

}



/* End header */



/* footer */

footer {

}

.main-footer {

  margin-top: 320px;

  position: relative;

  z-index: 1;

  background-image: url("../images/bg-footer.png");

  padding-bottom: 1rem;

}

.main-footer::before {

  position: absolute;

  z-index: 1;

  content: "";

  width: 100%;

  height: 245px;

  bottom: 100%;

  left: 0;

  background-image: url("../images/bg-footer-decoration.png");

  background-size: 100%;

  background-position: bottom center;

  background-repeat: no-repeat;

}

.main-footer .title-f {

  text-align: center;

}

.main-footer .title-f-description {

  text-align: center;

  color: var(--secondaryColor);

  margin-bottom: 30px;

}

.main-footer .description-f {

}

.main-footer .img-peanut img {

  width: 100%;

}



.bottom-footer {

  border-top: 1px solid #000;

  background-image: url("../images/bg-footer.png");

  padding: 1rem 0;

}

/* End footer */



/* section-card */



.section-2-card {

  text-align: center;

}

.section-2-card .tieu-de {

  font-size: 40px;

  color: var(--secondaryColor);

  transition: all 0.3s;

  transform: scale(0.5);

  opacity: 0;

}

.section-2-card .img-container {

  padding-bottom: 70%;

  transition: all 0.5s;

  opacity: 0.5;

  margin-bottom: 10px;

}

.section-2-card .img-container img {

  border-radius: 50%;

  padding: 20px;

}

.swiper-slide-active .section-2-card .img-container {

  padding-bottom: 100%;

  opacity: 1;

}

.swiper-slide-active .section-2-card .tieu-de {

  opacity: 1;

  transform: none;

}

.swiper-slide-active .section-2-card .img-container img {

  background: rgb(254, 223, 170);

  background: -moz-linear-gradient(

    0deg,

    rgba(254, 223, 170, 1) 0%,

    rgba(255, 255, 255, 1) 100%

  );

  background: -webkit-linear-gradient(

    0deg,

    rgba(254, 223, 170, 1) 0%,

    rgba(255, 255, 255, 1) 100%

  );

  background: linear-gradient(

    0deg,

    rgba(254, 223, 170, 1) 0%,

    rgba(255, 255, 255, 1) 100%

  );

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fedfaa",endColorstr="#ffffff",GradientType=1);

}



.section-4-card {

  text-align: center;

}

.section-4-card .img-container {

  margin-bottom: 10px;

}

.section-4-card .tieu-de {

  font-size: 35px;

  color: var(--secondaryColor);

}



/* .section-5-card .img-container::before {

  content: "";

  position: absolute;

  left: 0;

  top: 0;

  height: 65px;

  width: 100%;

  background-image: url("../images/wave-image.png");

  background-position: top center;

  background-size: 100% auto;

  background-repeat: no-repeat;

  z-index: 1;

} */

/* .section-5-card .img-container img {

  border-radius: 0 0 1000px 1000px;

} */

/* End section-card */



/* .swiper */

.swiper {

  padding: var(--bs-gutter-y, 0px) var(--bs-gutter-x, 0px);

  margin-right: calc(-1 * var(--bs-gutter-x, 0px));

  margin-left: calc(-1 * var(--bs-gutter-x, 0px));

  margin-top: calc(-1 * var(--bs-gutter-y, 0px));

  margin-bottom: calc(-1 * var(--bs-gutter-y, 0px));

}

/* .swiper */



/* slider */

.slider {

  position: relative;

  z-index: 1;

  padding: 0;

  padding-bottom: 100px;

}

.slider::before {

  content: "";

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 280px;

  z-index: 2;

  background-image: url("../images/wave.svg");

  background-repeat: no-repeat;

  background-size: 110% auto;

  background-position: top center;

}

.slider .peanut-slider {

  position: absolute;

  bottom: -20px;

  right: 80px;

  height: 250px;

  z-index: 2;

}

.slider .bg--body {

  position: absolute;

  top: calc(100%);

  left: 8%;

  width: 42%;

  height: auto;

  z-index: -1;

  object-position: left top;

}



.form-dang-ki-email {

  font-size: 20px;

}

.form-dang-ki-email .form-control {

  border: 1px solid #2b5223;

  border-radius: 10px 0 0 10px;

  padding: 10px 20px;

  background-color: transparent;

}

.form-dang-ki-email .btn.btn-dang-ky {

  background-color: #2b5223;

  color: #fff;

  border-radius: 0 10px 10px 0;

  padding: 10px 10px;

  width: 100%;

  border: 1px solid #2b5223;

  border-left: 0;

  white-space: nowrap;

}

.form-dang-ki-email .btn.btn-dang-ky:hover {

  background-color: transparent;

  color: #2b5223;

}

.form-dang-ki-email .btn.btn-dang-ky img {

  height: 1em;

  margin-left: 2px;

}

.nav.nav-icon-social {

  row-gap: 9px;

  column-gap: 14px;

}

.nav.nav-icon-social a {

  display: flex;

  align-items: center;

  justify-content: center;

  line-height: 1;

  width: 55px;

  height: 55px;

  background-color: #fff;

  border-radius: 50%;

  color: var(--secondaryColor);

  box-shadow: 0 3px 6px hsla(0, 0%, 0%, 0.16);

  font-size: 1.1em;

}

.nav.nav-icon-social a:hover {

  background-color: var(--secondaryColor);

  color: #fff;

}

/* End slider */



/* section-1 */

.section-1 {

  margin-top: -200px;

  margin-bottom: 50px;

}

.section-1 .main-image {

  padding-right: 1rem;

}

.section-1 .main-image img {

  width: 100%;

}

/* End section-1 */



/* section-2 */

.section-2 {

  margin-bottom: 100px;

}

#swiper-section-2 .swiper-wrapper {

  min-height: 650px;

}

/* End section-2 */



/* section-3 */

.section-3 {

  margin-bottom: 50px;

}

.section-3 .title {

  margin-bottom: 1rem;

}

/* End section-3 */



/* section-4 */

.section-4 {

  margin-bottom: 70px;

}

/* End section-4 */



/* section-5 */

.section-5 {

}

.section-5 .title {

  margin-bottom: 50px;

}

/* End section-4 */