@charset "UTF-8";
@import url(../css/icon-font.css);

/* @font-face {
  font-family: 'SukhumvitSetRegular';
  src: url('../fonts/db_heaventroundedv3.2.1-webfont.eot');
  src: url('../fonts/db_heaventroundedv3.2.1-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/db_heaventroundedv3.2.1-webfont.woff2') format('woff2'),
    url('../fonts/db_heaventroundedv3.2.1-webfont.woff') format('woff'),
    url('../fonts/db_heaventroundedv3.2.1-webfont.ttf') format('truetype'),
    url('../fonts/db_heaventroundedv3.2.1-webfont.svg#SukhumvitSetRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SukhumvitSet';
  font-weight: 500;
  src: url('../fonts/db_heaventrounded_med_v3.2.1-webfont.eot');
  src: url('../fonts/db_heaventrounded_med_v3.2.1-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/db_heaventrounded_med_v3.2.1-webfont.woff2') format('woff2'),
    url('../fonts/db_heaventrounded_med_v3.2.1-webfont.woff') format('woff'),
    url('../fonts/db_heaventrounded_med_v3.2.1-webfont.ttf') format('truetype'),
    url('../fonts/db_heaventrounded_med_v3.2.1-webfont.svg#SukhumvitSet') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SukhumvitSet';
  font-weight: 700;
  src: url('../fonts/db_heaventrounded_bd_v3.2.1-webfont.eot');
  src: url('../fonts/db_heaventrounded_bd_v3.2.1-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/db_heaventrounded_bd_v3.2.1-webfont.woff2') format('woff2'),
    url('../fonts/db_heaventrounded_bd_v3.2.1-webfont.woff') format('woff'),
    url('../fonts/db_heaventrounded_bd_v3.2.1-webfont.ttf') format('truetype'),
    url('../fonts/db_heaventrounded_bd_v3.2.1-webfont.svg#SukhumvitSet') format('svg');
  font-weight: normal;
  font-style: normal;
} */

