/* ==========================================================================
   static/css/member.css — giao diện phần thành viên (file mới)
   --------------------------------------------------------------------------
   Dùng chung cho cả máy tính và điện thoại (nạp sau 2 file CSS cũ nên được
   ưu tiên hơn). Các phần được bổ sung dần theo từng bước.
   ========================================================================== */

:root {
    --mb-red: #9A2C2C;
    --mb-red-hover: #a83434;
    --mb-bg: #0c0d0f;
    --mb-panel: #131619;
    --mb-panel-2: #1a1e22;
    --mb-input: #0f1215;
    --mb-border: #252a2f;
    --mb-border-2: #2d3339;
    --mb-text: #e4e7e9;
    --mb-muted: #9aa0a6;
    --mb-radius: 10px;
}

/* --------------------------------------------------------------------------
   1. MENU TRÊN CÙNG: icon người + ô Đăng Nhập / tài khoản viền đỏ
   -------------------------------------------------------------------------- */
.icon-user:before {
    content: '';
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    background-image: url(/static/img/icon-user.svg);
    background-size: 16px;
    background-repeat: no-repeat;
    margin-right: 4px;
    margin-top: -1px;
}

#header > .site-header #primary-nav .menu li a[data-nav-key="account"],
#header > .site-header #primary-nav .menu li a[data-nav-key="account"]:hover,
#header > .site-header #primary-nav .menu li a[data-nav-key="account"]:focus {
    border-color: var(--mb-red) !important;
}

#header > .site-header #primary-nav .menu li a[data-nav-key="account"].nav-selected,
#header > .site-header #primary-nav .menu li a[data-nav-key="account"].nav-selected:hover {
    background: var(--mb-red) !important;
    border-color: var(--mb-red) !important;
    color: #fff !important;
}

/* Đã đăng nhập: avatar nhỏ + tên thay cho chữ "Đăng Nhập" */
.nav-account {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}
.nav-avatar {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 6px;
    background: #2a2f35;
}
.nav-username {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   2. KHUNG TRANG THÀNH VIÊN (đăng nhập, đăng ký, tài khoản...)
   -------------------------------------------------------------------------- */
.mb-page {
    width: 100%;
    max-width: 560px;
    margin: 18px auto 28px;
    padding: 0 10px;
    box-sizing: border-box;
}
.mb-page.wide {
    max-width: 1000px;
}
.mb-card {
    background: var(--mb-panel);
    border: 1px solid var(--mb-border);
    border-radius: 14px;
    padding: 20px;
    box-sizing: border-box;
}
.mb-card + .mb-card {
    margin-top: 14px;
}
.mb-title {
    margin: 0 0 16px;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}
.mb-sub {
    margin: -6px 0 16px;
    color: var(--mb-muted);
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}
.mb-empty {
    padding: 26px 10px;
    color: var(--mb-muted);
    font-size: 15px;
    text-align: center;
}

/* --------------------------------------------------------------------------
   3. FORM VÀ NÚT
   -------------------------------------------------------------------------- */
.mb-field {
    margin-bottom: 14px;
}
.mb-field > label {
    display: block;
    margin-bottom: 7px;
    color: #e7e7e7;
    font-size: 14px;
    font-weight: 700;
}
.mb-input,
.mb-textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 13px;
    border: 1px solid var(--mb-border);
    border-radius: var(--mb-radius);
    outline: none;
    background: var(--mb-input);
    color: #f5f5f5;
    font: inherit;
    font-size: 15px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.mb-input:focus,
.mb-textarea:focus {
    border-color: rgba(154, 44, 44, .75);
    box-shadow: 0 0 0 3px rgba(154, 44, 44, .12);
}
.mb-input[readonly] {
    color: #b9bec4;
    cursor: default;
}
.mb-textarea {
    min-height: 96px;
    resize: vertical;
}
.mb-hint {
    margin-top: 6px;
    color: var(--mb-muted);
    font-size: 12px;
    line-height: 1.5;
}
.mb-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 4px 0 14px;
    color: var(--mb-text);
    font-size: 14px;
    line-height: 1.45;
    cursor: pointer;
}
.mb-check input {
    width: 17px;
    height: 17px;
    margin: 2px 0 0;
    flex: 0 0 17px;
    accent-color: var(--mb-red);
}

.mb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    box-sizing: border-box;
    border: 1px solid var(--mb-red);
    border-radius: var(--mb-radius);
    background: var(--mb-red);
    color: #fff !important;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, opacity .2s ease;
}
.mb-btn:hover {
    background: var(--mb-red-hover);
    border-color: var(--mb-red-hover);
}
.mb-btn:disabled,
.mb-btn.is-loading {
    opacity: .55;
    cursor: not-allowed;
}
.mb-btn.block {
    display: flex;
    width: 100%;
}
.mb-btn.ghost {
    border-color: var(--mb-border-2);
    background: transparent;
    color: var(--mb-text) !important;
}
.mb-btn.ghost:hover {
    border-color: var(--mb-red);
    background: rgba(154, 44, 44, .08);
}
.mb-btn.gray {
    border-color: #4a4f55;
    background: #3a3f45;
}
.mb-btn.gray:hover {
    background: #454a51;
}
.mb-btn.small {
    min-height: 34px;
    padding: 6px 12px;
    font-size: 13px;
}

.mb-alert {
    display: none;
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 9px;
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.mb-alert.show {
    display: block;
}
.mb-alert.error {
    border: 1px solid rgba(154, 44, 44, .55);
    background: rgba(154, 44, 44, .16);
    color: #ffb7b7;
}
.mb-alert.success {
    border: 1px solid rgba(34, 197, 94, .4);
    background: rgba(34, 197, 94, .12);
    color: #a7f3c0;
}

.mb-links {
    margin-top: 16px;
    color: var(--mb-muted);
    font-size: 14px;
    text-align: center;
}
.mb-links a {
    color: #fff;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   4. THÔNG BÁO NỔI (toast)
   -------------------------------------------------------------------------- */
.mb-toast {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    left: 50%;
    z-index: 2147483647;
    box-sizing: border-box;
    width: min(520px, calc(100vw - 24px));
    padding: 14px 46px 14px 16px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 12px;
    background: #171717;
    color: #fff;
    box-shadow: 0 12px 35px rgba(0, 0, 0, .45);
    font-size: 14px;
    line-height: 1.5;
    opacity: 0;
    transform: translate(-50%, -14px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    overflow-wrap: anywhere;
}
.mb-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}
.mb-toast.success {
    border-color: rgba(34, 197, 94, .45);
    background: linear-gradient(135deg, #12321f, #171717);
}
.mb-toast.error {
    border-color: rgba(154, 44, 44, .55);
    background: linear-gradient(135deg, #381719, #171717);
}
.mb-toast-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, .75);
    font-size: 22px;
    line-height: 30px;
    cursor: pointer;
}
.mb-toast-close:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

@media (max-width: 600px) {
    .mb-page {
        margin-top: 14px;
        padding: 0 8px;
    }
    .mb-card {
        padding: 16px 14px;
        border-radius: 12px;
    }
}

/* --------------------------------------------------------------------------
   5. MENU: khoảng cách icon Clip hot / Đăng Nhập bằng icon Trang chủ
   -------------------------------------------------------------------------- */
#primary-nav .menu .icon-fire:before,
#primary-nav .menu .icon-user:before {
    margin-right: 5px !important;
}

/* --------------------------------------------------------------------------
   6. TRANG CLIP HOT: 2 khối "Clip hay" / "Xem nhiều nhất"
   -------------------------------------------------------------------------- */

/* Tiêu đề trang vẫn có cho Google đọc, nhưng ẩn khỏi màn hình
   (thanh 2 khối bên dưới đã thể hiện tiêu đề). */
#container > #page-title.hot-heading {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.hot-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 4px 5px 12px;
    border-bottom: 2px solid #2b2b2b;
}
.hot-tab,
.hot-tab:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45em;
    min-width: 0;
    padding: 11px 4px 12px;
    margin-bottom: -2px;
    border-bottom: 2px solid transparent;
    color: #8f959b !important;
    font-size: clamp(13px, 4.2vw, 19px);
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none !important;
    white-space: nowrap;
    transition: color .2s ease, border-color .2s ease;
}
.hot-tab:before {
    content: '';
    flex: 0 0 auto;
    width: 1.15em;
    height: 1.15em;
    margin-top: -2px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: .55;
    transition: opacity .2s ease;
}
.hot-tab-hay:before {
    background-image: url(/static/img/icon-tab-like.svg);
}
.hot-tab-xem:before {
    background-image: url(/static/img/icon-tab-eye.svg);
}
.hot-tab:hover {
    color: #fff !important;
}
.hot-tab.active {
    color: #fff !important;
    border-bottom-color: var(--mb-red);
}
.hot-tab.active:before,
.hot-tab:hover:before {
    opacity: 1;
}

/* ĐÃ SỬA (Bước 8): trang Clip hot — "Clip hay" và "Xem nhiều nhất" thành 2
   khối riêng, khối đang chọn nền đỏ. Chỉ áp dụng cho trang Clip hot
   (.is-blocks); thanh "Clip đã lưu / Lịch sử xem" ở trang tài khoản vẫn giữ
   kiểu gạch chân như cũ.
   ĐÃ SỬA (Bước 9): chiều cao, cỡ chữ, biểu tượng, màu bằng đúng các khối menu
   Trang chủ / Clip hot ở trên cùng:
     điện thoại: cao 44px, chữ 12px (màn hình <= 360px: 11px), góc bo 6px;
     máy tính 768-900px: cao 44px, chữ 14px đậm; từ 901px: cao 40px. */
.hot-tabs.is-blocks {
    gap: 6px;
    margin: 4px 5px 10px;
    border-bottom: 0;
}
.hot-tabs.is-blocks .hot-tab,
.hot-tabs.is-blocks .hot-tab:visited {
    gap: 5px;
    min-height: 44px;
    margin: 0;
    padding: 0 6px;
    box-sizing: border-box;
    border: 1px solid #252a2f;
    border-radius: 6px;
    background: #131619;
    color: #e5e7eb !important;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.hot-tabs.is-blocks .hot-tab:before {
    width: 16px;
    height: 16px;
    margin-top: 0;
    opacity: .9;
}
.hot-tabs.is-blocks .hot-tab:hover {
    border-color: #2d3339;
    background: #171a1e;
    color: #fff !important;
}
.hot-tabs.is-blocks .hot-tab.active,
.hot-tabs.is-blocks .hot-tab.active:hover {
    border-color: var(--mb-red);
    background: var(--mb-red);
    color: #fff !important;
}
.hot-tabs.is-blocks .hot-tab.active:before {
    opacity: 1;
}
.hot-tabs.is-blocks .hot-tab:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
@media (max-width: 360px) {
    .hot-tabs.is-blocks .hot-tab,
    .hot-tabs.is-blocks .hot-tab:visited {
        padding: 0 4px;
        font-size: 11px;
    }
}
@media (min-width: 768px) {
    .hot-tabs.is-blocks {
        gap: 8px;
    }
    .hot-tabs.is-blocks .hot-tab,
    .hot-tabs.is-blocks .hot-tab:visited {
        gap: 7px;
        border-radius: 7px;
        font-size: 14px;
        font-weight: 600;
    }
    .hot-tabs.is-blocks .hot-tab:before {
        width: 20px;
        height: 20px;
    }
}
@media (min-width: 901px) {
    .hot-tabs.is-blocks .hot-tab,
    .hot-tabs.is-blocks .hot-tab:visited {
        min-height: 40px;
    }
}

/* THÊM MỚI (Bước 9): nút Ngày / Tuần / Tháng / Năm / Tất cả của trang Clip
   hot — chiều cao và cỡ chữ bằng các khối thể loại ở trên (cao 40px; chữ
   12px trên điện thoại, 14px trên máy tính). */
.textFilter[data-hot-orders] a,
.textFilter[data-hot-orders] a:visited {
    min-height: 40px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
}
@media (max-width: 767px) {
    .textFilter[data-hot-orders] a,
    .textFilter[data-hot-orders] a:visited {
        padding: 8px 10px !important;
    }
}
@media (max-width: 360px) {
    .textFilter[data-hot-orders] a,
    .textFilter[data-hot-orders] a:visited {
        padding: 8px 8px !important;
    }
}
@media (min-width: 768px) {
    .textFilter[data-hot-orders] a,
    .textFilter[data-hot-orders] a:visited {
        font-size: 14px !important;
    }
}

/* Danh sách đang ẩn (đã tải sẵn, bấm sang là hiện ngay). */
.hot-panel[hidden] {
    display: none !important;
}
/* Bấm khi danh sách còn đang tải ngầm: làm mờ danh sách cũ trong lúc chờ. */
.hot-panels.is-loading {
    opacity: .55;
    transition: opacity .15s ease;
}
/* Ảnh của danh sách tải ngầm: nền tối trong lúc ảnh đang tải. */
.hot-panel .video-image {
    background: #2b2b2b;
}

/* --------------------------------------------------------------------------
   7. NGƯỜI ĐĂNG trên thẻ video
   ĐÃ SỬA (Bước 10): nằm DƯỚI tiêu đề clip — ảnh đại diện nhỏ + chữ "Đăng bởi"
   + tên người đăng. Bấm vào hiện khung thông tin thành viên.
   -------------------------------------------------------------------------- */
.video-item .video-uploader {
    clear: both;
    box-sizing: border-box;
    width: calc(100% - 10px);
    margin: 2px 5px 12px;
    text-align: left;
    line-height: 1.2;
}
/* Tiêu đề phía trên có khoảng trống dưới 15px (giao diện cũ): kéo dòng người
   đăng lên sát tiêu đề. */
#video-list .video-item .video-name + .video-uploader {
    margin-top: -10px;
}
/* Tiêu đề 1 dòng: không giữ chỗ trống dòng thứ 2 nữa, người đăng nằm ngay dưới
   chữ (giống mẫu). Vẫn tối đa 2 dòng rồi "...". Trình duyệt quá cũ không hiểu
   :has() thì giữ như cũ (có khoảng trống), không vỡ giao diện. */
