/* ============================================================================
TRANG /pricing/ 2026 — lớp phủ thiết kế mới lên markup cũ
Nhận biết bằng class .sr-pricing gắn vào (sr_is_pricing_page() trong
functions.php). Template page-price.php GIỮ NGUYÊN — mọi logic giá, tab đổi
app, công tắc Monthly/Yearly, số gói đều không đụng tới. File này chỉ thay
hình thức.
Bám theo bản tham khảo người dùng đưa: nền tím rất nhạt, tiêu đề Phudu navy,
hàng chọn nền tảng dạng viên thuốc, công tắc chu kỳ dạng viên thuốc có ô
đậm chạy, các gói nằm trong một khung bo góc — gói nào rê chuột vào thì nổi
lên nền trắng kèm đổ bóng.
Khác bản tham khảo ở hai chỗ, vì phải giữ nội dung hiện có:
- Trang này có 5 gói (bản tham khảo 3) và 4 tab app (bản tham khảo 3
nền tảng) — chỉ đổi kiểu, không đổi số lượng.
- Không có nhãn "MOST POPULAR": dữ liệu hiện tại không đánh dấu gói nào
là phổ biến nhất, mà đó là quyết định kinh doanh chứ không phải CSS.
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 của trang này đều định nghĩa trong main.css).
MỤC LỤC
1. Token + nền trang
2. Tiêu đề
3. Hàng tab chọn app
4. Công tắc Monthly / Yearly
5. Khung chứa các gói
6. Nội dung trong một gói
7. Responsive
========================================================================== */
/* ==========================================================================
1. TOKEN + NỀN TRANG
========================================================================== */
.sr-pricing {
--sr-font-display: 'Phudu', 'Manrope', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
/* Tím rất nhạt của bản tham khảo — nhạt hơn --sr-purple-100 một bậc để
thẻ trắng bên trên vẫn nổi rõ. */
--sr-pricing-bg: rgb(246, 242, 255);
/* Rộng hơn cột 1120px chuẩn của hệ thống 2026. Trang này xếp 5 gói cạnh
nhau (bản tham khảo chỉ 3); ở 1120px mỗi gói chỉ còn ~208px và gần như
dòng tính năng nào cũng phải xuống hai dòng. */
--sr-pricing-max: 1280px;
--sr-pricing-line: rgba(86, 41, 114, 0.12);
--sr-pricing-check: rgb(34, 160, 90);
font-family: var(--sr-font);
color: var(--sr-neutral-700);
}
/* !important ở mục này và mục 5: main.css nhắm các khối đó bằng selector có
ID (#synctrack .pricing-page .card). Một ID thắng mọi số lượng class, nên
không thể vượt qua bằng cách viết selector dài hơn. */
.sr-pricing .pricing-page {
padding-block: 64px 96px;
background: var(--sr-pricing-bg) !important;
}
.sr-pricing .pricing-page .container {
max-width: var(--sr-pricing-max);
padding-inline: var(--sr-gutter);
}
/* ==========================================================================
2. TIÊU ĐỀ
========================================================================== */
.sr-pricing h1.page__title {
margin: 0 0 40px;
font-family: var(--sr-font-display);
font-size: clamp(32px, 4vw, 52px);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--sr-navy-900);
text-align: center;
text-wrap: balance;
}
/* ==========================================================================
3. HÀNG TAB CHỌN APP
Bản cũ là lưới Bootstrap 4 cột, tab đang chọn gạch chân xanh 4px. Đổi sang
viên thuốc như bản tham khảo: bỏ lưới, cho chạy hàng ngang và tự xuống dòng.
========================================================================== */
.sr-pricing .apps-tab {
display: flex !important;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin: 0 0 32px;
}
.sr-pricing .apps-tab__item {
flex: 0 0 auto;
width: auto !important;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 15px 18px 5px 18px;
border: 1px solid var(--sr-pricing-line);
border-bottom: 1px solid var(--sr-pricing-line);
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);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.sr-pricing .apps-tab__item:hover {
border-color: var(--sr-purple-300);
color: var(--sr-purple-700);
}
.sr-pricing .apps-tab__item.selected {
border-color: var(--sr-purple-700);
background: var(--sr-purple-700);
color: var(--sr-neutral-0);
}
.sr-pricing .apps-tab__item img {
width: 22px;
height: 22px;
flex: none;
}
/* ==========================================================================
4. CÔNG TẮC MONTHLY / YEARLY
.slider là ô nền xanh lá nhạt chạy qua lại phía sau hai nút. Ở đây chính
nút đang chọn mang nền đậm rồi nên ô đó thừa — ẩn đi. JS vẫn gắn/gỡ class
.active như cũ, không đụng gì tới logic.
========================================================================== */
/* !important cho width và margin: main.css nhắm khối này bằng selector có ID
nên ghim bề rộng 500px. width: fit-content + margin-inline: auto là cách
canh giữa hoạt động với display: flex sẵn có.
KHÔNG khai display ở đây. Trang có HAI công tắc (một cho nhóm app thường,
một cho app Returns) và chỉ một cái được hiện; đặt display: flex !important
sẽ đè luôn lệnh ẩn, làm cả hai cùng hiện. */
.sr-pricing .toggle-container {
align-items: center;
gap: 4px;
width: fit-content !important;
margin: 0 auto 40px !important;
padding: 4px;
border: 1px solid var(--sr-pricing-line);
border-radius: 999px;
background: var(--sr-neutral-0);
overflow: hidden;
}
.sr-pricing .toggle-container .slider {
display: none;
}
.sr-pricing .toggle-button,
.sr-pricing .toggle-button2 {
/* Bản cũ cho hai nút flex: 1 để chia đôi khung 500px cố định */
flex: 0 0 auto !important;
width: auto !important;
padding: 12px 24px;
border: 0;
border-radius: 999px;
background: transparent;
font-family: var(--sr-font);
font-size: 14px;
font-weight: 600;
line-height: 1;
color: var(--sr-neutral-700);
white-space: nowrap;
transition: background 0.18s ease, color 0.18s ease;
}
.sr-pricing .toggle-button.active,
.sr-pricing .toggle-button2.active {
background: var(--sr-navy-900);
color: var(--sr-neutral-0);
}
/* ==========================================================================
5. KHUNG CHỨA CÁC GÓI
Bản tham khảo đặt các gói trong một khung bo góc, gói nổi bật thì nhô lên
nền trắng. Trang này chưa đánh dấu gói nào nổi bật nên cho hiệu ứng đó theo
con trỏ: rê vào gói nào thì gói ấy nổi lên.
========================================================================== */
/* Khung này nằm NGOÀI .container của template nên mặc định trải hết 1440px —
bó lại đúng cột nội dung 1120px cho thẳng hàng với tiêu đề và hàng tab. */
.sr-pricing .card-container.content-price {
display: flex;
align-items: stretch;
justify-content: center;
gap: 0;
max-width: var(--sr-pricing-max);
margin-inline: auto;
padding: 8px;
border: 1px solid var(--sr-pricing-line);
border-radius: 16px;
background: rgba(255, 255, 255, 0.5);
box-sizing: border-box;
}
.sr-pricing .card-container .card {
border: 0 !important;
border-radius: 12px !important;
padding: 28px 20px !important;
background: transparent !important;
box-shadow: none !important;
transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
/* Vạch ngăn mảnh giữa các gói, thay cho viền quanh từng thẻ */
.sr-pricing .card-container .card + .card {
box-shadow: inset 1px 0 0 var(--sr-pricing-line) !important;
}
.sr-pricing .card-container .card:hover {
background: var(--sr-neutral-0) !important;
box-shadow: var(--sr-shadow-panel) !important;
transform: translateY(-6px);
}
/* ==========================================================================
6. NỘI DUNG TRONG MỘT GÓI
========================================================================== */
/* Tên gói */
.sr-pricing .card > h2 {
margin: 0 0 6px;
font-family: var(--sr-font-menu);
font-size: 13px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sr-purple-700);
}
/* Dòng "Best for..." */
.sr-pricing .card .detail {
margin-bottom: 16px;
font-family: var(--sr-font);
font-size: 13px;
line-height: 1.5;
color: var(--sr-neutral-500);
}
.sr-pricing .card .price {
font-family: var(--sr-font-display);
font-size: clamp(28px, 2.6vw, 40px);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--sr-navy-900);
}
/* Tab "Returns & Exchanges" dùng markup thẻ riêng: giá nằm ở .price2, đơn vị
ở .hhxfm, và có thêm thanh trượt chọn số đơn (.usage là con số hiện ra). */
.sr-pricing .card .price2 {
font-family: var(--sr-font-display);
font-size: clamp(26px, 2.4vw, 34px);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--sr-navy-900);
}
.sr-pricing .card .hhxfm {
font-family: var(--sr-font);
font-size: 13px;
color: var(--sr-neutral-500);
}
.sr-pricing .card .usage {
font-weight: 700;
color: var(--sr-purple-700);
}
.sr-pricing .card input[type="range"] {
accent-color: var(--sr-purple-700);
}
.sr-pricing .card .current-price,
.sr-pricing .card .line-through {
font-family: var(--sr-font);
font-size: 14px;
color: var(--sr-neutral-500);
}
/* Dòng "monthly" / "yearly" */
.sr-pricing .card .description {
margin-top: 4px;
font-family: var(--sr-font);
font-size: 13px;
color: var(--sr-neutral-500);
}
.sr-pricing .card hr {
margin: 20px 0;
border: 0;
border-top: 1px solid var(--sr-pricing-line);
opacity: 1;
}
/* Danh sách tính năng — dấu tích xanh lá như bản tham khảo */
.sr-pricing .features p {
margin: 0 0 12px;
font-family: var(--sr-font);
font-size: 14px;
line-height: 1.55;
color: var(--sr-neutral-700);
}
.sr-pricing .features p::before {
color: var(--sr-pricing-check);
}
/* Nút mua lấy kiểu từ styles/ent-buttons.css (dùng chung mọi trang 2026);
ở đây chỉ đặt khoảng cách của khối bọc. */
/* Khối .content (danh sách tính năng + nút) phải CO GIÃN cho đầy phần còn lại
của thẻ. Nó vốn là flex column có justify-content: space-between nên nút tự
nằm đáy — nhưng mặc định flex: 0 1 auto, tức chỉ cao bằng nội dung, nên "đáy"
của mỗi thẻ một chỗ.
Chênh lệch đến từ dòng ngay phía trên: gói đầu in còn các gói sau in
thanh kéo , hai thứ chiếm chiều cao khác nhau — đo ở tab
Returns thì nút gói đầu thấp hơn ba gói kia 19px. Cho .content giãn ra thì cả
hàng nút thẳng nhau bất kể phía trên là gì. */
.sr-pricing .card .content {
flex: 1 1 auto !important;
}
.sr-pricing .btn-charge {
width: 100%;
margin-top: 8px;
}
/* ==========================================================================
7. RESPONSIVE
========================================================================== */
@media (max-width: 1100px) {
/* Năm gói không thể đứng cùng hàng ở khổ này — cho xuống dòng, mỗi gói
trở lại thành thẻ độc lập có viền riêng. */
.sr-pricing .card-container.content-price {
flex-wrap: wrap;
gap: 16px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
}
.sr-pricing .card-container .card {
flex: 1 1 260px;
border: 1px solid var(--sr-pricing-line) !important;
background: var(--sr-neutral-0) !important;
}
.sr-pricing .card-container .card + .card {
box-shadow: none !important;
}
}
@media (max-width: 700px) {
.sr-pricing .pricing-page {
padding-block: 40px 64px;
}
.sr-pricing h1.page__title {
margin-bottom: 28px;
}
.sr-pricing .apps-tab__item {
font-size: 13px;
padding: 9px 14px;
}
.sr-pricing .toggle-button,
.sr-pricing .toggle-button2 {
padding: 11px 16px;
font-size: 13px;
}
.sr-pricing .card-container .card {
flex: 1 1 100%;
}
}