/* Khối ảnh + video minh hoạ cho 3 trang service (thêm 5/10/2026).
   MỖI TRANG MỘT KIỂU RIÊNG, không lặp lại nhau và không lặp kiểu của about.html:
     .rv-ba       — Renovations: BEFORE / AFTER kéo so sánh (5 cặp ảnh), vách trượt chéo + tay nắm mang logo VGC
     .ad-panels   — Additions:   dải 6 tấm dọc so le, rê chuột / chạm thì tấm đó bung rộng
     .cm-cine     — Commercial:  video điện ảnh nở từ khung nhỏ ra tràn màn hình theo cuộn
     .cm-drift    — Commercial:  hai băng ảnh trôi ngược chiều nhau theo cuộn
   QUY TẮC CỦA CHỦ SITE: chỉ ảnh/video minh hoạ (CC0 StockSnap, Mixkit Free License) —
   KHÔNG lấy ảnh dự án (assets/projects/…) để trang trí. Chuyển động nằm ở service-showcase.js. */

.sv-show{ --sv-ease:cubic-bezier(.2,.7,.2,1); }
.sv-show figure{ margin:0; }
.sv-show img,.sv-show video{ display:block; width:100%; height:100%; object-fit:cover; }

/* ================= RENOVATIONS — BEFORE / AFTER kéo so sánh (6/10/2026) =================
   Ảnh AFTER nằm dưới; ảnh BEFORE nằm trong một "vách trượt" (.rv-ba-cut) rộng theo --ba (0% = toàn AFTER,
   100% = toàn BEFORE). Vách bị xô nghiêng (skewX) nên mép cắt chạy CHÉO, có bóng đổ ở mép và một tay nắm
   tròn mang logo VGC — giống đẩy một tấm vách để lộ căn phòng đã hoàn thiện. service-showcase.js đặt --ba khi rê
   chuột / kéo / bấm phím mũi tên, và tự đẩy vách một lượt khi khối cuộn vào màn hình.
   Không có JS: --ba đứng ở 50%, vẫn thấy nửa trước nửa sau. */
