/* 
 * Mobile Max Width Layout - Tỷ lệ 9:21 (428px max-width)
 * Giới hạn chiều rộng tối đa của tất cả trang về tỷ lệ mobile ngay cả trên PC
 */

/* Container chính cho toàn bộ body */
html {
    background: #e0e0e0 !important;
    overflow-x: hidden !important;
}

body {
    max-width: 420px !important;
    width: 100% !important;
    margin: 0 auto !important;
    background: #fff !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
    overflow-x: hidden !important;
}

/* Đảm bảo các container bên trong không vượt quá chiều rộng */
.container,
.container-wraper,
.container-wrapper,
.navbar-container,
.chat-container,
.main-container,
.content-container,
.wrapper,
.page-wrapper,
.auth-container,
div[class*="container"],
div[class*="wrapper"] {
    max-width: 420px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-x: hidden !important;
}

/* Logo và navbar phải tuân theo giới hạn */
.logo,
.logo img,
.navbar,
.navbar-container,
nav,
nav img,
header,
header img {
    max-width: 100% !important;
}

.logo img,
nav img,
header img,
img[src*="head.png"],
img[src*="/images/"] {
    height: auto !important;
    max-height: 50px !important;
    width: auto !important;
    object-fit: contain !important;
}

/* Đặc biệt cho logo chính */
.logo img,
a img[src*="head.png"] {
    max-width: 200px !important;
    height: auto !important;
    max-height: 50px !important;
}

/* Override TOÀN BỘ width cố định */
[style*="width"],
[style*="max-width"],
[class*="w-"],
[class*="width"] {
   
}

/* Override cho các element có width: 100vw hoặc 100% */
[style*="width: 100vw"],
[style*="max-width: 100vw"],
[style*="width:100vw"],
[style*="width: 100%"],
[style*="width:100%"] {
    width: 100% !important;
    max-width: 428px !important;
}

/* Giới hạn chiều rộng của các section */
section,
main,
header,
footer,
nav,
article,
aside {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Chỉ giới hạn div có full width */
div[style*="width: 100vw"],
div[style*="width:100vw"] {
    max-width: 428px !important;
    overflow-x: hidden !important;
}

/* Đảm bảo responsive images không vượt quá container */
img,
svg,
video,
canvas,
iframe {
    max-width: 100% !important;
    height: auto !important;
}

/* Fix cho các modal và popup */
.modal,
.popup,
.overlay,
.dialog {
    max-width: 428px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* Fix cho table và pre code */
table {
    max-width: 100% !important;
    overflow-x: auto !important;
    display: block !important;
}

pre,
code {
    max-width: 100% !important;
    overflow-x: auto !important;
}

/* Centered layout trên desktop */
@media (min-width: 429px) {
    html {
        background: #e0e0e0 !important;
    }
    
    body {
        min-height: 100vh !important;
        margin: 0 auto !important;
    }
}

/* Đảm bảo bottom navigation và fixed elements vẫn hoạt động đúng */
.bottom-nav,
.fixed-bottom,
[style*="position: fixed"],
.fixed {
    max-width: 428px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
}

/* Fix cho các element có position sticky */
[style*="position: sticky"],
.sticky,
.navbar.sticky,
nav.sticky {
    max-width: 428px !important;
    width: 100% !important;
}

/* Fix cho background images không gây tràn */
[style*="background"],
.background,
.bg {
    background-size: cover !important;
    background-position: center !important;
    background-attachment: scroll !important;
}

/* Override flex và grid không gây tràn */
[style*="display: flex"],
[style*="display:flex"],
.flex {
    flex-wrap: wrap !important;
}

/* Đảm bảo absolute/relative elements không tràn */
[style*="position: absolute"],
[style*="position:absolute"],
.absolute {
    max-width: 100% !important;
    right: auto !important;
}

/* Fix padding và margin có thể gây tràn */
[style*="padding"],
[style*="margin"] {
    box-sizing: border-box !important;
}