/* About page (Về chúng tôi). Built from the home page components: .o1hero, .statement, .dark + .acc, .o1banner, .o1why + .usp3.
   Type scale used on this page, nothing else:
   - titles: serif 300 with an italic accent (inherited from the home components)
   - body: Montserrat 300, 16px / 1.8   (.ab-p)
   - labels: 11px tracked caps (eyebrow, definition terms, list numbers)
   - item titles: Montserrat 500 */
body.ab-page{background:var(--ivory);color:var(--ink)}

.ab-p{font-size:16px;line-height:1.8;font-weight:300;color:var(--body);max-width:56ch;margin:0 0 18px}
.ab-p-d{color:rgba(243,248,250,.84)}
.ab-fig{margin:0;border-radius:var(--r-card);overflow:hidden;box-shadow:0 26px 46px -32px rgba(10,26,50,.5)}
.ab-fig img{width:100%;height:100%;object-fit:cover;display:block}

/* Về BION clinic + Điều BION clinic theo đuổi: text column with a photo that bleeds to the page edge and fades into the background */
.ab-split{position:relative;overflow:hidden;display:flex;align-items:center;min-height:clamp(620px,50vw,760px);padding:clamp(72px,9vw,128px) 0}
.ab-split .wrap{width:100%}
.ab-bleed{position:absolute;top:0;bottom:0;width:56%;margin:0;overflow:hidden}
.ab-bleed img{width:100%;height:100%;object-fit:cover;display:block}
/* Smoothstep-eased fade (many stops, no linear ramp) on the page-facing side, plus a soft top and bottom feather, so the photo dissolves into the page instead of ending on an edge. */
.ab-bleed{--fx:transparent 0,rgba(0,0,0,.006) 4%,rgba(0,0,0,.03) 9%,rgba(0,0,0,.09) 15%,rgba(0,0,0,.2) 22%,rgba(0,0,0,.38) 30%,rgba(0,0,0,.6) 38%,rgba(0,0,0,.8) 46%,rgba(0,0,0,.93) 54%,rgba(0,0,0,.985) 62%,#000 70%;
 --fy:transparent 0,rgba(0,0,0,.04) 3%,rgba(0,0,0,.18) 7%,rgba(0,0,0,.52) 11%,rgba(0,0,0,.86) 15%,#000 19%,#000 81%,rgba(0,0,0,.86) 85%,rgba(0,0,0,.52) 89%,rgba(0,0,0,.18) 93%,rgba(0,0,0,.04) 97%,transparent 100%}
.ab-split-r .ab-bleed{right:0;-webkit-mask-image:linear-gradient(90deg,var(--fx)),linear-gradient(180deg,var(--fy));mask-image:linear-gradient(90deg,var(--fx)),linear-gradient(180deg,var(--fy));-webkit-mask-composite:source-in;mask-composite:intersect}
.ab-split-l .ab-bleed{left:0;-webkit-mask-image:linear-gradient(270deg,var(--fx)),linear-gradient(180deg,var(--fy));mask-image:linear-gradient(270deg,var(--fx)),linear-gradient(180deg,var(--fy));-webkit-mask-composite:source-in;mask-composite:intersect}
/* slow settle: the photo eases from a slight zoom while it fades in (transform and opacity only) */
.js .ab-bleed.rv{transform:none;transition:opacity 1.6s var(--ease)}
.ab-bleed img{transform:scale(1.07);transition:transform 2.6s var(--ease)}
.ab-bleed.in img{transform:none}
.ab-split-r .ab-bleed img{object-position:50% 72%}
.ab-split-l .ab-bleed img{object-position:50% 64%}
.ab-textcol{width:42%}
.ab-split-l .ab-textcol{margin-left:auto;width:44%}
.ab-about .big{max-width:none;margin:0 0 clamp(24px,2.6vw,36px)}
.ab-pursuit .ab-state{max-width:none;margin:20px 0 clamp(24px,2.6vw,36px);font-size:var(--t-sub);line-height:1.3}
.ab-pursuit .ab-state em{display:block;white-space:normal;margin-top:.2em}
.ab-textcol .ab-p:last-child{margin-bottom:0}

/* Ý nghĩa: dark band with the home accordion */
.ab-meaning .head{margin-bottom:clamp(28px,3vw,44px)}
.ab-meaning .head h2{max-width:none}
.ab-meaning .wrap>.ab-p-d{max-width:none}
.ab-meaning .acc{margin-top:clamp(32px,4vw,56px)}
.ab-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,5vw,80px);margin-top:clamp(48px,6vw,88px);padding-top:clamp(28px,3vw,40px);border-top:1px solid rgba(243,248,250,.18)}
.ab-two .ab-p{margin:0}