.rv-ba{ position:relative; }
.rv-ba-head{ margin-bottom:clamp(1.3rem,2.6vw,2.2rem); }
.rv-ba .rv-ba-eyebrow{ display:flex; align-items:center; gap:.8rem; margin:0 0 .8rem;
  font-size:.7rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:#E8C284; }
.rv-ba-eyebrow::before{ content:''; width:2.2rem; height:1px; background:#E8C284; }
.rv-ba-title{ margin:0; font-family:'Marcellus','Playfair Display',serif; font-weight:400;
  font-size:clamp(1.9rem,3.8vw,3.1rem); line-height:1.08; color:#F5F1E8; text-wrap:balance; }
.rv-ba-title em{ font-family:'Cormorant Garamond','Playfair Display',serif; font-style:italic; font-weight:500; font-size:1.1em; color:#E8C284; }

/* khung: sân khấu + khung chỉ vàng lệch xuống-phải + huy hiệu + nhãn dọc */
.rv-ba-frame{ position:relative; }
.rv-ba-frame::before{ content:''; position:absolute; inset:18px -18px -18px 18px;
  border:1px solid rgba(180,136,77,.5); pointer-events:none; }
.rv-ba-stage{ --ba:50%; --ba-tilt:7deg; --ba-ext:90px; position:relative; overflow:hidden; width:100%; aspect-ratio:16 / 10; max-height:min(80vh,740px);
  container-type:inline-size; background:#0A1226; cursor:ew-resize; touch-action:pan-y; user-select:none; -webkit-user-select:none;
  box-shadow:0 44px 90px -40px rgba(0,0,0,.9); }
.rv-ba-stage::after{ content:''; position:absolute; inset:0; z-index:6; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(180,136,77,.38); }
/* dải tối ở đỉnh + đáy cho chữ dễ đọc */
.rv-ba-stage::before{ content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(180deg,rgba(13,23,48,.6) 0%,rgba(13,23,48,0) 26%,rgba(13,23,48,0) 62%,rgba(13,23,48,.78) 100%); }
.rv-ba-scene{ position:absolute; inset:0; transition:opacity .5s ease,transform 1.1s var(--sv-ease); }
.rv-ba-scene .rv-ba-img{ position:absolute; inset:0; pointer-events:none; -webkit-user-drag:none; }
/* vách trượt: kéo dài thêm --ba-ext về bên trái để mép trái (cũng bị nghiêng) nằm khuất ngoài khung.
   Vách xô nghiêng quanh điểm giữa-trái; ảnh bên trong xô ngược lại quanh ĐÚNG điểm đó nên ảnh vẫn đứng thẳng,
   khít từng điểm ảnh với ảnh AFTER — chỉ có mép cắt là chéo. */
.rv-ba-cut{ position:absolute; top:0; bottom:0; left:calc(var(--ba-ext) * -1); width:calc(var(--ba) + var(--ba-ext)); overflow:hidden; z-index:1;
  transform-origin:0 50%; transform:skewX(calc(var(--ba-tilt) * -1)); will-change:width; }
.rv-ba-cut .rv-ba-img{ inset:0 auto 0 var(--ba-ext); width:var(--ba-w,100%); max-width:none;
  transform-origin:calc(var(--ba-ext) * -1) 50%; transform:skewX(var(--ba-tilt)); }
/* bề rộng ảnh = bề rộng khung: trình duyệt mới tự tính bằng cqw, máy cũ dùng --ba-w do JS đo */
@supports (width:1cqw){ .rv-ba-cut .rv-ba-img{ width:100cqw; } }
/* bóng đổ sát mép vách → có chiều sâu, như tấm vách nằm trước căn phòng */
.rv-ba-cut::before{ content:''; position:absolute; top:0; bottom:0; right:0; width:clamp(50px,9cqw,110px); z-index:1;
  background:linear-gradient(90deg,rgba(6,10,22,0),rgba(6,10,22,.5)); }
/* chỉ vàng mảnh chạy dọc mép vách */
.rv-ba-cut::after{ content:''; position:absolute; top:0; bottom:0; right:0; width:1px; z-index:2;
  background:linear-gradient(180deg,rgba(245,217,168,.25),#F5D9A8 16%,#F5D9A8 84%,rgba(245,217,168,.25)); }
/* đổi cặp ảnh: cảnh cũ lùi mờ, cảnh mới hiện ra rồi vách tự trượt mở */
.rv-ba.is-swapping .rv-ba-scene{ opacity:0; transform:scale(1.03); }
.rv-ba.is-swapping .rv-ba-pull,.rv-ba.is-swapping .rv-ba-tag,.rv-ba.is-swapping .rv-ba-room{ opacity:0; }

/* tay nắm trên mép vách: một "núm xoay" kiểu vành đồng hồ cao cấp.
     i          vành kim loại vàng (conic-gradient) — vệt sáng trên vành dịch chuyển theo vị trí vách (--ba-n)
     i::before  khía răng cưa quanh vành, XOAY theo vị trí vách → kéo vách thì núm quay như núm thật
     b          mặt men navy lõm xuống;  b::before chỉ vàng mảnh;  b::after logo VGC dập nổi, tô vàng kim có vệt sáng lướt
   Logo vẽ bằng mask từ assets/vgc-mark-white.png. --ba-n (số 0…100) do service-showcase.js đặt cùng lúc với --ba. */
.rv-ba-pull{ --ba-gem:clamp(60px,8cqw,90px); position:absolute; z-index:4; left:var(--ba); top:50%; width:0; height:0; pointer-events:none; transition:opacity .3s ease; }
.rv-ba-pull i{ position:absolute; left:calc(var(--ba-gem) / -2); top:calc(var(--ba-gem) / -2); width:var(--ba-gem); height:var(--ba-gem); border-radius:50%;
  background:conic-gradient(from calc(var(--ba-n,50) * 2.4deg - 40deg),
    #6f5222 0deg,#f7e6b6 38deg,#c79a4f 76deg,#8a672f 118deg,#fff6dc 162deg,#b4884d 204deg,#6f5222 246deg,#f1d79c 292deg,#a97f43 330deg,#6f5222 360deg);
  box-shadow:0 0 0 1.5px rgba(6,10,22,.9),0 20px 44px rgba(0,0,0,.7),0 0 42px rgba(232,194,132,.3);
  transition:transform .5s var(--sv-ease),box-shadow .5s ease; }
.rv-ba-pull i::before{ content:""; position:absolute; inset:0; border-radius:50%;
  background:repeating-conic-gradient(rgba(54,36,8,.62) 0deg 1.5deg,rgba(54,36,8,0) 1.5deg 6deg);
  -webkit-mask:radial-gradient(closest-side,transparent 0 84%,#000 85% 100%); mask:radial-gradient(closest-side,transparent 0 84%,#000 85% 100%);
  transform:rotate(calc(var(--ba-n,50) * 3.6deg)); }
/* mép sáng mảnh ôm lấy mặt men — tách vành với mặt */
.rv-ba-pull i::after{ content:""; position:absolute; inset:8.5%; border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,246,220,.55),0 0 0 2px rgba(60,40,10,.5); }
.rv-ba-pull b{ position:absolute; inset:9%; border-radius:50%;
  background:radial-gradient(circle at 32% 22%,#2c4077 0%,#15224a 42%,#070c1d 100%);
  box-shadow:inset 0 3px 8px rgba(0,0,0,.75),inset 0 -1px 0 rgba(255,246,220,.12); }
.rv-ba-pull b::before{ content:""; position:absolute; inset:7%; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(232,194,132,.32); }
/* logo: hạ nhẹ xuống vì hình tam giác chúc xuống trông cao hơn tâm thật */
.rv-ba-pull b::after{ content:""; position:absolute; inset:27% 23% 21%;
  background:linear-gradient(112deg,#a97f43 0%,#e8c284 26%,#fffaf0 44%,#f1d79c 56%,#b4884d 78%,#8a672f 100%) 100% 0 / 260% 100%;
  -webkit-mask:url(vgc-mark-white.png) center / contain no-repeat; mask:url(vgc-mark-white.png) center / contain no-repeat;
  filter:drop-shadow(0 1px 0 rgba(255,250,240,.35)) drop-shadow(0 2px 3px rgba(0,0,0,.7)); animation:rvBaSheen 5.5s ease-in-out infinite; }
@keyframes rvBaSheen{ 0%,55%{ background-position:100% 0; } 85%,100%{ background-position:0 0; } }
/* hai mũi tên hai bên núm: kim vàng thon nhọn, hai mặt vát sáng–tối như kim đồng hồ (vẽ bằng SVG nhúng).
   Nhích nhẹ ra vào để mời kéo; người xem chạm rồi thì đứng yên. Mũi bên phải là mũi bên trái lật ngang. */
.rv-ba-pull::before,.rv-ba-pull::after{ content:""; position:absolute; top:calc(var(--ba-gem) * -.081); width:calc(var(--ba-gem) * .46); height:calc(var(--ba-gem) * .162);
  background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 34 12%27%3E%3Cpath d=%27M1 6 33 1 26 6 33 11Z%27 fill=%27none%27 stroke=%27%23080e20%27 stroke-width=%271.6%27 stroke-linejoin=%27round%27/%3E%3Cpath d=%27M1 6 33 1 26 6Z%27 fill=%27%23f7e2b0%27/%3E%3Cpath d=%27M1 6 33 11 26 6Z%27 fill=%27%239a7436%27/%3E%3C/svg%3E") center / 100% 100% no-repeat; filter:drop-shadow(0 3px 7px rgba(0,0,0,.7)); }
.rv-ba-pull::before{ right:calc(var(--ba-gem) / 2 + var(--ba-gem) * .2); animation:rvBaNudgeL 2.2s var(--sv-ease) infinite; }
.rv-ba-pull::after{ left:calc(var(--ba-gem) / 2 + var(--ba-gem) * .2); transform:scaleX(-1); animation:rvBaNudgeR 2.2s var(--sv-ease) infinite; }
@keyframes rvBaNudgeL{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(-7px); } }
@keyframes rvBaNudgeR{ 0%,100%{ transform:scaleX(-1) translateX(0); } 50%{ transform:scaleX(-1) translateX(-7px); } }
.rv-ba-stage.is-touched .rv-ba-pull::before,.rv-ba-stage.is-touched .rv-ba-pull::after{ animation:none; opacity:.85; transition:opacity .4s ease; }
.rv-ba-stage.is-drag .rv-ba-pull i{ transform:scale(1.07);
  box-shadow:0 0 0 1.5px rgba(6,10,22,.9),0 26px 54px rgba(0,0,0,.75),0 0 60px rgba(245,217,168,.5); }
.rv-ba-stage:has(.rv-ba-range:focus-visible) .rv-ba-pull i{ box-shadow:0 0 0 2px #F5F1E8,0 20px 44px rgba(0,0,0,.7),0 0 42px rgba(232,194,132,.3); }
/* thanh trượt thật (ẩn) để bàn phím và trình đọc màn hình dùng được */
.rv-ba-range{ position:absolute; inset:0; z-index:2; width:100%; height:100%; margin:0; opacity:0; pointer-events:none; }

/* nhãn Before / After: chữ serif nghiêng cỡ lớn ở hai góc trên, gạch chân bằng một chỉ vàng tan dần.
   "After" tô dải vàng kim giống chữ nghiêng trong các tiêu đề của trang. Nhãn nào bị vách che gần hết thì tự ẩn. */
.rv-ba-tag{ position:absolute; top:clamp(.9rem,2.2cqw,1.9rem); z-index:5; pointer-events:none; padding-bottom:.32em;
  font-family:'Cormorant Garamond','Playfair Display',serif; font-style:italic; font-weight:500; text-transform:none;
  font-size:clamp(1.7rem,3.7cqw,2.9rem); line-height:1; letter-spacing:.01em; color:#F5F1E8;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.75)); transition:opacity .5s ease,transform .6s var(--sv-ease); }
.rv-ba-tag::after{ content:''; position:absolute; bottom:0; height:1px; width:calc(100% + 1.6rem); }
.rv-ba-tag.is-before{ left:clamp(1.1rem,2.6cqw,2.2rem); }
.rv-ba-tag.is-before::after{ left:0; background:linear-gradient(90deg,#E8C284,rgba(232,194,132,0)); }
.rv-ba-tag.is-after{ right:clamp(1.1rem,2.6cqw,2.2rem); 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; }
.rv-ba-tag.is-after::after{ right:0; background:linear-gradient(270deg,#E8C284,rgba(232,194,132,0)); }
.rv-ba-stage.hide-before .rv-ba-tag.is-before{ opacity:0; transform:translateX(-14px); }
.rv-ba-stage.hide-after .rv-ba-tag.is-after{ opacity:0; transform:translateX(14px); }

/* tên phòng + số thứ tự ở đáy ảnh */
.rv-ba-cap{ position:absolute; z-index:5; left:clamp(1rem,2.2vw,1.8rem); right:clamp(1rem,2.2vw,1.8rem); bottom:clamp(.9rem,2vw,1.6rem);
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; pointer-events:none; }
.rv-ba .rv-ba-room{ margin:0; font-family:'Marcellus','Playfair Display',serif; font-size:clamp(1.35rem,2.6vw,2.2rem); line-height:1.1;
  color:#F5F1E8; text-shadow:0 2px 18px rgba(0,0,0,.7); transition:opacity .3s ease; }
.rv-ba-room small{ display:block; margin-bottom:.5rem; font-family:'Cormorant Garamond','Playfair Display',serif; font-style:italic;
  font-size:.62em; letter-spacing:.06em; color:#E8C284; }
.rv-ba-hint{ display:flex; align-items:center; gap:.7rem; font-size:.6rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(245,241,232,.9); text-shadow:0 1px 10px rgba(0,0,0,.8); white-space:nowrap; transition:opacity .5s ease; }
.rv-ba-hint::before{ content:''; width:1.6rem; height:1px; background:#E8C284; }
.rv-ba-stage.is-touched .rv-ba-hint{ opacity:0; }

/* dưới ảnh: mô tả bên trái, 5 ảnh nhỏ để đổi phòng bên phải */
.rv-ba-foot{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.55fr); gap:clamp(1.4rem,3.4vw,3.2rem);
  align-items:start; margin-top:clamp(2rem,3.4vw,2.9rem); }
.rv-ba .rv-ba-text{ margin:0; max-width:40ch; font-size:1rem; line-height:1.7; color:rgba(245,241,232,.82);
  transition:opacity .3s ease,transform .3s ease; }
.rv-ba.is-swapping .rv-ba-text{ opacity:0; transform:translateY(8px); }
.rv-ba .rv-ba-note{ margin:1.1rem 0 0; padding-top:1rem; border-top:1px solid rgba(180,136,77,.28); max-width:40ch;
  font-size:.82rem; line-height:1.65; letter-spacing:.02em; color:rgba(245,241,232,.72); }
/* tên công ty không bị ngắt giữa chừng; đường dẫn nằm riêng một dòng bên dưới */
.rv-ba-note .nw{ white-space:nowrap; }
.rv-ba-note a{ display:block; width:fit-content; margin-top:.7rem; color:#E8C284; text-decoration:none; border-bottom:1px solid rgba(232,194,132,.4);
  font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; padding-bottom:.25em; }
.rv-ba-note a:hover{ border-bottom-color:#E8C284; }
.rv-ba-nav{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(.45rem,.9vw,.8rem); }
.rv-ba-nav button{ display:block; width:100%; padding:.7rem 0 0; border:0; background:none; cursor:pointer; position:relative;
  text-align:left; font:inherit; color:inherit; -webkit-tap-highlight-color:transparent; }
/* vạch chỉ phía trên ảnh nhỏ: chạy đầy khi phòng đó đang được chọn */
.rv-ba-nav button::before,.rv-ba-nav button::after{ content:''; position:absolute; top:0; left:0; height:1px; }
.rv-ba-nav button::before{ width:100%; background:rgba(180,136,77,.3); }
.rv-ba-nav button::after{ width:0; background:#E8C284; transition:width .6s var(--sv-ease); }
.rv-ba-nav button[aria-pressed="true"]::after{ width:100%; }
.rv-ba-nav .th{ display:block; position:relative; overflow:hidden; aspect-ratio:10 / 7; background:#0A1226; }
.rv-ba-nav .th img{ filter:saturate(.45) brightness(.55); transition:transform 1s var(--sv-ease),filter .5s ease; }
.rv-ba-nav button:hover .th img,.rv-ba-nav button:focus-visible .th img,.rv-ba-nav button[aria-pressed="true"] .th img{ filter:none; transform:scale(1.06); }
.rv-ba-nav b{ display:block; margin-top:.65rem; font-size:.58rem; font-weight:600; letter-spacing:.18em; line-height:1.5; text-transform:uppercase;
  color:rgba(245,241,232,.55); transition:color .35s ease; }
.rv-ba-nav button:hover b,.rv-ba-nav button[aria-pressed="true"] b{ color:#E8C284; }
.rv-ba-nav button:focus-visible{ outline:1px solid #E8C284; outline-offset:4px; }
/* nhãn dọc + vạch chỉ vàng ở lề trái của khung ảnh */
.rv-vert{ position:absolute; right:100%; bottom:0; margin-right:clamp(.9rem,1.8vw,1.5rem);
  display:flex; flex-direction:column; align-items:center; gap:.9rem; }
.rv-vert::before{ content:''; width:1px; height:3.2rem; background:rgba(180,136,77,.6); }
.rv-vert span{ writing-mode:vertical-rl; font-size:.6rem; letter-spacing:.34em; text-transform:uppercase;
  color:rgba(232,194,132,.8); white-space:nowrap; }

/* ================= ADDITIONS — dải tấm dọc bung rộng ================= */
.ad-panels{ position:relative; display:flex; gap:clamp(.4rem,.8vw,.7rem); height:clamp(380px,46vw,580px); }
.ad-panel{ position:relative; flex:1 1 0; min-width:0; overflow:hidden; cursor:pointer; background:#0A1226;
  transition:flex-grow .8s var(--sv-ease); outline:none; }
.ad-panel:nth-child(odd){ margin-bottom:clamp(18px,2.6vw,34px); }
.ad-panel:nth-child(even){ margin-top:clamp(18px,2.6vw,34px); }
.ad-panel img,.ad-panel video{ position:absolute; inset:0; filter:saturate(.55) brightness(.5);
  transition:filter .8s var(--sv-ease),transform 1.4s var(--sv-ease); transform:scale(1.08); }
.ad-panel::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(13,23,48,0) 50%,rgba(13,23,48,.8) 100%);
  box-shadow:inset 0 0 0 1px rgba(180,136,77,.26); transition:box-shadow .6s ease; }
.ad-panel.is-open{ flex-grow:4.6; }
.ad-panel.is-open img,.ad-panel.is-open video{ filter:none; transform:scale(1); }
.ad-panel.is-open::after{ box-shadow:inset 0 0 0 1px rgba(232,194,132,.7); }
.ad-panel:focus-visible{ box-shadow:0 0 0 2px #E8C284; }
/* số thứ tự serif nghiêng + vạch vàng mọc dài ra khi tấm mở */
.ad-num{ position:absolute; z-index:2; left:clamp(.7rem,1.3vw,1.1rem); bottom:clamp(.7rem,1.3vw,1.1rem);
  font-family:'Playfair Display',serif; font-style:italic; font-weight:600; line-height:1;
  font-size:clamp(1.1rem,2vw,1.7rem); color:#E8C284; display:flex; align-items:center; gap:.7rem; }
/* tên hạng mục (lấy đúng từ "What we build" của trang) chỉ hiện khi tấm mở: số → vạch vàng mọc ra → tên */
.ad-num b{ order:2; font-family:'Archivo',sans-serif; font-style:normal; font-weight:500; font-size:.62rem;
  letter-spacing:.24em; text-transform:uppercase; color:#F5F1E8; white-space:nowrap;
  opacity:0; transition:opacity .5s ease; }
.ad-panel.is-open .ad-num b{ opacity:1; transition-delay:.45s; }
.ad-num::after{ content:''; order:1; height:1px; width:0; background:#E8C284; transition:width .8s var(--sv-ease) .15s; }
.ad-panel.is-open .ad-num::after{ width:clamp(1.6rem,3.4vw,3rem); }
/* nhãn dọc ở lề phải của cả dải */
.ad-vert{ position:absolute; right:calc(clamp(1.1rem,2.2vw,2rem) * -1); top:0; writing-mode:vertical-rl;
  font-size:.6rem; letter-spacing:.34em; text-transform:uppercase; color:rgba(232,194,132,.8); white-space:nowrap; }

/* ================= COMMERCIAL — video điện ảnh nở ra + hai băng ảnh trôi ngược chiều ================= */
.sc section.cm-show{ padding-left:0; padding-right:0; overflow:hidden; }
.cm-cine{ position:relative; height:clamp(340px,78vh,760px); }
.cm-cine-frame{ position:absolute; inset:0; overflow:hidden; background:#0A1226; will-change:clip-path; }
.cm-cine-frame video{ position:absolute; inset:0; will-change:transform; }
.cm-cine-frame::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(13,23,48,.55) 0%,rgba(13,23,48,0) 26%,rgba(13,23,48,0) 62%,rgba(13,23,48,.88) 100%); }
.cm-cine-line{ position:absolute; z-index:2; inset:clamp(14px,2vw,26px); border:1px solid rgba(232,194,132,.42); pointer-events:none; }
.cm-cine-tag{ position:absolute; z-index:3; bottom:clamp(2rem,4.4vw,3.4rem); font-size:.62rem; letter-spacing:.3em;
  text-transform:uppercase; color:#E8C284; display:flex; align-items:center; gap:.9rem; white-space:nowrap; }
.cm-cine-tag::before{ content:''; width:clamp(1.6rem,4vw,3.4rem); height:1px; background:#E8C284; }
.cm-cine-tag.l{ left:clamp(2rem,5vw,4.4rem); }
.cm-cine-tag.r{ right:clamp(2rem,5vw,4.4rem); flex-direction:row-reverse; }
.cm-drift{ margin-top:clamp(.8rem,1.4vw,1.2rem); display:flex; flex-direction:column; gap:clamp(.6rem,1vw,.9rem); overflow:hidden; }
.cm-row{ display:flex; gap:clamp(.6rem,1vw,.9rem); width:max-content; will-change:transform; }
.cm-row figure{ position:relative; flex:none; overflow:hidden; background:#0A1226; }
.cm-row figure::after{ content:''; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(180,136,77,.28); }
.cm-row img{ transition:transform 1.1s var(--sv-ease),filter .6s ease; filter:saturate(.85); }
.cm-row figure:hover img{ transform:scale(1.06); filter:none; }
.cm-row-a figure{ height:max(20vw,150px); }
.cm-row-b figure{ height:max(15vw,120px); }
.cm-row .p{ aspect-ratio:3 / 4; }
.cm-row .l{ aspect-ratio:3 / 2; }

/* ================= tablet / mobile ================= */
@media(max-width:767px){
  /* before/after: ảnh cao hơn cho dễ kéo, phần dưới xếp một cột, dải ảnh nhỏ vuốt ngang */
  .rv-ba-frame::before{ display:none; }
  .rv-ba-stage{ aspect-ratio:4 / 3; max-height:none; }
  .rv-ba-stage{ --ba-ext:60px; }
  .rv-ba-hint{ display:none; }
  .rv-ba-foot{ grid-template-columns:1fr; }
  .rv-ba-nav{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:34%; overflow-x:auto; padding-bottom:.4rem;
    scroll-snap-type:x proximity; scrollbar-width:none; }
  .rv-ba-nav li{ scroll-snap-align:start; }
  .rv-vert{ display:none; }
  /* dải tấm → lưới 2 cột, tấm nào cũng hiện rõ (không cần rê chuột) */
  .ad-panels{ display:grid; grid-template-columns:1fr 1fr; height:auto; gap:.6rem; }
  .ad-panel,.ad-panel:nth-child(odd),.ad-panel:nth-child(even){ aspect-ratio:3 / 4; margin:0; }
  .ad-panel img,.ad-panel video{ filter:none; transform:none; }
  /* lưới 2 cột: tấm nào cũng hiện tên, xếp số trên — tên dưới cho vừa ô hẹp */
  .ad-num{ flex-direction:column; align-items:flex-start; gap:.35rem; right:.7rem; }
  .ad-num::after{ display:none; }
  .ad-num b{ opacity:1; white-space:normal; font-size:.56rem; letter-spacing:.16em; line-height:1.5; }
  .ad-vert{ display:none; }
  .cm-cine-tag.r{ display:none; }
  .cm-cine{ height:clamp(240px,62vw,420px); }  /* video 16:9 — khung 78vh trên điện thoại sẽ cắt mất gần hết hai bên */
}
@media(prefers-reduced-motion:reduce){
  .rv-ba-pull::before,.rv-ba-pull::after,.rv-ba-pull b::after{ animation:none; }
  .sv-show img,.sv-show video,.ad-panel,.ad-num::after,.rv-ba-text,.rv-ba-nav button::after{ transition:none; }
}

/* ================= ẢNH TRÊN TỪNG THẺ NỘI DUNG (.sc-grid / .sc-tags) =================
   Mỗi thẻ một ảnh khớp đúng tiêu đề của thẻ. Ảnh tràn sát 3 mép trên của thẻ: lề âm = đúng padding của thẻ
   trong service-content.css (.sc-grid li: clamp(1.8rem,2.8vw,2.5rem) trên, clamp(1.5rem,2.4vw,2.1rem) hai bên;
   .sc-tags li: clamp(1.6rem,2.5vw,2.2rem) cả bốn phía) — đổi padding thẻ bên đó thì sửa 2 dòng lề âm ở đây. */
.sv-card-img{ position:relative; overflow:hidden; background:#0A1226; aspect-ratio:16 / 10; }
.sc-grid li > .sv-card-img{ margin:calc(clamp(1.8rem,2.8vw,2.5rem) * -1) calc(clamp(1.5rem,2.4vw,2.1rem) * -1) clamp(1.3rem,2vw,1.7rem); }
.sc-tags li > .sv-card-img{ aspect-ratio:21 / 9; margin:calc(clamp(1.6rem,2.5vw,2.2rem) * -1) calc(clamp(1.6rem,2.5vw,2.2rem) * -1) clamp(1.2rem,1.9vw,1.6rem); }
.sv-card-img img{ display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.8) brightness(.9);
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter .6s ease; }
/* ảnh tan dần vào mặt thẻ ở mép dưới */
.sv-card-img::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(13,23,48,0) 48%,rgba(13,23,48,.82) 100%); }
.sc-grid li:hover .sv-card-img img,.sc-tags li:hover .sv-card-img img{ transform:scale(1.06); filter:none; }
@media(prefers-reduced-motion:reduce){ .sv-card-img img{ transition:none; } }

/* ================= COMMERCIAL — khối "BẬT ĐÈN" ở phần mở đầu (6/10/2026) =================
   --lit (0 → 1) do service-showcase.js đặt theo tiến độ cuộn: 0 = phòng tối, 1 = sáng hẳn.
   Mặc định --lit:1 nên không có JS thì mọi thứ vẫn sáng đủ. Biển neon chỉ "tắt" khi <html> có .sv-js. */
.cm-lights{ --lit:1; grid-column:1 / -1; position:relative; display:grid; grid-template-columns:1.7fr 1fr;
  gap:clamp(.6rem,1.2vw,1rem); margin-top:clamp(1rem,2.4vw,2rem); }
.cm-lights figure{ margin:0; position:relative; overflow:hidden; background:#04070d; height:clamp(230px,30vw,400px); }
.cm-lights figure::after{ content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(180,136,77,.3); }
.cm-lights img{ display:block; width:100%; height:100%; object-fit:cover; }
/* phòng: sáng dần theo --lit, hình trôi nhẹ bên trong khung */
.cm-lights-room img{ position:absolute; left:0; top:-8%; height:116%; will-change:transform,filter;
  filter:brightness(calc(.14 + .86 * var(--lit))) saturate(calc(.2 + .8 * var(--lit))); }
.cm-lights-room::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(60% 70% at 62% 42%,rgba(255,214,150,.22),rgba(255,214,150,0) 70%); opacity:var(--lit); mix-blend-mode:screen; }
/* biển neon: tắt → chớp → sáng */
html.sv-js .cm-lights-sign img{ filter:brightness(.13) grayscale(1); }
html.sv-js .cm-lights-sign.is-on img{ filter:none; animation:cmNeon 1.5s steps(1,end) 1; }
@keyframes cmNeon{
  0%{ filter:brightness(.13) grayscale(1) } 9%{ filter:none } 15%{ filter:brightness(.2) grayscale(1) }
  24%{ filter:none } 31%{ filter:brightness(.32) grayscale(.7) } 40%,100%{ filter:none }
}
.cm-lights-sign::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; transition:opacity .9s ease .5s;
  background:radial-gradient(55% 55% at 50% 50%,rgba(255,150,80,.2),rgba(255,150,80,0) 72%); mix-blend-mode:screen; }
.cm-lights-sign.is-on::before{ opacity:1; }
/* thanh tiến độ: Lease signed —●——— Opening day */
.cm-lights-rail{ grid-column:1 / -1; display:flex; align-items:center; gap:clamp(.8rem,1.6vw,1.4rem); margin-top:.5rem;
  font-size:.62rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:#E8C284; white-space:nowrap; }
.cm-lights-rail i{ position:relative; flex:1; height:1px; background:rgba(180,136,77,.28); }
.cm-lights-rail i::before{ content:""; position:absolute; left:0; top:0; height:1px; width:calc(var(--lit) * 100%); background:#E8C284; }
.cm-lights-rail b{ position:absolute; top:50%; left:calc(var(--lit) * 100%); width:9px; height:9px; border-radius:50%; background:#F5D9A8;
  transform:translate(-50%,-50%); box-shadow:0 0 0 4px rgba(232,194,132,.16),0 0 18px rgba(232,194,132,.85); }

/* ba con số: mỗi ô có ảnh nền tối phía sau, rê chuột thì ảnh sáng lên */
.cm-stats.cm-stats--img li{ position:relative; overflow:hidden; padding-left:clamp(1.2rem,2.4vw,2.2rem); }
.cm-stat-bg{ position:absolute; inset:0; z-index:0; }
.cm-stat-bg img{ position:absolute; left:0; top:-8%; width:100%; height:116%; object-fit:cover; display:block; will-change:transform;
  filter:brightness(.36) saturate(.55); transition:filter .7s ease; }
.cm-stat-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(13,23,48,.5) 0%,rgba(13,23,48,.86) 100%); }
.cm-stats--img li > :not(.cm-stat-bg){ position:relative; z-index:1; }
.cm-stats--img li:hover .cm-stat-bg img{ filter:brightness(.62) saturate(.95); }
.cm-stats.cm-stats--img .sub{ color:rgba(245,241,232,.8); }
@media(max-width:700px){
  .cm-lights{ grid-template-columns:1fr; }
  .cm-lights figure{ height:clamp(190px,56vw,280px); }
  .cm-lights-rail{ font-size:.54rem; letter-spacing:.18em; }
}
@media(prefers-reduced-motion:reduce){ .cm-stat-bg img{ transition:none; } }