/* Light (300) */
@font-face {
  font-family: 'SukhumvitSet';
  src: url('../fonts/SukhumvitSet-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Regular (400) */
@font-face {
  font-family: 'SukhumvitSet';
  src: url('../fonts/SukhumvitSet-Text.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Medium (500) */
@font-face {
  font-family: 'SukhumvitSet';
  src: url('../fonts/SukhumvitSet-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* SemiBold (600) */
@font-face {
  font-family: 'SukhumvitSet';
  src: url('../fonts/SukhumvitSet-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Bold (700) */
@font-face {
  font-family: 'SukhumvitSet';
  src: url('../fonts/SukhumvitSet-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


* {
  font-family: "SukhumvitSet";
  font-weight: 600;
}

.text-semi-bold {
  font-family: 'SukhumvitSet' !important;
  font-weight: 600;
}

.text-bold {
  font-family: 'SukhumvitSet' !important;
  font-weight: 700;
}

.text-front-bold {
  font-weight: 700 !important;
}

.text-size-16 {
  font-size: 16px !important;
}

.text-size-18 {
  font-size: 18px !important;
}

.input-code-ele-brand-on {
  display: flex;

  justify-content: center;

}

.header-rider {
  position: relative;
  width: 100%;
  max-width: 512px;
  /* Adjust to fit your image size */
  margin: 0 auto;
  text-align: left;
}

.text-titel-bc {
  width: 100% !important;
}

.text-titel-ready {
  width: 278px !important;
}

.text-expire-ready {
  width: 384px !important;
}

.header-rider-container {
  position: relative;
}

.cus-h-img-ma {
  max-width: 120px !important;
  height: 120px !important;


}

.header-rider-banner {
  width: 100%;
  height: auto;
  display: block;
}

.datil-makro {
  width: 100%;
}

.header-rider-text {
  position: absolute;
  top: 10%;
  left: 8%;
  color: white;
  font-weight: bold;
  font-size: 23px;

}

.cus-img-ma {
  width: 177px;
  height: 75px;


}

.cus-img-ma-d {
  width: 377px;
  height: 145px;

}

.cus-img-big {

  width: 167px;
  height: 89px;



}

.text-blue {
  color: #2541A8 !important;
  font-family: 'SukhumvitSet';
  font-weight: 500;
}

.header-rider-text span {
  /*  font-family: 'SukhumvitSet';
  font-weight: 500; */
  font-size: 17px;
  text-align: left;
  font-weight: 100;
}

.text-bigC {
  color: #86C127;
  font-family: 'SukhumvitSet';
  font-weight: 500;
}

.bg-makro {
  background: #FAE162 !important;

}

.bg-summer {
  background: #185AA5 !important;

}

.bg-puriku4 {
  background: #e4499a !important;

}

.text-puriku-rule {
  color: #444444;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0%;

}

.bg-container {
  position: relative;
  /* ใช้สำหรับวาง overlay-content แบบ absolute */
  width: 100%;
  /* กำหนดความกว้างเต็มหน้าจอหรือเต็ม parent */

}


.bg-container-d {
  position: relative;
  /* ใช้สำหรับวาง overlay-content แบบ absolute */
  width: 100%;
  /* กำหนดความกว้างเต็มหน้าจอหรือเต็ม parent */
}

.bg-image {
  display: block;
  /* ทำให้ img แสดงเป็นบล็อก (ไม่เว้นช่องว่างด้านล่าง) */
  width: 100%;
  /* ปรับภาพให้เต็มความกว้างของ container */
  /*   height: auto; */
  /* ให้ภาพคงสัดส่วนเดิม */
}

.bg-cus-trem {
  background-color: #e04885 !important;


}

.box-point-brand {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* แบ่งเป็น 4 คอลัมน์เท่าๆ กัน */
  gap: 2rem;
  /* ระยะห่างระหว่างแบรนด์ */
  width: 100%;
  max-width: 800px;
  /* กำหนดขนาดสูงสุด */
  margin-left: -2rem;
}

.overlay-content {
  padding-right: 7%;
  position: absolute;
  top: 89%;
  left: 0;
  width: 100%;
  padding-left: 7%;
  padding-bottom: 2rem;
}

.overlay-content-ktdgold {
  padding-right: 7%;
  position: absolute;
  top: 75%;
  left: 0;
  width: 100%;
  padding-left: 7%;
  padding-bottom: 10rem !important;
}

.overlay-content-ktdgold-desktop {
  padding-right: 7%;
  position: absolute;
  top: 85%;
  left: 0;
  width: 100%;
  padding-left: 7%;
  padding-bottom: 10rem !important;
}

.overlay-content-redbullexclusive {
  padding-right: 7%;
  position: absolute;
  top: 83%;
  left: 0;
  width: 100%;
  padding-left: 7%;
  padding-bottom: 10rem !important;
}

.overlay-content-redbullexclusive2 {
  padding-right: 7%;
  position: absolute;
  top: 105%;
  left: 0;
  width: 100%;
  padding-left: 7%;
  padding-bottom: 15rem !important;
}

.overlay-content-redbullexclusive3 {
  padding-right: 7%;
  /* position: absolute; */
  top: 105%;
  left: 0;
  width: 100%;
  padding-left: 7%;
  padding-bottom: 15rem !important;
}


.overlay-content-redbullexclusive-desktop {
  padding-right: 7%;
  position: absolute;
  top: 85%;
  left: 0;
  width: 100%;
  padding-left: 7%;
  padding-bottom: 10rem !important;
}

.overlay-content-redbullexclusive-desktop2 {
  padding-right: 7%;
  top: 85%;
  left: 0;
  width: 100%;
  padding-left: 7%;
  padding-bottom: 10rem !important;
}

.pb-cus-m-landing {
  padding-bottom: 4rem;
}

.bg-puriku-v3-cus {
  background: url("/assets/images/BG1111.png") !important;
  background-size: 100%;
}

.bg-puriku-v3-cus-anno {
  background: url("/assets/images/BG-annopuriku.png") !important;
  background-size: 100%;
}

.bg-puriku-v3-cus-anno-desktop {
  background: url("/assets/images/bg-anno-destoppuriku.png") !important;
  background-size: 100%;
  min-height: 100%;
}

.bg-purikuV4 {
  background-color: #ED4A99;
}

.bg-purikuV3 {
  /* ตั้งภาพพื้นหลัง */
  /*   background: url("/assets/images/BG1111.png");
width: 100%;
background-size: 100%;
min-height: 100vh; */
  /* background-color:  #e04885 !important; */
}

.bg-purikuV3-desktop {

  background: url("/assets/images/BG-puriku-desktop.png");

  background-size: 100%;

}

/*   background: linear-gradient(180deg, #000005 0%, #07345D 50.84%, #4E7898 100%); */

.bg-BigC {
  background: #BBE0EF !important;
}

.bg-ktdgold {
  background: #004F8A !important;

}

.bg-ktdgold2 {
  background: linear-gradient(to bottom, #0064AF 100%, ) !important;

}

.bg-ktdgold2-announce {
  background: #0064AF !important;

}

.btn-bigc .btn:hover {
  color: #205CA4 !important;
}

.btn-bigc .btn {
  color: #205CA4 !important;
}

/* ปุ่ม outline ด้านซ้าย */
.btn-outline-custom {
  background: transparent !important;
  color: #000;
  border: 2px solid #000;
  border-radius: 9999px;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  transition: background-color .2s, color .2s;
}

.btn-outline-custom:hover {
  background: #000;
  color: #fff;
}

/* ปุ่มถัดไป ด้านขวา */
.btn-next {
  background: #E5E5E5;
  /* สถานะ Disabled */
  color: #fff;
  border: none;
  border-radius: 9999px;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  transition: background-color .2s;
  cursor: not-allowed;
}

.btn-next:not(:disabled) {
  background: #0095da;
  /* สถานะ Enabled */
  cursor: pointer;
}

.btn-next:not(:disabled):hover {
  background: #0095da;
}

.bg-redbull {
  background: #ffffff !important;


}

.Rider_Banner {
  position: relative;
  display: inline-block;
  width: 100%;
  /* Adjust the width as needed */
}

.list_menu_img-some-ktd-1 {
  width: 43px;
  height: 33px;

}

.cus-purku-promotion-desktop {
  max-width: 374px;
}

.banner-img {
  width: 100%;
  /* Make the image responsive */
  display: block;
}

.image-container-ready {
  position: relative;
  /* Make this the positioning context */
}

.ready-banner {
  position: absolute;
  /* Position it over the image */
  top: 5%;
  /* Or adjust as needed (e.g., 50% for center) */
  left: 5%;
  /* Or adjust as needed */
  width: 100%;
  /* Or a specific width */
  /* Other styles (background, padding, etc.) */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: white;
  /* Example text color */
  font-family: 'SukhumvitSet';
  font-weight: 500;
  font-weight: 700;
  padding: 10px;
  /* Example padding */
  box-sizing: border-box;
  /* Include padding in width */
}

.Ready_Banner-text {
  font-size: 14px;
  white-space: nowrap;
}

.Ready_Banner-subtext {
  font-size: 10px;
  white-space: nowrap;
}

.Ready_Banner-subtext-success {
  margin-left: -1.6em !important;
  margin-top: 3.4em !important;
  font-size: 10px;
  white-space: nowrap;
}

/* Optional: Styles for the image itself if needed */
.image-container-ready img {
  display: block;
  /* Make sure the image takes up the full container width */
  width: 100%;
  height: auto;
  /* Maintain aspect ratio */
}

.Rider_Banner-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-37%, -50%);
  color: white;
  font-family: 'SukhumvitSet';
  font-weight: 500;
  font-size: 14px;
  font-weight: 700;
  text-align: left;

  white-space: nowrap;
}

.text-input-vari-ele {
  position: absolute;
  font-size: 10px;
  color: red;
  margin-top: -8px;
  margin-left: 5px;
  z-index: 99;
}

.list_menu_img_list_ele_home {
  width: 45px;
  height: 33px;

}

.list_menu_img_list_mu {
  width: 35px;
  height: 35px;
}

@media (max-width: 320px) {

  .list_menu_img_list_ele_home {
    width: 35px;
    height: 23px;

  }

  .list_menu_img_list_mu {
    width: 25px;
    height: 25px;
  }

}

.input-code-ele-brand {
  display: flex;
  flex-wrap: wrap;
}

/* .image-container img {
  padding: 2px;
  width: 60.86px;
  height: 60.86px;
} */
.image-container-om {
  display: grid;
  justify-content: center;
}

.cus-btn-close {
  position: relative;
  z-index: 999;
}

.text-parakit {
  font-family: 'SukhumvitSet';
  font-weight: 500;
  font-size: 18px;
  font-weight: 700;
  line-height: 31.15px;
  text-align: left;
  color: #45B061;


}

.image-container-om {
  display: grid;
  justify-content: center;
}

@media (min-width: 361px) {
  .image-container-ele {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    /* ระยะห่างระหว่างรูป */

  }
}

@media (max-width: 360px) {
  .image-container-ele {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* แสดงใน 3 แถว */
    gap: 1px;
    /* ระยะห่างระหว่างรูป */


  }
}

@media (max-width: 360px) {
  .header-rider-text {
    position: absolute;
    top: 10%;
    left: 8%;
    color: white;
    font-weight: bold;
    font-size: 16px;

  }

  .header-rider-text span {
    /*  font-family: 'SukhumvitSet';
  font-weight: 500; */
    font-size: 12px;
    text-align: left;
    font-weight: 100;
  }


  .list_menu_img {
    /*     width: 100% !important; */
    height: 21px !important;
  }

  .list_menu_img-ktd {
    width: 31px !important;
    height: 21px !important;
  }

  .list_menu_img-some {
    width: 31px !important;
    height: 21px !important;
  }

  .list_menu_img-some-ktd-1 {
    width: 31px !important;
    height: 21px !important;

  }

  .Rider_Banner-text {
    font-size: 10px !important;
    ;
  }

  .list_menu_img-ele {
    width: 31px !important;
    height: 22px !important;
  }

  .text_list_menu_img {
    font-family: "SukhumvitSet";
    font-weight: 600;
    font-size: 8px !important;
    padding-top: 5px;
  }

  .text_list_menu_img-rider {
    font-family: "SukhumvitSet";
    font-weight: 600;
    font-size: 8px !important;
    padding-top: 5px !important;
  }

  .overlay-text {
    position: absolute;
    top: -5px;
    /* Adjust as needed */
    right: -35px !important;
    /* Adjust as needed */
    background-color: #12B36A;
    color: white;
    padding: 2px 5px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
  }

  .text_menu_list_img {
    font-family: "SukhumvitSet";
    font-weight: 600;
    font-size: 8px !important;
    padding-top: 5px;
  }
}

.image-container-ele img {
  padding: 2px;
  width: 60.86px;
  height: 60.86px;
}




.logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* สูงสุด 4 คอลัมน์ต่อแถว */
  gap: 1rem;
  /* ระยะห่างระหว่างโลโก้ */
  justify-items: center;
  /* จัดให้อยู่กึ่งกลางคอลัมน์ */
}


.divider-redbull {
  width: 1px;
  height: 40px;
  background-color: #000;
  margin: 0 1rem;
}


@media (min-width: 320px) {
  .image-container {

    width: 100%;
    height: auto;
    cursor: pointer;
    transition: border 0.3s ease;
    /* padding-left: 2px;
      padding-right: 2px; */
  }
}

@media (max-width: 321px) {
  .image-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* แสดงใน 3 แถว */
    gap: 2px;
    /* ระยะห่างระหว่างรูป */
    max-width: 60px;
    max-height: 62px;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: border 0.3s ease;
    /*  padding-left: 16%;  */

  }
}

.ele-re-home {

  bottom: 0;
}

.color-rule {
  margin-top: -5px;
  width: 100%;
  height: 100%;
  background-color: rgba(4, 87, 167, 1)
}

.btn-brand-re-home-redbull:active,
.btn-brand-re-home-redbull:focus {
  background-color: inherit !important;
  /* Keep the original color */
  color: inherit !important;
  /* Keep text color */
  box-shadow: none !important;
  /* Remove Bootstrap's default shadow */
  border: 1px solid rgba(21, 31, 109, 1);
}

.btn-brand-re-home-redbull {
  padding: 12px, 19.1px, 12px, 17.91px;
  border-radius: 26px !important;
  gap: 10px;
  border: 1px solid rgba(21, 31, 109, 1);

  font-size: 16px !important;
  font-weight: 500 !important;



}

.btn-brand-re-home {
  padding: 12px, 19.1px, 12px, 17.91px;
  border-radius: 26px !important;
  gap: 10px;
  border: 1px solid rgba(21, 31, 109, 1);

  font-size: 16px !important;
  font-weight: 500 !important;



}

.container-img-show-point {
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-wrapper {
  position: relative;
  width: fit-content;
}

.w-img-7-11 {
  max-width: 100%;
  height: auto;
  display: block;
}

.promo-text {
  position: absolute;
  bottom: 10px;
  /* Adjust position from bottom */
  left: 50%;
  top: 0px;
  transform: translate(-55%, 37%);
  font-family: 'Prompt', sans-serif;
  /* Use a Thai-friendly font */
  font-size: 16px;
  /* Adjust font size */
  color: white;
  padding: 5px 10px;
  /* Add some padding around the text */
  border-radius: 5px;
  /* Rounded corners for the text background */
  text-align: center;
  white-space: nowrap;
  /* Prevents text from wrapping */
}

.promo-text-bigC {
  position: absolute;
  bottom: 10px;
  /* Adjust position from bottom */
  left: 50%;
  top: 0px;
  font-family: 'SukhumvitSet';
  font-weight: 500;
  transform: translate(-60%, 37%);
  font-size: 16px;
  /* Adjust font size */
  color: white;
  padding: 5px 10px;
  /* Add some padding around the text */
  border-radius: 5px;
  /* Rounded corners for the text background */
  text-align: center;
  white-space: nowrap;
  /* Prevents text from wrapping */
}

.promo-text-redbullexclusive {
  position: absolute;
  bottom: 28px;
  /* Adjust position from bottom */
  left: 14em;
  top: 0px;
  font-family: 'SukhumvitSet';
  font-weight: 500;
  transform: translate(-60%, 37%);
  font-size: 16px;
  /* Adjust font size */
  color: white;
  padding: 5px 10px;
  /* Add some padding around the text */
  border-radius: 5px;
  /* Rounded corners for the text background */
  text-align: center;
  white-space: nowrap;
  /* Prevents text from wrapping */
}

.promo-text-wrapper {
  position: absolute !important;
  left: 50% !important;

}

.promo-text-redbullexclusive-long {
  position: absolute;
  bottom: 28px;
  /* Adjust position from bottom */
  left: 15.5em;
  top: 0px;
  font-family: 'SukhumvitSet';
  font-weight: 500;
  transform: translate(-60%, 37%);
  font-size: 16px;
  /* Adjust font size */
  color: white;
  padding: 5px 10px;
  /* Add some padding around the text */
  border-radius: 5px;
  /* Rounded corners for the text background */
  text-align: center;
  white-space: nowrap;
  /* Prevents text from wrapping */
}

.promo-text-redbullexclusive-sub-1 {
  position: absolute;
  bottom: -2.5em;
  /* Adjust position from bottom */
  left: 16.2em;
  top: 0px;
  font-family: 'SukhumvitSet';
  font-weight: 500;
  transform: translate(-60%, 37%);
  font-size: 14px;
  /* Adjust font size */
  color: white;
  padding: 5px 10px;
  /* Add some padding around the text */
  border-radius: 5px;
  /* Rounded corners for the text background */
  text-align: center;
  white-space: nowrap;
  /* Prevents text from wrapping */
}

.promo-text-redbullexclusive-sub-2 {
  position: absolute;
  bottom: -2.5em;
  /* Adjust position from bottom */
  left: 16.5em;
  top: 0px;
  font-family: 'SukhumvitSet';
  font-weight: 500;
  transform: translate(-60%, 37%);
  font-size: 14px;
  /* Adjust font size */
  color: white;
  padding: 5px 10px;
  /* Add some padding around the text */
  border-radius: 5px;
  /* Rounded corners for the text background */
  text-align: center;
  white-space: nowrap;
  /* Prevents text from wrapping */
}

.promo-text-redbullexclusive-sub-3 {
  position: absolute;
  bottom: -2.5em;
  /* Adjust position from bottom */
  left: 16.8em;
  top: 0px;
  font-family: 'SukhumvitSet';
  font-weight: 500;
  transform: translate(-60%, 37%);
  font-size: 14px;
  /* Adjust font size */
  color: white;
  padding: 5px 10px;
  /* Add some padding around the text */
  border-radius: 5px;
  /* Rounded corners for the text background */
  text-align: center;
  white-space: nowrap;
  /* Prevents text from wrapping */
}

.promo-text-redbullexclusive-sub-4 {
  position: absolute;
  bottom: -2.5em;
  /* Adjust position from bottom */
  left: 17.3em;
  top: 0px;
  font-family: 'SukhumvitSet';
  font-weight: 500;
  transform: translate(-60%, 37%);
  font-size: 14px;
  /* Adjust font size */
  color: white;
  padding: 5px 10px;
  /* Add some padding around the text */
  border-radius: 5px;
  /* Rounded corners for the text background */
  text-align: center;
  white-space: nowrap;
  /* Prevents text from wrapping */
}

.btn-brand-re-home-makro {
  padding: 12px, 19.1px, 12px, 17.91px;
  border-radius: 26px !important;
  gap: 10px;
  border: 1px solid rgb(5, 5, 5);
  background-color: #ffffff;
  font-size: 16px !important;
  font-weight: 500 !important;



}

.btn-brand-re-home-redbull {
  padding: 12px, 19.1px, 12px, 17.91px;
  border-radius: 26px !important;
  gap: 10px;
  border: 1px solid #151F6D;
  background-color: #ffffff;
  font-size: 16px !important;
  font-weight: 500 !important;
}

/* .ele-back img{
  width:100% ;
} */
.ele-back {
  width: 21px;
}

.cus-form-ele {
  margin-top: -25px;
}

.cus-img-ele-ano {
  width: 60px;
  height: 60px;


}



.content-somplus {
  width: 100%;
  height: 100%;
}

.save-img .img-back-som {
  width: 100%;
  height: 100%;
}

.color-white-shart {
  color: #fff;
  margin-left: 10px;
}

.header-somplus {
  width: 100%;
  height: 85px;
  background-color: #c40000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  color: #ff0;
  font-size: 24px;
  font-weight: bold;
}

.header-somplus img {
  width: 50px;
  height: 50px;
  margin-right: 10px;

}

.text-horosc {

  position: absolute;
  width: 52%;
  text-align: left;
  z-index: 2;
  margin-left: 18px;
  left: 0;
  top: 0;
  transform: translate(0%, 120%);
  color: #ffffff;
}

.text-horosc-send-code {
  position: absolute;
  width: 55%;
  height: 100%;
  display: flex;
  z-index: 2;
  margin-left: 25px;
  left: 0;
  bottom: 0;
  color: #fff;
  text-align: left;

}

.text-horosc-send-code {
  transform: translate(0%, 15%);
}

.text-horosc-send-code-ho {
  position: absolute;
  width: 55%;
  height: 100%;
  display: flex;
  z-index: 2;
  margin-left: 25px;
  left: 0;
  bottom: 0;
  color: #fff;
  text-align: left;

}

.text-horosc-send-code-ho {
  transform: translate(0%, 18%);
}

@media screen and (min-width: 360px) {


  .text-horosc-titel {
    font-size: 20px !important;
  }
}

@media screen and (min-width: 400px) {

  .text-horosc {
    position: absolute;
    width: 60%;
    text-align: left;
    z-index: 2;
    margin-left: 18px;
    left: 0;
    top: 0;
    transform: translate(0%, 100%);
    color: #040404;
  }
}

@media screen and (min-width: 430px) {

  .text-horosc {
    position: absolute;
    width: 60%;
    text-align: left;
    z-index: 2;
    margin-left: 18px;
    left: 0;
    top: 0;
    transform: translate(0%, 120%);
    color: #0c0c0c;
  }
}

.num-auspicious {
  position: absolute;
  width: 100%;
  display: flex;
  z-index: 2;
  margin-left: 20px;
  left: 0;
  bottom: 0;
  transform: translate(0%, -80%);
}

.num-auspicious img {
  width: 74px;
  height: 132px;
}

.num-auspicious-ho {
  position: absolute;
  width: 100%;
  display: flex;
  z-index: 2;
  margin-left: 20px;
  left: 0;
  bottom: 0;
  transform: translate(0%, -40%);
}

.num-auspicious-ho img {
  width: 74px;
  height: 132px;
}

.num-auspicious-non-text {
  position: absolute;
  width: 80%;
  z-index: 2;
  top: 10%;
  transform: translate(-25%, 90%);
}

.num-auspicious-btn {
  position: absolute;
  display: flex;
  width: 100%;
  height: auto;
  z-index: 99;
  bottom: 0%;
  align-items: flex-start;
  left: 0%;
  color: #ffffff;
  transform: translate(5%, -230%);
}

.num-auspicious-btn-ho {
  position: absolute;
  display: flex;
  width: 100%;
  height: auto;
  z-index: 99;
  bottom: 0%;
  align-items: flex-start;
  left: 0%;
  color: #ffffff;
  transform: translate(5%, -100%);
}

.color-white {
  color: #ffffff !important;
  font-family: 'SukhumvitSet';
  font-weight: 700;
}

.num-auspicious-btn div {
  font-family: 'SukhumvitSet' !important;
  font-weight: 700;
  font-weight: 700 !important;

  color: #ffffff;

  font-size: 14px;
}

.cus-ele-ano {
  width: 100%;
  padding: 5%;


}

.cus-ele-ano-d {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 2%;
  padding-bottom: 2%;


}

.cus-ele-ano-d img {
  width: 72%;
  height: 2px;


}

.push-top-space-ele {
  display: inherit;
  /*   margin-top: -80px !important; */
}

.cus-ano-ra {
  margin-top: -8px !important;
}

.cus-ano-ra-d {
  margin-top: -5px !important;
}

.cus-ele-ano img {
  width: 100%;

}

.add-product-7-11 {
  width: 134px;
  font-size: 14px;
  padding-bottom: 5px;
  padding-top: 5px;
  padding-left: 5%;
  margin-left: 60%;
  gap: 10px;
  border-radius: 16px;
  border: 1px solid #000;

}

.box-show-img {
  width: 100%;
  height: 250.49px;
}

.cus-uplode-ele {
  width: 100%;
  text-align: center;
  height: 50px;

  z-index: 11;
}

.cus-form-eleven {}

.cus-uplode-ele p {

  padding-top: 5px;
  padding-bottom: 5px;
  background-color: rgba(0, 0, 0, 0.7) !important;

}

.point-tcp-s-ele {
  font-size: 10px;
  font-weight: 500;
  line-height: 16.56px;
  text-align: left;
  color: rgba(0, 128, 97, 1);
  padding-left: 5px;
  margin-top: 6px;

}

.point-tcp-s-ele-point {
  font-family: "SukhumvitSet";
  padding-left: 11px;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 1px;
  text-align: left;
  color: #2E2E2E;
  margin-top: -4px;
}

.text-color-red {
  color: red !important;
}

.point-tcp-redbull-point {
  font-family: "SukhumvitSet";
  padding-left: 11px;

  font-weight: 500;

  letter-spacing: 1px;
  text-align: left;
  color: #2E2E2E;

}

.point-tcp-s-ele-point-pro {
  font-family: 'SukhumvitSet';
  font-weight: 500;
  padding-left: 7px;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 1px;
  text-align: left;
  color: #2E2E2E;
  margin-top: -4px;
}

.box-show-img img {
  width: 100%;
}

.input-code-ele-brand img {
  padding: 2px;
  width: 60.86px;
  height: 60.86px;
}

.mm-cus-la {
  margin-top: -10px !important;
}

.input-code-ele img {
  width: 100%;
}

.cus-ele-footer {
  margin-top: -5px;

}

.list_menu_img-prk {
  width: 43px;
  height: 33px;
}

.text-hae-7-11 {
  font-family: 'SukhumvitSet';
  font-weight: 500;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  color: rgba(21, 31, 109, 1);
}

.cus-foot-7 {
  width: 100%;
  height: 10px;
  margin-top: -23px;
}

.cus-foot-puriku {
  width: 100%;
  height: 2px;
  margin-top: -20px !important;
}

.cus-foot-bigC {
  width: 100%;
  height: 4px;
  margin-top: -20px !important;
}

.row-promotion1 {
  display: flex;
  justify-content: center;
}




.fs-23 {
  font-size: 23px;
}

.fs-21 {
  font-size: 21px;
}

.fs-18 {
  font-size: 18px;
}

.fs-20 {
  font-size: 20px;
}

.fs-14 {
  font-size: 14px;
}

.margin-validate-phone {
  margin-left: 15px;
}

.button-container {
  position: relative;
}

.text-promption-tcp {
  font-family: 'SukhumvitSet';
  font-weight: 700;
  font-weight: 900;
  font-size: 24px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;

}

.head-tcp-img-center {
  display: block;
  width: 100%;
  /* ปรับขนาดภาพตามต้องการ */
}


.button-overlay {
  width: 100%;
  padding-left: 16%;
  padding-right: 13%;

  position: absolute;
  top: 11.2%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.button-overlay-puriku-m-ph-2 {
  width: 100%;
  position: absolute;
  top: 13%;
  left: 50.3%;
  transform: translate(-50%, 1036%);
  text-align: center;
}

.button-overlay-puriku-m-ph-2 img {
  width: 39% !important;
}


.button-overlay-puriku-ph-2 {
  width: 100%;
  /*   padding-left: 16%;
  padding-right: 13%; */

  position: absolute;
  top: -40%;
  left: 50%;
  transform: translate(-25.2%, 1066%);
  text-align: center;
}

.button-overlay-puriku-ph-2 img {
  width: 22.8% !important;
}

.button-overlay-puriku {
  width: 100%;
  /*   padding-left: 16%;
  padding-right: 13%; */

  position: absolute;
  top: 11.2%;
  left: 50%;
  transform: translate(-25.2%, 1066%);
  text-align: center;
}


.cus-px-puriku2 {
  padding-left: 7.5%;
  padding-right: 7.5%;
}




.button-overlay-puriku-m-ph-2 {
  width: 100%;
  position: absolute;
  top: 13%;
  left: 50.3%;
  transform: translate(-50%, 1036%);
  text-align: center;
}

.button-overlay-puriku-m-ph-2 img {
  width: 39% !important;
}

.button-overlay-puriku-m {
  width: 100%;

  position: absolute;
  top: 11.2%;
  left: 50%;
  transform: translate(-50%, 1036%);
  text-align: center;
}

.button-overlay-puriku-m img {
  width: 40.5% !important;
}

.button-overlay-puriku-ph-2 {
  width: 100%;
  /*   padding-left: 16%;
  padding-right: 13%; */

  position: absolute;
  top: -40%;
  left: 50%;
  transform: translate(-25.2%, 1066%);
  text-align: center;
}

.button-overlay-puriku-ph-2 img {
  width: 22.8% !important;
}

.button-overlay-ele {
  width: 100%;
  padding-left: 10%;
  padding-right: 10%;

  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.button-overlay img {
  width: 100%;
}

.button-overlay-ele img {
  width: 100%;
}

.space-marketplace {
  margin-top: 5.2rem;
}

.button-overlay-d {
  width: 67%;
  padding-left: 15%;
  padding-right: 13%;

  position: absolute;
  top: 22.2%;
  left: 48.6%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.button-overlay-d img {
  width: 100%;
}

.button-overlay-d-ele {
  width: 51%;
  padding-left: 15%;
  padding-right: 13%;

  position: absolute;
  top: 59.8%;
  left: 49%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.textterm-cuse {
  color: red;
}

.button-overlay-d-ele img {
  width: 100%;
}

.card-term-desktop-announce {
  width: 100%;
  max-width: 670px;
}

.px-cus-prk {
  padding-left: 7%;
  padding-right: 7%;
}

.card-term-desktop-announce-prk {
  width: 100%;


}

.card-term-desktop-announce-prk-cus {
  width: 100%;
  max-width: 1119px;
}

.layout-desktop-announce {
  display: flex;
  width: 100%;
  justify-content: center;
  flex-direction: row;
}

.text-succeed {
  color: rgba(20, 140, 0, 1);
  font-weight: 500;

}

.text-duct-ele {
  color: #000 !important;
}

.h-cuse-ele {
  height: 100%;
}

.img-add-btn img {

  width: 170px;
  height: 50px;
  top: 729px;
  left: 143px;
  padding: 6px 3px 5px 6px;
  gap: 10px;
  border-radius: 8px 0px 0px 0px;
  opacity: 0px;

}

.text-announce-main {
  color: #FFD200;
}

.text-announce-main-ele {
  color: #ffffff;
  font-family: 'SukhumvitSet';
  font-weight: 700;
  font-weight: 900;
}

.text-announce-main-redbullexclusive {
  color: #ffffff;
  font-family: 'SukhumvitSet';
  font-weight: 700;
  font-weight: 700;

  font-size: 20px;
}

.text-announce-main-redbull {
  color: #ffffff;
  font-family: 'SukhumvitSet';
  font-weight: 700 !important;
}

.text-announce-main-redbull-light {
  color: #ffffff;
  font-family: 'SukhumvitSet';
  font-weight: 400 !important;
}

.text-announce-puriku {
  width: 100%;
  height: 47px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(89.96deg, rgba(238, 77, 155, 0) 0%, #EE4D9B 27%, #EE4D9B 80%, rgba(238, 77, 155, 0) 99%);


  color: #ffffff !important;
  /*   font-family: 'SukhumvitSet';
  font-weight: 700; */
  font-weight: 900;
}

.back-tcp-add {
  height: 100%;
  background: linear-gradient(199.8deg, #600000 12.62%, #D80001 51.01%, #D20003 95.58%);

}

.cus-img-add img {
  width: 100%;

}

.fs-send-code-error {
  font-size: 40px;
}

.img-error-send-code {
  width: 48px !important;
  height: auto;
}

.text-add-tcp {
  line-height: 40px;
  font-size: 20px;
}

.text-w-re {
  font-family: 'SukhumvitSet';
  font-weight: 700;
}

.text-a-cuse {
  font-family: 'SukhumvitSet';
  font-weight: 700;
  font-weight: 700;
  color: rgba(21, 31, 109, 1);
}

.text-cus-term-tcp {
  font-family: 'SukhumvitSet';
  font-weight: 700;
  font-size: 17px;
  color: #292929 !important;
}

.mt-cus-profile {
  margin-top: 6.4rem !important;
}

.bg-puriku {

  background: radial-gradient(66.48% 66.7% at 50.56% 36.52%, #FFB6E2 27%, #E66498 98%);
}


.bg-redbull-exclusive-color {
  background: linear-gradient(to bottom, #0C307F 0%, #0873C9 25%, #5FBBE1 100%);
}

.bg-redbull-exclusive2-color {
  background: #0C307F;

}

.bg-puriku-lending {
  color: #000 !important;
  background: #FFC1EC;
}


.mt-cus-ele {
  margin-top: 5.4rem !important;
  margin-bottom: 6.4rem;
}

.mt-cus-ele-ready {
  margin-top: 5.4rem !important;
  padding-bottom: 1.4rem;
}

.bg-ready {
  background: url("/assets/images/ready/bg-ready-2.png") !important;
  background-size: cover !important;
  /* Or contain, auto, 100% 100%, etc. - see below */
  background-repeat: no-repeat !important;
  /* Often useful, especially with cover/contain */
}

strong,
b {
  font-weight: bold !important;
}

.bg-redbull-exclusive {
  background: url("/assets/images/redbull-exclusive/bg.png") !important;
  background-size: cover !important;
  /* Or contain, auto, 100% 100%, etc. - see below */
  background-repeat: no-repeat !important;
  /* Often useful, especially with cover/contain */
  background-position: center top 10em !important;
}

.bg-redbull-exclusive-login {
  background: url("/assets/images/redbull-exclusive/bg.png") !important;
  background-size: cover !important;
  /* Or contain, auto, 100% 100%, etc. - see below */
  background-repeat: no-repeat !important;
  /* Often useful, especially with cover/contain */
  background-position: center top 15em !important;
}

.bg-ktd-gold {
  background-image: url("/assets/images/ktd-gold/bg.jpg");
  background-repeat: no-repeat;
  background-size: 100% auto;
  /* Fix width, let height auto-adjust */
  background-position: top center;
  background-attachment: scroll;
  /* Or 'fixed' if you want parallax */
  min-height: 100vh;
  /* background-attachment: fixed !important; */
  /* min-height: 100vh;     Or a suitable min-height to cover the viewport */
  /* background-position: center 5em !important; */
}

.bg-ktd-gold-desktop {
  padding-top: 90vh;
  background: url("/assets/images/ktd-gold/bg-desktop.jpg") !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  /* background-attachment: fixed !important; */
  /* min-height: 100vh;     Or a suitable min-height to cover the viewport */
}

.mt-cus-ele-mak {
  margin-top: 5.4rem !important;

}

.mb-cus-purku {
  margin-bottom: 8rem !important;
}

.text-change-b {
  font-size: 12px;
  color: rgba(133, 133, 133, 1);


}

.cus-sen-block {
  margin-top: 5rem;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0px;
  text-align: left;
  color: red;

}

.list-style-faq {
  list-style-type: none;
}

.icon-x-error {
  margin-top: 5px;
}

.text-cuse-block {
  font-size: 12px !important;
}

.color-back {
  color: #000 !important;
}

.brand-have {
  margin-top: -2.3rem !important;
}

/* .brand-tcp-logo-hometcp{
  width: 36px;
  height: 36px;
  position: relative;
} */
.brand-tcp-logo-hometcp {
  position: relative;
  left: 81%;
  /* Center horizontally, adjust as needed */
  transform: translateX(-50%);
  transform: translateY(20%);
  width: 36px;
  height: 36px;

  /* You may need to adjust other styles like width, height, etc. */
}

.brand-tcp-logo {
  position: absolute;
  right: 0;
  width: 36px;
  height: 36px;
  margin-top: 3px;
  padding: 5px;
}

.btn-tcp-his {
  background-color: #fff;
  border-radius: 24px;
  border: 1px solid rgba(21, 31, 109, 1);
  padding: 10px 15px;
  font-weight: 900 !important;
  color: rgba(21, 31, 109, 1);
}

.text-red {
  color: red;
}

.mt-chang-tcp {
  margin-top: -5px !important;
}

.mt-chang-tcp-img {
  width: 76px !important;
  height: 77px !important;
}

.mt-chang-tcp-h-img {
  margin-top: -10px;
}

.text-home-tcp-h {
  font-family: 'SukhumvitSet' !important;
  font-weight: 700;
  color: rgba(41, 41, 41, 1);
}

.text-home-tcp-s {
  font-family: 'SukhumvitSet' !important;
  font-weight: 700;
  color: rgba(228, 0, 43, 1)
}

.text-home-tcp-p {
  font-family: 'SukhumvitSet' !important;
  font-weight: 700;
  color: rgba(21, 31, 109, 1) !important;
}

.text-home-tcp-b {
  color: rgba(41, 41, 41, 1);

}

.text-change-point {
  font-size: 24px !important;
  font-family: 'SukhumvitSet' !important;
  font-weight: 700;
}

strong,
b {
  font-weight: bold !important;
}


.text-change-point-faq {
  font-family: 'SukhumvitSet' !important;
  font-weight: 700;
}

.text-change-point-faq-n {
  color: #000;
}

.text-change {
  font-size: 14px;
  font-family: 'SukhumvitSet' !important;
  font-weight: 700;
}

.text-change-tcp-2 {
  font-size: 14px;
  font-family: 'SukhumvitSet' !important;
  font-weight: 700;
  margin-left: 5px !important;
}

.text-change-tcp-3 {
  font-size: 14px !important;
  font-family: 'SukhumvitSet' !important;
  font-weight: 700;

}

.text-change-tcp-3-1 {
  margin-top: 5px;
  font-size: 12px !important;
  font-weight: 400 !important;

}

.text-change-tcp-1 {
  position: relative;
  padding-top: 0;
  margin-left: 5px !important;


}

@media screen and (min-width: 413px) {

  .text-change-tcp-1 {
    position: relative;
    padding-top: 13px;
    margin-left: 5px !important;
  }
}

.modal-tcp-cus {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-color: #148C00;
}

.text-special-hae {
  font-size: 18px;
  font-weight: 700 !important;
  font-family: 'SukhumvitSet';
  font-weight: 700;
}

.text-special-body {
  font-size: 16px !important;
  font-weight: 100 !important;
  margin-top: -5px;
}

.text-special-hint {
  font-size: 12px !important;
  font-weight: 100 !important;
  margin-top: -5px;
}

.fs16 {
  font-size: 16px !important;
}

.fs14 {
  font-size: 14px;
}

.fs20 {
  font-size: 20px;
}

.img_shop {
  width: 54px;
  height: auto;
}

.bg-black {
  background-color: #000;
}

.padding_shop {
  padding-left: 8px;
  padding-right: 8px;
}

.padding_profile {
  padding-left: 16px;
  padding-right: 16px;
}

.padding_left_16 {
  padding-left: 16px;
}

.dark-text {
  color: #292929
}

.text-sen-code {
  font-weight: 700 !important;
}

.about-tcp {
  padding: 20px 90px;
}

.text-kab {
  font-size: 16px !important;
}

.text-mes {
  color: #000 !important;
  font-weight: 100;
}

.som-btm {
  height: 47px;
  background-color: #B92326;
  border: 1px solid #B92326;
}

.text-mes-pro {
  color: #2E2E2E !important;

}

.text-alert {
  color: #E41E26 !important;

}

.border-friend-get-friend {
  border-bottom: 1px solid #EBEBEB
}

.regularfont {
  font-family: "SukhumvitSet" !important;
}

.basefont {
  font-family: "SukhumvitSet" !important;
}

.boldfont {
  font-family: "SukhumvitSet" !important;
}

.d-webkit-box {
  display: -webkit-box !important;
}

.bg-red-tcp {
  background-color: rgba(228, 0, 43, 1);
}

.back-info {
  width: 45px;
}

.Vector_blue {
  margin-left: 10px;
  margin-top: -1px;

}

.block-name {
  display: flex;
  justify-content: start;

}

.block-name-none {
  display: flex;
  justify-content: start;
}

.position_next {
  margin-top: -3.5rem;
}

.banner-sm {
  display: block;
}

/*=================== radio and checkbox ======================*/

.radio,
.check {
  position: relative;
  cursor: pointer;
  line-height: 16px;
}

.radio .label,
.check .label {
  position: relative;
  display: block;
  float: left;
  margin-right: 10px;
  width: 22px;
  height: 22px;
  border: 1px solid #D4D4D4;
  background-color: var(--color-white30);
  -webkit-tap-highlight-color: transparent;
}

.radio .label {
  border-radius: 50%;
}

.check .label {
  border-radius: 50%;
}

.radio .label:hover .label:after,
.check .label:hover .label:after {
  transform: scale(1);
}

.radio2 .label:after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(54, 1, 0, 1) 0%, rgba(205, 24, 30, 1) 31%, rgba(57, 1, 2, 1) 100%);
  transform: scale(0);
  transition: all .2s ease;
  opacity: .08;
  pointer-events: none;
}

.radio .label:after,
.check .label:after {
  content: '';
  position: absolute;
  top: 6px;
  left: 5px;
  width: 16px;
  height: 16px;
  border-radius: 100%;
  background-image: url(../images/check.svg);
  background-repeat: no-repeat;
  background-size: 11px auto;
  transform: scale(0);
  transition: all .2s ease;
  opacity: .08;
  pointer-events: none;
}


.radio input[type="radio"]:checked+.label,
.check input[type="checkbox"]:checked+.label {
  background: #151F6D;
  border: none;
}

.radio input[type="radio"]:checked+.label:after,
.check input[type="checkbox"]:checked+.label:after {
  transform: scale(1);
  transition: all .2s ease-out;
  opacity: 1;
}

.hidden {
  display: none;
}

.opt-box {
  display: table-cell;
  width: 100%;
  word-break: break-all;
}

.color-tcp {
  color: rgba(21, 31, 109, 1);
  font-weight: 700;
  font-size: 16px;
}

.special-tab {
  margin-top: 8px;
  padding-top: 16px;
  padding-left: 16px;
  padding-right: 16px;
}

.list_menu_img_redbull {
  width: 50px !important;
  height: 33px !important;
}

.list_menu_img {
  /*   width: 100%; */
  height: 33px;
}

.list_menu_img-some {
  width: 55px;
  height: 33px;
}

.list_menu_img-ele {
  width: 45px;
  height: 33px;
}

.list_menu_img_list {
  width: 50px;
  /* Adjust image width as needed */
  height: 50px;
  /* Adjust image height as needed */
  object-fit: contain;
  /* Ensure the image fits within its container */
}

.text-bill {
  font-family: 'SukhumvitSet';
  font-weight: 700;
  font-size: 20px;
  font-weight: 700;
  /* line-height: 27.57px; */
  text-align: center;

}

.containerRecEx {
  position: relative;
  display: inline-block;
}

.iconRecEx {
  position: absolute;
  top: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.3);
  padding: 5px;
  border-radius: 50%;
}

.reward-success-tc {
  width: 75%;
}

.list_menu_img_list {
  width: 35px;
  height: 35px;
}

.text_list_menu_img {
  font-family: "SukhumvitSet";
  font-weight: 600;
  font-size: 10px;
  padding-top: 5px;
}

.text_list_menu_img-rider {
  font-family: "SukhumvitSet";
  font-weight: 600;
  font-size: 10px;
  padding-top: 13px;
}

.text_menu_list_img {
  font-family: "SukhumvitSet";
  font-weight: 600;
  font-size: 10px;
  padding-top: 5px;
}

.padding_list_manu {
  padding-top: 26px;
  /*   padding-left: 16px;
  padding-right: 16px; */
}

.padding_menu_list {
  padding-top: 16px;
  /*   padding-left: 16px;
  padding-right: 16px; */
}

.position_sub_menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.col-cus-list {
  width: 20%;
}

.position_sub_menu_list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 20px;
  text-align: center;
  flex-wrap: wrap;
  width: 20%;
}

.box-list-item-home {
  width: 100%;
  /* overflow-y: auto; */
  max-height: 100vh;
  /* Set a maximum height to prevent overlap */
  /* overflow: hidden; */
}

.box-list-item-menu-list {
  width: 100%;
  /* overflow-y: auto; */
  max-height: 100vh;
  /* Set a maximum height to prevent overlap */
  /* overflow: hidden; */
}

.link-dark-bu {
  text-decoration-line: underline;
}

.date-cus-tcp {
  color: #000000 !important;
}

.text-profile-hae {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0px;
  text-align: left;
  color: rgba(228, 0, 43, 1);
  margin-left: 5px;

}

.text-profile-hae-red {
  color: rgba(228, 0, 43, 1);
}

.box-code-tcp {
  top: 0;
  width: 100%;
  height: 80%;
}

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

.box-send-code-tcp {
  width: 100%;
}

.box-send-code-tcp img {
  width: 100%;

}

.text-shop-tcp-profile {

  font-size: 16px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0px;
  text-align: left;

}

.box-3re {
  padding: 20px;
  border-radius: 8px;
  background: var(--white, #FFF);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
  margin-bottom: 10px;
}

.toggle-profile {
  display: flex;
  height: 50px;
}

.action-toggle-wrapper {
  background-color: #ffffff;
  padding-top: 16px;
  padding-bottom: 8px;
  padding-left: 12px;
  padding-right: 12px;
}

.action-toggle-wrapper .toggle .toggle-btn.active {
  background-color: #ffffff;
}

.btn-check:active+.btn-pomoton-open,
.btn-check:checked+.btn-pomoton-open,
.btn-pomoton-open.active,
.btn-pomoton-open:active,
.show>.btn-pomoton-open.dropdown-toggle {
  color: #fff;
  background-color: #000000;
  border-color: #000000;
}

.user-info-regiter {
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-nav-1 {
  padding: 0;
  margin-top: -10px;
}

.img-nav-2 {
  padding: 0;
  margin-top: -10px;
}

.img-nav-3 {
  /* width: 78px;
  height: auto; */
  padding: 0;
  margin-top: -10px;
}

.img-nav-4 {
  padding: 0;
  margin-top: -10px;
}

.img-nav-5 {
  padding: 0;
  margin-top: -10px;
}

.padding_main {
  padding: 16px;
}

.padding_top_main {
  padding-top: 16px;
}

.text-sub-point {
  margin-top: -5px;
}

.text-sub-point .img-ele {
  width: 17px;
  height: 20px;
  gap: 0px;
}

.header-rider {
  max-width: 424px;
  max-height: 362px !important;
}

.header-rider-banner {
  width: 100%;
  height: 100%;
}

.enjoy-1 {

  width: 100px;


}

.position_sub_menu {
  position: relative;
  display: inline-block;
  text-align: center;
}

.image-container {
  position: relative;
  display: inline-block;
}



.overlay-text {
  position: absolute;
  top: -20px;
  /* Adjust as needed */
  right: -40px;
  /* Adjust as needed */
  background-color: #12B36A;

  color: white;
  padding: 2px 7px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.text-day-be {
  color: #45B061 !important;
}

.text-header-enjoy-dey {
  margin-top: -10px;
  font-size: 18px;
  font-weight: 500;
  color: #000;
  text-align: center;

}

.text-header-enjoy {

  font-size: 24px;
  font-family: 'SukhumvitSet';
  font-weight: 500;
  font-weight: 900;
  color: #000;
  text-align: center;
  color: #45B061;

}

.enjoy-1-text {

  font-size: 10px;
  font-weight: 500;
  color: #000;
  text-align: center;
}

.enjoy-1-img {
  width: 60px;
  height: 60px;


}

.enjoy-2 img {
  width: 60px;
  height: 60px;

}

.enjoy-3 img {
  width: 60px;
  height: 60px;

}

.text-sub-point .img-point-brand {
  width: 21px;
  height: 21px;
  margin-top: -2px;
}

.text-sub-point .img-point-brand-chance {
  width: 21px;
  height: 21px;
  margin-top: -2px;
}

.img-point-brand-X-rider {
  width: 60px;
  height: 24px;


}

.list_menu_img-ktd {
  width: 38px;
  height: 30px;
}

.logo-point-brand {
  width: 19px;
  height: 19px;

}

.text-sub-main {
  font-family: "SukhumvitSet";
  font-weight: 600;
  color: #2E2E2E;
  font-size: 14px;
}

.modal-body-block {
  padding: 0px !important;
}

.text-sub-font {
  font-family: "SukhumvitSet";
  font-weight: 600;
  color: #151F6D;
  font-size: 14px;
}

.text-head-main {
  color: #2E2E2E;
  font-size: 14px;
}

.margin-flash-deal {
  margin-left: 8px;
  padding-right: 8px;
}

.margin-tax {
  margin-left: 30px;
}

.position-tax {
  margin-top: -4px;
}

.flash-deal {
  font-size: 14px;
  border-radius: 2px;
  line-height: 100%;
  background: #E4002B;
  color: #FFFFFF;
  padding-left: 5px;
  padding-right: 4px;
}

.img-icon-mini {
  width: 25px;
  height: 25px;
}

.text-name-announce {
  font-family: 'SukhumvitSet';
  font-weight: 500;
  font-size: 20px;
  font-weight: 700;
  text-align: center;

}

.text-name-announce-light {
  font-family: 'SukhumvitSet';
  font-weight: 500;
  font-size: 20px;
  font-weight: 500;
  text-align: center;

}

.text-name-announce-bigc {
  font-size: 16px !important;
  text-align: center;
}

.text-name-announce-ktd {
  font-size: 19px !important;
  text-align: center;
}

.text-name-announce-sub {
  font-family: 'SukhumvitSet';
  font-weight: 500;
  font-size: 22px;
  font-weight: 500;
  text-align: center;

}

.class-slide {
  flex: 0 0 auto;
}

.main-size-text {
  font-size: 16px;
}

.img-fluid-campign {
  max-width: 234px;
  width: 100%;
  height: auto;
}

.btn-profile-cus {
  color: #858585;
  text-align: center;
  background: #F6F6F6;
  /* Title H3 Med */
  font-family: "SukhumvitSet";
  font-weight: 600;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  /* 125% */
  display: flex;
  width: 100%;
  padding: 4px;
  justify-content: center;
  align-items: center;
  height: 40px;
}

.btn-check:active+.btn-profile-cus,
.btn-check:checked+.btn-profile-cus,
.btn-profile-cus.active,
.btn-profile-cus:active,
.show>.btn-profile-cus.dropdown-toggle {
  color: #ffffff;
  background-color: #0095DA;
  border-color: #f8f8f8;
  height: 40px;
  font-family: "SukhumvitSet";
}

.text-header-marketplace {

  font-size: 18px;
  font-weight: 500;
  line-height: 29.97px;
  text-align: left;
  color: #292929;

}

.text-valid-marketplace {
  font-size: 13px;
  font-weight: 700;
  line-height: 17.3px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #EC4127;
}

.text-header-form-marketplac {
  font-weight: 300;
  font-size: 16px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #6E6E6E;
}

.text-sub-header-marketplace {
  font-weight: 300;
  font-size: 17px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #6E6E6E;
}

.container-marketplace-success {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
}

.content-marketplace-success {

  text-align: center;
  background: white;
  padding: 20px;
  border-radius: 10px;

}


.history-btn-marketplace {
  width: 222px;
  height: 44px;
  padding: 9px 32px 9px 32px;
  gap: 10px;
  border-radius: 24px;
  background-color: white;

  border: 1px solid var(--TCP-MAIN, #151F6D);
}

.cancel-btn-marketplace {
  background-color: white;
  width: 222px;
  height: 44px;
  padding: 9px 32px 9px 32px;
  gap: 10px;
  border-radius: 24px;
  color: #E4002B;
  border: 1px solid var(--TCP-Red, #E4002B);
}

.text-marketplace-success {
  font-size: 18px;
  font-weight: 500;
  line-height: 29.8px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #0095DA;
}

.text-marketplace-cancel {

  font-size: 18px;
  font-weight: 500;
  line-height: 29.8px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #E4002B;

}

.tiktok-connect-seccess-layout {
  display: flex;
  align-items: center;
  height: 86px;
}

.text-marketplace-sub-success {
  font-size: 16px;
  font-weight: 400;
  line-height: 26.03px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #292929;

}

.text-sample-oreder-number {
  font-size: 16px;
  font-weight: 500;
  line-height: 26.49px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #151F6D;
}

.text-header-popup-sample-order {
  font-size: 16px;
  font-weight: 700;
  line-height: 27.69px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #151F6D;

}

.border-bottom-line {
  width: 100%;
  border: 1px solid #EBEBEB;
}

.text-arrow-left-marketplace {
  display: flex;
  align-items: center;
  height: 86px;
}

.layout-main-marketplace {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  width: 100%;
  /* ความกว้างเต็มหน้าจอ */
  max-width: 100%;
  /* ไม่เกิน container */
  box-sizing: border-box;
}

.flex-text-status {
  display: flex;
  height: 86px;
  align-items: center;
}

.text-status-marketplace {
  font-family: "SukhumvitSet";
  font-weight: 300;
  font-size: 16px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #6E6E6E;
  margin-left: 16px;
}

.text-name-user-marketplace {
  margin-left: 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #292929;
}

.text-date-user-marketplace {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  margin-left: 12px;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #858585;
}

@media (max-width:375px) {
  .text-date-user-marketplace {
    font-size: 10px;
    font-weight: 400;
    line-height: 24px;
    margin-left: 12px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #858585;
  }
}

.header-marketplace {
  display: flex;
  align-items: center;
  flex-direction: row;
  height: 85px !important;
  background-color: #E4002B;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  padding-left: 8px !important;
}


.btn-profile-marketplace {
  color: #858585;
  text-align: center;
  background: #F6F6F6;
  /* Title H3 Med */
  font-family: "SukhumvitSet";
  font-weight: 600;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  /* 125% */
  display: flex;
  width: 100%;
  padding: 4px;
  justify-content: center;
  align-items: center;
  height: 40px;
}

.btn-check:active+.btn-profile-marketplace,
.btn-check:checked+.btn-profile-marketplace,
.btn-profile-marketplace.active,
.btn-profile-marketplace:active,
.show>.btn-profile-marketplace.dropdown-toggle {
  color: #ffffff;
  background-color: #E4002B;
  border-color: #f8f8f8;
  height: 40px;
  font-family: "SukhumvitSet";
}

.btn-profile-cus-ele-redbullexclusive {
  color: #FFFFFF !important;
  text-align: center;
  background: #151F6D !important;
  font-family: "SukhumvitSet";
  font-weight: 600;
  font-size: 16px;
  border-radius: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  display: flex;
  width: 100%;
  padding: 4px;
  justify-content: center;
  align-items: center;
  height: 40px;
}

.btn-profile-cus-ele-summer {
  color: #0B59A4;
  text-align: center;
  background: #F7E634;
  /* Title H3 Med */
  font-family: "SukhumvitSet";
  font-weight: 600;
  font-size: 16px;
  border-radius: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  /* 125% */
  display: flex;
  width: 100%;
  padding: 4px;
  justify-content: center;
  align-items: center;
  height: 40px;
}

.btn-profile-cus-ele {
  color: #858585;
  text-align: center;
  background: #F6F6F6;
  /* Title H3 Med */
  font-family: "SukhumvitSet";
  font-weight: 600;
  font-size: 16px;
  border-radius: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  /* 125% */
  display: flex;
  width: 100%;
  padding: 4px;
  justify-content: center;
  align-items: center;
  height: 40px;
}

.btn-check:active+.btn-profile-cus-ele,
.btn-check:checked+.btn-profile-cus-ele,
.btn-profile-cus-ele.active,
.btn-profile-cus-ele:active,
.show>.btn-profile-cus-ele.dropdown-toggle {
  color: #ffffff;
  background-color: #151F6D;
  border-color: #f8f8f8;
  height: 40px;
  font-family: "SukhumvitSet";
}

.user-info-ing-line {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #fff;

}

.user-info-ing-line-regiter {
  width: 124px;
  height: 124px;
  border-radius: 50%;
  border: 3px solid #151F6D;
  margin-top: -5px;
}

.cus-crad-recom {
  display: block;
  width: 100%;
  border-radius: 8px;
  margin-bottom: 10px;
}

.reward-pic-tcp-be {
  /* padding-right: 20px; */
}

.reward-card-new-tcp {
  border-radius: 0.5rem;
  border: none;
  pointer-events: auto;
  cursor: pointer;
  width: 100%;
}

.reward-card-new-tcp.mark-full {
  pointer-events: none;
}

.reward-card-new-tcp.mark-full .reward-pic-tcp-be {
  position: relative;
}

.reward-card-new-tcp.mark-full .reward-pic-tcp-be::before {
  content: '';
  position: absolute;
  background-color: rgba(0, 0, 0, 0.4);
  top: 0;
  left: 0;
  margin-left: 0.45px;
  width: 100%;
  height: 100%;
  border-radius: 7.8%/18.4%;
  /*   border-top-left-radius: 18%/9%; */
  /* border-top-right-radius: 5% 5%;
  border-bottom-left-radius: 5%;
  border-bottom-right-radius: 5%;   */
}

.reward-card-new-tcp.mark-full .reward-pic-tcp-be::after {
  content: attr(data-title);
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  /*   background-image: url(../images/mark-frame.svg);
 */
  background-repeat: no-repeat;
  background-size: 80% 80%;
  background-position: center center;
  font-size: 1.5rem;
  font-weight: 450;
  color: #ffffff;
  text-align: center;
  white-space: pre-wrap;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  -webkit-transform: translate(-50%, -50%) rotate(0deg);
  transform: translate(-50%, -50%) rotate(0deg);
}

@media (min-width: 375px) {
  .reward-card-new-tcp.mark-full .reward-pic::after {
    font-size: 1.5rem;
  }
}

@media screen and (min-width: 768px) {

  .reward-card-new-tcp.mark-full .reward-pic::after {
    font-size: 1.1rem;
  }

  .text-positionreward-pic {
    text-align: center;
    color: #121212;
    font-size: 8.5px !important;
    font-weight: 400;
    margin-top: -1.5rem;
    padding-left: 43.8%;
  }
}

.reward-pic-tcp {
  width: 100vw;
  overflow: auto;
  display: flex;
  height: 100%;
  background-color: #ffffff;
}

.reward-container-tcp {
  display: flex;
  flex-wrap: wrap;
  /* To allow wrapping if the cards exceed the container width */
  justify-content: space-between;
  /* Adjust this as needed */
}

.cus-chevron-tcp-text {
  color: var(--TCP-MAIN, #111827);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  /* 18px */
}

.cus-chevron-tcp-text-sub {
  color: var(--TCP-MAIN, #0095DA);
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: 100%;
  /* 18px */
  font-family: "SukhumvitSet";
  font-weight: 600;
}

.cus-chevron-tcp {
  margin-top: -1.8px;
  width: 18px;
  height: 11px;
}

.img-logo-car {
  width: 80%;
  height: auto;
}

.banner-lg {
  display: none;
}

.text-hmud-other {
  color: #C9291D;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.text-munber-other {
  color: #828282;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.lahatpet {
  color: #E71812;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
  /* 17.6px */
}

.img-announce-reward {
  max-width: 250px;
  width: 100%;
  height: auto;
}

.img-announce-reward-makro {

  width: 100%;
  height: auto;
}

@media screen and (min-width: 576px) {
  .img-announce-reward {
    max-width: 350px;
    width: 100%;
    height: auto;
  }

  .img-announce-reward-makro {
    max-width: 450px;
    width: 100%;
    height: auto;
  }

  .banner-sm {
    display: none;
  }

  .banner-lg {
    display: block;
  }

  .back-tcp-add {
    width: 100%;
    padding: 0;
    height: 100%;
  }
}

.btn-check:focus+.btn,
.btn:focus {
  outline: 0;
  box-shadow: 0 0 0 0 rgba(95, 97, 98, 0.25);
}

.card-profile {
  border-radius: 8px;
  background-color: #ffff;
}

.card-profile-ktd {
  border-radius: 8px;
  background-color: #ffff;
}

.img-edit-profile {
  width: 70px;
  height: 70px;
}

.position-edit-profile {
  display: flex;
  justify-content: end;
  text-align: end;
}

.text-title-other {
  color: #555555;
}

.line-other-position {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;


}

.position-other-title {
  padding-top: 1.3rem;
}

.py-13 {
  padding-top: 13px;
  padding-bottom: 13px;
}

/* #point11 img{
  position: absolute;
  z-index:999;
} */

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

.text-head-rewardgame {
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  color: #858585;
}

.text-sub-rewardgame {
  font-size: 14px;
  text-align: center;
  color: #858585;
}

.detail-game-reward {
  margin-top: 6rem;
  display: flex;
  justify-content: center;
  align-items: center;

}

.bg-address-game {
  display: flex;
  width: 100%;
  height: 22px;
  background-color: #E4002B;
  text-align: center;
  justify-content: center;
  align-items: center;
}

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

.mg-show-log img {
  width: 91px !important;
  height: 110px !important;
}

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

.btn-gold-new-tcp {
  color: #fff !important;
  border-radius: 24px !important;
  background: #0095DA;
}

.btn-reward-game-new-tcp {
  color: #151F6D !important;
  border-radius: 24px !important;
  border: 1px solid #151F6D;
  background: #ffffff;
}

.tcp-text-history {
  color: rgba(133, 133, 133, 1) !important;
  font-weight: 900;
  font-size: 18px !important;

}

.tcp-text-history-body {
  color: rgba(133, 133, 133, 1) !important;
  font-size: 14px !important;

}

.btn-brand-tcp {
  background: #0095DA;
  box-shadow: 0px 1px 9px rgba(0, 0, 0, 0.1);
  border-radius: 56px !important;
  color: #fff !important;
}

.cancleBtnRegister {
  color: #111827;
  height: 44px;
  background: #ffffff;
  border: 1px solid #C4C4C4;
}

.custom-swal-content {
  font-size: 14px !important;
}

.cancleBtnrider {
  color: #ffffff;
  height: 44px;
  background: #0095da;
  border: 1px solid #C4C4C4;
}

.cancleBtnriderCC {
  color: #111827;
  height: 44px;
  background: #ffffff;
  border: 1px solid #C4C4C4;
}

.cancleBtnriderCF {
  color: #ffffff;
  height: 44px;
  background: #f43920;
  border: 1px solid #C4C4C4;
}

.cancleBtnRegister-tcp {
  color: #ffffff;
  background: rgba(21, 31, 109, 1);
  height: 44px;
  border: 1px solid rgba(21, 31, 109, 1);
}

.cancleBtnRegister-tcp-recode {
  color: #ffffff;
  background: #E4002B;
  height: 44px;
  border: 1px solid #E4002B
}

.cancleBtnRegister-summer {
  color: #ffffff;
  background: #0B59A4;
  height: 44px;
  border: 1px solid rgba(21, 31, 109, 1);
}

.submitBtnRegisater {
  background: #0395da;
  border: 1px solid #0395da;
}

.submitBtnRegisater-block {
  color: #ffffff;
  background: #0095da;

  height: 44px;
  border: 1px solid rgba(21, 31, 109, 1);
  border-radius: 0 0 4px 4px;
  /* ขอบโค้งด้านล่างเท่านั้น */


}

.w-img-banner {
  width: 100%;
  height: auto;
}

.w-img-7-11 {
  width: 100%;
  height: 100%;
}

.text-term-announce {
  padding-left: 15px;
  padding-right: 10px;
}

.text-term-announce p {
  font-size: 15px !important;
}

.bg-white-red {
  border-radius: 8px;
  background: #C9291D;
  -webkit-box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, .2);
  -moz-box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, .2);
  box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, .2);
}

.bg-light-gray {
  background-color: #F4F4F4;
}

.bg-error-red {
  background-color: #EC4127;
}

.cus-text-land-prk {
  font-family: 'SukhumvitSet';
  font-weight: 700;
}

.text-pro-2 {
  color: var(--TCP-MAIN, #151F6D);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.text-black-cus-p {
  color: #000 !important;
  font-weight: 100 !important;
}

.text-black {
  color: #000 !important;
}

.text-white {
  color: #ffffff !important;
}

.text-pro-spen {
  /* color: var(--TCP-MAIN, #151F6D); */
  font-size: 14px;
  font-style: normal;
  font-weight: 200;
  line-height: normal;
}

.text-detail-pro {
  /* color: var(--TCP-MAIN, #151F6D); */
  font-size: 16px;
  font-style: normal;
  font-weight: 100;
  line-height: normal;

}

.text-detail-pro-svg {
  width: 18px !important;
  height: 18px !important;
}

.border-default {
  border-color: #D4D4D4 !important;
}

.card-body-tcp-code-text {
  color: var(--White, #FFF);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;

}

.card-body-tcp-code-text-redbull {
  color: var(--White, #FFF);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;

}

.border-light,
.reward-card .reward-des-info>div {
  border-color: #EBEBEB !important;
}

.card-body-tcp-code {
  border-radius: 0px 0px 12px 12px;
  background: var(--TCP-Red, #E4002B);
}

.border-dash {
  border-style: dashed !important;
}

.box-rounded-none {
  border-radius: 0 !important;
}

.box-rounded-top {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  margin-top: -1.5rem;
}

.box-rounded-top-md {
  border-top-left-radius: 0.75rem !important;
  border-top-right-radius: 0.75rem !important;
}

.box-rounded-bottom-md {
  border-bottom-left-radius: 0.75rem !important;
  border-bottom-right-radius: 0.75rem !important;
}

.box-rounded-all-md {
  border-radius: 0.75rem !important;
}

.box-rounded-all-sm {
  border-radius: 0.5rem !important;
}

.box-rounded-all-xs {
  border-radius: 0.375rem !important;
}

.shadow-style1 {
  -webkit-box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.15);
}

.shadow-style2 {
  -webkit-box-shadow: 0px 1px 10px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 1px 10px 3px rgba(0, 0, 0, 0.1);
}

.absolute-top {
  top: 30%;
  left: 0;
}

.chang-color {
  color: #ffffff !important;
}

.row-promotion1-ele {
  background-color: #0B59A4 !important;
  padding-bottom: 20px;
  height: 100%;
}

.push-bottom-space {
  display: inherit;
  padding-bottom: 4.5625rem;
}

@media (min-width: 992px) {
  .push-bottom-space {
    display: none;
  }
}

.push-top-space {
  display: inherit;
  padding-top: 82px;
}

.push-top-space2 {
  display: inherit;
  padding-top: 20px;
}

.push-top-space3 {
  display: inherit;
  padding-top: 123px;
}

.push-top-space4 {
  display: inherit;
  padding-top: 82px;
}

@media (max-width: 540px) {
  .push-top-space4 {
    display: none;
  }
}

.push-top-space5 {
  display: inherit;
  padding-top: 80px;
}

.overflow-hide {
  overflow: hidden;
}

.box-scroll {
  max-height: 100%;
  overflow: scroll !important;
}

/* 
.typo-micro {
  font-size: 0.75rem;
}

.typo-sm {
  font-size: 0.875rem;
}

.typo-md {
  font-size: 1rem;
  font-family: "SukhumvitSet";
  font-weight: 600;

}

.typo-lg {
  font-size: 1.125rem;
  line-height: inherit;
}

.typo-xl {
  font-size: 1.25rem;
}

.typo-macro {
  font-size: 1.5rem;
} */

.typo-micro {
  font-size: 0.625rem;
  /* fallback = 10px */
  font-size: clamp(0.625rem, 1.28vw + 0.44rem, 0.75rem);
  /* 10–12px */
}

.typo-sm {
  font-size: 0.875rem;
  /* fallback = 14px */
  font-size: clamp(0.8125rem, 2.13vw + 0.41rem, 1rem);
  /* 13–16px */
}

.typo-md {
  font-size: 1rem;
  /* fallback = 16px */
  font-size: clamp(1rem, 2.13vw + 0.47rem, 1.125rem);
  /* 15–18px */
  font-family: "SukhumvitSet";
  font-weight: 600;
}

.typo-lg {
  font-size: 1.25rem;
  /* fallback = 20px */
  font-size: clamp(1.125rem, 4.26vw + 0.32rem, 1.3rem);
  /* 18–24px */
  line-height: inherit;
}

.typo-xl {
  font-size: 1.5rem;
  /* fallback = 24px */
  font-size: clamp(1.25rem, 4.26vw + 0.56rem, 1.75rem);
  /* 20–28px */
}

.typo-macro {
  font-size: 1.875rem;
  /* fallback = 30px */
  font-size: clamp(1.5rem, 6.38vw + 0.62rem, 2.25rem);
  /* 24–36px */
}


.size-tcp-text {
  font-size: 17px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.text-center {
  text-align: center;
}

.text-center-puriku {
  text-align: center;
  color: rgba(41, 41, 41, 1);
}

.text-term-puriku-color {
  color: rgba(41, 41, 41, 1);
}

.btn-outline-tcp {
  border-radius: 24px;
  background: #EBEBEB;
  color: #C8C8C8;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.container-login {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container-login-tcp-code {
  display: flex;
  justify-content: end;
  align-items: center;
  margin-top: 10px;

}

.diy-btn-tcp {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-left: 5%;
  padding-right: 5%;
}

.form-style-announce {

  padding-left: 5%;
  padding-right: 5%;
}

.rek-con {
  width: 100%;
  display: flex;
  justify-content: center;
}

.copy-container {
  display: flex;
  width: 100%;
  align-items: center;
  border: 1px solid #d3d3d3;
  border-radius: 8px;
  padding: 10px 15px;
  width: fit-content;
  font-family: Arial, sans-serif;
  font-size: 18px;
  color: #333;
}

#copyText {
  margin-right: auto;
}

.copy-button {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #333;
}

.copy-button:focus {
  outline: none;
}

/* กล่องหุ้ม barcode */
.code-container {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  overflow-x: auto;
}

/* ทำให้ SVG ยืดตามกล่องแทนที่จะใช้ width="332px" ตายตัว */
.code-container svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.code-text {
  font-size: clamp(14px, 4.5vw, 18px);
}

.recode-container {
  position: relative;
  display: inline-block;
  width: fit-content;
}

.base-image {
  display: block;
  width: 100%;
}

.overlay-button {
  width: 80px;
  height: 30px;


  position: absolute;
  top: 50%;
  /* Adjust based on where you want it to appear */
  right: 10%;
  /* Adjust based on where you want it to appear */
  transform: translate(0, -50%);
  cursor: pointer;
}

.overlay-text-friend {
  position: absolute;
  top: 50%;
  /* Adjust based on where you want it to appear */
  left: 20%;
  /* Adjust based on where you want it to appear */
  transform: translate(0, -50%);
  cursor: pointer;
  font-size: 16px;
}

.font-overlay-sub-friend-get-friend {
  font-size: 14px;
}

@media (max-width:375px) {
  .overlay-text-friend {

    font-size: 14px;
  }

  .font-overlay-sub-friend-get-friend {
    font-size: 12px;
  }
}

@media (max-width:340px) {
  .overlay-text-friend {

    font-size: 12px;
  }

  .font-overlay-sub-friend-get-friend {
    font-size: 10px;
  }
}

.announce select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("../images/icon-select.svg");
  background-repeat: no-repeat;
  background-position-x: 95%;
  background-position-y: 12px;
  padding-top: 8px;
  padding-left: 17px;
  padding-right: 10px;
  padding-bottom: 6px;
  border-radius: 25px;
  /* กำหนดมุมให้โค้ง */
  border: none;
  /* ไม่มีเส้นขอบ */
  background-color: white;
  /* กำหนดสีพื้นหลัง */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  /* กำหนดเงา */
  width: 302px;
}


.announce select::placeholder {
  /* เซ็ตสีของ placeholder เป็นสีเทา */
  color: #808080;
}

.announce input {
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("../images/search.svg");
  background-repeat: no-repeat;
  background-position-x: 95%;
  background-position-y: 10px;
  padding-top: 8px;
  padding-left: 17px;
  padding-right: 10px;
  padding-bottom: 6px;
  border-radius: 25px;
  /* กำหนดมุมให้โค้ง */
  border: none;
  /* ไม่มีเส้นขอบ */
  background-color: white;
  /* กำหนดสีพื้นหลัง */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  /* กำหนดเงา */
  width: 302px;
}

@media screen and (max-width: 670px) {
  .announce select {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("../images/icon-select.svg");
    background-repeat: no-repeat;
    background-position-x: 95%;
    background-position-y: 12px;
    padding-top: 8px;
    padding-left: 17px;
    padding-right: 10px;
    padding-bottom: 6px;
    border-radius: 25px;
    /* กำหนดมุมให้โค้ง */
    border: none;
    /* ไม่มีเส้นขอบ */
    background-color: white;
    /* กำหนดสีพื้นหลัง */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    /* กำหนดเงา */
    width: 302px;

  }

  .announce input {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("../images/search.svg");
    background-repeat: no-repeat;
    background-position-x: 95%;
    background-position-y: 10px;
    padding-top: 8px;
    padding-left: 17px;
    padding-right: 10px;
    padding-bottom: 6px;
    border-radius: 25px;
    /* กำหนดมุมให้โค้ง */
    border: none;
    /* ไม่มีเส้นขอบ */
    background-color: white;
    /* กำหนดสีพื้นหลัง */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    /* กำหนดเงา */
    width: 302px;

  }

}


.announce-redbull select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("../images/icon-select.svg");
  background-repeat: no-repeat;
  background-position-x: 95%;
  background-position-y: 12px;
  padding-top: 8px;
  padding-left: 17px;
  padding-right: 10px;
  padding-bottom: 6px;
  border-radius: 25px;
  /* กำหนดมุมให้โค้ง */
  border: 1px #151F6D solid;
  /* ไม่มีเส้นขอบ */
  background-color: white;
  /* กำหนดสีพื้นหลัง */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  /* กำหนดเงา */
  width: 302px;
}


.announce-redbull select::placeholder {
  /* เซ็ตสีของ placeholder เป็นสีเทา */
  color: #808080;
}

.announce-redbull input {
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("../images/search.svg");
  background-repeat: no-repeat;
  background-position-x: 95%;
  background-position-y: 10px;
  padding-top: 8px;
  padding-left: 17px;
  padding-right: 10px;
  padding-bottom: 6px;
  border-radius: 25px;
  /* กำหนดมุมให้โค้ง */
  border: 1px #151F6D solid;
  /* ไม่มีเส้นขอบ */
  background-color: white;
  /* กำหนดสีพื้นหลัง */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  /* กำหนดเงา */
  width: 302px;
}

@media screen and (max-width: 670px) {
  .announce-redbull select {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("../images/icon-select.svg");
    background-repeat: no-repeat;
    background-position-x: 95%;
    background-position-y: 12px;
    padding-top: 8px;
    padding-left: 17px;
    padding-right: 10px;
    padding-bottom: 6px;
    border-radius: 25px;
    /* กำหนดมุมให้โค้ง */
    border: none;
    /* ไม่มีเส้นขอบ */
    background-color: white;
    /* กำหนดสีพื้นหลัง */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    /* กำหนดเงา */
    width: 302px;

  }

  .announce-redbull input {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("../images/search.svg");
    background-repeat: no-repeat;
    background-position-x: 95%;
    background-position-y: 10px;
    padding-top: 8px;
    padding-left: 17px;
    padding-right: 10px;
    padding-bottom: 6px;
    border-radius: 25px;
    /* กำหนดมุมให้โค้ง */
    border: 1px #151F6D solid;
    /* ไม่มีเส้นขอบ */
    background-color: white;
    /* กำหนดสีพื้นหลัง */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    /* กำหนดเงา */
    width: 302px;

  }

}



.announce-winter {

  width: 100%;
  max-width: 1119px;

}

.announce-before {
  width: 100%;
  max-width: 615px;
}

.mt-ano-ele {
  margin-top: 40px;
}

.announce-desktop {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  padding-bottom: 8%;
}

.announce-desktop-ele {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* background: rgba(4, 87, 167, 1); */
  align-items: center;
  padding-bottom: 5%;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.btn-option {
  padding: 10px 20px;
  background-color: #f0f0f0 !important;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.btn-option.inactive {
  background-color: #f5f5f5 !important;

  color: white;
}

.btn-option.active {
  background-color: black !important;
  color: white;
}

.btn-option:not(.active) {
  background-color: #e6e6e6;
  color: black;
}

.btn-option:hover {
  background-color: #d4d4d4;
}

.text-point-bigc {
  color: #F9F020;
}

.text-cus-color {
  color: #333333 !important;

}

.text-cus-color-detail {
  color: #444444 !important;

}

.text-center-bigc {
  text-align: center;
}

.text-center-bigc-font {
  font-size: 18px !important;
}

.bg-border-announce-puriku-v2 {

  background-color: transparent;
  border: 2px solid var(--White, #FFFFFF);
  border-radius: 10px;
  border-radius: 10px;
  padding-bottom: 20px !important;
}

.bg-border-announce-puriku {
  border: #ffffff !important;
  background-color: transparent;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 1px #FFFFFF, 0 0 0 2px #FFFFFF !important;
  border: 2px solid rgba(32, 92, 164, 1);
  border-radius: 10px;
  border-radius: 10px;
  padding-bottom: 20px !important;
}

.bg-border-announce-puriku-v2 {

  background-color: transparent;
  border: 2px solid #FF6699 !important;
  border-radius: 10px;
  border-radius: 10px;
  padding-bottom: 20px !important;
}

.bg-border-announce-bigc {

  background-color: transparent;
  border: 2px solid rgb(255, 255, 255);
  border-radius: 10px;
  border-radius: 10px;
  padding-bottom: 20px !important;
}

.text-makkro-color {
  color: #205CA4 !important;
}

.bg-border-announce-ktd {

  background-color: transparent;
  border: 2px solid #FFFFFF !important;
  border-radius: 10px;
  border-radius: 10px;
  padding-bottom: 20px !important;
}

.bg-border-announce-redbull {

  background-color: transparent;
  border: 2px solid #ED1C24;
  border-radius: 10px;
  border-radius: 10px;
  padding-bottom: 20px !important;
}

.bg-border-announce-makro {

  background-color: transparent;
  box-shadow: 0 0 0 2px #205CA4;
  border-radius: 10px;
  border-radius: 10px;
  padding-bottom: 20px !important;
}

.bg-border-announce {

  background-color: transparent;
  box-shadow: 0 0 0 2px #E1BF45, 0 0 0 1px #FBF6B2, 0 0 0 2px #E1BF45;
  border-radius: 10px;



  border-radius: 10px;
  padding-bottom: 20px !important;
}

.item_announce_align {
  text-align: left !important;
}

.container-point {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15rem;
}

.container-point-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10rem;
}

.container-point-2 img {
  width: 211px;
  height: 322px;
}

.container-point img {
  width: 272.28px;
  height: 206px;
}

.container-login img {
  width: 208px;
  margin-top: 30%;
  margin-bottom: 5%;

}

.show-point10 {
  margin-left: -7rem;
}

.text-color {
  color: #fff;
}

.text-swal {
  color: #111827;
  font-weight: 500;
  font-size: 22px;
}

.text-swal-m {
  color: #111827;
}

.color-popup-register {
  background-color: #ffff !important;
}

.show-point1 {
  margin-left: 7rem;
}

.show-bate-e {
  width: 100%;
  margin-top: -2px;
  border-radius: 6px;
  background-color: #fff;
  border: 1px solid rgba(212, 212, 212, 1);
}

.tcp-mt {
  margin-top: -10px;
}

.img-gift {
  margin-top: 10px;
  width: 30px;
  height: 30px;
}

.text-point-tcp {
  color: #2E2E2E;
  font-size: 28px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  /* 30px */
  letter-spacing: 1px;
  margin-top: 12px;
  margin-left: 8px;
}

.img-point-tcp {
  margin-top: -4px;
}

.home-tcp-font {
  font-size: 10px !important;
}

.bgtrdPartyCode {
  margin-top: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-radius: 6px;
  height: 37px;
  font-size: 14px;
  background-color: #E3F3FF;
}


.bgtrdCash {
  padding: 8px 16px !important;
  border-radius: 6px;
  height: auto;
  font-size: 14px;
  background-color: #F2F2F2;
}



.text-point-tcp-red-small {
  color: #E4002B;
  margin-left: 5px;
  margin-top: 0px;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.text-point-tcp-red-new {
  color: #E4002B;


  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.point-tcp-red {
  font-size: 14px;
  margin-top: 1.4px;

}

.text-point-tcp-red {
  color: #E4002B;
  margin-left: 5px;
  margin-top: 0px;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}


.text-h-home {

  font-feature-settings: 'clig' off, 'liga' off;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.text-h-home-small {
  font-feature-settings: 'clig' off, 'liga' off;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.text-h-home-small-xs {
  font-feature-settings: 'clig' off, 'liga' off;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.height-announce {
  overflow-y: auto;
  max-height: 250px;
}


@media (max-width: 391px) {
  .text-h-home {
    font-feature-settings: 'clig' off, 'liga' off;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }

  .text-h-home-small {
    font-feature-settings: 'clig' off, 'liga' off;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }

  .text-h-home-small-xs {
    font-feature-settings: 'clig' off, 'liga' off;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }

  .text-point-tcp-red-new {
    color: #E4002B;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }

  .point-tcp-red {
    font-size: 14px;
    margin-top: 1.4px;
  }

  .text-point-tcp-red {
    color: #E4002B;
    margin-left: 5px;
    margin-top: 1px;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
}

@media (max-width: 371px) {
  .text-h-home {
    font-feature-settings: 'clig' off, 'liga' off;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }

  .text-h-home-small {
    font-feature-settings: 'clig' off, 'liga' off;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }

  .text-h-home-small-xs {
    font-feature-settings: 'clig' off, 'liga' off;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }

  .text-point-tcp-red-new {
    color: #E4002B;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }

  .point-tcp-red {
    font-size: 14px;
    margin-top: 1.4px;
  }

  .text-point-tcp-red {
    color: #E4002B;
    margin-left: 5px;
    margin-top: 2px;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }

}

@media (max-width: 350px) {
  .text-h-home {

    font-feature-settings: 'clig' off, 'liga' off;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }

  .text-h-home-small {
    font-feature-settings: 'clig' off, 'liga' off;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }

  .text-h-home-small-xs {
    font-feature-settings: 'clig' off, 'liga' off;
    font-size: 8px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }

  .text-point-tcp-red-new {
    color: #E4002B;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }

  .point-tcp-red {
    font-size: 14px;
    margin-top: 1.4px;
  }

  .text-point-tcp-red {
    color: #E4002B;
    margin-left: 5px;
    margin-top: 2px;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
}


.size_back_menu {

  height: 20px;
}


.head-tcp-img {
  width: 103px;
  height: 42px;

}

.box-profile-haeder {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 16px;

}

.text-sub-point-cus {
  margin-top: 13.2%;
  margin-left: 10px !important;
}

.width-left {
  width: 50%;
  padding-right: 8px;
}

.width-center {
  margin-top: 8px;
  height: 47%;
  max-height: 95px;
}

.width-center-redbull {
  margin-top: 0px;
  height: 100%;
  max-height: 40px;
}

.width-center-pro-ele {
  margin-top: 15px;
  height: 45%;
  max-height: 95px;
}

.width-center_long {
  margin-top: 8px;
  height: 100%;
  max-height: 135px;
}

.width-end {
  width: 50%;
  padding-left: 16px;
}

.box-profile-tcp {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  border: 2px solid #E4002B;
  padding: 16px 16px 5px 16px;
}

.box-profile-tcp-inner {
  display: flex;
  width: 100%;
  height: 100%;
}

.box-profile-redbull {
  display: flex;
  width: 100%;
  border-radius: 10px;
  padding: 16px 16px 5px 16px;
}


.boder-tcp {
  border-radius: 8px;
}

.text-shop-tcp {
  margin-left: 10px;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0px;
  text-align: left;

}

.text-error-chang {
  color: red;
  font-size: 10px;

}

.text-regis-error {}

.icon-ref-f {
  width: 49px;
  height: 49px;


}

.icon-ref-f-ktd {
  width: 172px;
  height: 67px;


}

.red-text-ref {
  font-family: 'SukhumvitSet';
  font-weight: 500;
  font-size: 50px;
  color: rgba(228, 0, 43, 1);

}

.box-register-sec {

  width: 100%;
  height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;

}

.box-register-ref {
  width: 100%;
  padding-top: 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;

}

.box-register-sec-ele {

  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;

}

.text-w {
  color: #ffff;
  height: 15px !important;
  font-size: 18px;
  text-decoration: none;
}

.text-couon-my {
  display: flex;
  align-content: stretch;
  justify-content: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  height: 80vh;

}

.text-w-tcp {
  color: #151F6D;
  height: 15px !important;
  font-size: 18px;
  text-decoration: none;
}

.add-num img {
  width: 35px;
  height: 35px;
  /*  padding: 10px 0px 0px 0px;
  gap: 10px;
  border-radius: 26px 0px 0px 0px;
  opacity: 0px; */

}

.box-rider-icon {
  display: flex;
  justify-content: center;
}

.text-day-bottle {
  font-size: 14px;
  font-family: 'SukhumvitSet';
  font-weight: 700;
  color: rgba(46, 46, 46, .5);
  margin-top: -20px;
  margin-left: 3px;
}

.text-day-bottle-af {
  font-size: 14px;
  font-family: 'SukhumvitSet';
  font-weight: 700;
  color: rgba(46, 46, 46, .5);
  margin-top: 5.4rem;
  margin-left: 3px;
  width: 100%;

}

.text-day-bottle-active {
  font-size: 14px;
  font-family: 'SukhumvitSet';
  font-weight: 700;
  color: rgba(69, 176, 97, 1);


}

.bottle-item {
  flex: 0 0 calc(100% / 7);
  box-sizing: border-box;
  position: relative;
  /* Allows positioning of child elements */
}

.bottle-ktd {
  width: 42px;
  height: 107px;
}

/* .bottle-ktd-bg-af-img{
  width: 38px;
  box-shadow: -0px 4px 30px rgba(255, 204, 128, 0.5);
} */


.bottle-ktd-bg-af-img {
  position: absolute;
  bottom: 0;
  /* Positions the image at the bottom of the container */
  left: 60%;
  /* Horizontally center the image */
  top: -31px;
  margin-left: 2px;
  transform: translateX(-60%);
  /* Adjust for centering */
  width: 96px;
  /* Adjust width to fit container */
  height: 144px;
  /* Maintain aspect ratio */
}

/* .bottle-ktd-bg-af-img{

  position: fixed;
  width: 88px;
  display: flex;
  z-index: 2;
  margin-left:10px ;
  right: 0;
  bottom: 0;
 transform: translate(0%, -40%);
} */
.card-body-rider {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 5px;
  /* 5px rounded corners */
  margin-bottom: 5rem;
}

.cus-h-img-ma {
  width: 100%;
  height: 100%;
}

.cusr-box-img-ma {
  width: 100%;
  height: 120px;
  padding-bottom: 5px;
  position: relative;
  display: inline-block;
}


.cus-h-img-remove {
  width: 30px;
  height: 35px;

  position: absolute;
  top: 5px;
  right: 5px;
  background-color: red;
  color: white;
  border: none;
  padding: 5px;
  cursor: pointer;
  border-radius: 50%;
}

.cus-h-img-ma-show {
  width: 100%;
  height: 112px;
  border-radius: 16px;
}

.bottle-ktd-bg-af {
  background: radial-gradient(circle, rgba(255, 229, 169, 1) 30%, rgba(255, 229, 169, 0.5) 50%, rgba(255, 229, 169, 0) 100%);
  border-radius: 50%;
  box-shadow: 0px 4px 30px rgba(255, 204, 128, 0.5);
}

.btn-brand-carnatio {
  background: #0395da;
  color: #fff;
  height: 48px;
  padding: 12px, 19.1px, 12px, 17.91px;
  border-radius: 26px !important;
  gap: 10px;

}

.btn-brand-advice {
  background: #ffffff;
  color: #000;
  height: 48px;
  padding: 12px, 19.1px, 12px, 17.91px;
  border: 1px solid black;
  border-radius: 26px !important;
  gap: 10px;

}

.image-container-makro img {
  width: 100%;

}

.btn-brand-makro {
  background: #205CA4;

  color: #fff;
  height: 48px;
  padding: 12px, 19.1px, 12px, 17.91px;
  border-radius: 26px !important;
  gap: 10px;

}

.btn-brand-rider {
  background: #ffffff;
  color: #45B061;
  height: 48px;
  padding: 12px, 19.1px, 12px, 17.91px;
  border-radius: 26px !important;

  font-size: 18px;
  font-weight: 500;
  border: 1px solid #45B061;

}

.btn-brand-rider-landding {
  background: #45B061;
  color: #ffffff;
  height: 48px;
  padding: 12px, 19.1px, 12px, 17.91px;
  border-radius: 26px !important;
  font-family: 'SukhumvitSet';
  font-weight: 500;
  font-size: 18px !important;
  font-weight: 500;
  border: 1px solid #45B061;


}

/* .w-img-7-11 {
  width: 100%;
  height: 190px;
} */

.text-hae-ele {
  font-family: "SukhumvitSet";
  font-size: 18px;
  font-weight: 700;
  line-height: 31.15px;
  text-align: center;

}

.text-hae-ele-puriku-4 {
  font-family: "SukhumvitSetBold";
  font-size: 20px;
  /* ปรับขนาดตัวอักษรตามต้องการ */
  font-weight: 700;
  color: #ffffff;
  /* สีของข้อความ */
  text-align: center;
  /* จัดตำแหน่งข้อความ */
  /* text-shadow: 0px 0px 5px #FF6699, 0px 0px 12px #FF6699; */
  border-radius: 8px;
  /* มุมกลม */
  display: inline-block;
  /* ทำให้กล่องมีขนาดพอดีกับข้อความ */
}

.text-hae-ele-puriku-3 {
  font-family: "SukhumvitSetBold";
  font-size: 20px;
  /* ปรับขนาดตัวอักษรตามต้องการ */
  font-weight: 700;
  color: #000000;
  /* สีของข้อความ */
  text-align: center;
  /* จัดตำแหน่งข้อความ */
  text-shadow: 0px 0px 5px #FF6699, 0px 0px 12px #FF6699;
  border-radius: 8px;
  /* มุมกลม */
  display: inline-block;
  /* ทำให้กล่องมีขนาดพอดีกับข้อความ */
}

.text-fs-desktop {
  font-size: 24px !important;

}

.text-hae-ele-puriku-3-desktop {
  font-family: "SukhumvitSetBold";
  font-size: 30px;
  /* ปรับขนาดตัวอักษรตามต้องการ */
  font-weight: 700;
  color: #ffffff;
  /* สีของข้อความ */
  text-align: center;
  /* จัดตำแหน่งข้อความ */
  text-shadow: 0px 0px 16px #91CDFF, 0px 0px 32px #91CDFF;
  border-radius: 8px;
  /* มุมกลม */
  display: inline-block;
  /* ทำให้กล่องมีขนาดพอดีกับข้อความ */
}

.product-puriku {
  width: 100%;
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 5px;
  margin-top: 40px;
  align-items: center;

}

.product-puriku p {
  font-family: "SukhumvitSetBold";
  font-size: 14px;
  font-weight: 700;
  text-align: left;
}

.text-color-tcp {
  color: #0B59A4;
  /*   text-align: center; */

}

.text-hae-ele7 {
  font-family: "SukhumvitSet";
  font-size: 18px;
  font-weight: 700;
  line-height: 21.15px;
  /*   text-align: center; */

}

.text-hae-ele7-light {
  font-family: "SukhumvitSet";
  font-size: 16px;
  font-weight: 500;
  line-height: 21.15px;
  /*   text-align: center; */

}

.level-2-padding {
  padding-top: 10em;
}

.btn-brand-carnatio:disabled {
  background: #EBEBEB;
  /* สีพื้นหลังเมื่อปิดใช้งาน */
  color: #C8C8C8;
  /* สีข้อความเมื่อปิดใช้งาน */
  cursor: not-allowed;
  /* เปลี่ยนเคอร์เซอร์เป็น not-allowed เมื่อปิดใช้งาน */
}

.btn-brand-carnatio-new-tcp {
  background: #151F6D;
  box-shadow: 0px 1px 9px rgba(0, 0, 0, 0.1);
  border-radius: 56px !important;
  color: #fff;
}

/* .btn-brand-carnation-pop {
  background: #151F6D;
  box-shadow: 0px 1px 9px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  color: #ffffff !important;
} */

.btn-brand-carnation-pop {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* ขนาด สี และเงา */
  box-shadow: 0 4px 9px rgba(0, 0, 0, 0.1);
  /* ปรับให้เงานุ่มขึ้น */
  color: #fff !important;

  /* ขนาดตัวอักษร และฟอนต์ให้ใหญ่ขึ้น */
  font-size: 1.125rem;
  /* ประมาณ 18px */
  font-weight: 500;

  /* ความสูง / padding / รูปทรง pill */
  height: 56px;
  padding: 0 2rem;
  /* ซ้าย–ขวา 32px */
  border-radius: 28px;
  /* ครึ่งหนึ่งของ height = pill */
  border: none;
  width: 75%;
  /* ยังคงใช้ w-75 จาก Bootstrap */
  max-width: 400px;
  /* ถ้าอยากจำกัดความกว้างสูงสุด */

  transition: opacity .2s;
}

/* variant สีน้ำเงิน */
.btn-brand-carnation-primary {
  background: #0095DA;
}

.btn-brand-carnation-primary:hover {
  opacity: .9;
}

/* variant สีเทาดำ */
.btn-brand-carnation-dark {
  background: #2E2E2E;
}

.btn-brand-carnation-dark:hover {
  opacity: .9;
}

.fw-medium {
  font-weight: 500;
}

.fw-semi-bold {
  font-weight: 600;
}

.fw-bold {
  font-weight: 700;
}

.text-b {
  color: #040404 !important
}

.typo-gray {
  color: rgba(21, 31, 109, 1);
  font-size: 14px;
}

.typo-red {
  color: #EC4127;
  font-size: 14px;
}

.typo-gray-new {
  color: #6E6E6E;
  font-size: 14px;
}

.typo-gray-dark {
  color: #2E2E2E;
  font-size: 14px;
}

.typo-mid-gray {
  color: #ACACAC;
}

.typo-light-gray {
  color: #C8C8C8;
}

.typo-error {
  color: #EC4127;
}

.typo-success {
  color: #148C00;
}

.typo-yellow {
  color: #FFC600;
}

.icon-size-sm {
  font-size: 1rem;
}

.icon-size-md {
  font-size: 1.5rem;
}

.icon-size-lg {
  font-size: 2rem;
}

.icon-size-xl {
  font-size: 3rem;
}

.icon-size-macro {
  font-size: 4.5rem;
}

.icon-frown {
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 72px;
  height: 72px;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 1C5.92339 1 1 5.92339 1 12C1 18.0766 5.92339 23 12 23C18.0766 23 23 18.0766 23 12C23 5.92339 18.0766 1 12 1ZM12 21.5806C6.71734 21.5806 2.41935 17.2827 2.41935 12C2.41935 6.71734 6.71734 2.41935 12 2.41935C17.2827 2.41935 21.5806 6.71734 21.5806 12C21.5806 17.2827 17.2827 21.5806 12 21.5806ZM8.45161 11.2903C9.23669 11.2903 9.87097 10.656 9.87097 9.87097C9.87097 9.08589 9.23669 8.45161 8.45161 8.45161C7.66653 8.45161 7.03226 9.08589 7.03226 9.87097C7.03226 10.656 7.66653 11.2903 8.45161 11.2903ZM15.5484 8.45161C14.7633 8.45161 14.129 9.08589 14.129 9.87097C14.129 10.656 14.7633 11.2903 15.5484 11.2903C16.3335 11.2903 16.9677 10.656 16.9677 9.87097C16.9677 9.08589 16.3335 8.45161 15.5484 8.45161ZM12 13.4194C10.2391 13.4194 7.44919 14.4706 7.05444 16.7238C6.97016 17.2073 7.14315 17.7085 7.51129 18.0323C7.875 18.356 8.39395 18.4714 8.86855 18.325C10.1681 17.9258 11.3702 17.6774 12 17.6774C12.6298 17.6774 13.8319 17.9258 15.1315 18.325C15.473 18.4315 16.023 18.4403 16.4887 18.0323C16.8524 17.7085 17.0298 17.2073 16.9456 16.7238C16.5508 14.4706 13.7609 13.4194 12 13.4194V13.4194ZM12 16.2581C11.2149 16.2581 9.91976 16.5153 8.45161 16.9677C8.68226 15.6504 10.6738 14.8387 12 14.8387C13.3262 14.8387 15.3177 15.6504 15.5484 16.9677C14.0802 16.5153 12.7851 16.2581 12 16.2581Z' fill='%23EBEBEB'/%3E%3C/svg%3E");
  background-color: #8cffa0;
}

.btn-gold-new {
  color: #ffff;
  background: linear-gradient(87.99deg, #F4C655 12.28%, #D89A00 73.05%);
  box-shadow: 0px 1px 9px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.btn-outline-gray {
  color: #B8B8B8;
  border-color: #D4D4D4;
  background-color: #ffffff;
  font-weight: 300;
  border-radius: 56px !important;
}

.btn-outline-gray-tcp-survey {
  font-size: 18px !important;
  color: #B8B8B8;
  border-color: #D4D4D4;
  background-color: #ffffff;
  font-weight: 300;
  border-radius: 56px !important;
}

.btn-outline-gray-tcp {
  color: #B8B8B8;
  border-color: #D4D4D4;
  background-color: #ffffff;
  font-weight: 300;
  border-radius: 56px !important;
}

.btn-outline-gray:hover {
  color: #ACACAC;
}

.img-fluid-promo {
  width: 100%;
  max-width: 234px;
  height: auto;
  /* aspect-ratio: 1.1 / 1;
  object-fit: cover; */
}

.btn:hover {
  color: #999999;
}

.text-change-gray {
  color: #858585;
}

.btn-outline-gray.active {
  background-color: #151F6D;
}

.btn-white {
  color: #ACACAC;
  border-color: #ffffff;
  background-color: #ffffff;
  font-weight: 300;
}

.btn-white:hover {
  color: #ACACAC;
}

.text-link {
  color: rgba(21, 31, 109, 1);
  text-decoration: underline;
}

.text-link:hover {
  color: #292929;
}

.link-unstyled {
  color: #292929;
  text-decoration: none;
}

.link-unstyled:hover {
  color: #292929;
}

.link-gray {
  color: #6E6E6E !important;
}

.link-gray:hover {
  color: #6E6E6E !important;
}

.text-titel-termAndCondition {
  font-family: 'SukhumvitSet';
  font-weight: 700;
  font-weight: 700;
  font-size: 18px;
  line-height: 25px;
  letter-spacing: 0%;

}

.cursor-point {
  pointer-events: auto;
  cursor: pointer;
}

.cursor-auto {
  cursor: auto !important;
}

.list-space li {
  margin-bottom: 1rem;
}


.toast-alert {
  position: absolute;
  top: 1rem;
  left: 50%;
  z-index: 2;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 100%;
  padding: 0 1rem;
}

.toast-alert .toast {
  background-color: #EC4127;
  border-radius: 0.75rem;
  -webkit-box-shadow: 0px 1px 10px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 1px 10px 3px rgba(0, 0, 0, 0.1);
}

input[type=text]::-webkit-contacts-auto-fill-button,
input[type=password]::-webkit-contacts-auto-fill-button,
input[type=password]::-webkit-credentials-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  height: 0;
  width: 0;
  margin: 0;
}

.form-control {
  font-weight: 300;
  color: #292929;
  border-color: #D4D4D4;
}

.form-control.is-invalid {
  border-color: #EC4127;
  background-image: none !important;
}

.form-control.is-invalid:focus {
  border-color: #EC4127;
}

.form-control.is-invalid~.invalid-feedback {
  color: #EC4127;
  font-size: 0.875rem;
  padding-top: 0.25rem;
  /* margin-top: -1.5rem; */
}

.form-control.is-invalid~.invalid-feedback-yellow {
  color: #FFDF8B;
  font-size: 0.875rem;
  padding-top: 0.25rem;
}

.text-font-size-register {
  font-size: 16px;
}

.position-con {
  margin-left: 10px !important;
}

.form-check-input {
  /* border-radius: 50% !important; */
  width: 1.4em;
  height: 1.4em;
  margin-top: 0.1rem;
  vertical-align: top;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid rgba(0, 0, 0, .25);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
}

.custom-radio-label {
  display: inline-flex;
  align-items: center;
  /* จัดให้ <input> กับข้อความกึ่งกลาง */
  gap: 0.5rem;
  /* ระยะห่างระหว่างวงกลมกับข้อความ */
  cursor: pointer;
  user-select: none;
  margin-right: 1rem;
}

.custom-radio {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  /* ขอบตอนไม่เลือก */
  border-radius: 50%;
  background-color: transparent;
  background-size: 18px 18px;
  /* ให้รูปเต็มวงกลม */
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* ตอนไม่เลือก (unchecked) */
.custom-radio:not(:checked) {
  background-image: none;
}

/* ตอนเลือก (checked) */
.custom-radio:checked {
  border: none;
  /* ลบกรอบตรงนี้ */
  background-image: url('/assets/images/checked.png');
}

/* ถ้าต้องการให้ disabled ก็ยังแสดงไอคอน แต่จางลง */
.custom-radio:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.form-check-input-survey {
  margin-left: -1em;
  margin-right: 0.5em;
  border-radius: 50%;
  vertical-align: top;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid rgba(0, 0, 0, .25);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
  --bs-form-check-bg: var(--bs-body-bg);
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.25em;
  vertical-align: top;

  print-color-adjust: exact;
}



.form-check-input-survey[type=checkbox] {
  border-radius: 0.25em;
}

.form-check-input-survey[type=radio] {
  border-radius: 50%;
}

.form-check-input-survey:active {
  filter: brightness(90%);
}

.form-check-input-survey:focus {
  border-color: #151F6D;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(248, 204, 40, 0.25);
}

.form-check-input-survey:checked {
  background-color: #151F6D;
  border-color: #151F6D;
}

.form-check-input-survey:checked[type=checkbox] {
  background-color: #151F6D;
  border-color: #151F6D;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  background-position: center;
  background-size: 80% 80%;
  background-repeat: no-repeat;
}

.form-check-input-survey:checked[type=radio] {
  background-color: #151F6D;
  border-color: #151F6D;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
  background-position: center;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

.form-check-input-survey[type=checkbox]:indeterminate {
  background-color: #151F6D;
  border-color: #151F6D;
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}

.form-check-input-survey:disabled {
  pointer-events: none;
  filter: none;
  opacity: 0.5;
}

.form-check-input-survey[disabled]~.form-check-label,
.form-check-input-survey:disabled~.form-check-label {
  cursor: default;
  opacity: 0.5;
}

.hae-regi {
  width: 35px;
}

.text-primary {
  color: #0095da !important;
}

.btn-brand-primary-survey {
  border-radius: 24px !important;
  background-color: #151F6D !important;
  font-size: 18px !important;
}

.btn-brand-primary {
  border-radius: 24px !important;
}

.btn-brand-primary-promotio {
  width: 100%;
  border-radius: 10px !important;
}

.btn-conf {
  background-color: #151F6D;
  border-color: #151F6D;
  color: #ffffff;
  font-weight: 300;
}

.link-dark-bu {
  text-decoration-line: underline;
  font-weight: 700;
}

.cus-form-eleven {
  height: 88px;
  /*   padding: 0.6875rem 1rem; */
  font-size: 1rem;
  border-radius: 6px;
}

.form-styling {
  min-height: 48px;
  /*   padding: 0.6875rem 1rem; */
  font-size: 1rem;
  border-radius: 6px;
}

.form-styling-cus {

  min-height: calc(1.5em + 1rem);
  /*   padding: 0.6875rem 1rem; */
  font-size: 1rem;
  border-radius: 6px;
}

.form-styling::-webkit-input-placeholder {
  color: #ACACAC;
}

.form-styling:-ms-input-placeholder {
  color: #ACACAC;
}

.form-styling::-ms-input-placeholder {
  color: #ACACAC;
}

.form-styling::placeholder {
  color: #ACACAC;
}

.form-amount .form-styling {
  max-width: 88px !important;
}

.form-amount .invalid-feedback {
  font-size: 0.75rem !important;
}

.form-1-letter {
  width: 2.5rem;
  font-size: 0.875rem;
  text-align: center;
  padding: 0.6875rem 10px;
}

@media (min-width: 400px) {
  .form-1-letter {
    width: 3rem;
    font-size: 1.125rem;
  }
}

@media (min-width: 460px) {
  .form-1-letter {
    width: 3.8rem;
    font-size: 1.25rem;
  }
}

.form-clear {
  position: relative !important;
}

.form-clear .icon-camera-alt {
  position: relative;
  top: -33px;
  margin-left: 90%;
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);


  color: #ACACAC;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  content: "\e922"
}

.form-clear-btn {
  position: absolute;
  color: #d2d2d2;
  cursor: pointer;
  top: 16px;
  right: 2rem;
  z-index: 10;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.form-clear-btn .i-clear-input {
  position: absolute;
  width: 16px;
  height: 16px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM4.96729 4.96729C5.1661 4.76848 5.48844 4.76848 5.68725 4.96729L8.20736 7.4874L10.5476 5.14719C10.7464 4.94837 11.0687 4.94837 11.2675 5.14719C11.4664 5.346 11.4664 5.66834 11.2675 5.86715L8.92733 8.20736L11.267 10.547C11.4658 10.7458 11.4658 11.0682 11.267 11.267C11.0682 11.4658 10.7458 11.4658 10.547 11.267L8.20736 8.92733L5.68782 11.4469C5.48901 11.6457 5.16667 11.6457 4.96786 11.4469C4.76905 11.2481 4.76905 10.9257 4.96786 10.7269L7.4874 8.20736L4.96729 5.68725C4.76848 5.48844 4.76848 5.1661 4.96729 4.96729Z' fill='%23D4D4D4'/%3E%3C/svg%3E%0A");
}

.form-autocomplete .dropdown-menu {
  width: 100%;
}

.form-autocomplete .dropdown-menu .dropdown-item {
  padding: .5rem 1rem;
}

.checkbox-round,
.checkbox-square {
  display: block;
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox-round input,
.checkbox-square input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkbox-round input:checked~.checkmark:after,
.checkbox-square input:checked~.checkmark:after {
  display: block;
}

.checkbox-round .checkmark,
.checkbox-square .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 22px;
  min-width: 22px;
  border: 1px solid #D4D4D4;
}

.checkbox-round .checkmark:after,
.checkbox-square .checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 3px;
  top: 5px;
  width: 10px;
  height: 10px;
  background-repeat: no-repeat;
  background-size: 10px;
}

.checkbox-round .checkmark {
  border-radius: 50%;
  margin-top: 5px;
}

.checkbox-square .checkmark {
  border-radius: 4px;
}

.password-show {
  position: absolute;
  top: 14px;
  right: 1rem;
  cursor: pointer;
  color: #ACACAC;
}

.password-show.i-eye,
.password-show.i-eye-slash {
  position: absolute;
  top: 16px;
  width: 16px;
  height: 16px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
}

.password-show.i-eye {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 13.3333C12.7072 13.3333 13.3855 13.0524 13.8856 12.5523C14.3857 12.0522 14.6666 11.3739 14.6666 10.6667C14.6666 9.95942 14.3857 9.28115 13.8856 8.78105C13.3855 8.28095 12.7072 8 12 8C11.9583 8 11.9216 8.01 11.8812 8.01208C12.0097 8.36597 12.0346 8.74916 11.953 9.1167C11.8714 9.48423 11.6866 9.82086 11.4204 10.0871C11.1542 10.3533 10.8175 10.5381 10.45 10.6197C10.0825 10.7013 9.69928 10.6764 9.34539 10.5479C9.34539 10.5896 9.33331 10.6263 9.33331 10.6667C9.33331 11.0169 9.40229 11.3636 9.5363 11.6872C9.67031 12.0107 9.86674 12.3047 10.1144 12.5523C10.6145 13.0524 11.2927 13.3333 12 13.3333ZM23.855 11.3917C21.5954 6.98292 17.1221 4 12 4C6.87789 4 2.40331 6.985 0.144977 11.3921C0.0496613 11.5806 0 11.7889 0 12.0002C0 12.2115 0.0496613 12.4198 0.144977 12.6083C2.40456 17.0171 6.87789 20 12 20C17.1221 20 21.5966 17.015 23.855 12.6079C23.9503 12.4194 24 12.2111 24 11.9998C24 11.7885 23.9503 11.5802 23.855 11.3917V11.3917ZM12 5.33333C13.0548 5.33333 14.086 5.64613 14.963 6.23216C15.8401 6.8182 16.5237 7.65115 16.9273 8.62569C17.331 9.60023 17.4366 10.6726 17.2308 11.7071C17.025 12.7417 16.5171 13.692 15.7712 14.4379C15.0253 15.1838 14.075 15.6917 13.0405 15.8975C12.0059 16.1033 10.9335 15.9977 9.959 15.594C8.98446 15.1904 8.15151 14.5068 7.56547 13.6297C6.97944 12.7526 6.66664 11.7215 6.66664 10.6667C6.66819 9.25265 7.23059 7.897 8.23045 6.89714C9.23031 5.89728 10.586 5.33488 12 5.33333V5.33333ZM12 18.6667C7.52664 18.6667 3.43914 16.1121 1.33331 12C2.51766 9.67496 4.41167 7.78751 6.74081 6.61125C5.87123 7.73708 5.33331 9.13208 5.33331 10.6667C5.33331 12.4348 6.03569 14.1305 7.28593 15.3807C8.53617 16.631 10.2319 17.3333 12 17.3333C13.7681 17.3333 15.4638 16.631 16.714 15.3807C17.9643 14.1305 18.6666 12.4348 18.6666 10.6667C18.6666 9.13208 18.1287 7.73708 17.2591 6.61125C19.5883 7.78751 21.4823 9.67496 22.6666 12C20.5612 16.1121 16.4733 18.6667 12 18.6667Z' fill='%23D4D4D4'/%3E%3C/svg%3E%0A");
}

.password-show.i-eye-slash {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath d='M23.8875 20.1969L0.86254 2.06565C0.800417 2.016 0.721124 1.99305 0.642087 2.00184C0.56305 2.01063 0.490736 2.05044 0.44104 2.11252L0.0660396 2.58165C0.0163492 2.64373 -0.00666489 2.72299 0.00205425 2.80202C0.0107734 2.88106 0.0505124 2.9534 0.11254 3.00315L23.1375 21.1344C23.1683 21.1591 23.2036 21.1774 23.2415 21.1884C23.2794 21.1994 23.319 21.2028 23.3582 21.1984C23.3974 21.1941 23.4353 21.182 23.4698 21.163C23.5044 21.144 23.5348 21.1183 23.5594 21.0876L23.9344 20.6184C23.9841 20.5563 24.007 20.477 23.9982 20.398C23.9894 20.3189 23.9496 20.2466 23.8875 20.1969ZM12 5.60003C13.2727 5.60142 14.4927 6.10758 15.3926 7.00745C16.2925 7.90733 16.7986 9.12742 16.8 10.4C16.8 11.2108 16.5788 11.9634 16.2225 12.6339L17.1769 13.3839C17.6869 12.5034 18 11.4928 18 10.4C18 9.01891 17.5159 7.76341 16.7333 6.75016C18.8301 7.80869 20.5353 9.50737 21.6019 11.6C20.9645 12.8375 20.1027 13.9458 19.0605 14.8685L20.01 15.6163C21.0777 14.6308 21.9927 13.469 22.6699 12.1472C22.7557 11.9775 22.8004 11.79 22.8004 11.5999C22.8004 11.4097 22.7557 11.2222 22.6699 11.0525C20.6363 7.08466 16.6103 4.40003 12 4.40003C10.3157 4.39913 8.65105 4.76284 7.12054 5.46615L8.83691 6.81616C9.68404 6.06953 10.7835 5.60003 12 5.60003ZM14.2823 11.1062C14.3998 10.7479 14.4301 10.3668 14.3707 9.99456C14.3112 9.62228 14.1638 9.26956 13.9405 8.96575C13.7173 8.66194 13.4248 8.41582 13.0873 8.24785C12.7497 8.07988 12.377 7.99492 12 8.00003C11.9625 8.00003 11.9292 8.00903 11.8932 8.01091C12.0387 8.4007 12.0355 8.83046 11.8842 9.21804L14.2823 11.1062ZM6.12154 9.26266C6.04357 9.63684 6.00287 10.0178 6.00004 10.4C5.99619 11.4053 6.24594 12.3953 6.7262 13.2784C7.20646 14.1616 7.9017 14.9093 8.74761 15.4525C9.59351 15.9957 10.5627 16.3167 11.5656 16.3859C12.5685 16.4551 13.5727 16.2702 14.4852 15.8484L13.3759 14.975C12.9372 15.1074 12.4815 15.2 12.0004 15.2C10.7278 15.1987 9.50764 14.6925 8.6077 13.7926C7.70777 12.8928 7.20153 11.6727 7.20004 10.4C7.20004 10.3085 7.22216 10.223 7.22704 10.133L6.12154 9.26266ZM12 17.6C7.97404 17.6 4.29491 15.3009 2.40004 11.6C3.05366 10.325 3.94091 9.24804 4.96166 8.34803L3.99191 7.58416C2.92391 8.56966 2.00929 9.73104 1.33204 11.0529C1.24626 11.2226 1.20156 11.4101 1.20156 11.6002C1.20156 11.7904 1.24626 11.9778 1.33204 12.1475C3.36416 16.1154 7.39016 18.8001 12 18.8001C13.6844 18.8009 15.349 18.4372 16.8795 17.7339L15.7827 16.8714C14.5898 17.3315 13.3182 17.6 12 17.6Z' fill='%23D4D4D4'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

input[type=date]:invalid::-webkit-input-placeholder {
  color: #ACACAC;
}

input[type=date]:invalid:-ms-input-placeholder {
  color: #ACACAC;
}

input[type=date]:invalid::-ms-input-placeholder {
  color: #ACACAC;
}

input[type=date]:invalid::placeholder {
  color: #ACACAC;
}

.form-date input[type="date"] {
  position: relative;
}

.form-date input[type="date"]::before {
  content: attr(placeholder);
  color: #ACACAC;
  width: calc(100% - 48px);
  position: absolute;
  top: 0;
  background-color: white;
  padding: 0.6875rem 0;
}

.form-date input[type="date"]:focus::before {
  display: none;
}

.form-date input[type="date"]:valid::before {
  display: none;
}

.form-date .i-calendar {
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  right: 14px;
  width: 25px;
  height: 25px;
  background: white;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.833 2H12.333V0.375C12.333 0.16875 12.1643 0 11.958 0H11.708C11.5018 0 11.333 0.16875 11.333 0.375V2H5.33301V0.375C5.33301 0.16875 5.16426 0 4.95801 0H4.70801C4.50176 0 4.33301 0.16875 4.33301 0.375V2H2.83301C2.00488 2 1.33301 2.67188 1.33301 3.5V14.5C1.33301 15.3281 2.00488 16 2.83301 16H13.833C14.6611 16 15.333 15.3281 15.333 14.5V3.5C15.333 2.67188 14.6611 2 13.833 2ZM2.83301 3H13.833C14.108 3 14.333 3.225 14.333 3.5V5H2.33301V3.5C2.33301 3.225 2.55801 3 2.83301 3ZM13.833 15H2.83301C2.55801 15 2.33301 14.775 2.33301 14.5V6H14.333V14.5C14.333 14.775 14.108 15 13.833 15ZM5.95801 10H4.70801C4.50176 10 4.33301 9.83125 4.33301 9.625V8.375C4.33301 8.16875 4.50176 8 4.70801 8H5.95801C6.16426 8 6.33301 8.16875 6.33301 8.375V9.625C6.33301 9.83125 6.16426 10 5.95801 10ZM8.95801 10H7.70801C7.50176 10 7.33301 9.83125 7.33301 9.625V8.375C7.33301 8.16875 7.50176 8 7.70801 8H8.95801C9.16426 8 9.33301 8.16875 9.33301 8.375V9.625C9.33301 9.83125 9.16426 10 8.95801 10ZM11.958 10H10.708C10.5018 10 10.333 9.83125 10.333 9.625V8.375C10.333 8.16875 10.5018 8 10.708 8H11.958C12.1643 8 12.333 8.16875 12.333 8.375V9.625C12.333 9.83125 12.1643 10 11.958 10ZM8.95801 13H7.70801C7.50176 13 7.33301 12.8313 7.33301 12.625V11.375C7.33301 11.1688 7.50176 11 7.70801 11H8.95801C9.16426 11 9.33301 11.1688 9.33301 11.375V12.625C9.33301 12.8313 9.16426 13 8.95801 13ZM5.95801 13H4.70801C4.50176 13 4.33301 12.8313 4.33301 12.625V11.375C4.33301 11.1688 4.50176 11 4.70801 11H5.95801C6.16426 11 6.33301 11.1688 6.33301 11.375V12.625C6.33301 12.8313 6.16426 13 5.95801 13ZM11.958 13H10.708C10.5018 13 10.333 12.8313 10.333 12.625V11.375C10.333 11.1688 10.5018 11 10.708 11H11.958C12.1643 11 12.333 11.1688 12.333 11.375V12.625C12.333 12.8313 12.1643 13 11.958 13Z' fill='%23ACACAC'/%3E%3C/svg%3E%0A");
}

.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ACACAC' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

select.form-select:invalid {
  color: #ACACAC;
}

.modal-term-policy .modal-dialog {
  margin: 0rem auto;
  height: 100%;
}

.modal-term-policy .modal-dialog .modal-content {
  border: 0;
  border-radius: 0;
}

.modal-term-policy .modal-dialog .modal-content .modal-header {
  padding: 2rem 1rem 1rem;
  border-bottom: 1px solid #EBEBEB;
}

.modal-term-policy .modal-dialog .modal-content .content-termpolicy {
  padding-left: 1rem;
}

.modal-term-policy .modal-dialog .modal-content .content-termpolicy li {
  margin-bottom: 1rem;
}

.modal-term-policy .modal-dialog .modal-content .modal-footer {
  border-top: 1px solid #EBEBEB;
  padding-bottom: 1.5rem;
}

.modal-default .modal-content {
  border-radius: 0.5rem;
  border: none;
  margin: auto 1rem;
  overflow: hidden;
}

.modal-default .modal-footer {
  border-bottom-left-radius: 0.5rem !important;
  border-bottom-right-radius: 0.5rem !important;
  overflow: hidden;
  border-top: 1px solid transparent;
}

.modal-default .modal-footer>* {
  margin: 0;
}

.modal-default .modal-footer .modal-btn {
  width: 100%;
  border-top: 1px solid transparent;
  border-top-left-radius: 0rem !important;
  border-top-right-radius: 0rem !important;
}

.share-friend {
  background-color: #292929;
  width: 100%;
  height: auto;
}

.hide-on-screen-sm {
  display: none;
}

@media screen and (min-width: 375px) {
  .hide-on-screen-sm {
    display: inline-block;
    max-width: 80px;
  }
}

@media screen and (min-width: 400px) {
  .hide-on-screen-sm {
    max-width: 80px;
  }
}

button[data-bs-toggle="modal"]:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.barcode {
  display: block;
  overflow: hidden;
}

.barcode img {
  -o-object-position: center;
  object-position: center;
  -o-object-fit: cover;
  object-fit: cover;
  width: auto;
  height: 80px !important;
}

.qrcode {
  display: block;
  overflow: hidden;
}

.qrcode img {
  -o-object-position: center;
  object-position: center;
  -o-object-fit: cover;
  object-fit: cover;
  width: auto;
  height: 100px !important;
}

@media screen and (max-width: 576px) {
  .bottom-sheet.fade .modal-dialog {
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 1;
    -webkit-transition: opacity 0.3s ease-out, bottom 0.3s ease-out;
    transition: opacity 0.3s ease-out, bottom 0.3s ease-out;
  }

  .bottom-sheet.fade.in .modal-dialog {
    bottom: 0;
    opacity: 1;
  }
}

@media screen and (max-width: 576px) {
  .bottom-sheet .modal-dialog {
    margin: 0;
  }
}

@media screen and (max-width: 576px) {
  .bottom-sheet .modal-dialog .modal-content {
    position: fixed;
    bottom: 0;
    border: 0;
    border-radius: 1rem 1rem 0 0;
    height: calc(100vh - 56px);
  }
}

.bottom-sheet .modal-dialog .modal-content .modal-header .modal-title {
  text-align: center;
  width: 100%;
  margin-right: -16PX;
  font-size: 1.125rem;
  font-weight: 500;
}

.bottom-sheet .modal-dialog .modal-content .modal-header .btn-close {
  background: none;
  width: auto;
  height: auto;
  margin-left: 0;
  padding-left: 0;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
}

body {
  font-family: "SukhumvitSet";
  font-weight: 300;
  font-size: 1rem;
  color: #000000;
  background-color: #ffffff;
}

.text-tax-req {
  line-height: 25.5px;
  margin-top: 0.6rem;
}

.btn-lg {
  font-size: 14px;
  border-radius: 0.5rem;
  padding: .5935rem 1rem;
}

.btn-large {
  font-size: 1.125rem;
  border-radius: 0.5rem;
  padding: .5935rem;
}

.main-stretch {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
  height: 100%;
}

.main-box-size {
  min-width: 320px;
}

@media (min-width: 540px) {
  .main-box-size {
    min-width: 480px;
    height: unset;
  }
}

.box-stretch {
  display: -ms-flexbox !important;
  display: flex !important;
  display: -webkit-box !important;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  background-color: #ffffff;
}

@media (min-width: 540px) {
  .box-stretch {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
  }
}

.box-stretch2 {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

.footer-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
  /*   background-color: #ffffff; */
  /*  border-top: 1px solid #EBEBEB; */
}

@media (min-width: 540px) {
  .footer-nav {
    position: unset;
    border-top: 0px;
  }
}

@media (min-width: 992px) {
  .footer-info {
    max-width: 992px !important;
  }
}

.footer-info a {
  text-decoration: none;
  color: #292929;
}

.footer-info a i {
  margin-right: 0.5rem;
}

.footer-inner-fixed {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
  border-top: 1px solid #EBEBEB;
}

.footer-inner-fixed-reward-dev {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
}

@media screen and (min-width: 768px) {
  .footer-inner-fixed {
    position: initial;
    border-top: 0px solid #EBEBEB;
  }

  .footer-inner-fixed-reward-dev {
    position: initial;
  }
}

@media screen and (min-width: 768px) {
  .footer-inner-fixed .footer-inner-wrap {
    max-width: 768px !important;
  }

  .footer-inner-fixed-reward-dev .footer-inner-wrap {
    max-width: 768px !important;
  }
}

.bg-switch {
  display: initial;
  background-color: #f8f8f8;
}

@media (min-width: 540px) {
  /*   .bg-switch {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    background-color: #ffffff;
  } */
}

.position-inva {
  margin-top: -1.5rem;
}

.container-size {
  max-width: 540px !important;
}

.text-tcp {
  font-size: 16px;
  font-weight: 100 !important;
  line-height: 28px;
  letter-spacing: 0em;
  text-align: left;
  font-family: "SukhumvitSet";
  font-weight: 600;
  color: #9ca3af
}

.text-tcp-register {
  font-size: 18px;
  font-weight: 100 !important;
  line-height: 28px;
  letter-spacing: 0em;
  margin-bottom: 2.4rem;
  text-align: left;
  font-family: "SukhumvitSet";
  font-weight: 600;
}

@media (max-width: 367px) {
  .text-tcp-register {
    font-size: 16px;
    font-weight: 100 !important;
    line-height: 28px;
    letter-spacing: 0em;
    margin-bottom: 2.4rem;
    text-align: left;
    font-family: "SukhumvitSet";
    font-weight: 600;
  }
}

.text-tcp-wel {
  font-size: 35px;
  line-height: 54px;
  letter-spacing: 0em;
  text-align: left;
  color: rgba(228, 0, 43, 1);
  font-family: "SukhumvitSet";
  font-weight: 600;

}

.container-size-md {
  max-width: 992px !important;
}

.cus-hea-ele {
  margin-left: -70%;
}

.padding_left_main {
  padding-left: 16px;
}

.brand-header-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  height: 85px !important;
  background-color: #E4002B;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.brand-header-main .desktop-nav {
  display: none;
}


.menu-list-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  height: 85px !important;
  background-color: #E4002B;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.menu-list-container .desktop-nav {
  display: none;
}

.main-header {
  background-color: #E4002B;
  max-width: 992px;
}

.main-header-regiter-tcp {
  background-color: #f5f5f5;
  max-width: 992px;
}

.main-header-regiter-tcp img {
  width: 230px;
  height: 65px;
  flex-shrink: 0;
}

.main-header-promotion {
  background-color: #E4002B;
  max-width: 992px;
}

.main-header-regiter-promotion img {
  width: 90px;
  height: 37px;
  flex-shrink: 0;
}

.main-header .desktop-nav {
  display: none;
}

@media (min-width: 992px) {
  .main-header .desktop-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
}

.brand-logo {
  margin: auto 0;
}

.brand-logo img {
  width: 90px;
  height: 37px;
}

.your-point {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-item-align: center;
  align-self: center;
  background-image: url(../images/icon-point-blue.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.your-point.small-size {
  width: 14px;
  height: 14px;
}

.your-point.big-size {
  width: 20px;
  height: 20px;
}

.brand-redbull {
  width: 30px;
  height: 30px;
}

.brand-summer {
  width: 20px;
  height: 20px;
}


.point-red {
  display: flex;
  align-self: center;
  background-image: url(../images/icon-point-red.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.point-red.small-size {
  width: 14px;
  height: 14px;
}

.point-red.big-size {
  width: 20px;
  height: 20px;
}

.indicator-dots {
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  .indicator-dots {
    margin-bottom: 16px;
  }
}

.indicator-dots button {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50%;
  border-top: none !important;
  border-bottom: none !important;
}

@media (min-width: 768px) {
  .indicator-dots button {
    width: 8px !important;
    height: 8px !important;
    margin-right: 5px !important;
    margin-left: 5px !important;
  }
}

.icon-flashdeal {
  background-image: url(../images/icon-flashdeal.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  width: 24px;
  height: 24px;
  display: inline-block;
  margin-right: 2px;
}

@media (min-width: 414px) {
  .icon-flashdeal {
    width: 28px;
    height: 28px;
  }
}

.countdown-box {
  margin: 0 0.25rem;
  padding: 0.2rem 0.25rem;
  background-color: #292929;
  color: #ffffff;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 300;
  border-radius: 0.25rem;
}

.flash-card-wrap {
  display: -ms-grid;
  display: grid;
  grid-auto-flow: column;
  overflow: auto hidden;
  scrollbar-width: none !important;
}

@media (min-width: 768px) {
  .flash-card-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: unset;
  }
}

.flash-card {
  position: relative;
  max-width: calc(960px / 3);
  width: calc(100vw / 1.5);
  margin: 0.5rem;
}

@media (min-width: 768px) {
  .flash-card {
    max-width: unset;
    width: auto;
  }
}

.flash-price {
  color: #f65b19;
}

.flash-bar {
  position: relative;
  display: block;
  width: 60%;
  height: 16px;
  overflow: hidden;
  border-radius: 50rem;
  line-height: 16px;
  background-color: rgba(246, 91, 25, 0.5);
}

.flash-bar .inner-bar {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  height: 100%;
  background-color: #f65b19;
}

.flash-bar .inner-text {
  position: relative;
  z-index: 1;
  color: #ffffff;
  font-size: 0.75rem;
}

.flash-deal-box {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: linear-gradient(145deg, #f65b19 0%, #ff9900 100%);
  margin-bottom: 0;
}

@media screen and (min-width: 768px) {
  .flash-deal-box {
    margin-bottom: 1rem;
  }
}

.flash-countdown {
  position: absolute;
  display: block;
  top: -4px;
  left: 8px;
  background: linear-gradient(145deg, #f65b19 0%, #ff9900 100%);
  border-bottom-left-radius: 0.375rem !important;
  border-bottom-right-radius: 0.375rem !important;
  -webkit-box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.2);
  padding: 0.33333rem 0.5rem 0.5rem;
  width: auto;
}

.flash-countdown::after {
  content: '';
  position: absolute;
  background-color: #D3511A;
  width: 10px;
  height: 4px;
  -webkit-transform: skewX(40deg);
  transform: skewX(40deg);
  display: block;
  top: 0;
  right: -2px;
  z-index: -2;
}

.brand-header,
.myinfo-section .info-header {
  position: relative;
  width: 100%;
  height: 232px;
  background-image: url(../images/default-bg.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.brand-header::before,
.myinfo-section .info-header::before {
  content: '';
  position: absolute;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.6)));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.6) 100%);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.brand-header .brand-cover,
.myinfo-section .info-header .brand-cover {
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.brand-header .brand-cover img,
.myinfo-section .info-header .brand-cover img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 232px;
}

.brand-detail {
  position: absolute;
  z-index: 2;
}

.brand-logo {
  width: auto;
}

.brand-logo img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}

.logo-big {
  height: 5rem;
}

.logo-big img {
  max-height: 5rem;
}

.logo-small {
  height: 3rem;
}

.logo-small img {
  max-height: 3rem;
}

.content-box {
  position: relative;
  z-index: 1;
}

.filter-category {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.cus-regiter-new {
  font-size: 14px !important;
}

.filter-category h5 {
  font-size: 1.125rem;
}

.filter-category .filter-list {
  padding: 0.5rem 0;
}

.nav-filter {
  white-space: nowrap !important;
  overflow-x: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  width: 100%;
}

.nav-filter::-webkit-scrollbar {
  display: none !important;
}

.btn-code-tcp {
  border-radius: 16px;
  border: 1px solid #151F6D;
  background: var(--white, #FFF);
}

.disabled-image {
  opacity: 0.5 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease !important;
}

.box-focus {
  outline: 3px solid #151F6D !important;
  border-radius: 50%;
}

.box-focus-out {
  outline: 3px solid #151F6D !important;
  border-radius: 50%;
}

.text-modal-cp {
  font-size: 14px;
}





.padding-lucky {
  padding-top: 1rem;
  width: 100%;
  height: 100%;
  background-color: #fff;
  margin-bottom: 5px;
  padding-bottom: 20px;

}

.padding-check {
  padding-top: 0.7rem;
}

@media (max-width: 375px) {
  .padding-lucky {
    padding-top: 1rem;
  }

  .padding-check {
    padding-top: 0.7rem;
  }

  .text-modal-cp {
    font-size: 12px;
  }
}

@media (max-width: 373px) {

  .padding-check {
    padding-top: 0.7rem;
  }
}

@media (max-width: 372px) {

  .padding-check {
    padding-top: 0.7rem;
  }
}

@media (max-width: 360px) {
  .padding-lucky {
    padding-top: 1rem;
  }

  .padding-check {
    padding-top: 0.7rem;
  }
}

@media (max-width: 358px) {

  .padding-check {
    padding-top: 2rem;
  }
}

@media (max-width: 350px) {
  .padding-lucky {
    padding-top: 2rem;
  }

  .padding-check {
    padding-top: 2rem;
  }
}

@media (max-width: 340px) {
  .padding-lucky {
    padding-top: 2.3rem;
  }

  .padding-check {
    padding-top: 2rem;
  }
}

.text-positionreward-pic {
  text-align: center;
  color: #121212;
  font-weight: 400;
  font-size: 12px !important;
  margin-top: -1.9rem;
  padding-left: 44%;
}

.reward-card {
  border-radius: 0.5rem;
  border: none;
  pointer-events: auto;
  cursor: pointer;
}

.reward-card.mark-full {
  pointer-events: none;
}

.reward-card.mark-full .reward-pic {
  position: relative;
}

.reward-card.mark-full .reward-pic::before {
  content: '';
  position: absolute;
  background-color: rgba(0, 0, 0, 0.4);
  top: 0;
  left: 0;
  margin-left: 0.45px;
  width: 100%;
  height: 100%;
  border-radius: 7.8%/18.4%;
  /*   border-top-left-radius: 18%/9%; */
  /* border-top-right-radius: 5% 5%;
  border-bottom-left-radius: 5%;
  border-bottom-right-radius: 5%;   */
}

.reward-card.mark-full .reward-pic::after {
  content: attr(data-title);
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  /*   background-image: url(../images/mark-frame.svg);
 */
  background-repeat: no-repeat;
  background-size: 80% 80%;
  background-position: center center;
  font-size: 1.5rem;
  font-weight: 450;
  color: #ffffff;
  text-align: center;
  white-space: pre-wrap;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  -webkit-transform: translate(-50%, -50%) rotate(0deg);
  transform: translate(-50%, -50%) rotate(0deg);
}

@media (min-width: 375px) {
  .reward-card.mark-full .reward-pic::after {
    font-size: 1.5rem;
  }
}

@media screen and (min-width: 768px) {

  .reward-card.mark-full .reward-pic::after {
    font-size: 1.1rem;
  }

  .text-positionreward-pic {
    text-align: center;
    color: #121212;
    font-size: 8.5px !important;
    font-weight: 400;
    margin-top: -1.5rem;
    padding-left: 43.8%;
  }
}

.reward-card.mark-used {
  pointer-events: auto;
}

.reward-card.mark-used .reward-pic {
  position: relative;
}

.reward-card.mark-used .reward-pic::before {
  content: '';
  position: absolute;
  background-color: rgba(0, 0, 0, 0.4);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.reward-card.mark-used .reward-pic::after {
  content: attr(data-title);
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-image: url(../images/mark-frame.svg);
  background-repeat: no-repeat;
  background-size: 80% 80%;
  background-position: center center;
  font-size: 0.75rem;
  font-weight: 300;
  color: #ffffff;
  text-align: center;
  white-space: pre-wrap;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  -webkit-transform: translate(-50%, -50%) rotate(-20deg);
  transform: translate(-50%, -50%) rotate(-20deg);
}

@media (min-width: 375px) {
  .reward-card.mark-used .reward-pic::after {
    font-size: 0.875rem;
  }
}

.reward-card.mark-expired {
  pointer-events: none;
  color: #C8C8C8 !important;
}

.reward-card.mark-expired .reward-pic {
  position: relative;
}

.reward-card.mark-expired .reward-pic::before {
  content: '';
  position: absolute;
  background-color: rgba(0, 0, 0, 0.4);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.reward-card.mark-expired .reward-pic::after {
  content: attr(data-title);
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-image: url(../images/mark-frame.svg);
  background-repeat: no-repeat;
  background-size: 80% 80%;
  background-position: center center;
  font-size: 0.75rem;
  font-weight: 300;
  color: #ffffff;
  text-align: center;
  white-space: pre-wrap;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  -webkit-transform: translate(-50%, -50%) rotate(-20deg);
  transform: translate(-50%, -50%) rotate(-20deg);
}

@media (min-width: 375px) {
  .reward-card.mark-expired .reward-pic::after {
    font-size: 0.875rem;
  }
}

.reward-card.mark-pre {
  pointer-events: auto;
}

.reward-card.mark-pre .reward-pic {
  position: relative;
}

.reward-card.mark-pre .reward-pic::before {
  content: '';
  top: 21px;
  right: -5px;
  position: absolute;
  z-index: -1;
  display: block;
  width: 10px;
  height: 15px;
  background-color: #947A3E;
  -webkit-transform: skewY(-30deg);
  transform: skewY(-30deg);
}

@media screen and (min-width: 576px) {
  .reward-card.mark-pre .reward-pic::before {
    top: 25px;
  }
}

@media screen and (min-width: 768px) {
  .reward-card.mark-pre .reward-pic::before {
    top: 21px;
  }
}

.reward-card.mark-pre .reward-pic::after {
  content: attr(data-title);
  position: absolute;
  top: 0.5rem;
  right: -5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: #C2A051;
  border-radius: 4px 0 0 4px;
  font-size: 0.75rem;
  color: #ffffff;
  padding: 0.2rem 0.5rem;
  -webkit-box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.4);
  box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.4);
}

@media screen and (min-width: 576px) {
  .reward-card.mark-pre .reward-pic::after {
    padding: 0.2rem 0.66667rem;
    font-size: 0.875rem;
  }
}

@media screen and (min-width: 768px) {
  .reward-card.mark-pre .reward-pic::after {
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
  }
}

.reward-card .card-body {
  padding: 8px 0.5rem 0;
}

@media (min-width: 360px) {
  .reward-card .card-body {
    padding: 12px 0.5rem 0;
  }
}

.reward-card .card-footer {
  padding: 8px 0.5rem;
}

@media (min-width: 360px) {
  .reward-card .card-footer {
    padding: 12px 0.5rem;
  }
}

.reward-card .reward-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.875rem;
  line-height: 1rem;
}

@media (min-width: 360px) {
  .reward-card .reward-title {
    font-size: 0.875rem;
    line-height: 1.125rem;
  }
}
.term p {
  font-family: "SukhumvitSet";
  font-weight: 500;

}

.reward-card .reward-point {
  font-size: 1rem;
}

@media (min-width: 360px) {
  .reward-card .reward-point {
    font-size: 1.125rem;
  }
}

.reward-card .reward-footer {
  font-size: 0.75rem;
  border-bottom-left-radius: 0.5rem !important;
  border-bottom-right-radius: 0.5rem !important;
}

@media (min-width: 360px) {
  .reward-card .reward-footer {
    font-size: 0.875rem;
  }
}

.reward-card .reward-des-info>div {
  border-bottom: solid 1px;
}

.reward-card .reward-des-info>div:last-child {
  border-bottom: 0;
}

.reward-pic img {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.reward-pic-back-btn {
  position: absolute;
  z-index: 1;
  top: 0.5rem;
  left: 0.5rem;
}

.reward-pic-back-btn-puriku-des img {
  width: 237px;
  height: 57px;
}

.reward-pic-back-btn-puriku-des {
  position: absolute;



  z-index: 1;
  top: 55.6rem;
  left: 40rem;
}

.reward-title2 {
  font-size: 1.125rem;
}

@media screen and (min-width: 768px) {
  .reward-title2 {
    font-size: 1.25rem;
  }
}

.with-top-border {
  border-top: 1px solid #EBEBEB;
}

@media screen and (min-width: 768px) {
  .with-top-border {
    border-top: none;
  }
}

.reward-success {
  width: 75%;
}

@media screen and (min-width: 768px) {
  .reward-success {
    width: 50%;
  }
}

.reward-success img {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem !important;
  border-bottom-right-radius: 0.5rem !important;
}

.coupon {
  border: none !important;
  border-radius: 0.5rem !important;
  -webkit-box-shadow: 0px 1px 10px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 1px 10px 3px rgba(0, 0, 0, 0.1);
}

.coupon .card-footer {
  background-color: #ffffff !important;
  border-top: 1px dashed #EBEBEB !important;
}

.coupon .card-footer:last-child {
  border-radius: 0 0 0.5rem 0.5rem !important;
}

.mark-red {
  position: relative;
}

.mark-red3rdParty {
  position: relative;
}

.mark-red3rdParty::before {
  content: '';
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.mark-red::before {
  content: '';
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.mark-red::after {
  content: attr(data-title);
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-image: url(/assets/images/mark-expired.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  font-size: 0.875rem;
  font-weight: 400;
  color: #EC4127;
  text-align: center;
  white-space: pre-wrap;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  -webkit-transform: translate(-50%, -50%) rotate(-20deg);
  transform: translate(-50%, -50%) rotate(0deg);
  z-index: 2;
}

.mark-red3rdParty::after {
  content: attr(data-title);
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-image: url(/assets/images/mark-expired.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  font-size: 0.875rem;
  font-weight: 400;
  color: #EC4127;
  text-align: center;
  white-space: pre-wrap;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  -webkit-transform: translate(-50%, -50%) rotate(-20deg);
  transform: translate(-50%, -50%) rotate(0deg);
  z-index: 2;
}

.mark-used3rdParty {
  position: relative;
}

.mark-used3rdParty::before {
  content: '';
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.mark-used3rdParty::after {
  content: attr(data-title);
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-image: url(/assets/images/mark-used.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  font-size: 0.875rem;
  font-weight: 400;
  color: #EC4127;
  text-align: center;
  white-space: pre-wrap;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  -webkit-transform: translate(-50%, -50%) rotate(-20deg);
  transform: translate(-50%, -50%) rotate(0deg);
  z-index: 2;
}

@media (min-width: 375px) {
  .mark-red::after {
    font-size: 1rem;
  }

  .mark-red3rdParty::after {
    font-size: 1rem;
  }
}

@media (min-width: 414px) {
  .mark-red::after {
    font-size: 1.125rem;
  }

  .mark-red3rdParty::after {
    font-size: 1.125rem;
  }
}

.reward-detail p {
  margin-bottom: 0.25rem;
  font-family: "SukhumvitSet" !important;
  font-size: 14px !important;
}

.rucky-input {
  min-height: 34px !important;
  text-align: center;
}

.reward-detail ul {
  padding: 0;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  list-style: none;
}

.reward-detail ul li {
  padding-left: 1rem;
  text-indent: -1rem;
}

.reward-detail ul li::before {
  content: "• ";
}

.reward-detail ol {
  padding: 0;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.reward-detail ol li {
  margin-left: 1rem;
}

.inner-header-sendcode {
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background-color: #ffffff;
}

@media screen and (min-width: 768px) {
  .inner-header {
    position: initial;
  }
}

.inner-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background-color: #ffffff;
}

@media screen and (min-width: 768px) {
  .inner-header {
    position: initial;
  }
}

.myinfo-section {
  height: calc(188px + 137px);
  position: relative;
}

.myinfo-section .info-header {
  position: initial;
  background-image: none;
}

.myinfo-section .info-header::before {
  display: none;
}

.myinfo-section .info-detail {
  position: absolute;
  bottom: 24px;
}

.level-bar {
  counter-reset: step;
}

.level-bar li {
  list-style-type: none;
  width: calc(100% / 4);
  float: left;
  line-height: .75rem;
  position: relative;
  text-align: center;
  color: #292929;
}

@media screen and (min-width: 480px) {
  .level-bar li {
    line-height: .85rem;
  }
}

@media screen and (min-width: 768px) {
  .level-bar li {
    line-height: .95rem;
  }
}

.level-bar li::before {
  content: '';
  counter-increment: step;
  width: 16px;
  height: 16px;
  line-height: 16px;
  display: block;
  text-align: center;
  margin: 0 auto .5rem auto;
  border-radius: 50%;
  position: relative;
  z-index: 2;
  border: 2px solid #D4D4D4;
  background-color: #ffffff;
}

.level-bar li::after {
  content: '';
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  width: 100%;
  height: 3px;
  position: absolute;
  top: 8px;
  left: -50%;
  z-index: 1;
  background-color: #D4D4D4;
}

.level-bar li:first-child::after {
  content: none;
}

.level-bar li.member-level-1 {
  color: #ffffff;
}

.level-bar li.member-level-1 span {
  display: inline-block;
  background-color: #0B59A4;
  margin-top: 0.33333rem;
  padding: 0.4rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
}

@media screen and (min-width: 375px) {
  .level-bar li.member-level-1 span {
    font-size: 0.875rem;
  }
}

.level-bar li.member-level-1.active::before {
  border-color: #0B59A4;
  background-color: #0B59A4;
}

.level-bar li.member-level-2 {
  color: #ffffff;
}

.level-bar li.member-level-2 span {
  display: inline-block;
  background-color: #ACACAC;
  margin-top: 0.33333rem;
  padding: 0.4rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
}

@media screen and (min-width: 375px) {
  .level-bar li.member-level-2 span {
    font-size: 0.875rem;
  }
}

.level-bar li.member-level-2.active::before {
  border-color: #ACACAC;
  background-color: #ACACAC;
}

.level-bar li.member-level-3 {
  color: #ffffff;
}

.level-bar li.member-level-3 span {
  display: inline-block;
  background-color: #C2A051;
  margin-top: 0.33333rem;
  padding: 0.4rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
}

@media screen and (min-width: 375px) {
  .level-bar li.member-level-3 span {
    font-size: 0.875rem;
  }
}

.level-bar li.member-level-3.active::before {
  border-color: #C2A051;
  background-color: #C2A051;
}

.level-bar li.member-level-4 {
  color: #C2A051;
}

.level-bar li.member-level-4 span {
  display: inline-block;
  background-color: #292929;
  margin-top: 0.33333rem;
  padding: 0.4rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
}

@media screen and (min-width: 375px) {
  .level-bar li.member-level-4 span {
    font-size: 0.875rem;
  }
}

.level-bar li.member-level-4.active::before {
  border-color: #292929;
  background-color: #292929;
}

.member-tag-level-1 {
  background-color: #0B59A4;
  border-radius: 0.375rem;
  padding: 2px 8px;
  color: #ffffff;
}

.member-tag-level-2 {
  background-color: #ACACAC;
  border-radius: 0.375rem;
  padding: 2px 8px;
  color: #ffffff;
}

.member-tag-level-3 {
  background-color: #C2A051;
  border-radius: 0.375rem;
  padding: 2px 8px;
  color: #ffffff;
}

.member-tag-level-4 {
  background-color: #292929;
  border-radius: 0.375rem;
  padding: 2px 8px;
  color: #C2A051;
}

.transaction {
  border-bottom: 1px solid #EBEBEB;
}

.transaction:last-child {
  border-bottom: 0px solid #EBEBEB;
  margin-bottom: 0;
}

@media screen and (min-width: 768px) {
  .transaction:last-child {
    margin-bottom: 2rem;
  }
}

/* Arrows */
.slick-prev,
.slick-next {
  position: absolute;
  display: block;
  height: 32px;
  width: 32px;
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  background: rgba(244, 244, 244, 0.75);
  border-radius: 50%;
  color: transparent;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  padding: 0;
  border: none;
  outline: none;
  z-index: 1;
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  outline: none;
  background: rgba(244, 244, 244, 0.95);
  color: transparent;
}

.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
  opacity: 1;
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: .25;
}

.slick-prev:before,
.slick-next:before {
  line-height: 1;
  color: #292929;
  opacity: .75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
  left: -12px;
}

[dir="rtl"] .slick-prev {
  left: auto;
  right: -12px;
}

.slick-prev:before {
  font-family: 'icon-font' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  content: '\e904';
  font-size: 1.125rem;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

[dir="rtl"] .slick-prev:before {
  content: '\e904';
}

.slick-next {
  right: -12px;
}

[dir="rtl"] .slick-next {
  left: -12px;
  right: auto;
}

.slick-next:before {
  font-family: 'icon-font' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: '\e904';
  font-size: 1.125rem;
}

[dir="rtl"] .slick-next:before {
  content: '\e904';
}

/* The alert message box */
.alert {
  padding: 15px;
}

@media (min-width: 375px) {
  .alert {
    padding: 15px;
    margin-top: 0px;
    margin-bottom: auto;
  }
}

@media (max-width: 320px) {
  .alert {
    padding: 15px;
    font-size: small;
    margin: auto;
  }
}

.alert-danger {
  color: #EC4127;
  background-color: #FDECE9;
  border-color: #FDECE9;
}

.announce_li {
  list-style-position: outside;
  padding-left: 1em;
}

.footer_back_button {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

 .mktp-tt{
     background-color: #080404;
 }
 
 .mktp-lzd{
     background-color: #082D99;
  }

 .mktp-sp{
     background-color: #EA501F;
   }

 .mktp-adv{
     background: linear-gradient(180deg, #19248C 0%, #0072CE 100%);
   }

/*# sourceMappingURL=style.css.map */