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

* {
  font-family: 'Noto Sans Thai', sans-serif;
/* font-weight: 600; */
}

.text-bold {
  font-family: 'Noto Sans Thai', sans-serif !important;
  font-weight: 700;
}

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

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

  justify-content: center;

}

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

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

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

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

}

.header-rider-text span {
  font-size: 17px;
  text-align: left;
  font-weight: 100;
}

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

.bg-BigC {
  background: #BBE0EF !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: #767676;
  /* สถานะ 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: #E61F7E;
  /* สถานะ Enabled */
  cursor: pointer;
}

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

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

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

}

.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: 'Noto Sans Thai', sans-serif;
  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: 'Noto Sans Thai', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-align: left;

  white-space: nowrap;
}

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

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

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

.text-parakit {
  font-family: 'Noto Sans Thai', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 31.15px;
  text-align: left;
  color: #45B061;

}

@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-size: 12px;
    text-align: left;
    font-weight: 100;
  }

  .list_menu_img {
    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: 'Noto Sans Thai', sans-serif;
    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;
  /* จัดให้อยู่กึ่งกลางคอลัมน์ */
}

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

    width: 100%;
    height: auto;
    cursor: pointer;
    transition: border 0.3s ease;
  }
}

@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;

  }
}

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

.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-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;
  transform: translate(0%, 15%);

}

.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-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%);
}

.color-white {
  color: #ffffff !important;
  font-family: 'Noto Sans Thai', sans-serif;
  font-weight: 700;
}

.num-auspicious-btn div {
  font-family: 'Noto Sans Thai', sans-serif !important;
  font-weight: 700 !important;

  color: #ffffff;

  font-size: 14px;
}

.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: 'Noto Sans Thai', sans-serif;
  padding-left: 11px;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 1px;
  text-align: left;
  color: #2E2E2E;
  margin-top: -4px;
}

.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;

}

.text-hae-7-11 {
  font-family: 'Noto Sans Thai', sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  color: rgba(230, 31, 126, 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;
}

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

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

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

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

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

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

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

.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;
}

.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-w-re {
  font-family: 'Noto Sans Thai', sans-serif;
  font-weight: 700;
}

.text-a-cuse {
  font-family: 'Noto Sans Thai', sans-serif;
  font-weight: 700;
  color: rgba(230, 31, 126, 1);
}

.text-cus-term-tcp {
  font-family: 'Noto Sans Thai', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #292929 !important;
}

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

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

.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 {
  position: relative;
  left: 81%;
  /* Center horizontally, adjust as needed */
  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(230, 31, 126, 1);
  padding: 10px 15px;
  font-weight: 900 !important;
  color: #E11979;
}

.text-red {
  color: red;
}

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

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

.text-home-tcp-p {
  font-family: 'Noto Sans Thai', sans-serif !important;
  font-weight: 700;
  color: rgba(230, 31, 126, 1) !important;
}

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

}

.text-change-point-faq {
  font-family: 'Noto Sans Thai', sans-serif !important;
  font-weight: 700;
}

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

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

.fs14 {
  font-size: 14px;
}

.fs20 {
  font-size: 20px;
}

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

.dark-text {
  color: #292929
}

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

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

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

.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: 'Noto Sans Thai', sans-serif !important;
}

.basefont {
  font-family: 'Noto Sans Thai', sans-serif !important;
}

.boldfont {
  font-family: 'Noto Sans Thai', sans-serif !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;

}

.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: #E61F7E;
  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;
}

.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 {
  height: 33px;
}

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

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

.text-bill {
  font-family: 'Noto Sans Thai', sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-align: center;

}

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

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

.text_list_menu_img {
  font-family: 'Noto Sans Thai', sans-serif;
  font-weight: 600;
  font-size: 10px;
  padding-top: 5px;
}

.padding_list_manu {
  padding-top: 26px;
}

.position_sub_menu {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  display: inline-block;
  text-align: center;

}

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

.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-send-code-tcp {
  width: 100%;
}

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

}

.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 {
  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;
}


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

.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;

}

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

}

.text-sub-main {
  font-family: 'Noto Sans Thai', sans-serif;
  font-weight: 600;
  color: #2E2E2E;
  font-size: 14px;
}

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

.text-sub-font {
  font-family: 'Noto Sans Thai', sans-serif;
  font-weight: 600;
  color: #E61F7E;
  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;
}

.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: #707070;
  text-align: center;
  background: #F6F6F6;
  /* Title H3 Med */
  font-family: 'Noto Sans Thai', sans-serif;
  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: #E11979;
  border-color: #f8f8f8;
  height: 40px;
  font-family: 'Noto Sans Thai', sans-serif;
}

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

.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: #E61F7E;
}

.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: #E61F7E;

}

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

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

.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: #707070;
  text-align: center;
  background: #F6F6F6;
  /* Title H3 Med */
  font-family: 'Noto Sans Thai', sans-serif;
  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: 'Noto Sans Thai', sans-serif;
}

.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: #E11979;
  border-color: #f8f8f8;
  height: 40px;
  font-family: 'Noto Sans Thai', sans-serif;
}

.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 #E61F7E;
  margin-top: -5px;
}

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

.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%;
}

.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-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, #E61F7E);
  font-size: 14px;
  font-style: normal;
  line-height: 100%;
  /* 18px */
  font-family: 'Noto Sans Thai', sans-serif;
  font-weight: 600;
}

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

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

.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;
}

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

  
  .banner-sm {
    display: none;
  }

  
  }

.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;
}

.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;
}

.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;

}

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

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

.btn-reward-game-new-tcp {
  color: #E11979 !important;
  border-radius: 24px !important;
  border: 1px solid #E61F7E;
  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: #E11979;
  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: #E11979;
  border: 1px solid #C4C4C4;
}

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

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

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

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

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

.submitBtnRegisater-block {
  color: #ffffff;
  background: #E11979;

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

}

.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;
}

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

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

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

.text-detail-pro {
  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;

}

.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);
}

.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-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);
}

.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-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.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: 'Noto Sans Thai', sans-serif;
  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;
}

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

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

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

.copy-container {
  display: flex;
  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);
}

.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 #E61F7E 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 #E61F7E 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 #E61F7E 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-desktop {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  padding-bottom: 8%;
}

.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: #767676 !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;
}

.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;
  padding-bottom: 20px !important;
}

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

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

}

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

.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;
}

.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: #FDEAF3;
}

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

.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;
}

@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;
  }
}

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

}

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

}

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

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

.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%;
}

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

}

.red-text-ref {
  font-family: 'Noto Sans Thai', sans-serif;
  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;

}

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

}

.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 */
}

.btn-brand-carnatio {
  background: #E11979;
  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;

}

.text-hae-ele {
  font-family: 'Noto Sans Thai', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 31.15px;
  text-align: center;

}

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

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

.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: #E61F7E;
}

.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-bold {
  font-weight: 700;
}

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

.typo-gray {
  color: rgba(230, 31, 126, 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-md {
  font-size: 1.5rem;
}

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

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

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

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

.btn-outline-gray-tcp {
  color: #767676;
  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;
}

.btn:hover {
  color: #999999;
}

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

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

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

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

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

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

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

.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;
}

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

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

.form-check-input {
  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%;
  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: #E61F7E;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(248, 204, 40, 0.25);
}

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

.form-check-input-survey:checked[type=checkbox] {
  background-color: #E61F7E;
  border-color: #E61F7E;
  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: #E61F7E;
  border-color: #E61F7E;
  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: #E61F7E;
  border-color: #E61F7E;
  --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: #E61F7E !important;
}

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

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

.form-styling {
  min-height: 48px;
  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-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: #767676;
  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: 'Noto Sans Thai', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: #000000;
  background-color: #FFFDFE;
}

.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;
}

@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: #FFFDFE;
}

.position-inva {
  margin-top: -1.5rem;
}

.container-size {
  max-width: 540px !important;
}

.container-size-md {
  max-width: 992px !important;
}

.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 .desktop-nav {
  display: none;
}

.main-header {
  background-color: #E4002B;
  max-width: 992px;
}

.main-header-promotion {
  background-color: #E4002B;
  max-width: 992px;
}

.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;
  width: auto;
}

.brand-logo img {
  width: 90px;
  height: 37px;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}

.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.small-size {
  width: 14px;
  height: 14px;
}

.point-red.big-size {
  width: 20px;
  height: 20px;
}

.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-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;
}


.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;
}

.box-focus {
  outline: 3px solid #E61F7E !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;

}

@media (max-width: 375px) {
  .padding-lucky {
    padding-top: 1rem;
  }

  
  .text-modal-cp {
    font-size: 12px;
  }
}

@media (max-width: 360px) {
  .padding-lucky {
    padding-top: 1rem;
  }

  }

@media (max-width: 350px) {
  .padding-lucky {
    padding-top: 2rem;
  }

  }

@media (max-width: 340px) {
  .padding-lucky {
    padding-top: 2.3rem;
  }

  }

.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%;
}

.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-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: #8E7232;
  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.1rem;
  }
}

.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: 'Noto Sans Thai', sans-serif;
  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-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: 'Noto Sans Thai', sans-serif !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;
  }
}

.level-bar li.member-level-1 {
  color: #ffffff;
}

.level-bar li.member-level-1 span {
  display: inline-block;
  background-color: #B81965;
  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: #B81965;
  background-color: #B81965;
}

.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: #B81965;
  border-radius: 0.375rem;
  padding: 2px 8px;
  color: #ffffff;
}

.member-tag-level-2 {
  background-color: #767676;
  border-radius: 0.375rem;
  padding: 2px 8px;
  color: #ffffff;
}

.member-tag-level-3 {
  background-color: #8E7232;
  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;
  }
}

/* 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: #D02B12;
  background-color: #FDECE9;
  border-color: #FDECE9;
}

.announce_li {
  list-style-position: outside;
  padding-left: 1em;
}

 .mktp-tt{
     background-color: #080404;
 }
 
 .mktp-lzd{
     background-color: #082D99;
  }

 .mktp-sp{
     background-color: #EA501F;
   }

 .mktp-adv{
     background: linear-gradient(180deg, #7A1145 0%, #E61F7E 100%);
   }

/* ==========================================================================
   Register phone number (rpn-*)
   ========================================================================== */
.rpn-page {
  max-width: 540px;
  margin: 0 auto;
  padding: 20px 20px 40px;
  min-height: 100vh;
  background: #FFFDFE;
}

.rpn-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rpn-back {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: #FDEAF3;
  color: #3D3D3D;
  cursor: pointer;
}

.rpn-back:active {
  background: #F9D9E8;
}

.rpn-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1F1F1F;
  line-height: 1.3;
}

.rpn-step {
  margin: 2px 0 0;
  font-size: 0.8125rem;
  font-weight: 300;
  color: #8A8A8A;
}

.rpn-progress {
  height: 8px;
  margin: 18px 0 22px;
  border-radius: 999px;
  background: #FBE6F0;
  overflow: hidden;
}

.rpn-progress-fill {
  height: 100%;
  width: 50%;
  border-radius: 999px;
  background: linear-gradient(90deg, #E61F7E 0%, #F4736B 100%);
  transition: width 0.35s ease;
}

.rpn-progress-fill.step-1 {
  width: 25%;
}

.rpn-progress-fill.step-2 {
  width: 50%;
}

.rpn-progress-fill.step-3 {
  width: 75%;
}

.rpn-progress-fill.step-4 {
  width: 100%;
}

.rpn-card + .rpn-card {
  margin-top: 14px;
}

.rpn-card {
  background: #FFFFFF;
  border: 1px solid #F0F0F0;
  border-radius: 26px;
  padding: 20px;
  box-shadow: 0 2px 12px rgb(236 71 117 / 15%);
}

.rpn-card-title {
  margin: 0 0 8px;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #1F1F1F;
}

.rpn-card-desc {
  margin: 0 0 18px;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.6;
  color: #8A8A8A;
}

.rpn-label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #1F1F1F;
}

.rpn-card input.rpn-input {
  width: 100%;
  height: auto;
  padding: 14px 18px;
  border: 1px solid #E8E8E8;
  border-radius: 999px;
  background: #FFFFFF;
  background-image: none;
  font-size: 0.9375rem;
  font-weight: 300;
  color: #292929;
}

.rpn-card input.rpn-input::placeholder {
  color: #C4C4C4;
  font-weight: 300;
}

.rpn-card input.rpn-input:focus {
  outline: none;
  border-color: #E61F7E;
  box-shadow: 0 0 0 3px rgba(230, 31, 126, 0.12);
}

.rpn-card input.rpn-input.is-invalid {
  border-color: #EC4127;
  box-shadow: none;
}

.rpn-card input.rpn-input.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(236, 65, 39, 0.12);
}

.rpn-card .invalid-feedback {
  margin-top: 8px;
  padding-left: 18px;
  font-size: 0.8125rem;
  color: #EC4127;
}

.rpn-submit {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 15px 16px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #E11979 0%, #E81E11 100%);
  box-shadow: 0 6px 16px rgba(230, 31, 126, 0.25);
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: 700;
}

.rpn-submit:disabled {
  opacity: 0.45;
  box-shadow: none;
  cursor: not-allowed;
}

.rpn-submit:not(:disabled):active {
  transform: translateY(1px);
}

/* ใช้บนหน้าที่ไม่มี progress bar คั่นระหว่าง topbar กับการ์ด */
.rpn-topbar.has-gap {
  margin-bottom: 22px;
}

/* ==========================================================================
   OTP step (otp-*) — ใช้ shell .rpn-page / .rpn-topbar / .rpn-card / .rpn-submit ร่วมกัน
   ========================================================================== */
.otp-icon {
  margin-bottom: 12px;
  text-align: center;
  font-size: 2rem;
  line-height: 1;
}

.otp-sent-label {
  margin: 0 0 6px;
  text-align: center;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #1F1F1F;
}

.otp-phone {
  margin: 0 0 20px;
  text-align: center;
  font-size: 1.125rem;
  font-weight: 700;
  color: #E61F7E;
}

/* react-otp-input ใส่ display:flex ให้ container เองแบบ inline */
.otp-boxes {
  justify-content: center;
  gap: 8px;
  width: 100%;
}

/* ครอบ input เพื่อล็อกสัดส่วน 1:1 — ช่องยืด/หดตามความกว้างที่เหลือแต่กลมเสมอ
   ถ้า fix width/height เป็น px ช่องจะโดน flex บีบเฉพาะแนวนอนแล้วกลายเป็นวงรี */
.otp-cell {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: 52px;
  aspect-ratio: 1 / 1;
}

/* fallback สำหรับเบราว์เซอร์ที่ยังไม่รองรับ aspect-ratio (iOS < 15) */
@supports not (aspect-ratio: 1 / 1) {
  .otp-cell {
    height: 0;
    padding-top: 100%;
  }
}

.otp-cell input.otp-box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 1px solid #E8E8E8;
  border-radius: 50%;
  background: #FFFFFF;
  text-align: center;
  font-size: clamp(1rem, 5vw, 1.25rem);
  font-weight: 500;
  color: #1F1F1F;
  -moz-appearance: textfield;
  appearance: textfield;
}

.otp-cell input.otp-box::-webkit-outer-spin-button,
.otp-cell input.otp-box::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.otp-cell input.otp-box:focus {
  outline: none;
  border-color: #E61F7E;
  box-shadow: 0 0 0 3px rgba(230, 31, 126, 0.12);
}

.otp-boxes.is-invalid input.otp-box {
  border-color: #EC4127;
}

.otp-expire {
  margin: 18px 0 0;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 300;
  color: #8A8A8A;
}

.otp-expire b {
  color: #E61F7E;
  font-weight: 700;
}

.otp-resend {
  display: block;
  width: 100%;
  margin: 14px 0 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #1F1F1F;
  cursor: pointer;
}

.otp-resend:disabled {
  color: #C4C4C4;
  font-weight: 500;
  cursor: not-allowed;
}

