/* ============================================================
   assets/css/style.css — PME Modern UI
   Scroll-reveal · Glassmorphism · Micro-animations · Hover FX
   ============================================================ */

/* ========================= VARIABLES ========================= */
:root{
  --brand:#0b5f1f;
  --brand2:#0a7d1f;
  --accent:#31c24c;
  --accent-glow:rgba(49,194,76,.35);

  --soft:#f3fbf5;

  /* Gradient set (Navbar + Hero) */
  --bg-grad-left:#0b5f1f;
  --bg-grad-mid:#2f9950;
  --bg-grad-right:#eaf6ee;
  --pme-grad: linear-gradient(
    90deg,
    var(--bg-grad-left) 0%,
    var(--bg-grad-mid) 55%,
    var(--bg-grad-right) 100%
  );

  --text:#0f172a;
  --muted:#64748b;
  --border:rgba(15,23,42,.10);
  --shadow:0 14px 40px rgba(2,6,23,.06);

  /* Animation tokens */
  --reveal-duration:.7s;
  --reveal-ease:cubic-bezier(.22,1,.36,1);
  --hover-lift:-8px;
  --hover-duration:.35s;
  --stagger-base:80ms;
}

*{box-sizing:border-box;}

/* ========================= BASE ========================= */
body{
  font-family:"Prompt",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1100px 520px at 10% 0%, rgba(11,95,31,.07), transparent 55%),
    radial-gradient(1100px 520px at 100% 0%, rgba(49,194,76,.07), transparent 55%),
    linear-gradient(180deg, rgba(234,246,238,.55) 0%, #ffffff 42%);
  overflow-x:hidden;
}

/* ========================= LAYOUT HELPERS ========================= */
.section{padding:76px 0;}
.section-soft{background:var(--soft);}
.section-pad{padding:76px 0;}
.mini{font-size:.95rem;color:var(--muted);}
.tiny{font-size:.85rem;}
.rounded-2xl{border-radius:22px;}
.muted{color:var(--muted);}

/* ============================================================
   SCROLL-REVEAL ANIMATION SYSTEM
   ============================================================ */
[data-reveal]{
  opacity:0;
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
  will-change:opacity,transform;
}
[data-reveal="fade-up"]{transform:translateY(40px);}
[data-reveal="fade-down"]{transform:translateY(-40px);}
[data-reveal="fade-left"]{transform:translateX(50px);}
[data-reveal="fade-right"]{transform:translateX(-50px);}
[data-reveal="zoom-in"]{transform:scale(.88);}
[data-reveal="fade"]{transform:none;}

/* Revealed state */
[data-reveal].revealed{
  opacity:1;
  transform:translateY(0) translateX(0) scale(1);
}

/* Stagger children — set by JS via --stagger-i */
[data-stagger] > *{
  transition-delay:calc(var(--stagger-i, 0) * var(--stagger-base));
}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar{
  backdrop-filter:saturate(160%) blur(10px);
  box-shadow:0 8px 24px rgba(2,6,23,.06);
  transition:all .4s var(--reveal-ease);
}

.navbar-pme{
  background:var(--pme-grad);
  border-bottom:1px solid rgba(15,23,42,.08);
}

/* Scrolled state — glassmorphism + shrink */
.navbar-pme.navbar-scrolled{
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(180%) blur(18px);
  box-shadow:0 4px 30px rgba(2,6,23,.10);
  border-bottom:1px solid rgba(15,23,42,.06);
}
.navbar-pme.navbar-scrolled .nav-link{
  color:#0f172a!important;
}
.navbar-pme.navbar-scrolled .nav-link.active{
  color:var(--brand)!important;
}
.navbar-pme.navbar-scrolled .brand-name{
  color:#0f172a!important;
}

/* Nav link styling */
.navbar-pme .nav-link{
  color:#0f172a!important;
  font-weight:700;
  text-shadow:none;
  opacity:1;
  position:relative;
  transition:color .3s;
}

/* Underline slide animation */
.navbar-pme .nav-link::after{
  content:"";
  position:absolute;
  bottom:2px; left:50%; right:50%;
  height:2px;
  background:var(--accent);
  border-radius:2px;
  transition:left .3s var(--reveal-ease), right .3s var(--reveal-ease);
}
.navbar-pme .nav-link:hover::after,
.navbar-pme .nav-link.active::after{
  left:20%; right:20%;
}

.navbar-pme .nav-link.active{
  color:#06461a!important;
  text-decoration:none;
}

.navbar-pme .navbar-brand{
  color:#0f172a!important;
  font-weight:700;
  text-shadow:none;
  transition:transform .3s;
}
.navbar-pme .navbar-brand:hover{
  transform:scale(1.02);
}

.navbar-pme .navbar-toggler{
  border-color:rgba(15,23,42,.35);
}

