/* ========================================================================== community.css - KHUNG DUNG CHUNG cho 6 trang khu Cong dong -------------------------------------------------------------------------- [2026-07-22] Gom cac luat KHUNG (trang, thanh 6 muc, luoi so le, khoi nguon an) tung lap y het o ca 6 trang .aspx. Sua 1 lan, 6 trang cung doi. ⚠ CHI chua KHUNG. CSS cua TUNG LOAI THE (the thanh vien, the cau hoi, the y tuong...) van nam rieng trong tung .aspx - vi noi dung khac nhau. ⚠ Sua file nay thi doi so ?v= o CA 6 trang. ========================================================================== */ html, body { height: auto !important; overflow-y: auto !important; background: #f2f5f7 !important; } .body { position: relative !important; height: auto !important; min-height: 100vh; overflow: visible !important; background: #f2f5f7 !important; } .cq-community-page { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0 0 24px; background: #f2f5f7; } .cq-community-page .wrap-banner-main { position: relative; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); overflow: hidden; } .cq-community-page .wrap-banner-main .lSSlideOuter, .cq-community-page .wrap-banner-main .lSSlideWrapper, .cq-community-page .wrap-banner-main #lightSliderBanner, .cq-community-page .wrap-banner-main #lightSliderBanner > li, .cq-community-page .wrap-banner-main #lightSliderBanner > li > a { height: 300px; } .cq-community-page .wrap-banner-main #lightSliderBanner > li > a { display: block; } .cq-community-page .wrap-banner-main #lightSliderBanner img { display: block; width: 100%; height: 100%; object-fit: cover; } .cq-community-page .wrap-banner-main .lSPager { display: none; } .cq-community-topnav { margin: 0 0 18px; } .cq-community-topnav .inner-item { margin: 0 auto; max-width: 1220px; padding: 0 24px; } .cq-community-topnav__list { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 14px; padding: 18px 22px; border-radius: 26px; background: #f2f5f7; box-shadow: 0 12px 28px rgba(18, 56, 91, 0.08); } /* ⚠ THANH 6 MUC = CHI ICON, ap NGAY tu file nay [2026-07-22 diet nhay] Truoc day: community.css cho nut CHU (padding ngang, font 14, chu hien), roi community-header.js INJECT luat "chi icon" (an chu) qua JS -> chay MUON -> thanh 6 muc LOE ra dang CHU roi moi thanh icon. Nay dua luat "chi icon" vao day (file ngoai, chan ve trang) -> icon ngay tu lan ve dau, khong loe chu. community-header.js van inject (trung) - vo hai. */ .cq-community-topnav__item { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; min-height: 48px; padding: 0; border: 1px solid #d7e1ea; border-radius: 999px; background: #ffffff; color: #12385b; line-height: 1.2; text-align: center; text-decoration: none; transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease; } .cq-community-topnav__item i { font-size: 18px; line-height: 1; } .cq-community-topnav__item span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .cq-community-topnav__item:hover, .cq-community-topnav__item:focus { color: #12385b; text-decoration: none; border-color: #bfd0de; box-shadow: 0 10px 20px rgba(18, 56, 91, 0.08); } .cq-community-topnav__item.is-active { background: #12385b; border-color: #12385b; color: #ffffff; box-shadow: 0 12px 24px rgba(18, 56, 91, 0.16); } .cq-community-topnav__item.is-active i { color: #ffffff; } .cq-community-topnav__list::-webkit-scrollbar { display: none; } .cq-community-v2-wrap .inner-item { margin: 0 auto; max-width: 1220px; padding: 0 24px; } .cq-community-v2 { margin: 0 0 24px; } .cq-community-v2__frame { padding: 0; border-radius: 0; background: transparent; box-shadow: none; } .cq-community-v2__meta { display: block; color: #708499; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .cq-community-v2__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; } .cq-community-v2__col { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .cq-community-v2__grid > .item, .cq-community-v2__grid > [class^="item-"], .cq-community-v2__grid > [class*=" item-"], .cq-community-v2__col > .item, .cq-community-v2__col > [class^="item-"], .cq-community-v2__col > [class*=" item-"], .cq-community-v2__card { display: block; width: 100% !important; margin: 0 !important; min-width: 0; } .cq-community-v2__grid .inner-item { margin: 0 !important; } .cq-community-v2__empty { padding: 40px 24px; border-radius: 24px; background: #ffffff; color: #6f8398; text-align: center; box-shadow: inset 0 0 0 1px #e0e8ef; } .cq-community-source { position: static; width: auto; height: auto; overflow: visible; visibility: visible; pointer-events: auto; background: #f2f5f7; } .cq-community-source .inner-item { margin: 0 auto !important; max-width: 1220px; padding: 0 24px; } .cq-community-source .listProductPaging { margin: 0; } .cq-community-source .listProductPaging .paging-top { display: none !important; } /* ⚠ ẨN BANNER CŨ Ở KHU CỘNG ĐỒNG - diệt nháy [2026-07-22] Markup banner cũ (.wrap-banner-main + #lightSliderBanner) vẫn còn trong 5 trang (composer dựng từ allBanner). Trước đây community-header.js gỡ nó bằng JS - nhưng JS chạy SAU khi trình duyệt đã vẽ -> banner LÓE ra rồi mới biến mất = nháy mỗi lần vào trang. Nay ẩn bằng CSS ở file NGOÀI: chặn vẽ trang tới khi CSS tải xong, nên display:none áp TRƯỚC lần vẽ đầu -> banner không bao giờ hiện. Chỉ ẩn banner trong .cq-community-page (khu cộng đồng), không đụng nơi khác. */ .cq-community-page .wrap-banner-main { display: none !important; } /* ===== NÚT CHUYỂN TRANG (phân trang client của lưới chung) [2026-07-23] ===== */ .cq-grid-paging { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; padding: 26px 0 10px; } .cq-grid-paging .cq-gpg { min-width: 40px; height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid #d7e1ea; background: #fff; color: #12385b; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; cursor: pointer; text-decoration: none; } .cq-grid-paging .cq-gpg:hover { background: #eef3fb; } .cq-grid-paging .cq-gpg.cur { background: #12385b; border-color: #12385b; color: #fff; } .cq-grid-paging .cq-gpg.off { opacity: .4; pointer-events: none; } .cq-grid-paging .cq-gpg-dots { color: #8797a6; padding: 0 2px; }