.otp-hint {
  margin: 14px 0 0;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 300;
  color: #ACACAC;
}

/* ==========================================================================
   Register form step (reg-*) — ใช้ shell .rpn-page / .rpn-card / .rpn-submit ร่วมกัน
   ========================================================================== */
.reg-verified {
  display: flex;
  align-items: center;
  gap: 12px;
}

.reg-verified-icon {
  flex: 0 0 auto;
  font-size: 1.5rem;
  line-height: 1;
}

.reg-verified-body {
  flex: 1 1 auto;
  min-width: 0;
}

.reg-verified-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #1F1F1F;
}

.reg-verified-phone {
  margin: 2px 0 0;
  font-size: 0.875rem;
  font-weight: 300;
  color: #8A8A8A;
}

.reg-badge {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 999px;
  background: #E7F7EC;
  color: #128100;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
}

.reg-section-title {
  margin: 0 0 16px;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #1F1F1F;
}

.reg-field {
  margin-bottom: 16px;
}

.reg-field:last-child {
  margin-bottom: 0;
}

.reg-label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #1F1F1F;
}

.reg-label .req {
  color: #E61F7E;
}

.reg-help {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 0.8125rem;
  font-weight: 300;
  color: #ACACAC;
}

.reg-error {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 0.8125rem;
  color: #EC4127;
}

/* input ทุกชนิดในการ์ดเป็นทรงแคปซูล */
.rpn-card .form-control,
.rpn-card .form-select {
  width: 100%;
  height: auto;
  min-height: 50px;
  padding: 13px 18px;
  border: 1px solid #E8E8E8;
  border-radius: 999px;
  background-color: #FFFFFF;
  font-size: 0.9375rem;
  font-weight: 300;
  color: #292929;
}

.rpn-card .form-select {
  padding-right: 42px;
  background-position: right 16px center;
}

.rpn-card .form-control::placeholder {
  color: #C4C4C4;
  font-weight: 300;
}

.rpn-card .form-control:focus,
.rpn-card .form-select:focus {
  outline: none;
  border-color: #E61F7E;
  box-shadow: 0 0 0 3px rgba(230, 31, 126, 0.12);
}

.rpn-card .form-control.is-invalid,
.rpn-card .form-select.is-invalid {
  border-color: #EC4127;
  background-image: none;
}

.rpn-card .form-control:disabled,
.rpn-card .form-control[readonly] {
  background-color: #F7F7F7;
  color: #717171;
}

/* วันเกิด = RMCDatepicker (reactstrap InputGroup: input + ปุ่มปฏิทิน)
   ทำทั้งกลุ่มให้เป็นแคปซูลเดียว แล้ว overflow:hidden คลิปลูกให้เข้ารูป */
.rpn-card .input-group {
  flex-wrap: nowrap;
  border: 1px solid #E8E8E8;
  border-radius: 999px;
  background: #FFFFFF;
  overflow: hidden;
}

.rpn-card .input-group:focus-within {
  border-color: #E61F7E;
  box-shadow: 0 0 0 3px rgba(230, 31, 126, 0.12);
}

/* ต้องคืนค่า flex ของ Bootstrap เพราะกฎ .rpn-card .form-control ด้านบนตั้ง width:100%
   ซึ่งจะดันปุ่มปฏิทินตกไปอยู่บรรทัดถัดไป */
.rpn-card .input-group > .form-control {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

/* !important เพราะ RMCDatepicker ใส่ border / borderRadius มาเป็น inline style */
.rpn-card .input-group > .form-control,
.rpn-card .input-group > .input-group-text {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.rpn-card .input-group > .input-group-text {
  padding-right: 18px !important;
}

/* การ์ดคำยินยอม */
.reg-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 14px;
  padding: 16px;
  border: 1.5px solid #E8E8E8;
  border-radius: 18px;
  background: #FFFFFF;
  text-align: left;
  width: 100%;
  cursor: pointer;
}

.reg-consent.is-checked {
  border-color: #E61F7E;
  background: #FFF5FA;
}

.reg-consent-check {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #D4D4D4;
  border-radius: 50%;
  background: #FFFFFF;
  color: transparent;
}

.reg-consent.is-checked .reg-consent-check {
  border-color: #E61F7E;
  background: #E11979;
  color: #FFFFFF;
}

.reg-consent-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #1F1F1F;
}

.reg-consent-desc {
  margin: 2px 0 0;
  font-size: 0.8125rem;
  font-weight: 300;
  color: #8A8A8A;
}

.reg-consent-link {
  color: #E61F7E;
  font-weight: 500;
  text-decoration: underline;
}

/* แถวปุ่มล่าง */
.reg-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
}

.reg-back {
  flex: 0 0 40%;
  padding: 15px 16px;
  border: 1.5px solid #E61F7E;
  border-radius: 999px;
  background: #FFFFFF;
  color: #E11979;
  font-size: 1rem;
  font-weight: 700;
}

.reg-actions .rpn-submit {
  flex: 1 1 auto;
  margin-top: 0;
}

/* ==========================================================================
   Home (home-*)
   ========================================================================== */
.home-page {
  max-width: 540px;
  /* เผื่อที่ให้ FooterMenu ที่เป็น position:fixed สูง 70px */
  padding: 16px 16px 96px;
  background: #FFFDFE;
}

.home-greet-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.home-greet {
  flex: 1 1 auto;
  min-width: 0;
}

.home-greet-hello {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 300;
  color: #8A8A8A;
}

.home-greet-name {
  margin: 2px 0 0;
  font-size: 1.375rem;
  font-weight: 700;
  color: #1F1F1F;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-avatar {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #FDEAF3;
  background: #FDEAF3;
  cursor: pointer;
}

/* การ์ดคะแนน */
.home-point-card {
  padding: 20px;
  border-radius: 22px;
  background: linear-gradient(135deg, #E11979 0%, #E81E11 100%);
  box-shadow: 0 8px 20px rgba(230, 31, 126, 0.25);
  color: #FFFFFF;
}

.home-point-label {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 300;
  opacity: 0.9;
}

.home-point-value {
  margin: 2px 0 0;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.15;
}

.home-point-value span {
  margin-left: 6px;
  font-size: 1rem;
  font-weight: 400;
}

.home-point-sub {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.home-point-box {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.18);
}

.home-point-box-label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 300;
  opacity: 0.9;
}

.home-point-box-value {
  margin: 2px 0 0;
  font-size: 1.0625rem;
  font-weight: 700;
}

.home-point-btn {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: #767676;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
}

.home-point-btn:active {
  background: rgba(255, 255, 255, 0.3);
}

/* หัวข้อ section */
.home-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 22px 0 10px;
}

.home-section-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #1F1F1F;
}

.home-section-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  border: 0;
  padding: 0;
  background: none;
  font-size: 0.875rem;
  font-weight: 300;
  color: #8A8A8A;
  cursor: pointer;
}

/* การ์ดสถิติ */
.home-card {
  padding: 16px;
  border-radius: 18px;
  background: #FFFFFF;
  border: 1px solid #F0F0F0;
  box-shadow: 0 2px 12px rgb(236 71 117 / 8%);
}

.home-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
}

.home-stat-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #FDEAF3;
  font-size: 1.375rem;
}

.home-stat-body {
  flex: 1 1 auto;
  min-width: 0;
}

.home-stat-label {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 300;
  color: #8A8A8A;
}

.home-stat-value {
  margin: 2px 0 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #E61F7E;
}

.home-stat-chevron {
  flex: 0 0 auto;
  color: #C4C4C4;
}


/* ==========================================================================
   Saving group / กลุ่มออม (sg-*)
   Figma section "Main - Create group" (54:3555)
   ค่าสีอิงชุดเดียวกับ Register-child · ระยะวัดจาก export กว้าง 768px หารด้วย 1.969
   ========================================================================== */
.sg-page {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  background: #FFFFFF;
  font-family: 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  color: #11141B;
  /* ภาษาไทยไม่มีเว้นวรรคระหว่างคำ ถ้าไม่บังคับตัดบรรทัดกล่องจะกว้างเกินจอ */
  overflow-wrap: break-word;
}

.sg-page.is-pink {
  background: #FFF4F7;
}

.sg-col {
  width: 100%;
  max-width: 540px;
  min-width: 0;
  /* ขอบซ้าย/ขวา 40px ของ export = 20px จริง */
  padding: 24px 20px 110px;
}

/* เว้นที่ให้ปุ่มล่างแทนแถบเมนู บนหน้าที่ใช้ layout ไม่มี FooterMenu */
.sg-col.no-footer {
  padding-bottom: 32px;
}

/* ---------- แถบหัวเรื่อง ---------- */
.sg-topbar {
  position: relative;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.sg-topbar-title {
  margin: 0;
  font-size: 1.125rem;
  line-height: 24px;
  font-weight: 600;
  color: #ED008C;
}

/* หน้าสมาชิก/เชิญสมาชิกใช้หัวเรื่องตัวเข้ม ต่างจากหน้าสร้างกลุ่มที่เป็นตัวชมพู */
.sg-topbar-title.is-dark {
  color: #232934;
  font-weight: 700;
}

.sg-back {
  position: absolute;
  left: 0;
  top: 2px;
  width: 40px;
  height: 40px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: #ED008C;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.sg-back img {
  width: 20px;
  height: 20px;
}

/* ---------- การ์ดหัวแบบรูปทั้งใบ (หน้าที่ 2) ----------
   ดีไซเนอร์ส่งมาเป็นภาพเดียวจบ มีตัวหนังสืออยู่ในภาพแล้ว จึงไม่วางข้อความทับ
   aspect-ratio ตรึงพื้นที่ตามสัดส่วนไฟล์ 720x440 เลย์เอาต์จะได้ไม่กระตุกตอนรูปโหลด
   และถ้าไฟล์หายก็เห็นพื้นชมพูแทนกล่องรูปแตก */
.sg-hero-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 718 / 434;
  border-radius: 24px;
  background: radial-gradient(115% 100% at 50% 28%, #FDD3EC 0%, #FAB4DA 46%, #F68AC6 100%);
  object-fit: cover;
}

/* ---------- การ์ดหัวแบบวางข้อความเอง (หน้าที่ 5) ---------- */
.sg-hero-card {
  position: relative;
  border-radius: 24px;
  padding: 118px 18px 22px;
  background: radial-gradient(115% 100% at 50% 28%, #FDD3EC 0%, #FAB4DA 46%, #F68AC6 100%);
  box-shadow: 0 10px 24px -12px rgba(237, 0, 140, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  text-align: center;
  min-width: 0;
}

.sg-hero-card.is-short {
  padding-top: 24px;
}

/* หัวเรื่องบนการ์ดชมพูเป็นตัวขาวมีเงาชมพูเข้ม ไม่ใช่ตัวชมพู */
.sg-hero-title {
  margin: 0;
  font-size: 1.375rem;
  line-height: 30px;
  font-weight: 700;
  color: #FFFFFF;
  text-shadow: 0 2px 4px rgba(198, 32, 121, 0.4);
}

.sg-hero-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 22px;
  font-weight: 500;
  color: #FFFFFF;
  text-shadow: 0 1px 3px rgba(198, 32, 121, 0.35);
}

/* ---------- การ์ดเนื้อหา ---------- */
.sg-card {
  border-radius: 16px;
  background: #FFFFFF;
  padding: 16px;
  box-shadow: 0 4px 16px -8px rgba(17, 20, 27, 0.18);
  min-width: 0;
}

.sg-card + .sg-card {
  margin-top: 16px;
}

.sg-card-title {
  margin: 0 0 12px;
  font-size: 1rem;
  line-height: 24px;
  font-weight: 600;
  color: #ED008C;
}

.sg-section-title {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 22px;
  font-weight: 700;
  color: #ED008C;
}

/* ---------- ช่องกรอก ---------- */
.sg-field {
  min-width: 0;
}

.sg-field + .sg-field {
  margin-top: 12px;
}

.sg-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.9375rem;
  line-height: 22px;
  font-weight: 600;
  color: #232934;
}

.sg-label.is-center {
  text-align: center;
}

.sg-input {
  width: 100%;
  height: 48px;
  border-radius: 18px;
  border: 1px solid #DFE1E6;
  background: #FFFFFF;
  padding: 0 16px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  color: #444E61;
  outline: none;
  min-width: 0;
}

.sg-input.is-center {
  text-align: center;
}

.sg-input::placeholder {
  color: #C9CDD4;
  font-weight: 400;
}

.sg-input:focus {
  border-color: #ED008C;
}

.sg-input.is-invalid {
  border-color: #D92D20;
}

.sg-error {
  margin: 6px 0 0;
  font-size: 0.8125rem;
  line-height: 18px;
  font-weight: 400;
  color: #D92D20;
}

/* ---------- รายการกติกา ---------- */
.sg-rules {
  margin: 0;
  padding-left: 22px;
}

.sg-rules li {
  font-size: 0.9375rem;
  /* ระยะระหว่างบรรทัด 48px ของ export = line-height 24 พอดี ไม่ต้องใส่ margin เพิ่ม */
  line-height: 24px;
  font-weight: 400;
  color: #303747;
  min-width: 0;
}

/* หน้าที่ 3 ใช้แบบมีหัวข้อย่อยตัวหนา หน้าที่ 2 เป็นบรรทัดเดียวล้วน */
.sg-rules li b {
  display: block;
  font-weight: 600;
  color: #232934;
}

.sg-rules.has-gap li + li {
  margin-top: 10px;
}

/* ---------- ปุ่ม ---------- */
.sg-btn {
  display: block;
  width: 100%;
  height: 48px;
  border: 0;
  /* Figma เป็นทรงแคปซูล ไม่ใช่ radius 18 แบบชุด Register-child */
  border-radius: 999px;
  font-family: inherit;
  font-size: 1.125rem;
  line-height: 24px;
  font-weight: 700;
  cursor: pointer;
}

.sg-btn-primary {
  background: #E30086;
  color: #FFFFFF;
  box-shadow: inset 0 0 14px 0 #FCD2F2;
}

/* ปุ่มรองไม่มีเส้นขอบ เป็นพื้นชมพูอ่อนล้วน */
.sg-btn-secondary {
  background: #FFE7EE;
  color: #CF007A;
}

.sg-btn:disabled {
  background: #E6E6E6;
  color: #676767;
  box-shadow: none;
  cursor: not-allowed;
}

.sg-danger-link {
  display: block;
  margin: 0 auto;
  border: 0;
  background: none;
  padding: 6px 12px;
  color: #D92D20;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 20px;
  font-weight: 500;
  cursor: pointer;
}

.sg-danger-link:disabled {
  color: #B3B3B3;
  cursor: not-allowed;
}

/* ---------- ระยะเฉพาะหน้าที่ 2 (วัดจาก export) ---------- */
.sg-join .sg-hero-art {
  margin-bottom: 24px;
}

.sg-join .sg-field {
  margin-bottom: 19px;
}

.sg-join .sg-btn-primary {
  margin-bottom: 18px;
}

.sg-join .sg-btn-secondary {
  margin-bottom: 36px;
}

.sg-join .sg-section-title {
  margin-bottom: 8px;
}

/* ---------- คะแนน / ความคืบหน้า ---------- */
.sg-stat-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.sg-stat-label {
  font-size: 0.875rem;
  line-height: 20px;
  font-weight: 500;
  color: #444E61;
}

.sg-stat-value {
  font-size: 1.25rem;
  line-height: 28px;
  font-weight: 700;
  color: #ED008C;
}

.sg-progress {
  width: 100%;
  height: 8px;
  margin-top: 6px;
  border-radius: 999px;
  background: #FFFFFF;
  overflow: hidden;
}

.sg-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: #ED008C;
  transition: width 0.3s ease;
}

