/* ============================================================================
   CHỪA MÉP TRÊN MÀN — đừng để app chui xuống dưới thanh trạng thái
   Dựng 09/08/2026 · anh Quyết báo: "giao diện tràn lên đầu điện thoại,
   mấy nút ở trên bấm không ăn" · anh gõ `C` (cả app Play lẫn trình duyệt đều lỗi)
   ============================================================================

   BỆNH ĐO ĐƯỢC (kho gộp `main` = e8e2ead, đo 09/08/2026):
   Cả ba trang chính đều khai `viewport-fit=cover` ⇒ trang CỐ Ý vẽ tràn ra tận
   mép màn, chui xuống dưới thanh trạng thái (Android 24-48px) và tai thỏ
   (iPhone 47-59px). Nhưng CSS chỉ chừa mép DƯỚI:

     style.css:57  #app      padding-bottom: calc(76px + env(safe-area-inset-bottom))   ← có
                             padding-top                                                ← KHÔNG có
     style.css:59  .screen   padding: 0 14px 20px                                       ← top = 0
     style.css:65  .topbar   padding: 16px 2px 12px                                     ← 16px trơn
     style.css:639 .topbar.tieude-lon        padding-top: 20px                          ← 20px trơn
     style.css:642 .topbar.tieude-lon.da-thu calc(8px + env(safe-area-inset-top))       ← CÓ, nhưng…

   …dòng cuối chỉ ăn ở trạng thái `.da-thu`, tức ĐÃ CUỘN. Lúc mới mở màn thì
   không chừa gì: tiêu đề, nút quay lại (`index.html` dòng 177 · 323 · 344) và
   chuông nằm dưới thanh trạng thái. Hệ điều hành nuốt cú chạm ở vùng đó
   ⇒ nút vẫn hiện, nhìn không khác gì, BẤM KHÔNG ĂN.

   🔴 VÌ SAO LÀ FILE RIÊNG, KHÔNG SỬA THẲNG style.css:
   luật giữ lõi (`CLAUDE.md` 6e) — chỉ phiên giữ lõi được sửa style.css. File này
   nạp SAU style.css trong index.html nên thắng ở cùng đặc hiệu. Cùng nếp với
   `dieu-huong.js` (625 dòng, 0 dòng sửa app.js).

   🔴 CẤM thay env() bằng số px cứng — mỗi máy một chiều cao thanh trạng thái
   khác nhau. Máy nào không tràn (trình duyệt thường, Android đã opt-out
   edge-to-edge) thì env() trả 0px ⇒ cả file thành no-op, không hại ai.

   🔴 CẤM đặt padding-top lên `.screen` hay `.topbar` thay cho `#app`:
   `.topbar` là flex và có màn KHÔNG có topbar (màn đăng nhập) ⇒ chừa ở đó là
   sót màn. `#app` bọc mọi màn nên chừa một chỗ ăn cho tất cả.
   ========================================================================== */

/* ① Cả app lùi xuống dưới thanh trạng thái.
   `box-sizing: border-box` (style.css:1) đã có sẵn ⇒ padding nằm TRONG 100vh,
   không đẩy trang dài ra thêm, không đẻ thanh cuộn thừa. */
#app { padding-top: env(safe-area-inset-top); }

/* ② Màn đăng nhập tự đo chiều cao nên phải trừ đúng phần vừa chừa.
   style.css:85 khai `.login-man { min-height: calc(100dvh - 30px) }`. Nếu không
   trừ, tổng = phần chừa + (100dvh - 30px) > 100dvh ⇒ màn đăng nhập dài hơn màn
   hình, đẻ thanh cuộn và nút "Đăng nhập" bị đẩy khỏi vùng ngón cái (TC3). */
.login-man { min-height: calc(100dvh - 30px - env(safe-area-inset-top)); }