@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --primary: #9B5D34; /* Màu nâu cam PVCS */
    --primary-light: #F7EAE3;
    --bg-color: #F8F9FA;
    --text-main: #333333;
    --text-muted: #888888;
    --white: #FFFFFF;
    --border: #EEEEEE;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', sans-serif; }

body { background-color: var(--bg-color); color: var(--text-main); }

/* --- HEADER --- */
.top-header { background: var(--white); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; padding: 10px 0; }
.header-container { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }

.logo { cursor: pointer; display: flex; align-items: center; }
.logo img { height: 55px; width: auto; display: block; }

.search-bar { flex: 1; max-width: 400px; position: relative; margin: 0 20px; }
.search-bar i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.search-bar input { width: 100%; padding: 10px 10px 10px 40px; border-radius: 20px; border: 1px solid var(--border); background: #F3F4F6; outline: none; }
.header-actions { display: flex; align-items: center; gap: 15px; }
.btn-shop { background: var(--primary-light); color: var(--primary); border: none; padding: 8px 15px; border-radius: 20px; font-weight: 600; cursor: pointer; }
.icon-btn { background: none; border: none; font-size: 20px; color: var(--text-main); cursor: pointer; }

/* --- MAIN LAYOUT (WEB) --- */
.main-layout { max-width: 1440px; margin: 20px auto; display: grid; grid-template-columns: 240px 1fr 320px; gap: 30px; padding: 0 20px; }
.feed-content { min-width: 0; } /* Bắt buộc để khung Khoảnh Khắc (nhiều thẻ) không đẩy giãn cả bố cục trang */

@media (min-width: 1025px) {
    .sidebar-left {
        position: sticky;
        top: 80px;
        height: calc(100vh - 100px);
        overflow-y: auto;
    }
    .sidebar-right {
        position: sticky;
        top: 80px;
        height: fit-content;
    }
}

/* Sidebars */
.menu-list a { display: block; padding: 12px 15px; text-decoration: none; color: var(--text-main); font-weight: 500; border-radius: 8px; margin-bottom: 5px; }
.menu-list a:hover, .menu-list a.active { background: var(--primary-light); color: var(--primary); }
.menu-list i { width: 25px; }
.popular-tags h3 { margin: 20px 0 10px; font-size: 16px; }
.tags span { display: inline-block; background: var(--white); padding: 5px 10px; border-radius: 15px; font-size: 13px; margin: 0 5px 10px 0; border: 1px solid var(--border); color: var(--primary); }
.widget { background: var(--white); padding: 20px; border-radius: 12px; border: 1px solid var(--border); }
.widget h3 { margin-bottom: 10px; }
.widget p { font-size: 14px; color: var(--text-muted); margin-bottom: 15px; }

/* --- KHOẢNH KHẮC (FACEBOOK STORIES & REELS STYLE) --- */
.beauty-feed-section {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.beauty-feed-header {
    font-weight: 700;
    font-size: 16px;
    color: var(--text-main);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.beauty-feed-header i {
    color: var(--primary);
    font-size: 18px;
}
.stories-scroll-container {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-behavior: smooth;
}
.stories-scroll-container::-webkit-scrollbar {
    height: 6px;
}
.stories-scroll-container::-webkit-scrollbar-thumb {
    background: #E5E7EB;
    border-radius: 4px;
}

/* Thẻ Tin / Reels dọc chuẩn Facebook */
.story-card {
    min-width: 130px;
    height: 210px;
    border-radius: 12px;
    background: #111;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.story-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* Thẻ tạo tin đầu tiên */
.story-card.add-story {
    background: #FFFFFF;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 16px;
}
.story-card.add-story .add-story-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 135px;
    background: #F3F4F6;
    display: flex;
    align-items: center;
    justify-content: center;
}
.story-card.add-story .add-story-bg i {
    font-size: 32px;
    color: #9CA3AF;
}
.story-card.add-story .add-icon-btn {
    position: absolute;
    top: 115px;
    width: 38px;
    height: 38px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border: 3px solid #FFFFFF;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.story-card.add-story span {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-main);
    margin-top: 25px;
    text-align: center;
}

/* Ảnh/Video bên trong thẻ Tin */
.story-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}
.story-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 12px 10px 10px 10px;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 60%, transparent 100%);
    color: white;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.story-avatar-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 32px;
    height: 32px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    border: 2px solid #FFFFFF;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    z-index: 2;
}
.story-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 3px 7px;
    border-radius: 6px;
    backdrop-filter: blur(4px);
    z-index: 2;
}

/* Banner / Poster Quảng Cáo Sản Phẩm Cột Phải */
.promo-banner-widget {
    background: #fff;
    padding: 0;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--border);
    margin-bottom: 20px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.promo-banner-widget:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(155, 93, 52, 0.15);
}
.promo-banner-widget img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

