/* V73 Header + Hero Like Reference
   ปรับจาก V71 ให้ใกล้ภาพตัวอย่าง: Header น้ำเงินเข้ม, เมนูสวย, Hero มีรูปเด่น, กล่องบริการด้านล่าง
*/
:root{
  --v73-navy:#061a32;
  --v73-navy2:#08284d;
  --v73-blue:#1177d8;
  --v73-blue2:#28a8ff;
  --v73-sky:#dff2ff;
  --v73-white:#fff;
  --v73-text:#102033;
  --v73-muted:#637386;
  --v73-line:rgba(255,255,255,.16);
  --v73-shadow:0 22px 60px rgba(0,18,45,.28);
  --v73-container:min(1180px, calc(100% - 32px));
}

/* Top bar */
.v71-topbar{
  background:#06182e!important;
  color:#eef7ff!important;
  min-height:42px!important;
  font-size:14px!important;
  font-weight:900!important;
  letter-spacing:.01em!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
}
.v71-topbar::before{
  content:"⌖";
  margin-right:10px;
  color:#40b7ff;
  font-size:18px;
}

/* Header ให้เหมือนภาพตัวอย่าง */
.v71-header{
  background:linear-gradient(90deg,#06203c,#082f5a 55%,#06305e)!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 16px 38px rgba(0,12,32,.28)!important;
}
.v71-header-inner{
  min-height:112px!important;
  padding:18px 0!important;
}
.v71-brand a{
  color:#fff!important;
}
.v71-brand img{
  max-width:110px!important;
  max-height:86px!important;
  margin-right:4px!important;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.28))!important;
}
.v71-brand strong{
  color:#fff!important;
  font-size:clamp(30px,2.35vw,46px)!important;
  text-shadow:0 8px 22px rgba(0,0,0,.25)!important;
}
.v71-brand small{
  color:rgba(255,255,255,.78)!important;
  font-size:14px!important;
  font-weight:800!important;
}

/* Menu */
.v71-nav ul{
  gap:14px!important;
}
.v71-nav a{
  color:#fff!important;
  min-height:54px!important;
  padding:15px 20px!important;
  border-radius:18px!important;
  font-size:16px!important;
  font-weight:1000!important;
  background:transparent!important;
  border:1px solid transparent!important;
  transition:.18s ease!important;
}
.v71-nav a:hover,
.v71-nav a.active{
  background:rgba(255,255,255,.10)!important;
  border-color:rgba(255,255,255,.18)!important;
  color:#fff!important;
  box-shadow:inset 0 0 0 1px rgba(64,183,255,.12),0 10px 26px rgba(0,0,0,.18)!important;
}
.v71-nav li:first-child a::before{
  content:"⌂";
  margin-right:8px;
}
.v71-nav li:last-child a{
  background:linear-gradient(135deg,#0d84f0,#26b4ff)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.20)!important;
  box-shadow:0 14px 34px rgba(17,119,216,.34)!important;
}
.v71-nav li:last-child a::before{
  content:"☎";
  margin-right:9px;
}

/* Hero แบบภาพตัวอย่าง */
.v71-home-hero{
  min-height:690px!important;
  background:#061a32!important;
}
.v71-home-hero:before{
  background:
    linear-gradient(90deg,rgba(4,17,33,.90) 0%,rgba(4,17,33,.72) 31%,rgba(4,17,33,.30) 61%,rgba(4,17,33,.56) 100%),
    url("/assets/img/hero-crane.webp"),
    url("/assets/img/hero.jpg")!important;
  background-size:cover!important;
  background-position:center right!important;
  filter:saturate(1.16) contrast(1.07) brightness(1.03)!important;
}
.v71-home-hero:after{
  opacity:.36!important;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px)!important;
  background-size:46px 46px!important;
}
.v71-home-hero-inner{
  min-height:690px!important;
  padding:78px 0 118px!important;
  grid-template-columns:minmax(0,.98fr) minmax(340px,.78fr)!important;
  gap:58px!important;
}

