/* ============================================================================
   ĐIỂM NHẤN RIÊNG CỦA 3 TRANG SERVICE (5/10/2026) — nạp SAU service-content.css
   Mỗi trang một kiểu riêng, không dùng lại bố cục của nhau:
     · Renovations  → .rv-duo    : hai tấm video lớn "Homeowners / Investors", rê chuột tấm nào tấm đó nở rộng
     · Additions    → .ad-why    : video dọc có khung chỉ lệch, mở dần từ dưới lên + hai thẻ xếp bên cạnh
     · Commercial   → .cm-stats  : ba con số lớn đếm lên  ·  .cm-names : băng tên khách hàng chữ viền vàng trôi ngang
   Dùng chung cả ba: đường chỉ vàng chạy dọc 4 bước quy trình theo tiến độ cuộn, và ảnh nền mờ cho CTA.
   QUY TẮC CỦA CHỦ SITE (5/10/2026): KHÔNG dùng ảnh của site hay ảnh dự án để trang trí — chỉ ảnh/video tìm từ
   nguồn ngoài (Mixkit Free License, StockSnap CC0), lưu trong assets/showcase/.
   JS: assets/service-signature.js (gắn .sig-ready lên <html>; không có JS thì mọi thứ vẫn hiện đủ, chỉ mất chuyển động)
   ========================================================================== */

/* ---------- (chung) QUY TRÌNH: đường chỉ vàng chạy theo cuộn, bước nào tới thì sáng lên ---------- */
.sc-process .sc-steps{ position:relative; }
.sc-process .sc-steps .n{ font-size:clamp(2.6rem,4vw,3.5rem); }
.sig-ready .sc-process .sc-steps::before{
  content:''; position:absolute; top:0; left:0; height:1px; width:calc(var(--p,0) * 100%); z-index:1; pointer-events:none;
  background:linear-gradient(90deg,#b08a45 0%,#f6e6b6 100%); box-shadow:0 0 14px rgba(232,194,132,.75);
}
.sig-ready .sc-process .sc-steps li::before{ display:none; }           /* thay vạch tĩnh bằng mốc tròn bên dưới */
.sig-ready .sc-process .sc-steps li::after{
  content:''; position:absolute; top:-5px; left:0; width:9px; height:9px; border-radius:50%; z-index:2;
  border:1px solid rgba(232,194,132,.6); background:#0A1226;
  transition:background .5s ease,box-shadow .6s ease;
}
.sig-ready .sc-process .sc-steps li.is-on::after{
  background:#f6e6b6; box-shadow:0 0 0 5px rgba(232,194,132,.14),0 0 18px rgba(232,194,132,.85);
}
.sig-ready .sc-process .sc-steps .n{
  color:transparent; -webkit-text-stroke:1px rgba(232,194,132,.55);
  transition:color .8s ease,-webkit-text-stroke-color .8s ease;
}
.sig-ready .sc-process .sc-steps li.is-on .n{ color:var(--amber-light); -webkit-text-stroke-color:transparent; }
.sig-ready .sc-process .sc-steps h3,
.sig-ready .sc-process .sc-steps p{ opacity:.42; transition:opacity .8s ease; }
.sig-ready .sc-process .sc-steps li.is-on h3,
.sig-ready .sc-process .sc-steps li.is-on p{ opacity:1; }
@media(max-width:1000px){ .sig-ready .sc-process .sc-steps::before{ display:none; } }   /* nhiều hàng: chỉ còn mốc sáng dần */

/* ---------- (chung) CTA: ảnh nền riêng từng trang, phủ navy đậm, phóng rất chậm ---------- */
.sc-cta[class*="cta-"]::after{
  content:''; position:absolute; inset:-4%; z-index:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(13,23,48,.86) 0%,rgba(13,23,48,.74) 50%,rgba(13,23,48,.9) 100%),var(--cta-img) center/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 80%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 80%,transparent 100%);
  animation:sigDrift 26s ease-in-out infinite alternate;
}
.sc-cta[class*="cta-"] .sc-wrap{ position:relative; z-index:1; }
.sc-cta.cta-rv{ --cta-img:url(showcase/rv-exterior.jpg); }
.sc-cta.cta-ad{ --cta-img:url(showcase/ad-sunset-poster.jpg); }
.sc-cta.cta-cm{ --cta-img:url(showcase/cm-cta-spa-navy.jpg); }   /* 7/10/2026: ảnh sảnh spa tông XANH NAVY do CHỦ SITE tự cấp (Downloads/"Không Gian Spa Xanh Lam Sang Trọng.png"); bản tông vàng họ gửi trước đó đã bị thay */
/* riêng trang Commercial: lớp phủ navy nhạt hơn mặc định một chút (.86/.74/.9 → .82/.64/.88) để ánh vàng của sảnh spa còn thấy rõ;
   đo trên điểm SÁNG NHẤT phía sau chữ (màn 1440): tiêu đề kem 5,3:1 · chữ vàng 3,5:1 (chữ lớn, đạt ≥3:1) · câu phụ 4,7:1 (đo lại với ảnh tông navy).
   Đừng làm lớp phủ nhạt hơn mức này, chữ sẽ khó đọc trên mấy mảng nệm trắng. */