/* ---------- รายชื่อสมาชิก ---------- */
.sg-member {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.sg-member + .sg-member {
  margin-top: 12px;
}

/* รูปมาทาง style={{backgroundImage}} — ต้องตั้ง size/position ไว้ที่นี่
   ไม่งั้นรูปจะโชว์ขนาดจริงมุมซ้ายบน ไม่ใช่ครอปเต็มวงกลม */
.sg-member-avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #FFE7EE;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.sg-member-name {
  flex: 1;
  min-width: 0;
  font-size: 0.9375rem;
  line-height: 22px;
  font-weight: 500;
  color: #232934;
}

.sg-member-tag {
  flex: 0 0 auto;
  padding: 2px 10px;
  border-radius: 999px;
  background: #FFE7EE;
  color: #CF007A;
  font-size: 0.75rem;
  line-height: 18px;
  font-weight: 500;
}

/* ---------- รหัสเชิญเพื่อน ---------- */
.sg-invite-code {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border-radius: 18px;
  border: 1px dashed #FCD2F2;
  background: #FFF4F7;
  padding: 0 14px;
  min-width: 0;
}

.sg-invite-code-text {
  font-size: 1rem;
  line-height: 22px;
  font-weight: 600;
  color: #ED008C;
  letter-spacing: 0.5px;
  /* รหัสเป็นอักษรละตินล้วน ห้ามให้ break-word ของภาษาไทยมาหั่นกลางรหัส */
  word-break: keep-all;
}

.sg-chips {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 12px;
}

.sg-chip {
  border: 1px solid #FCD2F2;
  border-radius: 999px;
  background: #FFFFFF;
  color: #E30086;
  padding: 0 14px;
  height: 32px;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
}

.sg-chip.is-line {
  border-color: #06C755;
  background: #04883A;
  color: #FFFFFF;
}

.sg-helper {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 20px;
  font-weight: 400;
  color: #737D91;
  text-align: center;
}

/* ---------- ป๊อปอัปยืนยัน / แจ้งเตือน ---------- */
.sg-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
}

.sg-dialog-box {
  width: 100%;
  /* วัดจาก Figma: การ์ดกว้าง ~355 บนเฟรม 390 = เกือบเต็มจอ ไม่ใช่ 320 อย่างที่ทำไว้รอบแรก */
  max-width: 350px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  filter: drop-shadow(0 14px 32px rgba(0, 0, 0, 0.28));
}

/* ครึ่งบนเป็นภาพมาสคอต ตัดจบใต้เท้าพอดี แล้วให้ CSS ต่อพื้นการ์ดลงมาเอง
   ทำแบบนี้การ์ดจะยืดตามความยาวข้อความได้โดยมาสคอตไม่ยืดตาม */
/**
 * ครึ่งบนของป๊อปอัป = มาสคอตท่าสงสัย + ขอบบนโค้งของการ์ด
 * ตัดจบใต้เท้ามาสคอตพอดี แล้วให้ .sg-dialog-body ต่อพื้นการ์ดลงมาเอง
 * การ์ดจึงยืดตามความยาวข้อความได้โดยมาสคอตไม่ยืดตาม
 *
 * ⚠️ ไฟล์ confirm-mascot-top.png ยังไม่มีบนดิสก์ — ระหว่างนี้ fallback ไปใช้
 * มาสคอตตกใจของ Register-child ซึ่ง "ท่าทางผิด" (ยกแขน + เครื่องหมาย ! ไม่ใช่ ?)
 */
.sg-dialog-top {
  width: 100%;
  /* 500 / 700 ของภาพต้นฉบับ */
  padding-top: 71.43%;
  background: url('/assets/images/saving-group/confirm-mascot-top.png') top center / 100% 100% no-repeat,
    url('/assets/images/gsb-register/parent-alert-top.png') top center / 100% 100% no-repeat;
}

.sg-dialog-body {
  /* เกยขึ้นไป 1px กันเส้นขาวบาง ๆ ตรงรอยต่อเวลาเบราว์เซอร์ปัดเศษ */
  margin-top: -1px;
  /* Figma: คอลัมน์ข้อความแคบกว่าการ์ดพอควร บีบเข้ามาข้างละ 40
     ประโยคแรกใส่ <br> ตายตัวตามแบบ ส่วนประโยคที่มีชื่อกลุ่มปล่อยให้ตัดเอง
     เพราะชื่อกลุ่มยาวไม่เท่ากันในแต่ละคน */
  padding: 4px 40px 26px;
  border-radius: 0 0 36px 36px;
  /* Figma: พื้นชมพูอ่อนเรียบ มีวงสว่างจาง ๆ ตรงกลาง ไม่ได้ไล่เข้มลงล่าง */
  background: radial-gradient(80% 60% at 50% 45%, #FCDCEF 0%, #FBD3EA 60%, #FACBE6 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.sg-dialog-title {
  margin: 0;
  font-size: 1.25rem;
  line-height: 28px;
  font-weight: 700;
  color: #ED008C;
  text-align: center;
}

.sg-dialog-msg {
  margin: 0;
  font-size: 1rem;
  line-height: 26px;
  font-weight: 600;
  color: #232934;
  text-align: center;
}

.sg-dialog-confirm {
  margin-top: 16px;
  border: 0;
  padding: 0 40px;
  /* Figma: ปุ่มกว้างกว่าที่ทำไว้รอบแรกพอควร (~185 บนการ์ด 350) */
  min-width: 180px;
  height: 44px;
  border-radius: 999px;
  background: #E30086;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 1.0625rem;
  line-height: 44px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: inset 0 0 16px 0 #FCD2F2, 0 6px 14px -6px rgba(237, 0, 140, 0.5);
}

.sg-dialog-confirm:disabled {
  background: #E6E6E6;
  color: #676767;
  box-shadow: none;
  cursor: not-allowed;
}

.sg-dialog-cancel {
  margin-top: 10px;
  border: 0;
  background: none;
  padding: 2px 12px;
  /* Figma ใช้ตัวเข้มเกือบดำ ไม่ใช่เทาจาง */
  color: #232934;
  font-family: inherit;
  font-size: 1rem;
  line-height: 22px;
  font-weight: 500;
  cursor: pointer;
}

.sg-dialog-cancel:disabled {
  color: #B3B3B3;
  cursor: not-allowed;
}

/* ==========================================================================
   GSB Register-child + Register-parents (gsb-* / gsbp-*)
   Figma section "Register-child" (34:8768)
   ย้ายมาจาก styled-components เดิม (GsbRegisterUI.tsx / GsbParentUI.tsx)
   ค่าทุกตัวคงเดิมทั้งหมด — วัดจาก render 1:1 ใน .claude/skills/gsb-figma-ui/cache/screens/
   ========================================================================== */
.gsb-screen {
  min-height: 100vh;
  background: #FFFFFF;
  display: flex;
  justify-content: center;
  /* ฟอนต์แบรนด์ self-host ผ่าน @fontsource/noto-sans-thai (import ใน src/pages/_app.tsx) */
  font-family: 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #11141B;
  /* ภาษาไทยไม่มีเว้นวรรคระหว่างคำ ถ้าไม่บังคับตัดบรรทัดกล่องจะกว้างเกินจอ */
  overflow-wrap: break-word;
}

.gsb-shell {
  position: relative;
  width: 100%;
  max-width: 540px;
  min-width: 0;
  /* Figma เป็นเฟรมสูงคงที่ — ตรึงความสูงเท่าจอแล้วให้เนื้อหาเลื่อนข้างใน
     ปุ่มล่างจะได้อยู่ติดขอบล่างเสมอ ไม่ถูกดันหลุดจอเวลาเนื้อหายาว */
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* ค่า font-weight ของหน้าเว็บเดิมรั่วลงมา จึงตั้งฐานเป็น 400 ตาม Figma */
  font-weight: 400;
  background: #FFFFFF;
}

/* แถบภาพหัวปูจากขอบบน ส่วนที่เหลือใช้สีพื้นซึ่งตรงกับขอบล่างของภาพพอดี
   รอยต่อถูกการ์ดขาวทับอยู่แล้วจึงไม่เห็น */
.gsb-shell[class*="hero-"] {
  background-repeat: no-repeat;
  background-position: top center;
}

.gsb-shell.hero-brand {
  background-color: #FFE7EE;
  background-image: url('/assets/images/gsb-register/v3-hero-brand.png');
  background-size: 100% 254px;
}

/**
 * หน้ากรอกข้อมูล — พื้นหลังเป็นรูปเต็มหน้า (มาสคอตมุมขวาบน) ไม่ใช่แถบบนเหมือนหน้าอื่น
 *
 * `background-size: 100% auto` ให้รูปกว้างเต็มจอแล้วสูงตามสัดส่วน ไม่ยืดบิด
 * ส่วน `background-color` ใช้สีขอบล่างของรูปพอดี เวลาเนื้อหายาวเกินรูปจะต่อเนียน
 * ไม่เห็นรอยตัด
 */
.gsb-shell.hero-form {
  background-color: #FFE7EE;
  background-image: url('/assets/images/gsb-register/v3-hero-form.png');
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
}

/* หน้าตรวจสอบข้อมูล (Figma 85:7710 · 85:6616) — รูปเต็มหน้าแบบเดียวกับหน้ากรอกข้อมูล
   ประกอบจากชั้นใน Figma: สีพื้น + Group 12 + Group 14 + มาสคอตชูนิ้ว
   (รูปไล่สี/ลายก้นหอยใน Figma ปิด fill ไว้ จึงไม่ใส่) ห้ามฝังขอบการ์ดในรูป ไม่งั้นโผล่เป็นกรอบขาว */
.gsb-shell.hero-review {
  background-color: #FFE7EE;
  background-image: url('/assets/images/gsb-register/v3-hero-review.jpg');
  background-size: 100% auto;
}

/* หน้ารอตรวจสอบ — วางเลเยอร์ตาม Figma 141:106347 (ดู .gsb-pending-*) แทนภาพฮีโร่ก้อนเดียว */
.gsb-shell.hero-pending {
  background-color: #FFE7EE;
}

/* หน้า "ยืนยันข้อมูลสำเร็จแล้ว" — มาสคอตดีใจบนแท่นหัวใจ */
.gsb-shell.hero-approved {
  background-color: #FCD0DF;
  background-image: url('/assets/images/gsb-register/v3-hero-approved.png');
  background-size: 100% 437px;
}

/* Register-parents — มาสคอตกลางจอ ครอปให้จบพอดีขอบบนของการ์ด */
.gsb-shell.hero-parentInvite {
  background-color: #F5CDDB;
  background-image: url('/assets/images/gsb-register/v3-hero-parent-invite.png');
  background-size: 100% 378px;
}

.gsb-shell.hero-parentDone {
  background-color: #F5C9D9;
  background-image: url('/assets/images/gsb-register/v3-hero-parent-done.png');
  background-size: 100% 328px;
}

/* ใช้พื้นหลังชุดเดียวกับหน้ากรอกข้อมูลของเยาวชน — เป็นรูปเต็มหน้าไม่มีตัวหนังสือฝัง
   (ไฟล์เดิมมี "กรอกข้อมูล/เพื่อตรวจสอบ" กับปุ่มย้อนกลับอยู่ในรูป ทำให้ซ้อนกับ HTML
   สำรองไว้ที่ v3-hero-parent-form-withtext-backup.png) */
.gsb-shell.hero-parentForm {
  background-color: #FFE7EE;
  background-image: url('/assets/images/gsb-register/v3-hero-parent-form.png');
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
}

.gsb-content {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  /* min-height:0 จำเป็นกับ flex column ไม่งั้นลูกที่ overflow จะดันกล่องให้สูงเกินจอ */
  min-height: 0;
  overflow-y: auto;
  /* ตามสเปก CSS ถ้าแกนหนึ่งไม่ใช่ visible อีกแกนที่เป็น visible จะกลายเป็น auto
     ดังนั้น overflow-y:auto ทำให้ overflow-x เป็น auto ไปด้วย ถ้ามีอะไรล้นแม้ 1px
     จะเกิดแถบเลื่อนแนวนอนโผล่เป็นเส้นเทาพาดขวางจอเหนือปุ่มล่าง — ต้องปิดไว้ */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  padding: 0 16px 0;
}

/* หน้าที่มีการ์ด: เว้นข้างละ 14.5 การ์ดจึงกว้าง 361 พอดีตาม Figma โดยไม่ล้นกรอบ */
.gsb-content.is-card {
  padding-left: 14.5px;
  padding-right: 14.5px;
}

.gsb-content.has-pb {
  padding-bottom: 16px;
}

.gsb-content.has-pt {
  padding-top: 38px;
}

/* ---------- ข้อความบนแถบภาพหัว ---------- */
/* Figma: left 29 · top 134 · 40/40 Black · เงาขาวรอบตัวอักษร */
.gsb-brand-title {
  margin: 66px 0 0;
  padding-left: 14.5px;
  font-size: 40px;
  line-height: 40px;
  font-weight: 900;
  color: #ED008C;
  text-shadow: 0 0 6px #FFFFFF;
}

/* หัวเรื่องหน้าฟอร์ม/ตรวจสอบ — 2 บรรทัด ชมพูตัวใหญ่ + เข้มตัวรอง */
.gsb-hero-heading {
  padding-left: 13.5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.gsb-hero-heading h1 {
  margin: 0;
  font-size: 28px;
  line-height: 32px;
  font-weight: 700;
  color: #ED008C;
}

.gsb-hero-heading p {
  margin: 0;
  font-size: 22px;
  line-height: 32px;
  font-weight: 600;
  color: #232934;
}

/* ---------- การ์ด (Figma: w361 · radius 24 · padding 22/24) ---------- */
.gsb-card {
  box-sizing: border-box;
  flex: none;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 24px 22px;
  border: 1px solid #fff;
  border-radius: 24px;
  background: #FFFFFF;
  box-shadow: -20px -20px 30px rgba(255, 255, 255, 0.53),
    10px 10px 24px rgba(237, 0, 140, 0.14),
    inset 4px 4px 8px rgba(0, 0, 0, 0.06);
}

.gsb-card.tone-pink {
  background: #FFF4F7;
}

/* หัวข้อในการ์ดหน้าเบอร์/OTP — Figma 28/32 w700 */
.gsb-card-title {
  margin: 0;
  font-size: 28px;
  line-height: 32px;
  font-weight: 700;
  color: #ED008C;
}

/* หัวข้อการ์ดข้อมูล ("ข้อมูลสมาชิก" / "ข้อมูลบุตรหลาน") — Figma 22/24 w700 */
.gsb-card-heading {
  margin: 0;
  font-size: 22px;
  line-height: 24px;
  font-weight: 700;
  color: #ED008C;
}

/* Figma 18/24 w500 */
.gsb-card-text {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  color: #303747;
}

/* ---------- ฟอร์ม ---------- */
.gsb-field-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.gsb-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.gsb-field.gap-1 { gap: 1px; }
.gsb-field.gap-4 { gap: 4px; }
.gsb-field.gap-8 { gap: 8px; }
.gsb-field.gap-10 { gap: 10px; }

.gsb-label {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: #303747;
}

.gsb-hint {
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: #737D91;
}

.gsb-hint-accent {
  color: #ED008C;
  font-weight: 500;
}

/* Figma: สูง 50 · radius 18 · ขอบ #dfe1e6 · padding 8/16 · gap 12 */
.gsb-input-shell {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 50px;
  padding: 8px 16px;
  background: #FFFFFF;
  border: 1px solid #DFE1E6;
  border-radius: 18px;
  min-width: 0;
}

.gsb-input-shell.h-48 { height: 48px; }
.gsb-input-shell.h-52 { height: 52px; }

.gsb-input-shell:focus-within {
  border-color: #ED008C;
}

.gsb-input-shell.is-invalid,
.gsb-input-shell.is-invalid:focus-within {
  border-color: #D92D20;
}

.gsb-input-shell img {
  width: 20px;
  height: 20px;
  flex: none;
}

.gsb-bare-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #303747;
}

.gsb-bare-input::placeholder {
  color: #C9CDD4;
}

.gsb-error-text {
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #D92D20;
}

/* ปุ่มเลือกแบบวงกลม (radio) — ดีไซน์ใหม่เลิกใช้ chip สี่เหลี่ยมแล้ว */
.gsb-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.gsb-radio-chip {
  box-sizing: border-box;
  flex: none;
  height: auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid #f0f1f3;
  background: #f8f8f9;
  color: #444E61;
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: -10px -10px 30px rgba(255, 255, 255, 0.53), 4px 4px 10px rgba(0, 0, 0, 0.14);
}

.gsb-radio-chip.is-active {
  border-color: #ED008C;
  background: #E30086;
  color: #FFFFFF;
  box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.25);
}