/* กล่องซ้าย */
.v71-hero-copy{
  max-width:640px!important;
  padding:38px 42px!important;
  border-radius:30px!important;
  background:linear-gradient(180deg,rgba(8,31,58,.82),rgba(5,18,35,.78))!important;
  border:1px solid rgba(111,199,255,.28)!important;
  border-left:6px solid #42bfff!important;
  box-shadow:0 26px 70px rgba(0,10,30,.38)!important;
}
.v71-kicker{
  background:rgba(8,50,86,.76)!important;
  border:1px solid rgba(91,196,255,.38)!important;
  color:#e9f8ff!important;
  padding:10px 16px!important;
  font-size:14px!important;
}
.v71-home-hero h1{
  font-size:clamp(44px,4.85vw,76px)!important;
  line-height:1.08!important;
  margin-top:22px!important;
}
.v71-home-hero h1:after{
  height:6px!important;
  width:98px!important;
  background:linear-gradient(90deg,#0d84f0,#58c8ff)!important;
}
.v71-home-hero p{
  font-size:18px!important;
  line-height:1.82!important;
  color:rgba(255,255,255,.90)!important;
}
.v71-btn{
  background:linear-gradient(135deg,#0d84f0,#26b4ff)!important;
  border-radius:15px!important;
  min-height:56px!important;
  padding:15px 24px!important;
  box-shadow:0 16px 34px rgba(13,132,240,.30)!important;
}
.v71-btn.secondary{
  background:rgba(255,255,255,.10)!important;
  border:1px solid rgba(255,255,255,.22)!important;
  color:#fff!important;
}
.v71-actions .v71-btn:first-child::before{
  content:"▣";
  margin-right:9px;
}
.v71-actions .v71-btn.secondary::before{
  content:"▤";
  margin-right:9px;
}

/* การ์ดขวา */
.v71-right-card{
  max-width:430px!important;
  border-radius:30px!important;
  background:rgba(255,255,255,.95)!important;
  box-shadow:0 32px 80px rgba(0,10,30,.30)!important;
  transform:translateY(18px)!important;
}
.v71-right-card:before{
  height:7px!important;
  background:linear-gradient(90deg,#0d84f0,#58c8ff)!important;
}
.v71-right-card img{
  display:none!important;
}
.v71-right-body{
  padding:34px!important;
}
.v71-label{
  background:#e9f4ff!important;
  color:#1177d8!important;
  padding:8px 12px!important;
  font-size:13px!important;
}
.v71-right-card h2{
  font-size:clamp(26px,2vw,36px)!important;
  line-height:1.22!important;
  margin:18px 0 16px!important;
}
.v71-right-card p{
  color:#52677d!important;
  font-size:16px!important;
  line-height:1.72!important;
}
.v71-mini-list div{
  color:#1b3552!important;
}
.v71-mini-list div:before{
  background:#e7f4ff!important;
  color:#1177d8!important;
}

/* Stats ในกล่องซ้าย */
.v71-hero-stats{
  margin-top:28px!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.v71-stat{
  border-radius:18px!important;
  background:rgba(255,255,255,.09)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  padding:18px!important;
}
.v71-stat strong{
  font-size:24px!important;
}
.v71-stat span{
  color:rgba(255,255,255,.78)!important;
  font-weight:700!important;
}

/* แถบบริการด้านล่างแบบภาพ */
.v71-service-strip{
  margin-top:-92px!important;
  position:relative!important;
  z-index:8!important;
}
.v71-strip-box{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:16px!important;
}
.v71-strip-item{
  min-height:138px!important;
  display:flex!important;
  align-items:center!important;
  gap:18px!important;
  padding:24px!important;
  border-radius:22px!important;
  background:linear-gradient(180deg,rgba(7,31,58,.94),rgba(4,18,36,.94))!important;
  border:1px solid rgba(86,184,255,.28)!important;
  box-shadow:0 22px 55px rgba(0,12,35,.28)!important;
  color:#fff!important;
}
.v71-icon{
  width:62px!important;
  height:62px!important;
  border-radius:18px!important;
  background:rgba(10,92,164,.16)!important;
  border:1px solid rgba(86,184,255,.35)!important;
  color:#40b7ff!important;
  font-size:30px!important;
}
.v71-strip-item strong{
  color:#fff!important;
  font-size:20px!important;
}
.v71-strip-item span{
  color:rgba(255,255,255,.78)!important;
  font-size:15px!important;
}

/* Section ต่อไปให้หายติดแถบ */
.v71-service-strip + .v71-section{
  padding-top:88px!important;
}

/* หน้าภายในให้ Header โทนเดียวกัน */
.v71-page-hero{
  background:#061a32!important;
}
.v71-page-hero:before{
  background:
    linear-gradient(95deg,rgba(7,27,53,.96),rgba(7,27,53,.78),rgba(7,27,53,.30)),
    var(--hero-img, url("/assets/img/hero-crane.webp"))!important;
  background-size:cover!important;
  background-position:center right!important;
}

/* มือถือ */
@media(max-width:1024px){
  .v71-home-hero-inner{
    grid-template-columns:1fr!important;
    padding-bottom:128px!important;
  }
  .v71-right-card{
    justify-self:start!important;
    max-width:620px!important;
    transform:none!important;
  }
  .v71-strip-box{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:768px){
  .v71-header-inner{
    min-height:76px!important;
    padding:12px 0!important;
  }
  .v71-brand img{
    max-width:70px!important;
    max-height:58px!important;
  }
  .v71-brand strong{
    font-size:23px!important;
  }
  .v71-brand small{
    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;
  }
  .v71-nav{
    background:rgba(3,16,31,.96)!important;
    border:1px solid rgba(255,255,255,.10)!important;
    border-radius:18px!important;
    padding:10px!important;
    margin-top:8px!important;
  }
  .v71-nav a{
    color:#fff!important;
    background:rgba(255,255,255,.06)!important;
  }
  .v71-home-hero-inner{
    padding:34px 0 108px!important;
  }
  .v71-hero-copy{
    padding:24px 18px!important;
  }
  .v71-home-hero h1{
    font-size:clamp(34px,10vw,46px)!important;
  }
  .v71-home-hero p{
    font-size:16px!important;
  }
  .v71-hero-stats{
    grid-template-columns:1fr!important;
  }
  .v71-service-strip{
    margin-top:-74px!important;
  }
  .v71-strip-box{
    grid-template-columns:1fr!important;
  }
  .v71-strip-item{
    min-height:96px!important;
    padding:18px!important;
  }
  .v71-service-strip + .v71-section{
    padding-top:58px!important;
  }
}