/* ============================================================================
TRANG /customers/ 2026 — lớp phủ thiết kế mới lên markup cũ
Nhận biết bằng class .sr-customers gắn vào (sr_is_customers_page()
trong functions.php). Template page-customers.php giữ nguyên; file này chỉ
thay typography, màu, nút, kiểu thẻ và nền. Bỏ enqueue là trang về như cũ.
Bản cũ dùng ngôn ngữ xanh dương: chữ Poppins, tiêu đề xám đen, link xanh
rgb(0,110,186), nền là mấy mảng bo tròn xanh nhạt kèm nét nguệch vàng.
Bản 2026 dùng dải màu phẳng nên phần trang trí đó được ẩn đi — xem mục 2.
Token lấy từ ent-redesign.css. File nạp sau main.css nên thắng ở cùng độ
ưu tiên (mọi class .omg-* đều định nghĩa trong main.css).
MỤC LỤC
1. Token + khung chung
2. Ẩn trang trí của bản cũ, thay bằng dải màu phẳng
3. Typography
4. Hero + hai khối trích dẫn
5. Thẻ "Customer success is our success"
6. Thẻ influencer
7. Dải logo "People are talking"
8. Băng CTA cuối trang
9. Responsive
========================================================================== */
/* ==========================================================================
1. TOKEN + KHUNG CHUNG
========================================================================== */
.sr-customers {
--sr-font-display: 'Phudu', 'Manrope', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
font-family: var(--sr-font);
color: var(--sr-neutral-700);
}
/* Cột nội dung 1120px như toàn bộ thiết kế 2026 (Bootstrap để 1320px) */
.sr-customers .container {
max-width: var(--sr-container);
padding-inline: var(--sr-gutter);
}
.sr-customers .ptb-3rem {
padding-block: 72px;
}
/* ==========================================================================
2. ẨN TRANG TRÍ CỦA BẢN CŨ
Toàn bộ là ![]()
/ position:absolute nên ẩn đi không ảnh hưởng bố cục.
Chúng là mảng bo tròn xanh nhạt và nét nguệch vàng — ngôn ngữ của bản cũ,
đứng cạnh bảng màu tím 2026 thì lệch hẳn tông. Thay bằng dải màu phẳng,
đúng cách trang chủ chia khối.
========================================================================== */
.sr-customers .omg-customer-banner-top,
.sr-customers .omg-success-bg,
.sr-customers .background-round,
.sr-customers .omg-customer-vector-top,
.sr-customers .omg-customer-vector-bottom,
.sr-customers .omg-customer-vector-bottom-rg,
/* nét zigzag xanh dưới dòng phụ đề — không có class, nhận theo tên file */
.sr-customers img[src*="icontittle"] {
display: none !important;
}
.sr-customers .omg-customer-banner-wrapper {
background: var(--sr-purple-100);
}
.sr-customers .omg-success-wrapper {
background: var(--sr-neutral-0);
}
.sr-customers .omg-customer-influencers {
background: var(--sr-neutral-50);
}
.sr-customers .omg-customer-talking {
background: var(--sr-neutral-0);
}
/* ==========================================================================
3. TYPOGRAPHY
========================================================================== */
.sr-customers h1.display-1 {
margin: 0 0 16px;
font-family: var(--sr-font-display);
font-size: clamp(36px, 4.2vw, 56px);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.03em;
color: var(--sr-purple-700);
text-wrap: balance;
}
.sr-customers h2.subtitle-customer {
margin: 0;
font-family: var(--sr-font);
font-size: 18px;
font-weight: 500;
line-height: 1.5;
color: var(--sr-purple-700);
}
/* Hai class tiêu đề khối của bản cũ, gộp về một cỡ */
.sr-customers h2.st-h1,
.sr-customers h2.display-2 {
margin: 0 0 40px;
font-family: var(--sr-font-display);
font-size: clamp(28px, 3.2vw, 40px);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--sr-neutral-900);
}
/* ==========================================================================
4. HERO + HAI KHỐI TRÍCH DẪN
========================================================================== */
/* Hero giữ khung rộng nguyên bản: lưới ảnh chân dung là một cụm dựng sẵn với
vài tấm định vị tuyệt đối theo mép khung 1296px. Bóp về 1120px thì tấm ngoài
cùng bên phải rơi ra ngoài và bị cắt. Tiêu đề vẫn canh giữa như thiết kế cũ
vì cả cụm là một bố cục đối xứng. */
.sr-customers .omg-customer-banner-wrapper .container {
max-width: 1320px;
}
/* Nét nguệch vàng dưới tên người nói — hoạ tiết của bản cũ */
.sr-customers .omg-customer-post-signature img {
display: none;
}
/* Hai câu trích dẫn nổi hai bên lưới ảnh — cho ra hình thức thẻ nhỏ, nền
trắng để tách khỏi dải tím phía sau. */
.sr-customers .omg-customer-post {
padding: 16px 20px;
border-radius: var(--sr-radius);
background: var(--sr-neutral-0);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}
/* Bản cũ dùng font viết tay Handlee cho câu trích dẫn — không thuộc bộ chữ
2026 (Phudu / Manrope / Golos Text). Đưa về Manrope. */
.sr-customers .omg-customer-post,
.sr-customers .omg-customer-post p,
.sr-customers .omg-customer-post span {
font-family: var(--sr-font) !important;
/* !important cho cả cỡ chữ: bộ CSS cũ có quy tắc riêng cho khổ hẹp đẩy
đoạn trích lên 18px, lệch hẳn với 15px ở desktop. */
font-size: 15px !important;
line-height: 1.6;
color: var(--sr-neutral-700);
}
.sr-customers .omg-customer-post-signature h5.body-lg {
margin: 8px 0 0;
font-family: var(--sr-font-display);
font-size: 16px;
font-weight: 600;
color: var(--sr-neutral-900);
}
/* ==========================================================================
5. THẺ "Customer success is our success"
Cấu trúc: .card-img (ảnh chân dung + huy hiệu điểm) | .card-substance
(trích dẫn, hai số liệu, link "Read full story").
========================================================================== */
/* Dựng theo đúng thẻ case study ở trang chủ (.sr-case__card trong
homepage/sections.php): nền trắng, bo 16, không viền, đổ bóng lan rộng
0 6px 60px rgba(0,0,0,0.1). */
.sr-customers .omg-success-card {
border: 0 !important;
border-radius: 16px !important;
overflow: hidden;
background: var(--sr-neutral-0);
box-shadow: 0 6px 60px 0 rgba(0, 0, 0, 0.1);
transition: box-shadow 0.25s ease;
}
/* Huy hiệu điểm ("10/10", "100") vẽ tay của bản cũ nhô lên trên mép thẻ 85px.
Thẻ ở trang chủ không có cụm này, mà giữ lại thì vừa lệch tông vừa buộc thẻ
phải bỏ overflow: hidden (góc bo 16 sẽ không cắt được góc ảnh vuông). */
.sr-customers .card-point-top {
display: none !important;
}
/* Bản cũ kẻ viền vàng quanh nửa chữ và bo góc phải 30px. */
.sr-customers .card-substance {
border: 0 !important;
border-radius: 0 !important;
}
.sr-customers .omg-success-card:hover {
box-shadow: 0 12px 72px 0 rgba(0, 0, 0, 0.14);
}
.sr-customers .omg-success-card + .omg-success-card {
margin-top: var(--sr-gutter);
}
.sr-customers .card-img {
background: var(--sr-neutral-50);
}
/* Đệm rộng như cột chữ của thẻ case study ở trang chủ (80/100 ở khổ 1440). */
.sr-customers .card-substance {
padding: clamp(32px, 5vw, 72px) clamp(28px, 5vw, 80px);
box-sizing: border-box;
}
/* Bộ style cũ đặt trích dẫn ở Poppins 25px/45px — to gần gấp đôi chữ chạy của
hệ 2026 và thắng bộ chọn ở đây, nên phải !important. */
.sr-customers .card-context span {
font-family: var(--sr-font) !important;
font-size: 17px !important;
line-height: 1.7 !important;
color: var(--sr-neutral-700) !important;
}
.sr-customers .card-context strong,
.sr-customers .card-context b {
color: var(--sr-neutral-900);
font-weight: 700;
}
/* Khối hai số liệu: viền mảnh, vạch ngăn ở giữa */
.sr-customers .card-point {
margin: 28px 0;
border: 1px solid var(--sr-neutral-100);
border-radius: var(--sr-radius);
background: var(--sr-neutral-0);
}
.sr-customers .card-point > div + div {
border-left: 1px solid var(--sr-neutral-100);
}
.sr-customers p.card-point-number {
margin: 0 0 4px;
font-family: var(--sr-font-display);
font-size: clamp(32px, 3vw, 44px);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--sr-purple-700);
}
/* Dấu nháy kép mở đầu trích dẫn — dùng tím nhạt thay cho xám */
.sr-customers .card-icon svg,
.sr-customers .card-icon img {
opacity: 1;
filter: none;
}
.sr-customers .card-icon {
color: var(--sr-purple-200);
}
/* ==========================================================================
6. THẺ INFLUENCER
========================================================================== */
.sr-customers .influencers-card {
overflow: hidden;
border: 1px solid var(--sr-neutral-100);
border-radius: var(--sr-radius);
background: var(--sr-neutral-0);
/* !important vì Bootstrap khai .text-center{text-align:center!important}
ngay trên chính thẻ này */
text-align: left !important;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
/* Nút play là SVG inline tô cứng ba sắc xanh. Đổi sang tím theo bảng màu
2026, nhận từng vòng tròn theo đúng mã màu gốc. */
.sr-customers .influencers-card svg circle[fill="#E1F5FF"] {
fill: var(--sr-purple-100);
}
.sr-customers .influencers-card svg circle[fill="#BDE3FF"] {
fill: var(--sr-purple-200);
}
.sr-customers .influencers-card svg circle[fill="#006EBA"] {
fill: var(--sr-purple-700);
}
.sr-customers .influencers-card:hover {
transform: translateY(-8px);
box-shadow: var(--sr-shadow-panel);
border-color: transparent;
}
.sr-customers .influencer-img {
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--sr-neutral-50);
}
.sr-customers .influencer-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.sr-customers .influencers-content {
padding: 20px;
}
.sr-customers .influencers-content h6.body-xs {
margin: 0 0 8px;
font-family: var(--sr-font-display);
font-size: 18px;
font-weight: 600;
line-height: 1.3;
color: var(--sr-neutral-900);
}
.sr-customers .influencers-content span.body-xxs {
font-family: var(--sr-font);
font-size: 14px;
line-height: 1.6;
color: var(--sr-neutral-500);
}
/* ==========================================================================
7. DẢI LOGO "People are talking"
========================================================================== */
.sr-customers .omg-customer-talking .logo-slider + .logo-slider {
margin-top: 8px;
}
/* ==========================================================================
8. BĂNG CTA CUỐI TRANG
Đổi thành dải navy đặc như khối CTA cuối trang chủ, thay cho mảng bo tròn
xanh nhạt của bản cũ.
========================================================================== */
.sr-customers .omg-customer-bottom-banner {
padding-block: 64px;
background: var(--sr-navy-900);
}
/* Bản cũ dựng một thẻ xanh rgb(0,110,186) bo 20px nổi trên nền trắng. Ở đây
cả dải đã là navy đặc như khối CTA cuối trang chủ, nên thẻ bên trong phải
trong suốt — không thì thành hộp xanh lồng trong hộp navy. */
.sr-customers .omg-customer-bottom-banner .row {
align-items: center;
background: transparent;
border-radius: 0;
}
.sr-customers .omg-customer-bottom-banner h2.st-h1 {
margin: 0 0 8px;
color: var(--sr-neutral-0);
}
.sr-customers .omg-customer-bottom-banner span.body-lg {
font-family: var(--sr-font);
font-size: 16px;
line-height: 1.6;
color: var(--sr-neutral-0);
}
.sr-customers .omg-customer-bottom-banner .col-md-4 {
display: flex;
justify-content: flex-end;
}
/* ==========================================================================
9. RESPONSIVE
========================================================================== */
@media (max-width: 900px) {
.sr-customers .ptb-3rem {
padding-block: 48px;
}
.sr-customers .card-substance {
padding: 24px;
}
.sr-customers h2.st-h1,
.sr-customers h2.display-2 {
margin-bottom: 28px;
}
/* Nút CTA về cùng hàng chữ, canh trái cho khỏi lửng lơ */
.sr-customers .omg-customer-bottom-banner .col-md-4 {
justify-content: flex-start;
margin-top: 20px;
}
}