/* =====================================================================================
 * Trải nghiệm khi chạy dạng app (Horus) — 16/09/2026.
 *
 * ⚠ Tệp này CHỈ được nạp cho aiwater.xiris.vn (rào ở theme.php, biến $pwa_bat). Đừng chuyển
 *   mấy luật dưới đây vào custom.css hay style.css: hai tệp đó dùng chung cho 6 site.
 * ===================================================================================== */

/* ---------- Dải báo mất kết nối ---------- */
.xr-mat-mang {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 99999;
    padding: 9px 14px;
    background: #b45309;
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
    transform: translateY(-100%);
    transition: transform .25s ease;
    /* Không chắn chuột: người dùng vẫn bấm được thứ nằm dưới dải báo. */
    pointer-events: none;
}
.xr-mat-mang.hien { transform: none; }
/* Có mạng lại thì đổi sang xanh một nhịp rồi tự trượt lên. */
.xr-mat-mang.da-co-lai { background: #15803d; }

/* ---------- Nút quay lại, CHỈ hiện khi mở dạng app ----------
   iOS ở chế độ toàn màn hình không có nút back nào, chỉ vuốt mép — mà thợ vận hành đeo găng
   thì vuốt mép rất khó. Trong trình duyệt thường thì ẩn, vì đã có nút back của trình duyệt.

   ⚠ Nút nằm SẴN trong thanh đầu trang, khai ở layout/layout.menutrai*.tpl ngay SAU ☰ (mẫu
     chủ dự án: nút mở menu phải sát mép trái, nút quay lại đứng thứ hai).
     Bản cũ để JS dựng nút rồi `position:fixed` canh theo toạ độ ☰ — phông biểu tượng nạp xong
     là bố cục xê dịch, nút rơi sai chỗ rồi vài giây sau mới nhảy về (chủ dự án báo 16/09/2026:
     "dấu trở về bị rớt dòng, 1 lúc sau nó mới về đúng vị trí"). Nằm trong luồng flex của thanh
     thì không còn gì phải đo, và cũng không thể đè lên nút nào.
   ⚠ Thẻ trong layout có thuộc tính `hidden` để 5 site kia (không nạp tệp này) không mọc thêm
     nút lạ. Chính `display:flex` dưới đây là thứ mở nó ra: luật của tác giả luôn thắng luật
     `[hidden]` mặc định của trình duyệt, bất kể độ ưu tiên. */
.xr-quay-lai { display: none; }
@media all and (display-mode: standalone) {
    .xr-quay-lai {
        display: flex;
        align-items: center;
        justify-content: center;
        /* Không co lại khi tiêu đề dài — đúng như luật của ☰ trong xiris_switcher_project_perms.js. */
        flex: 0 0 auto;
        width: 40px; height: 40px;
        margin: 0 4px 0 0;
        padding: 0;
        /* ⚠ Bộ mặt phải KHỚP thanh đầu trang, không được nổi hơn. Đo thật trên trang: mọi biểu
           tượng của thanh (☰, cảnh báo, chuông, QR) đều `color: rgb(51,65,85)`, nền trong suốt,
           không viền; riêng ☰ là 40x40, bo góc 8px. Bản trước để khối tròn xanh đặc có đổ bóng,
           nhìn nặng hơn hẳn mọi thứ quanh nó ("nút nhìn ko có phù hợp", 16/09/2026). */
        border: 0; border-radius: 8px;
        background: transparent;
        /* Cùng màu với ☰ (xiris_switcher_project_perms.js đặt `.dong_mo_menu i{color:#334155}`).
           Bản tối vẫn tự đổi được: `html[data-xtheme="dark"] .dong_mo_menu *` là (0,2,1),
           thắng luật (0,1,0) này. */
        color: #334155;
        box-shadow: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    /* Bấm vào có phản hồi nhẹ, vì nút không có nền để nhận ra lúc chạm. */
    .xr-quay-lai:active { background: rgba(51, 65, 85, .12); }
    /* Hình vẽ tự chế chứ không dùng phông biểu tượng: `fa-light` là bộ Pro, không chắc màn nào
       cũng nạp được — đo trên host thì thẻ <i> ra bề ngang 0. Vẽ thẳng thì luôn đúng cỡ,
       và không phải chờ phông nên nút không bao giờ xê dịch. */
    .xr-quay-lai svg { display: block; width: 24px; height: 24px; }
}

/* ---------- iPhone: ô nhập phải từ 16px trở lên ----------
   Dưới 16px thì Safari TỰ PHÓNG TO cả màn hình lúc bấm vào ô, và không thu lại — người nhập
   phải tự chụm tay thu nhỏ sau mỗi lần gõ.
   ⚠ Phải có !important: các luật cỡ chữ của theme có độ ưu tiên cao hơn, không ép thì luật này
     không ăn thua gì cả.
   ⚠ Chừa checkbox/radio/range: mấy loại đó cỡ chữ không liên quan, ép vào lại xô bố cục. */
@media (max-width: 767px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ---------- Vuốt xuống để tải lại (chỉ ở chế độ app) ----------
   Trong app toàn màn hình không có nút tải lại nào: Android thì Chrome tự có cử chỉ này nhưng
   theme đã đặt `overscroll-behavior` nên bị tắt, còn iOS thì vốn không có. Nên tự làm.
   Vòng tròn báo nằm ngay dưới mép trên, trượt theo ngón tay. */
.xr-keo {
    position: fixed;
    top: 0; left: 50%;
    z-index: 99997;
    width: 38px; height: 38px;
    margin-left: -19px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 3px 12px rgba(15, 23, 42, .28);
    display: flex; align-items: center; justify-content: center;
    color: #2369c6;
    opacity: 0;
    transform: translateY(-46px);
    pointer-events: none;
}
.xr-keo svg { width: 19px; height: 19px; }
/* Lúc thả tay: trượt về chỗ cũ có hiệu ứng. Lúc đang kéo thì KHÔNG có hiệu ứng, nếu không
   vòng tròn chạy trễ hơn ngón tay, cảm giác rất ì. */
.xr-keo.tra-ve { transition: transform .22s ease, opacity .22s ease; }
.xr-keo.du { color: #15803d; }
.xr-keo.dang-tai svg { animation: xr-xoay .8s linear infinite; }
@keyframes xr-xoay { to { transform: rotate(360deg); } }