, hai nút là inline nên chúng xuống dòng ngay khi cột chữ hẹp lại. Cho thành hàng flex, chật thì mới wrap. */ .sr-partners .lefttex_partner p:last-child, .sr-partners .left_text_pn p:last-child, .sr-partners .join_the_team p:last-child { display: flex; flex-wrap: wrap; gap: 12px; } .sr-partners .lefttex_partner p a { margin-right: 0; } .sr-partners .rightstrategic img, .sr-partners .rightjoin_the_team img { width: 100%; height: auto; display: block; border-radius: 16px; } /* Icon tròn + chữ trong danh sách lợi ích */ .sr-partners .item-leftstrategic { gap: 16px; align-items: flex-start; } .sr-partners .item-leftstrategic .itleft { flex: none; } .sr-partners .item-leftstrategic .itright { flex: 1 1 auto; min-width: 0; } .sr-partners .leftstrategic, .sr-partners .rightstrategic { font-family: var(--sr-font); font-size: 16px; line-height: 1.7; color: var(--sr-neutral-700); } .sr-partners .rightstrategic img { max-width: 100%; height: auto; border-radius: 16px; } /* ========================================================================== 6. KHỐI "Join the team" ========================================================================== */ .sr-partners .join_the_team { background: var(--sr-navy-900) !important; padding-block: 72px; } .sr-partners .join_the_team, .sr-partners .join_the_team p, .sr-partners .join_the_team li, .sr-partners .join_the_team h2, .sr-partners .join_the_team h3 { color: var(--sr-neutral-0) !important; } .sr-partners .join_the_team h2, .sr-partners .join_the_team h3 { font-family: var(--sr-font-display); font-size: clamp(26px, 3vw, 38px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; } /* Bản cũ dựng một thẻ nền TRẮNG bên trong (hồi đó cả dải là nền sáng). Dải ngoài nay là navy đặc nên thẻ đó phải trong suốt — không thì chữ trắng nằm trên nền trắng, khối trông như rỗng. */ .sr-partners .join_the_team .ent-flex { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; } .sr-partners .join_the_team img { max-width: 100%; height: auto; border-radius: 16px; } /* ========================================================================== 7. BỘ LỌC + LƯỚI ĐỐI TÁC ========================================================================== */ .sr-partners .our_partner { padding-block: 72px; } .sr-partners .flextab { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: var(--sr-container); margin-inline: auto; margin-bottom: 36px; padding-inline: var(--sr-gutter); box-sizing: border-box; } .sr-partners .itemtab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid var(--sr-neutral-100); border-radius: 999px; background: var(--sr-neutral-0); font-family: var(--sr-font); font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--sr-neutral-700) !important; text-decoration: none; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .sr-partners .itemtab:hover { border-color: var(--sr-purple-300); color: var(--sr-purple-700) !important; } .sr-partners .itemtab.activet { border-color: var(--sr-purple-700); background: var(--sr-purple-700); color: var(--sr-neutral-0) !important; } /* Con số đếm trong mỗi tab. Phải tự đặt display và line-height: bộ style cũ để span ở display: block và thừa kế line-height 41px của tab, nên badge cao 43px trong khi chỉ rộng 28px — bo 999px lên cái hộp đó thành viên thuốc dựng đứng, nhìn méo. min-width bằng height để số một chữ ra hình tròn, số hai chữ ra viên thuốc ngắn — không bị co giật theo độ dài. */ .sr-partners .itemtab span { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--sr-neutral-50); font-size: 12px; font-weight: 700; line-height: 1; color: var(--sr-neutral-500); box-sizing: border-box; } .sr-partners .itemtab.activet span { background: rgba(255, 255, 255, 0.2); color: var(--sr-neutral-0); } .sr-partners .ent-grid.syncpart { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: stretch; } .sr-partners .itemsyncpart { display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid var(--sr-neutral-100); border-radius: var(--sr-radius); background: var(--sr-neutral-0); box-shadow: none; text-decoration: none; font-family: var(--sr-font); font-size: 15px; line-height: 1.6; color: var(--sr-neutral-700); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .sr-partners .itemsyncpart:hover { transform: translateY(-8px); box-shadow: var(--sr-shadow-panel); border-color: transparent; } /* Thẻ đối tác gồm: .img_sync (logo) > h4 (tên) > p (mô tả) > .readm (link) */ .sr-partners .itemsyncpart .img_sync img, .sr-partners .itemsyncpart > img { width: 56px; height: 56px; object-fit: contain; border-radius: 12px; } .sr-partners .itemsyncpart h4, .sr-partners .itemsyncpart h3, .sr-partners .itemsyncpart h2 { margin: 0; font-family: var(--sr-font-display); font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--sr-neutral-900) !important; transition: color 0.18s ease; } .sr-partners .itemsyncpart:hover h4, .sr-partners .itemsyncpart:hover h3, .sr-partners .itemsyncpart:hover h2 { color: var(--sr-purple-700) !important; } .sr-partners .itemsyncpart p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--sr-neutral-700); } /* ========================================================================== 7b. "Become our partner today" + dải tin tức cuối trang Bản cũ để dải gradient xanh dương. Dùng tím nhạt thay vì navy: ngay phía trên đã có một dải navy (Join the team), hai dải đậm liền nhau thì nặng. ========================================================================== */ .sr-partners .become_partner { padding-block: 64px; background: var(--sr-purple-100) !important; } .sr-partners .become_partner .ent-flex, .sr-partners .become_partner .ent-container > div { border-radius: var(--sr-radius); } .sr-partners .become_partner h2, .sr-partners .become_partner h3 { font-family: var(--sr-font-display); font-size: clamp(26px, 3vw, 38px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--sr-neutral-900) !important; } .sr-partners .become_partner p { font-family: var(--sr-font); font-size: 16px; line-height: 1.6; color: var(--sr-neutral-700); } /* --- biểu mẫu đăng ký --- Bản cũ để mỗi hàng một bề rộng: hàng Name+Email nằm trong
rộng 505px, còn Phone và Comment nằm trong
rộng 972px. Nhìn so le hẳn. Gom tất cả về một cột 560px canh giữa. */ .sr-partners .become_partner .wpcf7-form p { width: 100% !important; max-width: 560px; margin: 0 auto 14px !important; box-sizing: border-box; } /* Hàng đầu giữ Name và Email cạnh nhau */ .sr-partners .become_partner .wpcf7-form p.p2bc { display: flex; gap: 14px; } /* Biểu mẫu Contact Form 7 làm cả trang cuộn ngang 4px ở khổ 390px. Dò từng nút một thì thủ phạm nằm trong