/* Cặp nút đôi "Get a free quote / Our projects" — CHÉP NGUYÊN từ trang chủ (index.html, .split-cta) cho hero 3 trang service.
   Sửa kiểu nút ở index.html thì chép lại khối bên dưới sang đây (portfolio.html cũng có một bản chép riêng). */
.reveal-hero .reveal-cta{
  order:3; position:relative; z-index:2; margin-top:1.5rem;
  zoom:.96;                      /* cùng tỉ lệ với .hero-tl-btn-wrap của trang chủ → nút to đúng bằng nhau (5/10/2026: .83 → .96) */
  opacity:0; animation:revealCtaIn .85s cubic-bezier(.22,.61,.36,1) .9s forwards;
}
@keyframes revealCtaIn{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
@media(max-width:520px){ .reveal-hero .reveal-cta{ zoom:.86 } }
@media (prefers-reduced-motion:reduce){ .reveal-hero .reveal-cta{ animation:none; opacity:1 } }

/* ---- Nút đôi hero: "Get a free quote" / "Our projects" chung MỘT viên, cắt bởi vạch chéo ----
   Lia chuột vào: 2 nửa sáng lên và tách sang 2 bên.
   Kích thước cố định để 2 nửa BẰNG NHAU: mỗi nửa rộng --w, cao --h, cạnh chéo lệch --slant.
   Nửa phải lùi -slant để 2 cạnh chéo song song, chừa khe --gap.
   Glow đặt trên thẻ bọc .cta-half vì clip-path cắt mất shadow của chính phần tử bị cắt.
   Viền nửa phải vẽ bằng SVG (cùng hình với clip-path) → cạnh chéo vẫn có viền khi tách ra. */
.split-cta{
  --w:196px;--h:40px;--slant:15px;--gap:3px;--spread:11px;
  position:relative;display:inline-flex;align-items:stretch;height:var(--h);
  font-family:'Archivo',sans-serif;font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
}
.split-cta .cta-half{
  display:flex;position:relative;z-index:1;
  transition:transform .55s cubic-bezier(.2,.9,.25,1.25),filter .45s ease;
}
.split-cta .cta-half.r{margin-left:calc(var(--gap) - var(--slant))}
.split-cta .cta-half a{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;white-space:nowrap;
  width:var(--w);height:100%;color:inherit;text-decoration:none;position:relative;overflow:hidden;
  transition:background-position .7s ease,color .4s ease,background-color .4s ease;
}
/* nửa trái: vàng đặc */
.split-cta .cta-half.l a{
  padding:0 var(--slant) 0 0;border-radius:999px 0 0 999px;
  clip-path:polygon(0 0,100% 0,calc(100% - var(--slant)) 100%,0 100%);
  color:var(--navy);
  background:linear-gradient(115deg,#B4884D 0%,#D9A441 38%,#F5D9A8 52%,#D9A441 66%,#A9793E 100%);
  background-size:220% 100%;background-position:0% 0;
}
/* nửa phải: kính tối, viền = SVG .cta-outline */
.split-cta .cta-half.r a{
  padding:0 0 0 var(--slant);border-radius:0 999px 999px 0;
  clip-path:polygon(var(--slant) 0,100% 0,100% 100%,0 100%);
  color:#F2EFE6;background-color:rgba(13,23,48,.72);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.split-cta .cta-outline{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.split-cta .cta-outline path{fill:none;stroke:rgba(231,201,138,.6);stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke .4s ease}
.split-cta .cta-half.r a svg.arrow{width:14px;height:14px;flex:none;color:#e7c98a;transition:transform .45s cubic-bezier(.22,.61,.36,1)}
/* vệt sáng quét ngang trong mỗi nửa */
.split-cta .cta-half a::before{
  content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));
  transform:skewX(-20deg);transition:left .7s ease;
}
.split-cta .cta-half.r a::before{background:linear-gradient(100deg,rgba(245,217,168,0),rgba(245,217,168,.28),rgba(245,217,168,0))}

/* vạch chéo ngăn cách: neo đúng tâm khe */
.split-cta .cta-seam{position:relative;width:0;z-index:2;pointer-events:none}
.split-cta .cta-slash{
  position:absolute;top:-2px;bottom:-2px;left:calc(var(--gap) / 2 - var(--slant) / 2 - 1px);width:2px;
  background:linear-gradient(180deg,rgba(245,217,168,0),#F5D9A8 22%,#fff3d0 50%,#F5D9A8 78%,rgba(245,217,168,0));
  transform:rotate(20.6deg);transform-origin:center;   /* atan(15/40) */
  box-shadow:0 0 8px rgba(245,217,168,.6);
  transition:opacity .25s ease;
}

/* ---- lia chuột / focus: sáng lên + tách ra ---- */
.split-cta:hover .cta-half.l,.split-cta:focus-within .cta-half.l{transform:translateX(calc(var(--spread) * -1))}
.split-cta:hover .cta-half.r,.split-cta:focus-within .cta-half.r{transform:translateX(var(--spread))}
.split-cta:hover .cta-half,.split-cta:focus-within .cta-half{
  filter:drop-shadow(0 0 10px rgba(245,217,168,.55)) drop-shadow(0 8px 20px rgba(217,164,65,.28));
}
.split-cta:hover .cta-half.l a,.split-cta:focus-within .cta-half.l a{background-position:100% 0;color:var(--navy-deep)}
.split-cta:hover .cta-half.r a,.split-cta:focus-within .cta-half.r a{color:#fff3d0;background-color:rgba(13,23,48,.84)}
.split-cta:hover .cta-outline path,.split-cta:focus-within .cta-outline path{stroke:#F5D9A8}
.split-cta:hover .cta-half a::before,.split-cta:focus-within .cta-half a::before{left:130%}
.split-cta:hover .cta-half.r a svg.arrow,.split-cta:focus-within .cta-half.r a svg.arrow{transform:translateX(4px)}
.split-cta:hover .cta-slash,.split-cta:focus-within .cta-slash{opacity:0}
/* nửa đang được trỏ vào sáng hơn nửa kia một chút */
.split-cta .cta-half:hover{filter:drop-shadow(0 0 14px rgba(255,236,190,.8)) drop-shadow(0 8px 22px rgba(217,164,65,.38))!important}

@media (prefers-reduced-motion:reduce){
  .split-cta .cta-half,.split-cta .cta-half a,.split-cta .cta-half a::before{transition:none}
  .split-cta:hover .cta-half.l,.split-cta:hover .cta-half.r{transform:none}
}

/* 6/10/2026: trên mobile khung hero thành position:static nên lớp phủ ::before rộng 120% của nó thò ra ngoài mép phải
   (trang bị dư bề ngang ~36px dù body đã ẩn thanh cuộn) → cắt ngang ngay tại hero. overflow-x:clip không ảnh hưởng position:sticky. */
.reveal-hero{ overflow-x:clip; }