#video-list .video-item .video-name:has(+ .video-uploader),
#video-list .video-item .video-name:has(+ .video-uploader) > a {
    height: auto !important;
    min-height: 0 !important;
}
.video-uploader a,
.video-uploader a:visited {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    vertical-align: top;
    color: #7fb2b3 !important;
    text-decoration: none !important;
}
.video-uploader-avatar {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin: 0;
    border-radius: 50%;
    object-fit: cover;
    background: #2a2f35;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .14);
}
.video-uploader-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.video-uploader-text small {
    display: block;
    color: #8b9298;
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.15;
}
.video-uploader-name {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #7fb2b3;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.video-uploader a:hover .video-uploader-name,
.video-uploader a:focus-visible .video-uploader-name {
    color: #a9d6d7;
}
.video-uploader a:hover .video-uploader-avatar {
    box-shadow: 0 0 0 1px rgba(169, 214, 215, .55);
}
/* Clip đã lưu / lịch sử xem: dòng "Đã xem ..." ngay dưới người đăng. */
.video-uploader + .mb-item-meta {
    margin-top: -6px;
}

@media (max-width: 767px) {
    .video-uploader a,
    .video-uploader a:visited {
        gap: 6px;
    }
    .video-uploader-avatar {
        flex-basis: 22px;
        width: 22px;
        height: 22px;
    }
    .video-uploader-text small {
        font-size: 10px;
    }
    .video-uploader-name {
        font-size: 12px;
    }
}

/* --------------------------------------------------------------------------
   8. TIỆN ÍCH DÙNG CHUNG
   -------------------------------------------------------------------------- */
.mb-sr-only,
.mb-file-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
/* Ô bẫy máy tự đăng ký: đẩy hẳn ra ngoài màn hình. */
.mb-hp {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}
.mb-page [hidden] {
    display: none !important;
}
.mb-ico {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.mb-input.is-invalid {
    border-color: rgba(214, 72, 72, .9);
    box-shadow: 0 0 0 3px rgba(154, 44, 44, .18);
}

/* --------------------------------------------------------------------------
   9. ĐĂNG NHẬP / ĐĂNG KÝ
   -------------------------------------------------------------------------- */
.mb-page.mb-auth-page {
    max-width: 440px;
}
.mb-auth {
    --mb-pad: 22px;
    padding: 0 var(--mb-pad) var(--mb-pad);
    overflow: hidden;
}
.mb-auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 calc(var(--mb-pad) * -1) 20px;
    border-bottom: 1px solid var(--mb-border);
}
.mb-auth-tab,
.mb-auth-tab:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: #8f959b !important;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.mb-auth-tab:hover {
    color: #fff !important;
}
.mb-auth-tab.active {
    border-bottom-color: var(--mb-red);
    background: linear-gradient(180deg, rgba(154, 44, 44, 0), rgba(154, 44, 44, .10));
    color: #fff !important;
}

.mb-pass {
    position: relative;
}
.mb-pass .mb-input {
    padding-right: 48px;
}
.mb-pass-toggle {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0 var(--mb-radius) var(--mb-radius) 0;
    background: transparent;
    color: #8f959b;
    cursor: pointer;
}
.mb-pass-toggle:hover,
.mb-pass-toggle:focus-visible {
    color: #fff;
}
.mb-pass-toggle svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Đang hiện mật khẩu: con mắt có gạch chéo. */
.mb-pass-toggle .mb-eye-slash {
    display: none;
}
.mb-pass-toggle[aria-pressed="true"] .mb-eye-slash {
    display: inline;
}

.mb-form .mb-btn.block {
    margin-top: 4px;
}
.mb-note {
    margin: 12px 0 0;
    color: var(--mb-muted);
    font-size: 12.5px;
    line-height: 1.5;
    text-align: center;
}
.mb-auth .mb-links {
    margin: 16px 0 0;
}

/* --------------------------------------------------------------------------
   10. TRANG TÀI KHOẢN
   -------------------------------------------------------------------------- */
.mb-page.mb-account-page {
    max-width: 520px;
}
.mb-account .mb-title {
    margin-bottom: 18px;
}
.mb-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}
.mb-profile .mb-hint {
    margin: 0;
    text-align: center;
}
.mb-avatar-wrap {
    position: relative;
    width: 112px;
    height: 112px;
    margin-bottom: 4px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--mb-panel), 0 0 0 5px rgba(154, 44, 44, .85);
}
.mb-avatar-lg {
    display: block;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    object-fit: cover;
    background: #2a2f35;
}
.mb-avatar-loading {
    position: absolute;
    inset: 0;
    display: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
}
.mb-avatar-loading:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    box-sizing: border-box;
    border: 3px solid rgba(255, 255, 255, .25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: mb-spin .8s linear infinite;
}
.mb-avatar-wrap.is-loading .mb-avatar-loading {
    display: block;
}
@keyframes mb-spin {
    to {
        transform: rotate(360deg);
    }
}
.mb-avatar-btn {
    cursor: pointer;
}
.mb-file-hidden:focus-visible + .mb-avatar-btn {
    outline: 2px solid var(--mb-red);
    outline-offset: 2px;
}

.mb-info {
    margin: 0 0 16px;
    border: 1px solid var(--mb-border);
    border-radius: 12px;
    background: var(--mb-input);
    overflow: hidden;
}
.mb-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 15px;
}
.mb-info-row + .mb-info-row {
    border-top: 1px solid var(--mb-border);
}
.mb-info dt {
    color: var(--mb-muted);
    font-size: 14px;
}
.mb-info dd {
    margin: 0;
    min-width: 0;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-align: right;
    overflow-wrap: anywhere;
}

.mb-password-toggle.is-open {
    border-color: var(--mb-red);
    background: rgba(154, 44, 44, .08);
}
.mb-password-form {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--mb-border-2);
}

.mb-menu {
    padding: 0;
    overflow: hidden;
}
.mb-menu-item,
.mb-menu-item:visited {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 0 16px;
    color: var(--mb-text) !important;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background .15s ease;
}
.mb-menu-item + .mb-menu-item {
    border-top: 1px solid var(--mb-border);
}
.mb-menu-item:hover {
    background: #171b1f;
}
.mb-menu-item .mb-ico {
    width: 20px;
    height: 20px;
    color: #c9ced3;
}
.mb-menu-item > .mb-ico:last-child {
    width: 16px;
    height: 16px;
    color: #6b7177;
}
.mb-menu-label {
    flex: 1 1 auto;
    min-width: 0;
}
.mb-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 7px;
    box-sizing: border-box;
    border-radius: 11px;
    background: #23282d;
    color: #e7e9eb;
    font-size: 12px;
    font-weight: 700;
}
.mb-menu-item.danger,
.mb-menu-item.danger:visited,
.mb-menu-item.danger .mb-ico {
    color: #ff9d9d !important;
}

/* --------------------------------------------------------------------------
   11. CLIP ĐÃ LƯU / LỊCH SỬ XEM
   -------------------------------------------------------------------------- */
.mb-tab-saved:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h11a1 1 0 0 1 1 1v17l-6.5-4.2L5.5 21V4a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}
.mb-tab-history:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.2 2'/%3E%3C/svg%3E");
}
.mb-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: 10px;
    background: #23282d;
    color: #cfd3d7;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
}
.hot-tab.active .mb-tab-count {
    background: var(--mb-red);
    color: #fff;
}

.mb-lib-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 34px;
    margin: 0 5px 6px;
}
.mb-back,
.mb-back:visited {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #aeb4ba !important;
    font-size: 14px;
    text-decoration: none !important;
}
.mb-back:hover {
    color: #fff !important;
}
.mb-back svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.mb-lib-note {
    margin: 0 5px 4px;
    color: var(--mb-muted);
    font-size: 12.5px;
    line-height: 1.5;
}
#video-list.mb-lib-list > .mb-empty {
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
    clear: both;
}

.mb-item-remove {
    position: absolute;
    top: 6px;
    right: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    background: rgba(12, 13, 15, .75);
    color: #fff;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.mb-item-remove:hover,
.mb-item-remove:focus-visible {
    border-color: var(--mb-red);
    background: var(--mb-red);
}
.mb-item-remove:disabled {
    opacity: .5;
    cursor: wait;
}
.mb-item-remove svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
}
/* Dòng "Đã lưu / Đã xem ... trước" nằm sát ngay dưới tiêu đề. */
#video-list .mb-lib-item .video-name {
    margin-bottom: 3px !important;
}
/* ĐÃ SỬA: ở đây tiêu đề chỉ có lề dưới 3px (trang chủ 15px) nên KHÔNG kéo dòng
   "Đăng bởi" lên -10px như mục 7 nữa (trước đây bị đè lên tên video 7px).
   Cách tên video 5px, giống trang Clip Thành Viên. */
#video-list .video-item.mb-lib-item .video-name + .video-uploader {
    margin-top: 5px;
}
.mb-item-meta {
    margin: 0 6px 14px;
    color: var(--mb-muted);
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
}
.video-item.is-removing {
    opacity: 0;
    transform: scale(.96);
    transition: opacity .2s ease, transform .2s ease;
}

@media (max-width: 767px) {
    .mb-item-meta {
        float: left;
        clear: left;
        width: calc(100% - 10px);
        margin: 0 0 12px 5px;
    }
    .mb-item-remove {
        top: 5px;
        right: 9px;
        width: 28px;
        height: 28px;
    }
}

@media (max-width: 600px) {
    .mb-auth {
        --mb-pad: 16px;
    }
    .mb-avatar-wrap,
    .mb-avatar-lg {
        width: 100px;
        height: 100px;
    }
}

/* --------------------------------------------------------------------------
   12. TRANG XEM CLIP: nút Lưu / Báo cáo + người đăng
   ĐÃ SỬA (Bước 7): Lưu và Báo cáo nằm trong hàng server / like / dislike /
   lượt xem (#video-actions); bỏ ô "Bình luận". Dòng "Đăng bởi" (chỉ có ở clip
   thành viên đăng) nằm ngay dưới hàng đó.
   -------------------------------------------------------------------------- */
.mb-watch-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 12px;   /* ĐÃ SỬA (10px -> 12px): bằng khoảng trống bên dưới (máy tính) */
}
.mb-watch-uploader,
.mb-watch-uploader:visited {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    color: var(--mb-text) !important;
    text-decoration: none !important;
}
.mb-watch-uploader img {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    background: #2a2f35;
}
.mb-watch-uploader-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}
.mb-watch-uploader-text small {
    color: var(--mb-muted);
    font-size: 11.5px;
}
.mb-watch-uploader-text strong {
    overflow: hidden;
    color: #7fb2b3;
    font-size: 14.5px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mb-watch-uploader:hover strong {
    color: #a9d6d7;
}
.mb-act,
.mb-act:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    min-height: 38px;
    padding: 0 14px;
    box-sizing: border-box;
    border: 1px solid #252a2f;
    border-radius: 6px;
    background: #131619;
    color: #e4e7e9 !important;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.mb-act:hover {
    border-color: #30363c;
    background: #1b1f23;
    color: #fff !important;
}
.mb-act:disabled {
    opacity: .6;
    cursor: wait;
}
.mb-act .mb-ico {
    width: 18px;
    height: 18px;
}
/* Máy tính: Lưu ngay sau nút server, Báo cáo sau lượt xem (cùng cao 38px). */
#video-actions > .mb-act {
    flex: 0 0 auto;
}
.mb-save-btn.is-saved {
    border-color: rgba(154, 44, 44, .85);
    background: rgba(154, 44, 44, .18);
    color: #fff !important;
}
.mb-save-btn.is-saved .mb-ico {
    fill: currentColor;
}

/* --------------------------------------------------------------------------
   13. BÌNH LUẬN
   -------------------------------------------------------------------------- */
.mb-cmt-box {
    margin: 14px 0 0;
    padding: 16px;
    border: 1px solid #24282c;
    border-radius: 8px;
    background: #0e1114;
}
.mb-cmt-box [hidden] {
    display: none !important;
}
.mb-cmt-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 12px;
    color: #f1f3f5;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
}
.mb-cmt-title .mb-ico {
    width: 22px;
    height: 22px;
    fill: #cfd3d7;
    stroke: none;
}

.mb-cmt-form {
    position: relative;
    margin: 0 0 14px;
}
.mb-cmt-input {
    display: block;
    width: 100%;
    min-height: 96px;
    padding: 10px 12px;
    box-sizing: border-box;
    border: 1px solid #2f3439;
    border-radius: 6px;
    outline: none;
    background: #000;
    color: #f1f3f5;
    font: inherit;
    font-size: 15px;
    line-height: 1.5;
    resize: vertical;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.mb-cmt-input::placeholder {
    color: #7d8389;
}
.mb-cmt-input:focus {
    border-color: rgba(154, 44, 44, .75);
    box-shadow: 0 0 0 3px rgba(154, 44, 44, .12);
}
.mb-cmt-tools {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
.mb-emoji-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: #3a3f45;
    box-shadow: 0 3px 0 #1c1f22;
    color: #d5d8db;
    cursor: pointer;
}
.mb-emoji-btn:hover,
.mb-emoji-btn[aria-expanded="true"] {
    background: #484e55;
    color: #fff;
}
.mb-emoji-btn .mb-ico {
    width: 24px;
    height: 24px;
}
.mb-cmt-count {
    margin-left: auto;
    color: var(--mb-muted);
    font-size: 12px;
}
.mb-cmt-count.over {
    color: #ff8a8a;
    font-weight: 700;
}
.mb-cmt-send,
.mb-cmt-cancel {
    min-width: 78px;
    height: 42px;
    padding: 0 18px;
    border-radius: 6px;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}
.mb-cmt-send {
    border: 0;
    background: var(--mb-red);
    box-shadow: 0 3px 0 #5a1a1a;
    color: #fff;
}
.mb-cmt-send:hover {
    background: var(--mb-red-hover);
}
.mb-cmt-send:disabled {
    opacity: .6;
    cursor: wait;
}
.mb-cmt-cancel {
    min-width: 0;
    padding: 0 14px;
    border: 1px solid #30363c;
    background: transparent;
    color: #cfd3d7;
    font-size: 14px;
}
.mb-cmt-cancel:hover {
    border-color: #454c53;
    color: #fff;
}

.mb-emoji-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 2px;
    width: min(336px, 100%);
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #2f3439;
    border-radius: 10px;
    background: #15181b;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
}
.mb-emoji-panel button {
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.mb-emoji-panel button:hover,
.mb-emoji-panel button:focus-visible {
    background: #262b31;
}

.mb-cmt-notice {
    margin: 0 0 14px;
    padding: 14px;
    border: 1px dashed #30363c;
    border-radius: 8px;
    background: #0a0c0e;
    color: var(--mb-muted);
    font-size: 14px;
    text-align: center;
}
.mb-cmt-guest p {
    margin: 0 0 10px;
    color: #cfd3d7;
}
.mb-cmt-guest-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.mb-cmt-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mb-cmt-empty {
    margin: 0;
    padding: 18px 10px;
    color: var(--mb-muted);
    font-size: 14px;
    text-align: center;
}
.mb-cmt {
    padding: 12px;
    border: 1px solid #21262b;
    border-radius: 8px;
    background: #14171a;
}
.mb-cmt.is-reply {
    padding: 10px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.mb-cmt.is-new {
    animation: mb-flash 1.8s ease;
}
@keyframes mb-flash {
    from {
        box-shadow: 0 0 0 2px rgba(154, 44, 44, .8);
    }
    to {
        box-shadow: 0 0 0 2px rgba(154, 44, 44, 0);
    }
}
.mb-cmt.is-removing {
    opacity: 0;
    transition: opacity .2s ease;
}
/* THÊM MỚI (Bước 7): bình luận được mở từ link #cmt-123 (vd từ trang quản trị) */
.mb-cmt.is-target > .mb-cmt-row {
    border-radius: 8px;
    animation: mb-target 3.5s ease;
}
@keyframes mb-target {
    0%,
    60% {
        background: rgba(154, 44, 44, .22);
        box-shadow: 0 0 0 6px rgba(154, 44, 44, .22);
    }
    100% {
        background: transparent;
        box-shadow: 0 0 0 6px rgba(154, 44, 44, 0);
    }
}
.mb-cmt-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.mb-cmt-avatar {
    display: block;
    flex: 0 0 auto;
}
.mb-cmt-avatar img {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: #2a2f35;
}
.mb-cmt.is-reply .mb-cmt-avatar img {
    width: 28px;
    height: 28px;
}
.mb-cmt-main {
    flex: 1 1 auto;
    min-width: 0;
}
.mb-cmt-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
}
.mb-cmt-name,
.mb-cmt-name:visited {
    max-width: 62%;
    overflow: hidden;
    color: #7fb2b3 !important;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}
a.mb-cmt-name:hover {
    color: #a9d6d7 !important;
}
.mb-cmt-time {
    color: #80868c;
    font-size: 12px;
    white-space: nowrap;
}
.mb-cmt-menu-wrap {
    position: relative;
    margin-left: auto;
}
.mb-cmt-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #8f959b;
    cursor: pointer;
}
.mb-cmt-menu-btn:hover,
.mb-cmt-menu-btn[aria-expanded="true"] {
    background: #22272c;
    color: #fff;
}
.mb-cmt-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 25;
    min-width: 196px;
    padding: 5px;
    box-sizing: border-box;
    border: 1px solid #2f3439;
    border-radius: 8px;
    background: #181c20;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .55);
}
.mb-cmt-menu button {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #e4e7e9;
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}
.mb-cmt-menu button:hover,
.mb-cmt-menu button:focus-visible {
    background: #252a30;
}
.mb-cmt-menu [data-cmt-delete] {
    color: #ff9d9d;
}
.mb-cmt-text {
    margin-top: 3px;
    color: #e4e7e9;
    font-size: 14.5px;
    line-height: 1.55;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.mb-cmt-mention,
.mb-cmt-mention:visited {
    color: #7fb2b3 !important;
    font-weight: 600;
    text-decoration: none !important;
}
.mb-cmt-actions {
    margin-top: 3px;
}
.mb-cmt-reply-btn,
.mb-cmt-reply-btn:visited {
    padding: 2px 0;
    border: 0;
    background: transparent;
    color: #9aa0a6 !important;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    cursor: pointer;
}
.mb-cmt-reply-btn:hover {
    color: #fff !important;
}
.mb-cmt-replies {
    margin: 8px 0 0 46px;
    padding-left: 12px;
    border-left: 2px solid #262b30;
}
.mb-cmt-replies:empty {
    display: none;
}
.mb-cmt-form.is-reply {
    margin: 10px 0 2px;
}
.mb-cmt-form.is-reply .mb-cmt-input {
    min-height: 72px;
    font-size: 14.5px;
}
.mb-cmt-more {
    display: block;
    width: 100%;
    min-height: 42px;
    margin-top: 12px;
    border: 1px solid #2b3035;
    border-radius: 8px;
    background: #131619;
    color: #e4e7e9;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.mb-cmt-more:hover {
    background: #1a1e22;
}
.mb-cmt-more:disabled {
    opacity: .6;
    cursor: wait;
}
.mb-cmt-more [data-cmt-more-count] {
    color: var(--mb-muted);
    font-weight: 600;
}
/* THÊM MỚI (Bước 7): "Xem thêm N câu trả lời" dưới mỗi bình luận */
.mb-cmt-more-replies {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 2px;
    padding: 6px 12px 6px 9px;
    border: 0;
    border-radius: 16px;
    background: #1b2024;
    color: #7fb2b3;
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
}
.mb-cmt-more-replies:hover {
    background: #232a30;
    color: #a9d6d7;
}
.mb-cmt-more-replies:disabled {
    opacity: .6;
    cursor: wait;
}
.mb-cmt-more-replies .mb-ico {
    width: 16px;
    height: 16px;
}

/* --------------------------------------------------------------------------
   14. HỘP BÁO CÁO VI PHẠM
   -------------------------------------------------------------------------- */
body.mb-modal-open {
    overflow: hidden;
}
.mb-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}
.mb-modal[hidden] {
    display: none !important;
}
.mb-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .72);
}
.mb-modal-card {
    position: relative;
    width: min(480px, 100%);
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    padding: 18px;
    box-sizing: border-box;
    overflow: auto;
    border: 1px solid var(--mb-border);
    border-radius: 14px;
    background: var(--mb-panel);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}
