@font-face {
  font-family: 'Kanit';
  src: url(/_next/static/chunks/fonts/Kanit-Thin-e9104ee3fe7521b9bd132572fb7cf3f4.ttf) format("truetype");
  font-style: normal;
  font-weight: 100; }

@font-face {
  font-family: 'Kanit';
  src: url(/_next/static/chunks/fonts/Kanit-ThinItalic-edad91f117d29088965917fc337bec96.ttf) format("truetype");
  font-style: italic;
  font-weight: 100; }

@font-face {
  font-family: 'Kanit';
  src: url(/_next/static/chunks/fonts/Kanit-ExtraLight-f632527dcdce437836be506a96f46f19.ttf) format("truetype");
  font-style: normal;
  font-weight: 200; }

@font-face {
  font-family: 'Kanit';
  src: url(/_next/static/chunks/fonts/Kanit-ExtraLightItalic-ac11328156e959a1130a4bb4bdac9fb0.ttf) format("truetype");
  font-style: italic;
  font-weight: 200; }

@font-face {
  font-family: 'Kanit';
  src: url(/_next/static/chunks/fonts/Kanit-Light-a1433e7dbdb4263c59609d7091cedcc4.ttf) format("truetype");
  font-style: normal;
  font-weight: 300; }

@font-face {
  font-family: 'Kanit';
  src: url(/_next/static/chunks/fonts/Kanit-LightItalic-b9c488ee065923a7e551163a41cd0793.ttf) format("truetype");
  font-style: italic;
  font-weight: 300; }

@font-face {
  font-family: 'Kanit';
  src: url(/_next/static/chunks/fonts/Kanit-Regular-a82c4c3bfe6cd8a9d57597071772d0c7.ttf) format("truetype");
  font-style: normal;
  font-weight: 400; }

@font-face {
  font-family: 'Kanit';
  src: url(/_next/static/chunks/fonts/Kanit-Italic-729f2f68a49c1f0e1e060097575af229.ttf) format("truetype");
  font-style: italic;
  font-weight: 400; }

@font-face {
  font-family: 'Kanit';
  src: url(/_next/static/chunks/fonts/Kanit-Medium-572f0abad0f06c44cc10bc1942b16271.ttf) format("truetype");
  font-style: normal;
  font-weight: 500; }

@font-face {
  font-family: 'Kanit';
  src: url(/_next/static/chunks/fonts/Kanit-MediumItalic-f9da69226e90e2945eb8db3fc138408a.ttf) format("truetype");
  font-style: italic;
  font-weight: 500; }

@font-face {
  font-family: 'Kanit';
  src: url(/_next/static/chunks/fonts/Kanit-SemiBold-cfa4a19a580021338309ba8df997e40a.ttf) format("truetype");
  font-style: normal;
  font-weight: 600; }

@font-face {
  font-family: 'Kanit';
  src: url(/_next/static/chunks/fonts/Kanit-SemiBoldItalic-31f37c12d0ba5b73e896df3689a65f4e.ttf) format("truetype");
  font-style: italic;
  font-weight: 600; }

@font-face {
  font-family: 'Kanit';
  src: url(/_next/static/chunks/fonts/Kanit-Bold-064d3b2ff6dc702b485cdf797277f21a.ttf) format("truetype");
  font-style: normal;
  font-weight: 700; }

@font-face {
  font-family: 'Kanit';
  src: url(/_next/static/chunks/fonts/Kanit-BoldItalic-e10eb7ffc0281df8fbf29496e6f7c30c.ttf) format("truetype");
  font-style: italic;
  font-weight: 700; }

@font-face {
  font-family: 'Kanit';
  src: url(/_next/static/chunks/fonts/Kanit-ExtraBold-b9bc9ce352ea7ff8c5e88854c422a8bc.ttf) format("truetype");
  font-style: normal;
  font-weight: 800; }

@font-face {
  font-family: 'Kanit';
  src: url(/_next/static/chunks/fonts/Kanit-ExtraBoldItalic-34836fa19542bcac7a0d133c37e66fe5.ttf) format("truetype");
  font-style: italic;
  font-weight: 800; }

@font-face {
  font-family: 'Kanit';
  src: url(/_next/static/chunks/fonts/Kanit-Black-74602dc6f35ccbb047bab2066eeee007.ttf) format("truetype");
  font-style: normal;
  font-weight: 900; }