/* Brand logo */
.brand-logo{
  height:42px;
  width:auto;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  background:#fff;
  padding:4px;
  transition:transform .4s var(--reveal-ease), box-shadow .4s;
}
.brand-logo:hover{
  transform:scale(1.08) rotate(-2deg);
  box-shadow:0 10px 28px rgba(0,0,0,.22);
}

.brand-name{
  font-size:.95rem;
  line-height:1.1;
  max-width:320px;
}

.navbar-pme .brand-name{
  max-width:360px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media (max-width:576px){
  .brand-name{display:none;}
  .brand-logo{height:38px;}
}
@media (max-width:991.98px){
  .navbar-pme .brand-name{max-width:220px;}
}

/* ============================================================
   CARDS — Modern Hover Effects
   ============================================================ */
.card{
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  border-radius:18px;
  transition:
    transform var(--hover-duration) var(--reveal-ease),
    box-shadow var(--hover-duration) var(--reveal-ease),
    border-color var(--hover-duration);
  position:relative;
  overflow:hidden;
}

.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg, rgba(49,194,76,.0) 0%, rgba(49,194,76,.0) 100%);
  transition:background .5s;
  pointer-events:none;
  z-index:0;
}

.card:hover{
  transform:translateY(var(--hover-lift));
  box-shadow:0 20px 50px rgba(2,6,23,.10), 0 0 0 1px rgba(49,194,76,.12);
  border-color:rgba(49,194,76,.25);
}
.card:hover::before{
  background:linear-gradient(135deg, rgba(49,194,76,.03) 0%, rgba(49,194,76,.06) 100%);
}

.card > .card-body{
  position:relative;
  z-index:1;
}

/* ============================================================
   BUTTONS — Micro-animations
   ============================================================ */
.btn-accent{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  font-weight:600;
  position:relative;
  overflow:hidden;
  transition:transform .25s, box-shadow .25s, filter .25s;
}
.btn-accent::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at var(--ripple-x,50%) var(--ripple-y,50%), rgba(255,255,255,.3) 0%, transparent 60%);
  opacity:0;
  transition:opacity .4s;
  pointer-events:none;
}
.btn-accent:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px var(--accent-glow);
  filter:brightness(1.05);
}
.btn-accent:active{
  transform:translateY(0);
}
/* Pulse animation for important CTAs */
.btn-pulse{
  animation:btnPulse 2.5s ease-in-out infinite;
}
@keyframes btnPulse{
  0%,100%{box-shadow:0 0 0 0 var(--accent-glow);}
  50%{box-shadow:0 0 0 12px rgba(49,194,76,0);}
}

.btn-outline-brand{
  border-color:rgba(11,95,31,.35);
  color:var(--brand);
  transition:all .3s;
}
.btn-outline-brand:hover{
  background:rgba(11,95,31,.08);
  border-color:rgba(11,95,31,.45);
  color:var(--brand);
  transform:translateY(-2px);
}

.btn-outline-dark{
  transition:all .3s;
}
.btn-outline-dark:hover{
  transform:translateY(-2px);
}

/* ============================================================
   ICONS / PILLS / BADGES
   ============================================================ */
.icon-pill{
  width:48px;height:48px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:14px;
  background:rgba(25,182,255,.10);
  color:var(--brand2);
  border:1px solid rgba(25,182,255,.25);
  transition:transform .4s var(--reveal-ease), background .3s, box-shadow .3s;
}
.icon-pill.sm{width:44px;height:44px;}

.card:hover .icon-pill,
.icon-pill:hover{
  transform:scale(1.12) rotate(-5deg);
  background:rgba(25,182,255,.16);
  box-shadow:0 4px 16px rgba(25,182,255,.15);
}

.badge-soft{
  background:rgba(11,95,31,.10);
  border:1px solid rgba(11,95,31,.18);
  color:rgba(15,23,42,.86);
  transition:all .3s;
}
.badge-soft:hover{
  background:rgba(11,95,31,.16);
  transform:translateY(-1px);
}

.pill{
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  border-radius:999px;
  padding:8px 12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.95rem;
  color:var(--text);
  transition:all .3s;
}
.pill:hover{
  border-color:rgba(49,194,76,.3);
  background:rgba(49,194,76,.04);
  transform:translateY(-2px);
}

.badge{
  transition:transform .25s, box-shadow .25s;
}
.badge:hover{
  transform:translateY(-1px) scale(1.04);
}

/* ============================================================
   PAGE HERO (Inner pages)
   ============================================================ */
.page-hero{
  background:
    radial-gradient(900px 520px at 12% 18%, rgba(49,194,76,.18), transparent 55%),
    radial-gradient(900px 520px at 88% 30%, rgba(11,95,31,.10), transparent 55%),
    var(--pme-grad);
  color:var(--text);
  position:relative;
  overflow:hidden;
  padding:52px 0 34px;
  border-bottom:1px solid rgba(15,23,42,.06);
}