.mb-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.mb-modal-head h3 {
    margin: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}
.mb-modal-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #aeb4ba;
    cursor: pointer;
}
.mb-modal-x:hover {
    background: #22272c;
    color: #fff;
}
.mb-modal-x .mb-ico {
    width: 20px;
    height: 20px;
}
.mb-modal-sub {
    display: -webkit-box;
    margin: 4px 0 14px;
    overflow: hidden;
    color: var(--mb-muted);
    font-size: 13.5px;
    line-height: 1.45;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.mb-report-reasons {
    display: grid;
    gap: 6px;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}
.mb-report-reasons legend {
    margin-bottom: 8px;
    padding: 0;
    color: #e7e7e7;
    font-size: 14px;
    font-weight: 700;
}
.mb-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--mb-border);
    border-radius: 9px;
    background: var(--mb-input);
    color: var(--mb-text);
    font-size: 14px;
    line-height: 1.35;
    cursor: pointer;
}
.mb-radio:hover {
    border-color: var(--mb-border-2);
}
.mb-radio.is-checked {
    border-color: rgba(154, 44, 44, .85);
    background: rgba(154, 44, 44, .12);
}
.mb-radio input {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--mb-red);
}
.mb-optional {
    color: var(--mb-muted);
    font-weight: 400;
}
.mb-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

@media (max-width: 767px) {
    .mb-watch-bar {
        margin-top: 8px;
        gap: 8px;
    }
    .mb-watch-uploader {
        width: 100%;
    }
    /* Điện thoại: 1 hàng — server · like · dislike · lượt xem · Lưu · Báo cáo.
       Ô like / dislike / lượt xem rộng theo số (không bao giờ bị cắt chữ). */
    #video-actions {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 5px !important;
    }
    #video-actions .video-action-main {
        display: flex !important;
        flex: 0 1 auto !important;
        flex-wrap: nowrap !important;
        min-width: 0 !important;
        gap: 5px !important;
        overflow-x: auto;
        scrollbar-width: none;
    }
    #video-actions .video-action-main::-webkit-scrollbar {
        display: none;
    }
    #video-actions .video-server {
        flex: 0 0 auto !important;
    }
    #video-actions .video-stats {
        display: flex !important;
        flex: 1 0 auto !important;
        gap: 5px !important;
    }
    #video-actions .video-stats > span {
        flex: 1 0 auto !important;
        width: auto !important;
    }
    #video-actions > .mb-act {
        order: 2;
        flex: 0 0 40px;
        width: 40px;
        min-height: 36px;
        padding: 0;
    }
    #video-actions > .mb-report-btn {
        order: 3;
    }
    /* Chữ "Lưu" / "Báo cáo" ẩn khỏi màn hình nhưng trình đọc màn hình vẫn đọc. */
    #video-actions > .mb-act .mb-act-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }
    .mb-act {
        min-height: 36px;
        padding: 0 6px;
        gap: 5px;
        font-size: 13px;
    }
    .mb-act .mb-ico {
        width: 16px;
        height: 16px;
    }
    .mb-cmt-box {
        margin-top: 10px;
        padding: 12px 10px;
    }
    .mb-cmt-title {
        font-size: 17px;
    }
    .mb-cmt-input {
        font-size: 16px;
    }
    .mb-cmt {
        padding: 10px;
    }
    .mb-cmt-replies {
        margin-left: 18px;
        padding-left: 10px;
    }
}
/* Màn hình nhỏ hơn 412px: thu nhỏ chữ / biểu tượng một chút để vẫn vừa 1 hàng. */
@media (max-width: 411px) {
    #video-actions,
    #video-actions .video-action-main,
    #video-actions .video-stats {
        gap: 3px !important;
    }
    #video-actions .video-stats .likes,
    #video-actions .video-stats .dislikes,
    #video-actions .video-stats .views {
        padding: 0 3px !important;
        font-size: 12.5px !important;
    }
    #video-actions .video-stats .likes:after,
    #video-actions .video-stats .dislikes:after,
    #video-actions .video-stats .views:after {
        width: 14px !important;
        height: 14px !important;
        background-size: 14px !important;
        margin-left: 2px !important;
    }
    #video-actions > .mb-act {
        flex-basis: 32px;
        width: 32px;
    }
    #video-actions .video-server {
        padding: 0 6px !important;
    }
}
@media (max-width: 339px) {
    #video-actions .video-stats .likes,
    #video-actions .video-stats .dislikes,
    #video-actions .video-stats .views {
        padding: 0 2px !important;
        font-size: 12px !important;
    }
    #video-actions > .mb-act {
        flex-basis: 30px;
        width: 30px;
    }
}

/* --------------------------------------------------------------------------
   15. TRANG ĐĂNG VIDEO
   -------------------------------------------------------------------------- */
.mb-page.mb-upload-page {
    max-width: 760px;
}
.mb-upload-page .mb-lib-bar {
    margin: 0 0 8px;
}
.mb-drop,
.mb-field > label.mb-drop {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 0;
    color: inherit;
    font-size: inherit;
    font-weight: 400;
    min-height: 88px;
    padding: 14px 16px;
    box-sizing: border-box;
    border: 1.5px dashed #3a4046;
    border-radius: 12px;
    background: rgba(255, 255, 255, .02);
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}
.mb-drop:hover,
.mb-drop.is-over {
    border-color: rgba(154, 44, 44, .75);
    background: rgba(154, 44, 44, .06);
}
.mb-file-hidden:focus-visible + .mb-drop {
    outline: 2px solid var(--mb-red);
    outline-offset: 2px;
}
.mb-drop-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(154, 44, 44, .16);
    color: #ec7a7a;
}
.mb-drop-icon svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.mb-drop-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.mb-drop-text strong {
    color: #eceef0;
    font-size: 15px;
}
.mb-drop-text small {
    color: var(--mb-muted);
    font-size: 12.5px;
    line-height: 1.4;
}
.mb-up-summary {
    margin-top: 10px;
    color: #dfe2e5;
    font-size: 13.5px;
    font-weight: 700;
}
.mb-up-files {
    max-height: 264px;
    margin: 8px 0 0;
    padding: 0;
    overflow: auto;
    border: 1px solid var(--mb-border);
    border-radius: 10px;
    list-style: none;
}
.mb-up-files:empty {
    display: none;
}
.mb-up-files li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-size: 13px;
}
.mb-up-files li + li {
    border-top: 1px solid var(--mb-border);
}
.mb-up-files li.bad {
    background: rgba(154, 44, 44, .12);
}
.mb-up-kind {
    flex: 0 0 auto;
    padding: 2px 6px;
    border-radius: 5px;
    background: #23282d;
    color: #cfd3d7;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.mb-up-kind.video {
    background: rgba(154, 44, 44, .25);
    color: #ffb8b8;
}
.mb-up-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: #e4e7e9;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mb-up-size {
    flex: 0 0 auto;
    color: var(--mb-muted);
    white-space: nowrap;
}
.mb-up-files li.bad .mb-up-size {
    color: #ff9d9d;
    white-space: normal;
    text-align: right;
}
.mb-agree {
    padding: 12px;
    border: 1px solid var(--mb-border);
    border-radius: 10px;
    background: var(--mb-input);
}
.mb-agree strong {
    color: #fff;
}
.mb-up-progress {
    margin: 2px 0 14px;
}
.mb-up-bar {
    height: 10px;
    overflow: hidden;
    border-radius: 6px;
    background: #1d2125;
}
.mb-up-bar span {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #9A2C2C, #c94a4a);
    transition: width .2s ease;
}
.mb-up-progress-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    color: #cfd3d7;
    font-size: 13px;
}
.mb-upload-form .mb-btn.block .mb-ico {
    width: 18px;
    height: 18px;
}
.mb-card-title {
    margin: 0 0 6px;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
}
.mb-up-history {
    margin: 0;
    padding: 0;
    list-style: none;
}
.mb-up-item {
    padding: 12px 0;
}
.mb-up-item + .mb-up-item {
    border-top: 1px solid var(--mb-border);
}
.mb-up-item-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}
.mb-up-id {
    color: #fff;
    font-weight: 700;
}
.mb-up-date {
    color: var(--mb-muted);
    font-size: 13px;
}
.mb-status {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}
.mb-status.pending {
    background: rgba(234, 179, 8, .14);
    color: #facc15;
}
.mb-status.done {
    background: rgba(34, 197, 94, .14);
    color: #4ade80;
}
.mb-status.rejected {
    background: rgba(239, 68, 68, .14);
    color: #f87171;
}
.mb-up-item-meta {
    margin-top: 4px;
    color: #aeb4ba;
    font-size: 13px;
}
.mb-up-note {
    margin-top: 6px;
    color: #cfd3d7;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.mb-up-reason {
    margin-top: 6px;
    color: #ffb3b3;
    font-size: 13px;
    line-height: 1.5;
}
.mb-up-clips {
    margin-top: 6px;
    color: #aeb4ba;
    font-size: 13px;
    line-height: 1.6;
}
.mb-up-clips a {
    color: #7fb2b3 !important;
    font-weight: 600;
}

/* THÊM MỚI (Bước 13): form chia 2 mục "1. Ảnh poster" + "2. Video" (mỗi mục
   đúng 1 file) + ô Tiêu đề bắt buộc; trạng thái "Đã duyệt, đang xử lý video". */
