/* Cấy tóc y khoa page. Builds on uifu.css (hero, dark list, link rows) and svpage.css. */
body.ctp .ufh-ph{background-image:url(../assets/img/services/s4.webp);background-position:62% 50%}

/* intro */
.ctw-g{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:center}
.ctw-tx h2{margin-bottom:18px}
.ctw-ph{margin:0;aspect-ratio:4/5;max-height:640px;border-radius:var(--r-card);overflow:hidden;background:var(--tint);box-shadow:0 34px 50px -36px rgba(10,26,50,.55)}
.ctw-ph img{width:100%;height:100%;object-fit:cover}
.ctw-p{margin-top:24px}
.ctw-p li{display:grid;gap:4px;padding:16px 0;border-top:1px solid var(--lineD)}
.ctw-p li:last-child{border-bottom:1px solid var(--lineD)}
.ctw-p b{font:500 16px/1.35 var(--sans);color:var(--ink)}
.ctw-p span{font-size:15px;line-height:1.7;color:var(--body)}

/* consultation rows */
.ctv{background:var(--mist)}
.ctv-h{margin-bottom:clamp(20px,3vw,36px)}
.ctv-h .eyebrow{margin:0 0 16px;color:var(--brand-d);opacity:1}
.ctv-h h2{margin:0}

/* process */
.ctx .eyebrow{margin:0 0 18px;color:var(--rose);opacity:1}
.ctx-l{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(18px,2.4vw,36px);margin-top:clamp(28px,4vw,48px)}
.ctx-l li{border-top:1px solid rgba(243,248,250,.2);padding-top:22px}
.ctx-l b{display:block;font:300 34px/1 var(--sans);color:var(--rose);margin-bottom:16px}
.ctx-l h3{margin:0 0 10px;font:500 16px/1.35 var(--sans);letter-spacing:-.005em}
.ctx-l p{margin:0;font-size:14px;line-height:1.7;color:rgba(243,248,250,.82);text-align:left}

