/* See docs/architecture/mobile-ui-guidelines.md for rules, breakpoint scale, and 5 design decisions. */ /* ═══════════════════════════════════════════════════════════════════ MOBILE OPTIMIZATIONS — compact public-facing UI (≤576px) Loaded after riohub-theme.css on every public page (includes/layout.php). Goal: denser, modern phone layout — smaller padding/margin/font, no overflow, tap targets kept ≥44px. Desktop is untouched (everything sits in @media). Token scale (--space-*, --fs-*, --pad-*) shrinks in riohub-theme.css ≤576px. ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 576px) { /* ─── Containers / sections ─── */ .container, .container-fluid { padding-left: var(--space-3); padding-right: var(--space-3); } section { padding-top: var(--space-5); padding-bottom: var(--space-5); } .py-5 { padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; } .py-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; } .my-5 { margin-top: var(--space-5) !important; margin-bottom: var(--space-5) !important; } .mb-5 { margin-bottom: var(--space-5) !important; } .mb-4 { margin-bottom: var(--space-4) !important; } .mt-5 { margin-top: var(--space-5) !important; } .mt-4 { margin-top: var(--space-4) !important; } .gap-4 { gap: var(--space-3) !important; } .gap-3 { gap: var(--space-2) !important; } /* ─── Cards ─── */ .card, .rh-card { border-radius: var(--radius); } .card-body { padding: var(--pad-card); } /* ─── Typography ─── */ h1, .h1 { font-size: var(--fs-3xl); line-height: 1.2; } h2, .h2 { font-size: var(--fs-2xl); line-height: 1.25; } h3, .h3 { font-size: var(--fs-xl); line-height: 1.3; } h4, .h4, h5, .h5, h6, .h6 { font-size: var(--fs-lg); } .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 { font-size: var(--fs-3xl); line-height: 1.15; } .lead { font-size: var(--fs-base); } small, .small { font-size: var(--fs-xs); } /* ─── Buttons — compact but keep ≥44px tap target ─── */ .btn { font-size: var(--fs-sm); padding: 0.55rem 0.95rem; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .btn-sm { padding: 0.4rem 0.7rem; min-height: 38px; } .btn-rh-primary, .btn-rh-outline { padding: 0.55rem 1rem; } /* ─── Forms ─── */ /* Note: font-size is intentionally NOT set here — riohub-theme.css keeps inputs at 16px ≤767px to prevent iOS focus-zoom. We only compact padding. */ .form-control, .form-select { padding: 0.55rem 0.7rem; min-height: 44px; } textarea.form-control { min-height: 80px; } label, .form-label { font-size: var(--fs-sm); margin-bottom: 0.25rem; } /* ─── Navbar (sticky) ─── */ .rh-navbar { padding: 0.4rem 0; } .rh-navbar .container-fluid.px-4 { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; } .rh-logo { height: 42px; margin-top: -0.5rem; margin-bottom: -0.5rem; } /* ─── Tables — scroll instead of breaking layout ─── */ .table-responsive { -webkit-overflow-scrolling: touch; } table { font-size: var(--fs-sm); } /* ─── Media never overflows ─── */ img { max-width: 100%; height: auto; } } /* ═══════════════════════════════════════════════════════════════════ THANG BREAKPOINT CHUẨN (áp dụng cho mọi CSS mới của dự án) ≤399.98px XS — máy nhỏ, nén thêm 1 nấc ≤575.98px SM — "mobile" mặc định, ~90% rule nằm ở đây ≤767.98px MD — phone ngang / tablet nhỏ; input 16px, tap target ≤991.98px LG — tablet, layout/sidebar KHÔNG dùng 379.98px: máy mục tiêu 390px sẽ không bao giờ khớp. Block ≤576px phía trên là code cũ — giữ nguyên có chủ đích (đổi sang 575.98 chỉ tạo rủi ro hồi quy ở đúng 576.0px mà không được gì). VÌ SAO FILE NÀY ĐƯỢC LINK 2 LẦN: footer.php:3 re-link file này SAU page-CSS để rule nén thắng cascade ở cùng specificity. Browser dedupe request (trùng URL + ?v=) nên chi phí ~0. TUYỆT ĐỐI KHÔNG XOÁ dòng đó — xoá sẽ làm mọi rule mobile thua page-CSS → hồi quy im lặng toàn site. ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 575.98px) { /* ─── Component compaction: chrome Bootstrap còn thiếu ─── */ .badge { font-size: var(--fs-xs); padding: 0.3em 0.5em; } .nav-tabs .nav-link, .nav-pills .nav-link { font-size: var(--fs-sm); padding: 0.45rem 0.7rem; min-height: 40px; display: inline-flex; align-items: center; } .modal-dialog { margin: 0.5rem; } .modal-body { padding: var(--pad-card); } .modal-header, .modal-footer { padding: var(--space-3) var(--pad-card); } .modal-title { font-size: var(--fs-lg); } .dropdown-menu { font-size: var(--fs-sm); } .dropdown-item { min-height: 44px; display: flex; align-items: center; } .list-group-item { padding: var(--space-3); } .alert { padding: var(--space-3); font-size: var(--fs-sm); } .breadcrumb { font-size: var(--fs-xs); } .pagination .page-link { min-width: 40px; min-height: 40px; font-size: var(--fs-sm); display: inline-flex; align-items: center; justify-content: center; } .table > :not(caption) > * > * { padding: 0.5rem 0.55rem; } .input-group > .btn { min-height: 44px; } /* ─── Chống tràn ngang (4 nguyên nhân gốc) ─── */ /* 1. flex/grid child mặc định min-width:auto → không co được */ .d-flex > *, .row > * { min-width: 0; } /* Trừ hao: phần tử KHÔNG được co (icon, logo, badge, avatar) */ .rh-logo, .badge, .bi, img[class*="avatar"] { flex-shrink: 0; } /* 2. Chuỗi dài không ngắt (mã đơn 19 số, affiliate link, email, open_id). Dùng overflow-wrap:anywhere — KHÔNG dùng word-break:break-all vì nó cắt giữa từ tiếng Việt trông rất xấu. */ td, th, .card-body, .list-group-item { overflow-wrap: anywhere; } /* 3. Bảng rộng + 4. phần tử width cứng */ .text-truncate { max-width: 100%; } pre, code { overflow-x: auto; max-width: 100%; } table { width: 100%; } } /* ─── TIER XS ≤399.98px — nén thêm 1 nấc ─── */ @media (max-width: 399.98px) { .btn { padding: 0.5rem 0.8rem; } .card-body { padding: var(--pad-card); } table { font-size: var(--fs-xs); } .table > :not(caption) > * > * { padding: 0.4rem 0.45rem; } }