.sc-cta.cta-cm::after{
  background:linear-gradient(180deg,rgba(13,23,48,.82) 0%,rgba(13,23,48,.64) 50%,rgba(13,23,48,.88) 100%),var(--cta-img) center/cover no-repeat;
}
@keyframes sigDrift{ from{ transform:scale(1); } to{ transform:scale(1.08); } }

/* ---------- RENOVATIONS: hai tấm ảnh "Homeowners / Investors" ---------- */
.rv-duo.sc-two{ display:flex; gap:clamp(.7rem,1.4vw,1.1rem); min-height:clamp(430px,60vh,580px); }
.rv-duo.sc-two li{
  flex:1 1 0; min-width:0; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(1.8rem,3vw,2.8rem); background:#0A1226; border-color:rgba(180,136,77,.3);
  transition:flex-grow .9s cubic-bezier(.2,.75,.2,1),border-color .5s ease,box-shadow .6s ease;
}
.rv-duo.sc-two li:hover{ transform:none; }
.rv-duo.sc-two li::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(13,23,48,.12) 0%,rgba(13,23,48,.5) 46%,rgba(8,14,30,.95) 100%);
}
.rv-duo.sc-two li > .duo-media{
  position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.03); transition:transform 1.4s cubic-bezier(.2,.75,.2,1),filter .8s ease; filter:saturate(1.08);
}
.rv-duo.sc-two .duo-home > .duo-media{ object-position:74% 72%; }      /* giữ đèn bàn + ghế sofa trong khung khi tấm hẹp */
.rv-duo.sc-two li > *{ position:relative; z-index:1; }
.rv-duo.sc-two li::before{ z-index:1; }
.rv-duo .duo-tag{
  display:inline-flex; align-items:center; gap:.8rem; margin-bottom:.9rem;
  font-size:.66rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--amber-light);
}
.rv-duo .duo-tag::before{ content:''; width:34px; height:1px; background:var(--amber-light); }
.rv-duo.sc-two h3{ font-family:'Marcellus','Playfair Display',serif; font-weight:400; font-size:clamp(1.9rem,3.2vw,2.8rem); line-height:1.1; margin-bottom:.9rem; }
.rv-duo.sc-two p{ max-width:46ch; color:rgba(245,241,232,.86); }
@media(hover:hover) and (min-width:768px){
  .rv-duo.sc-two:hover li{ flex-grow:.72; }
  .rv-duo.sc-two li:hover{ flex-grow:1.5; }
  .rv-duo.sc-two li:hover > .duo-media{ transform:scale(1.09); filter:saturate(1.2) brightness(1.08); }
  .rv-duo.sc-two:hover li:not(:hover) > .duo-media{ filter:saturate(.5) brightness(.7); }
}
@media(max-width:767px){
  .rv-duo.sc-two{ flex-direction:column; min-height:0; }
  .rv-duo.sc-two li{ min-height:340px; }
}