@font-face {
  font-family: 'Kanit';
  src: url(/_next/static/chunks/fonts/Kanit-BlackItalic-886705ad7d876d24144466c917e5fd20.ttf) format("truetype");
  font-style: italic;
  font-weight: 900; }

p.kanit {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 400; }
  p.kanit.thin {
    font-style: normal;
    font-weight: 100; }
  p.kanit.thinItalic {
    font-style: italic;
    font-weight: 100; }
  p.kanit.extraLight {
    font-style: normal;
    font-weight: 200; }
  p.kanit.extraLightItalic {
    font-style: italic;
    font-weight: 200; }
  p.kanit.light {
    font-style: normal;
    font-weight: 300; }
  p.kanit.lightItalic {
    font-style: italic;
    font-weight: 300; }
  p.kanit.regular {
    font-style: normal;
    font-weight: 400; }
  p.kanit.italic {
    font-style: italic;
    font-weight: 400; }
  p.kanit.medium {
    font-style: normal;
    font-weight: 500; }
  p.kanit.mediumItalic {
    font-style: italic;
    font-weight: 500; }
  p.kanit.semiBold {
    font-style: normal;
    font-weight: 600; }
  p.kanit.semiBoldItalic {
    font-style: italic;
    font-weight: 600; }
  p.kanit.bold {
    font-style: normal;
    font-weight: 700; }
  p.kanit.boldItalic {
    font-style: italic;
    font-weight: 700; }
  p.kanit.extraBold {
    font-style: normal;
    font-weight: 800; }
  p.kanit.extraBoldItalic {
    font-style: italic;
    font-weight: 800; }
  p.kanit.black {
    font-style: normal;
    font-weight: 900; }
  p.kanit.blackItalic {
    font-style: italic;
    font-weight: 900; }

@font-face {
  font-family: 'KaLaTeXa';
  src: url(/_next/static/chunks/fonts/KaLaTeXaText-Regular-d05af82b2ad2db5edf793d6799cbaaba.ttf);
  font-style: normal;
  font-weight: 400; }

@font-face {
  font-family: 'KaLaTeXa';
  src: url(/_next/static/chunks/fonts/KaLaTeXaText-DemiBold-02f4226b8285790faabbf63552257289.ttf);
  font-style: normal;
  font-weight: 500; }

@font-face {
  font-family: 'KaLaTeXa';
  src: url(/_next/static/chunks/fonts/KaLaTeXaText-Bold-801a689f6cd7fee197f59720269d6782.ttf);
  font-style: normal;
  font-weight: 600; }

@font-face {
  font-family: 'KaLaTeXa';
  src: url(/_next/static/chunks/fonts/KaLaTeXaText-ExtraBold-e666429f889df4ac68b35637cd5f1c92.ttf);
  font-style: normal;
  font-weight: 700; }

p.kaLaTeXa {
  font-family: 'KaLaTeXa';
  font-style: normal;
  font-weight: 400; }
  p.kaLaTeXa.regular {
    font-style: normal;
    font-weight: 400; }
  p.kaLaTeXa.medium {
    font-style: normal;
    font-weight: 500; }
  p.kaLaTeXa.semiBold {
    font-style: normal;
    font-weight: 600; }
  p.kaLaTeXa.bold {
    font-style: normal;
    font-weight: 700; }

