/* ========================================================================== 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. ========================================================================== */ /* [2026-07-25] BO CUC DAU TRANG (khoi ghim + hang tieu de) - dua tu community-header.js sang day. Truoc day JS tu tiem CSS nay LUC CHAY, nen header dung markup server-render se bi vo style trong chop mat truoc khi JS chay -> giat. Nay CSS o file chan-ve (render-blocking) nen header hien dung ngay tu lan ve dau, khong can gom lai bang JS, khong can an/hien. */ /* [2026-07-25] Khoi dau trang: TRUOC day dat position:sticky de "ghim" khi cuon. Nhung tren layout nay (thanh dau trang cua site la position:fixed, khong co scroll-container that) sticky KHONG ghim duoc - no chi cong co dinh +--cq-head-h (69px) nhu relative. Hoi xua co banner 300px hap thu 69px do nen khong lo; gio bo banner -> khoi bi day xuong 69px DE LEN hang the dau. -> Tra ve static: header dung dung cho, khong con de. (Sticky that su muon co lai thi phai lam scroll-container rieng - viec khac.) */ .cq-community-stick { position: static; background: #f2f5f7; } .cq-community-stick .cq-community-topnav { margin-bottom: 12px; } /* [2026-07-25] CHUYEN TRANG MUOT giua 6 trang khu Cong dong (View Transitions, cross-document). Trinh duyet GIU trang cu hien cho toi khi trang moi tai xong roi moi chuyen -> HET chop trang trang khi chuyen trang. Header duoc DAT TEN -> trinh duyet coi la CUNG MOT phan tu qua cac trang -> no dung yen mot cho, chi doi tab active + tieu de (mượt như trang chu / SPA). Trinh duyet cu (Firefox...) khong ho tro thi tai binh thuong nhu cu - vo hai. */ @view-transition { navigation: auto; } .cq-community-stick { view-transition-name: cq-cong-dong-header; } /* [2026-07-25] Bo spacer .sep20 sot lai ngay dau khu Cong dong (vd trang Ca nhan van con mot cai sau khi go banner) -> no day khoi ghim xuong 20px lam thanh tab lech cao/thap so voi trang khac. Khoi ghim da co khoang cach san. */ .cq-community-page > .sep20 { display: none; } /* Header dung yen (khong mo dan); chi noi dung ben duoi chuyen. */ ::view-transition-group(cq-cong-dong-header) { animation-duration: 0s; } .cq-community-hero .inner-item { margin: 0 auto; max-width: 1220px; padding: 0 24px; } /* [2026-07-25] EP hang tieu de CAO CO DINH 60px tren CA 6 trang. Truoc day moi trang idea co CSS inline rieng cho vung tieu de/phan trang -> hero cao thap khac nhau -> thanh tab nam do cao khac nhau ("cai cao cai thap") -> chuyen trang thay tab nhay len xuong. Ep cung 60px (dung !important de thang CSS inline cua tung trang) -> tab luon cung 1 do cao -> View Transition giu tab dung yen that su. */ .cq-community-hero__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px !important; padding-top: 0 !important; padding-bottom: 0 !important; box-sizing: border-box; } .cq-community-hero__muc { margin: 0; color: #12385b; font-family: "Montserrat", sans-serif; font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; } .cq-community-hero__pg { flex: 0 0 auto; display: flex; align-items: center; } .cq-community-hero__pg .cq-community-v2__paging-top { margin: 0; } .cq-community-hero__pg .paging, .cq-community-hero__pg .paging-top { display: flex !important; align-items: center; visibility: visible !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } /* Tieu de cu nam trong khung noi dung - da chuyen len hang dau -> an di */ .cq-community-v2__head .cq-community-v2__title { display: none; } @media (max-width: 767px) { .cq-community-hero .inner-item { padding: 0 14px; } .cq-community-hero__row { padding-top: 14px; padding-bottom: 10px; gap: 10px; } .cq-community-hero__muc { font-size: 22px; } } 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; } /* [2026-07-25] Thanh 6 muc kieu TAB THU MUC (folder): - Ca hang ngoi tren mot duong mep xanh (nhu canh ban). - Moi tab bo goc PHIA TREN, vien tren + hai ben, khong vien duoi. - Tab dang chon: to xanh, nho cao hon = folder duoc rut ra. Dung selector .cq-community-topnav .cq-community-topnav__item de thang luat min-height cua community-header.js (inject sau). */ /* Khoi ghim tu ve mot border-bottom mo (community-header.js) - nam ngay duoi mep folder -> hai duong sat nhau. Bo di, chi giu mep bon cua tab. !important de thang luat inject sau cua community-header.js. */ .cq-community-stick { border-bottom: none !important; } .cq-community-topnav__list { position: relative; display: flex; align-items: flex-end; justify-content: flex-start; flex-wrap: nowrap; gap: 6px; padding: 0 0 0 4px; border-radius: 0; background: transparent; box-shadow: none; border-bottom: 1px solid #dde4ea; overflow-x: auto; } /* ⚠ THANH 6 MUC = CHI ICON, ap NGAY tu file nay [2026-07-22 diet nhay] Luat "chi icon" (an chu) dat luon o day de icon hien ngay, khong loe chu. */ .cq-community-topnav .cq-community-topnav__item { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 60px; height: 42px; min-height: 42px; margin-bottom: -1px; padding: 0; border: 1px solid #e6ebef; border-bottom: none; border-radius: 14px 14px 0 0; background: #f2f6f8; color: #7a8794; line-height: 1; text-align: center; text-decoration: none; transition: background .18s ease, color .18s ease, border-color .18s ease, height .14s ease, box-shadow .18s ease; } .cq-community-topnav__item i { font-size: 17px; 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 .cq-community-topnav__item:hover, .cq-community-topnav .cq-community-topnav__item:focus { color: #12836a; text-decoration: none; border-color: #cfe0d9; background: #e6f1ed; box-shadow: none; } .cq-community-topnav .cq-community-topnav__item.is-active { z-index: 2; height: 50px; min-height: 50px; border-color: #12836a; color: #ffffff; background: #12836a; box-shadow: 0 5px 14px rgba(18, 131, 106, 0.20); } .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; }