/* กล่องติ๊ก — ใช้ 2 ทรงตาม Figma
   ปกติ = วงกลม (ในปุ่มเลือก "เป็นสมาชิกโรงเรียน")
   .is-square = สี่เหลี่ยมมุมมน radius 7 (รายการยินยอมหน้าแรก) */
.gsb-check {
  box-sizing: border-box;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F8F8F9;
  border: 1px solid #DFE1E6;
  overflow: hidden;
}

.gsb-check.is-square { border-radius: 8px; }
.gsb-check.is-r6 { border-radius: 6px; }

.gsb-check.is-checked {
  background: #ED008C;
  border: none;
  box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.25);
}

/* ติ๊กบนชิปชมพู — พื้น #fff4f7 ตาม Figma Base 34:7620 */
.gsb-check.is-checked.on-pink {
  background: #fff4f7;
  box-shadow: none;
}

.gsb-check img {
  width: 13px;
  height: 13px;
}

/* เครื่องหมายถูกสีชมพู ใช้ตอนกล่องติ๊กเป็นพื้นขาว (บนการ์ดชมพู) */
.gsb-tick.is-dark {
  filter: brightness(0) saturate(100%) invert(11%) sepia(89%) saturate(6000%) hue-rotate(320deg);
}

/* ---------- การ์ดโปรไฟล์ (หน้าฟอร์ม / ตรวจสอบข้อมูล) ---------- */
.gsb-profile-card {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px;
  background: #FFF4F7;
  box-shadow: -20px -20px 30px rgba(255, 255, 255, 0.53),
    10px 10px 24px rgba(0, 0, 0, 0.14),
    inset 4px 4px 8px rgba(0, 0, 0, 0.06);
}

.gsb-avatar {
  box-sizing: border-box;
  flex: none;
  overflow: hidden;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 2px solid #ED008C;
  background: #f0f1f3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gsb-avatar.has-src {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #fff;
}

.gsb-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.gsb-avatar.is-line {
  border-color: #00c300;
  background: #fff;
}

.gsb-profile-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gsb-profile-text strong {
  font-size: 20px;
  line-height: 26px;
  /* CSS ส่วนกลางของโปรเจกต์มี strong,b { font-weight: bold !important }
     ต้องทับด้วย !important เฉพาะจุด ไม่ไปแก้ของกลางเพราะหน้าอื่นใช้อยู่ */
  font-weight: 600 !important;
  color: #232934;
}

.gsb-profile-text span {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #737D91;
}

/* ตรา LINE มุมขวาของการ์ดโปรไฟล์ — Figma ขนาด 30 ใช้เครื่องหมาย LINE ของ template */
.gsb-line-badge {
  flex: none;
  width: 30px;
  height: 30px;
}

/* ---------- แถวข้อมูลในการ์ดตรวจสอบ ---------- */
.gsb-info-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 4px 0;
  width: 100%;
  min-width: 0;
}

/* Figma ตรึงคอลัมน์ซ้ายไว้ 112px ให้ค่าทุกแถวเรียงตรงกัน */
.gsb-info-label {
  flex: none;
  width: 112px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #737D91;
}

.gsb-info-value {
  min-width: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #232934;
  overflow-wrap: anywhere;
}

/* ---------- หน้าตรวจสอบข้อมูล (Figma 85:7710 เด็กสมัคร · 85:6616 ผู้ปกครอง) ----------
   การ์ดกว้าง 356 ที่ left 17 · ห่างกัน 8 · ห่างหัวเรื่อง 11 */
.gsb-review-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* ห่างหัวเรื่อง 11 = การ์ดเริ่มที่ y=165 ตาม Figma (ทับเท้ามาสคอตเหมือนในแบบ) */
  margin: 11px 2.5px 0;
}

/* การ์ดข้อมูล: pt16 · px18 · pb22 · หัวข้อ 20/26 · แถว 16/24 w500 */
.gsb-review-card {
  padding: 16px 18px 22px;
  gap: 10px;
}

/* การ์ดผู้ปกครองใช้เงาดำ ส่วนการ์ดบุตรหลาน/สมาชิกใช้เงาชมพู (ค่าเดิมของ .gsb-card) */
.gsb-review-card.tone-dark {
  box-shadow: -20px -20px 30px rgba(255, 255, 255, 0.53),
    10px 10px 24px rgba(0, 0, 0, 0.14),
    inset 4px 4px 8px rgba(0, 0, 0, 0.06);
}

.gsb-review-card .gsb-card-heading {
  font-size: 20px;
  line-height: 26px;
}

.gsb-review-card .gsb-info-label,
.gsb-review-card .gsb-info-value {
  font-weight: 500;
}

.gsb-review-card .gsb-info-value {
  flex: 1;
  color: #303747;
  /* ชื่อโรงเรียนพิมพ์เองได้ถึง 200 ตัว — nowrap โดน overflow-x:hidden ของ .gsb-content ตัดทิ้ง */
  white-space: normal;
  overflow-wrap: anywhere;
}

/* การ์ดโปรไฟล์ LINE บนหน้าตรวจสอบ: ชื่อ 18/24 w600 · เบอร์ 14/18 w600 · gap 4 · วงแหวน 3px */
.gsb-review-profile .gsb-avatar {
  border-width: 3px;
}

.gsb-review-profile .gsb-profile-text {
  gap: 4px;
}

.gsb-review-profile .gsb-profile-text strong {
  font-size: 18px;
  line-height: 24px;
}

.gsb-review-profile .gsb-profile-text span {
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
}

/* ข้อความเตือนเหนือปุ่มยืนยัน (อยู่ในแถบปุ่มล่าง ห่างปุ่ม 24) — Figma 14/18 w600 */
.gsb-review-note {
  margin: 0;
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  color: #737D91;
  text-align: center;
}

/* ---------- หน้าเบอร์ / OTP (Figma 31:6227 · 23:4420) ---------- */
.gsb-phone-card,
.gsb-otp-card {
  margin-top: 28px;
}

.gsb-phone-block,
.gsb-otp-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  width: 100%;
}

.gsb-otp-block {
  gap: 14px;
}

.gsb-phone-head,
.gsb-otp-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* รหัสอ้างอิงที่มากับ SMS — ตัวเลขเน้นสีชมพูให้เทียบกับในข้อความได้เร็ว */
.gsb-otp-ref {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: #566278;
}

.gsb-otp-ref span {
  font-weight: 700;
  color: #ED008C;
  letter-spacing: 0.5px;
}

.gsb-phone-field,
.gsb-otp-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  width: 100%;
}

.gsb-phone-field {
  gap: 6px;
}

.gsb-member-card {
  margin-top: 8px;
  gap: 10px;
  padding: 16px 18px 22px;
}

