/* Dịch vụ page: hero, four service groups with expandable rows, Duo Lifting box, signature box, directory.
   Uses the shared tokens from noir.css (--ink, --ivory, --sand, --mist, --brand, --rose, --r-card, --r-sm). */
body.svp{background:var(--ivory);color:var(--ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* hero: text on navy at the left, the consultation photo fades in from the right */
.svh{position:relative;min-height:clamp(560px,88svh,820px);display:flex;align-items:center;color:var(--ivory);background:#05112B;overflow:hidden}
.svh .wrap{width:100%;max-width:1160px;padding-top:128px;padding-bottom:72px;position:relative;z-index:2}
.svh-ph{position:absolute;inset:0 0 0 36%;background:url(../assets/img/services/hero.webp) 26% 42%/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.4) 7%,rgba(0,0,0,.85) 16%,#000 26%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.4) 7%,rgba(0,0,0,.85) 16%,#000 26%)}
.svh-t{max-width:560px}
.svh h1{font:300 clamp(36px,4.4vw,64px)/1.12 var(--serif);letter-spacing:-.012em;margin:0}
.svh h1 em{display:block;color:var(--rose);font-style:italic;white-space:normal}
.svh-p{margin:22px 0 0;max-width:440px;font-size:16px;line-height:1.7;color:rgba(243,248,250,.86);text-align:left}
.svh .o1cta{margin-top:30px}
@media(max-width:900px){
 .svh{min-height:0;align-items:flex-start}
 .svh-ph{inset:auto 0 0 0;height:clamp(280px,70vw,460px);background-position:30% 38%;-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 22%,#000 46%);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 22%,#000 46%)}
 .svh .wrap{padding-top:112px;padding-bottom:clamp(300px,74vw,480px)}
 .svh-t{max-width:none}
}

/* service groups */
.svg{padding:clamp(56px,7vw,104px) 0;background:var(--ivory)}
.svg.alt{background:var(--mist)}
.svg-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:center}
.svg.alt .svg-ph{order:2}
.svg-ph{margin:0;width:100%;aspect-ratio:4/5;max-height:660px;border-radius:var(--r-card);overflow:hidden;background:var(--tint);box-shadow:0 34px 50px -36px rgba(10,26,50,.55)}
.svg-ph img{width:100%;height:100%;object-fit:cover;display:block}
.svg-n{margin:0 0 14px;font:400 11px/1 var(--sans);letter-spacing:.2em;color:var(--brand-d)}
.svg h2{font:300 var(--t-sub)/1.2 var(--serif);letter-spacing:-.012em;margin:0 0 18px;color:var(--ink)}
.svg-lead{margin:0 0 26px;max-width:56ch;font-size:16px;line-height:1.7;color:var(--body);text-align:left}
.svg-cta{margin-top:30px}

/* service rows: plain text with an arrow that turns down when open */
.sv-rows{border-bottom:1px solid var(--lineD)}
.sv-row{border-top:1px solid var(--lineD)}
.sv-rt{margin:0;font:inherit}
.sv-rh{width:100%;display:flex;align-items:center;gap:14px;min-height:58px;padding:16px 2px;background:none;border:0;color:var(--ink);font:500 18px/1.35 var(--sans);letter-spacing:-.003em;text-align:left;cursor:pointer;transition:color .25s}
.sv-rh:hover{color:var(--brand)}
.sv-rh:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
.sv-rn{flex:1;min-width:0}
.sv-tag{flex:none;font:400 12px/1.3 var(--sans);color:var(--grey)}
.sv-chev{flex:none;color:var(--grey);transition:transform .35s var(--ease),color .25s}
.sv-rh:hover .sv-chev{color:var(--brand)}
.sv-rh[aria-expanded=true] .sv-chev{transform:rotate(90deg);color:var(--brand)}
.sv-rb{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--ease)}
.sv-rb.open{grid-template-rows:1fr}
.sv-rbi{overflow:hidden;min-height:0}
.sv-ri{padding:0 2px 24px;max-width:62ch}
.sv-d{margin:0 0 6px;font-size:16px;line-height:1.7;color:var(--body);text-align:left}
.sv-oh{margin:18px 0 10px;font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--brand-d)}
.sv-ol{list-style:none;margin:0 0 4px;padding:0;display:grid;gap:10px}
.sv-ol li{font-size:14px;line-height:1.65;color:var(--body)}
.sv-ol b{font-weight:500;color:var(--ink)}
.sv-link{display:inline-block;margin-top:14px;font:500 13px/1.4 var(--sans);color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(10,26,50,.35);transition:color .25s,text-decoration-color .25s}
.sv-link:hover{color:var(--brand);text-decoration-color:var(--brand)}
.sv-link:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}

