/* ============================================================================
   NỘI DUNG 3 TRANG SERVICE + TRANG ABOUT — stylesheet dùng chung
   (service-renovations.html · service-additions.html · service-commercial.html · about.html)
   Bảng màu lấy đúng từ :root của từng trang: navy–amber–cream.
   5/10/2026: làm lại theo hướng sang trọng, cùng chất liệu với trang Our Projects —
   tiêu đề Marcellus chữ thường + dòng nhấn Cormorant nghiêng ánh vàng, chỉ vàng mảnh,
   thẻ có chiều sâu, nút góc vuông có khung chỉ lệch. Bản cũ: service-content.css.bak-preluxe
   ========================================================================== */

.sc{ background:var(--navy-deep); color:var(--cream); counter-reset:sc-sec; }
.sc-wrap{ max-width:1180px; margin:0 auto; padding:0 clamp(1.5rem,6vw,4.5rem); }
.sc section{ padding:clamp(4.5rem,11vh,8rem) 0; }

/* chỉ vàng mảnh, mờ dần hai đầu, ngăn giữa các mục nội dung (không áp cho dải logo / dải ảnh / showcase) */
.sc section:not(.trust-band):not(.sv-show):not(.ab-band):not(.sc-lead){ position:relative; }
.sc section:not(.trust-band):not(.sv-show):not(.ab-band):not(.sc-lead):not(.sc-process):not(.sc-cta)::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(1180px,86vw); height:1px; pointer-events:none;
  background:linear-gradient(90deg,rgba(180,136,77,0),rgba(232,194,132,.34) 50%,rgba(180,136,77,0));
}

/* nhãn mục: số thứ tự serif nghiêng + vạch chỉ + tên mục */
.sc .kicker{
  counter-increment:sc-sec;
  font-size:.7rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--amber-light);
  display:flex; align-items:center; gap:.9rem; margin-bottom:1.5rem;
}
.sc .kicker::before{
  content:counter(sc-sec,decimal-leading-zero); order:-2;
  font-family:'Cormorant Garamond','Playfair Display',serif; font-style:italic; font-weight:500;
  font-size:1.25rem; letter-spacing:.04em; line-height:1; color:var(--amber-light);
}
.sc .kicker::after{
  content:''; order:-1; flex:none; width:44px; height:1px;
  background:linear-gradient(90deg,var(--amber-light),rgba(232,194,132,.25));
}

.sc h2{
  font-family:'Marcellus','Playfair Display',serif; font-weight:400; text-transform:none;
  font-size:clamp(2.05rem,4.3vw,3.55rem); line-height:1.1; letter-spacing:-.005em;
  color:var(--cream); max-width:19ch; text-wrap:balance;
}
/* dòng nhấn: Cormorant nghiêng, ánh vàng kim (tĩnh — chỉ CTA cuối trang mới cho ánh sáng chạy) */
.sc h2 em{
  font-family:'Cormorant Garamond','Playfair Display',serif; font-style:italic; font-weight:500; font-size:1.12em;
  padding-right:.06em;
  background:linear-gradient(100deg,#c79a4f 0%,#e8c284 34%,#fff3d0 54%,#e0b66a 78%,#c79a4f 100%);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
.sc h3{
  font-family:'Playfair Display',serif; font-weight:500; text-transform:none;
  font-size:1.2rem; line-height:1.3; letter-spacing:.005em; color:var(--cream);
}
.sc p{ font-size:1rem; line-height:1.75; color:rgba(245,241,232,.74); }

/* ---------- dải tin cậy: sao nguyên từ .trust-band của index.html ----------
   Giữ đúng tên class (trust-band / row / trust-col / trust-item) để markup trùng trang chủ;
   bọc trong .sc để không đụng class .row của nơi khác. */
.sc .trust-band{
  position:relative;z-index:5;
  /* bắt đầu đúng bằng màu mép dưới ảnh/video phía trên rồi chuyển dần sang navy */
  background:linear-gradient(180deg,#120E1D 0%,var(--navy-deep) 60%);
  padding:2.4rem 2.5rem 2.4rem;
}
/* grid 3 cột đều nhau; mỗi cột là 1 chồng dọc 2 logo thẳng mép trái */
.sc .trust-band .row{
  max-width:1250px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);
  align-items:start;justify-items:center;
  gap:2rem 3rem;
}
.sc .trust-col{display:flex;flex-direction:column;align-items:flex-start;gap:1.7rem}
.sc .trust-item{
  color:var(--cream);opacity:.7;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  display:flex;align-items:center;gap:.6rem;white-space:nowrap;
  transition:opacity .3s;
}
.sc .trust-item:hover{opacity:1}
.sc .trust-item b{font-family:'Playfair Display',serif;font-size:1.05rem;letter-spacing:.05em;font-weight:500;color:var(--amber-light)}
.sc .trust-item img{height:2rem;width:auto;display:block;filter:brightness(0) invert(1);opacity:.9}
@media(max-width:991px){
  .sc .trust-band{padding:2.2rem 2rem 2.4rem}
  .sc .trust-band .row{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));justify-items:center}
  .sc .trust-col{gap:2rem}
}
/* dải này tự lo padding -> bỏ padding mặc định của .sc section */
.sc section.trust-band{padding:2.4rem 2.5rem}

