/* =============================================================================
   ub-mobile.css — ngôn ngữ thiết kế lấy TỪ PHÁC THẢO ĐÃ DUYỆT
   (.claude/prompts/2026-09-14_ub-pwa-mobile-redesign/output/phac-thao-ub-mobile.html)

   Trước file này, các đợt sửa mới chỉ chỉnh CẤU TRÚC (bỏ hộp cuộn lồng, xếp lại
   cột) mà vẫn giữ lớp áo cũ, nên nhìn không ra một ứng dụng điện thoại.
   Toàn bộ số đo/màu dưới đây bê thẳng từ phác thảo.
   ============================================================================= */

:root {
    --ub-brand: #004aad;
    --ub-brand-nhat: #e3ebf8;
    --ub-vien: #e2e8f2;
    --ub-vien-dam: #cfd9e8;
    --ub-chu: #0f1722;
    --ub-chu-phu: #61708a;
    --ub-nen: #f5f7fb;
}


/* =============================================================================
   🔴 RANH GIỚI QUAN TRỌNG
   Mọi thứ về BỐ CỤC/GIAO DIỆN dưới đây CHỈ áp dụng cho màn hẹp (<= 991.98px).
   Bản PC/tablet rộng giữ nguyên giao diện cũ có từ trước bản mobile này.
   Chỉ hai thứ nằm NGOÀI media query vì là bản vá lỗi vô hại dùng chung:
   lớp phủ "Đang tải…" bị dính mép trái, và danh sách file PDF.
   ============================================================================= */
@media (max-width: 991.98px) {
    /* ---------------------------------------------------------------- thanh 46px */
    .app-topbar {
        background: var(--ub-brand);
    }

    .app-topbar-mark {
        flex: none;
        width: 30px;
        height: 30px;
        border-radius: 7px;
        background: #fff;
        display: grid;
        place-items: center;
        overflow: hidden;
        padding: 2px;
    }

        .app-topbar-mark img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
        }

    .app-topbar-title {
        font-size: 13.5px;
        font-weight: 600;
    }

    /* ---------------------------------------------------------------- ngăn kéo */
    .app-drawer-head {
        background: var(--ub-brand);
    }

    .app-drawer-item {
        font-size: 14px;
        color: var(--ub-chu);
        border-bottom: 1px solid #eef1f6;
    }

        /* Mục "Cài ứng dụng" là lời mời chính -> làm nổi đúng như phác thảo */
        .app-drawer-item#app-drawer-install {
            background: var(--ub-brand-nhat);
            color: var(--ub-brand);
            font-weight: 700;
        }

    /* ---------------------------------------------------- nhãn khu vực (DỊCH VỤ) */
    .ub-nhan-khu {
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .08em;
        color: var(--ub-chu-phu);
        text-transform: uppercase;
        margin: 14px 0 8px;
    }

    /* ------------------------------------------------------------- thẻ dùng chung */
    .ub-the {
        background: #fff;
        border: 1px solid var(--ub-vien);
        border-radius: 10px;
        padding: 11px;
    }

    /* --------------------------------------------------------------- ô dịch vụ */
    .ub-svc {
        background: #fff;
        border: 1px solid var(--ub-vien);
        border-radius: 11px;
        padding: 16px 8px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 7px;
        cursor: pointer;
        text-decoration: none;
    }

        .ub-svc .ub-svc-ic {
            font-size: 22px;
            line-height: 1.1;
            color: var(--ub-brand);
        }

        .ub-svc .ub-svc-ten {
            font-size: 12.5px;
            font-weight: 700;
            color: var(--ub-brand);
            line-height: 1.3;
        }

        .ub-svc .ub-svc-mo {
            font-size: 10.5px;
            color: var(--ub-chu-phu);
            line-height: 1.35;
        }

    /* ------------------------------------------------------------ thẻ cơ sở khám */
    .ub-br {
        background: #fff;
        border: 1px solid var(--ub-vien);
        border-radius: 10px;
        padding: 11px;
        margin-bottom: 9px;
    }

        .ub-br > b {
            display: block;
            font-size: 12.5px;
            color: var(--ub-brand);
            line-height: 1.35;
            margin-bottom: 8px;
        }

        .ub-br .ub-br-map,
        .ub-br .contact-map {
            width: 100%;
            height: 150px;
            border: 0;
            border-radius: 7px;
            display: block;
        }

        .ub-br .ub-br-acts {
            display: flex;
            gap: 6px;
            margin-top: 9px;
        }

            .ub-br .ub-br-acts > a {
                flex: 1;
                text-align: center;
                border: 1px solid var(--ub-vien-dam);
                border-radius: 6px;
                padding: 9px 2px;
                color: var(--ub-brand);
                font-weight: 700;
                font-size: 11.5px;
                text-decoration: none;
                min-height: 38px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

                .ub-br .ub-br-acts > a.ub-chinh {
                    background: var(--ub-brand);
                    color: #fff;
                    border-color: var(--ub-brand);
                }

    /* ------------------------------------------------------- thanh lưu dính đáy */
    .ub-thanh-luu {
        position: sticky;
        bottom: 0;
        z-index: 20;
        background: #fff;
        padding: 9px 11px;
        border-top: 1px solid var(--ub-vien);
    }

        .ub-thanh-luu button,
        .ub-thanh-luu .btn {
            width: 100%;
            border: 0;
            background: var(--ub-brand);
            color: #fff;
            border-radius: 8px;
            padding: 11px;
            font-weight: 700;
            font-size: 13.5px;
            min-height: 46px;
        }



    /* Ảnh bệnh viện làm nền toàn màn (body::before, blur) trông rất "trang web":
       trên điện thoại nó lòi ra hai bên và dưới đáy thẻ trắng. Phác thảo dùng
       nền phẳng #f5f7fb. */
    body::before {
        display: none !important;
    }

    /* Vài màn đặt ảnh THẲNG trên `body, html { background-image: ... }` chứ không
       qua ::before, nên phải đè cả hai thẻ mới hết lòi ảnh ra sau các thẻ trắng. */
    html,
    body {
        background: var(--ub-nen) !important;
        background-image: none !important;
    }

    /* 🔴 BẪY ĐÃ ĐẠP: khối flex căn giữa mà nội dung CAO HƠN khung thì phần thừa
       tràn ĐỀU RA HAI ĐẦU — mép trên bị đẩy ra ngoài màn, cuộn cũng không tới.
       (Màn Tra cứu kết quả mất hẳn 3 đợt khám mới nhất vì lỗi này.)
       Trên điện thoại luôn xếp từ trên xuống. */
    .main-wrapper,
    .body__change,
    .register__content,
    .wrapper__page {
        height: auto !important;
        min-height: 0 !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
    }

    /* 🔴 CÙNG CÁI BẪY, NHƯNG Ở NGAY <body>.
       Vài màn (Quên mật khẩu, Đổi mật khẩu) tự đặt
       body{display:flex;align-items:center;justify-content:center} để căn giữa
       thẻ đăng nhập. Từ khi _Layout biến body thành khung app (flex cột), hai
       dòng đó bóp THANH TIÊU ĐỀ 46px còn đúng bề ngang chữ (đo được 167px, thụt
       vào giữa) và đẻ ra khoảng trống lớn phía dưới.
       Khung app phải luôn trải hết bề ngang và xếp từ trên xuống. */
    body {
        align-items: stretch !important;
        justify-content: flex-start !important;
    }

    /* Cột bọc thẻ trong cụm màn chưa đăng nhập cũng căn giữa theo chiều dọc */
    .auth-row > [class*="col-"] {
        align-items: stretch !important;
        justify-content: flex-start !important;
    }

}