.mb-req {
    color: #f87171;
    font-weight: 700;
}
.mb-up-parts {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 14px;
}
.mb-up-parts > .mb-up-part {
    min-width: 0;
    margin-bottom: 0;
    padding: 12px;
    border: 1px solid var(--mb-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, .015);
}
.mb-field > label.mb-up-part-title {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mb-up-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--mb-red);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
}
.mb-up-part .mb-drop,
.mb-up-part.mb-field > label.mb-drop {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    min-height: 168px;
    text-align: center;
}
.mb-up-part .mb-drop-text {
    align-items: center;
    max-width: 100%;
}
.mb-up-part .mb-drop-text strong {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mb-up-preview {
    display: block;
    width: 96px;
    height: 135px;
    border-radius: 8px;
    background: #000;
    object-fit: cover;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}
.mb-drop.has-preview .mb-drop-icon {
    display: none;
}
/* Viết kèm ".mb-field > label" để thắng quy tắc viền gốc của ô chọn file. */
.mb-field > label.mb-drop:hover,
.mb-field > label.mb-drop.is-over {
    border-color: rgba(154, 44, 44, .75);
    background: rgba(154, 44, 44, .06);
}
.mb-field > label.mb-drop.has-file {
    border-style: solid;
    border-color: rgba(74, 222, 128, .45);
    background: rgba(34, 197, 94, .05);
}
.mb-field > label.mb-drop.is-bad,
.mb-field > label.mb-drop.is-invalid {
    border-style: solid;
    border-color: rgba(239, 68, 68, .85);
    background: rgba(239, 68, 68, .07);
}
.mb-drop.is-bad .mb-drop-text small {
    color: #ff9d9d;
}
.mb-upload-form.is-uploading .mb-drop {
    opacity: .7;
    cursor: default;
    pointer-events: none;
}
.mb-up-item-title {
    margin-top: 6px;
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.mb-status.processing {
    background: rgba(59, 130, 246, .15);
    color: #7cb3ff;
}
@media (max-width: 600px) {
    .mb-up-parts {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
    .mb-up-part .mb-drop,
    .mb-up-part.mb-field > label.mb-drop {
        min-height: 128px;
    }
}

/* THÊM MỚI (Bước 13): dòng nhắc ghi nhớ tài khoản ở form Đăng ký (mỗi IP chỉ
   được đăng ký tối đa 3 tài khoản trong 30 ngày). */
.mb-reg-notice {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid rgba(234, 179, 8, .35);
    border-radius: var(--mb-radius);
    background: rgba(234, 179, 8, .08);
    color: #f1e3a6;
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
}
.mb-reg-notice svg {
    flex: 0 0 18px;
    margin-top: 1px;
    fill: none;
    stroke: #facc15;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   16. TRANG CÁ NHÂN THÀNH VIÊN
   -------------------------------------------------------------------------- */
.mb-profile-head {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 18px 5px 4px;
    padding: 20px;
    border: 1px solid #24282c;
    border-radius: 12px;
    background: linear-gradient(180deg, #121519, #0e1114);
}
.mb-profile-avatar {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    background: #2a2f35;
    box-shadow: 0 0 0 3px #0e1114, 0 0 0 5px rgba(154, 44, 44, .85);
}
.mb-profile-info {
    min-width: 0;
}
.mb-profile-name {
    margin: 0;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: none;
    overflow-wrap: anywhere;
}
.mb-profile-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    color: #9aa0a6;
    font-size: 14px;
}
.mb-dot {
    flex: 0 0 9px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #6b7177;
}
.mb-profile-status.is-online {
    color: #4ade80;
}
.mb-profile-status.is-online .mb-dot {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .2);
}
.mb-profile-status.is-locked {
    color: #f87171;
}
.mb-profile-status.is-locked .mb-dot {
    background: #ef4444;
}
.mb-profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 8px;
    color: #aeb4ba;
    font-size: 13.5px;
}
.mb-profile-meta strong {
    color: #fff;
}
.mb-profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
#video-list > .mb-empty {
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
    clear: both;
}

@media (max-width: 767px) {
    .mb-profile-head {
        flex-direction: column;
        gap: 14px;
        margin: 12px 0 2px;
        padding: 18px 12px;
        text-align: center;
    }
    .mb-profile-name {
        font-size: 21px;
    }
    .mb-profile-meta,
    .mb-profile-actions {
        justify-content: center;
    }
    .mb-drop {
        min-height: 80px;
        padding: 12px;
    }
}

/* --------------------------------------------------------------------------
   17. KHUNG THÔNG TIN THÀNH VIÊN (THÊM MỚI Bước 7)
   Bấm ảnh / tên thành viên (bình luận, @tên, "Đăng bởi", tên dưới poster)
   -> hiện khung có nút "Xem trang cá nhân" và nút đóng.
   ĐÃ SỬA (Bước 8): khung luôn nằm giữa màn hình (position: fixed), cuộn trang
   lên xuống thì khung đứng yên, nội dung phía sau vẫn cuộn bình thường.
   -------------------------------------------------------------------------- */
.mb-mcard {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 2147482000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    width: min(360px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    padding: 20px 16px 16px;
    border: 1px solid #2a2f35;
    border-radius: 14px;
    background: linear-gradient(180deg, #15191d, #0f1215);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
    color: var(--mb-text);
    text-align: center;
    transform: translate(-50%, -50%);
    animation: mb-pop .15s ease;
}
@keyframes mb-pop {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.96);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}
.mb-mcard:focus {
    outline: none;
}
.mb-mcard-x {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #20252a;
    color: #cfd3d6;
    cursor: pointer;
}
.mb-mcard-x:hover,
.mb-mcard-x:focus-visible {
    background: #2a3036;
    color: #fff;
}
.mb-mcard-x .mb-ico {
    width: 18px;
    height: 18px;
}
.mb-mcard-avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    background: #2a2f35;
    box-shadow: 0 0 0 3px #12161a, 0 0 0 5px rgba(154, 44, 44, .85);
}
.mb-mcard-name {
    max-width: 100%;
    margin-top: 6px;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.mb-mcard .mb-profile-status {
    margin-top: 0;
    justify-content: center;
}
.mb-mcard-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 14px;
    color: #aeb4ba;
    font-size: 13.5px;
}
.mb-mcard-meta strong {
    color: #fff;
}
.mb-mcard .mb-btn.mb-mcard-link {
    min-height: 40px;
    margin-top: 6px;
    padding: 8px 18px;
    font-size: 14.5px;
}
.mb-mcard.is-loading .mb-mcard-avatar {
    opacity: .5;
}
.mb-mcard-error {
    color: #ffb3b3;
    font-size: 13.5px;
}

/* --------------------------------------------------------------------------
   18. Ô "CLIP CỦA THÀNH VIÊN" cuối lưới thể loại (THÊM MỚI Bước 10)
   Cùng kích thước / màu với các ô thể loại; đang mở trang này thì ô đỏ
   (đoạn script trong require/header.php tự đánh dấu theo địa chỉ).
   -------------------------------------------------------------------------- */
#category-nav .category-nav-member .category-nav-ico {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
#category-nav .category-nav-member .category-nav-content {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
/* Chữ dài xuống 2 dòng mà ô vẫn cao bằng các ô thể loại khác (40px). */
#category-nav .category-nav-member {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}
#category-nav .category-nav-member .category-nav-label {
    line-height: 1.15 !important;
}
@media (max-width: 767px) {
    #category-nav .category-nav-member .category-nav-ico {
        flex-basis: 15px;
        width: 15px;
        height: 15px;
    }
    #category-nav .category-nav-member .category-nav-content {
        gap: 5px;
    }
}

/* --------------------------------------------------------------------------
   19. THÔNG BÁO "CHỈ THÀNH VIÊN MỚI ĐƯỢC XEM" (THÊM MỚI Bước 10)
   view/member-gate.php: thông báo + khối Đăng nhập / Đăng ký.
   -------------------------------------------------------------------------- */
.mb-gate-head {
    margin: 0 calc(var(--mb-pad) * -1);
    padding: 22px var(--mb-pad) 18px;
    border-bottom: 1px solid var(--mb-border);
    background: linear-gradient(180deg, rgba(154, 44, 44, .14), rgba(154, 44, 44, 0));
    text-align: center;
}
.mb-gate-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(154, 44, 44, .18);
    box-shadow: 0 0 0 1px rgba(214, 72, 72, .45);
    color: #f1b5b5;
}
.mb-gate-icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.mb-gate-title {
    margin: 12px 0 6px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.3;
    text-transform: uppercase;
}
.mb-gate-text {
    margin: 0;
    color: #c9ced2;
    font-size: 14.5px;
    line-height: 1.55;
}
.mb-gate-text strong {
    color: #fff;
}
.mb-gate-clip {
    margin: 8px auto 0;
    max-width: 100%;
    overflow: hidden;
    color: var(--mb-muted);
    font-size: 13px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mb-gate .mb-auth-tabs {
    margin-top: 0;
}
.mb-gate-panel[hidden] {
    display: none !important;
}

@media (max-width: 600px) {
    .mb-gate-head {
        padding-top: 18px;
        padding-bottom: 16px;
    }
    .mb-gate-icon {
        width: 46px;
        height: 46px;
    }
    .mb-gate-icon svg {
        width: 23px;
        height: 23px;
    }
    .mb-gate-title {
        font-size: 16.5px;
    }
    .mb-gate-text {
        font-size: 14px;
    }
}

/* --------------------------------------------------------------------------
   20. TỔNG LƯỢT XEM / LƯỢT THÍCH (THÊM MỚI Bước 10)
   Trang cá nhân và khung thông tin thành viên: dòng thứ 2 dưới "Tham gia ...
   / ... video đã đăng" (chỉ hiện khi đã đăng ít nhất 1 video).
   -------------------------------------------------------------------------- */
.mb-profile-meta.mb-profile-stats {
    margin-top: 5px;
}
.mb-mcard-meta.mb-mcard-stats {
    margin-top: -2px;
}
/* Phần tử đang ẩn trong khung (dòng chờ tải, nút khi không tìm thấy...). */
.mb-mcard [hidden] {
    display: none !important;
}

/* --------------------------------------------------------------------------
   21. CHẶN MENU BẤM GIỮ / CHUỘT PHẢI TRÊN ẢNH ĐẠI DIỆN (THÊM MỚI Bước 12)
   - iPhone / iPad: -webkit-touch-callout: none -> bấm giữ ảnh không hiện
     menu "Thêm vào Ảnh / Sao chép / Chia sẻ / Mở trong thẻ mới".
   - Không bôi chọn được ảnh, không kéo ảnh ra ngoài (Chrome / Safari).
   - Android và máy tính chặn thêm bằng static/js/member.js (mục "CHẶN MENU
     CHUỘT PHẢI / BẤM GIỮ"). Danh sách ảnh ở đây phải giống biến AVATAR_IMG
     trong member.js.
   - (Bước 14 - Phần 2) Thêm ảnh đại diện ở trang Tin nhắn.
   - (Bước 14 - Phần 3) Thêm ảnh ở trang Bạn bè và danh sách tài khoản đã chặn.
   - (Bước 14 - Phần 3d) Thêm ảnh ở ô chọn ảnh đại diện của form đăng ký.
   -------------------------------------------------------------------------- */
.nav-avatar,
.mb-avatar-lg,
.mb-profile-avatar,
.mb-cmt-avatar,
.mb-cmt-avatar img,
.mb-mcard-avatar,
.video-uploader-avatar,
.mb-watch-uploader img,
.mb-noti-avatar img,
.mb-react-avatar img,
.mb-inbox-avatar img,
.mb-chat-avatar,
.mb-chat-intro-avatar,
.mb-msg-avatar img,
.mb-friend-avatar img,
.mb-blocked-avatar,
.mb-avpick-opt img,
.mb-avpick-preview {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* --------------------------------------------------------------------------
   22. THÔNG BÁO (THÊM MỚI Bước 14)
   - Chấm xanh ở góc trên bên phải ảnh đại diện (menu trên cùng) khi có
     thông báo chưa xem (require/header.php, member.js bật / tắt).
   - Mục "Thông báo" ở trang tài khoản: số chưa xem nền xanh.
   - Trang /tai-khoan/thong-bao (view/member-notifications.php).
   - BỔ SUNG 21-10-2026: ảnh / tên thành viên trong mỗi dòng là nút mở khung
     thông tin thành viên; tên clip là link chính phủ cả dòng (bấm chỗ khác
     của dòng = mở clip); nút "N người khác" mở hộp danh sách tất cả người
     thích / không thích (.mb-react-*); icon không thích (xám), bình luận.
   -------------------------------------------------------------------------- */
:root {
    --mb-blue: #2d8cff;
}
.nav-avatar-box {
    position: relative;
    display: inline-flex;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-right: 6px;
}
.nav-avatar-box .nav-avatar {
    margin-right: 0;
}
.nav-dot {
    position: absolute;
    top: -3px;
    right: -4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--mb-blue);
    box-shadow: 0 0 0 2px var(--mb-bg);
    pointer-events: none;
}
.nav-dot[hidden] {
    display: none !important;
}
#primary-nav .menu li a.nav-selected .nav-dot {
    box-shadow: 0 0 0 2px var(--mb-red);
}

.mb-badge.mb-badge-blue {
    background: var(--mb-blue);
    color: #fff;
}

.mb-page.mb-noti-page {
    max-width: 640px;
}
.mb-noti-bar {
    margin: 0 2px 8px;
}
.mb-noti-count {
    color: #8fc1ff;
    font-size: 13px;
    font-weight: 600;
}
.mb-noti-card {
    padding: 18px 0 6px;
    overflow: hidden;
}
.mb-noti-card .mb-title {
    margin-bottom: 12px;
    padding: 0 16px;
}
.mb-noti-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.mb-noti-row {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--mb-border);
}
.mb-noti-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    color: var(--mb-text);
    transition: background .15s ease;
}
.mb-noti-item:hover,
.mb-noti-item:focus-within {
    background: #171b1f;
}
.mb-noti-item.is-new {
    background: rgba(45, 140, 255, .09);
}
.mb-noti-item.is-new:hover,
.mb-noti-item.is-new:focus-within {
    background: rgba(45, 140, 255, .15);
}
/* Tên clip = link chính của dòng: lớp phủ trong suốt phủ cả dòng, bấm chỗ
   trống / trích dẫn / ảnh clip cũng mở clip. Ảnh, tên thành viên và nút
   "N người khác" nằm trên lớp phủ (z-index 2) nên bấm được riêng. */
.mb-noti-link,
.mb-noti-link:visited {
    color: inherit !important;
    text-decoration: none !important;
}
.mb-noti-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}
.mb-noti-link:focus-visible {
    outline: none;
}
.mb-noti-link:focus-visible::after {
    outline: 2px solid var(--mb-blue);
    outline-offset: -2px;
}
.mb-noti-avatar {
    position: relative;
    z-index: 2;
    display: block;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
}
.mb-noti-name,
.mb-noti-name:visited {
    position: relative;
    z-index: 2;
    color: #fff !important;
    font-weight: 700;
    text-decoration: none !important;
}
a.mb-noti-name:hover,
a.mb-noti-name:focus-visible {
    text-decoration: underline !important;
}
.mb-noti-more {
    position: relative;
    z-index: 2;
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font: inherit;
    font-weight: 700;
    line-height: inherit;
    cursor: pointer;
}
.mb-noti-more:hover,
.mb-noti-more:focus-visible {
    text-decoration: underline;
}
.mb-noti-avatar img {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: #2a2f35;
}
.mb-noti-kind {
    position: absolute;
    right: -3px;
    bottom: -3px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--mb-panel);
}
.mb-noti-item.is-new .mb-noti-kind {
    box-shadow: 0 0 0 2px #15202c;
}
.mb-noti-kind.reply,
.mb-noti-kind.comment,
.mb-noti-kind.vreply {
    background: #1f9d55;
}
.mb-noti-kind.like {
    background: #d23c3c;
}
.mb-noti-kind.dislike {
    background: #5b636d;
}
.mb-noti-kind svg {
    width: 12px;
    height: 12px;
    fill: #fff;
    stroke: none;
}
.mb-noti-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.mb-noti-text,
.mb-noti-quote,
.mb-noti-time {
    margin: 0;
}
.mb-noti-text {
    font-size: 14.5px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.mb-noti-text b {
    color: #fff;
    font-weight: 700;
}
.mb-noti-quote {
    display: -webkit-box;
    overflow: hidden;
    color: #c3c8cd;
    font-size: 13.5px;
    line-height: 1.45;
    overflow-wrap: anywhere;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.mb-noti-time {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--mb-muted);
    font-size: 12.5px;
}
.mb-noti-new {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--mb-blue);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}
.mb-noti-thumb {
    flex: 0 0 40px;
    width: 40px;
    height: 56px;
    border-radius: 6px;
    object-fit: cover;
    background: #23282d;
}
.mb-noti-note {
    margin: 0;
    padding: 12px 16px 8px;
    border-top: 1px solid var(--mb-border);
    color: var(--mb-muted);
    font-size: 12.5px;
    line-height: 1.5;
    text-align: center;
}
.mb-noti-empty {
    padding: 22px 18px 26px;
    border-top: 1px solid var(--mb-border);
    line-height: 1.6;
}
/* Hộp danh sách người thích / không thích. Nằm DƯỚI khung thông tin thành
   viên (.mb-mcard, z-index 2147482000) để bấm 1 người thì khung hiện đè lên. */