/* ---------- ADDITIONS: ảnh dọc khung chỉ lệch + hai thẻ xếp chồng bên phải ---------- */
.ad-why .sc-wrap{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  column-gap:clamp(2.2rem,6vw,5.5rem); align-items:start;
}
.ad-why-fig{ grid-column:1; grid-row:1 / span 2; position:relative; margin:0 clamp(.9rem,1.6vw,1.4rem) clamp(.9rem,1.6vw,1.4rem) 0; }
.ad-why-fig::before{                                  /* khung chỉ vàng lệch xuống–phải */
  content:''; position:absolute; inset:clamp(.9rem,1.6vw,1.4rem) calc(-1 * clamp(.9rem,1.6vw,1.4rem)) calc(-1 * clamp(.9rem,1.6vw,1.4rem)) clamp(.9rem,1.6vw,1.4rem);
  border:1px solid rgba(232,194,132,.5); border-radius:2px; pointer-events:none;
}
.ad-why-fig .frame{ position:relative; aspect-ratio:4 / 5; overflow:hidden; border-radius:2px; background:#0A1226;
  box-shadow:0 44px 80px -40px rgba(0,0,0,.85); }
.ad-why-fig .frame > video,.ad-why-fig .frame > img{ position:absolute; left:0; top:-7%; width:100%; height:114%; object-fit:cover; object-position:66% 50%; display:block; will-change:transform; }
.ad-why-fig .frame::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(13,23,48,0) 55%,rgba(8,14,30,.8) 100%); box-shadow:inset 0 0 0 1px rgba(232,194,132,.24); }
.ad-why-fig figcaption{
  position:absolute; left:clamp(1.1rem,2vw,1.6rem); bottom:clamp(1.1rem,2vw,1.6rem); z-index:1;
  display:flex; align-items:center; gap:.8rem;
  font-size:.64rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--cream);
}
.ad-why-fig figcaption::before{ content:''; width:30px; height:1px; background:var(--amber-light); }
/* ảnh mở dần từ dưới lên khi cuộn tới (chỉ khi JS chạy được) */
.sig-ready .ad-why-fig .frame{ clip-path:inset(100% 0 0 0); transition:clip-path 1.5s cubic-bezier(.2,.75,.2,1); }
.sig-ready .ad-why-fig.is-in .frame{ clip-path:inset(0 0 0 0); }
.sig-ready .ad-why-fig::before{ opacity:0; transform:translate(-14px,-14px); transition:opacity 1s ease .7s,transform 1.2s cubic-bezier(.2,.75,.2,1) .7s; }
.sig-ready .ad-why-fig.is-in::before{ opacity:1; transform:none; }
.ad-why-fig{ align-self:center; }
.ad-why .sc-wrap > div{ grid-column:2; align-self:end; }
.ad-why .sc-two{ grid-column:2; grid-template-columns:1fr; margin-top:clamp(1.8rem,3vw,2.6rem); }
.ad-why .sc-two li:nth-child(2){ margin-left:clamp(0rem,3vw,2.6rem); }       /* so le nhẹ, không xếp thẳng hàng */
@media(max-width:900px){
  .ad-why .sc-wrap{ grid-template-columns:1fr; }
  .ad-why-fig{ grid-column:1; grid-row:auto; max-width:440px; margin-bottom:2.6rem; }
  .ad-why .sc-wrap > div,.ad-why .sc-two{ grid-column:1; }
  .ad-why .sc-two li:nth-child(2){ margin-left:0; }
}

/* ---------- COMMERCIAL: khung video before→after + chữ Before / After ----------
   .cm-cine--fit: khung đúng tỉ lệ 4:3 của ảnh nên thấy TOÀN BỘ ảnh, cao tối đa 92% màn hình, canh giữa
   (khung gốc trong service-showcase.css là dải ngang cao 78vh, cắt mất trần và sàn của ảnh). */
