@charset "UTF-8";
/* screen - activity-info-page */


@media screen and (min-width: 431px) {
  body {
    background-color: #f7f7f7;
  }

  .activity-info-page {
    background: #fff;                 /* ให้เงาเห็นชัด */
    max-width: 430px;
    margin: 24px auto;                /* ดันห่างขอบบน/ล่าง และกึ่งกลาง */
    border-radius: 12px;              /* มุมโค้ง (ออปชัน) */
    box-shadow: 0 4px 10px rgba(0,0,0,.1);
    overflow: hidden;                 /* กันเงารั่ว/รูปนูนออกมุม */
  }

  .container-center-horizontal {
    margin: 24px auto;
  }

}


html {margin : 0 !important ;
  padding : 0  !important ;
}
body {
  overflow: hidden;
}
.activity-info-page {
  align-items: center;
  background-color: var(--text-3);
  border: 0.23vw none;
  display: flex;
  flex-direction: column;
  /*height: 194.16vw;*/
  height: 100vh;
  width: 100.0vw;
}

.activity-info-page .reward-image {
    object-fit: contain;
    width: 100vw;
    min-height: 43vw;
    position: fixed;
    z-index: 2;
    top: 0;
}

.activity-info-page .overlap-group {
  align-items: flex-start;
    background-color: #91b17c;
    display: flex;
    /* height: 14.02vw; */
    min-width: 100vw;
    padding: 1.64vw 4.44vw;
    position: fixed;
    top: 43vw;
    z-index: 2;
    /* line-height: 45vw; */
}

.activity-info-page .text-12 {
      letter-spacing: 0;
    line-height: normal;
    min-height: 8.41vw;
    min-width: 20vw;
    text-align: left;
    color: var(--text-3);
    font-family: var(--font-family-noto_sans_thai);
    font-size: var(--font-size-l);
    font-style: normal;
    font-weight: 500;
}