/* closing line over the lounge render, so the wall that carries the brand line stays visible on the left */
.ab-banner{height:auto;min-height:clamp(300px,32vw,400px);padding:clamp(56px,7vw,88px) 0;background:linear-gradient(270deg,rgba(10,26,50,.96) 0,rgba(10,26,50,.95) 30%,rgba(10,26,50,.9) 42%,rgba(10,26,50,.78) 52%,rgba(10,26,50,.56) 62%,rgba(10,26,50,.32) 72%,rgba(10,26,50,.14) 84%,rgba(10,26,50,.05) 94%,rgba(10,26,50,.04) 100%),url(../assets/img/about/lounge.jpg) 0 12%/cover,var(--ink)}
.ab-banner .wrap{display:flex;justify-content:flex-end}
.ab-banner h2{max-width:30ch}

/* Điểm khác biệt: photo, title, then hairline rows */
.ab-diff{padding:clamp(64px,8vw,112px) 0;background:var(--sand)}
.ab-fig-band{aspect-ratio:21/9}
.ab-fig-band img{object-position:50% 55%}
.ab-diff-h{display:flex;justify-content:space-between;align-items:end;gap:24px 40px;flex-wrap:wrap;margin:clamp(40px,5vw,72px) 0 clamp(28px,3vw,44px)}
.ab-diff-h .big{max-width:none;margin:0;font:300 clamp(34px,4.2vw,58px)/1.16 var(--serif);letter-spacing:-.012em}
.ab-diff-h .big em{color:var(--em)}
.ab-list{list-style:none;margin:0;padding:0}
.ab-list li{display:grid;grid-template-columns:clamp(56px,7vw,96px) minmax(0,1fr);gap:0 12px;border-top:1px solid rgba(10,26,50,.18);padding:clamp(22px,2.4vw,32px) 0}
.ab-list li:last-child{border-bottom:1px solid rgba(10,26,50,.18)}
.ab-list b{font:400 11px/2.6 var(--sans);letter-spacing:.2em;color:var(--brand-d)}
.ab-list h3{font:500 clamp(19px,1.8vw,23px)/1.35 var(--sans);letter-spacing:-.005em;margin:0 0 8px;color:var(--ink)}
.ab-list p{margin:0;font-size:16px;line-height:1.8;font-weight:300;color:var(--body);max-width:64ch}

/* Đội ngũ chuyên môn: same profile block as the home page doctor section, centred, with the other two doctors in two columns underneath */
.ab-team{background:var(--ivory)}
.ab-team .wrap{display:block}
.ab-team-w{max-width:1040px}
.ab-team-h{text-align:center;max-width:760px;margin:0 auto clamp(40px,5vw,72px)}
.ab-team-h h2{margin:0 0 20px}
.ab-team-h .ab-p{margin:0 auto;text-align:center}
.ab-lead-doc{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:center}
.ab-lead-doc .portrait{width:100%;max-width:400px}
.ab-name{font:300 var(--t-sub)/1.25 var(--serif);letter-spacing:-.012em;margin:14px 0 18px}
.ab-name em{color:var(--em);padding-bottom:.08em;white-space:normal}
.ab-docs2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,80px);margin-top:clamp(56px,6vw,96px);padding-top:clamp(32px,4vw,56px);border-top:1px solid rgba(10,26,50,.16)}
.ab-doc2{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1fr);gap:clamp(18px,2.4vw,32px);align-items:start}
.ab-doc2 .portrait{width:100%}
.ab-pname{font:500 var(--t-m)/1.3 var(--sans);letter-spacing:-.005em;margin:0 0 6px;color:var(--ink)}
.ab-portrait{background:linear-gradient(170deg,var(--tint),#8DB4C7)}
.ab-ph{display:grid;place-items:center}
.ab-ph img{width:52%;height:auto;object-fit:contain;opacity:.5;filter:brightness(0) invert(1)}
.ab-dl{margin:12px 0 0}
.ab-dl>div{padding:12px 0;border-top:1px solid rgba(10,26,50,.12)}
.ab-dl dt{font:500 11px/1.8 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--brand)}
.ab-dl dd{margin:0;font-size:14px;line-height:1.7;font-weight:300;color:var(--body)}
.ab-dl dd.ab-na{color:var(--grey)}
.ab-more{margin-top:18px}

/* closing call to action */
.ab-endwrap{background:var(--ivory);padding:clamp(56px,7vw,96px) 0}
.ab-endwrap .ar-cta{margin-bottom:0}

@media(max-width:560px){.ab-doc2{grid-template-columns:1fr}.ab-doc2 .portrait{max-width:220px}}
@media(max-width:900px){
 .ab-bleed img{transform:none;transition:none}
 .ab-split{display:block;min-height:0;padding:0 0 clamp(56px,9vw,80px)}
 .ab-bleed{position:relative;width:100%;height:clamp(320px,64vw,460px);margin:0 0 clamp(28px,6vw,40px)}
 .ab-split-r .ab-bleed,.ab-split-l .ab-bleed{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 50%,rgba(0,0,0,.86) 60%,rgba(0,0,0,.52) 72%,rgba(0,0,0,.18) 84%,rgba(0,0,0,.04) 94%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 50%,rgba(0,0,0,.86) 60%,rgba(0,0,0,.52) 72%,rgba(0,0,0,.18) 84%,rgba(0,0,0,.04) 94%,transparent 100%);-webkit-mask-composite:source-over;mask-composite:add}
 .ab-split-r .ab-bleed img,.ab-split-l .ab-bleed img{object-position:50% 45%}
 .ab-textcol,.ab-split-l .ab-textcol{width:100%;margin:0}
 .ab-two{grid-template-columns:1fr}
 .ab-lead-doc,.ab-docs2{grid-template-columns:1fr}
 .ab-lead-doc .portrait{max-width:340px}
 .ab-doc2{grid-template-columns:minmax(0,.5fr) minmax(0,1fr)}
 .ab-fig-band{aspect-ratio:16/9}
 .ab-banner{background:linear-gradient(0deg,rgba(10,26,50,.96) 0,rgba(10,26,50,.9) 30%,rgba(10,26,50,.72) 50%,rgba(10,26,50,.46) 68%,rgba(10,26,50,.22) 84%,rgba(10,26,50,.12) 100%),url(../assets/img/about/lounge.jpg) 0 12%/cover,var(--ink)}
 .ab-banner .wrap{justify-content:flex-start}
}