.mb-modal.mb-react-modal {
    z-index: 2147481500;
}
.mb-modal-card.mb-react-card {
    display: flex;
    flex-direction: column;
    width: min(420px, 100%);
    max-height: min(640px, calc(100vh - 32px));
    max-height: min(640px, calc(100dvh - 32px));
    padding: 14px 0 10px;
    overflow: hidden;
}
.mb-react-card:focus {
    outline: none;
}
/* Chỉ danh sách co lại / cuộn; tiêu đề, tên clip, số người, nút giữ nguyên cao. */
.mb-react-card > * {
    flex-shrink: 0;
}
.mb-react-card > .mb-react-list {
    flex-shrink: 1;
}
.mb-react-card .mb-modal-head {
    padding: 0 10px 0 18px;
}
.mb-react-card .mb-modal-sub {
    margin: 0 18px 4px;
}
.mb-react-count {
    padding: 0 18px 10px;
    color: #8fc1ff;
    font-size: 13px;
    font-weight: 600;
}
.mb-react-list {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 1px solid var(--mb-border);
    list-style: none;
}
.mb-react-list li {
    margin: 0;
    padding: 0;
}
.mb-react-row,
.mb-react-row:visited {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 18px;
    color: var(--mb-text) !important;
    text-decoration: none !important;
    transition: background .15s ease;
}
a.mb-react-row:hover,
a.mb-react-row:focus-visible {
    background: #171b1f;
}
.mb-react-avatar {
    position: relative;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
}
.mb-react-avatar img {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: #2a2f35;
}
.mb-react-avatar .mb-noti-kind {
    width: 18px;
    height: 18px;
}
.mb-react-avatar .mb-noti-kind svg {
    width: 11px;
    height: 11px;
}
.mb-react-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}
.mb-react-name {
    overflow: hidden;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mb-react-locked {
    color: #ff9d9d;
    font-size: 12px;
}
.mb-react-time {
    flex: 0 0 auto;
    color: var(--mb-muted);
    font-size: 12.5px;
}
.mb-react-status {
    padding: 14px 18px;
    color: var(--mb-muted);
    font-size: 14px;
    text-align: center;
}
.mb-react-status[hidden],
.mb-react-more[hidden] {
    display: none !important;
}
.mb-btn.mb-react-more {
    align-self: center;
    margin: 8px 18px 2px;
}
@media (max-width: 480px) {
    .mb-page.mb-noti-page {
        padding: 0 6px;
    }
    .mb-noti-item {
        gap: 10px;
        padding: 11px 12px;
    }
    .mb-noti-card .mb-title {
        font-size: 18px;
    }
    .mb-noti-text {
        font-size: 14px;
    }
    .mb-noti-quote {
        font-size: 13px;
    }
}

/* --------------------------------------------------------------------------
   23. TIN NHẮN (THÊM MỚI Bước 14 - Phần 2)
   - Chấm ĐỎ có số (tin nhắn chưa đọc) ở góc trên bên phải khối thành viên
     trên menu (khác chấm xanh thông báo ở góc ảnh đại diện).
   - Trang tài khoản: mục "Tin nhắn" (số nền đỏ) + ô "Cho phép nhắn tin".
   - Trang cá nhân / khung thông tin thành viên: nút "Nhắn tin".
   - Hộp thư /tai-khoan/tin-nhan (.mb-inbox-*), trò chuyện
     /tai-khoan/tin-nhan/<tên> (.mb-chat-*, .mb-msg-*): tin của mình bên phải
     nền đỏ, của người kia bên trái nền xám; bấm giữ / chuột phải -> menu
     (.mb-chat-menu), xem ảnh lớn (.mb-photo-view).
   -------------------------------------------------------------------------- */
:root {
    --mb-msg-red: #f02849;
    --mb-bubble-mine: #9A2C2C;
    --mb-bubble-theirs: #262b31;
}

/* Chấm đỏ có số ở khối thành viên (menu trên cùng) */
#header > .site-header #primary-nav .menu li a[data-nav-key="account"] {
    position: relative;
}
.nav-msg-badge {
    position: absolute;
    top: -7px;
    right: -5px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 10px;
    background: var(--mb-msg-red);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--mb-bg);
    pointer-events: none;
}
.nav-msg-badge[hidden] {
    display: none !important;
}

/* Trang tài khoản: số tin chưa đọc + ô "Cho phép nhắn tin" */
.mb-badge.mb-badge-red {
    background: var(--mb-msg-red);
    color: #fff;
}
.mb-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 16px;
    padding: 13px 15px;
    border: 1px solid var(--mb-border);
    border-radius: 12px;
    background: var(--mb-input);
}
.mb-switch-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.mb-switch-title {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}
.mb-switch-row .mb-hint {
    margin: 0;
}
.mb-switch {
    position: relative;
    flex: 0 0 auto;
    width: 48px;
    height: 28px;
    cursor: pointer;
}
.mb-switch input {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.mb-switch-ui {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: #3a4047;
    transition: background .18s ease;
    pointer-events: none;
}
.mb-switch-ui::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    transition: transform .18s ease;
}
.mb-switch input:checked + .mb-switch-ui {
    background: #1f9d55;
}
.mb-switch input:checked + .mb-switch-ui::after {
    transform: translateX(20px);
}
.mb-switch input:focus-visible + .mb-switch-ui {
    outline: 2px solid var(--mb-blue);
    outline-offset: 2px;
}
.mb-switch input:disabled + .mb-switch-ui {
    opacity: .6;
}

/* Nút "Nhắn tin" (trang cá nhân, khung thông tin thành viên) */
.mb-btn.is-disabled,
.mb-btn.is-disabled:hover {
    border-color: var(--mb-border-2);
    background: transparent;
    color: var(--mb-muted) !important;
    cursor: not-allowed;
    opacity: .8;
}
.mb-msg-btn .mb-ico {
    width: 18px;
    height: 18px;
}
.mb-mcard-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 6px;
}
.mb-mcard .mb-mcard-actions .mb-btn {
    flex: 0 1 auto;
    min-width: 0;
    min-height: 40px;
    margin-top: 0;
    padding: 8px 16px;
    font-size: 14.5px;
}
.mb-mcard-msg[hidden] {
    display: none !important;
}

/* ---- Hộp thư ---- */
.mb-page.mb-msg-page {
    max-width: 640px;
}
.mb-msg-bar {
    margin: 0 2px 8px;
}
.mb-inbox {
    padding: 18px 0 6px;
    overflow: hidden;
}
.mb-inbox .mb-title {
    margin-bottom: 12px;
    padding: 0 16px;
}
.mb-msg-notice {
    margin: 0 14px 12px;
    padding: 12px 14px;
    border: 1px solid rgba(240, 40, 73, .35);
    border-radius: 10px;
    background: rgba(240, 40, 73, .08);
    color: #f3d9dd;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}
.mb-msg-notice p {
    margin: 0 0 8px;
}
.mb-msg-notice[hidden] {
    display: none !important;
}
.mb-inbox-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.mb-inbox-row {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--mb-border);
}
.mb-inbox-item,
.mb-inbox-item:visited {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    color: var(--mb-text) !important;
    text-decoration: none !important;
    transition: background .15s ease;
}
a.mb-inbox-item:hover,
a.mb-inbox-item:focus-visible {
    background: #171b1f;
}
.mb-inbox-avatar {
    position: relative;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
}
.mb-inbox-avatar img {
    display: block;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    background: #2a2f35;
}
.mb-inbox-online,
.mb-chat-online {
    position: absolute;
    right: 1px;
    bottom: 1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #31c46d;
    box-shadow: 0 0 0 2px var(--mb-panel);
}
.mb-chat-online[hidden] {
    display: none !important;
}
.mb-inbox-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.mb-inbox-top,
.mb-inbox-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.mb-inbox-name {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    color: #fff;
    font-size: 15.5px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mb-inbox-tag {
    flex: 0 0 auto;
    padding: 1px 6px;
    border-radius: 6px;
    background: #3a2226;
    color: #ff9d9d;
    font-size: 11px;
    font-weight: 700;
}
.mb-inbox-time {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--mb-muted);
    font-size: 12.5px;
}
.mb-inbox-preview {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: #aeb4ba;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mb-inbox-preview.is-muted {
    font-style: italic;
}
.mb-inbox-row.is-unread .mb-inbox-preview {
    color: #fff;
    font-weight: 700;
}
.mb-inbox-row.is-unread .mb-inbox-time {
    color: #ff8a9a;
    font-weight: 700;
}
.mb-inbox-unread {
    flex: 0 0 auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: 10px;
    background: var(--mb-msg-red);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}
.mb-inbox-empty {
    padding: 22px 18px 26px;
    border-top: 1px solid var(--mb-border);
    line-height: 1.6;
}
.mb-inbox-empty[hidden],
.mb-inbox-more[hidden] {
    display: none !important;
}
.mb-inbox-foot {
    padding: 4px 0;
    text-align: center;
}

/* ---- Trò chuyện ---- */
.mb-page.mb-chat-page {
    max-width: 760px;
}
.mb-chat {
    position: relative;
    display: flex;
    flex-direction: column;
    /* --mb-chat-ad: chiều cao dải quảng cáo dính đáy màn hình (member.js tự đo) */
    height: min(760px, calc(100vh - 32px - var(--mb-chat-ad, 0px)));
    height: min(760px, calc(100dvh - 32px - var(--mb-chat-ad, 0px)));
    min-height: 420px;
    overflow: hidden;
    border: 1px solid var(--mb-border);
    border-radius: 14px;
    background: var(--mb-panel);
}
.mb-chat.is-drop {
    box-shadow: inset 0 0 0 2px var(--mb-blue);
}
.mb-chat-head {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    height: auto;
    gap: 4px;
    padding: 8px 10px 8px 6px;
    border-bottom: 1px solid var(--mb-border);
    background: #15191d;
}
.mb-chat-back,
.mb-chat-back:visited {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #cfd3d6 !important;
}
.mb-chat-back:hover,
.mb-chat-back:focus-visible {
    background: #20252a;
    color: #fff !important;
}
.mb-chat-back .mb-ico {
    width: 24px;
    height: 24px;
    stroke-width: 2.2;
}
.mb-chat-peer,
.mb-chat-peer:visited {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 2px 8px 2px 2px;
    border-radius: 10px;
    color: inherit !important;
    text-decoration: none !important;
}
.mb-chat-peer:hover,
.mb-chat-peer:focus-visible {
    background: #1b2025;
}
.mb-chat-peer-avatar {
    position: relative;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
}
.mb-chat-avatar {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: #2a2f35;
}
.mb-chat-head .mb-chat-online {
    right: 0;
    bottom: 0;
    width: 11px;
    height: 11px;
    box-shadow: 0 0 0 2px #15191d;
}
.mb-chat-peer-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.mb-chat-name {
    overflow: hidden;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mb-chat-status {
    overflow: hidden;
    color: var(--mb-muted);
    font-size: 12.5px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mb-chat-status.is-locked {
    color: #ff9d9d;
}
.mb-chat-main {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}
.mb-chat-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 10px 12px 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.mb-chat-older {
    margin: 2px 0 8px;
    text-align: center;
}
.mb-chat-older[hidden],
.mb-chat-intro[hidden] {
    display: none !important;
}
.mb-chat-older-btn {
    padding: 6px 14px;
    border: 1px solid var(--mb-border-2);
    border-radius: 16px;
    background: transparent;
    color: #cfd3d6;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.mb-chat-older-btn:hover,
.mb-chat-older-btn:focus-visible {
    border-color: var(--mb-red);
    color: #fff;
}
.mb-chat-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 34px 10px 18px;
    color: var(--mb-muted);
    text-align: center;
}
.mb-chat-intro-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    background: #2a2f35;
}
.mb-chat-intro-name {
    color: #fff;
    font-size: 17px;
    font-weight: 700;
}
.mb-chat-intro p {
    margin: 2px 0 0;
    font-size: 14px;
}
.mb-chat-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.mb-msg {
    margin: 2px 0 0;
    padding: 0;
}
.mb-msg.is-first {
    margin-top: 8px;
}
.mb-msg:first-child {
    margin-top: 0;
}
.mb-msg-sep {
    margin: 14px 0 10px;
    color: #8a9097;
    font-size: 12px;
    text-align: center;
}
.mb-msg-sep[hidden],
.mb-msg-meta[hidden] {
    display: none !important;
}
.mb-msg-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}
.mb-msg.is-mine .mb-msg-row {
    justify-content: flex-end;
}
.mb-msg-avatar {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    visibility: hidden;
}
.mb-msg.is-last .mb-msg-avatar {
    visibility: visible;
}
.mb-msg-avatar img {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    background: #2a2f35;
}
.mb-msg-bubble {
    max-width: min(76%, 520px);
    padding: 8px 12px;
    box-sizing: border-box;
    border-radius: 18px;
    background: var(--mb-bubble-theirs);
    color: #eef0f2;
    font-size: 15px;
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    outline: none;
    transition: filter .15s ease;
}
.mb-msg-bubble:focus-visible {
    box-shadow: 0 0 0 2px var(--mb-blue);
}
.mb-msg.is-mine .mb-msg-bubble {
    background: var(--mb-bubble-mine);
    color: #fff;
}
.mb-msg.is-theirs:not(.is-first) .mb-msg-bubble {
    border-top-left-radius: 6px;
}
.mb-msg.is-theirs:not(.is-last) .mb-msg-bubble {
    border-bottom-left-radius: 6px;
}
.mb-msg.is-mine:not(.is-first) .mb-msg-bubble {
    border-top-right-radius: 6px;
}
.mb-msg.is-mine:not(.is-last) .mb-msg-bubble {
    border-bottom-right-radius: 6px;
}
.mb-msg .mb-msg-bubble.is-photo {
    padding: 0;
    overflow: hidden;
    border-radius: 14px;
    background: transparent;
    line-height: 0;
}
.mb-msg-photo {
    display: block;
}
.mb-msg-photo img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 14px;
    background: #20252a;
    object-fit: cover;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.mb-msg .mb-msg-bubble.is-hidden {
    border: 1px dashed #3a4047;
    background: transparent;
    color: var(--mb-muted);
    font-size: 13.5px;
    font-style: italic;
}
.mb-msg-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px 10px;
    margin: 3px 4px 0;
    color: #8a9097;
    font-size: 12px;
}
.mb-msg.is-theirs .mb-msg-meta {
    justify-content: flex-start;
    margin-left: 40px;
}
.mb-msg.is-seen .mb-msg-meta {
    color: #aeb4ba;
}
.mb-msg.is-pending .mb-msg-bubble {
    opacity: .65;
}
.mb-msg.is-failed .mb-msg-bubble {
    opacity: .75;
    box-shadow: 0 0 0 1px #d9214e;
}
.mb-msg.is-failed .mb-msg-meta {
    color: #ff9d9d;
}
.mb-msg-act {
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}
.mb-msg.is-pressed .mb-msg-bubble {
    filter: brightness(1.18);
}
/* Bấm giữ tin của người kia trên điện thoại: hiện menu của web (Sao chép /
   Báo cáo) thay cho menu chọn chữ / lưu ảnh của trình duyệt. */
