/* ============================================================================ 05 — BỐ CỤC THÍCH ỨNG Ba lớp gắn lên thẻ , do `js/bo-cuc.js` đặt: · (không lớp nào) → máy tính · `.compact` → tablet, và điện thoại · `.narrow` → chỉ điện thoại (luôn đi kèm `.compact`) · `.thap` → màn thấp (điện thoại nằm ngang) · `.lm-frame` → xem thử giao diện điện thoại trên màn rộng ============================================================================ */ /* --- Cỡ chữ và lề theo từng bậc --------------------------------------------- Mọi cỡ chữ đều tính từ `--fs`, nên chỉ cần đổi biến này là cả app co theo. */ /* Máy tính: chữ lớn dần theo màn, có chặn trên và dưới */ html:not(.compact){--fs:clamp(13.6px, 0.17vw + 12.5px, 15.2px)} /* Tablet và điện thoại: chữ TỰ CO theo bề rộng màn thật. 360px → 12.6px · 390px → 13.1px · 414px → 13.9px · 430px → 14.4px · ≥460px → 15.4px */ html.compact{--fs:clamp(13.4px, 0.55vw + 9.8px, 15.4px); --pad-x:clamp(12px, 1.5vw, 18px)} html.narrow{ --fs:clamp(12.6px, 3.35vw, 15.4px); --pad-x:clamp(9px, 2.8vw, 14px); /* ⚠ Máy 375px cho `--fs` 12.6px; nhân .82 còn 10.3px thì không ai đọc nổi — nâng sàn ba bậc dưới. Đồng thời bó hai bậc trên lại cho tiêu đề khỏi ăn hết bề ngang. */ --t1:calc(var(--fs)*.88); --t2:calc(var(--fs)*.93); --t3:calc(var(--fs)*.97); --t6:calc(var(--fs)*1.34); --t7:calc(var(--fs)*1.58); } /* Xem thử giao diện điện thoại trên máy tính: khung hẹp hơn màn thật nên hạ cỡ chữ */ html.lm-frame{--fs:13.4px; --pad-x:13px} /* --- Thanh trên và ngăn kéo (chỉ có ở bố cục cảm ứng) ------------------------ */ .mtop,.mdrawer,.mscrim{display:none} html.compact .nav{display:none} html.compact .main{padding:calc(var(--mtop-h) + 14px) var(--pad-x) calc(28px + env(safe-area-inset-bottom))} html.compact .mtop{ display:flex;align-items:center;gap:8px; position:fixed;top:0;left:0;right:0;z-index:70; height:calc(var(--mtop-h) + env(safe-area-inset-top)); padding:env(safe-area-inset-top) 12px 0; background:var(--nav);color:var(--nav-chu); } .mtop .mt-mid{flex:1;min-width:0} .mtop .mt-brand{font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#7E8BA1;line-height:1.1} .mtop .mt-title{font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff} /* ⚠ Cỡ nút tính bằng `em` để nó co theo `--fs` — đặt px cố định thì trên máy nhỏ nút to quá còn máy lớn thì bé tí. */ .mtop .mt-btn{width:2.55em;height:2.55em;flex:none;border-radius:9px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:var(--accent-line);font-size:1.05em;display:flex;align-items:center;justify-content:center;padding:0} .mtop .mt-btn:active{background:rgba(255,255,255,.18)} .mtop .mt-btn.on{background:var(--accent);border-color:var(--accent);color:var(--accent-on)} html.compact .mscrim{display:block;position:fixed;inset:0;z-index:80;background:rgba(10,18,32,.5);opacity:0;pointer-events:none;transition:opacity .18s} html.compact body.drawer-open .mscrim{opacity:1;pointer-events:auto} html.compact .mdrawer{ display:flex;flex-direction:column; position:fixed;top:0;bottom:0;left:0;width:min(84vw,300px);z-index:81; background:var(--nav);color:var(--nav-chu); padding:calc(env(safe-area-inset-top) + 14px) 0 14px; transform:translateX(-100%);visibility:hidden; transition:transform .2s ease, visibility 0s linear .2s; } html.compact body.drawer-open .mdrawer{transform:none;visibility:visible;transition:transform .2s ease, visibility 0s linear 0s} .mdrawer .dscroll{flex:1;min-height:0;overflow-y:auto} .mdrawer a{display:flex;align-items:center;gap:11px;padding:11px 18px;color:#AEB9CB;text-decoration:none;font-weight:500} .mdrawer a.on{color:#fff;background:color-mix(in srgb, var(--accent) 22%, transparent)} .mdrawer a .ic{width:20px;flex:none;text-align:center} /* Màn thấp (điện thoại nằm ngang): bóp chiều cao thanh trên lại */ html.thap{--mtop-h:46px} /* --- Bảng hoá thẻ trên điện thoại ------------------------------------------- Thêm lớp `cardable` cho bảng nào muốn xếp thành thẻ. Mỗi ô cần `data-lb="Nhãn"` để biết nó là cột gì khi đã mất hàng tiêu đề. Cột nào không quan trọng thì gắn `pri3` — nó ẩn đi ở màn hẹp. */ html.narrow table.grid.cardable{display:block;min-width:0} html.narrow table.grid.cardable>thead{display:none} html.narrow table.grid.cardable>tbody{display:block} html.narrow table.grid.cardable>tbody>tr{ display:flex;flex-direction:column;position:relative; background:var(--card);border:1px solid var(--line);border-radius:10px; padding:11px 13px;margin-bottom:10px; } html.narrow table.grid.cardable>tbody>tr>td{display:block;border:none;padding:1px 0} html.narrow table.grid.cardable>tbody>tr>td.pri3{display:none!important} /* Nhãn cột hiện ra trước giá trị khi bảng đã thành thẻ */ html.narrow table.grid.cardable>tbody>tr>td[data-lb]::before{ content:attr(data-lb) " · ";color:var(--muted);font-size:var(--t2); } /* Ô tiêu đề của thẻ: to hơn, không có nhãn đằng trước */ html.narrow table.grid.cardable>tbody>tr>td.cd-title{font-weight:700;font-size:var(--t5);margin-bottom:4px} html.narrow table.grid.cardable>tbody>tr>td.cd-title::before{content:none} /* ⚠ `.cd-act` (cụm nút) bị đẩy xuống CUỐI thẻ và canh phải. Đây là móc BỐ CỤC, không phải chuyện in ấn — đừng gộp nó vào luật `no-print`. */ html.narrow table.grid.cardable>tbody>tr>td.cd-act{margin-top:7px;text-align:right;order:9} html.narrow table.grid.cardable>tbody>tr>td.cd-act::before{content:none} /* --- Bảng rộng thì cho cuộn ngang -------------------------------------------- ⚠ Bản gốc khớp theo CHUỖI trong thuộc tính `style` (`[style*="overflow-x:auto"]`), nên chỉ cần ai gõ thêm một dấu cách là luật mất tác dụng, không báo gì. Ở đây dùng lớp thật. Bọc bảng bằng `
`. */ html.narrow .tablewrap{box-shadow:inset -12px 0 12px -12px rgba(0,0,0,.18)} /* --- Lưới gập về một cột trên điện thoại -------------------------------------- */ html.narrow .luoi2,html.narrow .luoi3{grid-template-columns:1fr!important} /* --- Khoang nội dung ẩn/hiện --------------------------------------------------- */ .wsec[hidden]{display:none!important}