/* =========================================================================== TRANG COMMUNITY — bổ sung 20/09/2026 --------------------------------------------------------------------------- Chỉ nạp trên page-community.php (xem inc/cong-dong-2026.php). Trang này trước 20/09 KHÔNG có tệp CSS riêng — mọi luật của nó nằm trong pages.css (107 KB). Thêm một tệp nhỏ nạp SAU là cách rẻ và gỡ được, thay vì ghi đè một tệp 107 KB để sửa vài dòng. =========================================================================== */ /* --------------------------------------------------------------------------- 1 · H1 HERO NHỎ LẠI --------------------------------------------------------------------------- TRƯỚC KHI SỬA, đọc từ chính tệp CSS đang phục vụ chứ không ước lượng: base.css → `h1 { font-size: var(--tgs-cd-h1); }` tokens.css → `--tgs-cd-h1: clamp(40px, 7vw, 104px);` → ở 1440px là 7vw = 100,8px; ở ≤571px chạm sàn 40px. Bản mới `clamp(30px, 4.4vw, 60px)`: 1440 → 63,4 nhưng trần 60px (100,8 → 60, nhỏ hơn 40%) 1024 → 45,1 768 → 33,8 375 → sàn 30px (40 → 30, nhỏ hơn 25%) VÌ SAO KHÔNG ĐẶT MỘT SỐ PX CỐ ĐỊNH: h1 của theme là clamp theo bề rộng màn hình. Thay bằng một số cứng là hero vỡ ở khổ hẹp hoặc lọt thỏm ở khổ rộng. Giữ nguyên dạng clamp, chỉ hạ cả ba mốc. ⚠ CHƯA ĐO ĐƯỢC BẰNG MẮT Ở KHỔ THẬT. Chrome mất kết nối lúc dựng, còn khung trình duyệt thay thế thì đang ẩn nên `innerWidth` trả 0 — mọi số bố cục đo từ đó là vô nghĩa. Các con số trên là TÍNH RA từ công thức clamp, không phải đo trên trang. Cần nhìn lại ở 1440 và 375 rồi mới chốt. --------------------------------------------------------------------------- */ .tgs-trang-community-h1, #tgs-trang-community .tgs-hero__trong h1 { font-size: clamp(30px, 4.4vw, 60px); } /* --------------------------------------------------------------------------- 2 · BÀI VĂN DÀI Ở DẢI 01 --------------------------------------------------------------------------- Dải 01 trước đây chỉ có một đoạn dẫn. Từ 20/09 nó mang toàn bộ nội dung file PAGE_COMMUNITY.pdf: 5 đoạn + 2 tiểu mục + 1 danh sách 2 mục. Cần nhịp dọc và bề rộng dòng cho một khối chữ dài, thứ mà một đoạn dẫn không cần tới. 66ch là bề rộng dòng dễ đọc cho văn xuôi. Cột trái của `.tgs-luoi-6040--dau` ở 1440 rộng khoảng 740px; cỡ chữ 16px thì 66ch ≈ 620px, tức là có chặn thật chứ không phải luật trang trí. --------------------------------------------------------------------------- */ .tgs-cong-bai .tgs-doan { max-width: 66ch; margin-top: 20px; } .tgs-cong-bai .tgs-doan:first-of-type { margin-top: 24px; } /* Tiểu mục "Connect & Share" và "A Philosophy of Movement". Nhỏ hơn h2 của dải, to hơn chữ thường — nếu bằng chữ thường thì người đọc lướt qua không thấy bài được chia phần. */ .tgs-cong-bai__phu { margin: 40px 0 0; font-family: var(--tgs-chu-de); font-size: 22px; font-weight: 400; line-height: 1.25; letter-spacing: .01em; } .tgs-cong-bai__ds { max-width: 66ch; margin: 20px 0 0; padding: 0; list-style: none; } .tgs-cong-bai__ds li { position: relative; margin-top: 14px; padding-left: 22px; font-size: 16px; line-height: 1.8; color: rgba(11, 11, 11, .72); } /* Dấu đầu dòng vẽ bằng ::before thay vì list-style: giữ được màu son của thương hiệu và canh đúng dòng đầu khi mục xuống nhiều dòng. */ .tgs-cong-bai__ds li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 5px; height: 5px; border-radius: 50%; background: #B03A1E; } .tgs-cong-bai__ds strong, .tgs-cong-bai__ket strong { color: #0B0B0B; font-weight: 600; } .tgs-cong-bai__ds a { color: #B03A1E; text-decoration: none; border-bottom: 1px solid rgba(176, 58, 30, .4); } .tgs-cong-bai__ds a:hover { border-bottom-color: #B03A1E; } .tgs-cong-bai__ket { margin-top: 28px; } /* --------------------------------------------------------------------------- 3 · NÚT TRONG THẺ MỜI CỦA DẢI 01 --------------------------------------------------------------------------- Thẻ này trước 20/09 chỉ có chữ, không có nút. Thêm khoảng cách trên để nút không dính vào dòng chữ ngay trên nó. --------------------------------------------------------------------------- */ .tgs-cong-01__nut { margin: 24px 0 0; } @media (max-width: 900px) { .tgs-cong-bai__phu { margin-top: 32px; font-size: 20px; } } /* --------------------------------------------------------------------------- 4 · VI TRI ANH HERO — banner moi 21/09/2026 --------------------------------------------------------------------------- Anh moi: community-hero-porch.webp, 921x1152 (anh DOC). Khung hero do trong iframe 1440px: 1425x702, ty le 2,03 (khung NGANG). `object-fit: cover` do do se: · phong anh len 1425/921 = 1,55 lan; · cat bo chieu cao, chi giu 702/(1152*1,55) = 39% chieu cao anh. Noi thang: o he so 1,55 lan thi banner nay MEM HON banner trang Togashyamo World (K2 1500x643 chi phong 1,05 lan). Do la he qua cua viec dung anh doc cho khung ngang, khong phai loi nen anh. Muon net bang World thi can mot ban chup ngang, hoac mot ban doc >= 1425px be rong. Chon 50% 65% — khong phai uoc luong: da dung 5 muc (50/60/65/72/80%) roi nhin doi chieu tren cung mot khung. 50% cat mat doi dep den o duoi · 80% cat mat doi dep be o tren 65% giu DU ca ba doi dep trong khung, doi den noi bat nhat. Do cu the selector: pages.css (124 KB, cam ghi de) dang dat 50% 62% cho anh hero trang nay. Khong sua tep do — ghi de tu day, tep nay nap SAU. Dung ca #tgs-trang-community de chac chan thang ve do uu tien, khong dung !important (de sau con ghi de duoc). --------------------------------------------------------------------------- */ #tgs-trang-community .tgs-hero__anh--community img { object-position: 50% 78%; /* 26/09: anh r26-community-banner, doi dep o giua khung */; } /* --------------------------------------------------------------------------- CORRECTIONS 22/09 — lo 4, 23/09/2026 [CD26-CORR23] --------------------------------------------------------------------------- [113] Anh ben phai doan "Welcome to our shared space...". Tha noi phai de chu chay vong quanh; khổ hep thi xuong hang rieng. --------------------------------------------------------------------------- */ .tgs-cong-bai__anh { float: right; width: 38%; margin: 6px 0 18px 28px; } .tgs-cong-bai__anh img { display: block; width: 100%; height: auto; } @media (max-width: 780px) { .tgs-cong-bai__anh { float: none; width: 100%; margin: 24px 0 0; } } /* --------------------------------------------------------------------------- EMAIL EDITH 24/09/2026 — muc 7 [CD26-ED24] --------------------------------------------------------------------------- Anh chuyen tu cot chu (tha noi, 38% cot chu = 277px @1440) sang COT PHAI cua luoi 60/40, rong het cot (~487px @1440). Cot phai truoc do trong ~800px phia tren the "Join the circle". The moi day xuong day cot. --------------------------------------------------------------------------- */ .tgs-cong-01__phai { display: flex; flex-direction: column; gap: 32px; min-width: 0; } .tgs-cong-01__anh { margin: 0; } .tgs-cong-01__anh img { display: block; width: 100%; height: auto; } .tgs-cong-01__phai > .tgs-cong-01__khung { margin-top: auto; }