/* ==========================================================================
   custom2.css — tuỳ biến riêng của project, load SAU custom.css.
   custom.css giữ nguyên bản gốc từ html-tt247-2026 để copy đè được.
   Mọi thay đổi CSS của project viết ở đây, KHÔNG sửa custom.css.
   ========================================================================== */

/* Danh sách thành viên: bảng theo mẫu list-member.html. */
.member-directory .member-table-scroll {
    overflow-x: auto;
}
.member-directory .tbl_list_member {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    font-size: 14px;
}
.member-directory .tbl_list_member th {
    background: #e2ebff;
    text-align: left;
}
.member-directory .tbl_list_member th:first-child { width: 55%; }
.member-directory .tbl_list_member th:nth-child(2),
.member-directory .tbl_list_member th:nth-child(3),
.member-directory .tbl_list_member th:nth-child(4) { width: 10%; }
.member-directory .tbl_list_member th:last-child { width: 15%; }
.member-directory .tbl_list_member td,
.member-directory .tbl_list_member th {
    padding: 15px;
}
.member-directory .tbl_list_member td {
    border-bottom: 1px solid #ddd;
    vertical-align: middle;
}
.member-directory .tbl_list_member th,
.member-directory .tbl_list_member td:last-child {
    white-space: nowrap;
}
.member-directory .member-identity {
    display: flex;
    align-items: center;
    gap: 10px;
}
.member-directory .img_user_list {
    flex: 0 0 22px;
}
.member-directory .img_user_list img {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
}
.member-directory .member-details {
    min-width: 0;
    overflow-wrap: anywhere;
}
.member-directory .member-id,
.member-directory .member-email {
    color: #999;
}
.member-directory .member-email { font-size: 12px; }
.member-directory .member-empty { text-align: center; }
.member-directory .member-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
}
.member-directory .member-pagination a,
.member-directory .member-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #254892;
}
.member-directory .member-pagination a:hover,
.member-directory .member-pagination a:focus-visible,
.member-directory .member-pagination .active {
    background: #254892;
    border-color: #254892;
    color: #fff;
}
@media (max-width: 767px) {
    .member-directory .member-pagination { gap: 4px; }
    .member-directory .member-pagination a,
    .member-directory .member-pagination span {
        min-width: 32px;
        padding: 6px 8px;
    }
}

/* --- 1. Đường dẫn ảnh: bản gốc trỏ ../images/, project dùng images_mxh/ --- */

.thumb_user_show {
    background-image: url("/frontend/images_mxh/user.svg");
}

.number_cm_news {
    background-image: url("/frontend/images_mxh/comment.svg");
}

.number_cm_news:hover {
    background-image: url("/frontend/images_mxh/comment_hover.svg");
}

.number_share_news {
    background-image: url("/frontend/images_mxh/share.svg");
}

.number_share_news:hover {
    background-image: url("/frontend/images_mxh/share_hover.svg");
}

.number_heart_news {
    background-image: url("/frontend/images_mxh/heart.svg");
}

.number_heart_news:hover {
    background-image: url("/frontend/images_mxh/heart_hover.svg");
}

.btnUploadImage {
    background-image: url("/frontend/images_mxh/upload.svg");
}

.bread_cump a:after {
    background-image: url("/frontend/images_mxh/ico_bread.svg");
}

.slide_story_tt247-prev {
    background-image: url("/frontend/images_mxh/left.svg");
}

.slide_story_tt247-next {
    background-image: url("/frontend/images_mxh/Right.svg");
}

/* Bản gốc ghi url(upload-big-arrow.svg) — trỏ sai vào /frontend/css_mxh/.
   Thay thế cho <style> inline trong layout.php (đã bỏ). */
.upload_feedback {
    background-image: url("/frontend/images_mxh/upload-big-arrow.svg");
}

/* --- 2. Bổ sung props cho rule có sẵn --- */

/* .next_head_menu render bằng <button> nên cần reset */
.next_head_menu {
    padding: 0;
    border: 0;
    background: transparent;
}

/* --- 3. Rule mới của project --- */

/* LoginBox chỉ cung cấp popup; các nút tài khoản đã có ở header beta. */
.mxh-login-box > .section_login {
    display: none !important;
}

/* Popup xác thực SĐT/email không có radio #tab1 nên rule tab của custom.css ẩn mất nội dung */
.popup-verify-notification .login-tab section > div,
.popup-verify-email-notification .login-tab section > div {
    display: block;
}