/* calculator */
.ctc{background:var(--ivory)}
.ctc h2 em{color:var(--em)}
.ctc-h{margin-bottom:clamp(24px,3vw,40px)}.ctc-h h2{margin-bottom:12px}
.ctc-g{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,4fr) minmax(0,3fr);gap:clamp(20px,3.4vw,56px);align-items:center;padding:clamp(22px,3vw,44px);border-radius:var(--r-card);background:var(--ink);color:var(--ivory);box-shadow:0 34px 50px -36px rgba(5,17,43,.7)}
.ctc-l{display:grid;gap:10px}
.ct-z{display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;min-height:48px;border:1px solid rgba(243,248,250,.22);border-radius:999px;background:transparent;color:var(--ivory);cursor:pointer;text-align:left;font:400 14px/1.3 var(--sans);transition:background .3s,border-color .3s,color .3s}
.ct-z i{flex:none;width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(243,248,250,.6);transition:background .3s,border-color .3s}
.ct-z[aria-pressed=true]{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
.ct-z[aria-pressed=true] i{background:var(--brand);border-color:var(--brand)}
.ct-z:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
.ctc-d{margin:0}.ctc-d svg{display:block;width:100%;max-width:380px;margin:0 auto}
.ct-r{fill:rgba(243,248,250,.08);stroke:rgba(243,248,250,.35);stroke-dasharray:4 4;cursor:pointer;transition:fill .3s}
.ct-r:hover{fill:rgba(137,191,210,.3)}
.ct-r.on{fill:rgba(137,191,210,.62);stroke:#F3F8FA;stroke-dasharray:none}
.ctc-k{margin:0 0 8px;font:400 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--rose)}
.ctc-n{margin:0;font:300 clamp(34px,3.6vw,52px)/1.1 var(--sans);letter-spacing:-.02em}
.ctc-h{margin:0}
#ct-h{margin:6px 0 22px;font-size:16px;color:rgba(243,248,250,.82)}
.ctc-note{margin:18px 0 0;font-size:13px;line-height:1.6;color:rgba(243,248,250,.65);text-align:left}

@media(max-width:1024px){.ctx-l{grid-template-columns:repeat(2,minmax(0,1fr))}.ctc-g{grid-template-columns:1fr 1fr}.ctc-o{grid-column:1/-1}}
@media(max-width:900px){.ctw-g{grid-template-columns:1fr}.ctw-ph{order:-1;max-height:420px;aspect-ratio:4/3}body.ctp .ufh-ph{background-position:62% 40%}}
@media(max-width:640px){.ctx-l{grid-template-columns:1fr}.ctc-g{grid-template-columns:1fr}}

/* results placeholders: swap each .ctr-ph for a .ufr2-b poster button when photos arrive */
.ctr-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;aspect-ratio:4/5;padding:20px;text-align:center;border:1.5px dashed rgba(10,26,50,.28);border-radius:var(--r-card);background:rgba(217,230,236,.45);color:var(--grey)}
.ctr-i{color:var(--brand-d);opacity:.8}
.ctr-t{font:500 15px/1.35 var(--sans);color:var(--ink)}
.ctr-s{font:400 12px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.ofr-g{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1024px){.ofr-g{grid-template-columns:repeat(2,minmax(0,1fr))}.ofr-g .ufr2-m{grid-column:1/-1;aspect-ratio:auto;min-height:150px;gap:18px}}

/* contact card: navy panel with the form on the left, photo cut on a slant at the right */
.ctf{background:var(--ivory);padding:clamp(48px,6vw,96px) 0 clamp(64px,8vw,112px)}
.ctf-card{position:relative;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);min-height:560px;border-radius:var(--r-card);overflow:hidden;color:var(--ivory);background:linear-gradient(110deg,#0A1A32 0,#0E2342 55%,#12305A 100%);box-shadow:0 40px 70px -44px rgba(5,17,43,.8)}
.ctf-l{position:relative;z-index:2;padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;gap:22px}
.ctf-l h2{margin:0;font:300 var(--t-sub)/1.2 var(--serif);letter-spacing:-.012em}
.ctf-l h2 em{color:var(--rose)}
.ctf-ph{position:absolute;inset:0 0 0 52%;margin:0;-webkit-clip-path:polygon(15% 0,100% 0,100% 100%,0 100%);clip-path:polygon(15% 0,100% 0,100% 100%,0 100%);background:var(--tint)}
.ctf-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.ctf .formwrap{max-width:440px}
.ctf .formwrap form{display:grid;gap:12px}
.ctf .formwrap .f:not(.chk) input{height:54px;padding:22px 26px 0;border:1px solid transparent;border-radius:999px;background:#E6ECF1;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--ink);font-size:15px;box-shadow:none}
.ctf .formwrap .f:not(.chk) input:hover{border-color:rgba(137,191,210,.7)}
.ctf .formwrap .f:not(.chk) input:focus{background:#fff;border-color:var(--rose)}
.ctf .formwrap .f:not(.chk)>label{left:26px;top:27px;color:#4A5870;opacity:1}
.ctf .formwrap .f:not(.chk):has(input:focus)>label,.ctf .formwrap .f:not(.chk):has(input:not(:placeholder-shown))>label,.ctf .formwrap .f:not(.chk).has-v>label,.ctf .formwrap .f:not(.chk):has(input:-webkit-autofill)>label{top:13px;color:#4A5870;opacity:1}
.ctf .formwrap .f.err:not(.chk) input{border-color:#D9786E}
.ctf .formwrap .msg{padding:6px 0 0 4px;color:#F0B1AA}
.ctf .formwrap .f.chk label{opacity:.82}
.ctf-b{width:100%;min-height:54px;margin-top:4px;border:0;border-radius:999px;background:var(--ivory);color:var(--ink);font:500 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .3s,transform .3s var(--ease)}
.ctf-b:hover{background:#fff}.ctf-b:active{transform:scale(.98)}
.ctf-b:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
@media(max-width:900px){
 .ctf-card{grid-template-columns:1fr;min-height:0}
 .ctf-ph{position:relative;inset:auto;order:-1;height:clamp(200px,52vw,320px);-webkit-clip-path:none;clip-path:none}
 .ctf-ph img{object-position:50% 25%}
 .ctf .formwrap{max-width:none}
}

/* hair transplant form (light card): autofill and confirmation panel in the light theme */
.ctf .formwrap .f:not(.chk) input:-webkit-autofill,.ctf .formwrap .f:not(.chk) input:-webkit-autofill:focus{-webkit-text-fill-color:var(--ink);caret-color:var(--ink);-webkit-box-shadow:0 0 0 1000px #E6ECF1 inset;box-shadow:0 0 0 1000px #E6ECF1 inset}
.ctf .formwrap .ok{border-color:rgba(10,26,50,.14);background:#F3F8FA;color:var(--ink)}
.ctf .formwrap .ok p{color:var(--body)}
.ctf .formwrap .ok .ok-s{border-top-color:rgba(10,26,50,.14);color:var(--brand)}
.ctf .ok-i{border-color:rgba(0,118,159,.4);background:rgba(0,118,159,.1)}
.ctf .ok-i::after{border-color:var(--brand)}