/* V86 10/10 All Pages Polish
   ใช้ทับ V71-V85 เพื่อปรับทุกหน้าให้ดูเป็นเว็บบริการระดับโปร รองรับมือถือ
*/
:root{
  --v86-navy:#061a32;
  --v86-navy2:#082a50;
  --v86-blue:#0d84f0;
  --v86-sky:#45beff;
  --v86-soft:#f4f8fc;
  --v86-text:#102033;
  --v86-muted:#607286;
  --v86-line:#dce7f2;
  --v86-white:#fff;
  --v86-shadow:0 24px 70px rgba(7,27,53,.14);
  --v86-radius:24px;
  --v86-container:min(1180px,calc(100% - 32px));
}

html{scroll-behavior:smooth}
body{
  background:linear-gradient(180deg,#f7fbff 0%,#f3f7fb 45%,#fff 100%)!important;
  color:var(--v86-text)!important;
  text-rendering:geometricPrecision;
}
img{max-width:100%;height:auto}
a{transition:.18s ease}

/* Header + nav */
.v71-topbar{
  min-height:44px!important;
  background:linear-gradient(90deg,#031326,#082a50,#031326)!important;
  font-weight:1000!important;
  letter-spacing:.02em!important;
  box-shadow:inset 0 -1px rgba(255,255,255,.08)!important;
}
.v71-header{
  background:rgba(6,26,50,.94)!important;
  backdrop-filter:blur(14px)!important;
  box-shadow:0 18px 50px rgba(0,12,30,.25)!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
}
.v71-header-inner{
  width:var(--v86-container)!important;
  min-height:112px!important;
  padding:18px 0!important;
}
.v71-brand a{
  gap:14px!important;
}
.v71-brand strong{
  color:#fff!important;
  font-size:clamp(32px,2.8vw,48px)!important;
  letter-spacing:-.06em!important;
  line-height:1!important;
}
.v71-brand small{
  color:rgba(255,255,255,.78)!important;
  font-weight:900!important;
  font-size:14px!important;
}
.v71-nav ul{
  gap:12px!important;
}
.v71-nav a{
  border-radius:18px!important;
  padding:15px 18px!important;
  color:#fff!important;
  font-weight:1000!important;
  letter-spacing:-.01em!important;
  border:1px solid transparent!important;
}
.v71-nav a:hover,
.v71-nav a.active{
  background:rgba(255,255,255,.12)!important;
  border-color:rgba(255,255,255,.18)!important;
  box-shadow:inset 0 0 0 1px rgba(69,190,255,.10),0 12px 34px rgba(0,0,0,.16)!important;
}
.v71-nav li:last-child a{
  background:linear-gradient(135deg,var(--v86-blue),var(--v86-sky))!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.18)!important;
  box-shadow:0 16px 38px rgba(13,132,240,.32)!important;
}

/* Home hero */
.v71-home-hero{
  min-height:760px!important;
  background:#061a32!important;
}
.v71-home-hero:before{
  opacity:1!important;
  background-image:
    linear-gradient(90deg,rgba(3,12,24,.88) 0%,rgba(3,12,24,.66) 32%,rgba(3,12,24,.20) 60%,rgba(3,12,24,.45) 100%),
    url("/assets/img/hero-crane.webp?v=86"),
    url("/assets/img/hero.jpg?v=86")!important;
  background-size:cover!important;
  background-position:center right!important;
  filter:saturate(1.16) contrast(1.08) brightness(1.08)!important;
}
.v71-home-hero:after{
  opacity:.33!important;
  background:
    radial-gradient(circle at 68% 26%,rgba(69,190,255,.18),transparent 30%),
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px)!important;
  background-size:auto,46px 46px,46px 46px!important;
}
.v71-home-hero-inner{
  width:var(--v86-container)!important;
  min-height:760px!important;
  padding:78px 0 128px!important;
  gap:64px!important;
  align-items:center!important;
}
.v71-hero-copy{
  max-width:650px!important;
  padding:42px 44px!important;
  border-radius:32px!important;
  background:linear-gradient(180deg,rgba(8,31,58,.86),rgba(5,18,35,.82))!important;
  border:1px solid rgba(111,199,255,.30)!important;
  border-left:7px solid var(--v86-sky)!important;
  box-shadow:0 34px 90px rgba(0,10,30,.42)!important;
}
.v71-kicker{
  padding:10px 16px!important;
  border-radius:999px!important;
  background:rgba(8,50,86,.78)!important;
  border:1px solid rgba(91,196,255,.42)!important;
  color:#eaf8ff!important;
  font-size:14px!important;
}
.v71-home-hero h1{
  font-size:clamp(46px,5vw,82px)!important;
  line-height:1.05!important;
  letter-spacing:-.065em!important;
  margin:22px 0 22px!important;
  text-wrap:balance;
}
.v71-home-hero h1:after{
  width:108px!important;
  height:7px!important;
  background:linear-gradient(90deg,var(--v86-blue),var(--v86-sky))!important;
}
.v71-home-hero p{
  font-size:18px!important;
  line-height:1.85!important;
  color:rgba(255,255,255,.92)!important;
}
.v71-actions{
  gap:14px!important;
  margin-top:26px!important;
}
.v71-btn{
  min-height:58px!important;
  border-radius:16px!important;
  padding:16px 24px!important;
  font-weight:1000!important;
  box-shadow:0 18px 38px rgba(13,132,240,.28)!important;
}
.v71-btn.secondary{
  background:rgba(255,255,255,.10)!important;
  border:1px solid rgba(255,255,255,.24)!important;
  box-shadow:none!important;
}
.v71-right-card{
  max-width:445px!important;
  border-radius:32px!important;
  background:rgba(255,255,255,.94)!important;
  backdrop-filter:blur(10px)!important;
  box-shadow:0 34px 95px rgba(0,10,30,.34)!important;
  border:1px solid rgba(255,255,255,.60)!important;
}
.v71-right-card:before{
  height:8px!important;
  background:linear-gradient(90deg,var(--v86-blue),var(--v86-sky))!important;
}
.v71-right-body{
  padding:34px!important;
}
.v71-right-card h2{
  font-size:clamp(28px,2.25vw,38px)!important;
  line-height:1.22!important;
  letter-spacing:-.045em!important;
}
.v71-right-card p{
  color:#50657c!important;
  font-size:16px!important;
  line-height:1.75!important;
}
.v71-mini-list div{
  font-weight:900!important;
}
.v71-service-strip{
  margin-top:-96px!important;
}
.v71-strip-box{
  width:var(--v86-container)!important;
  gap:18px!important;
}
.v71-strip-item{
  border-radius:24px!important;
  background:linear-gradient(180deg,rgba(7,31,58,.96),rgba(4,18,36,.96))!important;
  border:1px solid rgba(86,184,255,.30)!important;
  box-shadow:0 26px 65px rgba(0,12,35,.28)!important;
}
.v71-strip-item:hover{
  transform:translateY(-4px);
  border-color:rgba(86,184,255,.56)!important;
}
.v71-icon{
  background:rgba(69,190,255,.12)!important;
  border-color:rgba(86,184,255,.35)!important;
  color:#55c5ff!important;
}

