/* ==========================================================================
   Portfolio bridge — shared component of the stock publication system.
   "One stock → its place in the whole portfolio → Portfolio Review."
   Used by: Bóc tách BCTC (Research), Báo cáo tài chính, Nhận định, Thống kê, Phân tích theo mã, Stock Insight detail.
   Self-contained on purpose: it carries its own tokens and element resets, so it renders the same
   inside .spa-page (Research), .stp-page (publication pages) and the .stp-portfolio-frame wrapper
   (pages not yet on the publication frame). Rules are the ones approved on Bóc tách BCTC, moved out of
   the Research stylesheet and renamed into this neutral namespace; values are unchanged.
   ========================================================================== */

.stp-portfolio-bridge, .stp-portfolio-bridge *, .stp-portfolio-bridge *::before, .stp-portfolio-bridge *::after { box-sizing: border-box; }
.stp-portfolio-bridge {
    --ink: #0c2835; --body: #213b45; --muted: #53676c; --gold: #9b7447; --rule-strong: rgba(12, 40, 53, .58);
    color: var(--body);
    font: 450 15px/1.58 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: .002em;
    text-rendering: optimizeLegibility;
}
.stp-portfolio-bridge h2, .stp-portfolio-bridge h3, .stp-portfolio-bridge p { margin: 0; }
.stp-portfolio-bridge h2, .stp-portfolio-bridge h3 { color: var(--ink); font-family: "Newsreader", Georgia, serif; font-weight: 500; }
.stp-portfolio-bridge a { color: inherit; }
.stp-portfolio-bridge a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* Frame for pages that are not (yet) on the publication shell: a paper-width column, centred */
.stp-portfolio-frame { width: min(calc(100% - 32px), 1380px); margin: 0 auto 42px; }

.stp-portfolio-bridge { position: relative; isolation: isolate; min-height: 620px; padding: 68px 42px 62px; overflow: hidden; border-bottom: 1px solid var(--rule-strong); background: #f6f2e9; }
.stp-portfolio-art { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .38; filter: saturate(.7) contrast(.84) brightness(1.04); mix-blend-mode: multiply; pointer-events: none; user-select: none; }
.stp-portfolio-content { position: relative; }
.stp-portfolio-eyebrow { color: var(--gold) !important; font-size: .66rem; font-weight: 800; letter-spacing: .19em; text-transform: uppercase; }
.stp-portfolio-bridge h2 { max-width: 21em; margin-top: 22px; font-size: clamp(2.75rem, 3.8vw, 4rem); line-height: .98; letter-spacing: -.043em; text-wrap: balance; }
.stp-portfolio-lede { max-width: 72ch; margin-top: 24px !important; color: var(--body) !important; font: 500 1.02rem/1.6 "Newsreader", Georgia, serif; }
.stp-portfolio-questions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 48px; }
.stp-portfolio-questions article { position: relative; min-width: 0; padding: 29px clamp(24px, 3vw, 42px) 8px 0; }
.stp-portfolio-questions article + article { padding-left: clamp(24px, 3vw, 42px); border-left: 1px solid rgba(12, 40, 53, .2); }
.stp-portfolio-questions article::before { content: ""; position: absolute; top: 0; left: 0; width: 34px; height: 2px; background: var(--gold); }
.stp-portfolio-questions article + article::before { left: clamp(24px, 3vw, 42px); }
.stp-portfolio-questions h3 { max-width: 18ch; font-size: clamp(1.35rem, 1.7vw, 1.7rem); line-height: 1.1; letter-spacing: -.025em; }
.stp-portfolio-questions p { max-width: 38ch; margin-top: 14px !important; color: var(--muted) !important; font-size: .78rem; line-height: 1.55; }
.stp-portfolio-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-width: 260px; margin-top: 38px; padding: 16px 22px; background: #c6a263; color: var(--ink) !important; font: 700 .82rem/1.2 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-decoration: none; }
.stp-portfolio-cta span { color: var(--ink) !important; }
.stp-portfolio-cta:hover { background: #bb9556; }
.stp-portfolio-cta span:last-child { font-size: 1.08rem; font-weight: 500; }

@media (max-width: 900px) {
    .stp-portfolio-bridge { min-height: 0; padding: 58px 34px 54px; }
    .stp-portfolio-art { opacity: .25; object-position: 68% center; }
    .stp-portfolio-bridge h2 { max-width: 21ch; font-size: clamp(2.65rem, 6vw, 3.65rem); }
    .stp-portfolio-questions { grid-template-columns: 1fr; margin-top: 42px; }
    .stp-portfolio-questions article, .stp-portfolio-questions article + article { padding: 25px 0 24px; border-left: 0; border-top: 1px solid rgba(12, 40, 53, .2); }
    .stp-portfolio-questions article::before, .stp-portfolio-questions article + article::before { top: -1px; left: 0; }
    .stp-portfolio-questions h3 { max-width: 25ch; }
    .stp-portfolio-questions p { max-width: 55ch; }
}
@media (max-width: 749px) {
    .stp-portfolio-bridge { padding: 46px 18px 44px; }
    .stp-portfolio-art { width: 170%; height: 48%; object-position: 74% top; opacity: .18; }
    .stp-portfolio-eyebrow { max-width: 30ch; font-size: .6rem; line-height: 1.5; }
    .stp-portfolio-bridge h2 { max-width: 17ch; margin-top: 18px; font-size: clamp(2.18rem, 10.8vw, 3rem); line-height: 1; }
    .stp-portfolio-lede { margin-top: 20px !important; font-size: .96rem; line-height: 1.55; }
    .stp-portfolio-questions { margin-top: 34px; }
    .stp-portfolio-questions article, .stp-portfolio-questions article + article { padding: 22px 0 23px; }
    .stp-portfolio-questions h3 { font-size: 1.48rem; }
    .stp-portfolio-questions p { margin-top: 10px !important; font-size: .76rem; }
    .stp-portfolio-cta { width: 100%; min-width: 0; margin-top: 28px; padding: 16px 18px; }
}