/* -------------------------------------------------- lớp phủ "Đang tải…" */
/*
   #page-loader-body là một .d-flex TRẦN phủ kín màn (position:fixed, 4 cạnh 0),
   KHÔNG phải .modal của Bootstrap. Vì vậy .modal-dialog-centered bên trong chỉ
   canh được chiều DỌC; chiều ngang thì .modal-dialog giữ margin mặc định nên hộp
   dính sát mép trái màn hình. Class "w-20" trên đó cũng không có thật trong
   Bootstrap (chỉ có w-25/w-50/w-75/w-100) nên không đặt được bề rộng.
   Không áp dụng cho màn hình hẹp — lỗi này có ở mọi cỡ màn.
*/
#page-loader-body {
    align-items: center;
    justify-content: center;
}

    #page-loader-body .modal-dialog {
        margin: auto;
        width: auto;
        min-width: 200px;
        max-width: 320px;
    }

    /* Hộp không có nền nên chữ "Đang tải…" chìm vào các ô dịch vụ phía sau */
    #page-loader-body .modal-content {
        background: #fff;
        border: 1px solid var(--ub-vien);
        border-radius: 12px;
        box-shadow: 0 12px 32px rgba(15, 23, 34, .18);
    }

    #page-loader-body.show {
        background: rgba(15, 23, 34, .25);
    }


/* ------------------------------------------------------- danh sách file PDF */
/*
   Trước đây mỗi file là một ô vuông to đùng chứa ảnh raster /dist/img/pdf.png
   (biểu tượng PDF chung chung, mờ khi phóng to) + tên file, không có dấu hiệu
   nào cho biết bấm được. Nay là thẻ gọn: biểu tượng vẽ vector, tên file, và
   chữ "Xem" để người dùng biết đây là thứ bấm vào.
*/
.ub-file {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--ub-vien);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    min-height: 56px;
}

    .ub-file:hover {
        border-color: var(--ub-brand);
    }

    .ub-file .ub-file-ic {
        flex: none;
        width: 32px;
        height: 32px;
        display: grid;
        place-items: center;
        color: #d93025;
    }

    .ub-file .ub-file-ten {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 13px;
        font-weight: 600;
        color: var(--ub-chu);
        line-height: 1.35;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .ub-file .ub-file-xem {
        flex: none;
        font-size: 12px;
        font-weight: 700;
        color: var(--ub-brand);
        display: flex;
        align-items: center;
        gap: 2px;
    }

/* Lưới file: máy tính 2 cột cho đỡ trống, điện thoại 1 cột cho dễ chạm */
#list-file-ls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

@media (max-width: 991.98px) {
    #list-file-ls {
        grid-template-columns: 1fr;
    }
}