/* Universal sections */
.v71-container,
.v81-container,
.a85-container{
  width:var(--v86-container)!important;
}
.v71-section,
.v81-section,
.a85-section{
  padding:82px 0!important;
}
.v71-section h2,
.v81-head h2,
.a85-head h2{
  color:var(--v86-navy)!important;
  letter-spacing:-.055em!important;
  text-wrap:balance;
}
.v71-card,
.v71-content-card,
.v81-card,
.v81-content-card,
.v81-side-card,
.v81-area-card,
.a85-card,
.a85-content,
.a85-side,
.a85-post,
.v71-archive-card,
.v71-post-card,
.v71-page-card{
  border-radius:var(--v86-radius)!important;
  border:1px solid var(--v86-line)!important;
  background:#fff!important;
  box-shadow:var(--v86-shadow)!important;
}
.v71-card:hover,
.v81-area-card:hover,
.a85-card:hover,
.v71-archive-card:hover,
.v71-post-card:hover{
  transform:translateY(-4px);
  box-shadow:0 30px 80px rgba(7,27,53,.18)!important;
  border-color:#c7def2!important;
}
.v71-card h3,
.v71-archive-card h2,
.v71-post-card h2,
.v81-area-card h3,
.a85-card h3,
.a85-post h3{
  color:var(--v86-navy)!important;
  letter-spacing:-.03em!important;
}
.v71-card p,
.v71-content-card p,
.v81-content-card p,
.v81-content-card li,
.a85-content p,
.a85-content li,
.a85-card p,
.a85-post p{
  color:#2b3e53!important;
  line-height:1.85!important;
}

/* Page hero / articles / post */
.v71-page-hero,
.v81-area-hero,
.a85-hero{
  background:#061a32!important;
  min-height:420px!important;
}
.v71-page-hero:before,
.v81-area-hero:before,
.a85-hero:before{
  background-image:
    linear-gradient(95deg,rgba(4,17,33,.94),rgba(4,17,33,.74),rgba(4,17,33,.30)),
    url("/assets/img/hero-crane.webp?v=86"),
    url("/assets/img/hero.jpg?v=86")!important;
  background-size:cover!important;
  background-position:center right!important;
}
.v71-page-hero h1,
.v81-hero-card h1,
.a85-hero-card h1{
  letter-spacing:-.055em!important;
  text-wrap:balance;
}
.v71-archive-grid,
.v71-post-grid,
.v81-post-grid,
.a85-posts{
  gap:22px!important;
}
.v71-archive-card img,
.v71-post-card img,
.v81-post-card img,
.a85-post img{
  border-radius:18px!important;
  object-fit:cover!important;
  aspect-ratio:16/10!important;
  background:#edf3f9!important;
}
.v71-post-content,
.v71-page-content,
.v71-content-card,
.a85-content,
.v81-content-card{
  font-size:17px!important;
}
.v71-post-content h2,
.v71-post-content h3,
.v71-page-content h2,
.v71-page-content h3,
.a85-content h2,
.a85-content h3{
  color:var(--v86-navy)!important;
  letter-spacing:-.035em!important;
  margin-top:1.4em!important;
}
.v71-post-content a,
.v71-page-content a,
.a85-content a{
  color:var(--v86-blue)!important;
  font-weight:900!important;
}