.baseLoading {
  color: #e6007e; }

.containLoadingScreen {
  background-color: rgba(56, 56, 56, 0.8);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9; }

.bgWhiteOpa8 {
  background-color: rgba(255, 255, 255, 0.8); }

div.containErrorScreen {
  padding-left: 30px;
  padding-right: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; }
  div.containErrorScreen .containContent {
    width: 100%;
    height: auto;
    padding-top: 24px;
    padding-bottom: 24px; }
    div.containErrorScreen .containContent .containImage {
      width: 100%;
      height: 284px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-bottom: 24px; }
      div.containErrorScreen .containContent .containImage img {
        width: 100%;
        height: 100%;
        object-fit: contain; }
    div.containErrorScreen .containContent .containTitle {
      width: 100%;
      height: auto;
      text-align: center;
      font-size: 24px;
      color: #383838; }
    div.containErrorScreen .containContent .containErrorCode {
      width: 100%;
      height: auto;
      text-align: center;
      font-size: 14px;
      color: #c2c2c2;
      margin-bottom: 24px; }
    div.containErrorScreen .containContent .containDesc {
      width: 100%;
      height: auto;
      text-align: center;
      font-size: 20px;
      color: #383838; }
  div.containErrorScreen .containBtn {
    display: flex;
    flex: auto;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 60px;
    flex-direction: column; }
    div.containErrorScreen .containBtn .buttonUserSaw {
      width: auto;
      height: auto;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      color: #089cc9;
      margin-bottom: 12px; }
    div.containErrorScreen .containBtn .buttonSeeVoucher {
      width: auto;
      height: auto;
      background-color: #089cc9;
      border: none;
      padding: 4px 12px;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      border-radius: 50px;
      color: white; }
      div.containErrorScreen .containBtn .buttonSeeVoucher:active {
        background-color: #007ea5; }

div.containHome {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center; }

div.containHappyBirthDay {
  padding-left: 30px;
  padding-right: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; }
  div.containHappyBirthDay .containContent {
    width: 100%;
    height: auto;
    padding-top: 24px; }
    div.containHappyBirthDay .containContent .containImage {
      width: 100%;
      height: 284px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-bottom: 24px; }
      div.containHappyBirthDay .containContent .containImage img {
        width: 100%;
        height: 100%;
        object-fit: contain; }
    div.containHappyBirthDay .containContent .containTitle {
      width: 100%;
      height: auto;
      padding-bottom: 24px;
      text-align: center;
      font-size: 24px;
      color: #383838; }
    div.containHappyBirthDay .containContent .containDesc {
      width: 100%;
      height: auto;
      padding-bottom: 24px;
      text-align: center;
      font-size: 20px;
      color: #383838; }
  div.containHappyBirthDay .containBtn {
    display: flex;
    flex: auto;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 60px;
    flex-direction: column; }
    div.containHappyBirthDay .containBtn .buttonUserSaw {
      width: auto;
      height: auto;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      color: #089cc9;
      margin-bottom: 12px; }
    div.containHappyBirthDay .containBtn .buttonSeeVoucher {
      width: auto;
      height: auto;
      background-color: #089cc9;
      border: none;
      padding: 4px 12px;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      border-radius: 50px;
      color: white; }
      div.containHappyBirthDay .containBtn .buttonSeeVoucher:active {
        background-color: #007ea5; }

.containVoucherDetail12 table {
  margin-top: 16px; }
  .containVoucherDetail12 table .txtCenter {
    text-align: center; }
  .containVoucherDetail12 table .txtEnd {
    text-align: end; }

.containVoucherDetail13 .marTop16 {
  margin-top: 16px; }

.containVoucherDetail13 .marTop8 {
  margin-top: 8px; }

.containVoucherDetail13 .marTop4 {
  margin-top: 4px; }

.containVoucherDetail13 .button {
  width: auto;
  height: auto;
  background-color: #089cc9;
  border: none;
  padding: 2px 12px;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  border-radius: 50px;
  color: white; }
  .containVoucherDetail13 .button:active {
    background-color: #007ea5; }

div.containHappyBirthDayVoucher {
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  overflow: auto; }
  div.containHappyBirthDayVoucher .contain {
    width: 100%;
    height: auto; }
    div.containHappyBirthDayVoucher .contain .containHeaderImage {
      width: 100%;
      height: 220px; }
      div.containHappyBirthDayVoucher .contain .containHeaderImage img {
        width: 100%;
        height: 100%;
        object-fit: cover; }
      div.containHappyBirthDayVoucher .contain .containHeaderImage .gradients {
        background-image: linear-gradient(rgba(255, 255, 255, 0), white);
        position: relative;
        top: -40px;
        width: 100%;
        height: 40px; }
    div.containHappyBirthDayVoucher .contain .containContent {
      position: relative;
      top: -20px;
      width: 100%;
      height: auto;
      padding-left: 30px;
      padding-right: 30px;
      padding-bottom: 80px; }
      div.containHappyBirthDayVoucher .contain .containContent .cardVoucherCode {
        background-color: white;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
        margin-bottom: 12px;
        -webkit-box-shadow: 0px 3px 25px -1px #e8e8e8;
        -moz-box-shadow: 0px 3px 25px -1px #e8e8e8;
        box-shadow: 0px 3px 25px -1px #e8e8e8; }
        div.containHappyBirthDayVoucher .contain .containContent .cardVoucherCode .content {
          width: 100%;
          height: auto;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          margin-bottom: 10px; }
          div.containHappyBirthDayVoucher .contain .containContent .cardVoucherCode .content .icon {
            width: 30px;
            height: 30px;
            margin-right: 10px; }
            div.containHappyBirthDayVoucher .contain .containContent .cardVoucherCode .content .icon img {
              width: 100%;
              height: 100%;
              object-fit: contain; }
          div.containHappyBirthDayVoucher .contain .containContent .cardVoucherCode .content .code {
            font-size: 16px;
            color: #383838; }
        div.containHappyBirthDayVoucher .contain .containContent .cardVoucherCode .notes {
          width: 100%;
          height: auto;
          font-size: 14px;
          color: #b6b6b6; }
      div.containHappyBirthDayVoucher .contain .containContent .cardHeader {
        background-color: white;
        width: 100%;
        height: auto;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 32px;
        padding-bottom: 2px;
        margin-bottom: 12px;
        -webkit-box-shadow: 0px 3px 25px -1px #e8e8e8;
        -moz-box-shadow: 0px 3px 25px -1px #e8e8e8;
        box-shadow: 0px 3px 25px -1px #e8e8e8; }
        div.containHappyBirthDayVoucher .contain .containContent .cardHeader .title {
          width: 100%;
          height: auto;
          margin-bottom: 20px;
          font-size: 24px;
          color: #383838; }
        div.containHappyBirthDayVoucher .contain .containContent .cardHeader .line {
          width: 30px;
          height: 2px;
          background-color: #ebebeb;
          margin-bottom: 10px; }
        div.containHappyBirthDayVoucher .contain .containContent .cardHeader .expireDate {
          width: 100%;
          height: auto;
          margin-bottom: 20px; }
          div.containHappyBirthDayVoucher .contain .containContent .cardHeader .expireDate .title {
            color: #b6b6b6;
            font-size: 14px;
            padding: 0;
            margin: 0; }
          div.containHappyBirthDayVoucher .contain .containContent .cardHeader .expireDate .desc {
            position: relative;
            color: #383838;
            font-size: 16px;
            padding: 0;
            margin: 0; }
      div.containHappyBirthDayVoucher .contain .containContent .collapseDetail {
        background-color: white;
        width: 100%;
        height: auto; }
        div.containHappyBirthDayVoucher .contain .containContent .collapseDetail .accordion {
          background-color: transparent; }
          div.containHappyBirthDayVoucher .contain .containContent .collapseDetail .accordion .card {
            background-color: transparent;
            border: 0;
            border-bottom: 2px solid #ebebeb; }
            div.containHappyBirthDayVoucher .contain .containContent .collapseDetail .accordion .card .card-header {
              background-color: transparent;
              padding-left: 0;
              padding-right: 0;
              padding-top: 10px;
              padding-bottom: 10px;
              border: 0; }
              div.containHappyBirthDayVoucher .contain .containContent .collapseDetail .accordion .card .card-header .header {
                padding-top: 2px;
                padding-bottom: 2px;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center; }
                div.containHappyBirthDayVoucher .contain .containContent .collapseDetail .accordion .card .card-header .header .title {
                  font-size: 18px;
                  color: #383838; }
                div.containHappyBirthDayVoucher .contain .containContent .collapseDetail .accordion .card .card-header .header .icon {
                  background-color: #ffffff;
                  width: 16px;
                  height: 16px; }
                  div.containHappyBirthDayVoucher .contain .containContent .collapseDetail .accordion .card .card-header .header .icon img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain; }
            div.containHappyBirthDayVoucher .contain .containContent .collapseDetail .accordion .card .collapse .card-body,
            div.containHappyBirthDayVoucher .contain .containContent .collapseDetail .accordion .card .collapsing .card-body {
              color: #383838;
              font-size: 16px;
              padding: 0;
              padding-top: 20px;
              padding-bottom: 20px; }
  div.containHappyBirthDayVoucher .containBtn {
    background-color: #e6007e;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 0;
    width: 100%;
    height: 60px;
    font-size: 20px;
    color: white; }
    div.containHappyBirthDayVoucher .containBtn:active {
      background-color: #bb0067; }
  div.containHappyBirthDayVoucher .disable {
    background-color: #c7c7c7; }
    div.containHappyBirthDayVoucher .disable:active {
      background-color: #c7c7c7; }

div.containDeepLink {
  display: flex; }
  div.containDeepLink .containBg {
    background-size: cover;
    /* Add the blur effect */
    filter: blur(8px);
    -webkit-filter: blur(8px);
    width: 100vw;
    height: 100vh; }
  div.containDeepLink .containContent {
    position: absolute;
    background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(38, 38, 38, 0.85), rgba(0, 0, 0, 0.85));
    width: 100vw;
    height: 100vh;
    display: flex;
    padding: 20px;
    top: 0;
    left: 0;
    z-index: 2;
    overflow: auto; }
    div.containDeepLink .containContent .containDialog {
      display: flex;
      width: 100%;
      height: auto;
      flex-direction: column;
      margin: auto; }
      div.containDeepLink .containContent .containDialog .containIcon {
        display: flex;
        width: 100%;
        height: auto;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: auto;
        margin-bottom: 20px; }
        div.containDeepLink .containContent .containDialog .containIcon .icon {
          width: 120px;
          height: 120px; }
      div.containDeepLink .containContent .containDialog .containText {
        width: 100%;
        height: auto;
        white-space: pre-wrap;
        font-size: 16px;
        color: #ffffff;
        text-align: center;
        margin-bottom: 16px; }
      div.containDeepLink .containContent .containDialog .containBtn {
        display: flex;
        width: 100%;
        height: auto;
        justify-content: center;
        align-items: center;
        white-space: pre-wrap;
        font-size: 16px;
        color: #ffffff;
        text-align: center;
        margin-bottom: 16px; }
        div.containDeepLink .containContent .containDialog .containBtn .button {
          display: flex;
          width: auto;
          height: auto;
          background: rgba(250, 250, 250, 0.23);
          box-shadow: 0 2px 4px rgba(56, 56, 56, 0.6);
          padding: 8px 12px;
          border-radius: 18px;
          min-width: 200px;
          justify-content: center; }
          div.containDeepLink .containContent .containDialog .containBtn .button:active {
            background: rgba(250, 250, 250, 0.43); }

div.containDownloadAppMtlClick {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center; }

div.containDeepLink {
  display: flex; }
  div.containDeepLink .containBg {
    background-size: cover;
    /* Add the blur effect */
    filter: blur(8px);
    -webkit-filter: blur(8px);
    width: 100vw;
    height: 100vh; }
  div.containDeepLink .containContent {
    position: absolute;
    background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(38, 38, 38, 0.85), rgba(0, 0, 0, 0.85));
    width: 100vw;
    height: 100vh;
    display: flex;
    padding: 20px;
    top: 0;
    left: 0;
    z-index: 2;
    overflow: auto; }
    div.containDeepLink .containContent .containDialog {
      display: flex;
      width: 100%;
      height: auto;
      flex-direction: column;
      margin: auto; }
      div.containDeepLink .containContent .containDialog .containIcon {
        display: flex;
        width: 100%;
        height: auto;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: auto;
        margin-bottom: 20px; }
        div.containDeepLink .containContent .containDialog .containIcon .icon {
          width: 120px;
          height: 120px; }
      div.containDeepLink .containContent .containDialog .containText {
        width: 100%;
        height: auto;
        white-space: pre-wrap;
        font-size: 16px;
        color: #ffffff;
        text-align: center;
        margin-bottom: 16px; }
      div.containDeepLink .containContent .containDialog .containBtn {
        display: flex;
        width: 100%;
        height: auto;
        justify-content: center;
        align-items: center;
        white-space: pre-wrap;
        font-size: 16px;
        color: #ffffff;
        text-align: center;
        margin-bottom: 16px; }
        div.containDeepLink .containContent .containDialog .containBtn .button {
          display: flex;
          width: auto;
          height: auto;
          background: rgba(250, 250, 250, 0.23);
          box-shadow: 0 2px 4px rgba(56, 56, 56, 0.6);
          padding: 8px 12px;
          border-radius: 18px;
          min-width: 200px;
          justify-content: center; }
          div.containDeepLink .containContent .containDialog .containBtn .button:active {
            background: rgba(250, 250, 250, 0.43); }