/* ══════════════════════════════
       TOKENS
    ══════════════════════════════ */
    :root {
      --blue:      #2E5AA7;
      --blue2:     #0080FF;
      --bluePale:  #dde8f8;
      --bluePaleTrans: #f1f6f476;
      --blueSoft:  #edf3fd;
      --sky:       #86C5FF;
      --orange:    #FFA62B;
      --orange2:  #FFC300;
      --orangeBg:  #fff8ee;
      --yellow:    #F8E6A0;
      --white:     #ffffff;
      --off:       #f6f8fc;
      --border:    #dde5f0;
      --text:      #1c2b45;
      --text2:     #ffffff;
      --sub:       #4a5e7a;
      --muted:     #7a90aa;
      --font:      'Prompt', sans-serif;
      --ease:      cubic-bezier(.25,.46,.45,.94);
      --easeBack:  cubic-bezier(.34,1.56,.64,1);
      --rad:       10px;
      --radLg:     16px;
      --sh:        0 2px 14px rgba(46,90,167,.09);
      --shMd:      0 6px 28px rgba(46,90,167,.13);
      --shLg:      0 16px 52px rgba(46,90,167,.15);
    }

    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{font-family:var(--font);color:var(--text);background:var(--white);overflow-x:hidden;-webkit-font-smoothing:antialiased}
    a{text-decoration:none;color:inherit}
    img{display:block;max-width:100%}
    button{font-family:var(--font);cursor:pointer;background:none;border:none}
    ul{list-style:none}
    ::selection{background:var(--sky);color:var(--text)}
    ::-webkit-scrollbar{width:5px}
    ::-webkit-scrollbar-track{background:var(--off)}
    ::-webkit-scrollbar-thumb{background:var(--blue);border-radius:4px}/* ══════════════════════════════
       LAYOUT
    ══════════════════════════════ */
    .wrap   { max-width:1240px; margin:0 auto; padding:0 2rem; }
    .sec    { padding:5.5rem 0; }
    .sec-bg { background:var(--off); }/* ══════════════════════════════
       PROGRESS BAR
    ══════════════════════════════ */
    #progress-bar {
      position: fixed; top: 0; left: 0; z-index: 9999;
      height: 3px; width: 0%;
      background: linear-gradient(to right, var(--blue), var(--sky), var(--orange));
      transition: width .1s linear;
      border-radius: 0 2px 2px 0;
    }

/* ══════════════════════════════
       SCROLL REVEAL
    ══════════════════════════════ */
    .au  { opacity:0; transform:translateY(24px);  transition:opacity .65s var(--ease),transform .65s var(--ease); }
    .al  { opacity:0; transform:translateX(-24px); transition:opacity .65s var(--ease),transform .65s var(--ease); }
    .ar  { opacity:0; transform:translateX(24px);  transition:opacity .65s var(--ease),transform .65s var(--ease); }
    .au.on,.al.on,.ar.on{opacity:1;transform:none}
    .d1{transition-delay:.10s}.d2{transition-delay:.20s}.d3{transition-delay:.30s}.d4{transition-delay:.40s}.d5{transition-delay:.50s}

/* ══════════════════════════════
       SHARED
    ══════════════════════════════ */
    .chip {
      display:inline-flex;align-items:center;gap:.4rem;
      background:var(--bluePale);color:var(--blue);
      font-size:.78rem;font-weight:600;
      padding:.3rem 1rem;border-radius:100px;margin-bottom:.9rem;
    }
    .chip::before{content:'';width:6px;height:6px;background:var(--blue);border-radius:50%;flex-shrink:0}

    .stitle{font-size:clamp(1.7rem,2.8vw,2.4rem);font-weight:700;line-height:1.3;color:var(--text);margin-bottom:.85rem}
    .stitle .bl{color:var(--blue)}.stitle .or{color:var(--orange)}
    .slead{font-size:.97rem;font-weight:300;color:var(--sub);line-height:1.88;max-width:540px}

    /* animated-border button */
    .btn-blue {
      display:inline-block;padding:.78rem 2rem;
      background:var(--blue);color:#fff;
      font-family:var(--font);font-size:.92rem;font-weight:600;
      border-radius:var(--rad);border:none;
      position:relative;overflow:hidden;
      transition:background .24s,transform .2s,box-shadow .24s;
    }
    .btn-blue::after {
      content:'';position:absolute;inset:0;
      background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.18) 50%,transparent 100%);
      transform:translateX(-100%);transition:transform .5s var(--ease);
    }
    .btn-blue:hover{background:var(--blue2);transform:translateY(-2px);box-shadow:var(--shMd)}
    .btn-blue:hover::after{transform:translateX(100%)}

    .btn-outline {
      display:inline-block;padding:.78rem 2rem;
      background:transparent;color:var(--blue);
      font-family:var(--font);font-size:.92rem;font-weight:600;
      border-radius:var(--rad);border:2px solid var(--blue);
      transition:background .24s,transform .2s;
    }
    .btn-outline:hover{background:var(--bluePale);transform:translateY(-2px)}

    /* ANIMATED GRADIENT BORDER (2026 trend) */
    .anim-border {
      position:relative;border-radius:var(--radLg);
      background:var(--white);
    }
    .anim-border::before {
      content:'';position:absolute;inset:-1.5px;border-radius:calc(var(--radLg) + 1.5px);
      background:linear-gradient(135deg, var(--blue), var(--sky), var(--orange), var(--blue));
      background-size:300% 300%;
      animation:borderGradient 4s ease infinite;
      z-index:-1;
      opacity:0;transition:opacity .4s;
    }
    .anim-border:hover::before{opacity:1}
    @keyframes borderGradient{
      0%{background-position:0% 50%}
      50%{background-position:100% 50%}
      100%{background-position:0% 50%}
    }

/* ══════════════════════════════
       WAVE DIVIDER (SVG)
    ══════════════════════════════ */
    .wave-divider{
      display:block;
      width:100%;
      overflow:hidden;
      line-height:0;
      animation:hdfade .7s .32s both;
    }
    .wave-divider svg{
      display:block;
      width:100%
    }

/* ══════════════════════════════
       TRUST BAR
    ══════════════════════════════ */
    .trust-bar{
      background:var(--white);
      border-top:1px solid var(--border);
      border-bottom:1px solid var(--border);
      padding:.9rem 0;
      animation:hdfade .7s .32s both;
    }
    .trust-list{
      display:flex;
      gap:2.5rem;
      align-items:center;
      justify-content:center;
      gap: 1.5rem 2.5rem; /* row-gap เล็กลง, column-gap เดิม */
      flex-wrap:wrap
    }
    .trust-item{
      display:flex;
      align-items:center;
      gap:.45rem;
      color:var(--blue);
      font-size: clamp(0.8rem, 0.2vw + 0.75rem, 0.9rem);
      font-weight:500;
      white-space: nowrap; /* ป้องกันข้อความตัดกลางคำ */
    }
    .trust-item::before{
      content:'✓';
      font-weight:700;
      color:var(--orange);
      font-size: clamp(0.8rem, 0.2vw + 0.75rem, 0.9rem);
    }