/* Area pages */
.a85-grid,
.v81-area-grid{
  gap:18px!important;
}
.a85-province{
  padding:16px 22px!important;
  border-radius:18px!important;
  background:linear-gradient(90deg,#eaf4ff,rgba(234,244,255,0))!important;
  border-left:5px solid var(--v86-blue)!important;
}
.a85-card span,
.v81-area-card span{
  background:#eaf4ff!important;
  color:#156cc4!important;
}
.a85-card b,
.v81-area-card b{
  color:#156cc4!important;
}

/* Footer */
.v71-footer{
  background:linear-gradient(180deg,#071b35,#031225)!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
}
.v71-footer a{
  color:rgba(255,255,255,.82)!important;
}
.v71-footer a:hover{
  color:#fff!important;
}

/* Floating readability improvements */
.v71-page-main,
.v71-archive-main,
.v71-post-main{
  background:linear-gradient(180deg,#f4f8fc,#fff)!important;
}
.v71-breadcrumb,
.v71-meta,
.v71-category-list{
  color:var(--v86-muted)!important;
}

/* Mobile 10/10 */
@media(max-width:1024px){
  .v71-home-hero-inner{
    grid-template-columns:1fr!important;
    min-height:auto!important;
    padding:58px 0 128px!important;
  }
  .v71-right-card{
    max-width:640px!important;
    justify-self:start!important;
  }
  .v71-strip-box{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .a85-grid,
  .v81-area-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:768px){
  .v71-topbar{
    font-size:12px!important;
    padding:8px 12px!important;
    text-align:center!important;
  }
  .v71-header-inner{
    min-height:76px!important;
    padding:12px 0!important;
  }
  .v71-brand strong{
    font-size:24px!important;
  }
  .v71-brand small{
    display:block!important;
    font-size:11px!important;
  }
  .v71-menu-toggle{
    background:rgba(255,255,255,.12)!important;
    color:#fff!important;
    border:1px solid rgba(255,255,255,.18)!important;
    border-radius:14px!important;
  }
  .v71-nav{
    background:rgba(3,16,31,.98)!important;
    border:1px solid rgba(255,255,255,.12)!important;
    border-radius:18px!important;
    padding:10px!important;
    margin-top:10px!important;
  }
  .v71-nav ul{
    gap:8px!important;
  }
  .v71-nav a{
    width:100%!important;
    justify-content:flex-start!important;
    background:rgba(255,255,255,.06)!important;
    border-color:rgba(255,255,255,.10)!important;
    min-height:48px!important;
  }
  .v71-home-hero{
    min-height:auto!important;
  }
  .v71-home-hero:before{
    background-position:center center!important;
  }
  .v71-home-hero-inner{
    padding:34px 0 106px!important;
  }
  .v71-hero-copy{
    padding:24px 18px!important;
    border-radius:24px!important;
  }
  .v71-home-hero h1{
    font-size:clamp(34px,10vw,48px)!important;
    letter-spacing:-.05em!important;
  }
  .v71-home-hero p{
    font-size:16px!important;
  }
  .v71-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  .v71-btn{
    width:100%!important;
  }
  .v71-right-card{
    border-radius:24px!important;
  }
  .v71-right-body{
    padding:24px 18px!important;
  }
  .v71-service-strip{
    margin-top:-74px!important;
  }
  .v71-strip-box,
  .a85-grid,
  .v81-area-grid,
  .v71-archive-grid,
  .v71-post-grid,
  .a85-posts,
  .v81-post-grid{
    grid-template-columns:1fr!important;
  }
  .v71-strip-item{
    min-height:96px!important;
  }
  .v71-section,
  .v81-section,
  .a85-section{
    padding:48px 0!important;
  }
  .a85-hero-card,
  .v81-hero-card{
    padding:24px 18px!important;
    border-radius:24px!important;
  }
  .a85-hero-card h1,
  .v81-hero-card h1,
  .v71-page-hero h1{
    font-size:34px!important;
  }
  .a85-layout,
  .v81-layout{
    grid-template-columns:1fr!important;
  }
}
@media(max-width:420px){
  :root{--v86-container:calc(100% - 24px)}
  .v71-brand strong{font-size:21px!important}
  .v71-home-hero h1{font-size:32px!important}
}