/* P28C3 – contact 2x2, gallery utility rail, transparent tabs.
   Keeps the approved 1280 / 400 / 24 desktop geometry. */
body.mbr-p28-reference-page{
    --p28-container:1280px;
    --p28-side:400px;
    --p28-gap:24px;
}
body.mbr-p28-reference-page .p28-container{
    width:min(1280px,calc(100% - 32px))!important;
    max-width:1280px!important;
    margin-inline:auto!important;
    box-sizing:border-box!important;
}
body.mbr-p28-reference-page .p28-hero-grid,
body.mbr-p28-reference-page .p28-section-grid{
    grid-template-columns:minmax(0,1fr) 400px!important;
    gap:24px!important;
    align-items:start!important;
}
body.mbr-p28-reference-page .p28-topline{
    justify-content:flex-start!important;
}
body.mbr-p28-reference-page .p28-breadcrumb{min-width:0!important}
body.mbr-p28-reference-page .p28-meta-actions{display:none!important}

/* Utility information/actions now belongs to the media block, not the breadcrumb row. */
body.mbr-p28-reference-page .p28-under-gallery-actions{
    min-height:46px;
    padding:10px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    background:#fff;
    border:1px solid #edf0f4;
    border-top:0;
    color:#64748b;
    box-sizing:border-box;
}
body.mbr-p28-reference-page .p28-under-gallery-meta,
body.mbr-p28-reference-page .p28-under-gallery-buttons{
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
}
body.mbr-p28-reference-page .p28-under-gallery-meta span,
body.mbr-p28-reference-page .p28-under-gallery-buttons button{
    display:inline-flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
}
body.mbr-p28-reference-page .p28-under-gallery-meta i,
body.mbr-p28-reference-page .p28-under-gallery-buttons i{color:#ef2b2d}
body.mbr-p28-reference-page .p28-under-gallery-buttons button{
    appearance:none;
    border:0;
    background:transparent;
    padding:5px 2px;
    color:#475569;
    font:inherit;
    cursor:pointer;
}
body.mbr-p28-reference-page .p28-under-gallery-buttons button:hover{color:#e52325}

/* Four conversion/share channels: one calm, equal 2x2 grid. */
body.mbr-p28-reference-page .p28-contact-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    margin:14px 0 16px!important;
}
body.mbr-p28-reference-page .p28-contact-actions .p28-contact-action{
    min-width:0!important;
    min-height:52px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:9px!important;
    padding:10px 12px!important;
    border-radius:10px!important;
    border:1px solid #e6ebf2!important;
    box-shadow:none!important;
    text-decoration:none!important;
    font-weight:700!important;
    font-size:14px!important;
    line-height:1.2!important;
    box-sizing:border-box!important;
}
body.mbr-p28-reference-page .p28-contact-action.is-call{
    background:#16bf5f!important;
    color:#fff!important;
    border-color:#16bf5f!important;
}
body.mbr-p28-reference-page .p28-contact-action.is-zalo{
    background:#1584ee!important;
    color:#fff!important;
    border-color:#1584ee!important;
}
body.mbr-p28-reference-page .p28-contact-action.is-facebook,
body.mbr-p28-reference-page .p28-contact-action.is-messenger{
    background:#f3f7fd!important;
    color:#245aa9!important;
}
body.mbr-p28-reference-page .p28-contact-action.is-messenger{color:#265bc9!important}
body.mbr-p28-reference-page .p28-contact-action i{font-size:17px!important;line-height:1!important}
body.mbr-p28-reference-page .p28-zalo-mark{
    width:27px;height:27px;border-radius:999px;background:#fff;color:#1584ee;
    display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;
}
/* Hide legacy stacked button rules if they survive from older CSS. */
body.mbr-p28-reference-page .p28-contact-card > .p28-call,
body.mbr-p28-reference-page .p28-contact-card > .p28-zalo,
body.mbr-p28-reference-page .p28-contact-card > .p28-socials{display:none!important}

/* P28C3A - Restore approved white tab rail/card. */
body.mbr-p28-reference-page .p28-tabs{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    background:#fff!important;
    border:1px solid #e8edf3!important;
    box-shadow:0 4px 18px rgba(15,23,42,.05)!important;
    border-radius:14px!important;
    padding:7px!important;
    min-height:0!important;
    margin-top:16px!important;
    margin-bottom:18px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    box-sizing:border-box!important;
}
body.mbr-p28-reference-page .p28-tabs a{
    flex:0 0 auto!important;
    background:transparent!important;
    border-radius:9px!important;
    padding:9px 14px!important;
}
body.mbr-p28-reference-page .p28-tabs a.is-active{
    background:#ef2b2d!important;
    color:#fff!important;
    border-radius:9px!important;
}

/* Keep all affected blocks inside the approved columns. */
body.mbr-p28-reference-page .p28-hero-main,
body.mbr-p28-reference-page .p28-contact-card,
body.mbr-p28-reference-page .p28-section-grid > *,
body.mbr-p28-reference-page .p28-pricing-grid > *{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
}
@media(max-width:1024px){
    body.mbr-p28-reference-page .p28-container{width:calc(100% - 24px)!important;max-width:none!important}
    body.mbr-p28-reference-page .p28-hero-grid,
    body.mbr-p28-reference-page .p28-section-grid{grid-template-columns:1fr!important;gap:16px!important}
    body.mbr-p28-reference-page .p28-under-gallery-actions{flex-wrap:wrap}
}
@media(max-width:639.98px){
    body.mbr-p28-reference-page .p28-container{width:calc(100% - 18px)!important}
    body.mbr-p28-reference-page .p28-contact-actions{gap:8px!important}
    body.mbr-p28-reference-page .p28-contact-actions .p28-contact-action{min-height:48px!important;padding:9px 8px!important;font-size:13px!important}
    body.mbr-p28-reference-page .p28-under-gallery-actions{padding:9px 11px;gap:8px}
    body.mbr-p28-reference-page .p28-under-gallery-meta,
    body.mbr-p28-reference-page .p28-under-gallery-buttons{gap:10px;flex-wrap:wrap}
}