* { box-sizing: border-box; margin: 0; padding: 0; }
  
  /* โครงสร้างหลักใส่ Class เฉพาะกิจ (_subbn) */
  .hero_tbanner_subbn { width: 100%; position: relative; overflow: hidden; }

  /* ---------- DESKTOP ---------- */
  .hero__desktop_subbn {
    font-family: "Open Sans", sans-serif !important;
    position: relative;
    width: 100%;
    min-height: clamp(240px, 30vw, 440px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-image:
      linear-gradient(rgba(86, 129, 134, 0.79), rgba(244, 248, 246, 0)),
      var(--img-desktop);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat;
  }
  .hero__curve_subbn {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 38%; max-width: 520px;
    background-image: var(--img-curve);
    background-size: contain;
    background-position: right center;
    background-repeat: no-repeat;
    pointer-events: none;
  }
  .hero__copy_subbn { position: relative; z-index: 2; padding: 24px; }

  /* ---------- Typography ---------- */
  .eyebrow_subbn {
    font-family: "Nunito", Arial, Helvetica, sans-serif !important;
    font-weight: 400;
    letter-spacing: .04em;
    line-height: 1.2;
		margin-bottom: -1.4rem !important;
  }
  .title_subbn {
    font-family: "Open Sans", sans-serif !important;
    font-weight: 300 !important;
    line-height: 0.9 !important;
    letter-spacing: .01em;

  }
  .subtitle_subbn {
    font-weight: 400;
    line-height: 0.45;

  }

  /* Desktop Text Styles */
  .hero__desktop_subbn .eyebrow_subbn {
    color: #575757;
    font-family: "Nunito", Arial, Helvetica, sans-serif !important;
    font-size: clamp(1.2rem, 2.04vw, 1.74rem);
    line-height: 3.8rem;
  }
  .hero__desktop_subbn .title_subbn {
    position: relative;
    color: #F2F4F3;
    font-size: clamp(2.6rem, 6.2vw, 5rem);
    margin: .05em 0 .05em;
    animation: lumReveal 1s cubic-bezier(.2,.7,.2,1) .25s both,
               lumGlow   1.6s ease-out .25s both;
  }
  
   .hero__desktop_subbn  .subtitle{ color:#979797;     font-size:clamp(.82rem, 1.25vw, 1.05rem); }
  
  
  /* แสงกวาด (Desktop) - วนลูปทำงานทุกๆ 15 วินาที */
  .hero__desktop_subbn .title_subbn::after {
    content: attr(data-text);
    position: absolute; inset: 0;
    pointer-events: none;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(100deg, transparent 40%, #ffffff 50%, transparent 60%);
    -webkit-background-clip: text; background-clip: text;
    background-size: 250% 100%;
    background-position: 135% 0;
    opacity: 0;
    animation: lumGlint 15s infinite 0.8s;
  }
  .hero__desktop_subbn .subtitle_subbn {
    color: #555;
    font-family: "Nunito", Arial, Helvetica, sans-serif;
    font-size: clamp(.82rem, 1.25vw, 1.05rem);
  }

  /* ---------- MOBILE ---------- */
  .hero__mobile_subbn { display: none; }

  .hero__photo_subbn {
    width: 100%;
    aspect-ratio: 1.1;
    background-image: var(--img-mobile);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    border-top-left-radius: 40px;
  }

  /* SVG Curve Styles */
  .hm__curve_subbn {
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: clamp(35px, 12vw, 50px);
    fill: var(--teal);
    margin-bottom: -2px;
    z-index: 1;
  }

  .hero__text_subbn {
    position: relative;
    background: var(--teal);
    color: #fff;
    text-align: center;
    padding: clamp(12px, 4vw, 24px) 24px clamp(34px, 11vw, 64px);
    border-bottom-right-radius: 40px;
  }
  
  .hero__text_subbn .title_subbn {
    line-height: 1.9 !important;
    font-size: clamp(2.4rem, 6.2vw, 5.5rem) !important;
    position: relative;
    color: #F2F4F3;
    margin: 1.1em 0 1.5em;
    animation: lumReveal 1s cubic-bezier(.2,.7,.2,1) .25s both,
               lumGlow   1.6s ease-out .25s both;
  }
  
  .hero__text_subbn .subtitle_subbn {
    line-height: 2.45;
    font-family: "Nunito", Arial, Helvetica, sans-serif;
    color: #fff; 
    font-size: clamp(.88rem, 4vw, 1.18rem); 
  }
    
  .hero__text_subbn .eyebrow_subbn { 
    color: var(--teal-dark); 
    font-size: clamp(1.05rem, 4.8vw, 1.6rem); 
  }

  /* แสงกวาด (Mobile) - วนลูปทำงานทุกๆ 15 วินาที */
  .hero__text_subbn .title_subbn::after {
    content: attr(data-text);
    position: absolute; inset: 0; pointer-events: none;
    color: transparent; -webkit-text-fill-color: transparent;
    background-image: linear-gradient(100deg, transparent 40%, #ffffff 50%, transparent 60%);
    -webkit-background-clip: text; background-clip: text;
    background-size: 250% 100%; background-position: 135% 0; opacity: 0;
    animation: lumGlint 15s infinite 0.8s;
  }

  /* ---------- breakpoint ---------- */
  @media (max-width: 767px) {
    .hero__desktop_subbn { display: none; }
    .hero__mobile_subbn { display: block; }
  }

  /* ---------- Animations ---------- */
  @keyframes lumReveal {
    from { clip-path: inset(-18% 100% -18% 0%); }
    to   { clip-path: inset(-18% 0% -18% 0%); }
  }
  @keyframes lumGlow {
    0%   { text-shadow: 0 0 0 rgba(255,255,255,0); }
    45%  { text-shadow: 0 0 22px rgba(255,255,255,.45); }
    100% { text-shadow: 0 0 0 rgba(255,255,255,0); }
  }
  
  /* คุมเวลาวนลูป 15 วินาที (วิ่งกวาดแสงช่วง 10% แรก แล้วรอวนลูปใหม่) */
  @keyframes lumGlint {
    0%   { opacity: 0; background-position: 135% 0; }
    1%   { opacity: 1; }
    9%   { opacity: 1; }
    10%  { opacity: 0; background-position: -35% 0; }
    100% { opacity: 0; background-position: -35% 0; }
  }

  /* เคารพการตั้งค่าตัวเลือกการเคลื่อนไหวของผู้ใช้ */
  @media (prefers-reduced-motion: no-preference) {
    .hero__copy_subbn, .hero__text_subbn .eyebrow_subbn, .hero__text_subbn .subtitle_subbn { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
    .hero__text_subbn .eyebrow_subbn { animation-delay: .05s; }
    .hero__text_subbn .subtitle_subbn { animation-delay: .19s; }
    @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero__desktop_subbn .title_subbn, .hero__desktop_subbn .title_subbn::after,
    .hero__text_subbn .title_subbn, .hero__text_subbn .title_subbn::after { animation: none; }
    .hero__desktop_subbn .title_subbn, .hero__text_subbn .title_subbn { color: #fff; }
    .hero__desktop_subbn .title_subbn::after, .hero__text_subbn .title_subbn::after { display: none; }
  }
  
  
  
  
  
  
  
  



  /* =========================================================
     h1_15sec
     ========================================================= */
  
  * { box-sizing: border-box; margin: 0; padding: 0; }

  .hdrtext_tbanner { width: 100%; position: relative; overflow: hidden; }

  /* ---------- DESKTOP ---------- */
  .hdrtext__desktop {
    font-family: "Open Sans", sans-serif !important;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: transparent;
  }
  
  .hdrtext__copy { 
    position: relative; 
    z-index: 2; 
    padding: 50px 24px 30px;
  }

  /* ---------- สไตล์ของข้อความ ---------- */
  .titlehdr {
    font-family: "Open Sans", sans-serif !important;
    font-weight: 300 !important;
    line-height: 0.95 !important;
    letter-spacing: .01em;
  }

  .subtitlehdr {
    font-family: "Open Sans", sans-serif !important;
    font-weight: 100 !important;
    color: #8a8996;
    margin-top: 15px; 
    line-height: 1.4;
  }

  .hdrtext__desktop .titlehdr {
    position: relative;
    color: #6e6d7a; 
    font-size: clamp(2.2rem, 3.5vw, 3.8rem);
    margin: 0;
    animation: lumReveal 1s cubic-bezier(.2,.7,.2,1) .25s both,
               lumGlow   1.6s ease-out .25s both;
  }
  
  .hdrtext__desktop .subtitlehdr {
   font-size: clamp(1.8rem, 2vw, 2.5rem);
  }
  
  /* เอฟเฟกต์แสงกวาด (Desktop h1) */
  .hdrtext__desktop .titlehdr::after {
    content: attr(data-text);
    position: absolute; inset: 0;
    pointer-events: none;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(100deg, transparent 40%, #ffffff 50%, transparent 60%);
    -webkit-background-clip: text; background-clip: text;
    background-size: 250% 100%;
    background-position: 135% 0;
    opacity: 0;
    /* เปลี่ยนระยะเวลาเป็น 15s วนลูป infinite */
    animation: lumGlint 15s infinite 0.8s; 
  }

  /* ---------- MOBILE ---------- */
  .hdrtext__mobile { display: none; }

  .hdrtext__text {
    background-color: transparent;
    text-align: center;
    padding: 65px 24px 40px;
  }
  
  .hdrtext__text .titlehdr {
    position: relative;
    color: #6e6d7a;
   font-size: clamp(2.7rem, 7vw, 3.25rem);
    margin: 0;
    animation: lumReveal 1s cubic-bezier(.2,.7,.2,1) .25s both,
               lumGlow   1.6s ease-out .25s both;
  }

  .hdrtext__text .subtitlehdr {
   font-size: clamp(1.5rem, 4.5vw, 2.25rem);
  }

  /* เอฟเฟกต์แสงกวาด (Mobile h1) */
  .hdrtext__text .titlehdr::after {
    content: attr(data-text);
    position: absolute; inset: 0; pointer-events: none;
    color: transparent; -webkit-text-fill-color: transparent;
    background-image: linear-gradient(100deg, transparent 40%, #ffffff 50%, transparent 60%);
    -webkit-background-clip: text; background-clip: text;
    background-size: 250% 100%; background-position: 135% 0; opacity: 0;
    /* เปลี่ยนระยะเวลาเป็น 15s วนลูป infinite */
    animation: lumGlint 15s infinite 0.8s;
  }

  /* ---------- Keyframes สำหรับแอนิเมชัน ---------- */
  @keyframes lumReveal {
    from { clip-path: inset(-18% 100% -18% 0%); }
    to   { clip-path: inset(-18% 0% -18% 0%); }
  }
  @keyframes lumGlow {
    0%   { text-shadow: 0 0 0 rgba(255,255,255,0); }
    45%  { text-shadow: 0 0 22px rgba(255,255,255,.45); }
    100% { text-shadow: 0 0 0 rgba(255,255,255,0); }
  }
  
  /* ปรับแก้ Timeframe ใหม่รอบละ 15 วิ (แสงวิ่ง 10% พักรอ 90%) */
  @keyframes lumGlint {
    0%   { opacity: 0; background-position: 135% 0; }
    1%   { opacity: 1; }
    9%   { opacity: 1; }
    10%  { opacity: 0; background-position: -35% 0; }
    100% { opacity: 0; background-position: -35% 0; } /* ช่วงเวลารอคอย */
  }

  /* ---------- Breakpoint และ Accessibility ---------- */
  @media (max-width: 767px) {
    .hdrtext__desktop { display: none; }
    .hdrtext__mobile { display: block; }
  }

  @media (prefers-reduced-motion: reduce) {
    .hdrtext__desktop .titlehdr, .hdrtext__desktop .titlehdr::after,
    .hdrtext__text .titlehdr, .hdrtext__text .titlehdr::after { animation: none; }
    .hdrtext__desktop .titlehdr, .hdrtext__text .titlehdr { color: #6e6d7a; }
    .hdrtext__desktop .titlehdr::after, .hdrtext__text .titlehdr::after { display: none; }
  }

  

  /* more infomation  research */
    
.minfo {
    font-size: 12px;
    font-family: sans-serif;
    text-decoration: none;
    color: #c1c1c1;
    transition: color 0.2s;
}

.minfo:hover {
    color: #18988b;
}

.minfo .fa-info-circle {
    font-size: 12px;
}