.mb-msg.is-theirs .mb-msg-photo,
.mb-msg.is-theirs .mb-msg-photo img {
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
}
@media (hover: none) {
    .mb-msg.is-theirs .mb-msg-bubble {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
}
.mb-chat-pill {
    position: absolute;
    bottom: 10px;
    left: 50%;
    z-index: 5;
    padding: 7px 14px;
    border: 0;
    border-radius: 16px;
    background: var(--mb-blue);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
    transform: translateX(-50%);
    cursor: pointer;
}
.mb-chat-pill[hidden] {
    display: none !important;
}
.mb-chat-blocked {
    flex: 0 0 auto;
    margin: 0;
    padding: 14px 16px;
    border-top: 1px solid var(--mb-border);
    background: #111417;
    color: #cfd3d6;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}
.mb-chat-blocked[hidden],
.mb-chat-form[hidden],
.mb-chat-attach[hidden],
.mb-chat-count[hidden] {
    display: none !important;
}
.mb-chat-form {
    position: relative;
    flex: 0 0 auto;
    padding: 8px 10px 10px 6px;
    border-top: 1px solid var(--mb-border);
    background: #15191d;
}
.mb-chat-row {
    display: flex;
    align-items: flex-end;
    gap: 4px;
}
.mb-chat-tool {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #cfd3d6;
    cursor: pointer;
}
.mb-chat-tool:hover,
.mb-chat-tool:focus-visible {
    background: #23282d;
    color: #fff;
}
.mb-chat-tool .mb-ico {
    width: 24px;
    height: 24px;
}
.mb-chat-field {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    align-items: flex-end;
    min-width: 0;
    margin: 0 2px;
    border: 1px solid var(--mb-border-2);
    border-radius: 20px;
    background: var(--mb-input);
}
.mb-chat-field:focus-within {
    border-color: #4c545c;
}
.mb-chat-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    min-height: 40px;
    max-height: 132px;
    margin: 0;
    padding: 9px 4px 9px 14px;
    box-sizing: border-box;
    border: 0;
    background: transparent;
    color: var(--mb-text);
    font: inherit;
    font-size: 16px;
    line-height: 22px;
    resize: none;
    outline: none;
    overflow-y: auto;
}
.mb-chat-input::placeholder {
    color: #737a81;
}
.mb-chat-tool.mb-chat-emoji-btn {
    width: 38px;
    height: 38px;
}
.mb-chat-send {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--mb-red);
    color: #fff;
    cursor: pointer;
}
.mb-chat-send:hover,
.mb-chat-send:focus-visible {
    background: var(--mb-red-hover);
}
.mb-chat-send .mb-ico {
    width: 22px;
    height: 22px;
    margin-left: 2px;
}
.mb-chat-count {
    margin: 4px 50px 0 0;
    color: var(--mb-muted);
    font-size: 12px;
    text-align: right;
}
.mb-chat-count.over {
    color: #ff8a8a;
    font-weight: 700;
}
.mb-chat-attach {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 2px 4px 8px;
}
.mb-chat-thumb {
    position: relative;
    width: 64px;
    height: 64px;
    overflow: hidden;
    border-radius: 10px;
    background: #20252a;
}
.mb-chat-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mb-chat-thumb-x {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .72);
    color: #fff;
    font-size: 16px;
    line-height: 22px;
    cursor: pointer;
}
.mb-chat-emoji-panel {
    position: absolute;
    right: 10px;
    bottom: calc(100% + 6px);
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 2px;
    width: min(336px, calc(100% - 20px));
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #2f3439;
    border-radius: 10px;
    background: #15181b;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
}
.mb-chat-emoji-panel[hidden] {
    display: none !important;
}
.mb-chat-emoji-panel button {
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.mb-chat-emoji-panel button:hover,
.mb-chat-emoji-panel button:focus-visible {
    background: #262b31;
}

/* Menu bấm giữ / chuột phải */
.mb-chat-menu-layer {
    position: fixed;
    inset: 0;
    z-index: 2147482500;
}
.mb-chat-menu-bg {
    position: absolute;
    inset: 0;
}
.mb-chat-menu-layer.is-sheet .mb-chat-menu-bg {
    background: rgba(0, 0, 0, .55);
}
.mb-chat-menu {
    position: absolute;
    min-width: 190px;
    padding: 6px;
    box-sizing: border-box;
    border: 1px solid #2f3439;
    border-radius: 12px;
    background: #15191d;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .6);
}
.mb-chat-menu-layer.is-sheet .mb-chat-menu {
    right: 8px;
    bottom: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    left: 8px;
    min-width: 0;
    padding: 8px;
    border-radius: 16px;
}
.mb-chat-menu-item {
    display: block;
    width: 100%;
    padding: 11px 14px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mb-text);
    font: inherit;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
}
.mb-chat-menu-layer.is-sheet .mb-chat-menu-item {
    padding: 14px;
    font-size: 16px;
    text-align: center;
}
.mb-chat-menu-item:hover,
.mb-chat-menu-item:focus-visible {
    background: #23282d;
    outline: none;
}
.mb-chat-menu-item.is-danger {
    color: #ff8a8a;
}

/* Xem ảnh lớn */
.mb-photo-view {
    position: fixed;
    inset: 0;
    z-index: 2147483200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 56px 12px 16px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, .92);
}
.mb-photo-view img {
    max-width: 100%;
    max-height: calc(100% - 40px);
    border-radius: 6px;
    object-fit: contain;
}
.mb-photo-x {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    cursor: pointer;
}
.mb-photo-x .mb-ico {
    width: 22px;
    height: 22px;
}
.mb-photo-open,
.mb-photo-open:visited {
    color: #cfd3d6 !important;
    font-size: 14px;
    text-decoration: underline !important;
}

@media (max-width: 767px) {
    .mb-page.mb-chat-page {
        margin: 8px auto 12px;
        padding: 0 6px;
    }
    .mb-chat {
        height: calc(100vh - 16px - var(--mb-chat-ad, 0px));
        height: calc(100dvh - 16px - var(--mb-chat-ad, 0px));
        min-height: 360px;
        border-radius: 12px;
    }
    .mb-chat-body {
        padding: 8px 8px 6px;
    }
    .mb-msg-bubble {
        max-width: 80%;
    }
}
@media (max-width: 480px) {
    .mb-page.mb-msg-page {
        padding: 0 6px;
    }
    .mb-inbox-item {
        gap: 10px;
        padding: 10px 12px;
    }
    .mb-inbox .mb-title {
        font-size: 18px;
    }
    .mb-chat-form {
        padding: 6px 6px 8px 2px;
    }
    .mb-chat-tool {
        width: 38px;
    }
}

/* --------------------------------------------------------------------------
   24. TRANG CÁ NHÂN MỚI, BẠN BÈ, CHẶN, CÀI ĐẶT (THÊM MỚI Bước 14 - Phần 3)
   - Chấm đỏ tin nhắn trên máy tính (ảnh 6): khối tài khoản ở bản máy tính
     cắt phần thò ra ngoài (overflow: hidden) nên chấm đặt lên trên bị mất
     nửa trên -> trên máy tính đưa chấm vào trong góc phải của khối.
   - Trang cá nhân (.mb-profile-head): ảnh đại diện ở giữa, các ô bo tròn
     (.mb-tile) cho trang của chính mình, nút Kết bạn / Nhắn tin / ⋯ cho
     trang người khác (menu .mb-more-menu).
   - Khung thông tin thành viên: 3 nút Kết bạn | Xem trang cá nhân | Nhắn tin.
   - Trang Bạn bè (.mb-friend-*), Cài đặt (.mb-blocked-*), hộp hỏi lại
     (.mb-confirm-*), dòng lời mời kết bạn ở trang Thông báo.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .nav-msg-badge {
        top: 3px;
        right: 3px;
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        border-radius: 9px;
        font-size: 10.5px;
        box-shadow: none;
    }
    /* Chừa chỗ bên phải cho chấm (trình duyệt cũ không hiểu :has thì chấm
       vẫn hiện đủ, chỉ có thể đè sát chữ khi tên tài khoản rất dài). */
    #header > .site-header #primary-nav .menu li a[data-nav-key="account"]:has(.nav-msg-badge:not([hidden])) {
        padding-right: 28px !important;
    }
}

/* ---- Trang cá nhân ---- */
.mb-profile-head {
    display: block;
    padding: 22px 18px 20px;
}
.mb-profile-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}
.mb-profile-top .mb-profile-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
}
.mb-profile-top .mb-profile-meta {
    justify-content: center;
}
.mb-profile-avatar-wrap {
    position: relative;
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    border-radius: 50%;
}
.mb-profile-avatar-wrap .mb-profile-avatar {
    display: block;
}
.mb-profile-avatar-wrap.is-loading .mb-avatar-loading {
    display: block;
}
.mb-profile-camera {
    position: absolute;
    right: -4px;
    bottom: -2px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    box-sizing: border-box;
    border: 2px solid #0e1114;
    border-radius: 50%;
    background: #2a3037;
    color: #fff;
    cursor: pointer;
    transition: background .15s ease;
}
.mb-profile-camera:hover {
    background: var(--mb-red);
}
.mb-file-hidden:focus-visible + .mb-profile-camera {
    outline: 2px solid var(--mb-blue);
    outline-offset: 2px;
}
.mb-profile-friends,
.mb-profile-friends:visited {
    color: inherit !important;
    text-decoration: none !important;
}
.mb-profile-friends:hover {
    text-decoration: underline !important;
}

/* Các ô chức năng (trang của chính mình) */
.mb-profile-tiles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--mb-border);
}
.mb-tile,
.mb-tile:visited {
    position: relative;
    display: flex;
    flex: 0 1 calc(25% - 6px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    min-height: 78px;
    padding: 12px 6px 10px;
    box-sizing: border-box;
    border: 1px solid #262b31;
    border-radius: 14px;
    background: #171b1f;
    color: var(--mb-text) !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none !important;
    transition: background .15s ease, border-color .15s ease;
}
.mb-tile:hover,
.mb-tile:focus-visible {
    border-color: rgba(154, 44, 44, .8);
    background: #1d2126;
}
.mb-tile.is-danger,
.mb-tile.is-danger:visited {
    color: #ff9d9d !important;
}
.mb-tile-icon {
    position: relative;
    display: inline-flex;
}
.mb-tile .mb-ico {
    width: 24px;
    height: 24px;
}
.mb-tile-label {
    max-width: 100%;
    overflow-wrap: anywhere;
}
.mb-tile-badge {
    position: absolute;
    top: -8px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 10px;
    background: var(--mb-msg-red);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 0 2px #171b1f;
}
.mb-tile-badge.is-blue {
    background: var(--mb-blue);
}
.mb-tile-badge.is-muted {
    background: #3a4047;
    color: #e7e9eb;
}
.mb-tile-badge[hidden],
.mb-profile-head [hidden] {
    display: none !important;
}
.mb-profile-cta {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}
.mb-profile-upload {
    min-width: 190px;
}
.mb-profile-upload .mb-ico {
    width: 18px;
    height: 18px;
}

/* Kết bạn | Nhắn tin | ⋯ (trang người khác) */
.mb-profile-head .mb-profile-actions {
    align-items: center;
    justify-content: center;
    margin-top: 16px;
}
.mb-friend-btn .mb-ico {
    width: 18px;
    height: 18px;
}
.mb-btn.mb-friend-btn.is-received,
.mb-btn.mb-mcard-friend.is-received {
    border-color: var(--mb-blue);
    background: var(--mb-blue);
    color: #fff !important;
}
.mb-btn.mb-friend-btn.is-received:hover,
.mb-btn.mb-mcard-friend.is-received:hover {
    border-color: #4a9dff;
    background: #4a9dff;
}
.mb-more-wrap {
    position: relative;
    display: inline-flex;
}
.mb-btn.mb-more-btn {
    min-width: 40px;
    padding: 6px 10px;
}
.mb-more-btn .mb-ico {
    width: 20px;
    height: 20px;
    fill: currentColor;
    stroke: none;
}
.mb-more-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 230px;
    padding: 6px;
    box-sizing: border-box;
    border: 1px solid var(--mb-border-2);
    border-radius: 12px;
    background: #1a1e22;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
    text-align: left;
}
.mb-more-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mb-text);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.mb-more-menu button:hover,
.mb-more-menu button:focus-visible {
    background: #262b31;
    outline: none;
}
.mb-more-menu button.is-danger {
    color: #ff9d9d;
}

/* Trang "Bạn đã chặn ..." */
.mb-blocked-card .mb-btn.block + .mb-btn.block {
    margin-top: 10px;
}

@media (min-width: 768px) {
    .mb-profile-head {
        padding: 26px 24px 22px;
    }
    .mb-profile-tiles {
        flex-wrap: nowrap;
        max-width: 980px;
        margin-left: auto;
        margin-right: auto;
    }
    .mb-tile,
    .mb-tile:visited {
        flex: 1 1 0;
        min-height: 84px;
        font-size: 13.5px;
    }
}
@media (max-width: 767px) {
    .mb-profile-head {
        padding: 18px 12px 16px;
    }
    .mb-profile-tiles {
        gap: 7px;
        margin-top: 16px;
        padding-top: 16px;
    }
    .mb-tile,
    .mb-tile:visited {
        flex-basis: calc(25% - 6px);
        min-height: 74px;
        padding: 10px 3px 8px;
        border-radius: 12px;
        font-size: 12px;
    }
    .mb-tile .mb-ico {
        width: 22px;
        height: 22px;
    }
}
@media (max-width: 359px) {
    .mb-tile,
    .mb-tile:visited {
        flex-basis: calc(33.333% - 5px);
    }
}

/* ---- Khung thông tin thành viên: Kết bạn | Xem trang cá nhân | Nhắn tin ---- */
.mb-mcard {
    width: min(400px, calc(100vw - 24px));
}
.mb-mcard .mb-mcard-actions {
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 6px;
}
.mb-mcard .mb-mcard-actions .mb-btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 9px;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mb-mcard .mb-mcard-actions .mb-mcard-link {
    flex-grow: 1.4;
}
/* Điện thoại: 3 nút vẫn nằm gọn 1 hàng (màn hình 360px trở lên). */
@media (max-width: 420px) {
    .mb-mcard {
        padding-left: 12px;
        padding-right: 12px;
    }
    .mb-mcard .mb-mcard-actions {
        gap: 5px;
    }
    .mb-mcard .mb-mcard-actions .mb-btn {
        padding: 8px 7px;
        font-size: 13px;
    }
}
@media (max-width: 340px) {
    .mb-mcard .mb-mcard-actions .mb-btn {
        white-space: normal;
    }
}
.mb-mcard-friend[hidden],
.mb-mcard .mb-mcard-actions [hidden] {
    display: none !important;
}

/* ---- Hộp hỏi lại ---- */
.mb-modal-card.mb-confirm-card {
    width: min(420px, 100%);
}
.mb-confirm-card .mb-modal-sub,
.mb-accrep-modal .mb-modal-sub {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
}
.mb-confirm-card .mb-modal-sub {
    margin: 8px 0 16px;
    font-size: 14px;
    line-height: 1.55;
}
/* Hộp hỏi lại có danh sách bước / lưu ý / mã lỗi (sửa micro 22-10-2026:
   hộp hướng dẫn bật micro .mb-mic-help) */