/* Icon <img> thay cho <svg> inline của bản gốc */
.list_opt_site li img {
    width: 25px;
    height: 26px;
    margin: 0 auto 2px;
    object-fit: contain;
}

.list_user_log li a > img {
    width: 14px;
    height: 14px;
    margin-right: 5px;
}

.mxh-account-item .avar_user img {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    object-fit: cover;
}

.mxh-empty-state {
    margin: 20px 0;
    padding: 24px;
    text-align: center;
    color: #777;
    background: #fff;
    border: 1px solid #ebf2ff;
    border-radius: 10px;
}

.btn_load_more.load_error {
    background: #777;
}

/* Bài bật only_content không render sidebar và chiếm toàn bộ container. */
.d-grid-two.only-content-layout {
    grid-template-columns: minmax(0, 1fr);
}

.only-content-layout .col_content {
    width: 100%;
}

/* ≤1120px grid còn 1 cột `auto` (custom.css) nên phần tử rộng cố định trong bài (quảng cáo 378px…) đẩy track
   rộng hơn container ⇒ nội dung và box livescores sát/tràn mép phải. Khóa track theo container. */
@media screen and (max-width: 1120px) {
    .d-grid-two {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- 4. Mobile --- */

@media screen and (max-width: 1024px) {
    /* Khớp với .list_user_log li svg của bản gốc, cho biến thể <img> */
    .list_user_log li a > img {
        margin-right: 0;
        text-indent: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .button_menu_mb {
        padding: 0;
        border: 0;
    }

    .list_user_log_mobile > li:first-child {
        display: none;
    }
}
.title_main span {
    display: inline-block;
    background: #fff;
    position: relative;
    z-index: 2;
    color: #C62127;
    padding-right: 15px;
}
.mt-10 {
    margin-top: 10px;
}

/* Like/share counters and menu for MXH beta. */
.mxh-interaction { position: relative; }
.number_heart_news.active { background-image: url('/frontend/images_mxh/heart_hover.svg'); color: #C62127; }
.number_share_news.active { background-image: url('/frontend/images_mxh/share_hover.svg'); }
.js-mxh-like[data-loading="1"] { opacity: .6; pointer-events: none; }
.mxh-share-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
    z-index: 100;
    max-width: calc(100vw - 32px);
}
.mxh-share-menu[hidden] { display: none; }
.mxh-share-menu a { display: flex; align-items: center; white-space: nowrap; font-size: 14px; color: #254892; }
.mxh-share-menu svg { fill: currentColor; flex-shrink: 0; }
@media (max-width: 767px) {
    .mxh-share-menu { right: 0; left: auto; gap: 12px; }
}

/* SEO headings (h1 logo trang chủ, h2/h3 tiêu đề bài) cho MXH beta: giữ nguyên giao diện cũ. */
.mxh_heading { margin: 0; padding: 0; font: inherit; }
.mxh_logo_h1 { display: contents; }

/* Box "Bài liên quan" dạng 1 bài lớn (_oneBig) — port từ base/base.dev.css (layout mxh không load file này). */
.explus_related_1404022217.expNoEdit { min-width: 300px; }
#content_detail .explus_related_1404022217_title .intro,
#content_detail .explus_related_1404022217_title .exp-btn-more { display: none; }
#content_detail .explus_related_1404022217_oneBig {
    border: 0;
    border-radius: 9px;
    overflow: hidden;
    background: #f6f6f6;
    display: flex;
    flex-direction: column;
}
#content_detail .explus_related_1404022217_oneBig .explus_related_1404022217_item { padding: 10px; }
#content_detail .explus_related_1404022217_oneBig > div:first-child { display: none; }
#content_detail .explus_related_1404022217_oneBig .explus_related_1404022217_photo {
    width: 348px;
    height: 100%;
    float: left;
}
#content_detail .explus_related_1404022217_oneBig .explus_related_1404022217_photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#content_detail .explus_related_1404022217_oneBig .explus_related_1404022217_title {
    font-size: 22px;
    font-weight: 700;
    margin: 15px 15px 15px 368px;
    display: inherit;
    color: #000;
    line-height: 1.35;
    font-family: 'Roboto';
}
#content_detail .explus_related_1404022217_oneBig .explus_related_1404022217_title .intro {
    display: block !important;
    font-weight: 400;
    font-size: 16px;
    margin-top: 10px;
}
#content_detail .explus_related_1404022217_oneBig .explus_related_1404022217_title .exp-btn-more {
    margin-top: 15px;
    font-size: 18px;
    display: block !important;
    color: #0077b6;
}
#content_detail .explus_related_1404022217_oneBig .explus_related_1404022217_title .exp-btn-more:before {
    content: '➜';
    margin-right: 6px;
    border: 2px solid #0077b6;
    border-radius: 50%;
    width: 23px;
    height: 23px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
