/* -------------------------------------------------------------
 * VNeID Style Sheet - Mobile Emulator Simulator
 * ------------------------------------------------------------- */

/* Nền và khung bao giả lập trên màn hình PC */
.phone-frame-wrapper {
    min-height: 100vh;
    width: 100vw;
    background: linear-gradient(135deg, #1e1e24 0%, #111115 100%);
    background-image: radial-gradient(circle at 20% 30%, rgba(161, 26, 26, 0.15) 0%, transparent 50%),
                      radial-gradient(circle at 80% 70%, rgba(245, 158, 11, 0.08) 0%, transparent 50%);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 20px 0;
}

/* Nút quay lại góc trên bên trái màn hình PC */
.floating-back-btn {
    position: absolute;
    top: 25px;
    left: 25px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
    padding: 0.6rem 1.2rem;
    border-radius: 30px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
    z-index: 10;
}

.floating-back-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 4px 15px rgba(161, 26, 26, 0.4);
    transform: translateX(-3px);
}

/* Thân máy điện thoại */
.phone-device {
    width: 375px;
    height: 780px;
    background-color: #000000;
    border: 12px solid #2e2e2e;
    border-radius: 48px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.8),
                inset 0 0 10px rgba(255,255,255,0.2);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Giữ nguyên tỉ lệ viewport di động */
}

/* Tai thỏ / Notch */
.phone-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 25px;
    background-color: #2e2e2e;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    z-index: 999;
}

/* Thanh trạng thái (Status Bar) */
.phone-status-bar {
    height: 40px;
    background-color: var(--primary-color);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 24px 6px 24px;
    font-size: 0.8rem;
    font-weight: 500;
    z-index: 998;
    user-select: none;
}

.status-icons {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Màn hình hiển thị nội dung app */
.phone-screen-content {
    flex: 1;
    background-color: #f4f6f8;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: 60px; /* Chừa không gian cho bottom nav */
}

/* CÁC MÀN HÌNH CHUYỂN TAB TRÊN DI ĐỘNG */
.mobile-screen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    display: none;
    flex-direction: column;
    padding-bottom: 20px;
}

.mobile-screen.active {
    display: flex;
    animation: slideInScreen 0.25s ease-out;
}

@keyframes slideInScreen {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

/* =====================================================================
 * HEADER DI ĐỘNG VNEID STYLE
 * ===================================================================== */
.vneid-mobile-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, #6e0d0d 100%);
    color: white;
    padding: 1.25rem 1rem;
    text-align: center;
    position: relative;
    box-shadow: var(--shadow-sm);
}

.vneid-mobile-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('/image/heritage-pattern.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
    opacity: 0.04;
}

.header-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.header-emblem {
    width: 60px;
    height: 60px;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.3));
}

.banner-texts h3 {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.8px;
    opacity: 0.9;
}

.banner-texts h2 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent-color);
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* THẺ CHÀO MỪNG AD */
.mobile-welcome-card {
    background-color: white;
    margin: -15px 12px 12px 12px;
    border-radius: 12px;
    padding: 0.8rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-sm);
    z-index: 10;
    position: relative;
    border: 1px solid var(--border-color);
}

.welcome-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mobile-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--accent-color);
    color: var(--primary-dark);
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.welcome-user {
    display: flex;
    flex-direction: column;
}

.welcome-user span {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.welcome-user strong {
    font-size: 0.85rem;
    color: var(--text-primary);
}

.online-badge {
    background-color: #d1fae5;
    color: var(--success-dark);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}

/* THỐNG KÊ NHANH */
.mobile-stats-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0 12px;
    margin-bottom: 12px;
}

.m-stat-box {
    background-color: white;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

.m-stat-num {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-color);
    display: block;
}

.m-stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* MENU CHỨC NĂNG LƯỚI */
.mobile-menu-section {
    padding: 0 12px;
    margin-top: 5px;
}