@keyframes hdfade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.br-mobile  { display: none }
.br-tablet  { display: none }
.br-desktop { display: none }
/* Tablet */
@media (max-width: 768px) {
  .trust-list {
    gap: 0.75rem 1.5rem;
    padding-left: 1rem;
    justify-content: center;
  }
  .trust-bar  { 
    padding: .7rem 0 
  }
  .trust-item { 
    font-size: .7rem;
    white-space: nowrap;
  }
  .br-tablet { display: block }
  .br-mobile { display: none }
}

/* Mobile */
@media (max-width: 480px) {
  .trust-list {
    display: grid;
    grid-template-columns: 1fr 1fr;

  }
  .trust-item { 
    font-size: .6rem;
  }
  .br-tablet { display: none }
  .br-mobile { display: block }
}

@media (min-width: 769px) {
  .br-desktop { display: block }
}

.pbtn {
  width: 36px;
  height: 36px;
  border: 2px solid #ddd;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  transition: all 0.2s;
}
.pbtn:hover {
  border-color: #1a6cff;
  color: #1a6cff;
}
.pbtn.on {
  background: #1a6cff;
  border-color: #1a6cff;
  color: #fff;
}
#portGrid {
  min-height: 700px; /* ปรับตัวเลขให้พอดี 2 แถว */
}/* ══════════════════════════════
       NAVBAR
    ══════════════════════════════ */
    .nav{
      position:fixed;top:3px;left:0;right:0;z-index:900;
      background:rgba(255,255,255,.97);border-bottom:1px solid var(--border);
      backdrop-filter:blur(14px);transition:box-shadow .3s;
    }
    .nav-logo-img{
      height:40px;
    }
    .nav.scrolled{box-shadow:var(--sh)}
    .nav-in{
      max-width:1240px;margin:0 auto;padding:0 2rem;
      height:63px;display:flex;align-items:center;justify-content:space-between;
    }
    .nav-logo{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.2rem;color:var(--blue)}
    .nav-icon{
      width:36px;height:36px;background:var(--blue);border-radius:8px;
      display:flex;align-items:center;justify-content:center;
      color:#fff;font-size:.9rem;font-weight:700;flex-shrink:0;
      transition:transform .3s var(--easeBack);
    }
    .nav-logo:hover .nav-icon{transform:rotate(-8deg) scale(1.1)}
    .nav-links{display:flex;align-items:center;gap:.15rem}
    .nav-links a{
      padding:.5rem .9rem;font-size:.88rem;font-weight:500;color:var(--sub);
      border-radius:7px;transition:color .22s,background .22s;position:relative;
    }
    .nav-links a::after{
      content:'';position:absolute;bottom:4px;left:.9rem;right:.9rem;height:2px;
      background:var(--blue);border-radius:2px;transform:scaleX(0);transition:transform .3s var(--ease);
    }
    .nav-links a:hover{color:var(--blue);background:var(--blueSoft)}
    .nav-links a:hover::after{transform:scaleX(1)}
    .nav-links a.active {
      color: var(--white);
      background: var(--orange2);
    }
    .nav-links a.active::after {
      transform: scaleX(1.1);
    }
    .nav-cta{
      padding:.55rem 1.4rem;background:var(--orange);color:#fff;
      font-family:var(--font);font-size:.88rem;font-weight:600;
      border-radius:var(--rad);border:none;
      transition:background .24s,box-shadow .24s,transform .2s;cursor:pointer;
    }
    .nav-cta:hover{background:#e8921a;box-shadow:0 4px 16px rgba(255,166,43,.38);transform:translateY(-1px)}
    .ham{display:none;flex-direction:column;gap:5px;padding:5px}
    .ham span{width:22px;height:2px;background:var(--blue);border-radius:2px;transition:.3s;display:block}
    .ham.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
    .ham.open span:nth-child(2){opacity:0}
    .ham.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
    .mob{
      position:fixed;top:66px;left:0;right:0;bottom:0;
      background:var(--white);z-index:800;
      display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.8rem;
      transform:translateX(100%);transition:transform .38s var(--ease);
      border-top:1px solid var(--border);
    }
    .mob.open{transform:translateX(0)}
    .mob a{font-size:1.28rem;font-weight:500;color:var(--text)}
    .mob a:hover{color:var(--blue)}
    .mob-cta{padding:.72rem 2.4rem;background:var(--orange);color:#fff;font-family:var(--font);font-size:1rem;font-weight:600;border-radius:var(--rad);border:none;cursor:pointer}/* ══════════════════════════════
   HERO (FULLBLEED) — styles เฉพาะ
   #hero และ elements ข้างใน เท่านั้น
   ไม่มี global override ใดๆ
══════════════════════════════ */

/* ── Section container ── */
#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /*justify-content: flex-end;*/
  overflow: hidden;
  background: #0a0e1a; /* fallback ระหว่างโหลดรูป */
}
/* hero-bottom กิน space ที่เหลือ ดันตัวเองลงล่าง */
.hero-bottom {
  position: relative;
  z-index: 3;
  padding-bottom: 1.5rem;
  margin-top: auto;   /* ← เพิ่มตรงนี้ แทนที่จะใช้ justify-content */
}
#hero .wave-divider {
  position: relative;
  z-index: 3;
}

#hero .trust-bar {
  position: relative;
  z-index: 3;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: none;
  border-bottom: none;
}
/* ── Background image + parallax wrapper ── */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-bg::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 20%;
  background: linear-gradient(to bottom,
    transparent 0%,
    #000000 100%);
  z-index: 1;
}
.hero-bg-img {
  width: 100%;
  height: 110%;          /* เผื่อ space สำหรับ parallax */
  object-fit: cover;
  object-position: center 30%;
  display: block;
  transform-origin: top center;
  will-change: transform;
}

.hero-p{
  font-size: clamp(0.9rem, 0.25vw + 0.8rem, 1rem);
  font-weight:300;
  color:var(--text2);
  line-height:1.6;
  max-width:460px;
  margin-bottom:2.2rem;
  animation:hd .7s .32s both;
}
@keyframes hd {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ── Gradient overlays ── */
.hero-overlay-top {
  position: absolute; top: 0; left: 0; right: 0;
  height: 240px; z-index: 1;
  background: linear-gradient(to bottom,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.15) 65%,
    transparent 100%);
}
.hero-overlay-bottom {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 72%; z-index: 1;
  background: linear-gradient(to top,
    rgba(4,7,16,.85) 0%,
    rgba(4,7,16,.5)  45%,
    transparent 100%);
}