@media screen and (max-width: 580px) {
    #content_detail .explus_related_1404022217_oneBig .explus_related_1404022217_photo {
        width: 100%;
        height: auto;
    }
    #content_detail .explus_related_1404022217_oneBig .explus_related_1404022217_title {
        margin: 10px;
        display: block;
        float: left;
    }
    #content_detail .explus_related_1404022217_oneBig .explus_related_1404022217_photo img { height: auto; }
}

/* Tạm ẩn popup composer: click ô viết bài đi theo link /users/post */
.box_composer .txt_news_main {
    pointer-events: none;
    cursor: pointer;
}

/* Vị trí ads (?mxh_beta) — wrapper chỉ in khi có nội dung ads, xem mxh/component/_ads.php */
.mxh-ads {
    margin: 0 auto 20px;
    max-width: 100%;
    overflow: hidden;
    text-align: center;
}
.mxh-ads img, .mxh-ads iframe {
    max-width: 100%;
}
/* Banner dưới header: căn theo .container_tt247, margin dọc collapse giữa các slot liền nhau */
.mxh-ads-top {
    max-width: 1120px;
    margin: 15px auto;
}
/* Giữ chỗ trước khi ads tải để không nhảy layout (CLS), giống bản cũ */
.mxh-ads-20, .mxh-ads-27 {
    min-height: 210px;
}
.col_right .mxh-ads {
    margin-bottom: 25px;
}
.col_right .mxh-ads.ads_sticky {
    margin-top: 25px;
    margin-bottom: 0;
}
/* Box tin sidebar đã bỏ: ads cuối cột luôn bám theo khi cuộn (kể cả khi ads 4 sticky không có nội dung) để cột phải không trống */
.col_right > .mxh-ads:last-child {
    position: sticky;
    top: 110px;
    margin-bottom: 0;
}
#content_detail .mxh-ads {
    margin: 15px auto;
}
/* Banner pickleball chuyên mục 342 (dưới sapo), bản cũ dùng padding 20px 0 */
#content_detail .mxh-banner-pickleball {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 20px auto;
}
/* Popup kết quả tìm kiếm Google CSE (ô tìm kiếm header MXH) */
.mxh_cse {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 16px 16px;
    background: rgba(0, 0, 0, .6);
}
.mxh_cse[hidden] {
    display: none;
}
.mxh_cse_dialog {
    position: relative;
    width: 100%;
    max-width: 800px;
    max-height: 100%;
    overflow-y: auto;
    padding: 36px 16px 16px;
    background: #fff;
    border-radius: 10px;
}
.mxh_cse_close {
    position: absolute;
    top: 6px;
    right: 10px;
    border: 0;
    background: none;
    font-size: 28px;
    line-height: 1;
    color: #333;
    cursor: pointer;
}
html.mxh_cse_open {
    overflow: hidden;
}
@media (max-width: 767px) {
    .mxh_cse {
        padding: 0;
    }
    .mxh_cse_dialog {
        height: 100%;
        max-width: none;
        border-radius: 0;
    }
}

/* Phần riêng độc giả (?mxh_beta) — HTML luôn là bản khách, js_mxh/main.js (hydrateMember) bật khối thành viên.
   Class của khối (d-flex, box_rep_cm…) có display riêng, thắng [hidden] mặc định ⇒ ép lại. */
[data-mxh-guest][hidden],
[data-mxh-member][hidden],
[data-mxh-comment][hidden],
[data-mxh-verify][hidden] {
    display: none !important;
}
/* Có cờ TLogged (class gắn sớm trong <head>): giữ chỗ nhưng ẩn nút khách trong lúc chờ /auth/mxh-me, tránh nháy. */
html.mxh-tlogged [data-mxh-guest],
html.mxh-tlogged [data-mxh-comment="guest"] {
    visibility: hidden;
}

/* Ảnh thumb bài viết: khóa tỉ lệ 16:9 theo cỡ resize (790x445, 400x225) — ảnh gốc lệch tỉ lệ (vd 763x445)
   không làm card cao/thấp khác nhau. Lưới 2 cột chia đều 2 cột (auto auto làm cột rộng/hẹp theo tiêu đề). */
.item_news_main > .post_thumb img { aspect-ratio: 16 / 9; height: auto; }
.d-grid.news_two { grid-template-columns: repeat(2, minmax(0, 1fr)); }