/* ---------- OTP ---------- */
.gsb-otp-row {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.gsb-otp-digit {
  box-sizing: border-box;
  flex: 1 0 0;
  min-width: 0;
  max-width: 48px;
  height: 48px;
  padding: 8px 0;
  text-align: center;
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #303747;
  background: #FFFFFF;
  border: 1px solid #DFE1E6;
  border-radius: 18px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.gsb-otp-digit::placeholder {
  color: #C9CDD4;
}

.gsb-otp-digit:focus {
  border-color: #ED008C;
}

.gsb-otp-digit.is-invalid,
.gsb-otp-digit.is-invalid:focus {
  border-color: #D92D20;
}

.gsb-otp-error {
  text-align: center;
}

.gsb-countdown {
  margin: 0;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: #232934;
  text-align: center;
}

.gsb-countdown-time {
  font-weight: 500;
  color: #ED008C;
}

.gsb-resend {
  border: none;
  background: none;
  padding: 0;
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  color: #ED008C;
  text-align: center;
  cursor: pointer;
}

.gsb-resend:disabled {
  color: #737D91;
  cursor: default;
}

/* ---------- หน้ายินยอม / นโยบาย — Figma T&C 508:88593 ---------- */
.gsb-shell:has(.gsb-consent-page) {
  background: linear-gradient(153.49deg, #f4f7fb 0%, #fdfdfd 100%);
}

.gsb-consent-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
  word-break: normal;
  overflow-wrap: break-word;
}

.gsb-consent-body {
  padding: 24px 16px 0;
}

.gsb-consent-card {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border: 1px solid #fff;
  border-radius: 24px;
  background: linear-gradient(150.8deg, #f4f7fb 10.95%, #fff 140.45%);
  box-shadow: -20px -20px 30px #fff, 10px 10px 24px rgba(0, 0, 0, 0.1), inset 4px 4px 20px rgba(255, 255, 255, 0.1);
}

.gsb-consent-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.gsb-consent-logo {
  flex: none;
  display: block;
  width: 122px;
  height: 130px;
  object-fit: contain;
}

.gsb-consent-intro {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.gsb-consent-heading {
  margin: 0;
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  color: #232934;
  white-space: nowrap;
}

.gsb-consent-lead {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: #444e61;
}

.gsb-page-title {
  margin: 0;
  font-size: 22px;
  line-height: 30px;
  font-weight: 600;
  color: #232934;
}

.gsb-page-subtitle {
  margin: 0;
  font-size: 16px;
  line-height: 25px;
  font-weight: 400;
  color: #444E61;
}

.gsb-consent-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.gsb-consent-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 12px 0;
  cursor: pointer;
}

.gsb-consent-item.has-divider {
  border-bottom: 1px solid #dfe1e6;
}

.gsb-consent-item input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.gsb-consent-box {
  flex: none;
  display: flex;
  align-items: center;
  padding: 2px 0;
}

.gsb-consent-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.gsb-consent-title {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: #303747;
}

.gsb-consent-title.is-active {
  color: #ed008c;
}

.gsb-consent-desc {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #737d91;
}

.gsb-consent-page .gsb-bottom-bar {
  background: transparent;
}

.gsb-consent-page .gsb-primary-btn:not(:disabled) {
  background: linear-gradient(153.61deg, #42f2d9 0%, #03bbb1 53.85%, #049b9b 100%);
  box-shadow: 0 10px 22px rgba(3, 133, 133, 0.2), 0 3px 6px rgba(3, 133, 133, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.45);
}

/* ---------- แถบปุ่มล่าง (Figma: pt12 · px16 · gap24) ---------- */
.gsb-bottom-bar {
  position: relative;
  flex: none;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* Figma วางปุ่มไว้ห่างขอบล่าง 34 (วัดตรงกันทุกหน้า) บวก safe-area ของ iPhone จอมน */
  padding: 12px 16px calc(34px + env(safe-area-inset-bottom, 0px));
  background: transparent;
}

.gsb-bottom-bar.is-solid {
  background: #FFFFFF;
}

.gsb-shell.hero-form .gsb-bottom-bar {
  background: #fee6ed;
}

.gsb-primary-btn {
  box-sizing: border-box;
  flex: none;
  width: 100%;
  min-width: 0;
  height: 48px;
  border: none;
  border-radius: 18px;
  padding: 0 24px;
  background: linear-gradient(153.61deg, #42f2d9 0%, #03bbb1 53.85%, #049b9b 100%);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 10px 22px rgba(3, 133, 133, 0.2), 0 3px 6px rgba(3, 133, 133, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.45);
}

.gsb-primary-btn:disabled {
  background: #E6E6E6;
  color: #676767;
  box-shadow: none;
  cursor: not-allowed;
}

/* ---------- ฮีโร่หน้ารอตรวจสอบ — พิกัดจาก Figma 141:106347 (เฟรม 390 อิงกึ่งกลาง) ---------- */
.gsb-pending-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.gsb-pending-bg > div {
  position: absolute;
  inset: 0;
  opacity: 0.6;
}
/* ภาพไล่สีครอปมาเฉพาะแผงกลางที่ Figma ใช้ ยืดคลุมเต็มจอทุกความสูง */
.gsb-pending-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gsb-pending-hero {
  position: relative;
  flex: none;
  height: 428px;
  margin: 0 -14.5px;
}
.gsb-pending-hero > * {
  position: absolute;
  pointer-events: none;
}
.gsb-pending-hero img {
  display: block;
  max-width: none;
}
.gsb-pending-scene {
  top: 87px;
  left: calc(50% - 175px);
  width: 351px;
  height: 309px;
  overflow: hidden;
  opacity: 0.7;
}
.gsb-pending-scene img {
  position: absolute;
  left: -129px;
  top: 0;
  width: 480px;
  height: 309px;
}
.gsb-pending-hearts {
  top: 333px;
  left: calc(50% - 98px);
  width: 198px;
  height: 105px;
  overflow: hidden;
}
.gsb-pending-hearts img {
  position: absolute;
  left: -183px;
  top: -248px;
  width: 564px;
  height: 353px;
}
.gsb-pending-mascot {
  top: 175.5px;
  left: calc(50% - 105px);
  width: 212px;
  height: 212px;
}
.gsb-pending-platform {
  top: 299px;
  left: calc(50% - 40px);
  width: 82px;
  height: 82px;
}
.gsb-pending-mascot img,
.gsb-pending-platform img,
.gsb-pending-star img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gsb-pending-star {
  opacity: 0.2;
}
.gsb-pending-star.is-left {
  top: 251px;
  left: calc(50% - 183px);
  width: 55.5px;
  height: 53px;
  transform: rotate(-86.43deg);
}
.gsb-pending-star.is-right {
  top: 144px;
  left: calc(50% + 95px);
  width: 74.5px;
  height: 71.5px;
  transform: rotate(-62.33deg);
}

.gsb-pending-title {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: #ED008C;
  text-align: center;
}

.gsb-pending-text {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: #303747;
  text-align: center;
}

/* ---------- อื่นๆ ---------- */
.gsb-spinner-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
}

.gsb-spinner {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 3px solid #FCD2F2;
  border-top-color: #ED008C;
  animation: gsb-spin 0.8s linear infinite;
}

@keyframes gsb-spin {
  to { transform: rotate(360deg); }
}

/* ---------- ป๊อปอัปแจ้งเตือน (GsbAlert) ---------- */
.gsb-alert-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
}

.gsb-alert-box {
  width: 100%;
  max-width: 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  filter: drop-shadow(0 14px 32px rgba(0, 0, 0, 0.28));
}

/* ครึ่งบนของป๊อปอัป = ภาพจาก Figma (มาสคอต + ขอบบนโค้งของการ์ด)
   ตัดจบใต้เท้ามาสคอตพอดี แล้วให้ CSS ต่อพื้นการ์ดลงมาเอง
   ทำแบบนี้เพื่อให้การ์ดยืดตามความยาวข้อความได้โดยมาสคอตไม่ยืดตาม */
.gsb-alert-top {
  width: 100%;
  /* 460 / 700 ของภาพต้นฉบับ */
  padding-top: 65.71%;
  background-position: top center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.gsb-alert-top.variant-warn {
  background-image: url('/assets/images/gsb-register/parent-alert-top.png');
}

.gsb-alert-top.variant-sad {
  background-image: url('/assets/images/gsb-register/parent-alert-top-sad.png');
}

.gsb-alert-top.variant-reward {
  background-image: url('/assets/images/gsb-register/parent-alert-top-reward.png');
}

.gsb-alert-body {
  /* เกยขึ้นไป 1px กันเส้นขาวบาง ๆ ตรงรอยต่อเวลาเบราว์เซอร์ปัดเศษ */
  margin-top: -1px;
  padding: 0 24px 26px;
  border-radius: 0 0 32px 32px;
  background: radial-gradient(120% 90% at 50% 20%, #FDDAF3 0%, #FDD2EF 58%, #FBC4E8 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.gsb-alert-title {
  margin: 0;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: #ED008C;
  text-align: center;
}

.gsb-alert-message {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  color: #303747;
  text-align: center;
}

.gsb-alert-action {
  margin-top: 14px;
  border: none;
  padding: 0 30px;
  height: 40px;
  border-radius: 999px;
  background: #E30086;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 16px;
  line-height: 40px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: inset 0 0 14px 0 #FCD2F2;
  -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   Register-parents เฉพาะส่วนที่ต่างจากชุดเยาวชน (gsbp-*)
   ย้ายมาจาก ParentBinding/GsbParentUI.tsx
   ========================================================================== */
.gsbp-headline-title {
  margin: 0;
  /* วัดจาก Figma export 1:1 — "เชิญคุณเป็นผู้ปกครอง" กว้าง 224px */
  font-size: 25px;
  line-height: 32px;
  font-weight: 700;
  color: #ED008C;
  text-align: center;
}

/* หัวข้อบนพื้นเทา (เช่นหน้า "ไม่สามารถตอบรับคำเชิญได้") ใช้สีเข้มแทนชมพู */
.gsbp-headline-title.is-dark {
  color: #16181D;
}

/* ข้อความรองในการ์ดชมพู — รหัสอ้างอิง หรือคำอธิบายผลการผูก */
.gsbp-headline-text {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: #303747;
  text-align: center;
}

/* ---------- รายการขั้นตอนในหน้าคำเชิญ ---------- */
/* Figma ใช้เลขธรรมดา "1." ไม่ใช่เลขในวงกลม */
.gsbp-step-list {
  margin: 0;
  padding-left: 22px;
  list-style: decimal;
  display: flex;
  flex-direction: column;
  /* Figma วางบรรทัดชิดกัน ระยะห่างมาจาก line-height ล้วน ๆ */
  gap: 0;
  min-width: 0;
}

.gsbp-step-item {
  min-width: 0;
  /* วัดจาก Figma export — บรรทัด "กรอกข้อมูลผู้ปกครองและเลขบัตรประชาชน" กว้าง 296px */
  font-size: 17px;
  line-height: 24px;
  font-weight: 400;
  color: #303747;
}

.gsbp-step-item::marker {
  color: #303747;
}

/* ---------- หน้าผูกสำเร็จ ---------- */
/* หัวแถว "ผูกกับบุตรหลานแล้ว  2/2" */
.gsbp-slot-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding-bottom: 6px;
}

.gsbp-slot-label {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: #232934;
}

.gsbp-slot-count {
  flex: none;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: #232934;
}

/* หนึ่งแถว = บุตรหลานหนึ่งคน — ไม่มีปุ่มยกเลิก เพราะผูกแล้วลบไม่ได้ */
.gsbp-linked-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 10px 0;
}

.gsbp-linked-row + .gsbp-linked-row {
  border-top: 1px solid #F0F1F3;
}

.gsbp-linked-avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #FFE7EE;
}

/* มีรูปโปรไฟล์ — ตัว JSX ใส่ background-image ผ่าน style ให้ */
.gsbp-linked-avatar.has-src {
  background-color: #FFFFFF;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.gsbp-linked-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.gsbp-linked-text strong {
  font-size: 16px;
  line-height: 22px;
  /* CSS ส่วนกลางของโปรเจกต์มี strong,b { font-weight: bold !important } ต้องทับเฉพาะจุด */
  font-weight: 600 !important;
  color: #232934;
}

.gsbp-linked-text span {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #737D91;
}

/* ป้ายชมพูท้ายแถว บอกความสัมพันธ์ที่เลือกไว้ตอนผูก */
.gsbp-relation-badge {
  flex: none;
  padding: 4px 12px;
  border-radius: 999px;
  background: #FFE7EE;
  color: #CF007A;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

/* ข้อความกำกับใต้การ์ดตรวจสอบข้อมูล — เล็กและสีจาง */
.gsbp-disclaimer {
  margin: 0;
  padding: 0 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #737D91;
  text-align: center;
}

.gsbp-disclaimer strong {
  /* CSS ส่วนกลางมี strong,b { font-weight: bold !important } ต้องทับเฉพาะจุด */
  font-weight: 600 !important;
  color: #303747;
}

/* ==========================================================================
   Saving group — หน้ากลุ่มของฉัน (Figma "Main - Create group" หน้าที่ 5)
   วัดจาก export 1:1 กว้าง 390
   ========================================================================== */
/* ไม่เว้นขอบบน เพราะบล็อกต้อนรับปูชนขอบจอ */
.sg-col.is-group {
  padding-top: 0;
}

/**
 * บล็อกชมพูเต็มความกว้าง มุมล่างโค้ง — ยื่นออกไปชน 2 ขอบจอผ่าน margin ติดลบ
 * เท่ากับ padding ข้างของ .sg-col พอดี
 *
 * ⚠️ ภาพพื้นหลังต้อง **ไม่มีตัวหนังสือ** เพราะชื่อกลุ่มเปลี่ยนตามแต่ละคน ต้องเป็น HTML
 */
.sg-welcome {
  margin: 0 -20px;
  /* วัดจาก export: ขอบล่างของการ์ดคะแนนห่างขอบล่างแถบแค่ ~5 */
  padding: 0 10px 6px;
  border-radius: 0 0 26px 26px;
  margin-top: -60px;
  /**
   * ใช้ภาพที่ครอปเฉพาะฝั่งซ้าย (มาสคอต ดาว ประกาย ลายรัศมี) ไล่ alpha จางหายทางขวา
   * แล้วให้ gradient ชั้นล่างต่อพื้นการ์ดไปจนสุด
   *
   * ไม่ใช้ point.png ทั้งใบเพราะ**มีตัวหนังสือฝังอยู่ในภาพ** จะซ้อนกับชื่อกลุ่ม
   * ที่เป็น HTML เป็นสองชั้น และชื่อในภาพก็ผิดสำหรับทุกกลุ่มที่ไม่ได้ชื่อ "ออมสนุกสุดๆ"
   * ถ้ามี export ที่ปิด layer ตัวหนังสือแล้ว ให้เปลี่ยนมาใช้ตัวนั้นทั้งใบได้เลย
   */
   height: 324px;
  background: url('/assets/images/saving-group/point.png') ;
  background-size: cover;
  overflow: hidden;
}


/* วัดจาก export: จากขอบบนแถบถึงขอบบนการ์ดคะแนน = 140 (รวม margin-top 12 ของการ์ด) */
.sg-welcome-head {
  display: flex;
  align-items: center;
  min-height: 128px;
  min-width: 0;
  margin-top: 55px;
}

/* เว้นที่ซ้ายไว้ให้มาสคอตที่อยู่ในภาพพื้นหลัง — มาสคอตกว้าง ~105 บนแถบกว้าง 370
   ข้อความที่เหลือจึงมีจุดกึ่งกลางอยู่ที่ x≈245 ตรงกับ export */
.sg-welcome-head::before {
  content: '';
  flex: 0 0 28%;
}

/* Figma ใช้ 2 ขนาด — บรรทัดบนเล็กกว่า ชื่อกลุ่มบรรทัดล่างใหญ่กว่า */
.sg-welcome-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 26px;
  font-weight: 700;
  color: #FFFFFF;
  text-align: center;
  text-shadow: 0 2px 4px rgba(198, 32, 121, 0.35);
}

.sg-welcome-name {
  display: block;
  font-size: 1.25rem;
  line-height: 30px;
  font-weight: 700;
}

/* การ์ดคะแนนซ้อนอยู่ในบล็อกชมพู — padding/gap เอาจากค่า Figma inspect ตรงๆ */
.sg-point-card {
  padding: 21px 19px;
  border-radius: 20px;
  /* ขอบขาวรอบการ์ด ทำให้การ์ดลอยออกจากพื้นชมพูเข้มด้านหลัง */
  border: 2px solid #FFFFFF;
  background: #FDEFF7;
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 0;
}

.sg-point-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.sg-point-label {
  /* วัดจาก export แยกใบของการ์ด: ใหญ่กว่าที่เดาไว้รอบแรก (15 → 17) */
  font-size: 1.0625rem;
  line-height: 26px;
  font-weight: 700;
  color: #ED008C;
}

.sg-point-value {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1.25rem;
  line-height: 26px;
  font-weight: 700;
  color: #ED008C;
}

/**
 * แถวเป้าหมาย — 2 สีคนละอย่าง (ดูจาก export แยกใบของการ์ด)
 *   "เป้าหมายกลุ่ม"  = ตัวเข้มเกือบดำ
 *   "0/500 คะแนน"   = ตัวชมพูแบรนด์
 * รอบก่อนทำเป็นชมพูทั้งคู่เพราะอ่านสีจากภาพย่อผิด
 */
.sg-goal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.8125rem;
  line-height: 20px;
  font-weight: 600;
  color: #232934;
  min-width: 0;
}

.sg-goal-row span:last-child {
  font-weight: 700;
  color: #ED008C;
}

/* แถบความคืบหน้าบนพื้นการ์ดคะแนน — รางชมพูอ่อน หนา 7 ตามที่วัดได้ */
.sg-point-card .sg-progress {
  margin-top: 0;
  height: 7px;
  background: #F8D9EA;
}

/* ---------- การ์ดสมาชิก / รหัสเชิญ ---------- */
.sg-group-card {
  margin-top: 14px;
  border-radius: 16px;
  background: #FFFFFF;
  padding: 14px 16px;
  box-shadow: 0 4px 16px -8px rgba(17, 20, 27, 0.18);
  min-width: 0;
}

.sg-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.sg-group-title {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 22px;
  font-weight: 700;
  color: #ED008C;
}

.sg-group-title.is-center {
  text-align: center;
  width: 100%;
}

.sg-group-count {
  flex: none;
  font-size: 0.8125rem;
  line-height: 20px;
  font-weight: 500;
  color: #303747;
}

.sg-group-note {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  line-height: 20px;
  font-weight: 400;
  color: #737D91;
}

.sg-member-list {
  margin-top: 12px;
}

/* ---------- รหัสเชิญ ---------- */
.sg-code-box {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid #EFEFEF;
  background: #FAFAFA;
  padding: 0 14px;
  min-width: 0;
}

.sg-code-box svg {
  flex: none;
  /* กำหนดขนาดไว้ในกฎเลย ไม่ฝากไว้กับ width/height ในแท็ก
     ไม่งั้น component ไหนลืมใส่ ไอคอนจะบานเต็มกล่อง */
  width: 18px;
  height: 18px;
  color: #737D91;
}

.sg-code-text {
  font-size: 1rem;
  line-height: 22px;
  font-weight: 500;
  color: #232934;
  letter-spacing: 0.3px;
  /* รหัสเป็นอักษรละตินล้วน ห้ามให้ break-word ของภาษาไทยมาหั่นกลางรหัส */
  word-break: keep-all;
}

.sg-share-row {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.sg-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 8px;
  border: 0;
  border-radius: 18px;
  background: #FFE7EE;
  color: #CF007A;
  box-shadow: inset 0 0 16px #FFB3E6;
  font-family: inherit;
  font-size: 12px;
  line-height: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.sg-share-btn.is-line {
  background: #268800;
  color: #FFFFFF;
  box-shadow: none;
}

.sg-share-btn img,
.sg-share-btn svg {
  flex: none;
  width: 16px;
  height: 16px;
}

/* ---------- ปุ่มยกเลิกกลุ่ม ---------- */
.sg-leave-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 16px auto 0;
  height: 34px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #FFEDF5;
  color: #D4007D;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

.sg-leave-btn:disabled {
  background: #F1F1F1;
  color: #6D6D6D;
  cursor: not-allowed;
}

.sg-leave-btn svg {
  flex: none;
}

/* ==========================================================================
   Saving group — หน้ากลุ่มที่ ACTIVE แล้ว (Figma หน้าที่ 6-7)
   วัดจาก export 780×2598 (2x ของ 390)
   ========================================================================== */
/* ---------- แถวปุ่มลัด 3 ปุ่ม ---------- */
.sg-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.sg-action-btn {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 48px;
  padding: 0 6px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #E30C7F 0%, #E30086 100%);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 14px -8px rgba(237, 0, 140, 0.6);
}

.sg-action-btn svg {
  flex: none;
  width: 16px;
  height: 16px;
}

.sg-action-btn:disabled {
  background: #E6E6E6;
  color: #676767;
  box-shadow: none;
  cursor: not-allowed;
}

/* ---------- หัวการ์ดที่มีปุ่มลูกศรไปหน้ารวม ---------- */
.sg-card-more {
  flex: none;
  width: 26px;
  height: 26px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: none;
  color: #ED008C;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- แถวรูปสมาชิกแนวนอน ---------- */
.sg-avatar-row {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  overflow-x: auto;
  /* ภาษาไทยไม่มีเว้นวรรค ชื่อยาวต้องไม่ดันแถวให้ล้น */
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.sg-avatar-item {
  flex: 0 0 auto;
  width: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

.sg-avatar-pic {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #FCD2F2;
  background-color: #FFE7EE;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* ปุ่ม "เชิญสมาชิก" — วงกลมเส้นประมีเครื่องหมายบวก */
.sg-avatar-pic.is-invite {
  border-style: dashed;
  background-color: #FFF4F7;
  color: #DA0081;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
}

.sg-avatar-name {
  font-size: 0.75rem;
  line-height: 16px;
  font-weight: 600;
  color: #232934;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sg-avatar-name.is-muted {
  font-weight: 400;
  color: #737D91;
}

/* ตัวเลขคะแนนที่โอนเป็น**ตัวเทา** ไม่ใช่ชมพู (ดูจาก export หน้าสมาชิกทั้งหมด) */
.sg-avatar-point {
  font-size: 0.75rem;
  line-height: 16px;
  font-weight: 500;
  color: #737D91;
}

/* ---------- รายการย้อนหลัง ---------- */
.sg-tabs {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.sg-tab {
  border: 1px solid #FCD2F2;
  border-radius: 999px;
  background: #FFFFFF;
  color: #E30086;
  height: 34px;
  padding: 0 18px;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.sg-tab.is-active {
  border-color: #ED008C;
  background: #E30086;
  color: #FFFFFF;
}

.sg-txn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  min-width: 0;
}

.sg-txn + .sg-txn {
  border-top: 1px solid #F0F1F3;
}

.sg-txn-pic {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #FFE7EE;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.sg-txn-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.sg-txn-title {
  font-size: 0.875rem;
  line-height: 20px;
  font-weight: 600;
  color: #232934;
}

.sg-txn-date {
  font-size: 0.75rem;
  line-height: 18px;
  font-weight: 400;
  color: #737D91;
}

.sg-txn-point {
  flex: none;
  text-align: right;
  font-size: 0.9375rem;
  line-height: 20px;
  font-weight: 700;
  color: #ED008C;
}

/* รายการที่หักออก เช่น FORFEIT หรือแลกรางวัล */
.sg-txn-point.is-minus {
  color: #737D91;
}

.sg-txn-point small {
  display: block;
  font-size: 0.6875rem;
  line-height: 14px;
  font-weight: 400;
  color: #737D91;
}

.sg-txn-empty {
  margin: 16px 0 4px;
  font-size: 0.8125rem;
  line-height: 20px;
  font-weight: 400;
  color: #737D91;
  text-align: center;
}

/* ==========================================================================
   Saving group — หน้ารายชื่อสมาชิกทั้งหมด (Figma "สมาชิกกลุ่ม")
   ========================================================================== */
.sg-member-grid {
  display: grid;
  /* 4 คนต่อแถวตาม export */
  grid-template-columns: repeat(4, 1fr);
  gap: 22px 6px;
  margin-top: 6px;
}

/* ในกริดใช้รูปใหญ่กว่าบนแถวแนวนอนของหน้าหลัก */
.sg-member-grid .sg-avatar-item {
  width: auto;
}

.sg-member-grid .sg-avatar-pic {
  width: 64px;
  height: 64px;
}

.sg-member-grid .sg-avatar-name {
  font-size: 0.8125rem;
  line-height: 18px;
}

.sg-member-grid .sg-avatar-point {
  font-size: 0.8125rem;
  line-height: 18px;
}

/* ==========================================================================
   Saving group — หน้าโอนคะแนน (Figma "Main - Transfer Point")
   ========================================================================== */
/* กระเป๋าต้นทาง → ปลายทาง */
.sg-transfer-boxes {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.sg-transfer-box {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  border-radius: 16px;
  background: #FFF4F7;
  text-align: center;
}

.sg-transfer-pic {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #FCD2F2;
  background-color: #FFE7EE;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.sg-transfer-name {
  font-size: 0.8125rem;
  line-height: 18px;
  font-weight: 600;
  color: #232934;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sg-transfer-point {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.875rem;
  line-height: 20px;
  font-weight: 700;
  color: #ED008C;
}

.sg-transfer-arrow {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #E30086;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ช่องกรอกจำนวนคะแนน */
.sg-amount-input {
  width: 100%;
  height: 52px;
  margin-top: 8px;
  border-radius: 16px;
  border: 1px solid #DFE1E6;
  background: #FFFFFF;
  padding: 0 16px;
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: 600;
  color: #232934;
  text-align: center;
  outline: none;
  min-width: 0;
}

.sg-amount-input::placeholder {
  color: #C9CDD4;
  font-weight: 400;
}

.sg-amount-input:focus {
  border-color: #ED008C;
}

.sg-amount-input.is-invalid {
  border-color: #D92D20;
}

/* ปุ่มเลือกจำนวนด่วน */
.sg-quick-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.sg-quick-btn {
  flex: 1;
  min-width: 0;
  height: 34px;
  border: 1px solid #FCD2F2;
  border-radius: 999px;
  background: #FFFFFF;
  color: #E30086;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.sg-quick-btn.is-active {
  border-color: #ED008C;
  background: #E30086;
  color: #FFFFFF;
}

.sg-quick-btn:disabled {
  border-color: #E6E6E6;
  background: #F6F6F6;
  color: #707070;
  cursor: not-allowed;
}

.sg-transfer-note {
  margin: 14px 0 0;
  font-size: 0.75rem;
  line-height: 18px;
  font-weight: 400;
  color: #737D91;
  text-align: center;
}

/* แถบปุ่มล่างของหน้าโอนคะแนน — ลอยติดขอบล่างเหนือแถบเมนู */
.sg-bottom-bar {
  position: sticky;
  bottom: 0;
  margin-top: 24px;
  padding-top: 8px;
}

/* มาสคอตของป๊อปอัปแต่ละแบบ — ยืมจากชุด Register-child ไปก่อน
   ตัว success ใช้มาสคอตดีใจถือดาวซึ่งใกล้เคียงแบบที่สุดในบรรดาที่มีอยู่ */
.sg-dialog-top.variant-success {
  background-image: url('/assets/images/saving-group/success-mascot-top.png'),
    url('/assets/images/gsb-register/parent-alert-top-reward.png');
}

/* ==========================================================================
   Saving group — หน้าตั้งค่ากลุ่ม / แก้ไขข้อมูลกลุ่ม (Figma "ตั้งค่ากลุ่ม")
   ========================================================================== */
.sg-info-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid #F0F1F3;
  min-width: 0;
}

/* ลิงก์ "แก้ไข" เป็นตัวน้ำเงินขีดเส้นใต้ตามแบบ ไม่ใช่ชมพูเหมือนที่อื่น */
.sg-edit-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: none;
  padding: 0;
  color: #2F6BFF;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}

.sg-edit-link svg {
  flex: none;
  width: 14px;
  height: 14px;
}

.sg-info-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  min-width: 0;
}

.sg-info-row + .sg-info-row {
  border-top: 1px solid #F5F5F7;
}

.sg-info-label {
  flex: none;
  font-size: 0.875rem;
  line-height: 20px;
  font-weight: 400;
  color: #566278;
}

.sg-info-value {
  min-width: 0;
  font-size: 0.875rem;
  line-height: 20px;
  font-weight: 500;
  color: #232934;
  text-align: right;
  overflow-wrap: anywhere;
}

/* บล็อกคำเตือนเหนือปุ่มล่าง — ไอคอน i กลม แล้วข้อความจัดกลาง */
.sg-note-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding: 0 8px 14px;
  color: #737D91;
}

.sg-note-block p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 20px;
  font-weight: 400;
  text-align: center;
}

/* ปุ่มอันตราย (ยุบกลุ่ม / ออกจากกลุ่ม) — แดงเต็มความกว้าง */
.sg-btn-danger {
  background: linear-gradient(180deg, #D53F4A 0%, #C0392F 100%);
  color: #FFFFFF;
  box-shadow: 0 6px 14px -8px rgba(192, 57, 47, 0.6);
}

.sg-btn-danger:disabled {
  background: #E6E6E6;
  color: #676767;
  box-shadow: none;
  cursor: not-allowed;
}

/* ดันปุ่มล่างไปติดขอบล่างเมื่อเนื้อหาสั้น */
.sg-col.is-settings {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- หน้าจบ "ขอบคุณที่ร่วมกิจกรรม" ---------- */
.sg-farewell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px 20px 110px;
  background: linear-gradient(180deg, #FDDCEE 0%, #FBC4E3 100%);
}

/* ⚠️ ไฟล์มาสคอตบนแท่นยังไม่มี — ใช้ background จะได้ไม่โชว์กรอบรูปแตกตอน 404 */
.sg-farewell-mascot {
  width: 200px;
  height: 200px;
  background: url('/assets/images/saving-group/farewell-mascot.png') center / contain no-repeat;
}

.sg-farewell-card {
  width: 100%;
  max-width: 350px;
  border-radius: 20px;
  background: #FFFFFF;
  padding: 20px 22px;
  text-align: center;
  box-shadow: 0 8px 20px -12px rgba(17, 20, 27, 0.25);
}

.sg-farewell-title {
  margin: 0 0 6px;
  font-size: 1.125rem;
  line-height: 26px;
  font-weight: 700;
  color: #ED008C;
}

.sg-farewell-text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 22px;
  font-weight: 400;
  color: #303747;
}

/* ==========================================================================
   Saving group — หน้ารายการย้อนหลังแบบเต็ม (Figma "Profile-Points-History")
   ========================================================================== */
.sg-history-list {
  margin-top: 4px;
}

/* ---------- แท็บ "การใช้คะแนน" — แถวแบบกางรายละเอียดได้ ---------- */
.sg-history-row {
  border-bottom: 1px solid #EFEFEF;
  padding: 14px 2px;
  min-width: 0;
}

.sg-history-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}

.sg-history-title {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  line-height: 20px;
  font-weight: 600;
  color: #232934;
}

/* วันที่นำหน้าเป็นตัวเข้ม ส่วนชื่อรายการเป็นตัวชมพู ตามแบบ */
.sg-history-title em {
  font-style: normal;
  font-weight: 400;
  color: #ED008C;
}

.sg-history-point {
  flex: none;
  font-size: 0.875rem;
  line-height: 20px;
  font-weight: 700;
  color: #E02B3C;
}

.sg-history-point.is-plus {
  color: #ED008C;
}

.sg-history-caret {
  flex: none;
  width: 18px;
  height: 18px;
  color: #737D91;
  transition: transform 0.2s ease;
}

.sg-history-row.is-open .sg-history-caret {
  transform: rotate(180deg);
}

.sg-history-detail {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sg-history-detail-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.8125rem;
  line-height: 20px;
  font-weight: 400;
  color: #737D91;
  min-width: 0;
}

.sg-history-detail-row span:last-child {
  text-align: right;
  color: #303747;
  overflow-wrap: anywhere;
}

.sg-load-more {
  display: block;
  margin: 18px auto 0;
  border: 1px solid #FCD2F2;
  border-radius: 999px;
  background: #FFFFFF;
  color: #E30086;
  height: 36px;
  padding: 0 22px;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.sg-load-more:disabled {
  border-color: #E6E6E6;
  color: #B3B3B3;
  cursor: not-allowed;
}

/* ==========================================================================
   Saving group — ของรางวัลกลุ่ม (Figma "Main - Reward group")
   ========================================================================== */
.sg-reward-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 14px;
}

.sg-reward-card {
  display: flex;
  flex-direction: column;
  border: 0;
  padding: 0;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 4px 16px -8px rgba(17, 20, 27, 0.18);
  overflow: hidden;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  min-width: 0;
}

/* ของรางวัลที่คะแนนกลุ่มไม่พอ หรือหมดโควตา — ทำให้จางแต่ยังกดดูรายละเอียดได้ */
.sg-reward-card.is-disabled .sg-reward-pic,
.sg-reward-card.is-disabled .sg-reward-body {
  opacity: 0.45;
  filter: grayscale(0.8);
}

.sg-reward-pic {
  width: 100%;
  aspect-ratio: 16 / 10;
  background-color: #F6F6F8;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.sg-reward-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.sg-reward-name {
  font-size: 0.8125rem;
  line-height: 18px;
  font-weight: 600;
  color: #232934;
  /* ตัดที่ 2 บรรทัดให้การ์ดสูงเท่ากันทั้งกริด */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sg-reward-note {
  font-size: 0.6875rem;
  line-height: 16px;
  font-weight: 400;
  color: #737D91;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sg-reward-point {
  margin-top: 2px;
  font-size: 0.8125rem;
  line-height: 18px;
  font-weight: 700;
  color: #ED008C;
}

/* ---------- หน้ารายละเอียดของรางวัล ---------- */
.sg-reward-hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  background-color: #E9E9EC;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.sg-reward-title {
  margin: 14px 0 0;
  font-size: 1rem;
  line-height: 24px;
  font-weight: 700;
  color: #232934;
}

.sg-reward-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid #F0F1F3;
  min-width: 0;
}

.sg-reward-expire {
  font-size: 0.75rem;
  line-height: 18px;
  font-weight: 400;
  color: #737D91;
}

.sg-reward-quota {
  flex: none;
  padding: 3px 12px;
  border-radius: 999px;
  background: #FFE7EE;
  color: #CF007A;
  font-size: 0.75rem;
  line-height: 18px;
  font-weight: 600;
}

.sg-reward-section {
  margin-top: 14px;
}

.sg-reward-section h3 {
  margin: 0 0 6px;
  font-size: 0.875rem;
  line-height: 20px;
  font-weight: 700;
  color: #232934;
}

.sg-reward-section p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 22px;
  font-weight: 400;
  color: #566278;
  white-space: pre-line;
}

/* ---------- หน้าจอโค้ดของรางวัลหลังแลกสำเร็จ ---------- */
.sg-code-hero {
  border-radius: 20px;
  background: linear-gradient(180deg, #FBAEDA 0%, #FCC8E6 100%);
  padding: 16px;
  text-align: center;
}

.sg-code-hero-title {
  margin: 0 0 12px;
  font-size: 1rem;
  line-height: 24px;
  font-weight: 700;
  color: #FFFFFF;
  text-shadow: 0 2px 4px rgba(198, 32, 121, 0.35);
}

.sg-code-card {
  border-radius: 16px;
  background: #FFFFFF;
  padding: 16px;
  text-align: center;
}

.sg-code-value {
  margin: 10px 0 4px;
  font-size: 1.75rem;
  line-height: 38px;
  font-weight: 700;
  color: #232934;
  letter-spacing: 2px;
  /* โค้ดเป็นอักษรละตินล้วน ห้ามให้ break-word ของภาษาไทยมาหั่นกลาง */
  word-break: keep-all;
}

.sg-code-hint {
  margin: 0 0 12px;
  font-size: 0.8125rem;
  line-height: 20px;
  font-weight: 400;
  color: #737D91;
}

.sg-code-expire {
  margin: 12px 0 0;
  font-size: 0.8125rem;
  line-height: 20px;
  font-weight: 600;
  color: #ED008C;
}

/* กล่องบาร์โค้ด/คิวอาร์ — จัดกลางและกันภาพล้นกรอบการ์ด */
.sg-code-graphic {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 0 6px;
  overflow-x: auto;
}

.sg-code-graphic svg,
.sg-code-graphic canvas {
  max-width: 100%;
  height: auto;
}

/* ---------- ภารกิจกลุ่ม (หน้ากลุ่มออม สถานะ ACTIVE) ---------- */
.sg-mission-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sg-mission {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #FFF5FA;
  min-width: 0;
}

/* เหรียญภารกิจ — ตัดเป็นแปดเหลี่ยมด้วย clip-path เลย จะได้ไม่ต้องเพิ่มไฟล์รูป */
.sg-mission-badge {
  flex: none;
  position: relative;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  background: linear-gradient(180deg, #E50077 0%, #E01683 100%);
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

/* แปดเหลี่ยมวงในสีอ่อนกว่า ให้เหรียญดูมีขอบซ้อนเหมือนในดีไซน์ */
.sg-mission-badge::before {
  content: '';
  position: absolute;
  inset: 4px;
  background: linear-gradient(180deg, #FFC2E2 0%, #F573B8 100%);
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

.sg-mission-badge svg {
  position: relative;
  width: 22px;
  height: 22px;
}

.sg-mission-body {
  flex: 1 1 auto;
  min-width: 0;
}

.sg-mission-title {
  margin: 0;
  font-size: 0.875rem;
  line-height: 20px;
  font-weight: 700;
  color: #303747;
}

.sg-mission-bar {
  width: 100%;
  height: 7px;
  margin: 6px 0 4px;
  border-radius: 999px;
  background: #FBD3E6;
  overflow: hidden;
}

.sg-mission-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #ED008C;
  transition: width 0.3s ease;
}

/* คำอธิบายชิดซ้าย ตัวเลขความคืบหน้าชิดขวา */
.sg-mission-meta {
  margin: 2px 0 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.75rem;
  line-height: 18px;
}

.sg-mission-desc {
  color: #9AA0AC;
  min-width: 0;
}

.sg-mission-bonus {
  font-weight: 700;
  color: #ED008C;
}

.sg-mission-progress {
  margin-left: auto;
  flex: none;
  font-weight: 700;
  color: #ED008C;
}

.sg-mission-reward {
  flex: none;
  font-size: 1.0625rem;
  line-height: 24px;
  font-weight: 700;
  color: #ED008C;
}

/* แจ้งสมาชิกธรรมดาว่าแลกของรางวัลได้เฉพาะหัวหน้ากลุ่ม */
.sg-leader-note {
  margin: 0 0 10px;
  padding: 9px 12px;
  border-radius: 12px;
  background: #FFF0F7;
  color: #D7007F;
  font-size: 0.8125rem;
  line-height: 20px;
  font-weight: 500;
  text-align: center;
}

/* ==========================================================================
   GSB — หน้าโปรไฟล์ (Figma "Profile")
   ========================================================================== */
.gsb-pf-page {
  min-height: 100vh;
  background: #FFFFFF;
  padding: 0 20px 32px;
}

.gsb-pf-topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* สูงอย่างน้อยเท่าปุ่มย้อนกลับ (42px) — ปุ่มเป็น position:absolute ถ้าแถวเตี้ยกว่าปุ่ม
     ปุ่มจะถูกจัดกึ่งกลางแล้วล้นขึ้นไปด้านบน ทำให้ชิดขอบจอกว่าที่ตั้งใจ */
  min-height: 42px;
  padding: 18px 0 6px;
}

/* ปุ่มย้อนกลับสีเขียวมิ้นต์ตามแบบ ไม่ใช่ชมพูเหมือนหน้ากลุ่มออม */
.gsb-pf-back {
  position: absolute;
  left: 0;
  width: 42px;
  height: 42px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  color: #FFFFFF;
  background: linear-gradient(135deg, #158478 0%, #158380 100%);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gsb-pf-back svg {
  width: 20px;
  height: 20px;
}

.gsb-pf-title {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 26px;
  font-weight: 700;
  color: #16181D;
}

/* ---------- ตัวตน: รูป ชื่อ คะแนน ---------- */
.gsb-pf-identity {
  padding: 14px 0 22px;
  text-align: center;
}

.gsb-pf-avatar {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto 12px;
  border-radius: 50%;
  border: 3px solid #ED008C;
  background: #FFE7EE center / cover no-repeat;
}

.gsb-pf-name {
  margin: 0 0 6px;
  font-size: 1.25rem;
  line-height: 28px;
  font-weight: 700;
  color: #16181D;
}

.gsb-pf-point {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 1.125rem;
  line-height: 26px;
  font-weight: 700;
  color: #16181D;
}

.gsb-pf-point-badge {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #E30086;
  color: #FFFFFF;
  font-size: 0.75rem;
  line-height: 20px;
  font-weight: 700;
  text-align: center;
}

/* ---------- กลุ่มเมนู ---------- */
.gsb-pf-group {
  padding-top: 10px;
}

.gsb-pf-group-title {
  margin: 0 0 2px;
  font-size: 0.875rem;
  line-height: 22px;
  font-weight: 500;
  color: #A7ADB8;
}

.gsb-pf-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gsb-pf-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 0;
  border: 0;
  border-bottom: 1px solid #F1F2F4;
  background: none;
  text-align: left;
  cursor: pointer;
}

.gsb-pf-row-icon {
  flex: none;
  width: 22px;
  height: 22px;
  color: #303747;
  display: inline-flex;
}

.gsb-pf-row-icon svg {
  width: 100%;
  height: 100%;
}

.gsb-pf-row-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9375rem;
  line-height: 22px;
  font-weight: 500;
  color: #16181D;
}

.gsb-pf-row-more {
  flex: none;
  width: 18px;
  height: 18px;
  color: #C4C8D0;
  display: inline-flex;
}

.gsb-pf-row-more svg {
  width: 100%;
  height: 100%;
}

/* ---------- ข้อความติดต่อท้ายหน้า ---------- */
.gsb-pf-footer {
  margin: 26px 0 0;
  font-size: 0.8125rem;
  line-height: 21px;
  color: #A7ADB8;
  text-align: center;
}

.gsb-pf-footer strong {
  color: #16181D;
  font-weight: 700;
}

/* ---------- การ์ดข้อมูล (หน้าข้อมูลส่วนตัว) ---------- */
.gsb-pf-card {
  margin-top: 30px;
  padding: 16px;
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: 0 4px 18px -8px rgba(17, 20, 27, 0.22);
}

.gsb-pf-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.gsb-pf-card-title {
  margin: 0 0 6px;
  font-size: 0.9375rem;
  line-height: 24px;
  font-weight: 700;
  color: #ED008C;
}

.gsb-pf-card-head .gsb-pf-card-title {
  margin-bottom: 0;
}

/* ลิงก์แก้ไข — ฟ้าอมเขียวตามแบบ ขีดเส้นใต้ให้รู้ว่ากดได้ */
.gsb-pf-edit {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  padding: 0;
  background: none;
  color: #1BA9C9;
  font-size: 0.875rem;
  line-height: 22px;
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}

.gsb-pf-edit svg {
  width: 15px;
  height: 15px;
}

.gsb-pf-field {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  min-width: 0;
}

.gsb-pf-field-label {
  flex: none;
  font-size: 0.875rem;
  line-height: 22px;
  color: #6B7280;
}

.gsb-pf-field-value {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  line-height: 22px;
  font-weight: 500;
  color: #16181D;
  text-align: right;
  overflow-wrap: anywhere;
}

/* กล่องหมายเหตุ — ข้อมูลที่ยืนยันกับธนาคารแล้วแก้เองไม่ได้ */
.gsb-pf-note {
  margin: 8px 0 0;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #F4F6F8;
  font-size: 0.75rem;
  line-height: 19px;
  color: #6A717E;
}

.gsb-pf-note-icon {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  color: #9AA3AF;
}

.gsb-pf-note-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- ฟอร์มข้อมูลติดต่อ ---------- */
.gsb-pf-page.has-footer {
  /* เว้นที่ให้ปุ่มบันทึกที่ลอยอยู่ก้นจอ */
  padding-bottom: 110px;
}

.gsb-pf-form {
  padding-top: 12px;
}

.gsb-pf-label {
  display: block;
  margin: 14px 0 7px;
  font-size: 0.9375rem;
  line-height: 22px;
  font-weight: 700;
  color: #16181D;
}

.gsb-pf-input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1px solid #E3E6EA;
  border-radius: 12px;
  background: #FFFFFF;
  font-size: 0.9375rem;
  color: #16181D;
}

.gsb-pf-input::placeholder {
  color: #B4BAC4;
}

.gsb-pf-input:focus {
  outline: none;
  border-color: #2CCFC4;
}

/* ช่องที่แก้ไม่ได้ — พื้นเทา ไม่มีเส้นขอบ ให้ต่างจากช่องที่พิมพ์ได้ชัดเจน */
.gsb-pf-input.is-locked {
  border-color: transparent;
  background: #F4F6F8;
  color: #6A717E;
}

.gsb-pf-input.is-error {
  border-color: #E5484D;
}

.gsb-pf-input-error {
  margin: 6px 0 0;
  font-size: 0.8125rem;
  line-height: 20px;
  color: #E5484D;
}

.gsb-pf-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 20px 26px;
  background: #FFFFFF;
}

.gsb-pf-save {
  width: 100%;
  height: 54px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #158478 0%, #178386 100%);
  color: #FFFFFF;
  font-size: 1.0625rem;
  font-weight: 700;
  cursor: pointer;
}

.gsb-pf-save:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ---------- หน้าข้อมูลครอบครัว ---------- */
.gsb-pf-card-title.is-center {
  text-align: center;
}

.gsb-pf-slot {
  flex: none;
  font-size: 0.8125rem;
  line-height: 22px;
  font-weight: 500;
  color: #6B7280;
}

.gsb-pf-family-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gsb-pf-family {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.gsb-pf-family-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FFE7EE center / cover no-repeat;
}

.gsb-pf-family-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.gsb-pf-family-name {
  font-size: 0.875rem;
  line-height: 21px;
  font-weight: 700;
  color: #16181D;
}

.gsb-pf-family-date {
  font-size: 0.75rem;
  line-height: 19px;
  color: #9AA0AC;
}

/* ป้ายความสัมพันธ์ — มารดา / บิดา */
.gsb-pf-family-tag {
  flex: none;
  padding: 4px 12px;
  border-radius: 999px;
  background: #F3F4F6;
  font-size: 0.75rem;
  line-height: 18px;
  font-weight: 500;
  color: #4B5563;
}

.gsb-pf-empty {
  margin: 10px 0 0;
  font-size: 0.8125rem;
  line-height: 21px;
  color: #9AA0AC;
  text-align: center;
}

/* ---------- หน้ารหัสแนะนำเพื่อน (Figma 96:16488) ---------- */
.gsb-pf-page.gsb-rf-page {
  box-sizing: border-box;
  max-width: 540px;
  margin: 0 auto;
  padding: 18px 16px 32px;
  font-family: 'Noto Sans Thai', 'Prompt', sans-serif;
}

.gsb-rf-body {
  width: 100%;
  max-width: 540px;
  margin: 22px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.gsb-rf-hero {
  position: relative;
  width: 325px;
  max-width: 100%;
  aspect-ratio: 325 / 103;
}

.gsb-rf-hero-pill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 999px;
  background: #FF4B9A;
  box-shadow:
    inset 2px -4px 12px rgba(239, 0, 141, 0.52),
    inset 0 0 18px 4px #FFE7EE;
}

.gsb-rf-hero-deco {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.08;
  pointer-events: none;
  object-fit: fill;
}

.gsb-rf-hero-deco.is-right {
  inset: -18.45% 0 -19.2% 55.08%;
  width: auto;
  height: auto;
}

.gsb-rf-hero-deco.is-left {
  inset: -12.6% 50.15% 6.06% 15.08%;
  width: auto;
  height: auto;
}

.gsb-rf-hero-copy {
  position: absolute;
  left: 33.23%;
  top: 20.39%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.gsb-rf-hero-label {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  color: #FFF4F7;
  white-space: nowrap;
}

.gsb-rf-hero-point {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.gsb-rf-hero-star {
  width: 27px;
  height: 22px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px #FF4B9A);
}

.gsb-rf-hero-num {
  font-size: 28px;
  line-height: 32px;
  font-weight: 900;
  color: #FFFFFF;
}

.gsb-rf-hero-mascot {
  position: absolute;
  left: -4.92%;
  top: -20.39%;
  width: 48.62%;
  height: 120.39%;
  overflow: hidden;
  border-radius: 999px;
  pointer-events: none;
  z-index: 1;
}

.gsb-rf-hero-mascot img {
  position: absolute;
  left: -5.38%;
  top: 2.42%;
  width: 91.77%;
  height: 116.94%;
  object-fit: cover;
}

.gsb-rf-page .sg-share-row {
  margin-top: 0;
}

.gsb-rf-sections {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gsb-rf-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gsb-rf-heading {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: #232934;
}

.gsb-rf-heading.is-semi {
  font-weight: 600;
}

.gsb-rf-rules-wrap {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #566278;
}

.gsb-rf-rules {
  margin: 0;
  padding-left: 24px;
  list-style: decimal;
}

.gsb-rf-reward {
  margin: 0;
}

.gsb-rf-reward span {
  color: #ED008C;
}

.gsb-rf-friends {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gsb-rf-page .gsb-pf-empty {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #737D91;
  text-align: left;
}

/* ---------- หน้าประวัติคะแนน (Figma Profile-Points-History) ---------- */
.gsb-pf-page.gsb-ph-page {
  box-sizing: border-box;
  max-width: 540px;
  margin: 0 auto;
  padding: 18px 16px 32px;
  font-family: 'Noto Sans Thai', 'Prompt', sans-serif;
}

.gsb-ph-body {
  width: 100%;
  max-width: 540px;
  margin: 22px auto 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.gsb-ph-tabs {
  display: flex;
  gap: 6px;
  padding: 0;
}

.gsb-ph-tab {
  flex: 1 1 0;
  height: 40px;
  padding: 8px 12px;
  border: 1px solid #F0F1F3;
  border-radius: 999px;
  background: #F8F8F9;
  color: #444E61;
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  cursor: pointer;
}

.gsb-ph-tab.is-active {
  border-color: transparent;
  background: #E30086;
  color: #FFFFFF;
  box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.25);
}

.gsb-ph-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.gsb-ph-stack.is-empty {
  gap: 22px;
}

.gsb-ph-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
}

.gsb-ph-filter-label {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #232934;
}

.gsb-ph-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 16px;
  border-radius: 18px;
  background: #F8F8F9;
  color: #444E61;
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
}

.gsb-ph-select img {
  width: 20px;
  height: 20px;
  display: block;
}

.gsb-ph-select select {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 16px;
}

.gsb-ph-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gsb-ph-item {
  border-bottom: 1px solid #F0F1F3;
}

.gsb-ph-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.gsb-ph-main {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.gsb-ph-date {
  flex: none;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: #303747;
  white-space: nowrap;
}

.gsb-ph-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #737D91;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gsb-ph-meta {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.gsb-ph-point {
  flex: none;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: #ED008C;
  white-space: nowrap;
}

.gsb-ph-point.is-minus {
  color: #E32D33;
}

.gsb-ph-unit {
  flex: none;
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  color: #303747;
}

.gsb-ph-caret {
  flex: none;
  width: 20px;
  height: 20px;
  display: block;
}

.gsb-ph-item.is-open .gsb-ph-row {
  padding-bottom: 8px;
}

.gsb-ph-detail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0 16px;
  border-top: 1px solid #F0F1F3;
}

.gsb-ph-note,
.gsb-ph-kv {
  margin: 0;
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
}

.gsb-ph-note {
  color: #737D91;
}

.gsb-ph-kv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.gsb-ph-kv span:first-child {
  color: #737D91;
}

.gsb-ph-kv span:last-child {
  color: #444E61;
}

.gsb-ph-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 0;
  text-align: center;
}

.gsb-ph-empty-icon {
  display: block;
  width: 115px;
  height: 115px;
  margin: 12px 0 0;
  padding: 0;
  object-fit: contain;
}

.gsb-ph-empty-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.gsb-ph-empty-title {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: #566278;
}

.gsb-ph-empty-text {
  margin: 0;
  max-width: 281px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #737D91;
}

/* ---------- หน้านโยบายความเป็นส่วนตัว (Figma Profile - policy) ---------- */
.gsb-pl-page .gsb-pl-body {
  width: 100%;
  max-width: 540px;
  margin: 22px auto 0;
  padding: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: #444E61;
}

.gsb-pl-body p {
  margin: 0;
}

.gsb-pl-body h2 {
  margin: 24px 0 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: #232934;
}

.gsb-pl-body h2 + p,
.gsb-pl-body p + p {
  margin-top: 0;
}

/* ==========================================================================
   GSB — หน้าแรก (Figma "Home")
   ========================================================================== */
.gsb-hm-page {
  min-height: 100vh;
  background: #FFFFFF;
  padding: 0 18px 24px;
}

/* ---------- ทักทาย + รูปโปรไฟล์ ---------- */
.gsb-hm-greet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0 14px;
}

.gsb-hm-greet-body {
  min-width: 0;
}

.gsb-hm-greet-label {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 22px;
  color: #303747;
}

.gsb-hm-greet-name {
  margin: 0;
  font-size: 1.375rem;
  line-height: 30px;
  font-weight: 700;
  color: #ED008C;
}

.gsb-hm-avatar {
  flex: none;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 3px solid #ED008C;
  border-radius: 50%;
  background: #FFE7EE center / cover no-repeat;
  cursor: pointer;
}

/* ---------- การ์ดคะแนน ---------- */
.gsb-hm-hero {
  position: relative;
  padding: 22px 20px 20px 118px;
  border-radius: 26px;
  background: linear-gradient(150deg, #FF8AC6 0%, #F94BAC 55%, #ED008C 100%);
  text-align: center;
  overflow: hidden;
}

/* มาสคอตมุมซ้ายล่าง ไฟล์ยังไม่มีก็เห็นเป็นพื้นชมพู ไม่พัง */
.gsb-hm-hero-mascot {
  position: absolute;
  left: 4px;
  bottom: 0;
  width: 116px;
  height: 132px;
  background: url('/assets/images/saving-group/welcome-mascot.png') bottom center / contain no-repeat;
}

.gsb-hm-hero-label {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 26px;
  font-weight: 700;
  color: #FFFFFF;
}

.gsb-hm-hero-point {
  margin: 2px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 2.375rem;
  line-height: 48px;
  font-weight: 700;
  color: #FFFFFF;
  /* ขอบชมพูรอบตัวเลขตามแบบ ทำด้วยเงาซ้อนแทนการใช้ -webkit-text-stroke
     ซึ่งบางเบราว์เซอร์กินความหนาของฟอนต์ไปด้วย */
  text-shadow: 0 2px 0 #D6007F, 0 -2px 0 #D6007F, 2px 0 0 #D6007F, -2px 0 0 #D6007F;
}

.gsb-hm-hero-star {
  font-size: 1.625rem;
  color: #FFD44F;
  text-shadow: none;
}

.gsb-hm-hero-time {
  margin: 4px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 0.8125rem;
  line-height: 20px;
  color: #FFFFFF;
}

.gsb-hm-hero-pill {
  margin: 12px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px;
  border-radius: 999px;
  background: #FFFFFF;
  font-size: 0.8125rem;
  line-height: 20px;
  color: #303747;
}

.gsb-hm-hero-pill > span {
  /* ข้อความกับตัวเลขต้องอยู่บรรทัดเดียวกันตามแบบ ห้ามให้ตัดคำ */
  white-space: nowrap;
}

.gsb-hm-hero-pill strong {
  font-weight: 700;
  color: #ED008C;
}

.gsb-hm-hero-sep {
  width: 1px;
  height: 15px;
  background: #E7E9ED;
}

/* ---------- หัวข้อแต่ละหมวด ---------- */
.gsb-hm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 22px 0 10px;
}

.gsb-hm-head-title {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 26px;
  font-weight: 700;
  color: #16181D;
}

.gsb-hm-more {
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #E30086;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gsb-hm-more svg {
  width: 15px;
  height: 15px;
}

/* ---------- เกมส์ ---------- */
.gsb-hm-games {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.gsb-hm-game {
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: none;
  cursor: pointer;
  overflow: hidden;
}

.gsb-hm-game-pic {
  display: block;
  width: 100%;
  /* การ์ดเกมเป็นสี่เหลี่ยมกว้างกว่าสูงตามแบบ */
  aspect-ratio: 156 / 118;
  border-radius: 16px;
  background: #ECEEF1 center / cover no-repeat;
}

/* ---------- ภารกิจ ---------- */
.gsb-hm-missions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gsb-hm-mission-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
  border: 0;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 4px 18px -8px rgba(17, 20, 27, 0.24);
  text-align: left;
  cursor: pointer;
}

/* เหรียญแปดเหลี่ยม — ชมพูสำหรับภารกิจทั่วไป เขียวสำหรับสายเกม ตามแบบ */
.gsb-hm-badge {
  flex: none;
  position: relative;
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

.gsb-hm-badge::before {
  content: '';
  position: absolute;
  inset: 4px;
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

.gsb-hm-badge.is-article {
  background: linear-gradient(180deg, #FF9BCF 0%, #EE4FA5 100%);
}

.gsb-hm-badge.is-article::before {
  background: linear-gradient(180deg, #FFC2E2 0%, #F573B8 100%);
}

.gsb-hm-badge.is-game {
  background: linear-gradient(180deg, #6FE8C8 0%, #21C79E 100%);
}

.gsb-hm-badge.is-game::before {
  background: linear-gradient(180deg, #A5F3DD 0%, #4CD9B4 100%);
}

.gsb-hm-badge svg {
  position: relative;
  width: 23px;
  height: 23px;
}

.gsb-hm-mission-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.gsb-hm-mission-title {
  font-size: 1rem;
  line-height: 24px;
  font-weight: 700;
  color: #16181D;
}

.gsb-hm-mission-sub {
  font-size: 0.8125rem;
  line-height: 20px;
  color: #9AA0AC;
}

.gsb-hm-mission-hl {
  color: #12B886;
  font-weight: 700;
}

.gsb-hm-mission-point {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1.0625rem;
  line-height: 22px;
  font-weight: 700;
  color: #12B886;
}

.gsb-hm-mission-unit {
  font-size: 0.6875rem;
  line-height: 16px;
  font-weight: 500;
}

.gsb-hm-mission-done {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #0D8662;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gsb-hm-mission-done svg {
  width: 16px;
  height: 16px;
}

/* ---------- ของรางวัล ---------- */
.gsb-hm-rewards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.gsb-hm-reward {
  display: flex;
  flex-direction: column;
  padding: 0 0 14px;
  border: 0;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 4px 18px -8px rgba(17, 20, 27, 0.24);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

.gsb-hm-reward-pic {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #FFFFFF center / 70% no-repeat;
}

.gsb-hm-reward-name {
  padding: 0 12px;
  font-size: 0.8125rem;
  line-height: 20px;
  font-weight: 700;
  color: #16181D;
}

.gsb-hm-reward-note {
  padding: 2px 12px 0;
  font-size: 0.75rem;
  line-height: 18px;
  color: #9AA0AC;
}

.gsb-hm-reward-point {
  padding: 10px 12px 0;
  font-size: 0.875rem;
  line-height: 20px;
  font-weight: 700;
  color: #16181D;
}

/* หน้า "ยืนยันข้อมูลไม่สำเร็จ" — มาสคอตตกใจบนพื้นเทา (ไฟล์ภาพยังไม่มี เห็นเป็นพื้นเทาล้วนไปก่อน) */
.gsb-shell.hero-rejected {
  background-color: #E9EAEC;
  background-image: url('/assets/images/gsb-register/v3-hero-rejected.png');
  background-size: 100% 437px;
}

/* หัวการ์ดสีเข้ม — ใช้กับจอที่ไม่ได้อยู่โทนชมพู */
.gsb-card-heading.is-dark {
  color: #16181D;
}

/* ปุ่มเขียวมิ้นต์ในป๊อปอัป — Figma Buttons_Solid 1098:96733 */
.gsb-alert-action.is-teal {
  width: 174px;
  height: 48px;
  padding: 0 24px;
  border-radius: 18px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  background: linear-gradient(134.41deg, #42f2d9 0%, #03bbb1 53.85%, #049b9b 100%);
  box-shadow: 0 10px 11px rgba(3, 133, 133, 0.2), 0 3px 3px rgba(3, 133, 133, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.45);
}

/* ---------- ป๊อปอัปได้รับคะแนน — Figma Success 138:57099 / 176:14550 ----------
   กล่อง 350 · มาสคอต 238 ลอยเหนือการ์ด · การ์ด 294 มุม 40 · วงกลมซ้อน 3 ชั้น (shape 1042:83290) */
.gsb-alert-overlay.is-success {
  background: rgba(0, 0, 0, 0.68);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.gsb-success-box {
  position: relative;
  width: 100%;
  max-width: 350px;
  padding-top: 144px;
}

.gsb-success-mascot {
  position: absolute;
  top: 13px;
  left: 50%;
  z-index: 1;
  width: 238px;
  height: 238px;
  transform: translateX(-50%);
  pointer-events: none;
}

.gsb-success-card {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  min-height: 294px;
  /* Figma วัดจากขอบนอก (text top 88 · ปุ่มห่างล่าง 28) — หักเส้นขอบ 1px ออก */
  padding: 87px 16px 27px;
  border: 1px solid rgba(255, 231, 238, 0.14);
  border-radius: 40px;
  background: #FFE7EE;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.gsb-success-card > * {
  position: relative;
}

/* วงกลม 324 / 213.7 / 114.9 px สี #FFD1ED / #FFDDF1 / #FFE9F6 ทั้งกลุ่มจาง 42% */
.gsb-success-card::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 324px;
  height: 324px;
  transform: translate(-50%, -50%);
  opacity: 0.42;
  background: radial-gradient(circle closest-side, #FFE9F6 35.46%, #FFDDF1 35.46% 65.96%, #FFD1ED 65.96% 100%, transparent 100%);
  pointer-events: none;
}

/* เงาในทับบนสุดเหมือนใน Figma */
.gsb-success-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset -4px -6px 10px rgba(236, 0, 140, 0.36), inset 0 0 16px 2px #FFF4F7;
  pointer-events: none;
}

.gsb-success-title {
  margin: 0;
  font-size: 40px;
  line-height: 40px;
  font-weight: 900;
  color: #ED008C;
  white-space: nowrap;
}

.gsb-success-message {
  margin: 0;
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  color: #444E61;
  white-space: pre-line;
}

.gsb-success-action {
  margin-top: auto;
}

/* ---------- /profile/redeem ของรางวัลที่ได้รับ (Figma 249:6378) ----------
   โครงหน้าใช้ .gsb-ph-page / .gsb-ph-tab · การ์ดใช้ .sgr-card* จาก sg-rewards.css
   ด้านล่างปรับเฉพาะจุดที่แบบหน้านี้ต่างจากหน้ารางวัลกลุ่ม */
.gsb-rd-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 18px;
}

.gsb-rd-page .sgr-card,
.gsb-rd-page .sgr-card:hover {
  /* :hover ด้วย — sg-rewards.css โหลดทีหลังและมี hover shadow ที่ค้างหลังแตะบนมือถือ */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* แท็บกลุ่มใช้เงาการ์ดคนละชุด (Figma 1111:101587) */
.gsb-rd-page.is-group .sgr-card,
.gsb-rd-page.is-group .sgr-card:hover {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* ---------- แบนเนอร์คะแนน PointBanner (Figma Point_invite 1671:42665) ----------
   ใช้ใต้แท็บ /redeem, /profile/redeem, /saving-group/rewards · มาสคอตล้นซ้าย/บนของแคปซูล
   ต้องมีที่ว่างเหนือแบนเนอร์ ≥17px (แท็บทุกหน้าเว้น 18px อยู่แล้ว) */
.gsb-pt-banner {
  position: relative;
  box-sizing: border-box;
  width: calc(100% - 33px);
  max-width: 325px;
  height: 86px;
  /* แบบเว้นแบนเนอร์→การ์ด 11px */
  margin: 0 auto 11px;
  padding: 0 32px 0 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: 999px;
  background: radial-gradient(80.6% 80.6% at 50% 50%, #FF73B0 0%, #FEA2D1 50%, #FCD2F2 100%);
  box-shadow: inset 2px -4px 12px rgba(239, 0, 141, 0.52), inset 0 0 18px 4px #FFE7EE;
}

.gsb-pt-banner-mascot {
  position: absolute;
  left: -16.5px;
  top: -17px;
  width: 131px;
  height: 103px;
  border-radius: 999px;
  overflow: hidden;
  pointer-events: none;
}

.gsb-pt-banner-mascot img {
  position: absolute;
  left: -7px;
  top: 2.5px;
  width: 120px;
  height: 120px;
  object-fit: cover;
}

.gsb-pt-banner-label,
.gsb-pt-banner-value {
  position: relative;
  margin: 0;
  color: #FFFFFF;
  white-space: nowrap;
}

.gsb-pt-banner-label {
  /* ตัวเลขห้ามโดนตัด — พื้นที่ไม่พอให้ป้ายยอมหดเป็น … แทน */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.46);
}

.gsb-pt-banner-value {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 20px;
  line-height: 32px;
  font-weight: 900;
  /* ขอบชมพูรอบตัวเลข — เงาซ้อนแบบเดียวกับ .gsb-hm-hero-point */
  text-shadow: 0 2px 0 #ED008C, 0 -2px 0 #ED008C, 2px 0 0 #ED008C, -2px 0 0 #ED008C;
}

.gsb-pt-banner-value img {
  width: 22px;
  height: 19px;
  object-fit: contain;
  filter: drop-shadow(0 2px 1.5px #FF4B9A);
}

/* /profile/redeem วางใน flex gap 18px — ดึงการ์ดขึ้นให้เหลือ 11px ตามแบบ */
.gsb-rd-body > .gsb-pt-banner {
  margin-bottom: -7px;
}

/* จอแคบกว่าแบบ (390) แคปซูลหดตาม — ลดฟอนต์/ระยะให้ป้าย+คะแนน 5-6 หลักยังพอดีที่ 360px */
@media (max-width: 389px) {
  .gsb-pt-banner {
    padding: 0 20px 0 80px;
  }

  .gsb-pt-banner-label {
    font-size: 16px;
  }

  .gsb-pt-banner-value {
    font-size: 18px;
  }
}

.gsb-rd-page .sgr-card-pic {
  background: #FFFFFF;
}

.gsb-rd-page .sgr-card-body {
  padding: 8px 8px 16px;
  gap: 8px;
}

.gsb-rd-page .sgr-card-note {
  font-weight: 500;
}

.gsb-rd-page .sgr-card-point {
  font-weight: 600;
}

.gsb-rd-page .sgr-card-point small {
  font-size: inherit;
  color: #566278;
}

.gsb-rd-more {
  height: 40px;
  padding: 8px 16px;
  border: 1px solid #F0F1F3;
  border-radius: 999px;
  background: #F8F8F9;
  color: #444E61;
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  cursor: pointer;
}

.sgr-empty .gsb-rd-more {
  margin-top: 16px;
  min-width: 160px;
}

.gsb-rd-more:disabled {
  opacity: 0.6;
  cursor: default;
}

/* รายละเอียดแบบป้ายซ้าย-ค่าขวา (ใช้กับฝั่งใช้คะแนน) */
.gsb-ph-detail p.has-value {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.gsb-ph-detail p.has-value span:last-child {
  flex: none;
  color: #6B7280;
  text-align: right;
}

/* คลิกด้วยเมาส์/นิ้วไม่ต้องมีกรอบโฟกัส แต่ยังเหลือไว้ให้คนกด Tab เห็นว่าอยู่แถวไหน */
.gsb-ph-row:focus {
  outline: none;
}

.gsb-ph-row:focus-visible {
  outline: 2px solid #ED008C;
  outline-offset: 2px;
  border-radius: 8px;
}

/* ---------- ประวัติการแนะนำเพื่อน (Figma 484:79423 / 317:16557) ---------- */
html:has(.gsb-rfh-page),
body:has(.gsb-rfh-page) {
  background: #fff;
}

.gsb-pf-page.gsb-rfh-page {
  box-sizing: border-box;
  width: 100%;
  max-width: 540px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 24px 16px 0;
  background: #fff;
  font-family: 'Noto Sans Thai', 'Prompt', sans-serif;
}

.gsb-rfh-page h1 {
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
}

.gsb-rfh-hero {
  width: 358px;
  max-width: 100%;
  margin: 12px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.gsb-rfh-hero img {
  width: 74px;
  height: 74px;
  display: block;
  object-fit: contain;
}

.gsb-rfh-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.gsb-rfh-hero-title {
  font-size: 22px;
  line-height: 24px;
  font-weight: 700;
  color: #ED008C;
  white-space: nowrap;
}

.gsb-rfh-hero-sub {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: #737D91;
  white-space: nowrap;
}

.gsb-rfh-chip {
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  background: #EBFEF0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  color: #308153;
  width: fit-content;
}

/* หน้าเพิ่มเพื่อน LINE (Figma 1483:19674) — โลโก้ + มาสคอตอยู่ในภาพพื้นหลังเต็มหน้า */
.gsb-shell.hero-addFriend {
  background-color: #FFE7EE;
  background-image: url('/assets/images/gsb-register/v3-hero-add-friend.png');
  background-size: 100% auto;
}

/* 199/390 ของความกว้าง shell (สูงสุด 540) ให้การ์ดเริ่มใต้ภาพเดียวกับ Figma ทุกขนาดจอ */
.gsb-add-friend-spacer {
  flex: none;
  height: calc(min(100vw, 540px) * 199 / 390);
}

.gsb-add-friend-card {
  align-items: center;
  gap: 24px;
  padding: 48px 22px;
}

.gsb-add-friend-qr {
  width: 246px;
  height: 246px;
  max-width: 100%;
  object-fit: cover;
}

/* ปุ่มเป็นลิงก์ จึงต้องจัดข้อความกลางเองและตัดขีดเส้นใต้ */
a.gsb-primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* ==========================================================================
   GSB — ข้อกำหนดและเงื่อนไขกิจกรรม (ใช้ทั้ง popup ตอนสมัคร และหน้าโปรไฟล์)
   มาร์กอัปอยู่ที่ components/GsbRegister/ConsentTermsContent.tsx
   ========================================================================== */
.gsb-terms-title {
  margin: 0 0 12px;
}

.gsb-terms-list {
  margin: 8px 0 0;
  padding-left: 22px;
}

.gsb-terms-list > li {
  margin-bottom: 8px;

  font-weight: 300 !important;
}

/* บรรทัดย่อยใต้ข้อหลัก (เช่น 8.1–8.3) — ขึ้นบรรทัดใหม่และย่อเข้ามาอีกขั้น */
.gsb-terms-sub {
  display: block;
  padding-left: 12px;
  margin-top: 4px;

}

.gsb-terms-sub > span {
  display: block;
    font-weight: 300 !important;
}

.gsb-terms-indent {
  padding-left: 12px;
}

/* หน้าโปรไฟล์กำหนด margin ของ p ไว้เป็น 0 — ในลิสต์ต้องมีระยะหายใจ */
.gsb-pl-body .gsb-terms-indent p {
  margin-bottom: 8px;
}