/* Animated gradient overlay */
.page-hero::before{
  content:"";
  position:absolute;
  inset:-50%;
  width:200%; height:200%;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(49,194,76,.08), transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(11,95,31,.06), transparent 50%);
  animation:heroGradientShift 12s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes heroGradientShift{
  0%{transform:translate(0,0) rotate(0deg);}
  100%{transform:translate(-5%,3%) rotate(3deg);}
}

.page-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    var(--hero-overlay, linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.10))),
    var(--hero-img, none);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:1;
  pointer-events:none;
}

.page-hero > .container,
.page-hero > .container-fluid{
  position:relative;
  z-index:1;
}

.hero-wrap{
  max-width:1240px;
  margin:0 auto;
  padding-left:clamp(16px, 4vw, 64px);
  padding-right:clamp(16px, 4vw, 64px);
}

.page-hero + .section{padding-top:44px;}
.page-hero + .section.section-soft{padding-top:44px;}

/* Floating shapes decoration */
.hero-float-shape{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  opacity:.06;
  z-index:0;
}
.hero-float-shape.s1{
  width:300px; height:300px;
  background:var(--accent);
  top:-80px; right:-60px;
  animation:floatShape 8s ease-in-out infinite alternate;
}
.hero-float-shape.s2{
  width:180px; height:180px;
  background:var(--brand);
  bottom:-40px; left:10%;
  animation:floatShape 10s ease-in-out infinite alternate-reverse;
}
@keyframes floatShape{
  0%{transform:translate(0,0) scale(1);}
  100%{transform:translate(20px,-20px) scale(1.1);}
}

/* Divider */
.divider{height:1px;background:rgba(255,255,255,.12);}
.page-hero .divider{background:rgba(15,23,42,.12);}

.page-services .page-hero{
  min-height:350px;
  padding:88px 0 72px;
}
.page-services .page-hero .badge-soft{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(6,32,58,.10);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.page-services .page-hero h1,
.page-services .page-hero .display-5,
.page-services .page-hero .fw-bold{
  color:#06203a;
}
.page-services .page-hero p,
.page-services .page-hero .lead,
.page-services .page-hero .mini{
  color:rgba(6,32,58,.88);
}

/* ============================================================
   HOME HERO — BIG LOGO
   ============================================================ */
.hero-big-logo{
  background:var(--pme-grad);
  position:relative;
  overflow:hidden;
}

/* Animated gradient background */
.hero-big-logo::before{
  content:"";
  position:absolute;
  inset:-50%;
  width:200%; height:200%;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(49,194,76,.10), transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(11,95,31,.08), transparent 50%);
  animation:heroGradientShift 15s ease-in-out infinite alternate;
  pointer-events:none;
}

.hero-big-row{
  min-height:520px;
}

.hero-logo-side{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(18px, 4vw, 56px);
}

.hero-logo-xl{
  width:100%;
  max-width:720px;
  height:auto;
  opacity:.90;
  mix-blend-mode:screen;
  filter:brightness(1.08) contrast(1.06) drop-shadow(0 22px 48px rgba(0,0,0,.22));
  transform:translateZ(0);
  animation:heroLogoFloat 6s ease-in-out infinite alternate;
}
@keyframes heroLogoFloat{
  0%{transform:translateY(0);}
  100%{transform:translateY(-12px);}
}

@supports not (mix-blend-mode:screen){
  .hero-logo-xl{
    opacity:.92;
    mix-blend-mode:normal;
    filter:brightness(1.15) contrast(1.08) drop-shadow(0 22px 48px rgba(0,0,0,.20));
  }
}
.hero-text-side{
  padding:clamp(22px, 4vw, 64px);
}

.hero-text-side h1{
  font-size:clamp(2rem, 3.2vw, 3.2rem);
  font-weight:800;
  line-height:1.15;
  color:#0f172a;
  margin:0 0 12px;
}

.hero-text-side p{
  font-size:clamp(1rem, 1.2vw, 1.15rem);
  color:#475569;
  max-width:560px;
  margin:0;
}

.hero-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:14px;
}

.hero-tags span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#e6f4ea;
  color:#166534;
  padding:6px 14px;
  border-radius:999px;
  font-size:.85rem;
  border:1px solid rgba(22,101,52,.18);
  transition:transform .3s, box-shadow .3s;
  animation:tagFadeIn .6s var(--reveal-ease) both;
}
.hero-tags span:nth-child(1){animation-delay:.1s;}
.hero-tags span:nth-child(2){animation-delay:.2s;}
.hero-tags span:nth-child(3){animation-delay:.3s;}
.hero-tags span:nth-child(4){animation-delay:.4s;}

.hero-tags span:hover{
  transform:translateY(-3px) scale(1.04);
  box-shadow:0 6px 16px rgba(22,101,52,.12);
}

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

@media (max-width:991.98px){
  .hero-big-row{min-height:auto;}
  .hero-text-side{text-align:center;}
  .hero-text-side p{margin:0 auto;}
  .hero-tags{justify-content:center;}
}

/* ============================================================
   IMAGES
   ============================================================ */
