:root {
  --font-primary: "Noto_Sans";
  --font-secondary: "Noto_Sans_Thai";
  --primary-color: #FC2AC6;
  --yellow-color: #E9F852;
  --orange-color: #D68F32;
  --white-color: #FFFFFF;
  --gray-color: #999999;
  --gray-color-2: #525252;
  --gray-color-3: #8B8B8B;
  --gray-color-4: #EFEFEF;
  --gray-color-5: #ADADAD;
  --gray-color-6: #BEBEBE;
  --black-color: #000000;
  --placeholder-gray: #888888;
  --link-color: #888888;
  --blue-color: #279EFF;
}

input {
  outline: 0;
  box-shadow: none;
}
input:focus, input:hover {
  outline: 0;
  box-shadow: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
p {
  margin: 0;
}

ul,
li {
  margin: 0;
  padding: 0;
}

a {
  transition: all 0.25s ease 0s;
  -webkit-transition: all 0.25s ease 0s;
  -moz-transition: all 0.25s ease 0s;
  color: var(--black-color);
  text-decoration: none;
  position: relative;
}

.tH1 {
  font-size: 32px;
  line-height: 1.4;
}

.tH2 {
  font-size: 20px;
  line-height: 1.4;
}

.tH3 {
  font-size: 24px;
  line-height: 1.4;
}

.tBody {
  font-size: 16px;
  line-height: 1.4;
}

.tNote {
  font-size: 14px;
}

.img img {
  width: 100%;
  align-self: center;
}

.fBold {
  font-weight: 700;
}

.fSmBold {
  font-weight: 600;
}

.fMed {
  font-weight: 500;
}

.fReg {
  font-weight: 400;
}

.fLi {
  font-weight: 300;
}

.fPrimary {
  font-family: var(--font-primary);
}

.fSecondary {
  font-family: var(--font-secondary);
}

.cPink,
.cPrimary {
  color: var(--primary-color);
}

.cYellow,
.cSecondary {
  color: var(--yellow-color);
}

.cBlack {
  color: var(--black-color);
}

.cWhite {
  color: var(--white-color);
}

.cOrange {
  color: var(--orange-color);
}

.cGray {
  color: var(--gray-color);
}

.cGray2 {
  color: var(--gray-color-2);
}

.cGray3 {
  color: var(--gray-color-3);
}

.cBlue {
  color: var(--blue-color);
}

.buttonControl {
  position: relative;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border: none;
  padding: 24px;
  color: var(--white-color);
  position: relative;
  width: max-content;
}
.btn:hover {
  border: none;
  box-shadow: none;
}
.btn.btnPrimary {
  border-radius: 8px;
  padding: 0 16px;
  background: var(--primary-color);
  color: var(--white-color);
  font-size: 16px;
  font-weight: 600;
  height: 40px;
  padding: 0 14px;
  font-family: var(--font-secondary);
  border: 1px solid var(--primary-color);
}
.btn.btnPrimary:hover {
  background: #C50293;
}
@media only screen and (max-width: 1200px) {
  .btn.btnPrimary {
    height: 40px;
    padding-top: 0;
    padding-bottom: 0;
  }
}
.btn.btnOutline {
  border-radius: 8px;
  padding: 0 16px;
  background: var(--black-color);
  color: var(--white-color);
  font-size: 16px;
  font-weight: 600;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--white-color);
  font-family: var(--font-secondary);
}
@media only screen and (max-width: 1200px) {
  .btn.btnOutline {
    height: 40px;
    padding-top: 0;
    padding-bottom: 0;
  }
}
.btn.btnSale {
  border-radius: 8px;
  padding: 0 16px;
  background: var(--black-color);
  color: var(--yellow-color);
  font-size: 16px;
  font-weight: 600;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--yellow-color);
  font-family: var(--font-secondary);
}
@media only screen and (max-width: 1200px) {
  .btn.btnSale {
    height: 40px;
    padding-top: 0;
    padding-bottom: 0;
  }
}
.btn.btnSocial {
  padding: 0;
  width: 32px;
  height: 32px;
  min-width: inherit;
  justify-content: center;
  align-items: center;
  border-radius: 0;
  background-color: var(--black-color);
}

