/* Tin tức page: hero, search + category tabs, article grid, pinned event under the grid.
   Cards, tabs and the .nf event box come from noir.css and sections.css (the same ones the landing page uses). */
body.nwp{background:var(--ivory);color:var(--ink)}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* hero: navy at the left, the clinic photo fades in from the right (same composition as the Dịch vụ hero) */
.nwh{position:relative;min-height:clamp(420px,62svh,560px);display:flex;align-items:center;color:var(--ivory);background:#05112B;overflow:hidden}
.nwh .wrap{width:100%;max-width:1160px;padding-top:128px;padding-bottom:64px;position:relative;z-index:2}
.nwh-ph{position:absolute;inset:0 0 0 44%;background:url(../assets/img/about/lobby.jpg) 62% 50%/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.4) 7%,rgba(0,0,0,.85) 16%,#000 28%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.4) 7%,rgba(0,0,0,.85) 16%,#000 28%)}
.nwh-t{max-width:580px}
.nwh .eyebrow{margin:0 0 20px;color:rgba(243,248,250,.8);opacity:1}
.nwh h1{font:300 clamp(34px,3.7vw,54px)/1.12 var(--serif);letter-spacing:-.012em;margin:0}
.nwh h1 em{display:block;color:var(--rose);font-style:italic}
.nwh-p{margin:22px 0 0;max-width:440px;font-size:16px;line-height:1.7;color:rgba(243,248,250,.86);text-align:left}

/* list area */
.nwsec{padding:clamp(48px,6vw,88px) 0 clamp(72px,9vw,120px)}
.nwsec .news-bar{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:clamp(26px,3.4vw,40px)}
.nwsec .news-s{order:-1;flex:none;width:100%;max-width:480px;margin:0;min-width:0}
.nwsec .news-s input{height:54px;padding:0 24px;font-size:16px}
.nwsec .news-c{align-self:stretch}
.news-more{display:flex;justify-content:center;margin-top:clamp(32px,4vw,52px)}

/* pinned event, below the grid */
.nsp-w{margin-top:clamp(56px,7vw,104px)}
.nsp-w[hidden]{display:none}
.nsp-k{margin:0 0 20px}
.nsp{display:block}
.nsp.multi{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:clamp(8px,1.6vw,20px);align-items:center}
.nsp-v{min-width:0}
.nsp-b{position:static;transform:none;width:44px;height:44px;margin:0}
@media(max-width:860px){
 .nsp.multi{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
 .nsp.multi .nsp-v{grid-column:1/-1;grid-row:1}
 .nsp.multi .nsp-b{grid-row:2;justify-self:start}
 .nsp.multi .nsp-b:last-child{justify-self:end}
}

@media(max-width:900px){
 .nwh{min-height:0;align-items:flex-start}
 .nwh-ph{inset:auto 0 0 0;height:clamp(220px,56vw,380px);background-position:60% 50%;-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%)}
 .nwh .wrap{padding-top:112px;padding-bottom:clamp(250px,60vw,400px)}
 .nwh-t{max-width:none}
}
@media(orientation:landscape) and (max-height:520px) and (min-width:560px){
 .nwh{min-height:0;align-items:center}
 .nwh-ph{inset:0 0 0 46%;height:auto;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
 .nwh .wrap{padding-top:92px;padding-bottom:32px}
 .nwh h1{font-size:30px}.nwh-p{font-size:14px;margin-top:12px}
}