/* ============================================================================ LINH-VAT-BE-CU.CSS — cỡ và cử động của Bé Cư Dựng 02/08/2026 · phiên Não Tập Đoàn · Tiêu chuẩn 15 + 16 🔴 BẬT/TẮT: mọi thứ dưới đây chỉ chạy khi thẻ có class "co-be-cu". Người dùng tắt trong Cài đặt -> gỡ class -> linh vật biến mất sạch, không để lại khoảng trống vỡ bố cục. Đây là luật TC16: dễ thương là món quà, không phải sự áp đặt. ========================================================================== */ .be-cu { display: none; } /* mặc định KHÔNG có */ .co-be-cu .be-cu { display: block; } /* -------------------------------------------------------------------------- 1. BA CỠ — không có cỡ thứ tư -------------------------------------------------------------------------- */ .be-cu.nho { width: 44px; height: 40px; } /* cạnh dòng chữ, trong toast */ .be-cu.vua { width: 96px; height: 88px; } /* thẻ mừng, hộp thoại lỗi */ .be-cu.to { width: 140px; height: 128px; } /* màn hình trống, màn chào */ /* -------------------------------------------------------------------------- 2. CỬ ĐỘNG LŨN CŨN Biên độ nhỏ, chậm. Nhảy cao và nhanh là quảng cáo, không phải app tiền bạc. -------------------------------------------------------------------------- */ @keyframes be-cu-tho { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } @keyframes be-cu-nhun { 0%,100% { transform: translateY(0) scale(1); } 30% { transform: translateY(-10px) scale(1.04); } 60% { transform: translateY(0) scale(.98, 1.02);} } @keyframes be-cu-cui { 0% { transform: rotate(0deg); } 40% { transform: rotate(-4deg); } 100% { transform: rotate(0deg); } } .co-be-cu .be-cu.tho { animation: be-cu-tho 3.2s ease-in-out infinite; } .co-be-cu .be-cu.mung { animation: be-cu-nhun 1.1s ease-out 2; } /* đúng 2 nhịp rồi đứng yên */ .co-be-cu .be-cu.loi { animation: be-cu-cui 0.9s ease-in-out 1; } /* -------------------------------------------------------------------------- 3. MÁY NGƯỜI DÙNG XIN "ÍT CHUYỂN ĐỘNG" THÌ ĐỨNG YÊN Người say xe, người rối loạn tiền đình bật cờ này trong hệ điều hành. Bỏ qua cờ đó là làm người ta chóng mặt — TC16 cấm. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .co-be-cu .be-cu { animation: none !important; } } /* -------------------------------------------------------------------------- 4. XẾP CẠNH LỜI THOẠI -------------------------------------------------------------------------- */ .be-cu-hang { display: flex; align-items: center; gap: 12px; } .be-cu-hang .loi { flex: 1; min-width: 0; } /* ========================================================================== 5. THẺ CHÀO — phần NÃO APP THÊM (02/08/2026, ghép qua public/linh-vat.js) Bản gốc não Tập Đoàn dừng ở mục 4. Mục này là khuôn của riêng app: tờ 05 chốt tư thế và cỡ, nhưng không chốt cái hộp đựng lời chào. Đi theo đúng khuôn .am-the của an-mung.css để hai món dễ thương trông cùng một nhà — màu lấy từ biến, KHÔNG gõ mã HEX (TC19.1). ========================================================================== */ /* 🔴 Bé Cư hay đứng trong hộp flex có sẵn của app (thẻ mừng .am-the, toast #warm-toast). Thiếu dòng này thì flex bóp ô vuông 44px xuống còn 17px — đo được trên sân thử 3999 ngày 02/08, nhìn ra một chấm không rõ hình gì. */ .co-be-cu .be-cu { flex: none; } .bc-chao { display: none; } /* 🔴 THẺ CHÀO NEO ĐỈNH MÀN, KHÔNG NEO ĐÁY (anh Quyết gõ `linh vật lên đỉnh màn`, phiếu 52 · 05/08/2026). Trước đây `bottom: 128px` = ngay trên thanh tab 5 ô, đúng chỗ nút "Thêm ảnh" của form báo sự cố ⇒ che mất suốt 4,5 giây (GIU_CHAO ở linh-vat.js:43). Nó KHÔNG khoá thao tác — `pointer-events: none` vẫn cho ngón tay xuyên qua — bệnh là che TẦM NHÌN, đừng ghi nhầm là "khoá nút". Vì sao 84px chứ không phải 12px: `.topbar` KHÔNG fixed, nó nằm đầu nội dung. ĐO THẬT trên sân 3994 khổ 375×812 (không đoán theo con số trong CSS): thanh đầu màn Nhà chạy từ y=0 tới y=76. Thẻ chào có z-index 61 > 30 của topbar ⇒ đặt `top: 12px` là nó ĐÈ LÊN chuông, người dùng mất 4,5 giây không thấy số thông báo — đúng cái phiếu 52 dặn phải tránh. 84 = 76 đo được + 8 khe thở. `env(safe-area-inset-top)` là để chừa tai thỏ iPhone, đừng bỏ. */ .co-be-cu .bc-chao { /* Căn giữa không dùng translateX — xem chú thích .tabbar (style.css). */ position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top) + 84px); margin-inline: auto; width: fit-content; z-index: 61; max-width: 86%; pointer-events: none; /* không chặn thao tác — TC4 */ display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 16px; background: var(--card); color: var(--text); border: 2px solid var(--blue-100); box-shadow: 0 6px 20px rgba(6, 42, 30, .18); font-size: 16px; line-height: 1.4; } .co-be-cu .bc-chao .loi { flex: 1; min-width: 0; } .co-be-cu .bc-chao.bc-tan { opacity: 0; transition: opacity .3s ease; }