.mobile-menu-section h4 {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

.mobile-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.menu-grid-item {
    background-color: white;
    border-radius: 12px;
    padding: 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: transform 0.2s, box-shadow 0.2s;
}

.menu-grid-item:active {
    transform: scale(0.97);
    background-color: var(--bg-main);
}

.grid-icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.icon-scanner { background: linear-gradient(135deg, var(--primary-color) 0%, #db3a3a 100%); }
.icon-users { background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%); }
.icon-catalogs { background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); }
.icon-settings { background: linear-gradient(135deg, #64748b 0%, #94a3b8 100%); }

.menu-grid-item span {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
}

/* =====================================================================
 * SUBPAGES (Duyệt Đại biểu, Nhóm trên di động)
 * ===================================================================== */
.mobile-subpage-header {
    height: 50px;
    background-color: var(--primary-color);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.mobile-subpage-header h3 {
    font-size: 0.95rem;
    font-weight: 700;
}

.m-back-btn, .m-add-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.3rem;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.m-back-btn:active, .m-add-btn:active {
    background-color: rgba(255,255,255,0.15);
    border-radius: 50%;
}

.m-search-wrapper {
    padding: 8px 12px;
    background-color: white;
    border-bottom: 1px solid var(--border-color);
}

.m-search-wrapper input {
    width: 100%;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 0.8rem;
    outline: none;
}

/* DANH SÁCH THẺ DI ĐỘNG */
.mobile-card-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
}

.mobile-item-card {
    background-color: white;
    border-radius: 10px;
    padding: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.m-card-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary-color);
}

.m-card-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 0.65rem;
}

.m-card-details {
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.m-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    border-top: 1px solid var(--border-color);
    padding-top: 8px;
    margin-top: 4px;
}

/* =====================================================================
 * SCANNER TRÊN ĐIỆN THOẠI
 * ===================================================================== */
.mobile-scanner-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
}

#m-reader-container {
    position: relative;
    width: 100%;
    max-width: 280px;
    aspect-ratio: 1;
    border: 2px solid #f59e0b;
    border-radius: 16px;
    overflow: hidden;
    background-color: #000;
    margin-bottom: 1rem;
}

#m-reader {
    width: 100%;
    height: 100%;
}

#m-reader video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Html5Qrcode scales its built-in guide with the camera aspect ratio, which
   can turn a square QR guide into a rectangle. The app draws a fixed 1:1
   guide instead while the scanner still uses a square detection box. */
#m-reader #qr-shaded-region {
    display: none !important;
}

.mobile-qr-guide {
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 50%;
    width: 72%;
    aspect-ratio: 1 / 1;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.mobile-qr-guide span {
    position: absolute;
    width: 28px;
    height: 28px;
    border-color: #fff;
    border-style: solid;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}

.mobile-qr-guide span:nth-child(1) { top:0; left:0; border-width:4px 0 0 4px; border-radius:5px 0 0 0; }
.mobile-qr-guide span:nth-child(2) { top:0; right:0; border-width:4px 4px 0 0; border-radius:0 5px 0 0; }
.mobile-qr-guide span:nth-child(3) { bottom:0; left:0; border-width:0 0 4px 4px; border-radius:0 0 0 5px; }
.mobile-qr-guide span:nth-child(4) { right:0; bottom:0; border-width:0 4px 4px 0; border-radius:0 0 5px 0; }

.scanner-tip {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 1.5rem;
}

.mobile-scan-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 280px;
}

.m-btn {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-align: center;
}

.m-btn-primary { background-color: var(--primary-color); color: white; }
.m-btn-danger { background-color: var(--danger-color); color: white; }
.m-btn-secondary { background-color: #e2e8f0; color: var(--text-secondary); }

.m-btn-sm {
    padding: 8px;
    font-size: 0.8rem;
}

/* =====================================================================
 * BOTTOM NAV (Thanh điều hướng dưới chân)
 * ===================================================================== */
.phone-bottom-nav {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: #ffffff;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 997;
    padding-bottom: env(safe-area-inset-bottom);
}

.nav-btn {
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.65rem;
    font-weight: 600;
    gap: 4px;
    flex: 1;
}

.nav-btn.active {
    color: var(--primary-color);
}

/* Nút quét QR tròn nổi ở giữa (VNeID style) */
.qr-nav-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -30px;
    cursor: pointer;
    flex: 1;
    z-index: 10;
}