/* ---------- mở đầu: câu lớn trái + đoạn văn phải ---------- */
.sc-lead{
  background:radial-gradient(ellipse 42% 70% at 16% 44%,rgba(232,194,132,.07) 0%,rgba(232,194,132,0) 100%);
}
.sc-lead .sc-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.sc-lead p{ font-size:1.08rem; line-height:1.8; }
.sc-lead p+p{ margin-top:1.2rem; }
/* đoạn văn bên phải thụt sau một vạch chỉ vàng đứng — neo khối chữ vào tiêu đề bên trái */
.sc-lead .sc-wrap > div:nth-child(2){ padding-left:clamp(1.2rem,2.4vw,2rem); border-left:1px solid rgba(180,136,77,.34); margin-top:.5rem; }

/* ---------- lưới hạng mục: thẻ rời, mặt thẻ có chiều sâu, vạch vàng ngắn ở góc trên ---------- */
.sc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,1.8vw,1.5rem); margin-top:clamp(2.4rem,4.5vw,3.5rem); }
.sc-grid li,.sc-two li{
  list-style:none; position:relative;
  padding:clamp(1.8rem,2.8vw,2.5rem) clamp(1.5rem,2.4vw,2.1rem) clamp(1.7rem,2.6vw,2.3rem);
  border:1px solid rgba(180,136,77,.2); border-radius:2px;
  background:linear-gradient(180deg,rgba(232,194,132,.06) 0%,rgba(232,194,132,.012) 62%,rgba(232,194,132,0) 100%);
  transition:transform .55s cubic-bezier(.2,.75,.2,1),border-color .45s ease,box-shadow .55s ease;
}
.sc-grid li::before,.sc-two li::before{
  content:''; position:absolute; top:-1px; left:clamp(1.5rem,2.4vw,2.1rem); width:46px; height:1px;
  background:var(--amber-light); transition:width .55s cubic-bezier(.2,.75,.2,1);
}
.sc-grid li:hover,.sc-two li:hover{
  transform:translateY(-5px); border-color:rgba(232,194,132,.46);
  box-shadow:0 28px 54px -34px rgba(0,0,0,.85),0 0 0 1px rgba(232,194,132,.05);
}
.sc-grid li:hover::before,.sc-two li:hover::before{ width:92px; }
.sc-grid h3{ margin-bottom:.8rem; }
.sc-grid p{ font-size:.94rem; line-height:1.7; }

/* ---------- 2 thẻ "dành cho ai" ---------- */
.sc-two{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1rem,2.2vw,1.6rem); margin-top:clamp(2.4rem,4.5vw,3.5rem); }
.sc-two h3{ font-size:1.42rem; margin-bottom:.85rem; }
.sc-two p{ font-size:.97rem; }

/* ---------- quy trình 4 bước ---------- */
.sc-process{
  background:linear-gradient(180deg,#0A1226 0%,#091022 100%);
}
.sc-process::before,.sc-process::after{
  content:''; position:absolute; left:0; right:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg,rgba(180,136,77,0),rgba(232,194,132,.4) 50%,rgba(180,136,77,0));
}
.sc-process::before{ top:0; } .sc-process::after{ bottom:0; }
.sc-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.2rem,2.6vw,2.2rem); margin-top:clamp(2.4rem,4.5vw,3.5rem); counter-reset:step; }
.sc-steps li{ list-style:none; position:relative; padding-top:1.6rem; border-top:1px solid rgba(180,136,77,.26); }
/* mốc trên đường chỉ: một đoạn vàng sáng ở đầu mỗi bước, dài ra khi rê chuột */
.sc-steps li::before{
  content:''; position:absolute; top:-1px; left:0; width:38px; height:1px; background:var(--amber-light);
  transition:width .6s cubic-bezier(.2,.75,.2,1);
}
.sc-steps li:hover::before{ width:100%; }
.sc-steps .n{
  display:block; font-family:'Cormorant Garamond','Playfair Display',serif; font-style:italic; font-weight:500;
  font-size:2.3rem; line-height:1; letter-spacing:.02em; color:var(--amber-light); margin-bottom:.9rem;
}
.sc-steps h3{ margin-bottom:.65rem; }
.sc-steps p{ font-size:.92rem; line-height:1.68; }

