/*
|--------------------------------------------------------------------------
| Madoo5 v18.27 - All Pages Container Layout
|--------------------------------------------------------------------------
| บังคับ layout หลักของเว็บให้ไม่กว้างเต็มจอเกินไป
| ใช้ max-width กลางเหมือน Bootstrap .container แต่ยังรองรับมือถือ
|--------------------------------------------------------------------------
*/
:root {
    --madoo-container-max: 1180px;
    --madoo-container-padding: 16px;
}

/* ครอบ layout หลักทุกหน้า */
body > .container,
body > .container-fluid,
main.container,
main.container-fluid,
.page-container,
.community-container,
.room-chat-container,
.chat-container,
.profile-container,
.dashboard-container,
.admin-container {
    width: 100%;
    max-width: var(--madoo-container-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--madoo-container-padding) !important;
    padding-right: var(--madoo-container-padding) !important;
}

/* navbar ที่เคยใช้ container-fluid ให้แคบลงเหมือน container */
.navbar > .container-fluid,
.community-navbar > .container-fluid,
.navbar > .container {
    width: 100%;
    max-width: var(--madoo-container-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--madoo-container-padding) !important;
    padding-right: var(--madoo-container-padding) !important;
}

/* layout สำคัญของระบบ */
.room-chat-layout,
.private-chat-app,
.chat-app-layout,
.chat-shell,
.feed-layout,
.community-feed-layout,
.profile-layout,
.online-page-wrap,
.rooms-page-wrap,
.vip-page-wrap,
.coins-page-wrap,
.admin-page-wrap {
    width: 100%;
    max-width: var(--madoo-container-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* แบนเนอร์/โฆษณาให้อยู่ใน container เช่นกัน */
.madoo-ad,
.madoo-ad-banner,
.madoo-ad-card,
.madoo-ad-full,
.madoo-ad-compact {
    max-width: var(--madoo-container-max);
    margin-left: auto;
    margin-right: auto;
}

/* ไม่บังคับ container กับส่วนที่ต้องเต็มจอจริง */
.modal,
.modal-dialog,
.modal-content,
.swal2-container,
.dropdown-menu,
.offcanvas,
.video-call-page,
.video-call-fullscreen,
.call-screen,
.call-stage,
.local-video,
.remote-video {
    max-width: none !important;
}

/* หน้าแชท / ห้องแชท ให้ขอบมนและดูเป็น card มากขึ้น */
.room-chat-main,
.room-users-panel,
.chat-main,
.chat-sidebar,
.feed-card,
.profile-card,
.online-member-card,
.room-card {
    border-radius: 18px;
}

/* ปรับบนจอใหญ่ให้ไม่กว้างเกิน */
@media (min-width: 1400px) {
    :root {
        --madoo-container-max: 1180px;
    }
}

/* tablet */
@media (max-width: 991.98px) {
    :root {
        --madoo-container-padding: 12px;
    }

    body > .container,
    body > .container-fluid,
    main.container,
    main.container-fluid,
    .navbar > .container-fluid,
    .community-navbar > .container-fluid {
        max-width: 100% !important;
    }
}

/* mobile */
@media (max-width: 575.98px) {
    :root {
        --madoo-container-padding: 10px;
    }

    body {
        overflow-x: hidden;
    }
}