/* Mobile gutters belong to the page, not to every nested wrapper.
   Keep desktop styles and local horizontal scrolling for data tables. */
@media screen and (max-width: 767px) {
    body .so-shell { width: calc(100% - 24px); }
    body .so-shell.so-discovery { width: calc(100% - 24px); }
    body .so-card { min-width: 0; }
    body .so-card .so-card-actions { flex-wrap: wrap; }
    body .so-workspace,
    body .sou-page,
    body .so-contact-page,
    body .so-email-verify-page,
    body .sob-public,
    body .sfq-public { padding-left: 12px; padding-right: 12px; }
    body .so-workspace { padding-top: 20px; }
    body .so-workspace-panel { padding: 16px 12px; margin-bottom: 16px; border-radius: 14px; }
    body .so-workspace-selected { padding: 0; border: 0; background: transparent; box-shadow: none; }
    body .so-workspace .so-module-toolbar { margin: 18px 0 4px; padding: 12px; border-radius: 12px; }
    body .so-workspace .so-workspace-product { padding: 0; border: 0; border-radius: 0; background: transparent; }
    body .so-workspace .so-workspace-module { margin-top: 18px; padding-top: 18px; }
    body .so-workspace .so-workspace-product:first-child { margin-top: 0; }
    body .so-workspace .so-lead-panel,
    body .so-workspace .so-rnt-panel,
    body .so-workspace .so-booking-onboarding-card,
    body .so-workspace .so-booking-readiness,
    body .so-workspace .so-booking-page-info { padding: 14px 12px; border-radius: 12px; }
    body .so-workspace .so-rnt-form { padding: 0; border: 0; background: transparent; border-radius: 0; }
    body .so-workspace .so-lite-fieldset { padding: 8px 10px 12px; }
    body .so-workspace .so-rnt-form-grid,
    body .so-workspace .so-workspace-form-grid,
    body .so-workspace .so-lead-filter { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    body .so-workspace .so-workspace-form-grid > *,
    body .so-workspace .so-rnt-form-grid > *,
    body .so-workspace .so-rnt-main,
    body .so-workspace .so-lead-panel { min-width: 0; }
    body .so-workspace .so-workspace-email { padding: 14px 12px; }
    body .so-workspace .so-workspace-card { padding: 14px 12px; }
    body .so-workspace .so-booking-resource-groups > section { padding: 12px 10px; }
    body .so-workspace .so-booking-resource-body { padding: 12px 10px; }
    body .so-workspace .so-booking-schedule { padding: 12px 10px; }
    body .so-workspace .so-rnt-panel-head { flex-wrap: wrap; }
    body .so-workspace .so-rnt-panel-head .so-workspace-button { white-space: normal; }
    body .so-workspace .so-rnt-table,
    body .so-workspace .so-lead-grid,
    body .so-workspace .so-lite-board { max-width: 100%; min-width: 0; overscroll-behavior-x: contain; }

    body .swd-detail .so-shell { width: calc(100% - 24px); }
    body .swd-navigation > .so-shell { width: 100%; padding: 0 12px; }
    body .swd-section:nth-child(3n+2) { padding: 18px 12px; }
    body .swd-section-body li { padding: 14px 12px 14px 36px; }
    body .swd-section-body li:before { left: 11px; top: 14px; }
    body .swd-final { padding: 20px 14px; }
    body .swd-hero-copy h1 { font-size: clamp(28px, 8vw, 34px); }

    body .so-contact-hero__copy { padding: 24px 14px; }
    body .so-contact-form-card,
    body .so-contact-department { padding: 18px 12px; }
    body .so-login-intro { padding: 24px 16px; }
    body .so-login-card-wrap { padding: 24px 16px; }
    body .so-email-proof-hero { padding: 20px 14px; }
    body .so-email-verify-page .form-detail,
    body .so-email-proof-card-head { padding-left: 12px; padding-right: 12px; }
    body .sou-hub .sou-hero { padding: 24px 14px; }
    body .sou-page .sou-panel { padding: 16px 12px; }
    body .sou-page .sou-tool-panel,
    body .sou-page .sou-collection { padding: 16px 12px; }
    body .so-workspace .so-fq-ready,
    body .so-workspace .so-fq-field,
    body .so-workspace .so-fq-add { padding: 12px; }
    body .sob-hero,
    body .sob-section,
    body .sob-booking > section,
    body .sob-policy,
    body .sob-receipt,
    body .sob-manage-card,
    body .sob-cancel-box,
    body .sfq-hero,
    body .sfq-card { padding: 18px 12px; }

    /* 16px fields avoid focus zoom on phones. Exclude checkbox/radio controls. */
    body .so-workspace :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not([type=hidden]),
    body .so-login-page :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not([type=hidden]),
    body .so-contact-page :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not([type=hidden]),
    body .user-reg-form :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not([type=hidden]),
    body .so-email-verify-page :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not([type=hidden]),
    body .sou-page :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not([type=hidden]),
    body .sob-public :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not([type=hidden]),
    body .sfq-public :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not([type=hidden]) { font-size: 16px; min-height: 44px; max-width: 100%; }
    body .so-workspace .so-workspace-password button { width: 44px; }
    body .so-workspace .so-workspace-button { min-height: 44px; padding: 12px 14px; overflow-wrap: anywhere; }
}

@media screen and (max-width: 480px) {
    body .so-product-grid,
    body .sou-page .sou-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Quay số uses its own page shell; share the same mobile gutter budget. */
@media screen and (max-width: 767px) {
    body.qd-shell .qd-app { padding-left: 12px; padding-right: 12px; }
    body.qd-shell .qd-panel { padding: 16px 12px; }
    body.qd-shell .qd-panel .qd-panel { padding: 12px 0; border: 0; }
    body.qd-shell .qd-grid { grid-template-columns: minmax(0, 1fr); }
    body.qd-shell .qd-table-wrap { max-width: 100%; min-width: 0; overscroll-behavior-x: contain; }
    body.qd-shell .qd-field { font-size: 16px; min-height: 44px; }
    body.qd-shell .qde-wrap { width: calc(100% - 24px); }
    body.qd-shell .qde-registration { padding-left: 12px; padding-right: 12px; }
    body.qd-shell .qdp-program-card { padding-left: 14px; padding-right: 14px; }
}