/* ---------- ngành nghề (trang commercial) / khu vực (trang about) ---------- */
.sc-tags{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:rgba(180,136,77,.22); border:1px solid rgba(180,136,77,.22); border-radius:2px; margin-top:clamp(2.4rem,4.5vw,3.5rem); }
.sc-tags li{
  list-style:none; padding:clamp(1.6rem,2.5vw,2.2rem);
  background:linear-gradient(180deg,rgba(232,194,132,.05) 0%,rgba(232,194,132,0) 70%),var(--navy-deep);
}
.sc-tags h3{ color:var(--amber-light); font-size:1.28rem; margin-bottom:.6rem; }
.sc-tags p{ font-size:.94rem; line-height:1.75; }

/* ---------- dự án tiêu biểu ---------- */
.sc-work{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.1rem,2.2vw,1.7rem); margin-top:clamp(2.4rem,4.5vw,3.5rem); }
.sc-work a{ display:block; }
.sc-work .shot{ position:relative; aspect-ratio:4/3; overflow:hidden; background:#0A1226; border-radius:2px; }
.sc-work .shot::after{ content:''; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(232,194,132,.2); transition:box-shadow .5s ease; }
.sc-work a:hover .shot::after{ box-shadow:inset 0 0 0 1px rgba(232,194,132,.6); }
.sc-work img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .6s ease; }
.sc-work a:hover img{ transform:scale(1.05); filter:brightness(1.08); }
.sc-work .tag{ display:block; font-size:.62rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--amber); margin:1.1rem 0 .45rem; }
.sc-work h3{ font-size:1.12rem; transition:color .35s ease; }
.sc-work a:hover h3{ color:var(--amber-light); }
.sc-more{ margin-top:clamp(2rem,3.4vw,2.8rem); }

/* ---------- FAQ ---------- */
.sc-faq-list{ margin-top:clamp(2.4rem,4.5vw,3.5rem); border-top:1px solid rgba(180,136,77,.26); }
.sc-faq-list details{ border-bottom:1px solid rgba(180,136,77,.26); }
.sc-faq-list summary{
  cursor:pointer; list-style:none; padding:1.55rem 3rem 1.55rem 0; position:relative;
  font-family:'Playfair Display',serif; font-size:clamp(1.08rem,1.8vw,1.32rem); line-height:1.35; color:var(--cream);
  transition:color .3s ease,padding-left .45s cubic-bezier(.2,.75,.2,1);
}
.sc-faq-list summary::-webkit-details-marker{ display:none; }
.sc-faq-list summary:hover{ color:var(--amber-light); padding-left:.5rem; }
.sc-faq-list details[open] summary{ color:var(--amber-light); }
/* dấu cộng mảnh trong vòng tròn chỉ vàng → xoay thành dấu nhân khi mở */
.sc-faq-list summary::after{
  content:'+'; position:absolute; right:.2rem; top:50%; width:30px; height:30px; margin-top:-15px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Archivo',Arial,sans-serif; font-size:1.05rem; font-weight:400; line-height:1; color:var(--amber-light);
  border:1px solid rgba(232,194,132,.42); border-radius:50%;
  transition:transform .45s cubic-bezier(.2,.75,.2,1),border-color .3s ease,background .3s ease;
}
.sc-faq-list summary:hover::after{ border-color:var(--amber-light); }
.sc-faq-list details[open] summary::after{ transform:rotate(45deg); background:rgba(232,194,132,.1); border-color:var(--amber-light); }
.sc-faq-list .ans{ padding:0 4rem 1.8rem 0; max-width:70ch; }
.sc-faq-list .ans p{ font-size:.98rem; }

/* ---------- CTA cuối trang ---------- */
.sc-cta{
  text-align:center; overflow:hidden;
  background:radial-gradient(ellipse 46% 64% at 50% 46%,rgba(232,194,132,.1) 0%,rgba(232,194,132,0) 100%);
}
.sc .sc-cta{ padding:clamp(5.5rem,14vh,9.5rem) 0; }
.sc-cta::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(1100px,84vw); height:1px; pointer-events:none;
  background:linear-gradient(90deg,rgba(180,136,77,0),rgba(232,194,132,.6) 50%,rgba(180,136,77,0));
}
.sc-cta h2{ margin:0 auto; max-width:16ch; font-size:clamp(2.2rem,4.8vw,4rem); }
.sc-cta h2 em{ animation:scGold 7s linear infinite; }
@keyframes scGold{ 0%{ background-position:0% 50%; } 100%{ background-position:-200% 50%; } }
.sc-cta p{ margin:1.5rem auto 0; max-width:54ch; font-size:1.04rem; }
/* nhãn CTA: không đánh số, hai vạch chỉ mờ dần hai bên */
.sc-cta .kicker{ counter-increment:none; justify-content:center; gap:1.2rem; margin-bottom:1.8rem; letter-spacing:.42em; }
.sc-cta .kicker::before{
  content:''; order:-1; flex:none; width:clamp(34px,7vw,92px); height:1px;
  background:linear-gradient(90deg,rgba(180,136,77,0),var(--amber)); font-size:0;
}
.sc-cta .kicker::after{ order:1; width:clamp(34px,7vw,92px); background:linear-gradient(90deg,var(--amber),rgba(180,136,77,0)); }

