/* Trang dịch vụ 360RVBDS + khối dịch vụ trên trang chủ */
.svc-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--g-l);color:var(--g);flex:none}
.sec--dark .svc-ic{background:rgba(94,234,212,.12);color:var(--neo);box-shadow:0 0 18px rgba(94,234,212,.22)}
.sec__head--stack{display:block;max-width:820px}
.sec__lead{margin:var(--s-4) 0 0;color:var(--ink-2);font-size:var(--t-18)}
.sec--dark .sec__lead{color:rgba(255,255,255,.72)}

/* Khối dịch vụ trên trang chủ */
.svc-teaser__head{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);align-items:end;margin-bottom:var(--s-8)}
.svc-teaser__lead{margin:0;color:var(--ink-2);font-size:var(--t-18)}
.svc-why{list-style:none;margin:0 0 var(--s-8);padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4)}
.svc-why li{display:grid;gap:var(--s-2);align-content:start;padding:var(--s-6);border-radius:var(--r-l);background:var(--soft)}
.svc-why strong{font-size:var(--t-16);margin-top:var(--s-2)}
.svc-why span:not(.svc-ic){color:var(--mute);font-size:var(--t-14)}
.svc-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
.svc-mini__card{position:relative;display:grid;gap:var(--s-1);padding:var(--s-6);border-radius:var(--r-l);border:1px solid var(--line);background:#fff;color:var(--ink);text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.svc-mini__card:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:transparent;color:var(--ink)}
.svc-mini__card.is-hl{background:var(--g-dd);color:#fff;border-color:var(--g-dd)}
.svc-mini__card.is-hl:hover{color:#fff}
.svc-mini__name{font-weight:600;font-size:var(--t-14);color:var(--mute)}
.svc-mini__card.is-hl .svc-mini__name,.svc-mini__card.is-hl .svc-mini__for{color:rgba(255,255,255,.72)}
.svc-mini__price{font-family:var(--f-d);font-variant-numeric:lining-nums;font-size:36px;font-weight:600;line-height:1.1}
.svc-mini__price small{font-size:.55em;margin-left:2px}
.svc-mini__for{font-size:var(--t-14);color:var(--mute)}
.svc-teaser__act{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-8)}
.svc-note{margin:var(--s-3) 0 0;color:var(--mute);font-size:13px}
@media (max-width:980px){.svc-teaser__head{grid-template-columns:1fr;gap:var(--s-4)}.svc-why{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.svc-why{grid-template-columns:1fr}.svc-mini{grid-template-columns:1fr}.svc-why li{padding:var(--s-4)}}

/* Banner trang dịch vụ */
.xhero--svc .xhero__title{max-width:14ch}
.xhero__act{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.xstats dd small{font-size:.45em;margin-left:4px;-webkit-text-fill-color:rgba(255,255,255,.75)}

/* Mục lục dính */
.svc-nav{position:sticky;top:var(--hdr);z-index:40;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.admin-bar .svc-nav{top:calc(var(--hdr) + 32px)}
.svc-nav__in{display:flex;gap:var(--s-1);overflow-x:auto;scrollbar-width:none;padding-top:6px;padding-bottom:6px}
.svc-nav__in::-webkit-scrollbar{display:none}
.svc-nav a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s-4);border-radius:999px;color:var(--ink-2);text-decoration:none;font-weight:500;font-size:var(--t-14);white-space:nowrap}
.svc-nav a:hover{background:var(--soft);color:var(--ink)}
.svc-nav a.is-on{color:var(--g);background:var(--g-l)}
.svc-nav a.is-cta{margin-left:auto;background:var(--g);color:#fff}
.svc-nav a.is-cta:hover{background:var(--g-d);color:#fff}
@media (max-width:782px){.admin-bar .svc-nav{top:calc(var(--hdr) + 46px)}}
@media (max-width:600px){.admin-bar .svc-nav{top:var(--hdr)}}

/* Lưới tính năng */
.fgrid{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-4)}
.fgrid--3{grid-template-columns:repeat(3,1fr)}
.fgrid--4{grid-template-columns:repeat(4,1fr)}
.fcard{display:grid;gap:var(--s-2);align-content:start;padding:var(--s-6);border-radius:var(--r-l);background:var(--soft);transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.fcard:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.fcard strong{font-size:var(--t-16);margin-top:var(--s-2)}
.fcard span:not(.svc-ic){color:var(--mute);font-size:var(--t-14);line-height:1.6}
.sec--dark .fcard{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.sec--dark .fcard:hover{border-color:rgba(94,234,212,.5);box-shadow:0 0 30px rgba(94,234,212,.12)}
.sec--dark .fcard span:not(.svc-ic){color:rgba(255,255,255,.62)}
#sa-ban-3d .fgrid{margin-top:var(--s-12)}
@media (max-width:1100px){.fgrid--4{grid-template-columns:repeat(2,1fr)}.fgrid--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.fgrid--3,.fgrid--4{grid-template-columns:1fr}.fcard{padding:var(--s-4) var(--s-4) var(--s-6);grid-template-columns:46px 1fr;column-gap:var(--s-4)}.fcard .svc-ic{grid-row:span 2}.fcard strong{margin-top:0}}
.svc-samples{margin-top:var(--s-12)}

/* Sa bàn 3D minh hoạ (CSS) */
.svc-split{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--s-12);align-items:center}
.sb-legend{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);margin-top:var(--s-6);font-size:var(--t-14);color:var(--ink-2)}
.sb-legend span{display:inline-flex;align-items:center;gap:var(--s-2)}
.sb-legend i{width:12px;height:12px;border-radius:3px}
.sb-demo{position:relative;aspect-ratio:4/3;border-radius:var(--r-xl);background:radial-gradient(ellipse at 50% 30%,#0f3b2a,#04110b 75%);overflow:hidden;box-shadow:var(--sh-3)}
.sb-demo__stage{position:absolute;inset:0;transform-style:preserve-3d;perspective:900px}
.sb-floor{position:absolute;left:10%;right:10%;top:38%;height:56%;background-image:linear-gradient(rgba(94,234,212,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(94,234,212,.25) 1px,transparent 1px);background-size:28px 28px;transform:rotateX(62deg) rotateZ(-28deg);border-radius:12px;box-shadow:0 0 60px rgba(94,234,212,.15) inset;animation:sbspin 24s linear infinite}
@keyframes sbspin{from{transform:rotateX(62deg) rotateZ(-28deg)}to{transform:rotateX(62deg) rotateZ(332deg)}}
.sb-tower{position:absolute;bottom:30%;display:flex;flex-direction:column-reverse;gap:3px;width:13%;transform:translateX(-50%)}
.sb-tower i{display:block;height:12px;border-radius:2px;background:linear-gradient(90deg,#d1fae5,#86efac);opacity:.85;box-shadow:0 0 10px rgba(134,239,172,.3)}
.sb-tower b{display:block;height:8px;border-radius:2px 2px 0 0;background:#5eead4;margin:0 20%}
.sb-tower.t1{left:34%}
.sb-tower.t2{left:54%;bottom:34%}
.sb-tower.t2 i{background:linear-gradient(90deg,#fde68a,#f59e0b)}
.sb-tower.t3{left:72%;bottom:26%}
.sb-tower.t3 i{background:linear-gradient(90deg,#e2e8f0,#94a3b8)}
.sb-tower.t1 i:nth-child(5){background:#ef4444;animation:floor 2.4s ease-in-out infinite}
@keyframes floor{50%{transform:translateX(16px);box-shadow:0 0 18px #ef4444}}
.sb-row{position:absolute;left:12%;bottom:18%;display:flex;gap:4px;transform:skewX(-20deg)}
.sb-row i{width:22px;height:16px;border-radius:2px;background:#22c55e;opacity:.85}
.sb-row i:nth-child(2),.sb-row i:nth-child(4){background:#ef4444}
.sb-road{position:absolute;left:-10%;right:-10%;bottom:12%;height:6px;background:repeating-linear-gradient(90deg,#fbbf24 0 18px,transparent 18px 30px);opacity:.6;transform:rotate(-8deg)}
.sb-tag{position:absolute;left:var(--s-4);bottom:var(--s-4);padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:13px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
@media (max-width:900px){.svc-split{grid-template-columns:1fr;gap:var(--s-8)}}

/* Bảng giá */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6);align-items:stretch}
.pcard3{position:relative;display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-8) var(--s-6) var(--s-6);border-radius:var(--r-l);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);transition:transform .25s var(--ease),box-shadow .25s}
.pcard3:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}
.pcard3.is-hl{background:var(--g-dd);color:#fff;border-color:var(--g-dd);box-shadow:0 30px 60px rgba(4,60,40,.35)}
.pcard3__flag{position:absolute;top:-13px;left:var(--s-6);padding:5px 12px;border-radius:999px;background:linear-gradient(120deg,#10b981,#2dd4bf);color:#04110b;font-size:12px;font-weight:700}
.pcard3__name{font-family:var(--f-d);font-size:var(--t-30);margin:0;display:grid}
.pcard3__name small{font-family:var(--f);font-size:var(--t-14);font-weight:500;color:var(--mute);letter-spacing:0}
.pcard3.is-hl .pcard3__name small,.pcard3.is-hl .pcard3__for{color:rgba(255,255,255,.7)}
.pcard3__price{margin:0;font-family:var(--f-d);font-variant-numeric:lining-nums;font-size:44px;font-weight:600;line-height:1}
.pcard3__price small{font-family:var(--f);font-size:var(--t-14);font-weight:500;color:var(--mute)}
.pcard3.is-hl .pcard3__price small{color:rgba(255,255,255,.7)}
.pcard3__for{margin:0;color:var(--mute);font-size:var(--t-14)}
.pcard3__list{list-style:none;margin:var(--s-2) 0 var(--s-4);padding:var(--s-4) 0 0;border-top:1px solid var(--line);display:grid;gap:var(--s-2);font-size:15px;flex:1}
.pcard3.is-hl .pcard3__list{border-top-color:rgba(255,255,255,.15)}
.pcard3__list li{display:flex;gap:var(--s-2);align-items:flex-start}
.pcard3__list .ic{color:var(--g);margin-top:4px}
.pcard3.is-hl .pcard3__list .ic{color:var(--neo)}
.pcard3.is-hl .btn--primary{background:#fff;color:var(--g-dd)}
.pcard3.is-hl .btn--primary:hover{background:var(--g-l)}
@media (max-width:980px){.plans{grid-template-columns:1fr;max-width:520px;margin:0 auto}}
.ptables{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6);margin-top:var(--s-12)}
.ptable{background:#fff;border-radius:var(--r-l);padding:var(--s-6);border:1px solid var(--line)}
.ptable h3{font-size:var(--t-18);margin:0 0 var(--s-1)}
.ptable__sub{color:var(--mute);font-size:var(--t-14);margin-bottom:var(--s-4)}
.ptable table{width:100%;border-collapse:collapse;font-size:var(--t-14)}
.ptable th{text-align:left;color:var(--mute);font-weight:500;padding:var(--s-2) var(--s-2) var(--s-2) 0;border-bottom:1px solid var(--line)}
.ptable td{padding:var(--s-3) var(--s-2) var(--s-3) 0;border-bottom:1px solid var(--line);vertical-align:top}
.ptable td:last-child{font-weight:600;white-space:nowrap;text-align:right}
.ptable th:last-child{text-align:right}
.ptable tr:last-child td{border-bottom:0}
@media (max-width:900px){.ptables{grid-template-columns:1fr}.ptable td:last-child{white-space:normal}}

/* Ước tính */
.calc{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--s-6);align-items:start}
.calc__fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);padding:var(--s-6);border-radius:var(--r-l);background:var(--soft)}
.calc__plans{grid-column:1/-1;border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2)}
.calc__plans legend{font-size:var(--t-14);font-weight:500;color:var(--ink-2);margin-bottom:var(--s-2);padding:0}
.calc__plan{position:relative;cursor:pointer}
.calc__plan input{position:absolute;opacity:0}
.calc__plan span{display:grid;gap:2px;padding:var(--s-3) var(--s-4);min-height:64px;border-radius:var(--r);background:#fff;border:1.5px solid var(--line);transition:.15s}
.calc__plan small{color:var(--mute);font-size:13px}
.calc__plan input:checked+span{border-color:var(--g);box-shadow:0 0 0 4px rgba(4,111,70,.12)}
.calc__plan input:focus-visible+span{outline:2px solid var(--g);outline-offset:2px}
.calc__f{display:grid;gap:6px;font-size:var(--t-14);font-weight:500;color:var(--ink-2)}
.calc__f small{color:var(--mute);font-weight:400}
.calc__f input,.calc__f select{min-height:48px;padding:0 var(--s-3);border:1px solid var(--line-2);border-radius:var(--r-s);background:#fff;font-size:var(--t-16)}
.calc__f input:focus,.calc__f select:focus{outline:0;border-color:var(--g);box-shadow:0 0 0 4px rgba(4,111,70,.12)}
.calc__chk{grid-column:1/-1;display:flex;align-items:center;gap:var(--s-3);min-height:44px;font-size:15px;cursor:pointer}
.calc__chk input{width:22px;height:22px;accent-color:var(--g)}
.calc__f[hidden],.calc__chk[hidden]{display:none}
.calc__out{position:sticky;top:calc(var(--hdr) + 80px);padding:var(--s-8) var(--s-6);border-radius:var(--r-l);background:var(--g-dd);color:#fff;box-shadow:0 30px 60px rgba(4,60,40,.3);overflow:hidden;isolation:isolate}
.calc__out::before{content:"";position:absolute;z-index:-1;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(16,185,129,.6),rgba(16,185,129,0) 70%)}
.calc__total{margin:0 0 var(--s-4);font-family:var(--f-d);font-variant-numeric:lining-nums tabular-nums;font-size:clamp(36px,4vw,52px);font-weight:600;line-height:1.05}
.calc__total small{font-family:var(--f);font-size:var(--t-14);color:rgba(255,255,255,.7)}
.calc__lines{list-style:none;margin:0 0 var(--s-4);padding:var(--s-4) 0 0;border-top:1px solid rgba(255,255,255,.15);display:grid;gap:var(--s-2);font-size:var(--t-14)}
.calc__lines li{display:flex;justify-content:space-between;gap:var(--s-3);color:rgba(255,255,255,.8)}
.calc__lines li b{color:#fff;font-weight:600;white-space:nowrap}
.calc__note{font-size:13px;color:rgba(255,255,255,.65);min-height:1em}
@media (max-width:900px){.calc{grid-template-columns:1fr}.calc__out{position:relative;top:auto}}
@media (max-width:560px){.calc__fields{grid-template-columns:1fr;padding:var(--s-4)}.calc__plans{grid-template-columns:1fr}}

/* Quy trình */
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s-4);counter-reset:none;position:relative}
.flow::before{content:"";position:absolute;left:5%;right:5%;top:23px;height:2px;background:linear-gradient(90deg,rgba(94,234,212,0),rgba(94,234,212,.6),rgba(94,234,212,0))}
.flow li{position:relative;display:grid;gap:var(--s-2);align-content:start;text-align:center;justify-items:center}
.flow__n{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--night-2);border:2px solid var(--neo);color:var(--neo);font-weight:700;box-shadow:0 0 20px rgba(94,234,212,.35)}
.flow strong{margin-top:var(--s-2)}
.flow span:not(.flow__n){color:rgba(255,255,255,.62);font-size:var(--t-14)}
@media (max-width:900px){.flow{grid-template-columns:1fr;gap:var(--s-6)}.flow::before{left:23px;right:auto;top:0;bottom:0;width:2px;height:auto;background:linear-gradient(180deg,rgba(94,234,212,0),rgba(94,234,212,.6),rgba(94,234,212,0))}.flow li{grid-template-columns:48px 1fr;text-align:left;justify-items:start;column-gap:var(--s-4)}.flow__n{grid-row:span 2}.flow strong{margin-top:0}}

/* Điều khoản + hỏi đáp */
.terms,.faq{display:grid;gap:var(--s-2)}
.terms details,.faq details{border-radius:var(--r);background:var(--soft);padding:0 var(--s-6);transition:background .2s}
.terms details[open],.faq details[open]{background:#fff;box-shadow:var(--sh-2)}
.terms summary,.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:60px;font-weight:600}
.terms summary::-webkit-details-marker,.faq summary::-webkit-details-marker{display:none}
.terms summary::after,.faq summary::after{content:"+";font-size:24px;font-weight:400;color:var(--g);transition:transform .2s}
.terms details[open] summary::after,.faq details[open] summary::after{transform:rotate(45deg)}
.terms p,.faq p{margin:0;padding:0 0 var(--s-6);color:var(--ink-2)}
.svc-extra{margin-top:var(--s-8)}

/* Liên hệ */
.contact{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--s-8);padding:var(--s-12);border-radius:var(--r-xl);background:var(--g-dd);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.contact::before{content:"";position:absolute;z-index:-1;left:-160px;bottom:-200px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(16,185,129,.55),rgba(16,185,129,0) 70%)}
.contact__info p:not(.eyebrow){color:rgba(255,255,255,.75)}
.contact__list{list-style:none;margin:var(--s-6) 0 0;padding:0;display:grid;gap:var(--s-2)}
.contact__list a{display:inline-flex;align-items:center;gap:var(--s-3);min-height:44px;color:#fff;text-decoration:none;font-weight:600;font-size:var(--t-18)}
.contact__list a:hover{color:var(--neo)}
.contact__list .ic{color:var(--neo)}
.contact__form{background:#fff;color:var(--ink);border-radius:var(--r-l);padding:var(--s-6);box-shadow:var(--sh-3)}
@media (max-width:900px){.contact{grid-template-columns:1fr;padding:var(--s-8) var(--s-4)}}

@media (prefers-reduced-motion:reduce){.sb-floor,.sb-tower i{animation:none!important}}
.calc>*,.calc__fields>*{min-width:0}
.calc__plans{min-width:0}
.calc__f input,.calc__f select{width:100%}