.activity-info-page .number {
  align-self: flex-start;
    color: var(--text-3);
    font-family: var(--font-family-roboto-bold);
    font-size: var(--font-size-xxxl);
    font-weight: 700;
    letter-spacing: 0;
    line-height: normal;
    /* margin-left: 29.11vw; */
    margin-top: 0.47vw;
    min-height: 8.88vw;
    min-width: 13.08vw;
    text-align: center;
    text-shadow: 0vw 0.23vw 0.23vw #0000001a;
    width: 30vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.activity-info-page .text-13 {
  letter-spacing: 0;
    line-height: normal;
    /* margin-left: 22.9vw; */
    min-height: 8.41vw;
    min-width: 15.89vw;
    text-align: right;
}

.activity-info-page .frame-4 {
  align-self: flex-start;
  gap: 2.1vw;
  margin-left: 3.27vw;
  margin-top: 5.27vw;
}

.activity-info-page .frame-2 {
  gap: 0.7vw;
}

.activity-info-page .icon {
  height: 5.61vw;
  min-width: 5.61vw;
  position: relative;
}

.activity-info-page .text-14 {
  letter-spacing: 0;
  line-height: 4.67vw;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.activity-info-page .text_label-container {
      height: auto;
    margin-top: 3.04vw;
    position: relative;
    width: 90.65vw;
    font-family: var(--font-family-noto_sans_thai);
    font-size: var(--font-size-m);
    font-weight: normal;
    line-height: 22px;
    color: var(--text-4);
    
}

.activity-info-page .text_label-container ol, .activity-info-page .text_label-container ul {

    list-style: decimal;
    text-indent: 0;
    margin-left: 10vw;
}

.activity-info-page .text_label-container p {

    padding: 1.5vw 0;
}

.activity-info-page .text_label {
  left: 0;
  letter-spacing: 0;
  line-height: 5.61vw;
  position: absolute;
  top: 16.36vw;
  width: 90.65vw;
}

.activity-info-page .text_label-1 {
  color: var(--text-1);
  font-family: var(--font-family-noto_sans_thai);
  font-size: var(--font-size-xl);
  font-weight: 500;
  left: 0;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 0;
  width: 90.65vw;
}

.activity-info-page .button-container {
  align-items: flex-start;
    display: flex;
    gap: 4.44vw;
    margin-left: 0.23vw;
    margin-top: 8.64vw;
    min-width: 90.89vw;
    padding-bottom: 15vw;
}

.activity-info-page .button {
  align-items: center;
  background-color: var(--primary-color-2);
  border-radius: 11.68vw;
  display: flex;
  gap: 0.93vw;
  height: 11.21vw;
  justify-content: center;
  padding: 2.8vw 5.61vw;
  position: relative;
  min-width: 43.22vw;
    width: -webkit-fill-available;
}

.activity-info-page .icon-1 {
  margin-left: -2.57vw;
}

.activity-info-page .text_label-2 {
  letter-spacing: 0;
  line-height: 6.54vw;
  margin-bottom: -0.23vw;
  margin-right: -2.57vw;
  margin-top: -0.7vw;
  position: relative;
  text-shadow: 0.0vw 0.23vw 0.23vw #0000001a;
  white-space: nowrap;
  width: fit-content;
}

.activity-info-page .button-1 {
  align-items: center;
  background-color: var(--tertiary-6);
  border-radius: 11.68vw;
  display: flex;
  gap: 0.93vw;
  height: 11.21vw;
  justify-content: center;
  padding: 2.8vw 5.61vw;
  position: relative;
  min-width: 43.22vw;
  width: -webkit-fill-available;
}

.activity-info-page .icon-check_mark {
  margin-left: -1.29vw;
}

.activity-info-page .text_label-3 {
  letter-spacing: 0;
  line-height: 6.54vw;
  margin-bottom: -0.23vw;
  margin-right: -1.29vw;
  margin-top: -0.7vw;
  position: relative;
  text-shadow: 0.0vw 0.23vw 0.23vw #0000001a;
  white-space: nowrap;
  width: fit-content;
}

.activity-info-page .frame {
 align-items: center;
    display: flex;
    /* position: fixed; */
    width: fit-content;
    padding-top: 30.2vw;
    width: 96vw;
    background: white;
}

.activity-info-page .icon-2 {
  height: 24px;
  min-width: 24px;
  position: relative;
}


.activity-info-page .rectangle-10 {
  background-color: var(--text-5);
  height: 100vh;
  left: 0;
  opacity: 0.5;
  position: absolute;
  top: 0;
  width: 100.0vw;
  z-index: 9;
}

.activity-info-page .popup {
  align-items: center;
    background-color: var(--text-3);
    border-radius: 3.74vw;
    display: flex;
    flex-direction: column;
    gap: 3.5vw;
    left: 8.88vw;
    padding: 7.01vw 5.84vw;
    position: absolute;
    top: 73.36vw;
    width: 83vw;
    z-index: 9;
    align-content: center;
    /* height: 49vw;*/
}


.activity-info-page .text_label {
  color: var(--text-5);
    font-family: var(--font-family-noto_sans_thai);
    font-size: var(--font-size-l);
    font-weight: 500;
    /* height: 7.24vw; */
    letter-spacing: 0;
    line-height: 6.54vw;
    top: 30px;
    /* position: absolute; */
    text-align: center;
    white-space: nowrap;
    width: 70.33vw;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 83vw;
}

.activity-info-page .text-5 {
  color: var(--text-5);
    font-family: var(--font-family-noto_sans_thai);
    font-size: var(--font-size-m);
    font-weight: 300;
    line-height: 5.61vw;
    /* position: relative; */
    width: fit-content;
    /* top: 8vw; */
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    /* height: 17vh; */
    margin-top: 9vw;
}

.activity-info-page .group-13 {
  height: 7.48vw;
    min-width: 28.74vw;
    position: relative;
    display: flex;
    align-items: center;
    gap: 2.5vw;
}

.activity-info-page .button-2 {
  background-color: var(--tertiary-6);
  gap: 2.34vw;
  padding: 2.8vw 8.88vw;
  position: relative;
  width: 28.74vw;
}

.activity-info-page .button-3 {
  align-items: center;
  border-radius: 1.87vw;
  display: flex;
  height: 7.48vw;
  justify-content: center;
}

.activity-info-page .button-cancel {

    align-items: center;
  border-radius: 1.87vw;
  display: flex;
  height: 7.48vw;
  justify-content: center;
    border-color: var(--tertiary-6);
    background: none;
    border: 1px solid var(--tertiary-6);
    color: var(--tertiary-6);
    border-radius: 1.87vw;

}


.activity-info-page .button-cancel .text {

color: var(--tertiary-6);
}

.activity-info-page .frame {
  /*left: 0;
  position: absolute;
  width: 100.0vw;*/
}

.activity-info-page .text-1 {
  letter-spacing: 0;
  text-align: center;
}

.activity-info-page #desc {
  overflow: auto;
}


/* ===== OPEN LINE POPUP (scoped) ===== */
.olp-backdrop {
  position: fixed;
  inset: 0;                 /* ครอบเต็มหน้าจอ */
  display: none;            /* เริ่มปิดไว้ */
  align-items: center;      /* จัดกลางแนวตั้ง */
  justify-content: center;  /* จัดกลางแนวนอน */
  background: rgba(0,0,0,0.45);
  z-index: 9999;            /* อยู่บนสุดเหนือทุกอย่าง */
}

/* เปิดใช้งาน */
.olp-backdrop.is-open {
  display: flex !important; /* ให้แน่ใจว่าเป็น flex */
}

/* กล่องป๊อปอัป */
.olp-modal {
  position: relative;       /* ให้จัดกลางด้วย flex ของ backdrop */
  width: min(420px, calc(100% - 40px));
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  padding: 24px 20px;
  text-align: center;
  z-index: 10000;           /* เหนือ overlay */
}

/* หัวเรื่อง / เนื้อข้อความด้านใน */
.olp-modal .olp-title {
  font-family: var(--font-family-noto_sans_thai);
  font-size: var(--font-size-l);
  font-weight: 500;
  line-height: 1.35;
  margin: 0 0 8px 0;
  color: var(--text-5);
}
.olp-modal .olp-desc {
  font-family: var(--font-family-noto_sans_thai);
  font-size: var(--font-size-m);
  font-weight: 300;
  line-height: 22px;
  color: var(--text-5);
  margin: 8px 0 14px 0;
}

/* QR */
.olp-modal .olp-qr {
  display: block;
  margin: 12px auto 8px auto;
  width: 160px;
  height: 160px;
  border: 1px solid #eee;
  border-radius: 8px;
}

/* ลิงก์สำรอง */
.olp-modal .olp-link {
  display: inline-block;
  margin: 6px 0 14px 0;
  font-family: var(--font-family-noto_sans_thai);
  font-size: 14px;
  color: #555;
  text-decoration: underline;
}

/* พื้นที่ปุ่มล่าง */
.olp-modal .olp-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

/* ปุ่ม (ใช้คลาสเดิมของคุณร่วมได้) */
.olp-modal .button-2 { padding: 12px 12px; }
.olp-modal .button-3,
.olp-modal .button-cancel {
  display: flex; align-items: center; justify-content: center;
  min-height: 40px; border-radius: 12px; border: 1px solid transparent; height: 40px;
}
.olp-modal .button-cancel {
  border-color: var(--tertiary-6); background: none; color: var(--tertiary-6);
}
.olp-modal .button-cancel .text { color: var(--tertiary-6); }

/* ตัวเลือกเสริม: lock scroll เมื่อเปิด popup */
body.olp-lock {
  overflow: hidden;
}


/* ========== OVERRIDES: center layout, max-width:430px, px-only, no vw/vh ========== */

/* viewport & page container */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  height: 100%;
  background: #ffffff;
}
body {
  overflow-y: hidden;
  overflow-x: hidden;
  display: block;
}