/* 9/10/2026 — chủ site muốn khung TO RA: giờ tràn hết bề ngang trang, cao trọn một màn hình (không quá 4:3).
   Màn hình ngang rộng hơn 4:3 nên ảnh bị xén bớt một ít trần và sàn (object-fit:cover, ~8% mỗi mép ở 1440×900,
   ~12% ở 1920×1080); màn hình dọc/hẹp thì 75vw nhỏ hơn 100vh → vẫn đúng 4:3, thấy đủ ảnh.
   Bản cũ (thấy TOÀN BỘ ảnh, nhỏ hơn): height:auto; aspect-ratio:4/3; width:min(100%,calc(92vh*4/3)). */
.cm-cine.cm-cine--fit{ width:100%; height:min(100vh,75vw); aspect-ratio:auto; margin-left:auto; margin-right:auto; }
/* góc trên trái tối dần — chữ Before/After đọc rõ cả trên ảnh công trường sáng màu */
.cm-cine--fit .cm-cine-frame::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(135deg,rgba(8,14,30,.8) 0%,rgba(8,14,30,.42) 20%,rgba(8,14,30,0) 44%);
}
/* chữ lớn kiểu tạp chí: số thứ tự cặp + vạch chỉ vàng, bên dưới là "Before" (kem) / "After" (vàng kim) trượt thay nhau.
   Dùng chung class .cm-cine-tag để được service-showcase.js cho hiện dần cùng lúc với các nhãn góc khác. */