.img-cover{width:100%;height:100%;object-fit:cover;display:block;}

.service-img{
  border-radius:18px;
  border:1px solid rgba(15,23,42,.08);
  background:#e2e8f0;
  overflow:hidden;
}
.service-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--reveal-ease);
}
.card:hover .service-img img,
.service-img:hover img{
  transform:scale(1.06);
}

.map-wrap{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.08);
  background:#e2e8f0;
}

/* ============================================================
   FORMS — Focus Animations
   ============================================================ */
.form-control, .form-select{
  border-radius:14px;
  padding:.8rem .9rem;
  border-color:rgba(15,23,42,.14);
  transition:border-color .3s, box-shadow .3s, transform .2s;
}
.form-control:focus, .form-select:focus{
  box-shadow:0 0 0 .25rem rgba(49,194,76,.18), 0 4px 16px rgba(49,194,76,.08);
  border-color:rgba(11,95,31,.50);
  transform:translateY(-1px);
}

/* Floating label effect */
.form-label{
  transition:color .3s;
}
.form-control:focus ~ .form-label,
.form-select:focus ~ .form-label{
  color:var(--brand);
}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  position:relative;
  overflow:hidden;
}

/* Animated gradient top border */
footer::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg, var(--brand), var(--accent), var(--brand2), var(--accent));
  background-size:300% 100%;
  animation:footerGradient 6s linear infinite;
}
@keyframes footerGradient{
  0%{background-position:0% 0%;}
  100%{background-position:300% 0%;}
}

.link-muted{
  color:#94a3b8;
  text-decoration:none;
  position:relative;
  transition:color .3s;
}
.link-muted::after{
  content:"";
  position:absolute;
  bottom:-2px; left:0;
  width:0; height:1px;
  background:#e2e8f0;
  transition:width .3s var(--reveal-ease);
}
.link-muted:hover{
  color:#e2e8f0;
}
.link-muted:hover::after{
  width:100%;
}

/* ============================================================
   PROJECT FILTER CHIPS
   ============================================================ */
.filter-chip{
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
  user-select:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:500;
  transition:all .3s var(--reveal-ease);
}
.filter-chip:hover{
  border-color:rgba(49,194,76,.3);
  background:rgba(49,194,76,.06);
  transform:translateY(-2px);
}
.filter-chip.active{
  background:rgba(49,194,76,.14);
  border-color:rgba(11,95,31,.30);
  color:var(--brand);
  transform:scale(1.04);
}

/* Filter animation for project cards */
.project-card{
  transition:opacity .5s, transform .5s var(--reveal-ease);
}
.project-card.filter-hidden{
  opacity:0;
  transform:scale(.9);
  pointer-events:none;
  position:absolute;
  width:0; height:0;
  overflow:hidden;
}

/* ============================================================
   TIMELINE — Animated
   ============================================================ */
.timeline{position:relative;padding-left:22px;}
.timeline::before{
  content:"";
  position:absolute;left:6px;top:6px;bottom:6px;
  width:2px;
  background:rgba(2,6,23,.10);
  transform-origin:top;
  animation:timelineGrow 1s var(--reveal-ease) both;
}
@keyframes timelineGrow{
  from{transform:scaleY(0);}
  to{transform:scaleY(1);}
}

.t-item{
  position:relative;
  padding:0 0 18px 0;
  opacity:0;
  transform:translateX(-20px);
  animation:timelineItemIn .6s var(--reveal-ease) both;
}
.t-item:nth-child(1){animation-delay:.3s;}
.t-item:nth-child(2){animation-delay:.5s;}
.t-item:nth-child(3){animation-delay:.7s;}
.t-item:nth-child(4){animation-delay:.9s;}

@keyframes timelineItemIn{
  to{opacity:1;transform:translateX(0);}
}

.t-item::before{
  content:"";
  position:absolute;left:-20px;top:6px;
  width:14px;height:14px;border-radius:50%;
  background:rgba(49,194,76,.25);
  border:2px solid rgba(11,95,31,.55);
  transition:transform .3s, background .3s;
}
.t-item:hover::before{
  transform:scale(1.3);
  background:rgba(49,194,76,.45);
}
/* ============================================================
   COUNTER ANIMATION
   ============================================================ */
.counter-num{
  display:inline-block;
  font-weight:800;
  font-size:2.2rem;
  color:var(--brand);
  line-height:1;
}

/* ============================================================
   SECTION DECORATIONS
   ============================================================ */
.section-decorated{
  position:relative;
}
.section-decorated::before{
  content:"";
  position:absolute;
  top:-60px; right:-100px;
  width:300px; height:300px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(49,194,76,.06), transparent 60%);
  pointer-events:none;
}

/* ============================================================
   CTA CARD — Gradient Animation
   ============================================================ */
