/* -------------------------------------------------------------
  Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library
  By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets

  List of CSS3 Sass Mixins File to be @imported and @included as you need

  The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER
  ENDING css files

  note: All CSS3 Properties are being supported by Safari 5
  more info: http://www.findmebyip.com/litmus/#css3-properties

------------------------------------------------------------- */
@-webkit-keyframes btnBuy {
  0% {
    transform: translate(80%, -50%) skew();
  }
  50% {
    transform: translate(330%, -50%);
  }
  100% {
    transform: translate(330%, -50%);
  }
}
@-moz-keyframes btnBuy {
  0% {
    transform: translate(80%, -50%) skew();
  }
  50% {
    transform: translate(330%, -50%);
  }
  100% {
    transform: translate(330%, -50%);
  }
}
@-ms-keyframes btnBuy {
  0% {
    transform: translate(80%, -50%) skew();
  }
  50% {
    transform: translate(330%, -50%);
  }
  100% {
    transform: translate(330%, -50%);
  }
}
@-o-keyframes btnBuy {
  0% {
    transform: translate(80%, -50%) skew();
  }
  50% {
    transform: translate(330%, -50%);
  }
  100% {
    transform: translate(330%, -50%);
  }
}
@keyframes btnBuy {
  0% {
    transform: translate(80%, -50%) skew();
  }
  50% {
    transform: translate(330%, -50%);
  }
  100% {
    transform: translate(330%, -50%);
  }
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 20px, 0);
    -moz-transform: translate3d(0, 20px, 0);
    -o-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-moz-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 20px, 0);
    -moz-transform: translate3d(0, 20px, 0);
    -o-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-ms-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 20px, 0);
    -moz-transform: translate3d(0, 20px, 0);
    -o-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-o-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 20px, 0);
    -moz-transform: translate3d(0, 20px, 0);
    -o-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 20px, 0);
    -moz-transform: translate3d(0, 20px, 0);
    -o-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes loadingD {
  0% {
    -webkit-transform: rotate(0deg);
    -khtml-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    -khtml-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -khtml-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes loadingD {
  0% {
    -webkit-transform: rotate(0deg);
    -khtml-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    -khtml-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -khtml-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-ms-keyframes loadingD {
  0% {
    -webkit-transform: rotate(0deg);
    -khtml-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    -khtml-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -khtml-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes loadingD {
  0% {
    -webkit-transform: rotate(0deg);
    -khtml-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    -khtml-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -khtml-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes loadingD {
  0% {
    -webkit-transform: rotate(0deg);
    -khtml-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    -khtml-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -khtml-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes shakeX {
  from, to {
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(-5px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    transform: translate3d(5px, 0, 0);
  }
}
@-moz-keyframes shakeX {
  from, to {
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(-5px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    transform: translate3d(5px, 0, 0);
  }
}
@-ms-keyframes shakeX {
  from, to {
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(-5px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    transform: translate3d(5px, 0, 0);
  }
}
@-o-keyframes shakeX {
  from, to {
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(-5px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    transform: translate3d(5px, 0, 0);
  }
}
@keyframes shakeX {
  from, to {
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(-5px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    transform: translate3d(5px, 0, 0);
  }
}
@keyframes zoomin {
  0% {
    opacity: 0;
    transform: scale(0.92, 0.92) translate(0, 30px);
  }
  100% {
    transform: scale(1, 1) translate(0, 0);
    opacity: 1;
  }
}
@keyframes opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slidedown {
  0% {
    height: 0;
  }
  100% {
    height: 100%;
  }
}
.header-cam {
  background: #2f5141;
  height: 60px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
}
@media (min-width: 768px) {
  .header-cam {
    height: 90px;
  }
}

.lotionSampling-banner .container-xxxl {
  max-width: 900px;
  margin: 0 auto;
}
@media (min-width: 1200px) {
  .lotionSampling-banner .container-xxxl {
    max-width: 1440px;
  }
}
.lotionSampling-banner .lotionSampling-banner-from {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 100%;
  -moz-box-flex: 0;
  -moz-flex: 0 0 100%;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  padding: 15px;
  align-items: center;
  display: flex;
  -webkit-box-ordinal-group: 1;
  -webkit-order: 0;
  -moz-order: 0;
  -ms-flex-order: 0;
  order: 0;
}
@media (min-width: 1200px) {
  .lotionSampling-banner .lotionSampling-banner-from {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -moz-order: 1;
    -ms-flex-order: 1;
    order: 1;
    flex: 0 0 500px;
    max-width: 500px;
  }
}
.lotionSampling-banner .lotionSampling-banner-from .lotionSampling-banner-wrap {
  -webkit-border-radius: 20px;
  -khtml-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
  background-color: #ffffff;
}
.lotionSampling-banner .lotionSampling-banner-from .lotionSampling-banner-wrap .head {
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  background: #7d8f3e;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 20px;
}
.lotionSampling-banner .lotionSampling-banner-from .lotionSampling-banner-wrap .head h2 {
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  color: #fff;
}
.lotionSampling-banner .lotionSampling-banner-from .lotionSampling-banner-wrap .head p {
  color: #fff;
  margin-bottom: 0;
}
.lotionSampling-banner .lotionSampling-banner-from .lotionSampling-banner-wrap .wrap-inbanner {
  padding: 20px;
}
.lotionSampling-banner .lotionSampling-banner-from .lotionSampling-banner-wrap .wrap-inbanner .form-check .form-check-input {
  width: 1.5em;
  height: 1.5em;
  border-width: 2px;
  border-color: #999999;
}
.lotionSampling-banner .lotionSampling-banner-from .lotionSampling-banner-wrap .wrap-inbanner .form-check .form-check-label {
  padding-left: 15px;
}
.lotionSampling-banner .lotionSampling-banner-from .lotionSampling-banner-wrap .bodyScroll {
  height: 200px;
  border: solid 1px #7d8f3e;
  -webkit-border-radius: 20px;
  -khtml-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
  background-color: #f9faf7;
  padding: 15px;
  overflow-y: scroll;
}
.lotionSampling-banner .lotionSampling-banner-from .lotionSampling-banner-wrap .bodyScroll h3 {
  font-size: 14px;
  font-weight: 600;
}
.lotionSampling-banner .lotionSampling-banner-from .lotionSampling-banner-wrap .form-check-input:checked {
  background-color: #7d8f3e;
  border-color: #7d8f3e;
}
.lotionSampling-banner .lotionSampling-banner-from .lotionSampling-banner-wrap .form-check-input:focus {
  border-color: rgb(125, 145, 62);
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(125, 145, 62, 0.25);
}
.lotionSampling-banner .lotionSampling-banner-from .form-control {
  border-radius: 30px;
  padding-right: 20px;
}
.lotionSampling-banner .lotionSampling-banner-from .input-form {
  background-color: #ffffff;
  padding: 0.4rem;
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  -webkit-border-radius: 30px;
  -khtml-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
  border-radius: 30px;
  gap: 6px;
  text-align: left;
}
.lotionSampling-banner .lotionSampling-banner-from .input-form:hover {
  background: #ffffff !important;
  outline-color: rgb(var(--color-1c));
  color: rgb(var(--color-1c)) !important;
}
.lotionSampling-banner .lotionSampling-banner-picture {
  -webkit-box-ordinal-group: 1;
  -webkit-order: 0;
  -moz-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 100%;
  -moz-box-flex: 0;
  -moz-flex: 0 0 100%;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
}
@media (min-width: 1200px) {
  .lotionSampling-banner .lotionSampling-banner-picture {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -moz-order: 1;
    -ms-flex-order: 1;
    order: 1;
    flex: 0 0 calc(100% - 500px);
  }
}
.lotionSampling-banner .banner-box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative;
}

.lotionSampling {
  padding-bottom: 20px;
}
@media (min-width: 1200px) {
  .lotionSampling {
    padding-bottom: 40px;
  }
}
.lotionSampling .lotionSampling-item {
  background-color: #ffffff;
  margin-top: 20px;
  -webkit-border-radius: 20px;
  -khtml-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
  overflow: hidden;
  border: solid 1px #ebebeb;
}
@media (min-width: 1200px) {
  .lotionSampling .lotionSampling-item {
    margin-top: 40px;
  }
}
.lotionSampling .lotionSampling-item .flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
}
@media (max-width: 768px) {
  .lotionSampling .lotionSampling-item .flex {
    flex-direction: column;
  }
}
.lotionSampling .lotionSampling-item .flex .column {
  width: 50%;
}
@media (max-width: 768px) {
  .lotionSampling .lotionSampling-item .flex .column {
    width: 100%;
  }
}
.lotionSampling .lotionSampling-item .flex .column .table td {
  border: 0;
  text-align: left;
}
.lotionSampling .lotionSampling-item .flex .column p {
  text-align: center;
}
.lotionSampling .lotionSampling-item .picture_image {
  width: 100%;
  padding: 30px;
}
.lotionSampling .lotionSampling-item .content-detail {
  padding: 20px;
}
.lotionSampling .lotionSampling-item .content-detail .title {
  font-size: 26px;
  color: #7d8f3e;
  font-weight: 600;
  margin-bottom: 1rem;
}
.lotionSampling .lotionSampling-item .content-detail .titleSub {
  font-size: 16px;
  font-weight: 600;
}
.lotionSampling .lotionSampling-item .content-detail ul {
  margin: 0 0 1rem 0;
  padding: 0;
  list-style: none;
}

#termModal .modal-content {
  border-radius: 20px;
}
#termModal .btn-close {
  background-color: #fafaf7;
  background-size: 40%;
}
#termModal .modal-header {
  border: none;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
#termModal .modal-body .head {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: #7d8f3e;
}
#termModal .modal-body ul li {
  margin-bottom: 10px;
}
#termModal .d-footer {
  padding: 15px;
}

.btn.btnOK {
  outline: solid 1px rgb(var(--color-1c));
  background-color: rgb(var(--color-1c));
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  color: #ffffff !important;
  -webkit-border-radius: 30px;
  -khtml-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
  border-radius: 30px;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  gap: 6px;
  text-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
}
.btn.btnOK:hover {
  background: #ffffff !important;
  outline-color: rgb(var(--color-1c));
  color: rgb(var(--color-1c)) !important;
}
.btn.btnSmall {
  font-size: 12px;
  text-decoration: underline;
  max-width: 160px;
}

.section-howto {
  color: #7d8f3e;
}
.section-howto .head h4 {
  font-size: 30px;
  line-height: 2.5rem;
  font-weight: 600;
}
@media (max-width: 768px) {
  .section-howto .head h4 {
    font-size: 1.1rem;
    line-height: 1.8rem;
  }
}
@media (max-width: 768px) {
  .section-howto .head h4 br {
    display: none;
  }
}
.section-howto .head-howto {
  padding: 55px;
}
@media (max-width: 768px) {
  .section-howto .head-howto {
    padding: 1.5rem;
  }
}
.section-howto .head-howto h3 {
  font-size: 35px;
  font-weight: 600;
}
@media (max-width: 768px) {
  .section-howto .head-howto h3 {
    font-size: 25px;
  }
}
.section-howto .text-t p {
  font-size: 28px;
  font-weight: 500;
  margin: 0;
}
@media (max-width: 768px) {
  .section-howto .text-t p {
    font-size: 20px;
    padding-left: 65px;
    padding-right: 65px;
  }
}
.section-howto .text-t a {
  text-decoration: none;
  color: #7d8f3e;
}
.section-howto .text-t h3 {
  font-size: 35px;
  font-weight: 600;
}
@media (max-width: 768px) {
  .section-howto .text-t h3 {
    font-size: 28px;
  }
}
@media (max-width: 768px) {
  .section-howto .shopping .row {
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .section-n {
    display: none;
  }
}
.section-n h4 {
  font-weight: 600;
  line-height: 1.5;
}
@media (max-width: 768px) {
  .section-n h4 {
    text-align: center;
    font-size: 16px;
    margin: 0;
  }
}
.section-n .tab-bg {
  background-position: left center;
  background-size: 93%;
  background-repeat: no-repeat;
}
.section-n .tab-bg .item-section {
  display: flex;
  align-items: center;
  justify-content: right;
}
@media (max-width: 768px) {
  .section-n .tab-bg .item-section {
    padding-bottom: 45px;
  }
}
.section-n .tab-bg.right {
  background-position: right center;
}
.section-n .tab-bg.right .item-section {
  flex-direction: row-reverse;
  justify-content: left;
}
.section-n-mobile {
  display: none;
}
@media (max-width: 768px) {
  .section-n-mobile {
    display: block;
  }
}
.section-n-mobile img {
  width: 100%;
}

.shopping .item-shopping a {
  text-decoration: none;
}
.shopping .item-shopping .item {
  color: #000;
  border-radius: 30px;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}
@media (max-width: 768px) {
  .shopping .item-shopping .item {
    padding: 15px;
  }
}
.shopping .item-shopping .item.lazada {
  border: solid 1px #000083;
}
.shopping .item-shopping .item.tiktok {
  border: solid 1px #1c1c1c;
}
.shopping .item-shopping .item.shopee {
  border: solid 1px #f1582c;
}
.shopping .item-shopping .item.line {
  border: solid 1px #00b900;
}
.shopping .item-shopping p {
  font-size: 14px;
  margin: 0;
}/*# sourceMappingURL=lotionsampling.css.map */