/* ===========================================================
   mobile.css — tinh chỉnh trải nghiệm trên điện thoại
   =========================================================== */
@media (max-width: 640px) {
    .container { padding: 16px 12px 32px; }
    .page-head { align-items: flex-start; }
    .btn { padding: 11px 16px; }

    /* Nút thao tác lớn cho staff/check-in trên mobile */
    .big-action { display: block; width: 100%; font-size: 18px; padding: 16px; border-radius: 14px; }

    /* Bảng dữ liệu dễ cuộn ngang */
    .table-wrap { -webkit-overflow-scrolling: touch; }

    /* Card thao tác nhanh staff */
    .quick-tiles { grid-template-columns: 1fr 1fr; }
}

/* Nút check-in mobile khổng lồ cho staff */
.checkin-mega {
    display: block; width: 100%; text-align: center;
    font-size: 20px; font-weight: 700; padding: 20px;
    border-radius: 16px; margin-bottom: 16px;
    background: linear-gradient(120deg, var(--primary, #16a34a), var(--secondary, #0b7285));
    color: #fff; box-shadow: var(--shadow, 0 8px 24px rgba(15,23,42,.12));
}
.checkin-mega:hover { text-decoration: none; color: #fff; filter: brightness(1.05); }

.quick-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.quick-tile {
    background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 14px;
    padding: 16px 12px; text-align: center; color: var(--ink, #0f172a);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(15,23,42,.08));
}
.quick-tile:hover { text-decoration: none; border-color: var(--primary, #16a34a); }
.quick-tile .qt-icon { font-size: 26px; }
.quick-tile .qt-label { font-weight: 700; font-size: 14px; margin-top: 4px; }