.cta-gradient-card{
  background:linear-gradient(135deg, #0b5f1f 0%, #0a7d1f 60%, #31c24c 100%);
  background-size:200% 200%;
  animation:ctaGradient 6s ease infinite;
  color:#fff;
}
@keyframes ctaGradient{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}

/* ============================================================
   TILT CARD (3D effect — via JS)
   ============================================================ */
.tilt-card{
  transform-style:preserve-3d;
  perspective:1000px;
}
.tilt-card .card-body{
  transform:translateZ(20px);
}

/* ============================================================
   ANIMATED GRADIENT TEXT
   ============================================================ */
.gradient-text{
  background:linear-gradient(135deg, var(--brand), var(--accent), var(--brand2));
  background-size:200% 200%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:gradientText 4s ease infinite;
}
@keyframes gradientText{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}

/* ============================================================
   SMOOTH SECTION TRANSITIONS
   ============================================================ */
.section + .section-soft,
.section-soft + .section{
  border-top:0;
}

/* ============================================================
   RESPONSIVE ANIMATION REDUCTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  [data-reveal]{
    opacity:1!important;
    transform:none!important;
  }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print{
  .navbar, footer, .btn, .badge, .divider{display:none!important;}
  .section{padding:24px 0;}
  [data-reveal]{opacity:1!important;transform:none!important;}
}

/* =========================
   HOME HERO SLIDER (SIMPLE + SAME FRAME SIZE)
   ========================= */

.hero-home-slider{
  width: 100%;
  padding: 0;
  margin: 0;
}

/* กรอบหลักให้ทุกสไลด์ขนาดเท่ากัน */
.hero-frame{
  position: relative;
  width: 100%;
  height: 520px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.9);
  background: #000;
}

/* บังคับความสูงให้ carousel เท่ากับกรอบ */
.hero-frame .hero-carousel,
.hero-frame .carousel-inner,
.hero-frame .carousel-item{
  height: 100%;
}

/* บังคับรูปทุกใบให้เต็มกรอบเท่ากันเสมอ */
.hero-frame .hero-slide-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ปิด overlay สีเขียวเดิมถ้ามี */
.hero-frame .hero-carousel::after{
  display: none !important;
}

/* overlay โลโก้ + ชื่อบริษัท */
.hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.hero-overlay-inner{
  position: absolute;
  top: 16px;
  left: 22px;
}

/* โลโก้ + ชื่อบริษัท แบบเรียบ */
.hero-overlay-logo{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(2px);
}

.hero-overlay-logo img{
  height: 54px;
  width: auto;
  display: block;
}