/* Feed */
.welcome-banner { background: linear-gradient(to right, #F5EAE1, #F9F2ED); border-radius: 12px; padding: 40px; text-align: center; margin-bottom: 20px; }
.welcome-banner h1 { color: var(--primary); font-size: 36px; margin: 10px 0; }
.feed-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 20px; background: var(--white); border-radius: 12px 12px 0 0; }
.feed-tabs button { flex: 1; padding: 15px; background: none; border: none; font-weight: 600; color: var(--text-muted); cursor: pointer; border-bottom: 3px solid transparent; }
.feed-tabs button.active { color: var(--primary); border-bottom-color: var(--primary); }
.create-post-trigger { background: var(--white); padding: 15px; border-radius: 12px; display: flex; gap: 10px; align-items: center; margin-bottom: 20px; border: 1px solid var(--border); cursor: pointer; }
.trigger-avatar { width: 40px; height: 40px; background: #E5E7EB; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #9CA3AF; }
.create-post-trigger input { flex: 1; border: none; background: #F3F4F6; padding: 12px 15px; border-radius: 20px; pointer-events: none; }

/* Các Nút */
.btn-primary { background: var(--primary); color: var(--white); border: none; padding: 10px 20px; border-radius: 20px; font-weight: 600; cursor: pointer; }
.full-width { width: 100%; padding: 12px; }

/* Bài viết (Post Style) */
.post { background: var(--white); border-radius: 12px; padding: 20px; margin-bottom: 20px; border: 1px solid var(--border); }
.post-header { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.author-avatar { width: 45px; height: 45px; background: #E5E7EB; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #9CA3AF; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); overflow: hidden; }
.author-name { font-weight: 600; font-size: 16px; }
.post-time { font-size: 12px; color: var(--text-muted); }
.post-content { font-size: 15px; line-height: 1.6; margin-bottom: 15px; }
.post-text.clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}
.see-more-link {
    display: inline-block;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    margin-top: 2px;
}
.see-more-link:hover { text-decoration: underline; }

/* Khung nhập bình luận / trả lời: ô bí danh mặc định chiếm 1 phần nhỏ trên web */
.comment-input-row { display: flex; gap: 10px; margin-top: 10px; align-items: center; }
.comment-alias-field { width: 22%; }

@media (max-width: 600px) {
    /* Trên mobile: ô bí danh xuống dòng riêng, kéo dài hết chiều ngang để thấy trọn vẹn chữ đang gõ */
    .comment-input-row { flex-wrap: wrap; }
    .comment-alias-field { width: 100%; flex: 1 1 100%; }
}
.post-actions { display: flex; gap: 20px; border-top: 1px solid var(--border); padding-top: 15px; }
.action-btn { background: none; border: none; color: var(--text-muted); font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: 0.2s; }
.action-btn:hover { color: var(--primary); }
.action-btn.liked { color: #E02424; }

/* --- CAROUSEL NHIỀU ẢNH/VIDEO KIỂU INSTAGRAM (1 ảnh/video mỗi lúc, không cắt góc) --- */
.post-carousel {
    touch-action: pan-y;
    width: 100%;
    /* Chiều cao co giãn theo chiều cao màn hình (không cố định 1 con số), để vừa với mọi loại thiết bị.
       Ảnh/video bên trong luôn dùng object-fit: contain nên không bao giờ bị cắt góc hay giảm chất lượng/độ dài gốc,
       chỉ thay đổi kích thước hiển thị cho vừa khung. */
    height: min(72vh, 640px);
}
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0,0,0,0.35);
    border: none;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: background 0.15s ease;
}
.carousel-arrow:hover { background: rgba(0,0,0,0.6); }

@media (max-width: 1024px) {
    .post-carousel { height: min(65vh, 480px); }
}

@media (max-width: 600px) {
    .post-carousel { height: min(60vh, 420px); }
    .carousel-arrow { display: none !important; } /* Trên mobile chỉ dùng vuốt, ẩn mũi tên cho gọn */
}

/* --- HUY HIỆU THƯƠNG HIỆU ĐÃ XÁC MINH (tick vàng, giống tick xanh Facebook) --- */
.verified-badge {
    color: #F5B301;
    font-size: 13px;
    margin-left: 3px;
    vertical-align: middle;
}

/* --- MODAL CHUNG --- */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; justify-content: center; align-items: center; z-index: 999; }
.modal-overlay.active { display: flex; }
.modal-content { background: var(--white); width: 90%; max-width: 500px; border-radius: 16px; padding: 20px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.close-btn { background: none; border: none; font-size: 20px; cursor: pointer; }
.modal-body input, .modal-body textarea { width: 100%; padding: 15px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 15px; font-family: inherit; font-size: 15px; }
.modal-body input:focus, .modal-body textarea:focus { outline: none; border-color: var(--primary); }
.modal-footer { text-align: right; }

/* --- MOBILE RESPONSIVE --- */
.bottom-nav { display: none; }

@media (max-width: 1024px) {
    .main-layout { grid-template-columns: 1fr; padding: 0 10px; margin-top: 10px; }
    .sidebar-left, .sidebar-right, .header-actions, .search-bar { display: none; }
    
    .header-container { 
        position: relative; 
        justify-content: center; 
        padding: 5px 10px; 
    }
    .menu-toggle-btn { 
        position: absolute; 
        left: 15px; 
    }
    .logo img { 
        height: 48px; 
    }
    
    body { padding-bottom: 70px; }
    .bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; width: 100%; background: var(--white); border-top: 1px solid var(--border); justify-content: space-around; align-items: center; padding: 10px 0; z-index: 100; }
    .bottom-nav a { text-decoration: none; color: var(--text-muted); display: flex; flex-direction: column; align-items: center; font-size: 11px; gap: 4px; }
    .bottom-nav a i { font-size: 20px; }
    .bottom-nav a.active { color: var(--primary); }
    .nav-create-btn { background: var(--primary); color: var(--white); width: 45px; height: 45px; border-radius: 50%; border: none; font-size: 20px; display: flex; align-items: center; justify-content: center; transform: translateY(-10px); box-shadow: 0 4px 10px rgba(155, 93, 52, 0.4); }
}

/* Riêng cho tablet (iPad...): giữ bảng tin ở độ rộng vừa phải, căn giữa màn hình, tránh bị kéo giãn hết cỡ trông rất xấu */
@media (min-width: 601px) and (max-width: 1024px) {
    .main-layout { max-width: 700px; margin: 16px auto; padding: 0 16px; }
}

.menu-toggle-btn {
    display: none;
    background: none;
    border: none;
    font-size: 22px;
    color: #9B5D34;
    cursor: pointer;
}

@media (max-width: 1024px) {
    .menu-toggle-btn {
        display: block;
    }
    .sidebar-left {
        display: none !important;
        position: absolute;
        top: 70px;
        left: 15px;
        right: 15px;
        background: #fff;
        z-index: 1000;
        padding: 15px;
        border-radius: 12px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    }
    .sidebar-left.mobile-show {
        display: block !important;
    }
}

/* Thông báo & Hiệu ứng */
.notification-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.notification-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    background: #FF3B30;
    color: white;
    font-size: 9px;
    font-weight: bold;
    padding: 1px 4px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(255, 59, 48, 0.4);
    min-width: 14px;
    text-align: center;
    display: none;
}

@keyframes bellShake {
    0% { transform: rotate(0); }
    15% { transform: rotate(14deg); }
    30% { transform: rotate(-14deg); }
    45% { transform: rotate(10deg); }
    60% { transform: rotate(-10deg); }
    75% { transform: rotate(4deg); }
    100% { transform: rotate(0); }
}

.bell-shaking {
    animation: bellShake 0.6s ease 5;
    transform-origin: top center;
    color: var(--primary) !important;
}

@keyframes iconPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.35); color: var(--primary); }
    100% { transform: scale(1); }
}