/* กล่องหน้าทั้งหมด (ล็อกความกว้างสูงสุด 430px และกึ่งกลาง) */
.activity-info-page {
  width: 100%;
  max-width: 430px;     /* ตามที่ต้องการ */
  margin: 0 auto;       /* กึ่งกลางหน้าจอ */
  background-color: var(--text-3);
  border: none; /* เดิม 0.23vw => ~1px */
  display: flex;
  flex-direction: column;
  min-height: 100dvh;   /* ใช้ dvh แทน vh เพื่อแก้ปัญหาแถบ URL บนมือถือ */
}

/* ---------- HERO IMAGE (เอา fixed ออก ให้ไหลใน flow) ---------- */
.activity-info-page .reward-image {
      position: relative;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 430px;
    height: auto;
    min-height: auto;
    object-fit: contain;
    z-index: 2;
    max-height: 316px;
}

/* ---------- แถบเขียวใต้รูป: ให้ sticky อยู่ด้านบนเมื่อเลื่อน ---------- */
.activity-info-page .overlap-group {
  position: sticky;       /* เดิม fixed + top: 43vw */
  top: 0;                 /* ติดขอบบนเมื่อเลื่อน */
  z-index: 3;
  background-color: #91b17c;
  display: flex;
  align-items: flex-start;
  width: 100%;
  min-width: 100%;
  padding: 7px 19px;      /* เดิม 1.64vw 4.44vw ≈ 7px 19px */
}