.hero-company-name{
  margin: 0;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .6px;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

/* ปุ่มเลื่อนให้เห็นชัด */
.hero-frame .carousel-control-prev,
.hero-frame .carousel-control-next{
  z-index: 6;
  width: 12%;
  opacity: .85;
}

/* Responsive */
@media (max-width: 991.98px){
  .hero-frame{ height: 320px; }
  .hero-overlay-inner{ top: 10px; left: 12px; }
  .hero-overlay-logo img{ height: 42px; }
  .hero-company-name{ font-size: 13px; }
}

.about-vm-card{
  border:1px solid #d9e6d9;
  border-radius:28px;
  background:#fbfdfb;
  box-shadow:none;
  overflow:hidden;
}

.about-vm-card:hover{
  transform:none;
  box-shadow:none;
  border-color:#d9e6d9;
}

.about-vm-card .card-body{
  padding:32px 30px;
  min-height:280px;
}

.about-vm-card h4{
  font-size:26px;
  font-weight:800;
  color:#1f2937;
  margin-bottom:18px !important;
}

.about-vm-card .mini,
.about-vm-card ul li{
  font-size:15px;
  line-height:1.9;
  color:#64748b;
}

.about-vm-card .icon-pill{
  width:56px;
  height:56px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#dff3ff;
  border:1px solid #a9dbf8;
  color:#16a34a;
  font-size:22px;
}

.about-vm-card:hover .icon-pill{
  transform:none;
  box-shadow:none;
}
/* =========================================================
   TOOLS HERO ONLY
   ใช้เฉพาะหน้า tools ไม่กระทบหน้าอื่น
========================================================= */

.page-hero.hero-tools{
  position: relative;
  overflow: hidden;
  min-height: 460px;
  display: flex;
  align-items: center;
  background-image:
    linear-gradient(90deg, rgba(9, 97, 44, 0.72) 0%, rgba(9, 97, 44, 0.52) 45%, rgba(9, 97, 44, 0.12) 100%),
    url("/Demo_updated/Demotest/Pictures/4.tools/BG.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.page-hero.hero-tools::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(255,255,255,0.02);
}

.page-hero.hero-tools .hero-float-shape{
  display: none;
}

.page-hero.hero-tools .container-fluid,
.page-hero.hero-tools .hero-wrap,
.page-hero.hero-tools .hero-row,
.page-hero.hero-tools .col-lg-10{
  position: relative;
  z-index: 2;
}

.page-hero.hero-tools .hero-wrap{
  width: 100%;
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

.page-hero.hero-tools .hero-row{
  min-height: 300px;
}

.page-hero.hero-tools .badge-soft{
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(4px);
}

.page-hero.hero-tools h1{
  color: #0f172a;
  font-weight: 700;
}

.page-hero.hero-tools .lead{
  color: rgba(15,23,42,.82) !important;
  max-width: 980px;
}
/* Contact hero: image only */
body.page-contact .page-hero{
  min-height: 430px;
  background-image: var(--hero-img) !important;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

body.page-contact .page-hero::before,
body.page-contact .page-hero::after,
body.page-contact .hero-float-shape{
  display: none !important;
}

body.page-contact .page-hero .hero-wrap{
  min-height: 430px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.page-contact .page-hero .hero-row{
  min-height: 430px;
}

body.page-contact .page-hero .col-lg-10{
  display: none !important;
}
/* =====================================================
   CAREERS HERO : IMAGE ONLY
   เอาข้อความ / badge / overlay / ลายพื้นหลังออกทั้งหมด
===================================================== */

body.page-careers .page-hero{
  --hero-overlay: none !important;
  position: relative !important;
  min-height: 430px !important;
  padding: 0 !important;
  background: none !important;
  background-image: var(--hero-img) !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  overflow: hidden !important;
}

/* ปิดทุกชั้นที่เป็น overlay / ลายตกแต่ง */
body.page-careers .page-hero::before,
body.page-careers .page-hero::after,
body.page-careers .page-hero .hero-float-shape,
body.page-careers .page-hero .s1,
body.page-careers .page-hero .s2{
  display: none !important;
  content: none !important;
  background: none !important;
  opacity: 0 !important;
}

/* ยืดพื้นที่ hero ให้เหลือแต่รูป */
body.page-careers .page-hero .container-fluid{
  padding: 0 !important;
}

body.page-careers .page-hero .hero-wrap{
  min-height: 430px !important;
  padding: 0 !important;
}

body.page-careers .page-hero .hero-row{
  min-height: 430px !important;
  margin: 0 !important;
}

/* ซ่อน text ทั้งก้อน */
body.page-careers .page-hero .col-lg-10{
  display: none !important;
}
/* =====================================================
   CAREERS HERO WITH FLOATING TITLE
===================================================== */

body.page-careers .page-hero{
  --hero-overlay: none !important;
  position: relative !important;
  min-height: 430px !important;
  padding: 0 !important;
  background: none !important;
  background-image: var(--hero-img) !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  overflow: hidden !important;
}

body.page-careers .page-hero::before,
body.page-careers .page-hero::after,
body.page-careers .page-hero .hero-float-shape,
body.page-careers .page-hero .s1,
body.page-careers .page-hero .s2{
  display: none !important;
  content: none !important;
  background: none !important;
  opacity: 0 !important;
}

body.page-careers .page-hero .container-fluid{
  padding: 0 !important;
}

body.page-careers .page-hero .hero-wrap{
  min-height: 430px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}

body.page-careers .page-hero .hero-row{
  min-height: 430px !important;
  margin: 0 !important;
  width: 100% !important;
  align-items: center !important;
}

body.page-careers .page-hero .col-lg-10{
  display: block !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding-left: 7% !important;
  padding-right: 7% !important;
}

/* ซ่อน badge และ desc ให้เหลือแต่ title */
body.page-careers .page-hero .badge,
body.page-careers .page-hero .badge-soft,
body.page-careers .page-hero .lead{
  display: none !important;
}

/* title ลอยบนรูป */
body.page-careers .page-hero h1{
  display: inline-block !important;
  margin: 0 !important;
  padding: 14px 28px !important;
  border-radius: 18px !important;
  color: #ffffff !important;
  font-size: clamp(2rem, 4vw, 4rem) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.5px !important;
  background: linear-gradient(135deg, rgba(10,25,47,0.55), rgba(24,119,242,0.28)) !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 12px 35px rgba(0,0,0,0.20) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  animation: careersHeroPop 1s cubic-bezier(.22,1,.36,1) both,
             careersHeroFloat 3.2s ease-in-out 1.1s infinite !important;
}

/* เด้งเข้ามาตอนโหลด */
@keyframes careersHeroPop{
  0%{
    opacity: 0;
    transform: translateY(30px) scale(0.92);
    filter: blur(8px);
  }
  60%{
    opacity: 1;
    transform: translateY(-6px) scale(1.02);
    filter: blur(0);
  }
  100%{
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* ลอยเบา ๆ */
@keyframes careersHeroFloat{
  0%,100%{
    transform: translateY(0);
  }
  50%{
    transform: translateY(-6px);
  }
}
/* =================================
   CONTACT HERO WITH TITLE
================================= */

body.page-contact .page-hero{
  --hero-overlay: none !important;
  position: relative !important;
  min-height: 430px !important;
  padding: 0 !important;
  background: none !important;
  background-image: var(--hero-img) !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  overflow: hidden !important;
}

body.page-contact .page-hero::before,
body.page-contact .page-hero::after,
body.page-contact .page-hero .hero-float-shape,
body.page-contact .page-hero .s1,
body.page-contact .page-hero .s2{
  display: none !important;
  content: none !important;
  background: none !important;
  opacity: 0 !important;
}

body.page-contact .page-hero .container-fluid{
  padding: 0 !important;
}

body.page-contact .page-hero .hero-wrap{
  min-height: 430px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}

body.page-contact .page-hero .hero-row{
  min-height: 430px !important;
  margin: 0 !important;
  width: 100% !important;
  align-items: center !important;
}

body.page-contact .page-hero .col-lg-10{
  display: block !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding-left: 7% !important;
  padding-right: 7% !important;
}

/* ซ่อน badge และ desc ให้เหลือแต่ title */
body.page-contact .page-hero .badge,
body.page-contact .page-hero .badge-soft,
body.page-contact .page-hero .lead{
  display: none !important;
}

/* title ลอยบนรูป */
body.page-contact .page-hero h1{
  display: inline-block !important;
  margin: 0 !important;
  padding: 14px 28px !important;
  border-radius: 18px !important;
  color: #ffffff !important;
  font-size: clamp(2rem, 4vw, 4rem) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.5px !important;
  background: rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 12px 35px rgba(0,0,0,0.20) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  animation: contactHeroPop 1s cubic-bezier(.22,1,.36,1) both,
             contactHeroFloat 3.2s ease-in-out 1.1s infinite !important;
}

@keyframes contactHeroPop{
  0%{
    opacity: 0;
    transform: translateY(30px) scale(0.92);
    filter: blur(8px);
  }
  60%{
    opacity: 1;
    transform: translateY(-6px) scale(1.02);
    filter: blur(0);
  }
  100%{
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes contactHeroFloat{
  0%,100%{
    transform: translateY(0);
  }
  50%{
    transform: translateY(-6px);
  }
}
/* =================================
   TOOLS HERO : IMAGE ONLY + TITLE
================================= */

body.page-tools .page-hero.hero-tools{
  --hero-overlay: none !important;
  position: relative !important;
  height: 520px !important;
  min-height: 520px !important;
  padding: 0 !important;
  background: none !important;
  background-image: var(--hero-img) !important;
  background-position: center center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  overflow: hidden !important;
}

body.page-tools .page-hero.hero-tools::before,
body.page-tools .page-hero.hero-tools::after,
body.page-tools .page-hero.hero-tools .hero-float-shape,
body.page-tools .page-hero.hero-tools .s1,
body.page-tools .page-hero.hero-tools .s2{
  display: none !important;
  content: none !important;
  background: none !important;
  opacity: 0 !important;
}

body.page-tools .page-hero.hero-tools .container-fluid{
  padding: 0 !important;
}

body.page-tools .page-hero.hero-tools .hero-wrap{
  height: 520px !important;
  min-height: 520px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}

body.page-tools .page-hero.hero-tools .hero-row{
  height: 520px !important;
  min-height: 520px !important;
  margin: 0 !important;
  width: 100% !important;
  align-items: center !important;
}

body.page-tools .page-hero.hero-tools .col-lg-10{
  display: block !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding-left: 7% !important;
  padding-right: 7% !important;
}

/* ซ่อน badge และ desc ให้เหลือแค่ title */
body.page-tools .page-hero.hero-tools .badge,
body.page-tools .page-hero.hero-tools .badge-soft,
body.page-tools .page-hero.hero-tools .lead{
  display: none !important;
}

/* title ลอยบนรูป */
body.page-tools .page-hero.hero-tools h1{
  display: inline-block !important;
  margin: 0 !important;
  padding: 14px 28px !important;
  border-radius: 18px !important;
  color: #ffffff !important;
  font-size: clamp(2rem, 4vw, 4rem) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.5px !important;
  background: rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 12px 35px rgba(0,0,0,0.20) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  animation: toolsHeroPop 1s cubic-bezier(.22,1,.36,1) both,
             toolsHeroFloat 3.2s ease-in-out 1.1s infinite !important;
}

@keyframes toolsHeroPop{
  0%{
    opacity: 0;
    transform: translateY(30px) scale(0.92);
    filter: blur(8px);
  }
  60%{
    opacity: 1;
    transform: translateY(-6px) scale(1.02);
    filter: blur(0);
  }
  100%{
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes toolsHeroFloat{
  0%,100%{
    transform: translateY(0);
  }
  50%{
    transform: translateY(-6px);
  }
}

/* =========================================
   SERVICES HERO - REMOVE GREEN OVERLAY
========================================= */

body.page-services .page-hero{
  --hero-overlay: none !important;
  height: 520px !important;
  min-height: 520px !important;
  padding: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
}

body.page-services .page-hero .hero-wrap{
  height: 520px !important;
  min-height: 520px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;

  background-image: var(--hero-img) !important;
  background-color: transparent !important;
  background-blend-mode: normal !important;
  background-position: center center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
}

body.page-services .page-hero .hero-row{
  height: 520px !important;
  min-height: 520px !important;
  margin: 0 !important;
  width: 100% !important;
  align-items: center !important;
}

body.page-services .page-hero .hero-row{
  min-height: 430px !important;
  margin: 0 !important;
  width: 100% !important;
  align-items: center !important;
}

body.page-services .page-hero .col-lg-10{
  display: block !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding-left: 7% !important;
  padding-right: 7% !important;
}

/* ซ่อน badge และคำอธิบาย */
body.page-services .page-hero .badge,
body.page-services .page-hero .badge-soft,
body.page-services .page-hero .lead{
  display: none !important;
}

/* เหลือเฉพาะ title */
body.page-services .page-hero h1{
  display: inline-block !important;
  margin: 0 !important;
  padding: 14px 28px !important;
  border-radius: 18px !important;
  color: #ffffff !important;
  font-size: clamp(2rem, 4vw, 4rem) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  background: rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: 0 12px 35px rgba(0,0,0,0.20) !important;
  animation: servicesHeroPop 1s cubic-bezier(.22,1,.36,1) both,
             servicesHeroFloat 3.2s ease-in-out 1.1s infinite !important;
}

@keyframes servicesHeroPop{
  0%{
    opacity: 0;
    transform: translateY(30px) scale(0.92);
    filter: blur(8px);
  }
  60%{
    opacity: 1;
    transform: translateY(-6px) scale(1.02);
    filter: blur(0);
  }
  100%{
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes servicesHeroFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}
.hero-home-slider{
    width: 100%;
    padding: 0;
    margin: 0;
}

.hero-frame{
    position: relative;
    width: 100%;
    height: 520px; /* คงขนาดเดิม */
    overflow: hidden;
    border: 2px solid rgba(255,255,255,.9);
    background: #000;
}

.hero-carousel,
.hero-carousel .carousel-inner,
.hero-carousel .carousel-item{
    width: 100%;
    height: 100%;
}

.hero-slide-img{
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important; /* เต็มกรอบแบบยืด */
    object-position: center;
    display: block;
}

.hero-overlay{
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}

.hero-overlay-inner{
    position: absolute;
    top: 16px;
    left: 22px;
    padding: 0;
    width: auto;
}

.hero-overlay-logo{
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(0,0,0,.25);
    backdrop-filter: blur(2px);
}

.hero-overlay-logo img{
    height: 54px;
    width: auto;
    display: block;
    object-fit: contain;
    background: transparent;
    border-radius: 0;
    padding: 0;
}

.hero-company-name{
    margin: 0;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .6px;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
/* =================================
   CONTACT HERO
================================= */

body.page-contact .page-hero{
  --hero-overlay: none !important;
  position: relative !important;
  height: 520px !important;
  min-height: 520px !important;
  padding: 0 !important;
  background: none !important;
  background-image: var(--hero-img) !important;
  background-position: center center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  overflow: hidden !important;
}

body.page-contact .page-hero::before,
body.page-contact .page-hero::after,
body.page-contact .page-hero .hero-float-shape,
body.page-contact .page-hero .s1,
body.page-contact .page-hero .s2{
  display: none !important;
  content: none !important;
  background: none !important;
  opacity: 0 !important;
}

body.page-contact .page-hero .container-fluid{
  padding: 0 !important;
}

body.page-contact .page-hero .hero-wrap{
  height: 520px !important;
  min-height: 520px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}

body.page-contact .page-hero .hero-row{
  height: 520px !important;
  min-height: 520px !important;
  margin: 0 !important;
  width: 100% !important;
  align-items: center !important;
}

body.page-contact .page-hero .col-lg-10{
  display: block !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding-left: 7% !important;
  padding-right: 7% !important;
}
/* =================================
   CAREERS HERO
================================= */

body.page-careers .page-hero{
  --hero-overlay: none !important;
  position: relative !important;
  height: 520px !important;
  min-height: 520px !important;
  padding: 0 !important;
  background: none !important;
  background-image: var(--hero-img) !important;
  background-position: center center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  overflow: hidden !important;
}

body.page-careers .page-hero::before,
body.page-careers .page-hero::after,
body.page-careers .page-hero .hero-float-shape,
body.page-careers .page-hero .s1,
body.page-careers .page-hero .s2{
  display: none !important;
  content: none !important;
  background: none !important;
  opacity: 0 !important;
}

body.page-careers .page-hero .container-fluid{
  padding: 0 !important;
}

body.page-careers .page-hero .hero-wrap{
  height: 520px !important;
  min-height: 520px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}

body.page-careers .page-hero .hero-row{
  height: 520px !important;
  min-height: 520px !important;
  margin: 0 !important;
  width: 100% !important;
  align-items: center !important;
}

body.page-careers .page-hero .col-lg-10{
  display: block !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding-left: 7% !important;
  padding-right: 7% !important;
}