/* Duo Lifting box (under group 01) */
.svduo{margin-top:clamp(40px,5vw,72px);position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;padding:clamp(32px,5vw,68px);border-radius:var(--r-card);overflow:hidden;color:var(--ivory);background:linear-gradient(90deg,rgba(5,17,43,.97) 0,rgba(5,17,43,.9) 46%,rgba(5,17,43,.6) 100%),url(../assets/img/about/consult.jpg) center/cover,#0A1A32;box-shadow:0 40px 60px -40px rgba(5,17,43,.7)}
.svx-k{margin:0 0 14px;font:400 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--rose)}
.svduo h3{font:300 var(--t-sub)/1.15 var(--serif);letter-spacing:-.012em;margin:0 0 16px}
.svduo h3 em{color:var(--rose)}
.svduo-tx>p:not(.svx-k){margin:0 0 26px;max-width:46ch;font-size:16px;line-height:1.7;color:rgba(243,248,250,.86);text-align:left}
.svduo-m{list-style:none;margin:0;padding:0;display:grid;justify-items:start}
.svduo-m li:not(.pl){width:100%;padding:16px 0;border-top:1px solid rgba(243,248,250,.2);font:300 clamp(22px,2.3vw,30px)/1.2 var(--serif);letter-spacing:-.01em}
.svduo-m li:nth-last-child(1){border-bottom:1px solid rgba(243,248,250,.2)}
.svduo-m .pl{display:none}

/* signature box (under group 02) */
.svsig{margin-top:clamp(28px,3.5vw,48px);padding:clamp(28px,4.2vw,60px);border-radius:var(--r-card);background:var(--sand)}
.svsig h3{margin:0;font:300 var(--t-sub)/1.2 var(--serif);letter-spacing:-.012em;color:var(--ink)}
.svsig h3 em{color:var(--em)}
.svsig-g{margin-top:clamp(22px,3vw,36px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px)}
.svsig-i{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr);gap:clamp(16px,2vw,26px);align-items:center}
.svsig-i figure{margin:0;aspect-ratio:4/5;border-radius:var(--r-sm);overflow:hidden;background:var(--tint)}
.svsig-i img{width:100%;height:100%;object-fit:cover;display:block}
.svsig-i h4{margin:0 0 10px;font:500 20px/1.3 var(--sans);letter-spacing:-.005em;color:var(--ink)}
.svsig-i p{margin:0;font-size:14px;line-height:1.7;color:var(--body);text-align:left}

/* directory */
.svdir{padding:clamp(48px,6vw,88px) 0 clamp(64px,8vw,112px);background:var(--ivory)}
.svdir-bar{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap}
.svsearch{flex:1 1 320px;max-width:480px}
.svsearch input{width:100%;height:54px;padding:0 24px;border:1px solid rgba(10,26,50,.22);border-radius:999px;background:#FAFCFD;color:var(--ink);font:300 16px var(--sans);transition:border-color .3s}
.svsearch input::placeholder{color:var(--grey);opacity:1}
.svsearch input:hover{border-color:var(--ink)}
.svsearch input:focus{outline:none;border-color:var(--brand)}
.svsearch input:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.svdir-b{flex:none}
.svdir-b .ic{transition:transform .35s var(--ease)}
.svdir-b.on .ic{transform:rotate(90deg)}
.svdir-p{margin-top:clamp(28px,3.4vw,44px)}
.svdir-p[hidden]{display:none}
.svd-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 clamp(20px,2.6vw,30px)}
.svdir-p .sv-rows{max-width:880px}
.svd-count{margin:0 0 14px;font-size:13px;color:var(--grey)}
.svd-none{margin:0 0 20px;font-size:16px;color:var(--body)}

