/* Page banner component and its responsive layout. */
@media only screen and (max-width: 767px) {
/* ---------------------------------------------------------------------
       3. Banner trang con (our-office & các page khác dùng .page-banner):
          bỏ background-attachment:fixed (hỏng trên mobile → mảng trắng),
          breadcrumb tách khỏi banner thành dải riêng, không còn đè ảnh.
       --------------------------------------------------------------------- */
    .page-banner canvas {
        background-attachment: scroll !important;
        background-size: cover !important;
        background-position: center !important;
        height: 230px !important;
        min-height: 230px !important;
    }
    .page-banner::after {
        height: 100% !important;
    }
    .page-banner .page-logo {
        display: none; /* logo chìm quá nhỏ trên mobile, header đã có logo */
    }
    .page-banner .page-title {
        bottom: 46px !important;
        top: auto !important;
    }
    .page-banner .page-title .entry-title {
        font-size: 24px !important;
        line-height: 1.25 !important;
        letter-spacing: 0.06em;
    }
    .page-banner .page-border {
        display: none; /* hoa văn kẻ vàng desktop chồng lấn ở bề ngang hẹp */
    }
    .breadcrumbs-container {
        position: static !important;
        background: rgba(0, 26, 24, 0.92) !important;
        padding: 9px 4px !important;
    }
    .breadcrumbs-container .rank-math-breadcrumb p {
        margin: 0;
        font-size: 12px;
    }

    /* Khoảng trắng giữa header và banner ở trang con (dải trắng ~63px):
       triệt margin/padding phần đầu main. */
    .sunland-template main > .page-banner:first-child,
    .sunland-template main > h2 + .page-banner {
        margin-top: 0 !important;
    }
    body:not(.home) .sunland-template {
        padding-top: 0 !important;
    }
    body:not(.home) .sunland-template main {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}