.qr-floating-btn {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent-color) 100%);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
    border: 3px solid white;
    transition: transform 0.2s;
}

.qr-floating-btn:active {
    transform: scale(0.9);
}

.qr-nav-wrapper span {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-top: 4px;
}

/* =====================================================================
 * MODALS OVERLAYS (Di động)
 * ===================================================================== */
.m-modal-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0,0,0,0.6);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1001;
    padding: 15px;
}

.m-modal-overlay.active {
    display: flex;
}

.m-modal-dialog {
    background-color: white;
    border-radius: 16px;
    width: 100%;
    max-width: 320px;
    padding: 1rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    animation: mScaleUp 0.2s ease-out;
}

@keyframes mScaleUp {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.m-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.m-modal-header h4 {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary-color);
}

.m-modal-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: var(--text-muted);
}

.m-modal-body {
    max-height: 450px;
    overflow-y: auto;
}

/* Form di động */
.m-form-group {
    margin-bottom: 10px;
}

.m-form-group label {
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.m-form-group input, .m-form-group select, .m-form-group textarea {
    width: 100%;
    padding: 7px 10px;
    font-size: 0.8rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    outline: none;
}

/* =====================================================================
 * ĐÁP ỨNG THIẾT BỊ DI ĐỘNG THỰC TẾ (RESPONSIVE IN PRODUCTION)
 * Nếu truy cập thực tế bằng điện thoại di động: Ẩn khung điện thoại,
 * cho chiếm toàn bộ chiều rộng và chiều cao của trình duyệt.
 * ===================================================================== */
@media (max-width: 480px) {
    .phone-frame-wrapper {
        padding: 0;
        background: none;
    }
    
    .floating-back-btn {
        display: none !important; /* Ẩn nút quay lại của PC */
    }
    
    .phone-device {
        width: 100vw;
        height: 100vh;
        border: none;
        border-radius: 0;
    }
    
    .phone-notch {
        display: none; /* Ẩn tai thỏ vì thiết bị thật có riêng */
    }
    
    .phone-status-bar {
        display: none; /* Trình duyệt di động có thanh trạng thái rồi */
    }
}

/* =====================================================================
 * LOGIN OVERLAY CHO GIẢ LẬP DI ĐỘNG (XÁC THỰC CÁN BỘ BẰNG QR)
 * ===================================================================== */
.m-login-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, #a11a1a 0%, #3a0000 100%);
    background-image: radial-gradient(circle at 20% 30%, rgba(161, 26, 26, 0.15) 0%, transparent 50%),
                      radial-gradient(circle at 80% 70%, rgba(245, 158, 11, 0.08) 0%, transparent 50%);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 15px;
}

.m-login-overlay.active {
    display: flex;
}

.m-login-card {
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 20px;
    width: 100%;
    max-width: 280px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 2px solid var(--accent-color);
    text-align: center;
}

.m-login-card h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 4px;
}

.m-login-card p {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

#m-account-login-form input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    box-sizing: border-box;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    background: #fff;
    color: #0f172a;
    font-size: .8rem;
}

#m-account-login-form input:focus {
    border-color: var(--accent-color);
    outline: 3px solid rgba(185, 28, 28, .12);
}