@media(max-width:900px){
 .svg-in{grid-template-columns:1fr;gap:28px}
 .svg.alt .svg-ph{order:0}
 .svg-ph{aspect-ratio:4/3;max-height:420px}
 .svduo{grid-template-columns:1fr}
 .svsig-g{grid-template-columns:1fr}
}
@media(max-width:640px){
 .sv-rh{font-size:17px}
 .svsig-i{grid-template-columns:minmax(0,.7fr) minmax(0,1fr)}
 .svd-tabs>.svd-tl{display:none}.svd-tabs{display:block}
 .svdir-bar{flex-direction:column;align-items:stretch}.svsearch{max-width:none;flex-basis:auto}.svdir-b{justify-content:center}
 .svsearch input{font-size:16px}
}
@media(prefers-reduced-motion:reduce){.sv-rb,.sv-chev,.svdir-b .ic{transition:none}}

/* landscape phones: the desktop composition so the buttons are on the first screen */
@media(orientation:landscape) and (max-height:520px) and (min-width:560px){
 .svh{min-height:0;align-items:center}
 .svh-ph{inset:0 0 0 38%;background-position:26% 42%;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.4) 7%,rgba(0,0,0,.85) 16%,#000 26%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.4) 7%,rgba(0,0,0,.85) 16%,#000 26%)}
 .svh .wrap{padding-top:92px;padding-bottom:36px}
 .svh-t{max-width:min(480px,56vw)}
 .svh h1{font-size:30px}
 .svh-p{font-size:14px;margin-top:12px}
 .svh .o1cta{margin-top:18px}
}

/* FAQ */
.svfaq{padding:clamp(56px,7vw,104px) 0;background:var(--mist)}
.svfaq-g{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,6vw,96px);align-items:start}
.svfaq h2{margin:0;font:300 var(--t-title)/1.16 var(--serif);letter-spacing:-.012em;color:var(--ink)}
.svfaq h2 em{color:var(--em);white-space:normal}
.svfaq .sv-ri{max-width:none}
@media(max-width:900px){.svfaq-g{grid-template-columns:1fr;gap:26px}}

/* Duo Lifting: a gradient of BION's two blues (deep navy to the brand blue) with the two Tightan machines on the right.
   The photo keeps its natural colours and dissolves into the gradient on its left side (ombre).
   Text and the three technologies stay on the left, on the dark end of the gradient. */
.svduo{display:block;background:linear-gradient(116deg,#0A1A32 0,#0A1A32 30%,#0B3354 58%,#00769F 118%)}
.svduo>*{position:relative;z-index:1}
.svduo-tx{max-width:min(500px,50%)}
.svduo-tx>p:not(.svx-k){max-width:44ch}
.svduo-m{margin:0 0 28px;display:block}
.svduo-m li:not(.pl){width:100%;padding:12px 0;font-size:clamp(20px,2vw,27px)}
.svduo::before{content:"";position:absolute;top:0;bottom:0;right:0;width:auto;aspect-ratio:1/1;background:url(../assets/img/services/duo-tightan.webp) center/100% 100% no-repeat;pointer-events:none;
 -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.2) 14%,rgba(0,0,0,.62) 30%,#000 50%),linear-gradient(180deg,rgba(0,0,0,.55) 0,#000 14%,#000 86%,rgba(0,0,0,.55) 100%);
 mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.2) 14%,rgba(0,0,0,.62) 30%,#000 50%),linear-gradient(180deg,rgba(0,0,0,.55) 0,#000 14%,#000 86%,rgba(0,0,0,.55) 100%);
 -webkit-mask-composite:source-in;mask-composite:intersect}
.svduo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(10,26,50,.5) 0,rgba(10,26,50,0) 52%)}
@media(min-width:901px) and (max-width:1100px){.svduo-tx{max-width:min(400px,46%)}.svduo-tx>p:not(.svx-k){max-width:32ch}.svduo::before{aspect-ratio:auto;width:56%;background-size:cover;background-position:74% 50%}}
@media(max-width:900px){
 .svduo{--duo-h:clamp(250px,62vw,340px);padding-top:calc(var(--duo-h) - 18px);background:linear-gradient(180deg,#0B3354 0,#0A1A32 62%)}
 .svduo-tx{max-width:none}
 .svduo-tx>p:not(.svx-k){max-width:46ch}
 .svduo::before{top:0;right:0;bottom:auto;width:var(--duo-h);height:var(--duo-h);aspect-ratio:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.3) 14%,#000 34%),linear-gradient(180deg,#000 0,#000 52%,rgba(0,0,0,.5) 78%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.3) 14%,#000 34%),linear-gradient(180deg,#000 0,#000 52%,rgba(0,0,0,.5) 78%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
 .svduo::after{background:none}
}