/* ---------- ข้อความหัวเรื่องในแถบเขียว ---------- */
.activity-info-page .text-12 {
  color: var(--text-3);
  font-family: var(--font-family-noto_sans_thai);
  font-size: var(--font-size-l);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
  min-height: 36px;   /* เดิม 8.41vw ≈ 36px */
  min-width: 86px;    /* เดิม 20vw ≈ 86px */
  text-align: left;
}

/* ---------- แถบข้อมูลสั้นใต้หัวเรื่อง ---------- */
.activity-info-page .frame-4 {
  align-self: flex-start;
    gap: 9px;
    margin-left: 0;
    margin-top: 23px;
    width: 100%;
    padding: 0 14px;
}
.activity-info-page .frame-2 { gap: 3px; padding-top: 0; /* เดิม 0.7vw ≈ 3px */ }
.activity-info-page .icon {
  height: 24px;            /* เดิม 5.61vw */
  min-width: 24px;
  position: relative;
}
.activity-info-page .text-14 {
  letter-spacing: 0;
  line-height: 20px;       /* เดิม 4.67vw ≈ 20px */
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

/* ---------- คอนเทนต์ข้อความหลัก ---------- */
.activity-info-page #desc,
.activity-info-page .text_label-container {
  width: 100%;
    max-width: 100%;
    /* margin: 0 14px; */
    margin-top: 14px;
    position: relative;
    font-family: var(--font-family-noto_sans_thai);
    font-size: var(--font-size-m);
    line-height: 22px;
    color: var(--text-4);
    /* overflow: visible; */
    padding: 0 14px;
    height: 100dvh;
    padding-bottom: 100px;
}
.activity-info-page .text_label-container ol,
.activity-info-page .text_label-container ul {
  list-style: decimal;
  text-indent: 0;
  margin-left: 43px;       /* เดิม 10vw ≈ 43px */
}
.activity-info-page .text_label-container p { padding: 6px 0; /* เดิม 1.5vw ≈ 6px */ }

/* ---------- ปุ่มด้านล่าง ---------- */
.activity-info-page .button-container {
      display: flex;
    align-items: flex-start;
    gap: 19px;
    margin-left: 0;
    margin-top: 0;
    min-width: 295px;
    max-width: 430px;
    padding-bottom: 65px;
    padding: 24px 14px 24px;
    position: fixed;
    z-index: 2;
    bottom: 0;
    background: white;
    width: 100%;
}
.activity-info-page .button,
.activity-info-page .button-1 {
  align-items: center;
  justify-content: center;
  display: flex;
  gap: 4px;                /* เดิม 0.93vw ≈ 4px */
  height: 48px;            /* เดิม 11.21vw ≈ 48px */
  padding: 12px 24px;      /* เดิม 2.8vw 5.61vw */
  border-radius: 50px;     /* เดิม 11.68vw ≈ 50px */
  position: relative;
  min-width: 186px;        /* เดิม 43.22vw ≈ 186px */
  width: 100%;             /* แทน -webkit-fill-available */
}
.activity-info-page .text_label-2,
.activity-info-page .text_label-3 {
  letter-spacing: 0;
  line-height: 28px;       /* เดิม 6.54vw ≈ 28px */
  margin: 0;
  position: relative;
  text-shadow: 0 1px 1px #0000001a; /* เดิม 0.23vw ≈ 1px */
  white-space: nowrap;
  width: fit-content;
}

/* ---------- โครง frame พื้นหลังขาวใต้ภาพ ---------- */
.activity-info-page .frame {
    /* width: 412px; */
    max-width: 100%;
    /* margin: 0; */
    background: #fff;
    align-items: center;
    display: flex;
    /* padding: 14px;
}



/* ---------- Overlay & Modal (เลี่ยง vh ด้วย inset:0) ---------- */
.activity-info-page .rectangle-10 {
  position: fixed;
  inset: 0;                /* ครอบเต็มหน้าจอแทน height:100vh */
  background-color: var(--text-5);
  opacity: 0.5;
  width: 100%;
  z-index: 9;
}
.activity-info-page .popup {
  position: fixed;         /* เดิม absolute + top: 73.36vw */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 357px;            /* เดิม 83vw ≈ 357px */
  max-width: calc(100% - 32px);
  background-color: var(--text-3);
  border-radius: 16px;     /* เดิม 3.74vw ≈ 16px */
  padding: 31px 25px;      /* เดิม 7.01vw 5.84vw ≈ 31px 25px */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;               /* เดิม 3.5vw ≈ 15px */
  z-index: 10;
}
.activity-info-page .popup .text_label {
  color: var(--text-5);
  font-family: var(--font-family-noto_sans_thai);
  font-size: var(--font-size-l);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 28px;       /* เดิม 6.54vw ≈ 28px */
  text-align: center;
  white-space: nowrap;
  width: 100%;
}
.activity-info-page .popup .text-5 {
  color: var(--text-5);
  font-family: var(--font-family-noto_sans_thai);
  font-size: var(--font-size-m);
  font-weight: 300;
  line-height: 22px;       /* เดิม 5.61vw ≈ 24px; ปรับเป็น 22px */
  width: 100%;
  text-align: center;
  margin-top: 18px;        /* เดิม 9vw ≈ 39px; ลดลงให้กระชับ */
}
.activity-info-page .group-13 {
  display: flex;
  align-items: center;
  gap: 11px;               /* เดิม 2.5vw ≈ 11px */
  height: auto;            /* เดิม 7.48vw ≈ 32px */
  min-width: 0;
}
.activity-info-page .button-2 {
  padding: 12px 38px;      /* เดิม 2.8vw 8.88vw ≈ 12px 38px */
  width: auto;             /* เดิม 28.74vw ≈ 123px */
}
.activity-info-page .button-3,
.activity-info-page .button-cancel {
  align-items: center;
  justify-content: center;
  display: flex;
  min-height: 40px;        /* เดิม 7.48vw ≈ 32px */
  border-radius: 12px;     /* เดิม 1.87vw ≈ 8px → ปรับ 12px เพื่อดูนุ่มขึ้น */
  border: 1px solid transparent;
}
.activity-info-page .button-cancel {
  border-color: var(--tertiary-6);
  background: none;
  color: var(--tertiary-6);
}
.activity-info-page .button-cancel .text { color: var(--tertiary-6); }

.activity-info-page .number { 
  /* เดิมมี margin/size เป็น vw; ทำให้ยืดพิลึก — reset แบบลีน */
  margin: 0; min-height: auto; min-width: auto; width: auto;
  font-family: var(--font-family-roboto-bold);
  font-size: var(--font-size-xxxl);
  font-weight: 700;
  text-align: center;
  text-shadow: 0 1px 1px #0000001a;
}
.activity-info-page .text-13 { min-height: auto; min-width: auto; text-align: right; }

.activity-info-page .text_label { 
  position: static; top: auto; left: auto; width: 100%;
  line-height: 28px; color: inherit;
}