/* ── Navbar: โปร่งใสบน hero, ทึบเมื่อ scroll ──
   ใส่ไว้ที่นี่เพราะผูกกับ context ของ hero section
   แต่ selector เฉพาะเจาะจง ไม่ทับ base .nav ── */
.nav:not(.scrolled) {
  background: transparent !important;
  border-bottom-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
.nav:not(.scrolled) .nav-logo { color: #fff; }
.nav:not(.scrolled) .nav-links a { color: rgba(255,255,255,.85); }
.nav:not(.scrolled) .nav-links a:hover {
  background: rgba(255,255,255,.13);
  color: #fff;
}
.nav:not(.scrolled) .nav-links a::after { background: #fff; }

/* ── Top-right tagline ── */
.hero-tagline {
  position: absolute;
  top: calc(66px + 1.6rem);
  right: 2.5rem;
  z-index: 3;
  color: rgba(255,255,255,.82);
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: 500;
  line-height: 1.65;
  text-align: right;
  letter-spacing: .025em;
  animation: hslide .8s .6s both;
}
@keyframes hslide {
  from { opacity:0; transform:translateX(16px); }
  to   { opacity:1; transform:translateX(0); }
}
/* ── Giant display word ── */
.hero-display-word {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-size: clamp(6rem, 15vw, 16rem);
  font-weight: 700;
  color: rgba(255,255,255,.9);
  letter-spacing: -.035em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 6px 80px rgba(0,0,0,.22);
  animation: hWord 1s .08s both;
}
@keyframes hWord {
  from { opacity:0; transform:translate(-50%,-42%); }
  to   { opacity:1; transform:translate(-50%,-50%); }
}

/* ── Bottom content block ── */
.hero-bottom {
  position: relative;
  z-index: 3;
  padding-bottom: 1rem;
}
.hero-headline {
  font-size: clamp(2rem, 2vw + 1.4rem, 2.8rem);
  font-weight: 600;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 1.5rem;
  max-width: 660px;
  text-shadow: 0 2px 20px rgba(0,0,0,.4);
  animation: hFade .8s .28s both;
}
.hero-headline .bl{color:var(--blue2)}
.hero-headline .or{color:var(--orange)}

@keyframes hFade {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Search bar ── */
.hero-search {
  display: flex;
  align-items: center;
  background: linear-gradient(30deg,rgba(0, 0, 0, 0.529),rgba(0, 0, 0, 0.123));
  border-radius: 14px;
  padding: .7rem 1rem .7rem 1.6rem;
  box-shadow: 0 22px 64px rgba(0,0,0,.32);
  max-width: 760px;
  animation: hFade .8s .44s both;
}

/* ── Responsive (hero only) ── */
@media(max-width:768px) {
  .hero-display-word { font-size: clamp(6rem, 16vw, 13rem); }

  .hero-search {
    max-width: 100%;
    flex-wrap: wrap;
    padding: 1rem 1.2rem;
    gap: .6rem;
  }
  .hsearch-divider { display: none; }
  .hsearch-field { width: calc(50% - .3rem); flex: none; padding: .3rem 0; }
  .hsearch-btn { width: 100%; margin-left: 0; padding: .85rem; text-align: center; }
}
@media(max-width:480px) {
  .hero-display-word { font-size: clamp(4.5rem, 20vw, 8rem); }
  .hero-headline { font-size: 1.2rem; }
  .hsearch-field { width: 100%; }
  .hero-bottom { padding-bottom: 1.8rem; }
}
/* ══════════════════════════════
       ABOUT
    ══════════════════════════════ */
    .about-grid{
      display:grid;
      grid-template-columns:1.5fr 2fr;
      gap:5rem;
      align-items:flex-start
    }
    .about-vis{position:relative}
    .about-text {
      margin: 0 auto;
      text-align: left;      /* override จาก center → left */
      text-indent: 2em;
      font-weight: 300;
      color: #003566;
      word-break: break-word;
      overflow-wrap: break-word;
    }
    .about-photo{
      border-radius:var(--radLg);
      overflow:hidden;
      aspect-ratio:25/9;
      box-shadow:var(--shLg);
      background:linear-gradient(148deg,var(--blueSoft) 0%,var(--off) 40%,#c8daff 100%);
      display:flex;
      align-items:center;
      justify-content:center;
      position:relative;
      max-height: 30vh; /* ไม่เกิน 60% ของความสูงหน้าจอ */
    }
    @media (max-width: 1024px) {
      .about-photo {
        aspect-ratio: 5/3;     /* tablet — คลาสสิก สบายตา */
      }
    }

    @media (max-width: 640px) {
      .about-photo {
        aspect-ratio: 3/2;     /* mobile — กว้างพอดี ไม่แคบ */
      }
    }
    .about-photo::before{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 60%,rgba(46,90,167,.05) 100%)}
    .about-photo-icon{font-size:7rem;opacity:.18}
    .about-est{
      position:absolute;top:1.2rem;left:1.2rem;
      background:var(--orange);color:#fff;
      padding:.38rem .9rem;border-radius:6px;font-size:.74rem;font-weight:600;z-index:2;
    }
    .about-mini{
      position:absolute;top:1.5rem;right:-1.5rem;
      background:rgba(255,255,255,.88);
      backdrop-filter:blur(14px);
      border:1px solid rgba(255,255,255,.9);
      border-radius:var(--radLg);padding:1.2rem 1.5rem;
      box-shadow:var(--shLg);z-index:2;
    }
    .amc-row{display:flex;align-items:center;gap:1.3rem}
    .amc{text-align:center}
    .amc-n{font-size:1.7rem;font-weight:700;color:var(--blue);line-height:1}
    .amc-n sup{font-size:.8rem}
    .amc-l{font-size:.69rem;color:var(--muted);margin-top:.18rem;line-height:1.35}
    .amc-sep{width:1px;height:40px;background:var(--border)}

    .about-points{display:flex;flex-direction:column;gap:.9rem;margin-top:2rem}
    .apt{
      display:flex;gap:.9rem;align-items:flex-start;
      padding:1.1rem 1.3rem;background:var(--white);
      border:1px solid var(--border);border-radius:var(--rad);
      transition:border-color .24s,box-shadow .24s,transform .24s;
      cursor:default;
    }
    .apt.au.d1 {
      background:
        linear-gradient(
          135deg, 
          white        0%,
          white        60%,
          rgba(255,255,255,0.5) 100%,
          transparent  80%
        ),
        url('/assets/apt1.png') bottom right / cover no-repeat;
    }
    .apt.au.d2 {
      background:
        linear-gradient(
          135deg, 
          white        0%,
          white        60%,
          rgba(255,255,255,0.5) 100%,
          transparent  80%
        ),
        url('/assets/apt2.png') bottom right / cover no-repeat;
    }
    .apt.au.d3 {
      background:
        linear-gradient(
          135deg, 
          white        0%,
          white        60%,
          rgba(255,255,255,0.5) 100%,
          transparent  80%
        ),
        url('/assets/apt3.png') bottom right / cover no-repeat;
    }
    .apt.au.d4 {
      background:
        linear-gradient(
          135deg, 
          white        0%,
          white        60%,
          rgba(255,255,255,0.5) 100%,
          transparent  80%
        ),
        url('/assets/apt4.png') bottom right / cover no-repeat;
    }
    .apt:hover{border-color:var(--sky);box-shadow:var(--sh);transform:translateX(5px)}
    .apt-ico{
      width:42px;height:42px;flex-shrink:0;background:var(--bluePale);border-radius:9px;
      display:flex;align-items:center;justify-content:center;font-size:1.12rem;
      transition:background .3s,transform .3s var(--easeBack);
    }
    .apt:hover .apt-ico{background:var(--blue);transform:scale(1.1) rotate(-5deg)}
    .apt-title{font-size:.93rem;font-weight:600;color:var(--text);margin-bottom:.2rem}
    .apt-desc{font-size:.81rem;color:var(--sub);line-height:1.62}

/* ══════════════════════════════
       SERVICES
    ══════════════════════════════ */
    .svc-head {
      text-align: center;
      margin-bottom: 1rem;
    }
    .svc-head .slead{
      margin:0 auto
    }
    .svc-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:1.4rem
    }
    .svc-card{
      background:var(--white);
      border:1px solid var(--border);
      border-radius:var(--radLg);
      padding:1rem 1rem;
      position:relative;
      overflow:hidden;
      transition:border-color .28s,box-shadow .28s,transform .28s;
      cursor:default;     
    }
    /* ขั้นที่ 1, 3 (คี่) */
    .svc-card:nth-child(odd) {
      background:
        linear-gradient(
          135deg, 
          white        0%,
          white        60%,
          rgba(255,255,255,0.5) 100%,
          transparent  90%
        ),
        url('/assets/bg-card1.png') bottom right / cover no-repeat;
    }
    /* ขั้นที่ 2, 4 (คู่) */
    .svc-card:nth-child(even) {
      background:
        linear-gradient(
          135deg, 
          white        0%,
          white        60%,
          rgba(255,255,255,0.5) 100%,
          transparent  90%
        ),
        url('/assets/bg-card2.png') bottom right / cover no-repeat;
    }
    .svc-card::before{
      content:'';
      position:absolute;
      top:0;
      left:0;
      right:0;
      height:3px;
      background:linear-gradient(to right,var(--blue),var(--sky));
      transform:scaleX(0);transform-origin:left;
      transition:transform .38s var(--ease);
    }
    .svc-card:hover{border-color:transparent;box-shadow:var(--shMd);transform:translateY(-6px)}
    .svc-card:hover::before{transform:scaleX(1)}
    .svc-num{
      position:absolute;
      top:1.3rem;right:1.5rem;
      font-size: clamp(1.25rem, 0.8vw + 1rem, 1.6rem);
      font-weight:700;
      color:var(--orange);
      line-height:1
    }
    .svc-ico{
      width:52px;height:52px;background:var(--bluePale);border-radius:11px;
      display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:1.3rem;
      transition:background .3s,transform .4s var(--easeBack);
    }
    .svc-card:hover .svc-title{
      transform:scale(1.1)
    }
    .svc-title{
      font-size: clamp(1.05rem, 0.35vw + 0.95rem, 1.25rem);
      font-weight:600;
      color:var(--text);
      margin-bottom:.5rem
    }
    @media(max-width:1024px) {
      .svc-title{
        font-size: clamp(1.25rem, 0.8vw + 1rem, 1.6rem);
        font-weight:600;
        color:var(--text);
        margin-bottom:.5rem
      }
    }
    @media(max-width:620px) {
      .svc-title{
        font-size: clamp(1.25rem, 0.8vw + 1rem, 1.6rem);
        font-weight:600;
        color:var(--text);
        margin-bottom:.5rem
      }
    }
    .svc-desc{
      font-size: clamp(0.95rem, 0.3vw + 0.9rem, 1.1rem);
      color:var(--sub);
      line-height:1.75
    }
    .svc-more{
      display:inline-flex;align-items:center;gap:.4rem;margin-top:1.1rem;
      font-size:.8rem;font-weight:600;color:var(--blue);transition:gap .24s;
    }
    .svc-card:hover .svc-more{gap:.8rem}

/* ══════════════════════════════
       NUMBERS
    ══════════════════════════════ */
    .nums-sec{background:var(--off);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:4rem 0}
    .nums-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
    .ncard{
      background:var(--white);border:1px solid var(--border);
      border-radius:var(--radLg);padding:2rem 1.5rem;text-align:center;
      box-shadow:var(--sh);
      transition:box-shadow .28s,transform .28s,border-color .28s;
      position:relative;overflow:hidden;
    }
    .ncard::before{
      content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
      background:linear-gradient(to right,var(--blue),var(--orange));
      transform:scaleX(0);transform-origin:center;transition:transform .4s var(--ease);
    }
    .ncard:hover{box-shadow:var(--shMd);transform:translateY(-5px);border-color:var(--sky)}
    .ncard:hover::before{transform:scaleX(1)}
    .nicon{font-size:1.8rem;margin-bottom:.7rem}
    .nval{font-size:clamp(2.3rem,4vw,3.2rem);font-weight:700;color:var(--blue);line-height:1}
    .nsuf{font-size:1.3rem;color:var(--orange)}
    .nlbl{font-size:.82rem;font-weight:500;color:var(--sub);margin-top:.5rem}

/* ══════════════════════════════
       PORTFOLIO
    ══════════════════════════════ */
    .port-top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:2.4rem;flex-wrap:wrap;gap:1.4rem}
    .filter-row{display:flex;gap:.45rem;flex-wrap:wrap}
    .fbtn{
      padding:.42rem 1.1rem;background:var(--white);
      border:1.5px solid var(--border);color:var(--sub);
      font-family:var(--font);font-size:.82rem;font-weight:500;
      border-radius:100px;transition:all .22s;cursor:pointer;
    }
    .fbtn.on,.fbtn:hover{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 3px 10px rgba(46,90,167,.22)}

    .port-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
    .pcard{
      background:var(--white);border:1px solid var(--border);
      border-radius:var(--radLg);overflow:hidden;
      transition:box-shadow .3s,transform .3s;
    }
    .pcard:hover{box-shadow:var(--shLg);transform:translateY(-6px)}
    .pcard.big{grid-column:span 2}
    .pthumb{width:100%;overflow:hidden;position:relative}
    .pcard.big .pthumb{height:300px}
    .pcard:not(.big) .pthumb{height:195px}
    .pthumb-in{
      width:100%;height:100%;
      display:flex;align-items:center;justify-content:center;
      transition:transform .5s var(--ease);
    }
    .pcard:hover .pthumb-in{transform:scale(1.06)}
    .pemoji{font-size:3.5rem;opacity:.22}
    .ptag{
      position:absolute;top:.9rem;left:.9rem;
      padding:.28rem .75rem;border-radius:100px;
      font-size:.71rem;font-weight:600;z-index:2;
    }
    .ptag.wip{background:var(--orangeBg);color:#a06010}
    .ptag.done{background:#e6f4ea;color:#2a7038}
    .pbody{padding:1.3rem 1.5rem}
    .ptype{font-size:.71rem;font-weight:600;color:var(--blue);letter-spacing:.07em;text-transform:uppercase;margin-bottom:.38rem}
    .pname{font-size:1rem;font-weight:600;color:var(--text);margin-bottom:.38rem}
    .pcard:not(.big) .pname{font-size:.93rem}
    .ploc{font-size:.77rem;color:var(--muted);display:flex;align-items:center;gap:.45rem}
    .ploc::before{content:'';width:14px;height:1.5px;background:var(--orange);border-radius:2px}
    .prow{display:flex;gap:1.3rem;margin-top:.85rem;padding-top:.85rem;border-top:1px solid var(--border)}
    .pmeta strong{display:block;font-size:.83rem;font-weight:600;color:var(--text)}
    .pmeta{font-size:.74rem;color:var(--muted)}
    .pcard.hidden{display:none}

/* ══════════════════════════════
       TIMELINE PROCESS
    ══════════════════════════════ */
    .timeline-wrap{
      margin-top:3rem
    }
    .timeline{
      display:flex;
      position:relative
    }
    .timeline::before{
      content:'';position:absolute;top:28px;left:0;right:0;height:2px;
      background:linear-gradient(to right,var(--blue),var(--sky),var(--orange));
      background-size: 200% 100%;
      z-index:0;
      animation: lightRun 2.5s linear infinite;
    }
    @keyframes lightRun {
      0%   { background-position: 100% 0; }
      100% { background-position: -100% 0; }
    }
    .tstep{
      flex:1;display:flex;flex-direction:column;align-items:center;
      position:relative;z-index:1;cursor:default;
    }
    .tstep-dot{
      width:56px;height:56px;border-radius:50%;
      background:var(--white);border:2px solid var(--border);
      display:flex;align-items:center;justify-content:center;
      font-size:1.4rem;margin-bottom:.9rem;
      box-shadow:var(--sh);
      transition:border-color .35s,box-shadow .35s,transform .35s var(--easeBack),background .35s;
    }
    .tstep:hover .tstep-dot{
      border-color:var(--blue);background:var(--blue);
      box-shadow:0 0 0 6px var(--bluePale),var(--sh);
      transform:scale(1.12);
    }
    .tstep-dot-filter{filter:grayscale(1);transition:filter .35s}
    .tstep:hover .tstep-dot-filter{filter:grayscale(0) brightness(2)}
    .tstep-n{
      font-size: clamp(0.8rem, 0.2vw + 0.75rem, 0.9rem);
      font-weight:700;letter-spacing:.1em;text-transform:uppercase;
      color:var(--orange);margin-bottom:.3rem;
    }
    .tstep-title{
      font-size: clamp(1.25rem, 0.8vw + 1rem, 1.6rem);
      font-weight:600;
      color:var(--text);
      text-align:center;

    }
    .tstep-desc{
      font-size: clamp(0.9rem, 0.25vw + 0.8rem, 1rem);
      color:var(--blue);
      text-align:center;
      line-height:1.5;
      max-width:110px;
      padding: 0.5rem;

    }

    /* ACTIVE step highlight */
    .tstep.active .tstep-dot{
      border-color:var(--blue);background:var(--blue);
      box-shadow:0 0 0 6px var(--bluePale),var(--shMd);
    }
    .tstep.active .tstep-dot-filter{filter:grayscale(0) brightness(2)}
    .tstep.active .tstep-title{color:var(--blue)}

    @media(max-width:768px) {
      .timeline {
        display:flex;
        gap: 0;           /* ← ลบช่องว่างระหว่าง step */
      }
      .tstep{
        align-items:grid;
        gap:0rem;
        width:100%;
        align-items: center;
        text-align:center;
        padding: 1rem 0.5rem;
        margin: 0;
      }
      /* ขั้นที่ 1, 3, 5 (คี่) */
      .tstep:nth-child(odd) {
        background: #dde8f823;
      }

      /* ขั้นที่ 2, 4 (คู่) */
      .tstep:nth-child(even) {
        background: rgba(255, 255, 255, 0.323);
      }
      .tstep-title{
        text-align: center;
      }
      .tstep-desc{
        text-align:center;
        max-width:none;
        font-size: clamp(1.05rem, 0.35vw + 0.95rem, 1.25rem);
      }
    }
    @media(max-width:480px) {
      .tstep-n{
        display: none;
      }
      .timeline{
        display:grid;
        grid-template-columns: 1fr;
        position:relative;
      }
      .timeline-wrap{
        padding: 1rem;
        background-color: white;
        border-radius: 1rem;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.078), 0 6px 20px 0 rgba(0, 0, 0, 0.039);
      }
      .tstep{
        display:grid;
        grid-template-columns: 1fr 2fr 3fr;
        padding: 0 0 1rem;
        border: rgba(128, 128, 128, 0.311) 0.1px;
        border-bottom-style: solid;
      }
      .tstep-title{
        font-size: clamp(1.05rem, 0.35vw + 0.95rem, 1.25rem);
      }
      .tstep-desc{
        font-size: clamp(1.05rem, 0.35vw + 0.95rem, 1.25rem);
      }
      .tstep-dot{
        width:40px;height:40px;border-radius:50%;
        background:var(--white);border:2px solid var(--orange);
        display:flex;align-items:center;justify-content:center;
        font-size:1.4rem;margin-bottom:.9rem;
        box-shadow:var(--sh);
        transition:border-color .35s,box-shadow .35s,transform .35s var(--easeBack),background .35s;
      }
      .tstep-dot .tstep:hover .tstep-dot .tstep-dot-filter{
        width:40px;height:40px;border-radius:50%;
        background:var(--white);border:2px solid var(--orange);
        display:flex;align-items:center;justify-content:center;
        font-size:1.4rem;margin-bottom:.9rem;
        box-shadow:var(--sh);
        transition:border-color .35s,box-shadow .35s,transform .35s var(--easeBack),background .35s;
      }
    }
/* ══════════════════════════════
       TESTIMONIALS CAROUSEL
    ══════════════════════════════ */
    #testimonials{background:var(--off)}
    .testi-head{text-align:center;margin-bottom:2.8rem}
    .testi-head .slead{margin:0 auto}

    .testi-track-wrap{
      overflow:hidden;position:relative;
    }
    .testi-track-wrap::before,.testi-track-wrap::after{
      content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none;
    }
    .testi-track-wrap::before{left:0;background:linear-gradient(to right,var(--off),transparent)}
    .testi-track-wrap::after{right:0;background:linear-gradient(to left,var(--off),transparent)}

    .testi-track{
      display:flex;gap:1.4rem;
      animation:scrollCarousel 28s linear infinite;
      width:max-content;
    }
    .testi-track:hover{animation-play-state:paused}

    @keyframes scrollCarousel{
      0%{transform:translateX(0)}
      100%{transform:translateX(-50%)}
    }

    .tcard{
      flex-shrink:0;width:340px;
      background:var(--white);border:1px solid var(--border);
      border-radius:var(--radLg);padding:1.8rem;
      box-shadow:var(--sh);
      transition:box-shadow .3s,transform .3s,border-color .3s;
    }
    .tcard:hover{box-shadow:var(--shMd);transform:translateY(-4px);border-color:var(--sky)}
    .tcard-stars{color:var(--orange);font-size:.9rem;letter-spacing:.1rem;margin-bottom:.8rem}
    .tcard-text{font-size:.88rem;font-weight:300;color:var(--sub);line-height:1.8;margin-bottom:1.2rem}
    .tcard-author{display:flex;align-items:center;gap:.75rem}
    .tcard-avatar{
      width:40px;height:40px;border-radius:50%;
      background:linear-gradient(135deg,var(--bluePale),var(--sky));
      display:flex;align-items:center;justify-content:center;
      font-size:1.1rem;flex-shrink:0;
    }
    .tcard-name{font-size:.88rem;font-weight:600;color:var(--text)}
    .tcard-role{font-size:.75rem;color:var(--muted)}
    .tcard-proj{
      display:inline-block;margin-top:.3rem;
      font-size:.68rem;font-weight:600;color:var(--blue);
      background:var(--bluePale);padding:.15rem .6rem;border-radius:100px;
    }

/* ══════════════════════════════
       CONTACT
    ══════════════════════════════ */
    .contact-grid{display:grid;grid-template-columns:1fr 1.45fr;gap:5rem;align-items:start}
    .info-list{display:flex;flex-direction:column;gap:.88rem;margin-top:1.8rem}
    .icard{
      display:flex;gap:.9rem;align-items:flex-start;
      padding:1.1rem 1.3rem;background:var(--white);
      border:1px solid var(--border);border-radius:var(--rad);
      transition:border-color .24s,box-shadow .24s,transform .24s;
    }
    .icard:hover{border-color:var(--sky);box-shadow:var(--sh);transform:translateX(4px)}
    .iico{
      width:42px;height:42px;flex-shrink:0;background:var(--bluePale);border-radius:9px;
      display:flex;align-items:center;justify-content:center;font-size:1.05rem;
      transition:background .3s,transform .3s var(--easeBack);
    }
    .icard:hover .iico{background:var(--blue);transform:scale(1.1)}
    .ilbl{font-size:.71rem;font-weight:600;color:var(--blue);letter-spacing:.05em;text-transform:uppercase;margin-bottom:.2rem}
    .ival{font-size:.88rem;color:var(--sub);line-height:1.55}

    .form-card{
      background:var(--white);border:1px solid var(--border);
      border-radius:var(--radLg);padding:2.4rem;box-shadow:var(--sh);
      position:relative;overflow:hidden;
    }
    /* subtle top accent */
    .form-card::before{
      content:'';position:absolute;top:0;left:0;right:0;height:3px;
      background:linear-gradient(to right,var(--blue),var(--sky),var(--orange));
    }
    .form-card h3{font-size:1.35rem;font-weight:700;color:var(--text);margin-bottom:.35rem}
    .form-card>p{font-size:.86rem;color:var(--muted);margin-bottom:1.8rem}
    .frow{display:grid;grid-template-columns:1fr 1fr;gap:.88rem;margin-bottom:.88rem}
    .fg{display:flex;flex-direction:column;gap:.3rem}
    .fg.c2{grid-column:1/-1}
    .fg label{font-size:.78rem;font-weight:600;color:var(--sub)}
    .fg input,.fg select,.fg textarea{
      padding:.72rem .95rem;background:var(--off);
      border:1.5px solid var(--border);border-radius:8px;
      font-family:var(--font);font-size:.9rem;color:var(--text);
      outline:none;width:100%;
      transition:border-color .22s,background .22s,box-shadow .22s;
    }
    .fg input::placeholder,.fg textarea::placeholder{color:var(--muted)}
    .fg input:focus,.fg select:focus,.fg textarea:focus{
      border-color:var(--blue);background:var(--white);
      box-shadow:0 0 0 3px rgba(46,90,167,.09);
    }
    .fg select{
      appearance:none;-webkit-appearance:none;cursor:pointer;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%237a90aa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat:no-repeat;background-position:right .9rem center;padding-right:2.3rem;
    }
    .fg textarea{min-height:110px;resize:vertical}
    .form-ok{
      display:none;align-items:center;gap:.5rem;
      padding:.88rem 1.1rem;margin-bottom:1.3rem;
      background:#eaf6ec;border:1px solid #a8d5b2;
      border-radius:8px;font-size:.875rem;color:#2a7038;font-weight:500;
    }
    .form-ok.show{display:flex}
    .btn-send{
      display:block;width:100%;margin-top:.88rem;
      padding:.88rem;background:var(--orange);color:#fff;
      font-family:var(--font);font-size:.95rem;font-weight:600;
      border-radius:var(--rad);border:none;cursor:pointer;
      position:relative;overflow:hidden;
      transition:background .24s,box-shadow .24s,transform .2s;
    }
    .btn-send::after{
      content:'';position:absolute;inset:0;
      background:linear-gradient(120deg,transparent,rgba(255,255,255,.2),transparent);
      transform:translateX(-100%);transition:transform .5s var(--ease);
    }
    .btn-send:hover{background:#e8921a;box-shadow:0 6px 20px rgba(255,166,43,.38);transform:translateY(-2px)}
    .btn-send:hover::after{transform:translateX(100%)}
    
    @media(max-width:1024px) {
      
    }
    @media(max-width:620px) {
      .ilbl{
        font-size: clamp(0.8rem, 0.2vw + 0.75rem, 0.9rem);
        font-weight:600;
        color:var(--blue);
        letter-spacing:.05em;
        text-transform:uppercase;
        margin-bottom:.2rem
      }
      .ival{
        font-size: clamp(1rem, 0.3vw + 0.9rem, 1.1rem);
        color:var(--sub);
        line-height:1.55
      }
    }
/* ══════════════════════════════
       FOOTER
    ══════════════════════════════ */
    footer{
      background:var(--white);
      padding:1.5rem 0;
      /* ── Safari iPhone Safe Area fix ── */
      padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
    }
    .foot-in{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.9rem}
    .foot-in p{font-size:.8rem;color:var(--muted)}
    .foot-nav{
      display:flex;
      gap:1.4rem;
    }
    .foot-nav a{font-size:.8rem;color:var(--muted);transition:color .22s}
    .foot-nav a:hover{color:var(--blue)}

    /* back to top */
    .btt{
      position:fixed;
      bottom:1.6rem;
      right:1.6rem;
      width:44px;
      height:44px;
      background:var(--blue);
      color:#fff;
      border-radius:var(--rad);
      border:none;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:1.1rem;
      font-weight:700;
      font-family:var(--font);
      box-shadow:var(--shMd);
      z-index:800;
      opacity:0;transform:translateY(16px);
      pointer-events:none;
      transition:opacity .3s,transform .3s,background .22s;
    }
    .btt.show{
      opacity:1;
      transform:translateY(0);
      pointer-events:auto
    }
    .btt:hover{
      background:var(--blue2);
      transform:translateY(-3px)!important
    }
    /* ══════════════════════════════
       RESPONSIVE
    ══════════════════════════════ */
    @media(max-width:1024px){
      .nav-links,.nav-cta{display:none}
      .ham{display:flex}
      .hero-grid{grid-template-columns:1fr}
      .hero-shape{width:100%;clip-path:none;height:36%;bottom:0;top:auto;opacity:.5}
      .hero-card-wrap{display:none}
      .about-grid{grid-template-columns:1fr;gap:3rem}
      .about-mini{right:.5rem}
      .svc-grid{grid-template-columns:1fr 1fr}
      .nums-grid{grid-template-columns:1fr 1fr}
      .port-grid{grid-template-columns:1fr}
      .pcard.big{grid-column:span 1}
      .pcard.big .pthumb{height:230px}
      .timeline{flex-wrap:wrap;gap:1.5rem}
      .timeline::before{display:none}
      .contact-grid{grid-template-columns:1fr;gap:3rem}
      .frow{grid-template-columns:1fr}
      .fg.c2{grid-column:1}
      .foot-in{flex-direction:column;text-align:center}
    }
    @media(max-width:620px){
      .wrap,.nav-in{padding-left:1.2rem;padding-right:1.2rem}
      .sec{padding:3.8rem 0}
      .svc-grid{grid-template-columns:1fr}
      .hero-stats{gap:1.2rem}
      .trust-list{gap:1.1rem}
      .about-mini{position:static;margin-top:1.5rem}
      .port-top{flex-direction:column;align-items:flex-start}
      .form-card{padding:1.6rem}
      .tcard{width:280px}
      .trust-bar  { padding: .7rem 0 }
      .trust-item { font-size: .76rem }
    }

/* ══════════════════════════════════════════════════
       FLOATING CONTACT BUTTONS
       Key design decisions:
       • Single .float-group wrapper with position:fixed
         → avoids iOS Safari bug where overflow-x:hidden
           on body/html breaks position:fixed on children
       • z-index:9990 → above nav(900), mob(800), btt(800)
       • No opacity/transform hide-show → always visible,
         no JS dependency, no flash of missing button
       • will-change:transform → GPU compositing layer
       • -webkit-tap-highlight-color:transparent → no flash on tap
       • Tooltip only on (hover:hover) devices → hides on touch
    ══════════════════════════════════════════════════ */

    /* Wrapper — fixed, bottom-left, vertical stack */
    .float-group {
      position: fixed;
      bottom: 1.5rem;
      left:   1.5rem;
      z-index: 9990;
      display: flex;
      flex-direction: column-reverse; /* LINE on bottom, FB above */
      align-items: flex-start;
      gap: .65rem;
      opacity:0;transform:translateY(16px);
      pointer-events:none;
      transition:opacity .3s,transform .3s,background .22s;
    }
    .float-group.show{
      opacity:1;
      transform:translateY(0);
      pointer-events:auto
    }

    /* LINE button */
    .line-float {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      padding: .5rem 1rem .5rem .52rem;
      background: #06C755;
      color: #fff;
      font-family: var(--font);
      font-size: .76rem;
      font-weight: 700;
      line-height: 1.25;
      border-radius: 100px;
      text-decoration: none;
      white-space: nowrap;
      box-shadow: 0 4px 16px rgba(6,199,85,.42);
      -webkit-tap-highlight-color: transparent;
      will-change: transform;
      transition: background .2s, box-shadow .2s, transform .2s;
    }
    .line-float:hover   { background:#05a348; box-shadow:0 7px 22px rgba(6,199,85,.52); transform:translateY(-2px); }
    .line-float:active  { transform:scale(.96); }
    .line-float:focus-visible { outline:3px solid #06C755; outline-offset:3px; }

    .line-float__icon {
      width:26px; height:26px; flex-shrink:0;
      background:rgba(255,255,255,.22); border-radius:50%;
      display:flex; align-items:center; justify-content:center;
    }
    .line-float__icon svg { display:block; }
    .line-float__pulse {
      width:6px; height:6px; border-radius:50%; flex-shrink:0;
      background:rgba(255,255,255,.7);
      animation:lfPulse 2s ease-in-out infinite;
    }
    @keyframes lfPulse {
      0%,100%{opacity:.65;transform:scale(1)}
      50%    {opacity:1;  transform:scale(1.5)}
    }
    .line-float__text { display:flex; flex-direction:column; }
    .line-float__sub  { font-size:.57rem; opacity:.82; }
    .line-float__id   { font-size:.78rem; font-weight:700; }

    /* Facebook button */
    .fb-float {
      width:46px; height:46px; border-radius:50%;
      background:#1877F2; color:#fff;
      display:flex; align-items:center; justify-content:center;
      text-decoration:none;
      box-shadow:0 4px 16px rgba(24,119,242,.42);
      -webkit-tap-highlight-color:transparent;
      will-change:transform;
      transition:background .2s,box-shadow .2s,transform .2s;
    }
    .fb-float:hover   { background:#166fe5; box-shadow:0 7px 22px rgba(24,119,242,.52); transform:translateY(-2px); }
    .fb-float:active  { transform:scale(.96); }
    .fb-float:focus-visible { outline:3px solid #1877F2; outline-offset:3px; }
    .fb-float svg { display:block; }

    /* Tooltip — desktop/mouse only */
    @media(hover:hover){
      .line-float,.fb-float { position:relative; }
      .line-float::after,.fb-float::after {
        content:attr(data-tip);
        position:absolute; left:calc(100% + .6rem); top:50%;
        transform:translateY(-50%);
        background:rgba(20,30,50,.88); color:#fff;
        font-size:.72rem; font-weight:500; white-space:nowrap;
        padding:.3rem .65rem; border-radius:6px;
        pointer-events:none; opacity:0; transition:opacity .18s;
      }
      .line-float:hover::after,.fb-float:hover::after { opacity:1; }
    }

    /* Responsive positions */
    /* ≤390px  iPhone SE, small Android */
    @media(max-width:390px){
      .float-group { bottom:.9rem; left:.9rem; gap:.5rem; }
      .line-float  { font-size:.71rem; padding:.44rem .85rem .44rem .46rem; }
      .fb-float    { width:40px; height:40px; }
      .fb-float svg{ width:17px; height:17px; }
      .btt         { bottom:.9rem; right:.9rem; }
    }
    /* 391–480px  iPhone 6/7/8/X/11/12 mini, standard Android */
    @media(min-width:391px) and (max-width:480px){
      .float-group { bottom:1.1rem; left:1.1rem; }
      .btt         { bottom:1.1rem; right:1.1rem; }
    }
    /* 481–768px  large phones, small tablets */
    @media(min-width:481px) and (max-width:768px){
      .float-group { bottom:1.3rem; left:1.3rem; }
      .btt         { bottom:1.3rem; right:1.3rem; }
    }
    /* 769–1024px iPad, iPad Air, iPad Mini */
    @media(min-width:769px) and (max-width:1024px){
      .float-group { bottom:1.5rem; left:1.5rem; }
      .btt         { bottom:1.5rem; right:1.5rem; }
    }
    /* 1025px+  iMac, desktop, large monitors */
    @media(min-width:1025px){
      .float-group { bottom:1.8rem; left:1.8rem; }
      .btt         { bottom:1.8rem; right:1.8rem; }
    }/* === Image Modal === */
.img-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.img-modal-overlay.active {
  display: flex;
}
.img-modal-box {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  cursor: default;
  animation: modalIn 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
.img-modal-box img {
  display: block;
  max-width: 90vw;
  max-height: 80vh;
  border-radius: 8px;
  object-fit: contain;
  box-shadow: 0 32px 80px rgba(0,0,0,0.6);
}
.img-modal-caption {
  text-align: center;
  color: rgba(255,255,255,0.75);
  font-size: 14px;
  margin-top: 12px;
}
.img-modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;               /* ต้องอยู่บน swiper */
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.img-modal-close:hover { background: rgba(0,0,0,0.85); }

/* ทำให้ card มี cursor pointer */
#portGrid .port-card { cursor: pointer; }

.img-modal-box {
  position: relative;
  background: #1a1a2e;
  border-radius: 12px;
  overflow: hidden;
  width: min(520px, 92vw);
  cursor: default;
  animation: modalIn 0.2s ease;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
.mm-body   { padding: 20px 24px 24px; }
.mm-type   { font-size: 12px; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.mm-name   { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.mm-loc    { font-size: 14px; color: rgba(255,255,255,0.55); margin-bottom: 16px; }
.mm-row    { display: flex; gap: 16px; flex-wrap: wrap; }
.mm-meta   { display: flex; flex-direction: column; }
.mm-meta strong { font-size: 16px; font-weight: 700; color: #fff; }
.mm-meta span   { font-size: 12px; color: rgba(255,255,255,0.45); margin-top: 2px; }

.img-modal-info        { padding: 16px 20px 20px; }
.img-modal-swiper {
  width: 100%;
  height: 320px;
  background: #000;
}
.img-modal-swiper .swiper-zoom-container {
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-modal-swiper .swiper-zoom-container img {
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
}
.modal-gradient {
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
}

/* เพิ่ม .img-modal ให้ทำงานเหมือน .img-modal-overlay */
.img-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.85);
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.img-modal.active {
  display: flex;
}
/* === Coverflow Portfolio === */
.coverflow-swiper {
  width: 100%;
  padding: 40px 0 60px;
}
.cf-slide {
  width: 280px;
  border-radius: 12px;
  overflow: hidden;
  background: #1a1a2e;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  transition: opacity 0.3s;
}

.cf-slide .cf-info {
  padding: 14px 16px 18px;
}

.cf-thumb {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}
.cf-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.cf-gradient {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
}
.cf-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 600;
}
.cf-tag.done { background: #22c55e; color: #fff; }
.cf-tag.wip  { background: #f59e0b; color: #fff; }

.cf-type    { font-size: 11px; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.cf-name    { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 4px; line-height: 1.4; }
.cf-loc     { font-size: 13px; color: rgba(255,255,255,0.5); margin-bottom: 12px; }
.cf-metarow { display: flex; gap: 16px; flex-wrap: wrap; }
.cf-meta    { display: flex; flex-direction: column; }
.cf-meta strong { font-size: 15px; font-weight: 700; color: #fff; }
.cf-meta span   { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 2px; }

/* === Lightbox === */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.85);
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.lightbox.active { display: flex; }
.lb-box {
  position: relative;
  background: #1a1a2e;
  border-radius: 12px;
  overflow: hidden;
  width: min(480px, 92vw);
  cursor: default;
  animation: modalIn 0.2s ease;
}
.lb-close {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 10;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-close:hover { background: rgba(0,0,0,0.85); }
.lb-box img {
  width: 100%;
  height: 280px;
  object-fit: cover;
}
.lb-gradient {
  width: 100%;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
}
.lb-info   { padding: 16px 20px 20px; }
.lb-type   { font-size: 11px; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.lb-name   { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.lb-loc    { font-size: 14px; color: rgba(255,255,255,0.5); margin-bottom: 12px; }