.icon-pulse {
    animation: iconPulse 0.5s ease-in-out;
}

/* Nút mũi tên quay lại (dùng chung cho các khung xem toàn màn hình: Khoảnh Khắc, xem ảnh/video, Reels) */
.modal-back-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}
.modal-back-btn:hover { background: rgba(255,255,255,0.3); }

/* --- Trạng thái đăng nhập: mặc định coi như CHƯA đăng nhập cho tới khi JS xác nhận --- */
.logged-in-only { display: none; }
.logged-out-only { display: inline-flex; }

/* --- Nút đăng nhập Facebook --- */
.fb-login-btn {
    background: #1877F2;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}
.fb-login-btn:hover { background: #1565d8; }

/* Khu vực đăng nhập / trạng thái tài khoản trong menu 3 gạch (mobile) */
.mobile-auth-box {
    padding: 14px 15px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.mobile-auth-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #eee; flex-shrink: 0; }
.mobile-auth-box span { font-weight: 600; font-size: 14px; color: var(--text-main); }

/* --- Danh sách hội thoại --- */
.zalo-modal-content { max-width: 420px; padding: 0; }
.conversation-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.conversation-item:hover { background: #F8F9FA; }
.conversation-item img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; background: #eee; flex-shrink: 0; }
.conversation-item .convo-info { flex: 1; min-width: 0; }
.conversation-item .convo-name { font-weight: 600; font-size: 14.5px; color: var(--text-main); }
.conversation-item .convo-last-msg { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.conversation-item .convo-pending-badge { background: #F5B301; color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; flex-shrink: 0; }

/* --- Khung chat Zalo --- */
.zalo-chat-header {
    background: #7e532d;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    flex-shrink: 0;
    position: relative;
}
.zalo-header-btn { background: none; border: none; color: #fff; font-size: 17px; cursor: pointer; padding: 6px; flex-shrink: 0; }
.zalo-header-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: #fff; flex-shrink: 0; }
.zalo-header-info { flex: 1; min-width: 0; }
.zalo-header-name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zalo-header-status { font-size: 11.5px; color: rgba(255,255,255,0.8); }
.zalo-chat-menu {
    display: none;
    position: absolute;
    top: 52px;
    right: 10px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    overflow: hidden;
    z-index: 10600;
    min-width: 190px;
}
.zalo-chat-menu.active { display: block; }
.zalo-chat-menu button {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 12px 16px;
    font-size: 13.5px;
    color: #E02424;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 9px;
}
.zalo-chat-menu button:hover { background: #F8F9FA; }

.zalo-pending-notice {
    background: #FFF7E6;
    border-bottom: 1px solid #F5D9A0;
    padding: 10px 16px;
    font-size: 12.5px;
    color: #8a6416;
    text-align: center;
    flex-shrink: 0;
}
.zalo-pending-notice button {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 6px 16px;
    border-radius: 14px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 6px;
}

.zalo-messages-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }

.zalo-msg-row { display: flex; }
.zalo-msg-row.mine { justify-content: flex-end; }
.zalo-msg-row.theirs { justify-content: flex-start; }
.zalo-msg-bubble {
    max-width: 72%;
    padding: 9px 13px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
}
.zalo-msg-row.mine .zalo-msg-bubble { background: #F7EAE3; border: 1px solid #E9D2C2; color: var(--text-main); border-bottom-right-radius: 4px; }
.zalo-msg-row.theirs .zalo-msg-bubble { background: #fff; border: 1px solid var(--border); color: var(--text-main); border-bottom-left-radius: 4px; }
.zalo-msg-bubble img, .zalo-msg-bubble video { max-width: 220px; border-radius: 10px; display: block; }
.zalo-msg-bubble a.zalo-location-link { color: var(--primary); font-weight: 600; text-decoration: none; display: flex; align-items: center; gap: 6px; }

.zalo-input-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #fff;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.zalo-attach-btn { background: none; border: none; color: #7e532d; font-size: 18px; cursor: pointer; padding: 6px; flex-shrink: 0; }
.zalo-input-bar input[type="text"] { flex: 1; padding: 10px 14px; border: 1px solid var(--border); border-radius: 20px; outline: none; background: #F3F4F6; font-size: 14px; }
.zalo-send-btn { background: #7e532d; color: #fff; border: none; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; flex-shrink: 0; }

/* --- Màn hình gọi thoại/video --- */
.call-control-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}
.call-end-btn { background: #E02424; width: 64px; height: 64px; font-size: 24px; }

@media (max-width: 600px) {
    .zalo-modal-content { max-width: 100%; }
}

/* --- BANNER MỜI CÀI ĐẶT APP --- */
.install-app-banner {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: #fff;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.14);
    padding: 14px 16px;
    align-items: center;
    gap: 12px;
}
.install-app-banner img {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}
.install-app-text { flex: 1; min-width: 0; }
.install-app-title { font-weight: 700; font-size: 14px; color: var(--text-main); }
.install-app-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
#installAppBtn {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 9px 18px;
    border-radius: 18px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
}
.install-app-close {
    background: none;
    border: none;
    color: #999;
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
    padding: 4px;
}

@media (max-width: 600px) {
    .install-app-banner { padding: 12px; gap: 10px; }
    .install-app-title { font-size: 13px; }
    .install-app-desc { font-size: 11.5px; }
}

/* --- KHUNG CHAT HỖ TRỢ --- */
.support-chat-bubble {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    border: none;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    z-index: 998;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease;
}
.support-chat-bubble:hover { transform: translateY(-2px); }

.support-chat-panel {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 340px;
    max-height: 480px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.18);
    z-index: 999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.support-chat-header {
    background: var(--primary);
    color: #fff;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}
.support-chat-close { background: none; border: none; color: #fff; font-size: 16px; cursor: pointer; }
.support-chat-body { flex: 1; overflow-y: auto; padding: 14px; background: #F8F9FA; }
.support-chat-bubble-msg {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 12px;
    color: var(--text-main);
}
.support-faq-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.support-faq-item {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 12.5px;
    color: var(--primary);
    cursor: pointer;
    font-weight: 600;
}
.support-faq-item:hover { background: var(--primary-light); }
.support-faq-answer {
    background: var(--primary-light);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 12.5px;
    color: var(--text-main);
    margin: 4px 0 10px 0;
    line-height: 1.5;
}
.support-sent-msg {
    background: var(--primary-light);
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 12.5px;
    margin-bottom: 8px;
    color: var(--text-main);
}
.support-chat-footer { padding: 10px 12px; border-top: 1px solid var(--border); background: #fff; flex-shrink: 0; }
.support-chat-alias-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 16px;
    font-size: 12px;
    outline: none;
    background: #F3F4F6;
}
.support-chat-footer input[type="text"]:not(.support-chat-alias-input) {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 18px;
    outline: none;
    font-size: 13px;
    background: #F3F4F6;
}
.support-chat-footer button {
    background: var(--primary);
    color: #fff;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
}

@media (max-width: 1024px) {
    .support-chat-bubble { display: none; } /* Mobile dùng mục "Hỗ trợ" trong menu 3 gạch thay vì nút nổi */
    .support-chat-panel {
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-height: 82vh;
        border-radius: 16px 16px 0 0;
    }
}
/* --- PVCS ACCOUNT GATE + NOTIFICATION CENTER --- */
.auth-gate-card { max-width: 410px; }
.sidebar-notification-badge {
    display: none;
    margin-left: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 10px;
    background: #FF3B30;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    align-items: center;
    justify-content: center;
}
.bottom-notification-icon { position: relative; display: inline-flex; }
.bottom-notification-icon .notification-badge { top: -7px; right: -10px; }
.notification-modal-content { max-width: 540px; padding: 0; overflow: hidden; }
.notification-modal-content .modal-header { padding: 18px 20px 12px; margin-bottom: 0; border-bottom: 1px solid var(--border); }
.notification-toolbar { display: flex; gap: 8px; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); background: #FAFAFA; }
.notification-device-btn, .notification-read-all {
    border: none;
    border-radius: 18px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.notification-device-btn { background: var(--primary-light); color: var(--primary); }
.notification-read-all { background: #F0F2F5; color: #555; }
.notification-list { max-height: 65vh; overflow-y: auto; }
.notification-item { display: flex; gap: 12px; padding: 13px 16px; border-bottom: 1px solid #F0F0F0; cursor: pointer; position: relative; background: #fff; }
.notification-item.unread { background: #FFF8F3; }
.notification-item:hover { background: #F8F8F8; }
.notification-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 44px; background: #eee; }
.notification-copy { min-width: 0; flex: 1; }
.notification-body { font-size: 13.5px; color: #333; line-height: 1.45; }
.notification-time { margin-top: 4px; font-size: 11.5px; color: #8A8A8A; }
.notification-dot { width: 8px; height: 8px; border-radius: 50%; background: #1877F2; position: absolute; right: 13px; top: 50%; transform: translateY(-50%); }
.notification-empty { text-align: center; padding: 42px 20px; color: #888; font-size: 13.5px; }

@media (max-width: 1024px) {
    .bottom-nav { padding: 8px 0; }
    .bottom-nav a { min-width: 0; flex: 1; font-size: 9.5px; }
    .bottom-nav a i { font-size: 18px; }
    .nav-create-btn { flex: 0 0 46px; }
    .notification-modal-content { width: 96%; max-height: 88vh; }
}

/* ============================================================
   PVCS MESSENGER v3 - giao diện Zalo, màu thương hiệu #7e532d
   ============================================================ */
.message-center-overlay { z-index: 10300; }
.zalo-modal-content {
    width: min(94vw, 520px);
    max-width: 520px;
    height: min(82vh, 720px);
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 18px 60px rgba(44, 31, 20, 0.22);
}
.message-center-header {
    min-height: 62px;
    background: #7e532d;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px 0 18px;
    flex-shrink: 0;
}
.message-center-title { display:flex; align-items:center; gap:10px; font-size:18px; font-weight:700; }
.message-center-title i { font-size:20px; }
.message-center-actions { display:flex; align-items:center; gap:4px; }
.message-header-btn {
    width:38px; height:38px; border-radius:50%; border:none; background:transparent; color:#fff;
    display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px;
}
.message-header-btn:hover { background:rgba(255,255,255,0.14); }
.message-center-subhead { padding:13px 18px 10px; border-bottom:1px solid #eee; background:#fff; flex-shrink:0; }
.message-center-subhead > div { font-size:15px; font-weight:700; color:#2f2f2f; }
.message-center-subhead span { display:block; font-size:11.5px; color:#8a8a8a; margin-top:2px; }
.message-center-body { flex:1; min-height:0; display:flex; flex-direction:column; background:#fff; }
.message-search-wrap {
    margin:12px 14px 8px; height:42px; border-radius:22px; background:#f3f4f6;
    display:flex; align-items:center; gap:9px; padding:0 14px; flex-shrink:0;
}
.message-search-wrap i { color:#888; font-size:14px; }
.message-search-wrap input { flex:1; border:none; outline:none; background:transparent; font-size:13.5px; min-width:0; }
.message-search-results { max-height:210px; overflow-y:auto; border-bottom:1px solid #f1f1f1; }
.message-list-label { padding:10px 18px 6px; font-size:12px; font-weight:700; color:#777; flex-shrink:0; }
.message-conversations-list { overflow-y:auto; flex:1; min-height:0; padding-bottom:8px; }
.message-login-required { text-align:center; padding:46px 28px !important; margin:auto 0; }
.message-login-icon {
    width:74px; height:74px; margin:0 auto 16px; border-radius:50%; background:#f6eee8; color:#7e532d;
    display:flex; align-items:center; justify-content:center; font-size:31px;
}
.message-login-required h4 { font-size:17px; margin-bottom:8px; color:#333; }
.message-login-required p { color:#777; font-size:13.5px; line-height:1.55; margin:0 auto 18px; max-width:340px; }

.conversation-item { padding:11px 16px; position:relative; }
.conversation-item:hover { background:#f8f4f1; }
.conversation-item img { width:52px; height:52px; }
.conversation-item .convo-name { font-size:14px; font-weight:650; }
.conversation-item .convo-last-msg { max-width:300px; }
.conversation-item .convo-time { font-size:10.5px; color:#999; margin-left:auto; align-self:flex-start; padding-top:3px; flex-shrink:0; }
.conversation-item .convo-pending-badge { background:#7e532d; }

/* Chat chi tiết */
#zaloChatModal { background:#ece8e4 !important; }
.zalo-chat-header { background:#7e532d; min-height:62px; padding:9px 12px; box-shadow:0 1px 8px rgba(0,0,0,.12); }
.zalo-header-btn { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0; }
.zalo-header-btn:hover { background:rgba(255,255,255,.14); }
.zalo-header-avatar { width:42px; height:42px; }
.zalo-header-name { font-size:15px; }
.zalo-messages-body {
    padding:18px max(14px, calc((100vw - 760px)/2)); gap:9px;
    background:linear-gradient(180deg,#eeeae6 0%,#f3f0ed 100%);
}
.zalo-msg-bubble { box-shadow:0 1px 2px rgba(0,0,0,.05); }
.zalo-msg-row.mine .zalo-msg-bubble { background:#f2e5da; border-color:#ddc5b0; }
.zalo-msg-row.theirs .zalo-msg-bubble { background:#fff; border-color:#e5e1dd; }
.zalo-msg-bubble img, .zalo-msg-bubble video { max-width:min(300px,70vw); max-height:380px; object-fit:contain; }
.zalo-input-bar { min-height:62px; padding:9px max(12px, calc((100vw - 760px)/2)); gap:8px; }
.zalo-input-bar input[type="text"] { background:#f5f5f5; border-color:#e4e4e4; }
.zalo-send-btn { background:#7e532d; }
.zalo-pending-notice { background:#fff5e8; color:#765122; border-color:#efd7ba; }
.zalo-pending-notice button { background:#7e532d; }

/* Gọi thoại/video - frontend */
.zalo-call-screen {
    position:fixed; inset:0; z-index:11000; color:#fff; flex-direction:column;
    background:radial-gradient(circle at 50% 25%, #765338 0%, #3a281c 48%, #17110d 100%);
}
.zalo-call-topbar { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 18px; font-size:14px; color:rgba(255,255,255,.86); }
.zalo-call-top-btn { width:40px; height:40px; border:0; border-radius:50%; background:rgba(255,255,255,.10); color:#fff; font-size:16px; cursor:pointer; }
.zalo-call-stage { flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.zalo-call-avatar-wrap { width:126px; height:126px; border-radius:50%; padding:4px; background:rgba(255,255,255,.22); box-shadow:0 12px 40px rgba(0,0,0,.30); }
.zalo-call-avatar { width:100%; height:100%; border-radius:50%; object-fit:cover; background:#fff; }
.zalo-call-name { font-size:22px; font-weight:700; margin-top:20px; text-shadow:0 1px 5px rgba(0,0,0,.25); }
.zalo-call-status { font-size:13.5px; color:rgba(255,255,255,.76); margin-top:7px; }
.zalo-call-video-preview { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#111; }
.zalo-call-video-preview + .zalo-call-avatar-wrap { position:relative; z-index:2; }
.zalo-call-video-preview[style*="display: block"] ~ .zalo-call-avatar-wrap { width:82px; height:82px; position:absolute; top:20px; right:20px; }
.zalo-call-controls { min-height:132px; display:flex; justify-content:center; align-items:flex-start; gap:34px; padding:20px 18px 28px; background:linear-gradient(to top,rgba(0,0,0,.28),transparent); }
.zalo-call-control-group { display:flex; flex-direction:column; align-items:center; gap:8px; font-size:11px; color:rgba(255,255,255,.82); }
.call-control-btn { background:rgba(255,255,255,.17); backdrop-filter:blur(8px); }
.call-control-btn.active-off { background:rgba(255,255,255,.90); color:#7e532d; }
.call-end-btn { background:#e23c39; }

/* 7 mục ở thanh mobile: giữ Khoảnh Khắc bên cạnh Mua sắm, Tin nhắn nằm ở vị trí cũ của Khoảnh Khắc */
@media (max-width:1024px) {
    .bottom-nav { gap:0; padding:7px 2px; }
    .bottom-nav a { flex:1 1 0; font-size:8.8px; gap:3px; padding:2px 0; }
    .bottom-nav a i { font-size:17px; }
    .bottom-nav .nav-create-btn { flex:0 0 44px; width:44px; height:44px; margin:0 1px; }
    .bottom-notification-icon { line-height:1; }
    .zalo-modal-content { width:100%; max-width:100%; height:100%; max-height:none; border-radius:0; }
    .message-center-overlay { align-items:stretch; }
}
@media (max-width:480px) {
    .bottom-nav a { font-size:8px; }
    .bottom-nav a i { font-size:16px; }
    .bottom-nav .nav-create-btn { flex-basis:42px; width:42px; height:42px; }
    .zalo-call-controls { gap:24px; }
}
.conversation-avatar-wrap { position:relative; flex:0 0 52px; width:52px; height:52px; }
.conversation-avatar-wrap img { width:52px; height:52px; }
.conversation-online-dot { position:absolute; right:1px; bottom:2px; width:12px; height:12px; border-radius:50%; background:#34c759; border:2px solid #fff; }
.convo-meta { display:flex; flex-direction:column; align-items:flex-end; gap:7px; flex-shrink:0; }
.message-empty-state { min-height:240px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#888; padding:30px; gap:7px; }
.message-empty-state i { width:58px; height:58px; border-radius:50%; background:#f6eee8; color:#7e532d; display:flex; align-items:center; justify-content:center; font-size:25px; margin-bottom:5px; }
.message-empty-state b { color:#444; font-size:14px; }
.message-empty-state span { font-size:12px; }

/* =========================================================
   PVCS ACCOUNT V4 — đăng nhập/đăng ký phone+password + Facebook
   ========================================================= */
.pvcs-auth-card{max-width:470px;padding:22px;border-radius:18px}
.pvcs-auth-subtitle{font-size:12.5px;color:#777;margin-top:3px;line-height:1.45}
.pvcs-auth-tabs{display:grid;grid-template-columns:1fr 1fr;background:#f3f4f6;border-radius:12px;padding:4px;margin:8px 0 16px}
.pvcs-auth-tabs button{border:0;background:transparent;border-radius:9px;padding:10px;font-weight:700;color:#777;cursor:pointer}
.pvcs-auth-tabs button.active{background:#fff;color:#7e532d;box-shadow:0 1px 5px rgba(0,0,0,.08)}
.pvcs-auth-pane{display:none}.pvcs-auth-pane.active{display:block}
.pvcs-auth-pane label{display:block;font-size:13px;font-weight:700;color:#444;margin:10px 0 6px}
.pvcs-auth-pane>input,.pvcs-phone-field,.pvcs-password-field{width:100%;border:1px solid #e2e2e2;background:#fafafa;border-radius:11px;min-height:46px}
.pvcs-auth-pane>input{padding:0 13px;outline:none;font-size:14px}
.pvcs-auth-pane>input:focus,.pvcs-phone-field:focus-within,.pvcs-password-field:focus-within{border-color:#7e532d;background:#fff;box-shadow:0 0 0 3px rgba(126,83,45,.08)}
.pvcs-phone-field{display:flex;align-items:center;overflow:hidden}.pvcs-phone-field span{padding:0 11px;border-right:1px solid #e5e5e5;font-weight:700;color:#555}.pvcs-phone-field input{flex:1;border:0;background:transparent;outline:none;padding:0 12px;font-size:14px;min-width:0}
.pvcs-password-field{display:flex;align-items:center}.pvcs-password-field input{flex:1;border:0;background:transparent;outline:none;padding:0 12px;font-size:14px;min-width:0}.pvcs-password-field button{width:42px;border:0;background:transparent;color:#888;cursor:pointer}
.pvcs-field-help{font-size:11.5px;color:#909090;line-height:1.45;margin-top:5px}
.pvcs-auth-main-btn{width:100%;border-radius:11px;margin-top:16px;padding:12px 16px;font-size:14px}
.pvcs-auth-divider{display:flex;align-items:center;gap:10px;color:#aaa;font-size:12px;margin:17px 0}.pvcs-auth-divider:before,.pvcs-auth-divider:after{content:"";height:1px;background:#e5e5e5;flex:1}
.pvcs-facebook-btn{width:100%;background:#1877f2;color:#fff;border:0;border-radius:11px;padding:12px 16px;font-weight:700;cursor:pointer;font-size:14px}.pvcs-facebook-btn i{font-size:17px;margin-right:7px}
.pvcs-auth-note{background:#f8f6f3;border:1px solid #eee6df;border-radius:10px;padding:10px 12px;font-size:11.5px;color:#70665f;line-height:1.5;margin-top:13px}.pvcs-auth-note i{color:#7e532d;margin-right:5px}
.pvcs-auth-status{border-radius:9px;padding:9px 11px;font-size:12.5px;margin-bottom:10px;line-height:1.4;background:#f4f5f6;color:#555}.pvcs-auth-status.error{background:#fff1f1;color:#a63232;border:1px solid #ffd7d7}.pvcs-auth-status.success{background:#effaf2;color:#26733c;border:1px solid #d7efdd}
.pvcs-turnstile-mount{margin-top:13px;min-height:34px}.pvcs-captcha-note{font-size:11.5px;color:#9a7a5c;background:#faf7f4;border-radius:8px;padding:8px 10px}
.pvcs-account-security-card{margin-top:14px;background:#faf9f7;border:1px solid #eee7e0;border-radius:12px;padding:10px 12px;display:grid;gap:8px;max-width:560px}.pvcs-account-security-card>div{display:flex;justify-content:space-between;gap:15px;align-items:center;font-size:12.5px}.pvcs-account-security-card b{color:#4d4037}.pvcs-account-security-card span{color:#777;text-align:right}.pvcs-link-facebook{border:0;background:#1877f2;color:#fff;border-radius:16px;padding:6px 10px;font-size:11.5px;font-weight:700;cursor:pointer}
@media(max-width:600px){.pvcs-auth-card{width:94%;padding:17px}.pvcs-account-security-card>div{align-items:flex-start}.pvcs-account-security-card span{max-width:60%}}

/* ===== PVCS v5: tìm thành viên + kết bạn ===== */
.pvcs-global-search{overflow:visible!important}.global-user-search-results{display:none;position:absolute;top:48px;left:0;right:0;background:#fff;border:1px solid #eee;border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.14);z-index:5000;max-height:360px;overflow:auto;padding:6px}.global-user-search-results.active{display:block}.pvcs-user-result{display:flex;align-items:center;gap:10px;padding:9px;border-radius:10px;cursor:pointer}.pvcs-user-result:hover{background:#f7eee8}.pvcs-user-result img{width:40px;height:40px;border-radius:50%;object-fit:cover}.pvcs-user-result-copy{min-width:0}.pvcs-user-result-name{font-weight:700;font-size:14px}.pvcs-user-result-username{font-size:12px;color:#888}.pvcs-user-profile-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.pvcs-friend-btn{border:0;border-radius:20px;padding:9px 16px;font-weight:700;cursor:pointer;background:#7e532d;color:#fff}.pvcs-friend-btn.secondary{background:#f1f1f1;color:#333}.pvcs-friend-counts{display:flex;gap:20px;margin-top:12px;font-size:14px}.friend-request-actions{display:flex;gap:7px;margin-top:7px}.friend-request-actions button{border:0;border-radius:16px;padding:6px 11px;cursor:pointer;font-weight:600}.friend-request-actions .accept{background:#7e532d;color:#fff}


/* =========================================================
   PVCS v6 - WEBRTC CALLING
   ========================================================= */
.zalo-call-stage.has-remote-video .zalo-call-avatar-wrap,
.zalo-call-stage.has-remote-video .zalo-call-name { display:none; }
.zalo-call-remote-media { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#17120f; display:none; }
.zalo-call-local-preview { position:absolute; z-index:5; right:18px; top:18px; width:min(28vw,180px); height:min(38vw,240px); max-height:30vh; object-fit:cover; border-radius:14px; border:2px solid rgba(255,255,255,.75); box-shadow:0 8px 24px rgba(0,0,0,.28); background:#111; }
.pvcs-incoming-call { position:fixed; inset:0; z-index:12000; background:rgba(20,13,8,.78); backdrop-filter:blur(9px); align-items:center; justify-content:center; padding:20px; }
.pvcs-incoming-card { width:min(92vw,390px); background:linear-gradient(160deg,#8b603b,#5d3a20); color:#fff; border-radius:28px; padding:34px 24px 26px; text-align:center; box-shadow:0 24px 80px rgba(0,0,0,.42); }
.pvcs-incoming-card img { width:104px; height:104px; border-radius:50%; object-fit:cover; border:4px solid rgba(255,255,255,.9); background:#fff; }
.pvcs-incoming-name { margin-top:18px; font-size:22px; font-weight:800; }
.pvcs-incoming-type { margin-top:6px; font-size:13.5px; color:rgba(255,255,255,.78); }
.pvcs-incoming-actions { display:flex; justify-content:center; gap:54px; margin-top:30px; }
.pvcs-incoming-actions button { border:0; background:none; color:#fff; display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; font-size:12px; }
.pvcs-incoming-actions button i { width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:21px; }
.pvcs-call-reject i { background:#e34b4b; }
.pvcs-call-accept i { background:#25a95b; }
@media (max-width:600px){
  .zalo-call-local-preview{right:12px;top:12px;width:112px;height:150px;border-radius:12px}
  .pvcs-incoming-actions{gap:44px}
}

/* PVCS v6.2 - nút Loa ngoài trong cuộc gọi */
#callSpeakerBtn.speaker-on {
    background: rgba(255,255,255,.94);
    color: #7e532d;
    box-shadow: 0 0 0 3px rgba(255,255,255,.14);
}
#callSpeakerBtn.speaker-on + span, #callSpeakerLabel { white-space: nowrap; }
@media (max-width: 600px) {
    .zalo-call-controls { gap: 17px; padding-left: 10px; padding-right: 10px; }
    .zalo-call-control-group { min-width: 58px; }
}


/* PVCS v6.3 message actions */
.pvcs-message-menu{position:fixed;z-index:10050;width:205px;background:#fff;border:1px solid #eadfd5;border-radius:14px;box-shadow:0 12px 35px rgba(0,0,0,.22);padding:6px;overflow:hidden}.pvcs-message-menu button{width:100%;border:0;background:#fff;padding:10px 12px;text-align:left;border-radius:9px;font-size:13px;display:flex;gap:10px;align-items:center}.pvcs-message-menu button:hover{background:#f7efe8}.pvcs-msg-more{border:0;background:transparent;color:#9b806b;opacity:.5;padding:6px}.zalo-msg-row:hover .pvcs-msg-more{opacity:1}.pvcs-msg-select{display:none;border:0;background:transparent;color:#7e532d;font-size:18px}.pvcs-selecting-messages .pvcs-msg-select{display:block}.zalo-msg-row.selected .zalo-msg-bubble{outline:2px solid #b98a62}.pvcs-reply-quote{border-left:3px solid #7e532d;padding:5px 8px;margin-bottom:6px;background:rgba(126,83,45,.08);font-size:11px;color:#6c5b4c}.pvcs-forwarded{font-size:10px;color:#8a7767;margin-bottom:4px}.pvcs-recalled{font-style:italic;color:#999}.pvcs-call-log{display:flex;gap:10px;align-items:center;min-width:180px}.pvcs-call-log>i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#efe2d6;color:#7e532d}.pvcs-call-log div{display:flex;flex-direction:column}.pvcs-call-log small{margin-top:3px;color:#888}.pvcs-reply-bar{position:absolute;left:52px;right:62px;bottom:58px;background:#fff7f0;border-left:3px solid #7e532d;padding:7px 10px;z-index:5;align-items:center;justify-content:space-between;box-shadow:0 -2px 8px rgba(0,0,0,.06)}.pvcs-reply-bar div{display:flex;flex-direction:column;min-width:0}.pvcs-reply-bar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;color:#777}.pvcs-reply-bar button{border:0;background:transparent;font-size:22px}.pvcs-multi-bar{padding:9px 12px;background:#fff8f2;border-bottom:1px solid #ead9ca;align-items:center;justify-content:space-between}.pvcs-multi-bar button{border:0;border-radius:9px;padding:7px 10px;margin-left:6px}.call-control-btn#callSpeakerBtn:not(.speaker-on){background:rgba(255,255,255,.15)}

/* PVCS v6.4 */
.zalo-call-duration{font-size:17px;font-weight:700;color:#fff;margin-top:7px;letter-spacing:.5px;text-shadow:0 1px 4px rgba(0,0,0,.25)}
.pvcs-call-toast{position:fixed;left:50%;bottom:118px;transform:translate(-50%,20px);max-width:min(90vw,430px);background:rgba(20,20,20,.92);color:#fff;padding:10px 14px;border-radius:12px;font-size:13px;z-index:20000;opacity:0;pointer-events:none;transition:.2s;text-align:center}.pvcs-call-toast.show{opacity:1;transform:translate(-50%,0)}
.pvcs-msg-more{opacity:.9;min-width:34px;min-height:34px}.pvcs-message-menu .pvcs-menu-close{display:none}
@media(max-width:700px){
 .pvcs-message-menu{left:10px!important;right:10px!important;top:auto!important;bottom:12px!important;width:auto!important;display:grid;grid-template-columns:1fr 1fr;padding:10px;border-radius:18px;max-height:70vh;overflow:auto;z-index:30000}
 .pvcs-message-menu button{font-size:14px;padding:12px 10px;border-bottom:1px solid #f2e8df}
 .pvcs-message-menu .pvcs-menu-close{display:flex;grid-column:1/-1;justify-content:center;background:#f7efe8;color:#7e532d;font-weight:700;margin-top:4px}
 .pvcs-msg-more{opacity:1!important;display:inline-flex!important;align-items:center;justify-content:center}
}

/* ===== PVCS v6.8: bình luận + nhạc chuông ===== */
.pvcs-comment-actions{display:flex;align-items:center;gap:12px;margin-top:6px}
.pvcs-comment-action{background:none;border:0;padding:0;color:#9B5D34;font-size:12px;font-weight:600;cursor:pointer}
.pvcs-comment-action.delete{color:#b94a48}
.pvcs-comment-action:hover{text-decoration:underline}
.pvcs-comment-deleted{font-size:12.5px;color:#999;font-style:italic;padding:2px 0}
.pvcs-ringtone-settings{margin-top:14px;padding:14px;border:1px solid #eadfd5;border-radius:14px;background:#fffaf6}
.pvcs-ringtone-title{font-weight:800;font-size:14px;color:#6f4829;display:flex;align-items:center;gap:7px}
.pvcs-ringtone-note{font-size:11.5px;color:#837567;line-height:1.45;margin:5px 0 10px}
.pvcs-ringtone-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid #efe4db}
.pvcs-ringtone-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.pvcs-ringtone-info b{font-size:13px;color:#333}.pvcs-ringtone-info span{font-size:11.5px;color:#85786d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.pvcs-ringtone-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.pvcs-ringtone-actions button,.pvcs-ringtone-upload{height:32px;border-radius:16px;border:1px solid #dfcfc0;background:#fff;color:#7e532d;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;gap:5px;font-size:12px;cursor:pointer}
.pvcs-ringtone-actions button{width:32px;padding:0}.pvcs-ringtone-upload:hover,.pvcs-ringtone-actions button:hover{background:#f7eee6}
.pvcs-native-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:999px;background:#edf7ee;color:#2d7a39;font-size:10px;font-weight:700}
@media(max-width:600px){.pvcs-ringtone-row{align-items:flex-start;flex-direction:column}.pvcs-ringtone-actions{width:100%}.pvcs-ringtone-upload{flex:1}.pvcs-ringtone-info span{max-width:70vw}}

/* ===== PVCS v6.8: toast thông báo realtime kiểu Facebook ===== */
.pvcs-live-notification{position:fixed;right:22px;top:82px;z-index:10080;width:min(390px,calc(100vw - 28px));display:flex;align-items:center;gap:11px;padding:12px 14px;border:1px solid #eadfd5;border-radius:14px;background:#fff;box-shadow:0 12px 38px rgba(0,0,0,.18);text-align:left;cursor:pointer;opacity:0;transform:translateY(-10px) scale(.98);transition:.2s ease;color:#242424}
.pvcs-live-notification.show{opacity:1;transform:translateY(0) scale(1)}
.pvcs-live-notification>img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:0 0 46px;background:#f1f1f1}
.pvcs-live-notification-copy{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.pvcs-live-notification-copy b{font-size:13.5px}.pvcs-live-notification-copy span{font-size:12.5px;line-height:1.35;color:#444;white-space:normal}.pvcs-live-notification-copy small{font-size:11px;color:#9B5D34}
.pvcs-live-notification-dot{width:9px;height:9px;border-radius:50%;background:#1877f2;flex:0 0 9px}
@media(max-width:700px){.pvcs-live-notification{top:12px;right:14px;left:14px;width:auto}}

/* ===== PVCS v6.9: local ringtone + web chat bubble + notification prompt ===== */
.pvcs-web-chat-bubble{position:fixed;right:26px;bottom:92px;z-index:10070;width:58px;height:58px;border:3px solid #fff;border-radius:50%;padding:0;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.25);cursor:pointer;overflow:visible;animation:pvcsBubbleIn .2s ease}
.pvcs-web-chat-bubble img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}.pvcs-web-chat-bubble span{position:absolute;right:-4px;top:-5px;min-width:21px;height:21px;padding:0 5px;border-radius:999px;background:#e54848;color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
@keyframes pvcsBubbleIn{from{transform:scale(.75);opacity:0}to{transform:scale(1);opacity:1}}
.pvcs-notification-permission-prompt{position:fixed;right:22px;bottom:26px;z-index:10090;width:min(430px,calc(100vw - 28px));display:flex;align-items:center;gap:10px;padding:12px 13px;background:#fff;border:1px solid #e7d8cb;border-radius:15px;box-shadow:0 14px 40px rgba(0,0,0,.2)}
.pvcs-notification-permission-prompt>div{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}.pvcs-notification-permission-prompt b{font-size:13.5px;color:#50351f}.pvcs-notification-permission-prompt span{font-size:11.5px;color:#71665d;line-height:1.35}.pvcs-notification-permission-prompt button{border:0;border-radius:16px;background:#7e532d;color:#fff;height:32px;padding:0 13px;font-size:12px;font-weight:700;cursor:pointer}.pvcs-notification-permission-prompt button.close{width:30px;padding:0;background:#f1ece8;color:#6b5b4f;font-size:18px}
@media(max-width:700px){.pvcs-web-chat-bubble{right:16px;bottom:82px}.pvcs-notification-permission-prompt{left:14px;right:14px;bottom:76px;width:auto}}