.mb-confirm-card [hidden] {
    display: none !important;
}
.mb-confirm-steps {
    margin: -6px 0 14px;
    padding-left: 22px;
    list-style: decimal outside;   /* CSS chung của web đặt list-style: none */
    color: var(--mb-text);
    font-size: 14px;
    line-height: 1.55;
}
.mb-confirm-steps li {
    display: list-item;
    list-style: inherit;
}
.mb-confirm-steps li + li {
    margin-top: 7px;
}
.mb-confirm-steps li::marker {
    color: var(--mb-muted);
    font-weight: 700;
}
.mb-confirm-note {
    margin: -4px 0 12px;
    color: var(--mb-muted);
    font-size: 12.5px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.mb-confirm-note.is-code {
    padding: 7px 9px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
    color: #80878e;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    white-space: pre-line;
}
.mb-mic-help .mb-confirm-card {
    width: min(440px, 100%);
}
.mb-btn.danger {
    border-color: #c62828;
    background: #c62828;
}
.mb-btn.danger:hover {
    border-color: #d84343;
    background: #d84343;
}

/* ---- Trang Bạn bè ---- */
.mb-page.mb-friends-page {
    max-width: 640px;
}
.mb-friends-card {
    padding: 18px 16px 12px;
}
.mb-friend-tabs {
    display: flex;
    gap: 6px;
    margin: 0 0 8px;
}
.mb-friend-tab,
.mb-friend-tab:visited {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    padding: 9px 6px;
    border: 1px solid #262b31;
    border-radius: 10px;
    background: #171b1f;
    color: #cfd3d6 !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
}
.mb-friend-tab:hover {
    border-color: rgba(154, 44, 44, .8);
}
.mb-friend-tab.is-active,
.mb-friend-tab.is-active:visited {
    border-color: var(--mb-red);
    background: var(--mb-red);
    color: #fff !important;
}
.mb-friend-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 19px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: 10px;
    background: rgba(255, 255, 255, .12);
    font-size: 12px;
    line-height: 1;
}
.mb-friend-tab.has-new .mb-friend-tab-count {
    background: var(--mb-msg-red);
    color: #fff;
}
.mb-friend-tab.is-active .mb-friend-tab-count {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}
.mb-friend-tab.is-active.has-new .mb-friend-tab-count {
    background: #fff;
    color: var(--mb-red);
}
.mb-friend-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.mb-friend {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 2px;
    border-top: 1px solid var(--mb-border);
}
.mb-friend:first-child {
    border-top: 0;
}
.mb-friend.is-done {
    opacity: .75;
}
.mb-friend-avatar {
    position: relative;
    display: block;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
}
.mb-friend-avatar img {
    display: block;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    background: #2a2f35;
}
.mb-friend-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.mb-friend-name,
.mb-friend-name:visited {
    overflow: hidden;
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mb-friend-name:hover {
    text-decoration: underline !important;
}
.mb-friend-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--mb-muted);
    font-size: 13px;
}
.mb-friend-status.is-online {
    color: #4ade80;
}
.mb-friend-status.is-online .mb-dot {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .2);
}
.mb-friend-time {
    color: var(--mb-muted);
    font-size: 12.5px;
}
.mb-friend-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
}
.mb-friend-actions .mb-btn .mb-ico {
    width: 17px;
    height: 17px;
}
.mb-friend-done {
    color: var(--mb-muted);
    font-size: 13px;
    font-weight: 600;
}
.mb-friend-foot {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}
@media (max-width: 520px) {
    .mb-friend {
        gap: 10px;
    }
    .mb-friend-actions .mb-btn > .mb-ico + span {
        display: none;
    }
    .mb-friend-actions .mb-btn {
        padding: 6px 9px;
    }
    .mb-friend-tab {
        font-size: 13px;
    }
}

/* ---- Cài đặt: tài khoản đã chặn ---- */
.mb-title.mb-title-sm {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 16px;
    text-transform: none;
}
.mb-title-sm .mb-ico {
    width: 19px;
    height: 19px;
    color: #ff9d9d;
}
.mb-count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: 10px;
    background: #23282d;
    color: #e7e9eb;
    font-size: 12px;
}
.mb-blocked-list-card > .mb-hint {
    margin: 0 0 6px;
    text-align: center;
}
.mb-blocked-list {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}
.mb-blocked-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--mb-border);
}
.mb-blocked-avatar {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: #2a2f35;
}
.mb-blocked-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.mb-blocked-name {
    overflow: hidden;
    color: #fff;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mb-blocked-time {
    color: var(--mb-muted);
    font-size: 12.5px;
}
.mb-blocked-empty {
    padding: 16px 6px 8px;
    font-size: 14px;
}

/* ---- Trang Thông báo: lời mời kết bạn, bạn bè đăng video ---- */
.mb-noti-kind.freq,
.mb-noti-kind.facc {
    background: var(--mb-blue);
}
.mb-noti-kind.fvideo {
    background: var(--mb-red);
}
.mb-noti-actions {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 2px;
}
.mb-noti-cta {
    color: #8fc1ff;
    font-weight: 700;
}

/* ---- Trò chuyện với người có quan hệ chặn ---- */
.mb-chat-peer.is-blocked {
    cursor: default;
}
.mb-chat-unblock,
.mb-chat-unblock:visited {
    display: block;
    margin: 0 12px 12px;
    color: #8fc1ff !important;
    font-size: 13.5px;
    font-weight: 700;
    text-align: center;
    text-decoration: none !important;
}
.mb-chat-unblock:hover {
    text-decoration: underline !important;
}
.mb-chat-unblock[hidden] {
    display: none !important;
}

/* --------------------------------------------------------------------------
   25. BỔ SUNG PHẦN 3 (22-10-2026)
   - Lượt xem đè trên ảnh poster ở lưới video trang cá nhân (góc dưới bên
     trái, giống TikTok). Link ảnh được làm khối bọc đúng ảnh để đặt số.
   - "Thông báo hệ thống" (admin viết) ở trang Thông báo: biểu tượng loa
     nền đỏ, nội dung giữ xuống dòng, nút "Xem chi tiết" khi có link.
   -------------------------------------------------------------------------- */
.mb-profile-list .video-item > a:first-child {
    position: relative;
    display: flow-root;
}
.mb-poster-views {
    position: absolute;
    left: 11px;
    bottom: 6px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: calc(100% - 22px);
    padding: 1px 7px 1px 5px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    white-space: nowrap;
    pointer-events: none;
}
.mb-poster-views svg {
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
@media (min-width: 768px) {
    .mb-poster-views {
        left: 12px;
        bottom: 7px;
        font-size: 12.5px;
    }
}

/* ---- Thông báo hệ thống ---- */
.mb-noti-sys-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #c23a3a, var(--mb-red));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
    color: #fff;
}
.mb-noti-sys-icon svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.mb-noti-sys-icon svg path:first-child {
    fill: currentColor;
}
.mb-noti-system .mb-noti-text b {
    color: #fff;
}
.mb-noti-sys-tag {
    display: inline-flex;
    align-items: center;
    height: 19px;
    margin-left: 8px;
    padding: 0 7px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
    color: #ffd0d0;
    font-size: 11.5px;
    font-weight: 700;
    vertical-align: 1px;
    white-space: nowrap;
}
.mb-noti-sys-text {
    margin: 0;
    color: #dfe3e6;
    font-size: 14.5px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.mb-noti-sys-more {
    margin: 2px 0 0;
}
.mb-noti-sys-link,
.mb-noti-sys-link:visited {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: #8fc1ff !important;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none !important;
}
.mb-noti-sys-link:hover,
.mb-noti-sys-link:focus-visible {
    text-decoration: underline !important;
}
.mb-noti-sys-link svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   26. TIN NHẮN — ĐỢT B (THÊM MỚI Bước 14 - Phần 3)
   - Trang trò chuyện riêng phủ kín màn hình (html.mb-chat-standalone): không
     đầu trang / chân trang / quảng cáo; trang không cuộn, chỉ danh sách tin
     cuộn. member.js đặt chiều cao khung theo phần màn hình nhìn thấy.
   - Khối nhiều ảnh (.mb-msg-grid), xem ảnh lớn có mũi tên chuyển ảnh.
   - Tin nhắn thoại (.mb-voice) và thanh đang ghi âm (.mb-chat-rec).
   -------------------------------------------------------------------------- */
html.mb-chat-standalone,
html.mb-chat-standalone body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    overscroll-behavior: none;
    background: var(--mb-bg);
}
.mb-chat-shell {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    height: 100vh;
    height: 100dvh;
    box-sizing: border-box;
}
.mb-chat.is-full {
    width: 100%;
    max-width: 820px;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
}
.mb-chat.is-full .mb-chat-head {
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
    padding-left: calc(6px + env(safe-area-inset-left, 0px));
    padding-right: calc(10px + env(safe-area-inset-right, 0px));
}
.mb-chat.is-full .mb-chat-form {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    padding-left: calc(6px + env(safe-area-inset-left, 0px));
    padding-right: calc(10px + env(safe-area-inset-right, 0px));
}
.mb-chat.is-full .mb-chat-back {
    position: relative;
}
.mb-chat-back-count {
    position: absolute;
    top: 0;
    right: -4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 9px;
    background: var(--mb-msg-red);
    box-shadow: 0 0 0 2px #15191d;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}
.mb-chat-back-count[hidden] {
    display: none !important;
}
@media (min-width: 768px) {
    .mb-chat-shell {
        padding: 16px;
    }
    .mb-chat.is-full {
        border: 1px solid var(--mb-border);
        border-radius: 14px;
    }
}

/* ---- Khối nhiều ảnh gửi cùng lúc ---- */
.mb-msg.is-batch-member {
    display: none !important;
}
.mb-msg .mb-msg-bubble.is-grid {
    width: min(270px, 70vw);
    max-width: 76%;
    padding: 0;
    overflow: hidden;
    border-radius: 14px;
    background: transparent;
    line-height: 0;
}
.mb-msg-grid {
    display: grid;
    gap: 3px;
}
.mb-msg-grid.cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mb-msg-grid.cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mb-msg-tile {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #20252a;
}
.mb-msg-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mb-msg-tile.is-pending img {
    opacity: .45;
}
.mb-msg-tile.is-pending::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: mb-spin .8s linear infinite;
}
.mb-msg.is-theirs .mb-msg-tile,
.mb-msg.is-theirs .mb-msg-tile img {
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
}
/* ---- Xem ảnh lớn: nhiều ảnh ---- */
.mb-photo-count {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}
.mb-photo-nav {
    position: absolute;
    top: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    cursor: pointer;
}
.mb-photo-nav:hover,
.mb-photo-nav:focus-visible {
    background: rgba(255, 255, 255, .26);
}
.mb-photo-nav.is-prev {
    left: 10px;
}
.mb-photo-nav.is-next {
    right: 10px;
}
.mb-photo-nav .mb-ico {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
}
@media (hover: none) {
    .mb-photo-nav {
        background: rgba(0, 0, 0, .35);
    }
}

/* ---- Tin nhắn thoại ---- */
.mb-msg .mb-msg-bubble.is-voice {
    width: min(300px, 72vw);
    max-width: 80%;
    padding: 6px 10px 6px 6px;
    white-space: normal;
}
.mb-voice {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
}
.mb-voice-play {
    display: inline-flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    cursor: pointer;
}
.mb-msg.is-mine .mb-voice-play {
    background: rgba(255, 255, 255, .22);
}
.mb-voice-play:hover,
.mb-voice-play:focus-visible {
    background: rgba(255, 255, 255, .3);
}
.mb-voice-play svg {
    fill: currentColor;
}
.mb-voice.is-loading .mb-voice-play svg {
    opacity: .35;
}
.mb-voice.is-loading .mb-voice-play {
    position: relative;
}
.mb-voice.is-loading .mb-voice-play::after {
    content: '';
    position: absolute;
    inset: 4px;
    border: 2px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: mb-spin .8s linear infinite;
}
.mb-voice-track {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    height: 30px;
    cursor: pointer;
    outline: none;
}
.mb-voice-track:focus-visible .mb-voice-bar {
    box-shadow: 0 0 0 2px var(--mb-blue);
}
.mb-voice-bar {
    position: relative;
    width: 100%;
    height: 4px;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(255, 255, 255, .25);
}
.mb-voice-fill {
    width: 0;
    height: 100%;
    border-radius: 2px;
    background: #fff;
}
.mb-voice-time {
    flex: 0 0 auto;
    min-width: 34px;
    color: rgba(255, 255, 255, .9);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: right;
}
.mb-voice-rate {
    flex: 0 0 auto;
    min-width: 34px;
    height: 22px;
    padding: 0 6px;
    border: 0;
    border-radius: 11px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 22px;
    cursor: pointer;
}
.mb-voice-rate:hover,
.mb-voice-rate:focus-visible {
    background: rgba(255, 255, 255, .26);
}
@media (hover: none) {
    .mb-msg.is-theirs .mb-voice,
    .mb-msg.is-theirs .mb-voice * {
        -webkit-user-select: none;
        user-select: none;
    }
}