.cm-cine-tag.cm-ba-label{
  top:clamp(2rem,4.6vw,3.9rem); bottom:auto; left:clamp(2rem,5vw,4.4rem);
  flex-direction:column; align-items:flex-start; gap:.55rem;
  font-size:1rem; letter-spacing:normal; text-transform:none; color:var(--cream);
}
.cm-cine-tag.cm-ba-label::before{ content:none; }
.cm-ba-label .ba-idx{
  display:flex; align-items:center; gap:.85rem;
  font-size:.68rem; font-weight:600; letter-spacing:.36em; text-transform:uppercase; color:#E8C284;
}
.cm-ba-label .ba-idx::after{ content:''; width:clamp(2.2rem,4.4vw,3.8rem); height:1px; background:linear-gradient(90deg,#E8C284,rgba(232,194,132,0)); }
.cm-ba-label .ba-word{
  display:grid; overflow:hidden; padding:.04em .14em .14em 0;
  font-family:'Cormorant Garamond','Playfair Display',serif; font-style:italic; font-weight:500;
  font-size:clamp(2.7rem,6.2vw,5.4rem); line-height:1; letter-spacing:-.01em;
}
.cm-ba-label .ba-word b{
  grid-area:1 / 1; font-weight:inherit;
  transition:transform .8s cubic-bezier(.2,.75,.2,1),opacity .55s ease;
}
.cm-ba-label .ba-word b:first-child{ color:var(--cream); text-shadow:0 2px 26px rgba(0,0,0,.5); }
.cm-ba-label .ba-word b:last-child{
  padding-right:.06em;
  background:linear-gradient(100deg,#c79a4f 0%,#e8c284 30%,#fff3d0 52%,#e0b66a 76%,#c79a4f 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.45));
}
.cm-ba-label[data-state="before"] .ba-word b:last-child{ opacity:0; transform:translateY(108%); }
.cm-ba-label[data-state="after"] .ba-word b:first-child{ opacity:0; transform:translateY(-108%); }
/* ghi chú ở dưới, bên PHẢI của hai băng ảnh ("Renderings designed by…" + link dự án đã hoàn thành), canh phải.
   Lề phải trùng với nhãn "Oregon · Washington" trong khung video; kiểu chữ theo .rv-ba-note của trang Renovations, sáng hơn chút cho dễ đọc. */
.cm-show .cm-ba-note{ margin:clamp(1.3rem,2.2vw,1.9rem) 0 0; padding:0 clamp(2rem,5vw,4.4rem); text-align:right;
  font-size:.82rem; line-height:1.65; letter-spacing:.02em; color:rgba(245,241,232,.86); }
.cm-show .cm-ba-note a{ margin-left:auto; }
@media(max-width:767px){ .cm-show .cm-ba-note{ padding:0 1.3rem; } }
/* khung giờ cao trọn màn hình → logo cố định ở góc trên-trái đè lên số thứ tự; hạ nhãn xuống dưới logo (chỉ desktop) */
@media(min-width:768px){ .cm-cine--fit .cm-cine-tag.cm-ba-label{ top:clamp(6.6rem,13vh,8.2rem); } }
@media(max-width:767px){
  .cm-cine.cm-cine--fit{ width:100%; }
  .cm-cine-tag.cm-ba-label{ top:1.3rem; left:1.3rem; gap:.35rem; }
  .cm-ba-label .ba-idx{ font-size:.56rem; }
}
@media(prefers-reduced-motion:reduce){ .cm-ba-label .ba-word b{ transition:none; } }

/* ---------- COMMERCIAL: ba con số lớn + băng tên khách hàng ---------- */
.cm-stats{
  grid-column:1 / -1; list-style:none; display:grid; grid-template-columns:repeat(3,1fr);
  margin-top:clamp(1.2rem,2.6vw,2.2rem);
  border-top:1px solid rgba(180,136,77,.28); border-bottom:1px solid rgba(180,136,77,.28);
}
.cm-stats li{ padding:clamp(1.9rem,3.2vw,2.8rem) clamp(1rem,2.4vw,2.2rem); border-left:1px solid rgba(180,136,77,.2); }
.cm-stats li:first-child{ border-left:0; padding-left:0; }
.cm-stats .fig{
  display:inline-block; font-family:'Playfair Display',serif; font-weight:400; font-variant-numeric:lining-nums;
  font-size:clamp(3.4rem,7.4vw,6rem); line-height:1; letter-spacing:-.01em;
  background:linear-gradient(100deg,#c79a4f 0%,#e8c284 34%,#fff3d0 54%,#e0b66a 78%,#c79a4f 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
.cm-stats .lbl{ display:block; margin-top:.9rem; font-size:.7rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:rgba(245,241,232,.8); }
.cm-stats .sub{ display:block; margin-top:.5rem; font-size:.9rem; line-height:1.55; color:rgba(245,241,232,.62); }
@media(max-width:700px){
  .cm-stats{ grid-template-columns:1fr; }
  .cm-stats li{ border-left:0; padding-left:0; }
  .cm-stats li:nth-child(n+2){ border-top:1px solid rgba(180,136,77,.2); }
}

.cm-names{
  margin-top:clamp(2.8rem,5.5vw,4.6rem); overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
}
.cm-names-track{ display:flex; width:max-content; will-change:transform; animation:cmNames 62s linear infinite; }
.cm-names:hover .cm-names-track{ animation-play-state:paused; }
.cm-names span{
  flex:none; display:inline-flex; align-items:center; white-space:nowrap;
  font-family:'Cormorant Garamond','Playfair Display',serif; font-style:italic; font-weight:500;
  font-size:clamp(2.6rem,6.2vw,5.4rem); line-height:1.2;
  color:transparent; -webkit-text-stroke:1px rgba(232,194,132,.85);
  transition:color .45s ease,-webkit-text-stroke-color .45s ease;
}
.cm-names span::after{
  content:'\2726'; margin:0 clamp(1.3rem,2.6vw,2.4rem); font-family:Arial,sans-serif; font-style:normal; font-size:.22em;
  color:var(--amber); -webkit-text-stroke:0;
}
.cm-names span:hover{ color:var(--amber-light); -webkit-text-stroke-color:transparent; }
@keyframes cmNames{ to{ transform:translate3d(-50%,0,0); } }

@media(prefers-reduced-motion:reduce){
  .cm-names-track,.sc-cta[class*="cta-"]::after{ animation:none; }
  .cm-names{ overflow-x:auto; }
  .sig-ready .ad-why-fig .frame{ clip-path:none; transition:none; }
  .sig-ready .ad-why-fig::before{ opacity:1; transform:none; transition:none; }
  .rv-duo.sc-two li,.rv-duo.sc-two li > .duo-media{ transition:none; }
}