.btnBack {
  display: flex;
  align-items: center;
}
.btnBack::before {
  content: "";
  width: 24px;
  height: 24px;
  display: flex;
  margin-right: 4px;
  background: url("../images/icons/ico-arrow-left.svg") center center/100% auto no-repeat;
}

.btnLink {
  transition: all 0.25s ease 0s;
  -webkit-transition: all 0.25s ease 0s;
  -moz-transition: all 0.25s ease 0s;
  font-size: 16px;
  color: var(--link-color);
}
.btnLink:hover {
  color: var(--yellow-color);
}

.break {
  flex-basis: 100%;
  height: 0;
}

.form-control {
  border-radius: 12px;
  background: var(--white-color);
  display: flex;
  line-height: 1;
  font-size: 16px;
  align-items: center;
  padding: 0 20px;
}
.form-control::-webkit-input-placeholder {
  /* Edge */
  color: var(--placeholder-gray);
}
.form-control:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: var(--placeholder-gray);
}
.form-control::placeholder {
  color: var(--placeholder-gray);
}

.mg-b-s {
  margin-bottom: 20px;
}

.mg-b-m {
  margin-bottom: 30px;
}

.mg-b-l {
  margin-bottom: 40px;
}

.mg-b-xl {
  margin-bottom: 60px;
}

.mg-t-s {
  margin-top: 20px;
}

.mg-t-m {
  margin-top: 30px;
}

.mg-t-l {
  margin-top: 40px;
}

.mg-t-xl {
  margin-top: 60px;
}

.pd-b-s {
  padding-bottom: 20px;
}

.pd-b-m {
  padding-bottom: 30px;
}

.pd-b-l {
  padding-bottom: 40px;
}

.pd-b-xl {
  padding-bottom: 60px;
}

.pd-t-s {
  padding-top: 20px;
}

.pd-t-m {
  padding-top: 30px;
}

.pd-t-l {
  padding-top: 40px;
}

.pd-t-xl {
  padding-top: 60px;
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-60px, 0, 0);
    transform: translate3d(-60px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-60px, 0, 0);
    transform: translate3d(-60px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(60px, 0, 0);
    transform: translate3d(60px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(60px, 0, 0);
    transform: translate3d(60px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -60px, 0);
    transform: translate3d(0, -60px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -60px, 0);
    transform: translate3d(0, -60px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes zoomOut {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(1.5, 1.5, 1.5);
    transform: scale3d(1.5, 1.5, 1.5);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes zoomOut {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(1.5, 1.5, 1.5);
    transform: scale3d(1.5, 1.5, 1.5);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.wow {
  visibility: hidden;
}
.wow.animated {
  visibility: visible;
}
.wow.animated .fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}
.wow.animated .fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}
.wow.animated .fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
.wow.animated .fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
.wow.animated .zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@keyframes blur {
  0% {
    filter: blur(0);
  }
  10% {
    filter: blur(5px);
  }
  90% {
    filter: blur(5px);
  }
  100% {
    filter: blur(0);
  }
}
@-webkit-keyframes blur {
  0% {
    filter: blur(0);
  }
  10% {
    filter: blur(5px);
  }
  90% {
    filter: blur(5px);
  }
  100% {
    filter: blur(0);
  }
}
@keyframes overlayVdo {
  0% {
    opacity: 1;
    top: 0;
    height: 0;
  }
  50% {
    opacity: 1;
    top: 0;
    height: 100%;
  }
  60% {
    opacity: 1;
    top: 0;
    height: 100%;
  }
  100% {
    opacity: 1;
    top: 100%;
    height: 0;
  }
}
@-webkit-keyframes overlayVdo {
  0% {
    opacity: 1;
    top: 0;
    height: 0;
  }
  50% {
    opacity: 1;
    top: 0;
    height: 100%;
  }
  60% {
    opacity: 1;
    top: 0;
    height: 100%;
  }
  100% {
    opacity: 1;
    top: 100%;
    height: 0;
  }
}