/* ---------- nút: góc vuông 2px, chữ in hoa giãn, mũi tên trượt; nút chính vàng kim có khung chỉ lệch ---------- */
.sc-btns{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1.7rem 2.1rem; margin-top:3rem; }
.sc-btn{
  position:relative; display:inline-flex; align-items:center; gap:.9rem; padding:1.08rem 2.1rem;
  font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; font-weight:600; white-space:nowrap;
  border:1px solid rgba(232,194,132,.5); border-radius:2px; color:var(--cream); background:rgba(232,194,132,0);
  transition:background .4s ease,color .35s ease,border-color .35s ease,box-shadow .45s ease,background-position .9s cubic-bezier(.2,.75,.2,1);
}
.sc-btn::after{
  content:'\2192'; font-family:Arial,sans-serif; font-size:1.05rem; letter-spacing:0; line-height:1;
  transition:transform .45s cubic-bezier(.2,.75,.2,1);
}
.sc-btn:hover{ color:var(--amber-light); border-color:var(--amber-light); background:rgba(232,194,132,.07); }
.sc-btn:hover::after{ transform:translateX(5px); }
.sc-btn:focus-visible{ outline:2px solid #F6E6B6; outline-offset:10px; }
.sc-btn--solid{
  color:#0D1730; border-color:transparent;
  background:linear-gradient(105deg,#a67c33 0%,#d9a441 28%,#f6e6b6 50%,#d9a441 72%,#a67c33 100%);
  background-size:220% auto; background-position:0% 50%;
  box-shadow:0 18px 40px -20px rgba(217,164,65,.6);
}
.sc-btn--solid::before{
  content:''; position:absolute; inset:-8px; border:1px solid rgba(232,194,132,.38); border-radius:2px; pointer-events:none;
  transition:inset .45s cubic-bezier(.2,.75,.2,1),border-color .45s ease;
}
.sc-btn--solid:hover{
  color:#0D1730; border-color:transparent;
  background:linear-gradient(105deg,#a67c33 0%,#d9a441 28%,#f6e6b6 50%,#d9a441 72%,#a67c33 100%);
  background-size:220% auto; background-position:100% 50%;
  box-shadow:0 22px 48px -18px rgba(217,164,65,.8);
}
.sc-btn--solid:hover::before{ inset:-5px; border-color:rgba(232,194,132,.75); }

/* ---------- chân trang ---------- */
.sc-foot{ border-top:1px solid rgba(180,136,77,.22); }
.sc-foot .sc-wrap{
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
  padding-top:2rem; padding-bottom:2rem;
}
.sc-foot span,.sc-foot a{ font-size:.8rem; color:rgba(245,241,232,.5); }
.sc-foot a{ color:var(--amber); }
.sc-foot a:hover{ color:var(--cream); }

/* ---------- hiện dần khi cuộn tới ---------- */
.sc [data-sc-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1); }
.sc [data-sc-reveal].is-in{ opacity:1; transform:none; }
/* không JS / giảm chuyển động: hiện luôn, không giấu nội dung */
.sc.no-js [data-sc-reveal]{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){
  .sc [data-sc-reveal]{ opacity:1 !important; transform:none !important; transition:none; }
  .sc-cta h2 em{ animation:none; }
  .sc-grid li,.sc-two li,.sc-btn,.sc-btn::after,.sc-btn--solid::before,.sc-steps li::before,.sc-faq-list summary{ transition:none; }
}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .sc-grid,.sc-work{ grid-template-columns:repeat(2,1fr); }
  .sc-steps{ grid-template-columns:repeat(2,1fr); gap:2.4rem 1.6rem; }
}
@media(max-width:767px){
  .sc-lead .sc-wrap{ grid-template-columns:1fr; gap:1.8rem; }
  .sc-lead .sc-wrap > div:nth-child(2){ margin-top:0; }
  .sc-grid,.sc-two,.sc-tags,.sc-work,.sc-steps{ grid-template-columns:1fr; }
  .sc h2{ max-width:none; }
  .sc-faq-list .ans{ padding-right:1rem; }
  .sc-btns{ flex-direction:column; gap:1.6rem; }
  .sc-btn{ padding:1rem 1.6rem; letter-spacing:.2em; }
}