/* bridge.css — layout dùng chung cho các TRANG CẦU NỐI từng hệ. Kế thừa màu/chữ từ mxh-tokens.css. Đổi sắc mỗi hệ bằng class .acc-* trên . */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; color:var(--mxh-ink,#20180a); font-family:var(--mxh-serif,Georgia,serif); font-size:18.5px; line-height:1.7; -webkit-font-smoothing:antialiased; background-color:var(--mxh-paper,#ecdebb); background-image:radial-gradient(120% 80% at 50% -5%, rgba(255,251,235,.4), transparent 55%); } a{color:inherit} .bwrap{max-width:920px; margin:0 auto; padding:0 24px} h1,h2,h3{font-family:var(--mxh-disp,Georgia,serif); font-weight:800; line-height:1.14; margin:0; text-wrap:balance} .btop{border-bottom:1px solid rgba(32,24,10,.18); background:var(--mxh-paper,#ecdebb); position:sticky; top:0; z-index:10} .btop .bwrap{display:flex; align-items:center; justify-content:space-between; padding:13px 24px} .bback{display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-size:15px; font-weight:500; color:var(--mxh-ink)} .bback:hover{color:var(--acc)} .bmono{display:grid; place-items:center; width:38px; height:38px; border-radius:50%; border:2px solid var(--mxh-gold,#9c7c3a); font-family:var(--mxh-disp,Georgia,serif); font-weight:700; font-size:15px; color:var(--mxh-ink)} .bhero{text-align:center; padding:64px 0 38px} .beyebrow{font-family:var(--mxh-serif); font-weight:600; font-size:14px; letter-spacing:.24em; text-transform:uppercase; color:var(--acc); margin:0 0 1rem} .bhero h1{font-size:clamp(34px,5.6vw,58px); max-width:18ch; margin:0 auto} .blead{font-size:20px; font-weight:500; color:var(--mxh-ink-soft,#4c3f26); max-width:56ch; margin:1.2rem auto 0; text-wrap:pretty} .bcta{display:inline-block; background:var(--acc); color:#f6ecce; font-family:var(--mxh-serif); font-weight:600; font-size:16px; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; padding:16px 34px; border:1.5px solid var(--acc); transition:.18s} .bcta:hover{filter:brightness(1.12)} .bhero .bcta{margin-top:2rem} .bsec{padding:14px 0 20px} .bsec h2{text-align:center; font-size:clamp(24px,3.4vw,34px); font-weight:700; margin-bottom:22px} .bcols{display:grid; grid-template-columns:1fr 1fr; gap:20px} .bcard{background:var(--mxh-paper-hi,#f5edcf); border:1px solid rgba(32,24,10,.26); border-top:4px solid var(--acc); border-radius:10px; padding:24px 26px} .bcard h3{font-size:21px; margin-bottom:.4rem} .bcard p{font-size:16.5px; color:var(--mxh-ink-soft,#4c3f26); margin:0} .bmid{text-align:center; padding:34px 0 72px} .bmid .note{font-size:15px; color:var(--mxh-ink-soft); margin:14px 0 0} .bfoot{border-top:1px solid rgba(32,24,10,.18); padding:24px 0; text-align:center; font-size:14px; color:var(--mxh-ink-soft)} .bfoot a{color:var(--acc); text-decoration:none; font-weight:600} .acc-navy{--acc:var(--mxh-navy,#1f2d4a)} .acc-rose{--acc:var(--mxh-rose,#7d4a4f)} .acc-plum{--acc:var(--mxh-plum,#4a2f4a)} .acc-burg{--acc:var(--mxh-burg,#6b2230)} @media(max-width:720px){ .bcols{grid-template-columns:1fr} }