/* ---- Thanh đang ghi âm (thay hàng nhập tin) ---- */
.mb-chat-row[hidden],
.mb-chat-rec[hidden] {
    display: none !important;
}
.mb-chat-rec {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 42px;
}
.mb-rec-cancel {
    color: #ff8a8a;
}
.mb-rec-cancel:hover,
.mb-rec-cancel:focus-visible {
    color: #ffb3b3;
}
.mb-rec-main {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    height: 40px;
    padding: 0 14px;
    box-sizing: border-box;
    border-radius: 20px;
    background: rgba(240, 40, 73, .12);
    box-shadow: inset 0 0 0 1px rgba(240, 40, 73, .35);
}
.mb-rec-dot {
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mb-msg-red);
    animation: mb-rec-blink 1.1s ease-in-out infinite;
}
.mb-rec-time {
    flex: 0 0 auto;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.mb-rec-note {
    overflow: hidden;
    color: #cfd3d6;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mb-chat-rec.is-hold .mb-rec-dot,
.mb-chat-rec.is-sending .mb-rec-dot {
    animation: none;
    background: #8a9097;
}
.mb-chat-rec.is-hold .mb-rec-main {
    background: rgba(255, 255, 255, .05);
    box-shadow: inset 0 0 0 1px var(--mb-border-2);
}
.mb-chat-rec.is-retry .mb-rec-note {
    color: #ffcf8a;
}
.mb-chat-rec.is-sending .mb-rec-send {
    opacity: .6;
    pointer-events: none;
}
.mb-chat-rec.is-sending .mb-rec-cancel {
    visibility: hidden;
}
@keyframes mb-rec-blink {
    50% {
        opacity: .25;
    }
}
@media (max-width: 360px) {
    .mb-rec-note {
        display: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .mb-rec-dot,
    .mb-msg-tile.is-pending::after,
    .mb-voice.is-loading .mb-voice-play::after {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   27. TIN NHẮN — PHẦN 3c (THÊM MỚI 23-10-2026)
   - Chạm 1 lần vào tin: dòng "Đã gửi ..." (.mb-msg-stamp) bên dưới tin.
   - Bấm giữ tin người kia: hàng thả cảm xúc (.mb-chat-react-bar) trên menu;
     huy hiệu cảm xúc (.mb-msg-react) đè góc dưới của tin.
   - Tin người gửi đã xoá (.mb-msg-bubble.is-unsent) — kiểu chữ như tin bị ẩn.
   - Giờ gửi dưới ảnh khi xem ảnh lớn (.mb-photo-time).
   -------------------------------------------------------------------------- */
.mb-msg-stamp {
    margin: 5px 4px 1px;
    color: #9aa0a6;
    font-size: 12px;
    line-height: 1.35;
    text-align: right;
}
.mb-msg.is-theirs .mb-msg-stamp {
    margin-left: 40px;
    text-align: left;
}
.mb-msg-stamp[hidden] {
    display: none !important;
}
.mb-msg.is-reacted .mb-msg-stamp {
    margin-top: 14px;
}
.mb-msg.is-stamped .mb-msg-bubble {
    filter: brightness(1.12);
}
.mb-msg-bubble.is-unsent {
    font-style: italic;
}

/* Huy hiệu cảm xúc: tin người kia -> góc dưới bên phải; tin của mình -> góc dưới bên trái. */
.mb-msg.is-reacted {
    margin-bottom: 12px;
}
.mb-msg-react {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    align-self: flex-end;
    min-width: 22px;
    margin: 0 0 -13px -20px;
    padding: 2px 5px;
    box-sizing: border-box;
    border-radius: 999px;
    background: #2a2f35;
    box-shadow: 0 0 0 2px var(--mb-bg), 0 2px 6px rgba(0, 0, 0, .35);
    color: #fff;
    font-size: 13px;
    font-style: normal;
    line-height: 17px;
    text-align: center;
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
}
.mb-msg.is-mine .mb-msg-react {
    order: -1;
    margin: 0 -20px -13px 0;
}
.mb-msg.is-batch-member .mb-msg-react {
    display: none;
}

/* Hàng thả cảm xúc khi bấm giữ tin người kia */
.mb-chat-react-bar {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 5px 6px;
    border: 1px solid #2f3439;
    border-radius: 999px;
    background: #15191d;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .55);
    animation: mb-react-pop .16s ease-out;
}
.mb-chat-react-opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: transform .12s ease, background-color .12s ease;
}
.mb-chat-react-opt:hover,
.mb-chat-react-opt:focus-visible {
    background: #262b31;
    outline: none;
    transform: scale(1.15);
}
.mb-chat-react-opt.is-active {
    background: #243447;
    box-shadow: inset 0 0 0 2px var(--mb-blue);
}
@keyframes mb-react-pop {
    from {
        opacity: 0;
        transform: translateY(6px) scale(.85);
    }
}
@media (max-width: 380px) {
    .mb-chat-react-opt {
        width: 38px;
        height: 38px;
        font-size: 23px;
    }
}

/* Bấm giữ tin của MÌNH trên điện thoại cũng mở menu của web (Sao chép / Xoá). */
.mb-msg .mb-msg-photo,
.mb-msg .mb-msg-photo img,
.mb-msg .mb-msg-tile,
.mb-msg .mb-msg-tile img {
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
}
@media (hover: none) {
    .mb-msg.is-mine .mb-msg-bubble {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
}

/* Giờ gửi dưới ảnh khi xem ảnh lớn */
.mb-photo-time {
    color: #aeb4ba;
    font-size: 13px;
    text-align: center;
}
.mb-photo-time[hidden] {
    display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    .mb-chat-react-bar {
        animation: none;
    }
    .mb-chat-react-opt {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   28. CHỌN ẢNH ĐẠI DIỆN KHI ĐĂNG KÝ (THÊM MỚI Bước 14 - Phần 3d)
   Form đăng ký (trang /dang-ky và khối "Chỉ thành viên"): ảnh lớn là ảnh
   đang chọn, bên dưới là các ảnh có sẵn (mỗi hàng 7 ảnh, tự co theo bề rộng
   màn hình). Ảnh đang chọn có viền đỏ. Chỉ chọn được lúc tạo tài khoản.
   -------------------------------------------------------------------------- */
.mb-avpick {
    min-width: 0;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}
.mb-avpick-label {
    float: left;
    width: 100%;
    margin: 0 0 7px;
    padding: 0;
    color: #e7e7e7;
    font-size: 14px;
    font-weight: 700;
}
.mb-avpick-box {
    clear: both;
    padding: 12px;
    border: 1px solid var(--mb-border);
    border-radius: 12px;
    background: var(--mb-input);
}
.mb-avpick-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 14px;
}
.mb-avpick-preview {
    display: block;
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    margin-left: 4px;
    border-radius: 50%;
    background: #2a2f35;
    box-shadow: 0 0 0 2px var(--mb-input), 0 0 0 4px rgba(154, 44, 44, .85);
}
.mb-avpick-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    line-height: 1.4;
}
.mb-avpick-text strong {
    color: var(--mb-text);
    font-size: 14px;
}
.mb-avpick-text span {
    color: var(--mb-muted);
    font-size: 12.5px;
}
.mb-avpick-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.mb-avpick-opt {
    position: relative;
    display: block;
    width: calc((100% - 48px) / 7);
    max-width: 44px;
    margin: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mb-avpick-opt input {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}
.mb-avpick-opt img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #2a2f35;
    opacity: .82;
    transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.mb-avpick-opt:hover img {
    opacity: 1;
    transform: scale(1.06);
}
.mb-avpick-opt input:checked + img {
    opacity: 1;
    transform: none;
    box-shadow: 0 0 0 2px var(--mb-input), 0 0 0 4px var(--mb-red);
}
.mb-avpick-opt input:focus-visible + img {
    outline: 2px solid #fff;
    outline-offset: 5px;
}
.mb-avpick .mb-hint {
    margin-top: 8px;
}
@media (max-width: 360px) {
    .mb-avpick-box {
        padding: 10px 8px;
    }
    .mb-avpick-grid {
        gap: 6px;
    }
    .mb-avpick-opt {
        width: calc((100% - 36px) / 7);
    }
}
@media (prefers-reduced-motion: reduce) {
    .mb-avpick-opt img {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   29. PHẦN 3e (THÊM MỚI 23-10-2026)
   - Bình luận thoại: khung phát trong bình luận (.mb-cmt-voice), nút micro
     (.mb-cmt-mic), thanh ghi âm thay ô nhập (.mb-cmt-rec).
   - Nghe lại trước khi gửi (tin nhắn + bình luận): nút ■ (.mb-rec-stop), khung
     nghe lại (.mb-rec-preview) thay dòng đồng hồ khi đã dừng ghi.
   - Trang cá nhân: nút ⋮ trên ảnh video mình đăng (.mb-vid-tools), hộp Sửa
     tiêu đề / Thay ảnh poster (.mb-vid-modal).
   - Trang Đăng video: nút "Xem thêm lượt gửi" (.mb-up-more).
   -------------------------------------------------------------------------- */

/* ---- Bình luận thoại trong danh sách ---- */
.mb-cmt-text.is-voice {
    white-space: normal;
}
.mb-cmt-voice-to {
    margin-bottom: 4px;
}
.mb-voice.mb-cmt-voice {
    width: min(320px, 100%);
    max-width: 100%;
    padding: 4px 10px 4px 4px;
    box-sizing: border-box;
    border-radius: 21px;
    background: #22272d;
    box-shadow: inset 0 0 0 1px #30363d;
}
.mb-cmt-voice .mb-voice-play {
    background: var(--mb-red);
}
.mb-cmt-voice .mb-voice-play:hover,
.mb-cmt-voice .mb-voice-play:focus-visible {
    background: var(--mb-red-hover);
}
.mb-cmt-voice-gone {
    color: var(--mb-muted);
    font-size: 13.5px;
    font-style: italic;
}

/* ---- Nút micro trong ô bình luận ---- */
.mb-cmt-mic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: #3a3f45;
    box-shadow: 0 3px 0 #1c1f22;
    color: #d5d8db;
    cursor: pointer;
}
.mb-cmt-mic:hover,
.mb-cmt-mic:focus-visible {
    background: #484e55;
    color: #fff;
}
.mb-cmt-mic .mb-ico {
    width: 22px;
    height: 22px;
}

/* ---- Thanh ghi âm của bình luận (thay ô nhập khi đang ghi) ---- */
.mb-cmt-form.is-recording .mb-cmt-input,
.mb-cmt-form.is-recording .mb-cmt-tools {
    display: none !important;
}
.mb-cmt-rec[hidden] {
    display: none !important;
}
.mb-cmt-rec {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 6px;
    box-sizing: border-box;
    border: 1px solid #30363c;
    border-radius: 10px;
    background: #15181c;
}
.mb-rec-btn {
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #d5d8db;
    cursor: pointer;
}
.mb-rec-btn:hover,
.mb-rec-btn:focus-visible {
    background: #262b31;
    color: #fff;
}
.mb-rec-btn.mb-rec-send {
    background: var(--mb-red);
    color: #fff;
}
.mb-rec-btn.mb-rec-send:hover,
.mb-rec-btn.mb-rec-send:focus-visible {
    background: var(--mb-red-hover);
}
.mb-cmt-rec .mb-rec-main {
    height: 38px;
    padding: 0 12px;
}
.mb-cmt-rec.is-hold .mb-rec-dot,
.mb-cmt-rec.is-sending .mb-rec-dot {
    animation: none;
    background: #8a9097;
}
.mb-cmt-rec.is-hold .mb-rec-main {
    background: rgba(255, 255, 255, .05);
    box-shadow: inset 0 0 0 1px var(--mb-border-2);
}
.mb-cmt-rec.is-retry .mb-rec-note {
    color: #ffcf8a;
}
.mb-cmt-rec.is-sending .mb-rec-send {
    opacity: .6;
    pointer-events: none;
}
.mb-cmt-rec.is-sending .mb-rec-cancel {
    visibility: hidden;
}

/* ---- Nghe lại trước khi gửi (tin nhắn + bình luận) ----
   Nút ■ to, nền đỏ nhạt cho dễ thấy/dễ bấm trên điện thoại. */
.mb-rec-stop,
.mb-chat-tool.mb-rec-stop {
    background: rgba(255, 107, 107, .14);
    box-shadow: inset 0 0 0 1.5px rgba(255, 138, 138, .5);
    color: #ff8a8a;
}
.mb-rec-stop .mb-ico,
.mb-chat-tool.mb-rec-stop .mb-ico {
    width: 24px;
    height: 24px;
}
.mb-rec-stop .mb-ico rect {
    fill: currentColor;
    stroke: currentColor;
}
.mb-rec-stop:hover,
.mb-rec-stop:focus-visible,
.mb-chat-tool.mb-rec-stop:hover,
.mb-chat-tool.mb-rec-stop:focus-visible {
    background: rgba(255, 107, 107, .24);
    color: #ffb3b3;
}
.mb-chat-rec.is-hold .mb-rec-stop,
.mb-chat-rec.is-sending .mb-rec-stop,
.mb-cmt-rec.is-hold .mb-rec-stop,
.mb-cmt-rec.is-sending .mb-rec-stop {
    display: none;
}
.mb-rec-preview[hidden] {
    display: none !important;
}
.mb-rec-preview {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    height: 40px;
    padding: 0 10px 0 3px;
    box-sizing: border-box;
    border-radius: 20px;
    background: rgba(255, 255, 255, .06);
    box-shadow: inset 0 0 0 1px var(--mb-border-2);
}
.mb-rec-preview .mb-voice {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 34px;
}
.mb-chat-rec.is-preview .mb-rec-main,
.mb-cmt-rec.is-preview .mb-rec-main {
    display: none;
}
.mb-rec-preview .mb-voice-play {
    background: var(--mb-red);
}

/* ---- Trang cá nhân: nút ⋮ trên video mình đăng ---- */
.mb-profile-list.is-owner .video-item {
    position: relative;
}
.mb-vid-tools {
    position: absolute;
    top: 6px;
    right: 11px;
    z-index: 3;
}
.mb-vid-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mb-vid-more svg {
    fill: currentColor;
    stroke: none;
}
.mb-vid-more:hover,
.mb-vid-more:focus-visible,
.mb-vid-more[aria-expanded="true"] {
    background: rgba(0, 0, 0, .85);
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .35);
}
/* Menu ⋮ nổi trên trang (member.js đặt vị trí ngay dưới nút). */
.mb-vid-menu {
    position: fixed;
    z-index: 2147482000;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 190px;
    padding: 6px;
    box-sizing: border-box;
    border: 1px solid var(--mb-border-2);
    border-radius: 12px;
    background: #1a1e22;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
    text-align: left;
}
.mb-vid-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mb-text);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}
.mb-vid-menu button:hover,
.mb-vid-menu button:focus-visible {
    background: #262b31;
    outline: none;
}

/* ---- Hộp Sửa tiêu đề / Thay ảnh poster ---- */
.mb-vid-modal .mb-modal-card {
    width: min(460px, 100%);
}
.mb-vid-sub {
    margin: 4px 0 14px;
    color: var(--mb-muted);
    font-size: 13.5px;
    line-height: 1.5;
}
.mb-vid-title-input {
    min-height: 84px;
    resize: vertical;
    line-height: 1.45;
}
.mb-vid-count {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.mb-vid-count .over {
    color: #ff8a8a;
    font-weight: 700;
}
.mb-vid-poster {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 6px 0 12px;
}
.mb-vid-poster-frame {
    position: relative;
    flex: 0 0 132px;
    width: 132px;
    aspect-ratio: 908 / 1280;
    overflow: hidden;
    border: 1px solid var(--mb-border-2);
    border-radius: 10px;
    background: #0f1215;
}
.mb-vid-poster-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mb-vid-poster-frame img:not([src]) {
    visibility: hidden;
}
.mb-vid-poster-tag {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 6px;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(0, 0, 0, .7);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
.mb-vid-poster-tag.is-new {
    background: rgba(34, 140, 80, .88);
}
.mb-vid-poster-side {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.mb-vid-poster-side .mb-hint {
    margin: 0;
}
.mb-vid-pick {
    align-self: flex-start;
    white-space: nowrap;
}
.mb-vid-rules {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 196, 0, .35);
    border-radius: 9px;
    background: rgba(255, 196, 0, .08);
    color: #ffe08a;
    font-size: 13px;
    line-height: 1.5;
}
.mb-vid-rules svg {
    flex: 0 0 18px;
    margin-top: 1px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
@media (max-width: 420px) {
    .mb-vid-poster-frame {
        flex-basis: 108px;
        width: 108px;
    }
    .mb-vid-poster-tag {
        font-size: 11px;
        line-height: 15px;
    }
}
@media (max-width: 360px) {
    .mb-vid-poster {
        gap: 10px;
    }
    .mb-vid-pick {
        padding-left: 10px;
        padding-right: 10px;
    }
    .mb-vid-pick .mb-ico {
        display: none;
    }
}

/* ---- Trang Đăng video: "Xem thêm lượt gửi" ---- */
.mb-up-more[hidden] {
    display: none !important;
}
.mb-up-more {
    margin-top: 12px;
}
.mb-up-more.is-loading {
    opacity: .6;
    cursor: wait;
}
@media (prefers-reduced-motion: reduce) {
    .mb-cmt-rec .mb-rec-dot {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   30. PHẦN 3f (THÊM MỚI 23-10-2026)
   Nội dung phim (dưới video) và nội dung footer do quản trị viên soạn: ảnh to
   không tràn ra ngoài màn hình điện thoại, bảng không làm vỡ khung trang.
   -------------------------------------------------------------------------- */
.video-description img,
.footer-content img {
    max-width: 100%;
    height: auto;
}
.video-description table,
.footer-content table {
    max-width: 100%;
    border-collapse: collapse;
}
.video-description iframe,
.video-description video {
    max-width: 100%;
}