/* SP v343: PC - thu chiều ngang các trang route còn 1/3 màn hình, canh giữa. Chỉ chỉnh layout PC, không đụng mobile, không đụng logic. Lưu ý: không tạo scroll riêng trong khung; scrollbar vẫn là scrollbar tự nhiên của trình duyệt ở mép phải. */ @media (min-width:1024px){ :root{ --pc-route-page-width:33.333vw; /* SP chỉnh chiều ngang trang PC tại đây = 1/3 màn hình */ --pc-route-page-min-width:420px; /* SP chỉnh chiều ngang nhỏ nhất để nội dung không quá hẹp */ --pc-route-page-max-width:640px; /* SP chỉnh chiều ngang lớn nhất của khung nội dung */ --pc-route-page-final-width:clamp(var(--pc-route-page-min-width), var(--pc-route-page-width), var(--pc-route-page-max-width)); } /* SP: chỉ co các trang route nội dung; trang chủ và trang video dạng full-screen giữ nguyên. */ .routePage.is-active:not(#page-home):not([data-route-page="video"]):not(#page-category):not(#page-area-district):not(#page-search-results):not([data-route-page="similarPosts"]){ width:var(--pc-route-page-final-width) !important; max-width:var(--pc-route-page-final-width) !important; margin-left:auto !important; margin-right:auto !important; box-sizing:border-box !important; overflow:visible !important; /* SP: không cho khung tự tạo thanh cuộn riêng */ } /* SP: pageShell/body là vùng cuộn chính để thanh trượt nằm sát mép phải trình duyệt. */ body, .pageShell{ overflow-x:hidden !important; } body:not(.photoViewer-open):not(.spPickerModal-open):not(.profileIntroSheet-open):not(.accountProfileSheet-open):not(.detailPhoneActionSheet-open):not(.publicProfilePage-open){ overflow-y:auto !important; } /* SP: các danh sách trong khung 1/3 về 1 cột, không bóp méo card. */ .routePage.is-active:not(#page-home):not([data-route-page="video"]):not(#page-category):not(#page-area-district):not(#page-search-results):not([data-route-page="similarPosts"]) .homePostsGrid, .routePage.is-active:not(#page-home):not([data-route-page="video"]):not(#page-category):not(#page-area-district):not(#page-search-results):not([data-route-page="similarPosts"]) .homePostsGrid.pcPostCardGrid{ display:grid !important; grid-template-columns:1fr !important; gap:14px !important; width:100% !important; max-width:100% !important; margin-left:auto !important; margin-right:auto !important; } .routePage.is-active:not(#page-home):not([data-route-page="video"]):not(#page-category):not(#page-area-district):not(#page-search-results):not([data-route-page="similarPosts"]) .postCard, .routePage.is-active:not(#page-home):not([data-route-page="video"]):not(#page-category):not(#page-area-district):not(#page-search-results):not([data-route-page="similarPosts"]) .postCard--boxed, .routePage.is-active:not(#page-home):not([data-route-page="video"]) .savedPostsCard, .routePage.is-active:not(#page-home):not([data-route-page="video"]) .myPostsCard, .routePage.is-active:not(#page-home):not([data-route-page="video"]) .adminPostCard, .routePage.is-active:not(#page-home):not([data-route-page="video"]) .adminUserCard, .routePage.is-active:not(#page-home):not([data-route-page="video"]) .accountMenu, .routePage.is-active:not(#page-home):not([data-route-page="video"]) .categoryList, .routePage.is-active:not(#page-home):not([data-route-page="video"]) .detailPage, .routePage.is-active:not(#page-home):not([data-route-page="video"]) .publicProfilePageRoute{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; } /* SP v343: riêng trang xem tin trước đây là fixed + overflow riêng nên scrollbar bị chui vào khung. Trên PC đổi về route thường để body cuộn tự nhiên, scrollbar nằm bên phải trình duyệt. */ body.is-post-detail-route{ overflow-y:auto !important; } .routePage[data-route-page="postDetail"].is-active{ position:relative !important; inset:auto !important; z-index:auto !important; height:auto !important; max-height:none !important; min-height:calc(100vh - var(--pc-topbar-height)) !important; overflow:visible !important; -webkit-overflow-scrolling:auto !important; touch-action:auto !important; } .routePage[data-route-page="postDetail"].is-active .detailPage, .routePage[data-route-page="postDetail"].is-active .detailGallery, .routePage[data-route-page="postDetail"].is-active .detailGallery__main, .routePage[data-route-page="postDetail"].is-active .detailGallery__stage, .routePage[data-route-page="postDetail"].is-active .detailPage__contentWrap{ width:100% !important; max-width:100% !important; height:auto !important; max-height:none !important; overflow:visible !important; box-sizing:border-box !important; } } /* SP v345: PC - sửa ảnh trang xem tin và màn hình xem ảnh full. Chỉ áp dụng PC, không đụng mobile, không đổi logic. */ @media (min-width:1024px){ /* SP: ảnh chính xem tin dùng 1 khung cao cố định 640px để đổi ảnh không nhảy layout. */ .routePage[data-route-page="postDetail"].is-active .detailGallery{ width:100% !important; max-width:100% !important; margin-left:auto !important; margin-right:auto !important; overflow:hidden !important; } .routePage[data-route-page="postDetail"].is-active .detailGallery__main, .routePage[data-route-page="postDetail"].is-active .detailGallery__stage{ height:640px !important; /* SP chỉnh chiều cao khung ảnh xem tin PC tại đây */ min-height:640px !important; max-height:640px !important; overflow:hidden !important; } .routePage[data-route-page="postDetail"].is-active .detailGallery__slide, .routePage[data-route-page="postDetail"].is-active .detailGallery__mainImg{ width:100% !important; height:100% !important; object-fit:contain !important; object-position:center center !important; background:#000 !important; } .routePage[data-route-page="postDetail"].is-active .detailGallery__nav{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:48px !important; height:72px !important; border:0 !important; outline:0 !important; background:transparent !important; box-shadow:none !important; color:#fff !important; font-size:56px !important; font-weight:500 !important; line-height:1 !important; cursor:pointer !important; } .routePage[data-route-page="postDetail"].is-active .detailGallery__thumbs{ justify-content:center !important; padding-left:12px !important; padding-right:12px !important; } .routePage[data-route-page="postDetail"].is-active .detailGallery__thumbs > .detailGallery__thumb:first-child, .routePage[data-route-page="postDetail"].is-active .detailGallery__thumbs > .detailGallery__thumb:last-child{ margin-left:0 !important; margin-right:0 !important; } /* SP: màn hình xem ảnh full PC có nút qua/lại dạng icon không viền, ảnh nhỏ canh giữa. */ .photoViewer__mainWrap{ overflow:hidden !important; } .photoViewer__nav{ position:absolute !important; top:50% !important; transform:translateY(-50%) !important; z-index:4 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; width:72px !important; height:96px !important; padding:0 !important; border:0 !important; outline:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; color:#fff !important; font-size:72px !important; font-weight:500 !important; line-height:1 !important; cursor:pointer !important; text-shadow:0 2px 8px rgba(0,0,0,.45) !important; } .photoViewer__nav--prev{left:18px !important;} .photoViewer__nav--next{right:18px !important;} .photoViewer__thumbs{ justify-content:center !important; padding-left:12px !important; padding-right:12px !important; } } /* SP v346: PC - ảnh xem tin full ngang, zoom ảnh lớn bằng chuột, nút qua/lại Tin đăng tương tự. Chỉ áp dụng PC, không ảnh hưởng mobile. */ @media (min-width:1024px){ /* SP: ảnh to ở trang xem tin phủ đủ 100% chiều ngang khung, không co nhỏ giữa nền đen. */ .routePage[data-route-page="postDetail"].is-active .detailGallery__slide, .routePage[data-route-page="postDetail"].is-active .detailGallery__mainImg{ width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; object-fit:cover !important; /* SP chỉnh kiểu phủ ảnh PC tại đây: cover = full ngang, contain = không cắt ảnh */ object-position:center center !important; } /* SP: vùng ảnh nhỏ giữ full chiều ngang khung; ít ảnh thì cân giữa, nhiều ảnh thì scroll ngang. */ .routePage[data-route-page="postDetail"].is-active .detailGallery__thumbs{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; overflow-x:auto !important; overflow-y:hidden !important; } /* SP: header Tin đăng tương tự có cụm nút qua/lại bên phải, mobile không thấy vì nằm trong media PC. */ .routePage[data-route-page="postDetail"].is-active .detailPage__similarHead{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; margin:0 0 12px !important; } .routePage[data-route-page="postDetail"].is-active .detailPage__similarHead .detailPage__similarTitle{ margin:0 !important; flex:1 1 auto !important; text-align:left !important; } .routePage[data-route-page="postDetail"].is-active .detailPage__similarNav{ flex:0 0 auto !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; } .routePage[data-route-page="postDetail"].is-active .detailPage__similarNavBtn{ appearance:none !important; -webkit-appearance:none !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; width:44px !important; /* SP chỉnh chiều ngang nút qua/lại Tin tương tự PC tại đây */ height:34px !important; /* SP chỉnh chiều cao nút qua/lại Tin tương tự PC tại đây */ padding:0 !important; border:1px solid rgba(0,0,0,.24) !important; border-radius:999px !important; background:#fff !important; color:#111 !important; font-size:30px !important; font-weight:500 !important; line-height:1 !important; text-align:center !important; cursor:pointer !important; box-sizing:border-box !important; } } @media (max-width:1023px){ .detailPage__similarNav{display:none !important;} } /* SP v349: PC - tăng riêng chiều ngang trang xem tin lên 760px và chỉnh cỡ chữ trường/nội dung. Chỉ áp dụng bản PC, không ảnh hưởng mobile, không đụng logic. */ @media (min-width:1024px){ .routePage[data-route-page="postDetail"].is-active{ width:760px !important; /* SP chỉnh chiều ngang trang xem tin PC tại đây */ max-width:760px !important; } .routePage[data-route-page="postDetail"].is-active .detailPage, .routePage[data-route-page="postDetail"].is-active .detailGallery, .routePage[data-route-page="postDetail"].is-active .detailGallery__main, .routePage[data-route-page="postDetail"].is-active .detailGallery__stage, .routePage[data-route-page="postDetail"].is-active .detailPage__contentWrap{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; } .routePage[data-route-page="postDetail"].is-active .detailPage__infoItem, .routePage[data-route-page="postDetail"].is-active .detailPage__addressFlow, .routePage[data-route-page="postDetail"].is-active .detailPage__addressPart, .routePage[data-route-page="postDetail"].is-active .detailPage__infoValue, .routePage[data-route-page="postDetail"].is-active .detailPage__labelWrap, .routePage[data-route-page="postDetail"].is-active .detailPage__infoItem .k{ font-size:16px !important; /* SP chỉnh cỡ chữ các trường thông tin xem tin PC tại đây */ } .routePage[data-route-page="postDetail"].is-active .detailPage__content{ font-size:18px !important; /* SP chỉnh cỡ chữ nội dung tin đăng PC tại đây */ line-height:1.6 !important; } } /* SP v350: PC - sửa lại từ v349 cho trang xem tin ăn chắc 800px và nội dung tin đăng 18px. Chỉ áp dụng PC, không ảnh hưởng mobile, không đụng logic. */ @media (min-width:1024px){ body.is-post-detail-route .pageShell{ display:block !important; } #page-post-detail.routePage.is-active, .routePage[data-route-page="postDetail"].is-active{ width:800px !important; /* SP chỉnh chiều ngang trang xem tin PC tại đây */ max-width:800px !important; min-width:0 !important; margin-left:auto !important; margin-right:auto !important; box-sizing:border-box !important; } #page-post-detail.routePage.is-active .detailPage, #page-post-detail.routePage.is-active .detailGallery, #page-post-detail.routePage.is-active .detailGallery__main, #page-post-detail.routePage.is-active .detailGallery__stage, #page-post-detail.routePage.is-active .detailPage__contentWrap, .routePage[data-route-page="postDetail"].is-active .detailPage, .routePage[data-route-page="postDetail"].is-active .detailGallery, .routePage[data-route-page="postDetail"].is-active .detailGallery__main, .routePage[data-route-page="postDetail"].is-active .detailGallery__stage, .routePage[data-route-page="postDetail"].is-active .detailPage__contentWrap{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; } #page-post-detail.routePage.is-active .detailPage__content, #page-post-detail.routePage.is-active .detailPage__content *, .routePage[data-route-page="postDetail"].is-active .detailPage__content, .routePage[data-route-page="postDetail"].is-active .detailPage__content *{ font-size:18px !important; /* SP chỉnh cỡ chữ nội dung tin đăng PC tại đây */ line-height:1.6 !important; } } /* SP v353: PC - thêm khối liên hệ bên phải trang xem tin, không ép hẹp ảnh/nội dung chính. Chỉ áp dụng PC, không ảnh hưởng điện thoại, không đụng logic. */ @media (min-width:1024px){ #page-post-detail.routePage.is-active, .routePage[data-route-page="postDetail"].is-active{ overflow:visible !important; } #page-post-detail.routePage.is-active .detailPage, .routePage[data-route-page="postDetail"].is-active .detailPage{ position:relative !important; /* SP: mốc để cột phải bám theo, không tham gia chia cột nên không làm co ảnh */ overflow:visible !important; } #page-post-detail.routePage.is-active .detailPage__pcSidePanel, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSidePanel{ position:absolute !important; top:0 !important; left:calc(100% + 48px) !important; /* SP chỉnh khoảng cách cột phải so với ảnh tại đây */ width:380px !important; /* SP chỉnh chiều ngang cột phải PC tại đây */ max-width:380px !important; z-index:3 !important; box-sizing:border-box !important; padding:12px 0 18px !important; background:#fff !important; color:#111 !important; } #page-post-detail.routePage.is-active .detailPage__pcSideTitle, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSideTitle{ font-size:20px !important; line-height:1.25 !important; font-weight:588 !important; margin:0 0 18px !important; } #page-post-detail.routePage.is-active .detailPage__pcSideCreatorBody, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSideCreatorBody{ display:flex !important; align-items:center !important; gap:14px !important; margin:0 0 26px !important; } #page-post-detail.routePage.is-active .detailPage__pcSidePanel .detailPage__creatorWrap, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSidePanel .detailPage__creatorWrap{ display:flex !important; align-items:center !important; gap:14px !important; flex-wrap:nowrap !important; width:100% !important; } #page-post-detail.routePage.is-active .detailPage__pcSidePanel .detailPage__creatorBtn, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSidePanel .detailPage__creatorBtn{ gap:12px !important; flex:1 1 auto !important; min-width:0 !important; } #page-post-detail.routePage.is-active .detailPage__pcSidePanel .detailPage__creatorName, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSidePanel .detailPage__creatorName{ font-size:18px !important; line-height:1.25 !important; font-weight:500 !important; } #page-post-detail.routePage.is-active .detailPage__pcSidePanel .detailPage__creatorAvatar, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSidePanel .detailPage__creatorAvatar{ width:64px !important; height:64px !important; flex-basis:64px !important; } #page-post-detail.routePage.is-active .detailPage__pcSidePanel .detailPage__creatorFollowBtn, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSidePanel .detailPage__creatorFollowBtn{ min-height:60px !important; padding:0 24px !important; border-radius:16px !important; background:#fff !important; color:var(--pink) !important; border:1px solid rgba(255,45,117,.35) !important; font-size:18px !important; font-weight:588 !important; white-space:nowrap !important; } #page-post-detail.routePage.is-active .detailPage__pcSidePanel .detailPage__contactActions, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSidePanel .detailPage__contactActions{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:12px !important; margin:0 0 26px !important; } #page-post-detail.routePage.is-active .detailPage__pcSidePanel .detailPage__contactBtn, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSidePanel .detailPage__contactBtn{ min-height:52px !important; border-radius:14px !important; font-size:18px !important; font-weight:500 !important; } #page-post-detail.routePage.is-active .detailPage__pcSidePanel .detailPage__quickChat, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSidePanel .detailPage__quickChat{ margin:0 0 28px !important; padding:0 !important; border:0 !important; } #page-post-detail.routePage.is-active .detailPage__pcSidePanel .detailPage__quickChatTitle, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSidePanel .detailPage__quickChatTitle{ font-size:18px !important; line-height:1.35 !important; font-weight:500 !important; margin:0 0 14px !important; } #page-post-detail.routePage.is-active .detailPage__pcSidePanel .detailPage__quickChatList, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSidePanel .detailPage__quickChatList{ display:flex !important; flex-direction:column !important; gap:12px !important; width:100% !important; } #page-post-detail.routePage.is-active .detailPage__pcSidePanel .detailPage__quickChatBtn, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSidePanel .detailPage__quickChatBtn{ width:100% !important; min-height:54px !important; padding:0 20px !important; border-radius:999px !important; font-size:18px !important; font-weight:500 !important; } #page-post-detail.routePage.is-active .detailPage__pcSideMeta, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSideMeta{ display:flex !important; flex-direction:column !important; gap:12px !important; padding:0 24px !important; } #page-post-detail.routePage.is-active .detailPage__pcSideMeta .detailPage__metaItem, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSideMeta .detailPage__metaItem, #page-post-detail.routePage.is-active .detailPage__pcSideMeta .detailPage__metaItem .k, #page-post-detail.routePage.is-active .detailPage__pcSideMeta .detailPage__metaItem .v, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSideMeta .detailPage__metaItem .k, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSideMeta .detailPage__metaItem .v{ font-size:18px !important; line-height:1.35 !important; font-weight:500 !important; } /* SP: PC ẩn bản cũ trong nội dung để chỉ còn cụm bên phải; mobile không bị ảnh hưởng. */ #page-post-detail.routePage.is-active .detailPage__contentWrap > .detailPage__section .detailPage__quickChat, #page-post-detail.routePage.is-active .detailPage__contentWrap > .detailPage__section .detailPage__contactActions, #page-post-detail.routePage.is-active .detailPage__contentWrap > .detailPage__section .detailPage__metaRow, .routePage[data-route-page="postDetail"].is-active .detailPage__contentWrap > .detailPage__section .detailPage__quickChat, .routePage[data-route-page="postDetail"].is-active .detailPage__contentWrap > .detailPage__section .detailPage__contactActions, .routePage[data-route-page="postDetail"].is-active .detailPage__contentWrap > .detailPage__section .detailPage__metaRow{ display:none !important; } } @media (max-width:1023px){ .detailPage__pcSidePanel{display:none !important;} } /* SP v358: PC only - nút Tin đăng tương tự giống 100% cụm Thành Phố Hồ Chí Minh + thu nhỏ cụm Người đăng bên phải. */ @media (min-width:1024px){ /* SP: đổi cụm nút qua/lại Tin đăng tương tự PC sang dạng 1 pill dài giống Thành Phố Hồ Chí Minh. */ #page-post-detail.routePage.is-active .detailPage__similarNav, .routePage[data-route-page="postDetail"].is-active .detailPage__similarNav{ width:112px !important; /* SP: chiều ngang cụm nút qua/lại Tin đăng tương tự PC */ height:38px !important; /* SP: chiều cao cụm nút qua/lại Tin đăng tương tự PC */ display:grid !important; grid-template-columns:1fr 1px 1fr !important; align-items:center !important; justify-items:stretch !important; gap:0 !important; border:1px solid rgba(0,0,0,.22) !important; border-radius:999px !important; background:#fff !important; overflow:hidden !important; box-sizing:border-box !important; } #page-post-detail.routePage.is-active .detailPage__similarNav::before, .routePage[data-route-page="postDetail"].is-active .detailPage__similarNav::before{ content:"" !important; grid-column:2 !important; grid-row:1 !important; width:1px !important; height:22px !important; background:rgba(0,0,0,.16) !important; align-self:center !important; justify-self:center !important; pointer-events:none !important; } #page-post-detail.routePage.is-active .detailPage__similarNavBtn, .routePage[data-route-page="postDetail"].is-active .detailPage__similarNavBtn{ position:relative !important; width:100% !important; height:38px !important; min-width:0 !important; min-height:0 !important; display:block !important; border:0 !important; border-radius:0 !important; background:transparent !important; color:#111 !important; font-size:0 !important; line-height:0 !important; padding:0 !important; margin:0 !important; cursor:pointer !important; box-sizing:border-box !important; -webkit-tap-highlight-color:transparent !important; } #page-post-detail.routePage.is-active .detailPage__similarNavBtn::before, .routePage[data-route-page="postDetail"].is-active .detailPage__similarNavBtn::before{ content:"" !important; position:absolute !important; left:50% !important; top:50% !important; width:7px !important; /* SP: độ lớn mũi tên Tin đăng tương tự PC */ height:7px !important; /* SP: độ lớn mũi tên Tin đăng tương tự PC */ border-top:2px solid #111 !important; border-right:2px solid #111 !important; transform-origin:center !important; } #page-post-detail.routePage.is-active .js-detail-similar-prev::before, .routePage[data-route-page="postDetail"].is-active .js-detail-similar-prev::before{ transform:translate(-40%, -50%) rotate(-135deg) !important; } #page-post-detail.routePage.is-active .js-detail-similar-next::before, .routePage[data-route-page="postDetail"].is-active .js-detail-similar-next::before{ transform:translate(-60%, -50%) rotate(45deg) !important; } #page-post-detail.routePage.is-active .detailPage__similarNavBtn:hover, .routePage[data-route-page="postDetail"].is-active .detailPage__similarNavBtn:hover{ background:#f7f7f7 !important; } /* SP: thu nhỏ nút bên phải trang xem tin PC, nút ôm vừa chữ, không kéo quá to. */ #page-post-detail.routePage.is-active .detailPage__pcSidePanel .detailPage__creatorFollowBtn, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSidePanel .detailPage__creatorFollowBtn{ flex:0 0 auto !important; width:auto !important; min-width:0 !important; min-height:44px !important; height:44px !important; padding:0 18px !important; /* SP: chỉnh độ rộng nút Theo dõi PC tại đây */ border-radius:14px !important; font-size:18px !important; line-height:1 !important; } #page-post-detail.routePage.is-active .detailPage__pcSidePanel .detailPage__contactActions, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSidePanel .detailPage__contactActions{ display:flex !important; align-items:center !important; justify-content:flex-start !important; gap:12px !important; margin:0 0 24px !important; } #page-post-detail.routePage.is-active .detailPage__pcSidePanel .detailPage__contactBtn, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSidePanel .detailPage__contactBtn{ flex:0 0 auto !important; width:auto !important; min-width:0 !important; min-height:44px !important; height:44px !important; padding:0 22px !important; /* SP: chỉnh độ rộng nút Chat / Ấn để hiện số PC tại đây */ border-radius:14px !important; font-size:18px !important; line-height:1 !important; } #page-post-detail.routePage.is-active .detailPage__pcSidePanel .detailPage__quickChatList, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSidePanel .detailPage__quickChatList{ align-items:flex-start !important; } #page-post-detail.routePage.is-active .detailPage__pcSidePanel .detailPage__quickChatBtn, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSidePanel .detailPage__quickChatBtn{ width:auto !important; max-width:100% !important; min-width:0 !important; min-height:44px !important; height:44px !important; padding:0 18px !important; /* SP: chỉnh độ rộng nút chat nhanh PC tại đây */ border-radius:999px !important; font-size:18px !important; line-height:1 !important; } #page-post-detail.routePage.is-active .detailPage__pcSideMeta, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSideMeta{ padding:0 !important; } } /* SP v359: PC only - sắp lại khối Người đăng, nút ôm chữ và font-weight 588. */ @media (min-width:1024px){ #page-post-detail.routePage.is-active .detailPage__pcSideCreatorBody, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSideCreatorBody{ display:block !important; margin:0 0 18px !important; /* SP: khoảng cách từ khối người đăng xuống nút Chat/Ấn để hiện số PC */ } #page-post-detail.routePage.is-active .detailPage__pcSidePanel .detailPage__creatorWrap, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSidePanel .detailPage__creatorWrap{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:10px !important; /* SP: khoảng cách tên/avatar với nút Theo dõi PC */ width:auto !important; } #page-post-detail.routePage.is-active .detailPage__pcSidePanel .detailPage__creatorBtn, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSidePanel .detailPage__creatorBtn{ flex:0 0 auto !important; width:auto !important; min-width:0 !important; gap:12px !important; } #page-post-detail.routePage.is-active .detailPage__pcSidePanel .detailPage__creatorName, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSidePanel .detailPage__creatorName{ font-size:18px !important; font-weight:588 !important; line-height:1.25 !important; } #page-post-detail.routePage.is-active .detailPage__pcSidePanel .detailPage__creatorFollowBtn, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSidePanel .detailPage__creatorFollowBtn{ width:auto !important; min-width:0 !important; height:40px !important; min-height:40px !important; padding:0 18px !important; /* SP: độ rộng nút Theo dõi PC */ border-radius:14px !important; font-size:18px !important; font-weight:588 !important; line-height:1 !important; align-self:flex-start !important; } #page-post-detail.routePage.is-active .detailPage__pcSidePanel .detailPage__contactActions, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSidePanel .detailPage__contactActions{ display:flex !important; align-items:center !important; justify-content:flex-start !important; gap:12px !important; margin:0 0 22px !important; } #page-post-detail.routePage.is-active .detailPage__pcSidePanel .detailPage__contactBtn, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSidePanel .detailPage__contactBtn{ flex:0 0 auto !important; width:auto !important; min-width:0 !important; height:40px !important; min-height:40px !important; padding:0 18px !important; /* SP: độ rộng nút Chat / Ấn để hiện số PC */ border-radius:14px !important; font-size:18px !important; font-weight:588 !important; line-height:1 !important; } #page-post-detail.routePage.is-active .detailPage__pcSidePanel .detailPage__quickChatTitle, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSidePanel .detailPage__quickChatTitle{ font-size:18px !important; font-weight:588 !important; margin:0 0 12px !important; } #page-post-detail.routePage.is-active .detailPage__pcSidePanel .detailPage__quickChatBtn, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSidePanel .detailPage__quickChatBtn{ width:auto !important; max-width:100% !important; min-width:0 !important; height:40px !important; min-height:40px !important; padding:0 18px !important; /* SP: độ rộng nút chat nhanh PC */ border-radius:999px !important; font-size:18px !important; font-weight:588 !important; line-height:1 !important; } #page-post-detail.routePage.is-active .detailPage__pcSideMeta .detailPage__metaItem, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSideMeta .detailPage__metaItem, #page-post-detail.routePage.is-active .detailPage__pcSideMeta .detailPage__metaItem .k, #page-post-detail.routePage.is-active .detailPage__pcSideMeta .detailPage__metaItem .v, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSideMeta .detailPage__metaItem .k, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSideMeta .detailPage__metaItem .v{ font-size:18px !important; font-weight:588 !important; line-height:1.35 !important; } } /* SP v360: PC only - thêm viền nhẹ cho trang xem tin để chia vùng rõ hơn, không đụng mobile, không đụng logic. */ @media (min-width:1024px){ #page-post-detail.routePage.is-active, .routePage[data-route-page="postDetail"].is-active{ --pc-detail-soft-border:rgba(17,24,39,.14); /* SP: màu viền nhẹ cho trang xem tin PC */ --pc-detail-soft-shadow:0 10px 28px rgba(17,24,39,.035); /* SP: bóng rất nhẹ cho khối xem tin PC */ --pc-detail-card-radius:18px; /* SP: bo góc các khối xem tin PC */ } /* SP: viền nhẹ quanh khung ảnh chính. */ #page-post-detail.routePage.is-active .detailGallery, .routePage[data-route-page="postDetail"].is-active .detailGallery{ border:1px solid var(--pc-detail-soft-border) !important; border-radius:var(--pc-detail-card-radius) !important; box-shadow:var(--pc-detail-soft-shadow) !important; background:#fff !important; overflow:hidden !important; box-sizing:border-box !important; margin-bottom:12px !important; } /* SP: khối nội dung chính có viền tổng thể để nhìn rõ vùng xem tin. */ #page-post-detail.routePage.is-active .detailPage__contentWrap, .routePage[data-route-page="postDetail"].is-active .detailPage__contentWrap{ border:1px solid var(--pc-detail-soft-border) !important; border-radius:var(--pc-detail-card-radius) !important; box-shadow:var(--pc-detail-soft-shadow) !important; background:#fff !important; padding:14px 16px 16px !important; box-sizing:border-box !important; } /* SP: các vùng con bên trong tách nhẹ bằng nền/viền mảnh, không làm nặng giao diện. */ #page-post-detail.routePage.is-active .detailPage__section, .routePage[data-route-page="postDetail"].is-active .detailPage__section, #page-post-detail.routePage.is-active .detailPage__similarWrap, .routePage[data-route-page="postDetail"].is-active .detailPage__similarWrap, #page-post-detail.routePage.is-active .detailPage__quickCategories, .routePage[data-route-page="postDetail"].is-active .detailPage__quickCategories{ border:1px solid rgba(17,24,39,.10) !important; border-radius:16px !important; background:#fff !important; box-shadow:0 6px 18px rgba(17,24,39,.025) !important; padding:12px !important; margin-top:12px !important; box-sizing:border-box !important; } #page-post-detail.routePage.is-active .detailPage__section--info, .routePage[data-route-page="postDetail"].is-active .detailPage__section--info{ margin-top:12px !important; } #page-post-detail.routePage.is-active .detailPage__similarWrap, .routePage[data-route-page="postDetail"].is-active .detailPage__similarWrap, #page-post-detail.routePage.is-active .detailPage__quickCategories, .routePage[data-route-page="postDetail"].is-active .detailPage__quickCategories{ margin-left:0 !important; margin-right:0 !important; padding-top:12px !important; } /* SP: khung Người đăng bên phải có viền nhẹ đồng bộ với các vùng xem tin. */ #page-post-detail.routePage.is-active .detailPage__pcSidePanel, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSidePanel{ border:1px solid var(--pc-detail-soft-border) !important; border-radius:var(--pc-detail-card-radius) !important; box-shadow:var(--pc-detail-soft-shadow) !important; padding:14px 18px 18px !important; background:#fff !important; } } /* SP v362: PC only - giữ trang xem tin canh trái bằng logo top bar + Tin khác của người đăng hiển thị 8 bài dưới mép ảnh. */ @media (min-width:1024px){ :root{ --pc-detail-left-align: max(18px, calc((100vw - 1180px) / 2 + 18px)); /* SP: mép trái trang xem tin PC canh bằng logo top bar */ } #page-post-detail.routePage.is-active, .routePage[data-route-page="postDetail"].is-active{ margin-left:var(--pc-detail-left-align) !important; margin-right:auto !important; } /* SP v365: PC/tablet - ô quảng cáo bên phải xem tin, nằm dưới Ngày đăng và trên Tin khác của người đăng. */ #page-post-detail.routePage.is-active .detailPage__pcSideAd, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSideAd{ position:absolute !important; top:528px !important; /* SP: chỉnh vị trí ô quảng cáo dưới ngày đăng PC tại đây */ left:calc(100% + 48px) !important; width:380px !important; max-width:380px !important; box-sizing:border-box !important; z-index:2 !important; } #page-post-detail.routePage.is-active .detailPage__pcSideAd .homeAdBanner, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSideAd .homeAdBanner{ width:100% !important; max-width:100% !important; margin:0 !important; padding:8px 10px 6px !important; /* SP: chỉnh độ cao ô quảng cáo cột phải PC tại đây */ border-width:3px !important; border-radius:14px !important; } #page-post-detail.routePage.is-active .detailPage__pcSideAd .homeAdBanner__slide, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSideAd .homeAdBanner__slide{ min-height:40px !important; gap:8px !important; } #page-post-detail.routePage.is-active .detailPage__pcSideAd .homeAdBanner__icon, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSideAd .homeAdBanner__icon{ flex-basis:30px !important; width:30px !important; height:30px !important; border-radius:10px !important; font-size:18px !important; } #page-post-detail.routePage.is-active .detailPage__pcSideAd .homeAdBanner__title, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSideAd .homeAdBanner__title{ font-size:16px !important; font-weight:588 !important; } #page-post-detail.routePage.is-active .detailPage__pcSideAd .homeAdBanner__subtitle, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSideAd .homeAdBanner__subtitle{ font-size:13px !important; } #page-post-detail.routePage.is-active .detailPage__pcSideAd .homeAdBanner__cta, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSideAd .homeAdBanner__cta{ flex-basis:28px !important; width:28px !important; height:28px !important; font-size:22px !important; } #page-post-detail.routePage.is-active .detailPage__pcSideAd .homeAdBanner__dots, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSideAd .homeAdBanner__dots{ margin-top:4px !important; } #page-post-detail.routePage.is-active .detailPage__ownerOtherPosts, .routePage[data-route-page="postDetail"].is-active .detailPage__ownerOtherPosts{ position:absolute !important; top:658px !important; /* SP: bắt đầu ngay dưới mép ảnh lớn PC 640px + khoảng hở nhẹ */ left:calc(100% + 48px) !important; width:380px !important; max-width:380px !important; box-sizing:border-box !important; background:#fff !important; border:1px solid rgba(17,24,39,.14) !important; border-radius:18px !important; box-shadow:0 10px 28px rgba(17,24,39,.035) !important; padding:14px !important; z-index:2 !important; } #page-post-detail.routePage.is-active .detailPage__ownerOtherHead, .routePage[data-route-page="postDetail"].is-active .detailPage__ownerOtherHead{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; margin:0 0 12px !important; } #page-post-detail.routePage.is-active .detailPage__ownerOtherHeading, .routePage[data-route-page="postDetail"].is-active .detailPage__ownerOtherHeading{ margin:0 !important; font-size:20px !important; line-height:1.25 !important; font-weight:588 !important; color:#111 !important; } #page-post-detail.routePage.is-active .detailPage__ownerOtherMore, .routePage[data-route-page="postDetail"].is-active .detailPage__ownerOtherMore{ border:0 !important; background:transparent !important; color:var(--pink) !important; font-size:16px !important; font-weight:588 !important; padding:4px 0 !important; cursor:pointer !important; white-space:nowrap !important; } #page-post-detail.routePage.is-active .detailPage__ownerOtherList, .routePage[data-route-page="postDetail"].is-active .detailPage__ownerOtherList{ display:flex !important; flex-direction:column !important; gap:12px !important; } #page-post-detail.routePage.is-active .detailPage__ownerOtherCard, .routePage[data-route-page="postDetail"].is-active .detailPage__ownerOtherCard{ width:100% !important; display:grid !important; grid-template-columns:112px 1fr !important; gap:12px !important; align-items:stretch !important; padding:8px !important; border:1px solid rgba(17,24,39,.10) !important; border-radius:14px !important; background:#fff !important; cursor:pointer !important; text-align:left !important; box-sizing:border-box !important; } #page-post-detail.routePage.is-active .detailPage__ownerOtherCard:hover, .routePage[data-route-page="postDetail"].is-active .detailPage__ownerOtherCard:hover{ border-color:rgba(255,45,117,.28) !important; box-shadow:0 8px 22px rgba(17,24,39,.05) !important; } #page-post-detail.routePage.is-active .detailPage__ownerOtherThumb, .routePage[data-route-page="postDetail"].is-active .detailPage__ownerOtherThumb{ display:block !important; width:112px !important; height:92px !important; border-radius:12px !important; overflow:hidden !important; background:#f3f4f6 !important; } #page-post-detail.routePage.is-active .detailPage__ownerOtherThumb img, .routePage[data-route-page="postDetail"].is-active .detailPage__ownerOtherThumb img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; } #page-post-detail.routePage.is-active .detailPage__ownerOtherThumbEmpty, .routePage[data-route-page="postDetail"].is-active .detailPage__ownerOtherThumbEmpty{ width:100% !important; height:100% !important; display:flex !important; align-items:center !important; justify-content:center !important; font-size:12px !important; color:rgba(0,0,0,.45) !important; text-align:center !important; } #page-post-detail.routePage.is-active .detailPage__ownerOtherInfo, .routePage[data-route-page="postDetail"].is-active .detailPage__ownerOtherInfo{ min-width:0 !important; display:flex !important; flex-direction:column !important; justify-content:center !important; gap:5px !important; } #page-post-detail.routePage.is-active .detailPage__ownerOtherTitle, .routePage[data-route-page="postDetail"].is-active .detailPage__ownerOtherTitle{ display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important; overflow:hidden !important; font-size:16px !important; line-height:1.25 !important; font-weight:588 !important; color:#111 !important; } #page-post-detail.routePage.is-active .detailPage__ownerOtherPrice, .routePage[data-route-page="postDetail"].is-active .detailPage__ownerOtherPrice{ font-size:16px !important; line-height:1.2 !important; font-weight:700 !important; color:var(--pink) !important; } #page-post-detail.routePage.is-active .detailPage__ownerOtherPlace, .routePage[data-route-page="postDetail"].is-active .detailPage__ownerOtherPlace{ font-size:14px !important; line-height:1.25 !important; font-weight:400 !important; color:rgba(0,0,0,.62) !important; } } @media (max-width:1023px){ .detailPage__ownerOtherPosts, .detailPage__pcSideAd{display:none !important;} } /* SP v364: iPad/tablet only - giữ PC y cũ, thu khung xem tin và cột phải để không bị mất bên phải. */ @media (min-width:1024px) and (max-width:1279px) and (hover:none){ :root{ --ipad-detail-page-edge:18px; /* SP: khoảng cách mép trái/phải riêng cho iPad */ --ipad-detail-side-gap:20px; /* SP: khoảng cách giữa ảnh/nội dung và cột phải riêng cho iPad */ --ipad-detail-side-width:clamp(280px, 30vw, 320px); /* SP: chiều ngang cột phải riêng cho iPad */ --ipad-detail-main-width:calc(100vw - (var(--ipad-detail-page-edge) * 2) - var(--ipad-detail-side-gap) - var(--ipad-detail-side-width)); /* SP: tự tính chiều ngang nội dung chính để không tràn iPad */ --pc-detail-left-align:var(--ipad-detail-page-edge); /* SP: iPad vẫn canh trái nhưng không kéo cứng như PC */ } #page-post-detail.routePage.is-active, .routePage[data-route-page="postDetail"].is-active{ width:var(--ipad-detail-main-width) !important; max-width:var(--ipad-detail-main-width) !important; margin-left:var(--ipad-detail-page-edge) !important; margin-right:auto !important; overflow:visible !important; } #page-post-detail.routePage.is-active .detailPage__pcSidePanel, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSidePanel, #page-post-detail.routePage.is-active .detailPage__pcSideAd, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSideAd, #page-post-detail.routePage.is-active .detailPage__ownerOtherPosts, .routePage[data-route-page="postDetail"].is-active .detailPage__ownerOtherPosts{ left:calc(100% + var(--ipad-detail-side-gap)) !important; width:var(--ipad-detail-side-width) !important; max-width:var(--ipad-detail-side-width) !important; } #page-post-detail.routePage.is-active .detailPage__ownerOtherCard, .routePage[data-route-page="postDetail"].is-active .detailPage__ownerOtherCard{ grid-template-columns:92px 1fr !important; gap:10px !important; } #page-post-detail.routePage.is-active .detailPage__ownerOtherThumb, .routePage[data-route-page="postDetail"].is-active .detailPage__ownerOtherThumb{ width:92px !important; height:76px !important; } } /* SP v393: PC - thêm khung ngoài cho Trang cá nhân, Quản lí tin đăng, Quản lí video. Chỉ áp dụng PC/tablet PC, không đụng mobile, không đụng logic, không đụng trang Tạo tin. */ @media (min-width:1024px){ body.is-account-public-profile-route .routePage[data-route-page="accountPublicProfile"].is-active, body.is-account-my-posts-route .routePage[data-route-page="accountMyPosts"].is-active, body.is-account-my-videos-route .routePage[data-route-page="accountMyVideos"].is-active, body.is-account-saved-posts-route .routePage[data-route-page="accountSavedPosts"].is-active{ border-left:1px solid rgba(0,0,0,.10) !important; /* SP chỉnh viền trái khung PC tại đây */ border-right:1px solid rgba(0,0,0,.10) !important; /* SP chỉnh viền phải khung PC tại đây */ box-shadow:0 0 0 1px rgba(0,0,0,.025), 0 8px 24px rgba(0,0,0,.035) !important; /* SP chỉnh bóng khung PC tại đây */ background:#fff !important; } body.is-account-public-profile-route .publicProfilePageRoute, body.is-account-my-posts-route .myPostsPage, body.is-account-my-videos-route .myVideosPage, body.is-account-saved-posts-route .savedPostsPage{ width:100% !important; max-width:100% !important; min-height:calc(100vh - var(--pc-topbar-height)) !important; box-sizing:border-box !important; background:#fff !important; } body.is-account-my-posts-route .myPostsList, body.is-account-my-videos-route .myVideosList, body.is-account-saved-posts-route .savedPostsList, body.is-account-saved-posts-route .savedVideosList{ padding-left:14px !important; /* SP chỉnh lề trái danh sách trong khung PC tại đây */ padding-right:14px !important; /* SP chỉnh lề phải danh sách trong khung PC tại đây */ box-sizing:border-box !important; } body.is-account-my-posts-route .myPostsCount, body.is-account-my-videos-route .myVideosEmpty, body.is-account-saved-posts-route .savedPostsCount, body.is-account-saved-posts-route .savedPostsTabs, body.is-account-saved-posts-route .savedPostsEmpty{ margin-left:14px !important; /* SP chỉnh lề chữ đếm/trống trong khung PC tại đây */ margin-right:14px !important; } } /* SP v395: PC - thêm khung ngoài cho trang Đăng tin/Tạo bài. Chỉ áp dụng PC/tablet PC, không đụng mobile, không đụng logic, không đụng trang chọn danh mục. */ @media (min-width:1024px){ body.is-create-form-route #page-create.routePage.is-active, body.is-create-form-route .routePage[data-route-page="create"].is-active{ border-left:1px solid rgba(0,0,0,.10) !important; /* SP chỉnh viền trái khung đăng tin PC tại đây */ border-right:1px solid rgba(0,0,0,.10) !important; /* SP chỉnh viền phải khung đăng tin PC tại đây */ box-shadow:0 0 0 1px rgba(0,0,0,.025), 0 8px 24px rgba(0,0,0,.035) !important; /* SP chỉnh bóng khung đăng tin PC tại đây */ background:#fff !important; } body.is-create-form-route #page-create.routePage.is-active .createPage--route, body.is-create-form-route .routePage[data-route-page="create"].is-active .createPage--route{ width:100% !important; max-width:100% !important; min-height:calc(100vh - var(--pc-topbar-height)) !important; box-sizing:border-box !important; background:#fff !important; } } /* SP v396: PC - các trang danh mục cha, danh mục con, TP.HCM và Tin đăng tương tự hiển thị lưới 3 card ngang giống trang chủ. Không đụng mobile. */ @media (min-width:1024px){ body.is-pc-post-list-layout .routePage.is-active#page-category, body.is-pc-post-list-layout .routePage.is-active#page-area-district, body.is-pc-post-list-layout .routePage.is-active[data-route-page="similarPosts"]{ width:min(100%, var(--pc-post-list-width, 930px)) !important; max-width:var(--pc-post-list-width, 930px) !important; margin-left:auto !important; margin-right:auto !important; box-sizing:border-box !important; } body.is-pc-post-list-layout .routePage.is-active#page-category .homePostsGrid, body.is-pc-post-list-layout .routePage.is-active#page-area-district .homePostsGrid, body.is-pc-post-list-layout .routePage.is-active[data-route-page="similarPosts"] .homePostsGrid, body.is-pc-post-list-layout .routePage.is-active#page-category .homePostsGrid.pcPostCardGrid, body.is-pc-post-list-layout .routePage.is-active#page-area-district .homePostsGrid.pcPostCardGrid, body.is-pc-post-list-layout .routePage.is-active[data-route-page="similarPosts"] .homePostsGrid.pcPostCardGrid{ display:grid !important; grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:var(--pc-post-card-gap-y, 18px) var(--pc-post-card-gap-x, 18px) !important; align-items:start !important; width:100% !important; max-width:100% !important; margin-left:auto !important; margin-right:auto !important; } body.is-pc-post-list-layout .routePage.is-active#page-category .postCard, body.is-pc-post-list-layout .routePage.is-active#page-area-district .postCard, body.is-pc-post-list-layout .routePage.is-active[data-route-page="similarPosts"] .postCard, body.is-pc-post-list-layout .routePage.is-active#page-category .postCard--boxed, body.is-pc-post-list-layout .routePage.is-active#page-area-district .postCard--boxed, body.is-pc-post-list-layout .routePage.is-active[data-route-page="similarPosts"] .postCard--boxed{ min-width:0 !important; width:100% !important; max-width:100% !important; height:100% !important; box-sizing:border-box !important; } body.is-pc-post-list-layout .routePage.is-active#page-category .categoryList, body.is-pc-post-list-layout .routePage.is-active#page-category .categoryPageHeader, body.is-pc-post-list-layout .routePage.is-active#page-area-district .categoryPageHeader, body.is-pc-post-list-layout .routePage.is-active[data-route-page="similarPosts"] .similarPostsPage__head{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; } body.is-pc-post-list-layout .routePage.is-active[data-route-page="similarPosts"] .similarPostsPage{ width:100% !important; max-width:100% !important; } } /* SP v397: PC - sửa riêng TP.HCM và Tin đăng tương tự: bỏ khung 1 cột, ép về lưới 3 card giống Tin mới đăng trang chủ. */ @media (min-width:1024px){ #page-similarPosts.routePage.is-active, .routePage[data-route-page="similarPosts"].is-active{ width:min(100%, var(--pc-post-list-width, 930px)) !important; /* SP: chiều rộng lưới 3 card PC */ max-width:var(--pc-post-list-width, 930px) !important; margin-left:auto !important; margin-right:auto !important; box-sizing:border-box !important; } #page-similarPosts.routePage.is-active .homePostsGrid, .routePage[data-route-page="similarPosts"].is-active .homePostsGrid, #page-similarPosts.routePage.is-active .similarPostsPage__grid, .routePage[data-route-page="similarPosts"].is-active .similarPostsPage__grid{ display:grid !important; grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:var(--pc-post-card-gap-y, 18px) var(--pc-post-card-gap-x, 18px) !important; width:100% !important; max-width:100% !important; padding-left:0 !important; padding-right:0 !important; box-sizing:border-box !important; } #page-similarPosts.routePage.is-active .postCard, .routePage[data-route-page="similarPosts"].is-active .postCard, #page-similarPosts.routePage.is-active .postCard--boxed, .routePage[data-route-page="similarPosts"].is-active .postCard--boxed{ width:100% !important; max-width:100% !important; min-width:0 !important; height:100% !important; box-sizing:border-box !important; } } /* SP v424: PC - toàn bộ phần bấm được rê chuột hiện bàn tay, không ảnh hưởng điện thoại. */ @media (min-width:1024px){ button:not(:disabled), a[href], input[type="button"]:not(:disabled), input[type="submit"]:not(:disabled), input[type="reset"]:not(:disabled), select:not(:disabled), summary, [role="button"], [tabindex]:not([tabindex="-1"]), [onclick], [data-route], [data-action], [data-video-action], [data-video-tab], [data-contact-tab], [data-filter], [data-home-filter], [data-profile-follow], [data-profile-chat], .postCard, .postCard *, .pcPostCardWrapper, .js-open-post, .js-open-creator-profile, .detailPage__creatorBtn, .detailPage__creatorFollowBtn, .detailPage__mediaMain, .detailPage__mediaMain *, .detailPage__thumb, .detailPage__thumb *, .detailPage__image, .detailPage__image *, .detailPage__galleryImage, .videoCard, .videoCard *, .videoReel, .videoReel *, .publicProfilePage__avatarUploadBtn, .publicProfilePage__action, .homeAdBanner, .homeAdBanner *, .homeDistrictLink, .homeDistrictLink *, .categoryCard, .categoryCard *, .savedPostCard, .savedPostCard *, .chatThreadItem, .chatThreadItem *, .contactUserItem, .contactUserItem *{ cursor:pointer !important; } button:disabled, input:disabled, select:disabled, textarea:disabled, [aria-disabled="true"]{ cursor:default !important; } } /* SP v476: iPad/tablet - chặn trang xem tin PC bị tràn ngang và bị cắt bên phải. Chỉ áp dụng 1024px-1279px, PC lớn từ 1280px trở lên giữ nguyên layout cột phải. */ @media (min-width:1024px) and (max-width:1279px){ :root{ --ipad-detail-safe-edge:16px; /* SP: khoảng cách mép trái/phải trang xem tin trên iPad */ } body.is-post-detail-route, body.is-post-detail-route .pageShell{ overflow-x:hidden !important; } #page-post-detail.routePage.is-active, .routePage[data-route-page="postDetail"].is-active{ width:calc(100vw - (var(--ipad-detail-safe-edge) * 2)) !important; max-width:calc(100vw - (var(--ipad-detail-safe-edge) * 2)) !important; min-width:0 !important; margin-left:auto !important; margin-right:auto !important; overflow:visible !important; box-sizing:border-box !important; } #page-post-detail.routePage.is-active .detailPage, #page-post-detail.routePage.is-active .detailGallery, #page-post-detail.routePage.is-active .detailGallery__main, #page-post-detail.routePage.is-active .detailGallery__stage, #page-post-detail.routePage.is-active .detailPage__contentWrap, .routePage[data-route-page="postDetail"].is-active .detailPage, .routePage[data-route-page="postDetail"].is-active .detailGallery, .routePage[data-route-page="postDetail"].is-active .detailGallery__main, .routePage[data-route-page="postDetail"].is-active .detailGallery__stage, .routePage[data-route-page="postDetail"].is-active .detailPage__contentWrap{ width:100% !important; max-width:100% !important; min-width:0 !important; margin-left:0 !important; margin-right:0 !important; box-sizing:border-box !important; } /* SP: iPad không dùng cột phải PC để tránh tổng chiều ngang vượt màn hình. */ #page-post-detail.routePage.is-active .detailPage__pcSidePanel, #page-post-detail.routePage.is-active .detailPage__pcSideAd, #page-post-detail.routePage.is-active .detailPage__ownerOtherPosts, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSidePanel, .routePage[data-route-page="postDetail"].is-active .detailPage__pcSideAd, .routePage[data-route-page="postDetail"].is-active .detailPage__ownerOtherPosts{ display:none !important; } /* SP: hiện lại cụm liên hệ/meta trong nội dung chính cho iPad vì đã tắt cột phải PC. */ #page-post-detail.routePage.is-active .detailPage__contentWrap > .detailPage__section .detailPage__quickChat, #page-post-detail.routePage.is-active .detailPage__contentWrap > .detailPage__section .detailPage__contactActions, #page-post-detail.routePage.is-active .detailPage__contentWrap > .detailPage__section .detailPage__metaRow, .routePage[data-route-page="postDetail"].is-active .detailPage__contentWrap > .detailPage__section .detailPage__quickChat, .routePage[data-route-page="postDetail"].is-active .detailPage__contentWrap > .detailPage__section .detailPage__contactActions, .routePage[data-route-page="postDetail"].is-active .detailPage__contentWrap > .detailPage__section .detailPage__metaRow{ display:flex !important; } #page-post-detail.routePage.is-active .detailGallery__main, #page-post-detail.routePage.is-active .detailGallery__stage, .routePage[data-route-page="postDetail"].is-active .detailGallery__main, .routePage[data-route-page="postDetail"].is-active .detailGallery__stage{ height:min(640px, 62vw) !important; min-height:min(640px, 62vw) !important; max-height:min(640px, 62vw) !important; } } /* SP v477: iPad/tablet - sửa chat nhanh không bị lệch và hiện Tin đăng khác dưới thông tin người đăng. Chỉ áp dụng 1024px-1279px, PC lớn và mobile giữ nguyên. */ .detailPage__ownerOtherPostsIpad{display:none;} @media (min-width:1024px) and (max-width:1279px){ #page-post-detail.routePage.is-active .detailPage__contentWrap > .detailPage__section .detailPage__quickChat, .routePage[data-route-page="postDetail"].is-active .detailPage__contentWrap > .detailPage__section .detailPage__quickChat{ display:block !important; width:100% !important; max-width:100% !important; box-sizing:border-box !important; clear:both !important; } #page-post-detail.routePage.is-active .detailPage__contentWrap > .detailPage__section .detailPage__quickChatList, .routePage[data-route-page="postDetail"].is-active .detailPage__contentWrap > .detailPage__section .detailPage__quickChatList{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:flex-start !important; width:100% !important; max-width:100% !important; gap:10px !important; } #page-post-detail.routePage.is-active .detailPage__contentWrap > .detailPage__section .detailPage__quickChatBtn, .routePage[data-route-page="postDetail"].is-active .detailPage__contentWrap > .detailPage__section .detailPage__quickChatBtn{ width:auto !important; max-width:100% !important; min-width:0 !important; align-self:flex-start !important; box-sizing:border-box !important; } #page-post-detail.routePage.is-active .detailPage__contentWrap > .detailPage__section .detailPage__contactActions, .routePage[data-route-page="postDetail"].is-active .detailPage__contentWrap > .detailPage__section .detailPage__contactActions{ display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; width:100% !important; box-sizing:border-box !important; } #page-post-detail.routePage.is-active .detailPage__contentWrap > .detailPage__section .detailPage__metaRow, .routePage[data-route-page="postDetail"].is-active .detailPage__contentWrap > .detailPage__section .detailPage__metaRow{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; width:100% !important; box-sizing:border-box !important; } #page-post-detail.routePage.is-active .detailPage__ownerOtherPostsIpad, .routePage[data-route-page="postDetail"].is-active .detailPage__ownerOtherPostsIpad{ display:block !important; margin:14px 0 14px !important; padding:12px !important; box-sizing:border-box !important; background:#fff !important; border:1px solid rgba(17,24,39,.14) !important; border-radius:16px !important; box-shadow:0 8px 22px rgba(17,24,39,.035) !important; } #page-post-detail.routePage.is-active .detailPage__ownerOtherPostsIpad .detailPage__ownerOtherHead, .routePage[data-route-page="postDetail"].is-active .detailPage__ownerOtherPostsIpad .detailPage__ownerOtherHead{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:10px !important; margin:0 0 10px !important; } #page-post-detail.routePage.is-active .detailPage__ownerOtherPostsIpad .detailPage__ownerOtherHeading, .routePage[data-route-page="postDetail"].is-active .detailPage__ownerOtherPostsIpad .detailPage__ownerOtherHeading{ margin:0 !important; font-size:18px !important; line-height:1.25 !important; font-weight:588 !important; color:#111 !important; } #page-post-detail.routePage.is-active .detailPage__ownerOtherPostsIpad .detailPage__ownerOtherMore, .routePage[data-route-page="postDetail"].is-active .detailPage__ownerOtherPostsIpad .detailPage__ownerOtherMore{ border:0 !important; background:transparent !important; color:var(--pink) !important; font-size:15px !important; font-weight:588 !important; padding:4px 0 !important; white-space:nowrap !important; } #page-post-detail.routePage.is-active .detailPage__ownerOtherPostsIpad .detailPage__ownerOtherList, .routePage[data-route-page="postDetail"].is-active .detailPage__ownerOtherPostsIpad .detailPage__ownerOtherList{ display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:10px !important; } #page-post-detail.routePage.is-active .detailPage__ownerOtherPostsIpad .detailPage__ownerOtherCard, .routePage[data-route-page="postDetail"].is-active .detailPage__ownerOtherPostsIpad .detailPage__ownerOtherCard{ width:100% !important; display:grid !important; grid-template-columns:88px minmax(0,1fr) !important; gap:10px !important; align-items:stretch !important; padding:7px !important; border:1px solid rgba(17,24,39,.10) !important; border-radius:13px !important; background:#fff !important; text-align:left !important; box-sizing:border-box !important; } #page-post-detail.routePage.is-active .detailPage__ownerOtherPostsIpad .detailPage__ownerOtherThumb, .routePage[data-route-page="postDetail"].is-active .detailPage__ownerOtherPostsIpad .detailPage__ownerOtherThumb{ display:block !important; width:88px !important; height:72px !important; border-radius:11px !important; overflow:hidden !important; background:#f3f4f6 !important; } #page-post-detail.routePage.is-active .detailPage__ownerOtherPostsIpad .detailPage__ownerOtherThumb img, .routePage[data-route-page="postDetail"].is-active .detailPage__ownerOtherPostsIpad .detailPage__ownerOtherThumb img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; } #page-post-detail.routePage.is-active .detailPage__ownerOtherPostsIpad .detailPage__ownerOtherInfo, .routePage[data-route-page="postDetail"].is-active .detailPage__ownerOtherPostsIpad .detailPage__ownerOtherInfo{ min-width:0 !important; display:flex !important; flex-direction:column !important; justify-content:center !important; gap:4px !important; } #page-post-detail.routePage.is-active .detailPage__ownerOtherPostsIpad .detailPage__ownerOtherTitle, .routePage[data-route-page="postDetail"].is-active .detailPage__ownerOtherPostsIpad .detailPage__ownerOtherTitle{ display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important; overflow:hidden !important; font-size:14px !important; line-height:1.25 !important; font-weight:588 !important; color:#111 !important; } #page-post-detail.routePage.is-active .detailPage__ownerOtherPostsIpad .detailPage__ownerOtherPrice, .routePage[data-route-page="postDetail"].is-active .detailPage__ownerOtherPostsIpad .detailPage__ownerOtherPrice{ font-size:14px !important; line-height:1.2 !important; font-weight:700 !important; color:var(--pink) !important; } #page-post-detail.routePage.is-active .detailPage__ownerOtherPostsIpad .detailPage__ownerOtherPlace, .routePage[data-route-page="postDetail"].is-active .detailPage__ownerOtherPostsIpad .detailPage__ownerOtherPlace{ font-size:12px !important; line-height:1.25 !important; font-weight:400 !important; color:rgba(0,0,0,.62) !important; } } /* SP v509: PC - đồng bộ khung các trang cài đặt tài khoản và quên mật khẩu. Chỉ chỉnh giao diện PC, không đụng logic email/OTP. */ @media (min-width:1024px){ .routePage[data-route-page="accountSettings"].is-active, .routePage[data-route-page="changeDisplayName"].is-active, .routePage[data-route-page="changePassword"].is-active, .routePage[data-route-page="securityAccount"].is-active, .routePage[data-route-page="forgotPassword"].is-active{ padding-left:0 !important; padding-right:0 !important; } .routePage[data-route-page="accountSettings"].is-active .accountSettingsPage, .routePage[data-route-page="changeDisplayName"].is-active .accountSettingsPage, .routePage[data-route-page="changePassword"].is-active .accountSettingsPage, .routePage[data-route-page="securityAccount"].is-active .accountSettingsPage, .routePage[data-route-page="forgotPassword"].is-active .authPage{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; padding-left:0 !important; padding-right:0 !important; } .routePage[data-route-page="accountSettings"].is-active .accountSettingsCard, .routePage[data-route-page="changeDisplayName"].is-active .accountSettingsCard, .routePage[data-route-page="changePassword"].is-active .accountSettingsCard, .routePage[data-route-page="securityAccount"].is-active .accountSettingsCard, .routePage[data-route-page="forgotPassword"].is-active .forgotPasswordCard{ width:100% !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important; box-sizing:border-box !important; } .routePage[data-route-page="changeDisplayName"].is-active .accountSettingsSubmit--small, .routePage[data-route-page="changePassword"].is-active .accountSettingsSubmit--small, .routePage[data-route-page="securityAccount"].is-active .accountSettingsSubmit--small{ width:auto !important; min-width:220px !important; max-width:280px !important; min-height:46px !important; padding:0 24px !important; } }