/* Body paragraphs are justified; the last line stays left. */
.ab-p,.ab-two p,.ab-list p,.ab-teamp{text-align:justify;text-justify:inter-word;hyphens:manual}
@media(prefers-reduced-motion:reduce){.ab-bleed img{transform:none;transition:none}.js .ab-bleed.rv{transition:none}}

/* ===== One-scene sections (desktop): from each title down to the end of its block, the content fits one screen.
   --sv is the room under the fixed nav pill; the scene is budgeted against 100svh - --sv. ===== */
@media(min-width:1025px) and (min-height:620px){
 .ab-meaning,.ab-diff,.ab-team{--sv:130px}

 /* Ý nghĩa: title + button, two intro lines, then the accordion. The two closing paragraphs sit below the scene. */
 .ab-meaning .head{margin-bottom:clamp(12px,2svh,22px)}
 .ab-meaning .wrap>.ab-p-d{margin:0 0 clamp(4px,.8svh,10px)}
 .ab-meaning .acc{margin-top:clamp(14px,2.4svh,26px);height:clamp(300px,calc(100svh - var(--sv) - 232px),600px)}

 /* Điểm khác biệt: same compact list as the home page, with room between the photo and the title */
 .ab-diff-h{margin:clamp(56px,9svh,88px) 0 clamp(14px,2.4svh,24px)}
 .ab-list li{grid-template-columns:clamp(48px,5vw,72px) minmax(0,1fr);padding:clamp(12px,2svh,18px) 0}
 .ab-list h3{font-size:clamp(17px,1.35vw,20px);margin:0 0 4px}
 .ab-list p{max-width:none}
 .ab-list b{line-height:1.9}

 /* Đội ngũ: centred title and intro, then Dr Nghĩa's portrait and profile; all of it down to the profile button fits */
 .ab-team-h{margin:0 auto clamp(18px,3svh,32px);max-width:900px}
 .ab-team-h h2{margin:0 0 clamp(8px,1.4svh,14px)}
 .ab-lead-doc{grid-template-columns:min(30vw,calc((100svh - var(--sv) - 215px) * .78)) minmax(0,1fr);align-items:start}
 .ab-lead-doc .portrait{max-width:none;aspect-ratio:10/13}
 .ab-lead-doc>div:last-child{align-self:center}
 .ab-name{margin:clamp(6px,1svh,12px) 0 clamp(6px,1.2svh,12px)}
 .ab-dl{margin:clamp(4px,1svh,10px) 0 0}
 .ab-dl>div{padding:clamp(7px,1.2svh,12px) 0}
 .ab-more{margin-top:clamp(10px,2svh,22px)}
}