.m-admin-profile-content { padding:14px; overflow-y:auto; }
.m-admin-profile-card { display:flex; flex-direction:column; align-items:center; padding:20px; margin-bottom:12px; color:white; border-radius:16px; background:linear-gradient(145deg,#7f1d1d,#450a0a); box-shadow:0 10px 24px rgba(69,10,10,.22); }
.m-admin-profile-card .mobile-avatar { width:64px; height:64px; margin-bottom:10px; color:#7f1d1d; background:#fff; border:3px solid #fbbf24; font-size:1rem; }
.m-admin-profile-card span { margin-top:4px; color:#fde68a; font-size:.7rem; }
.m-admin-profile-card small { margin-top:8px; padding:4px 8px; background:rgba(255,255,255,.1); border-radius:999px; }
.m-profile-form { display:flex; flex-direction:column; gap:9px; padding:14px; margin-bottom:12px; background:#fff; border:1px solid #e2e8f0; border-radius:14px; }
.m-profile-form h4 { margin:0 0 4px; color:#7f1d1d; font-size:.82rem; }
.m-profile-form label { display:flex; flex-direction:column; gap:4px; color:#475569; font-size:.67rem; font-weight:700; }
.m-profile-form input { min-height:40px; padding:8px 10px; border:1px solid #cbd5e1; border-radius:8px; font:inherit; color:#0f172a; background:#fff; }

/* Mobile conference picker */
.m-conference-picker-overlay {
    z-index: 9999;
    align-items: flex-start;
    padding: 14px;
    overflow-y: auto;
    background:
        radial-gradient(circle at 12% 8%, rgba(245,158,11,.2), transparent 28%),
        linear-gradient(155deg,#111827 0%,#3f0b0b 62%,#5f1010 100%);
}

.m-conference-picker-card {
    width: 100%;
    max-width: 390px;
    margin: auto;
    overflow: hidden;
    background: #f8fafc;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 20px;
    box-shadow: 0 22px 55px rgba(0,0,0,.45);
}
.m-conference-picker-card svg { stroke-linecap:round;stroke-linejoin:round; }

.m-conference-picker-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 17px;
    color: white;
    text-align: left;
    background: linear-gradient(120deg,#991b1b,#520b0b);
    border-bottom: 3px solid #f59e0b;
}
.m-conference-picker-logo { display:grid;place-items:center;width:50px;height:50px;flex:0 0 50px;background:white;border:2px solid #fbbf24;border-radius:13px; }
.m-conference-picker-logo img { width:41px;height:41px;object-fit:contain; }
.m-conference-picker-header span { display:block;margin-bottom:2px;color:#fde68a;font-size:.58rem;font-weight:800;letter-spacing:1.1px;text-transform:uppercase; }
.m-conference-picker-header h3 { margin:0;color:white;font-size:1rem;font-weight:850;text-transform:uppercase; }
.m-conference-picker-header p { margin:3px 0 0;color:rgba(255,255,255,.7);font-size:.64rem; }
.m-conference-picker-body { padding:15px;background:linear-gradient(180deg,#f8fafc 0%,#f1f5f9 100%); }
.m-conference-picker-title { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px; }
.m-conference-picker-title h4 { margin:0;color:#1e293b;font-size:.75rem;font-weight:850;text-transform:uppercase; }
.m-conference-picker-title > span { padding:4px 7px;color:#64748b;font-size:.59rem;font-weight:700;background:#e2e8f0;border-radius:999px; }
.m-conference-choice-list { display:grid;gap:8px;max-height:280px;padding-right:3px;overflow-y:auto; }
.m-conference-choice-card { display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:9px;padding:10px;background:white;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 3px 10px rgba(15,23,42,.05);transition:border-color .18s,box-shadow .18s; }
.m-conference-choice-icon { display:grid;place-items:center;width:40px;height:40px;color:#991b1b;background:#fee2e2;border-radius:10px; }
.m-conference-choice-icon svg { width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round; }
.m-conference-choice-details { min-width:0;text-align:left; }
.m-conference-choice-details strong { display:block;overflow:hidden;color:#1e293b;font-size:.72rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap; }
.m-conference-choice-details span { display:-webkit-box;margin-top:2px;overflow:hidden;color:#64748b;font-size:.6rem;line-height:1.3;-webkit-line-clamp:1;-webkit-box-orient:vertical; }
.m-conference-choice-details small { display:flex;align-items:center;gap:3px;margin-top:4px;color:#94a3b8;font-size:.54rem; }
.m-conference-choice-details small svg { width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2; }
.m-conference-choice-actions { display:flex;align-items:center;gap:4px; }
.m-conference-open-button { display:flex;align-items:center;justify-content:center;gap:4px;padding:6px 8px;color:white;font-size:.62rem;font-weight:800;background:#991b1b;border:0;border-radius:8px; }
.m-conference-open-button svg { width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.3; }
.m-conference-delete-button { display:grid;place-items:center;width:27px;height:27px;padding:0;color:#b91c1c;background:#fff1f2;border:1px solid #fecdd3;border-radius:8px; }
.m-conference-delete-button svg { width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2; }
.m-conference-edit-button { display:grid;place-items:center;width:27px;height:27px;padding:0;color:#1d4ed8;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px; }
.m-conference-edit-button svg { width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2; }
.m-conference-empty-state { display:flex;flex-direction:column;align-items:center;gap:5px;padding:28px 12px;color:#64748b;font-size:.67rem;text-align:center;background:white;border:1px dashed #cbd5e1;border-radius:12px; }
.m-conference-empty-state > span { display:grid;place-items:center;width:40px;height:40px;color:#991b1b;background:#fff1f2;border-radius:11px; }
.m-conference-empty-state svg { width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9; }
.m-conference-empty-state strong { margin-top:2px;color:#1e293b;font-size:.72rem; }
.m-conference-empty-state small { color:#64748b;font-size:.58rem; }

.m-conference-create-box { margin-top:12px;overflow:hidden;background:white;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 3px 10px rgba(15,23,42,.04); }
.m-conference-create-box summary { display:flex;align-items:center;gap:7px;padding:11px 12px;color:#991b1b;font-size:.7rem;font-weight:850;cursor:pointer;list-style:none; }
.m-conference-create-box summary::-webkit-details-marker { display:none; }
.m-conference-create-box summary span { display:grid;place-items:center;width:21px;height:21px;color:white;background:#991b1b;border-radius:7px; }
.m-conference-create-box summary span svg { width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2; }
.m-create-chevron { width:14px;height:14px;margin-left:auto;fill:none;stroke:#94a3b8;stroke-width:2;transition:transform .18s; }
.m-conference-create-box[open] .m-create-chevron { transform:rotate(180deg); }
.m-conference-create-form { display:flex;flex-direction:column;gap:6px;padding:0 12px 12px;border-top:1px solid #f1f5f9; }
.m-conference-create-form label { margin-top:8px;color:#475569;font-size:.62rem;font-weight:750; }
.m-conference-create-form input,.m-conference-create-form textarea { width:100%;padding:8px 9px;color:#1e293b;font:inherit;font-size:.67rem;line-height:1.4;background:#f8fafc;border:1px solid #cbd5e1;border-radius:8px;box-sizing:border-box;resize:vertical; }
.m-conference-create-form button { display:flex;align-items:center;justify-content:center;gap:6px;margin-top:4px;padding:9px;color:white;font-size:.68rem;font-weight:800;background:#991b1b;border:0;border-radius:8px; }
.m-conference-create-form button svg { width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2; }
.m-conference-tools-heading { display:flex;align-items:center;justify-content:space-between;gap:8px;margin:15px 1px 7px; }
.m-conference-tools-heading span { color:#334155;font-size:.62rem;font-weight:850;letter-spacing:.35px;text-transform:uppercase; }
.m-conference-tools-heading small { color:#94a3b8;font-size:.53rem; }
.m-conference-tools-grid { display:grid;gap:7px; }
.m-conference-global-button { display:grid;grid-template-columns:36px minmax(0,1fr) 16px;align-items:center;gap:9px;width:100%;margin:0;padding:10px;color:#1e293b;text-align:left;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 3px 10px rgba(15,23,42,.05); }
.m-conference-global-icon { display:grid;place-items:center;width:36px;height:36px;color:#991b1b;background:#fff1f2;border-radius:10px; }
.m-conference-global-icon svg { width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9; }
.m-conference-global-button.security-action .m-conference-global-icon { color:#334155;background:#f1f5f9; }
.m-conference-global-button strong { display:block;color:#1e293b;font-size:.63rem;font-weight:850;text-transform:uppercase; }
.m-conference-global-button small { display:block;margin-top:2px;color:#64748b;font-size:.55rem;line-height:1.3; }
.m-conference-global-arrow { width:15px;height:15px;color:#94a3b8;fill:none;stroke:currentColor;stroke-width:2; }
.m-conference-global-button:focus-visible,.m-conference-open-button:focus-visible,.m-conference-edit-button:focus-visible,.m-conference-delete-button:focus-visible,.m-conference-create-form button:focus-visible { outline:3px solid rgba(245,158,11,.35);outline-offset:2px; }

.m-security-content { display:flex;flex-direction:column;gap:12px;padding:14px 12px 110px;overflow-y:auto; }
.m-security-card { padding:16px;background:#fff;border:1px solid #fde68a;border-radius:14px;box-shadow:var(--shadow-sm); }
.m-security-card.danger { background:#fff7f7;border-color:#fecaca; }
.m-security-label { display:block;margin-bottom:5px;color:#b45309;font-size:.62rem;font-weight:800;letter-spacing:.7px; }
.m-security-card.danger .m-security-label { color:#b91c1c; }
.m-security-card h4 { margin:0 0 8px;color:var(--text-primary);font-size:.95rem; }
.m-security-card p { margin:0 0 14px;color:var(--text-secondary);font-size:.76rem;line-height:1.55; }
.m-security-card > .m-btn { width:100%; }
.m-security-qr { display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border-color); }
.m-security-qr[hidden] { display:none; }
.m-security-qr img { width:180px;height:180px;padding:8px;object-fit:contain;background:#fff;border:1px solid var(--border-color);border-radius:12px; }
.m-security-qr .m-btn { width:100%;text-align:center;text-decoration:none; }

@media (max-width: 360px) {
    .m-conference-picker-overlay { padding:9px; }
    .m-conference-picker-header { padding:14px; }
    .m-conference-picker-body { padding:12px; }
    .m-conference-choice-card { grid-template-columns:36px minmax(0,1fr); }
    .m-conference-choice-icon { width:36px;height:36px; }
    .m-conference-choice-actions { grid-column:1/-1; }
    .m-conference-open-button { flex:1; }
}

#m-login-reader-wrapper {
    width: 180px;
    height: 180px;
    border: 3px dashed var(--primary-color);
    border-radius: 12px;
    overflow: hidden;
    background-color: #000000;
    margin: 12px auto;
}

#m-login-reader {
    width: 100%;
    height: 100%;
}

#m-login-reader button, #m-login-reader select {
    display: none !important;
}

/* =====================================================================
 * MOBILE UX REFINEMENTS
 * ===================================================================== */
.menu-grid-item,
.qr-nav-wrapper {
    font-family: inherit;
    border: 0;
}

.mobile-inline-action,
.mobile-logout-button {
    min-height: 32px;
    padding: 5px 9px;
    border: 0;
    border-radius: 999px;
    font-family: inherit;
    font-size: .68rem;
    font-weight: 750;
    cursor: pointer;
}

.mobile-inline-action {
    color: #1e293b;
    background: var(--accent-color);
}

.mobile-logout-button {
    color: #b91c1c;
    background: #fff1f2;
}

.m-btn,
.m-back-btn,
.m-add-btn,
.nav-btn,
.qr-nav-wrapper,
.menu-grid-item {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.m-btn:focus-visible,
.m-back-btn:focus-visible,
.m-add-btn:focus-visible,
.nav-btn:focus-visible,
.qr-nav-wrapper:focus-visible,
.menu-grid-item:focus-visible,
.mobile-inline-action:focus-visible,
.mobile-logout-button:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .38);
    outline-offset: 2px;
}

.m-btn:disabled,
button:disabled {
    opacity: .56;
    cursor: not-allowed;
}

.mobile-screen {
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
}

.mobile-card-list:empty::before {
    content: 'Đang tải dữ liệu...';
    display: block;
    padding: 24px 12px;
    color: var(--text-muted);
    font-size: .78rem;
    text-align: center;
}

.m-mobile-error-state {
    padding: 24px 14px;
    color: #991b1b;
    font-size: .78rem;
    line-height: 1.5;
    text-align: center;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 12px;
}

.m-mobile-error-state button {
    display: block;
    min-height: 40px;
    margin: 12px auto 0;
    padding: 8px 14px;
    color: #fff;
    font-weight: 700;
    background: var(--primary-color);
    border: 0;
    border-radius: 9px;
}

.mobile-item-card {
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 18px rgba(15, 23, 42, .05);
}

.m-card-actions .btn {
    min-height: 40px;
    flex: 1 1 86px;
}

.m-card-details span {
    overflow-wrap: anywhere;
}

.m-modal-dialog {
    display: flex;
    flex-direction: column;
    max-height: min(680px, calc(100dvh - 30px));
}

.m-modal-body {
    min-height: 0;
    overscroll-behavior: contain;
}

.m-modal-close {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin: -8px;
    border-radius: 50%;
}

.m-form-group input,
.m-form-group select,
.m-form-group textarea,
.m-search-wrapper input {
    min-height: 44px;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    background: #fff;
}

.m-form-group input:focus,
.m-form-group select:focus,
.m-form-group textarea:focus,
.m-search-wrapper input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(161, 26, 26, .12);
}

@media (max-width: 768px) {
    html,
    body {
        width: 100%;
        min-height: 100%;
        overflow: hidden;
        background: #f4f6f8;
    }

    .phone-frame-wrapper {
        width: 100%;
        min-height: 100dvh;
        padding: 0;
        background: #f4f6f8;
    }

    .floating-back-btn,
    .phone-notch,
    .phone-status-bar {
        display: none !important;
    }

    .phone-device {
        width: 100%;
        height: 100dvh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .phone-screen-content {
        margin-bottom: calc(68px + env(safe-area-inset-bottom));
    }

    .mobile-screen {
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }

    .vneid-mobile-header {
        padding: calc(1rem + env(safe-area-inset-top)) 1rem 1.5rem;
    }

    .header-banner {
        flex-direction: row;
        justify-content: center;
        text-align: left;
    }

    .mobile-subpage-header {
        min-height: calc(56px + env(safe-area-inset-top));
        height: auto;
        padding: env(safe-area-inset-top) 10px 0;
    }

    .m-back-btn,
    .m-add-btn {
        width: 44px;
        height: 44px;
        border-radius: 50%;
    }

    .m-search-wrapper {
        padding: 10px 12px;
    }

    .m-form-group input,
    .m-form-group select,
    .m-form-group textarea,
    .m-search-wrapper input {
        font-size: 16px;
    }

    .m-btn {
        min-height: 46px;
        font-size: .86rem;
        border-radius: 10px;
    }

    .phone-bottom-nav {
        position: absolute;
        height: calc(68px + env(safe-area-inset-bottom));
        padding: 6px 8px env(safe-area-inset-bottom);
        box-shadow: 0 -8px 24px rgba(15, 23, 42, .08);
    }

    .nav-btn,
    .qr-nav-wrapper {
        min-height: 50px;
        background: transparent;
    }

    .qr-nav-wrapper {
        margin-top: -24px;
    }

    .m-modal-overlay {
        position: fixed;
        align-items: flex-end;
        padding: 0;
        backdrop-filter: blur(3px);
    }

    .m-modal-dialog {
        width: 100%;
        max-width: none;
        max-height: 90dvh;
        padding: 1rem;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
        border-radius: 20px 20px 0 0;
        animation: mobileSheetUp .22s ease-out;
    }

    .m-login-overlay {
        position: fixed;
        padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
    }

    .m-login-card {
        max-width: 360px;
    }
}

@keyframes mobileSheetUp {
    from { transform: translateY(28px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

.m-login-error {
    color: var(--danger-color);
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 8px;
}