/*
Theme Name: Coolmate Newsroom
Theme URI: https://newsroom.coolmate.me
Author: Vũ Minh Quân
Description: Theme custom dựng riêng cho trang Newsroom của Coolmate, build from scratch theo thiết kế Figma "CAMPAIGN Tháng 9 2026".
Version: 0.1
Text Domain: newsroom-theme
*/
/* ============================================================
Bước 2: reset cơ bản + layout khung sườn cho header/footer.
CHƯA phải CSS đúng pixel theo Figma — bước sau sẽ style chi
tiết từng trang (listing/detail). Mục tiêu bây giờ: đọc được,
nav nằm ngang, không vỡ layout be bét.
============================================================ */
* { box-sizing: border-box; }
body {
margin: 0;
font-family: var(--font-body, sans-serif);
color: var(--color-neutral-900, #000);
background: var(--color-neutral-00, #fff);
overflow-x: hidden; /* an toàn cho khối tràn full-width (100vw) ở gallery không tạo thanh cuộn ngang */
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
/* Toàn bộ heading dùng Criteria CF (font-heading) — trước giờ đang bị
thiếu dòng này nên heading vô tình hiển thị bằng font-body (Pangea). */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading, serif);
font-weight: 600;
margin: 0;
}
/* ---------- Khung dùng chung: section nền full-width (edge-to-edge), nội
dung bên trong luôn giới hạn 1240px và canh giữa — tránh tình trạng nền
màu/khối chỉ rộng bằng cột nội dung cũ (1200px) mà không chạm hết viewport
trên màn hình rộng, hoặc header/nội dung lệch mép nhau. ---------- */
.nr-container {
max-width: 1240px;
margin: 0 auto;
padding: 0 var(--space-lg, 24px);
}
/* ---------- Header ---------- */
.site-header { border-bottom: 1px solid var(--color-neutral-200, #e5e5e5); }
.topbar {
padding: var(--space-xs, 8px) 0;
background: var(--color-neutral-900, #000);
color: var(--color-neutral-00, #fff);
font-size: var(--text-body3-size, 14px);
}
.topbar-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm, 12px); }
.topbar-nav ul { display: flex; gap: var(--space-md, 16px); flex-wrap: wrap; }
.main-nav { padding: var(--space-md, 16px) 0; }
.main-nav-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-md, 16px); }
.site-logo { font-weight: 700; font-size: var(--text-h5-size, 20px); }
.primary-nav ul { display: flex; gap: var(--space-lg, 24px); flex-wrap: wrap; }
.main-nav-icons { display: flex; gap: var(--space-sm, 12px); }
.promo-bar {
text-align: center;
padding: var(--space-xs, 8px) 0;
background: var(--color-primary-500, #273bcd);
color: var(--color-neutral-00, #fff);
font-size: var(--text-body3-size, 14px);
}
.promo-bar a { text-decoration: underline; }
/* ---------- Footer ---------- */
/* Dựng lại theo đúng đoạn UX Builder (Flatsome) của footer thật coolmate.me
— xem chú thích đầy đủ ở đầu footer.php. Tóm tắt tỉ lệ cột lấy từ
span="…" trong đoạn UX Builder (span tính trên hệ 12 cột):
- Hàng 1 (.footer-feedback): 5 / 3 / 4 → grid 5fr 3fr 4fr
- Hàng 2 (.footer-columns): 2/2/2/2/4 (2 khối xếp chồng trong 4 cột đầu)
→ CSS Grid 2fr 2fr 2fr 2fr 4fr, mỗi khối gán grid-column/grid-row riêng
- Hàng 3 (.footer-legal): 7 / 5 → grid 7fr 5fr
Nền ĐEN + chữ TRẮNG (đảo màu theo yêu cầu trước), .nr-container trong
footer bỏ max-width 1240px để full-width sát viền màn hình. */
.site-footer {
padding: var(--space-2xl, 40px) 0 0;
background: var(--color-neutral-900, #000);
color: var(--color-neutral-300, #d1d1d1);
font-size: var(--text-body3-size, 14px);
border-top: 1px solid var(--color-neutral-700, #333);
}
.site-footer .nr-container { max-width: none; }
.footer-divider { border: none; border-top: 1px solid rgba(217, 217, 217, .26); margin: 0 0 var(--space-2xl, 40px); }
/* 1) Khối "COOLMATE lắng nghe bạn!" — grid 3 cột tỉ lệ 5:3:4 đúng span gốc */
.footer-feedback {
display: grid;
grid-template-columns: 5fr 3fr 4fr;
gap: var(--space-lg, 24px);
align-items: start;
padding-bottom: var(--space-2xl, 40px);
}
.footer-feedback-text h3 {
color: var(--color-neutral-00, #fff);
font-size: var(--text-body2-size, 16px);
font-weight: 600;
margin: 0 0 var(--space-xs, 8px);
}
.footer-feedback-text p {
font-size: 13px;
line-height: 1.5;
color: var(--color-neutral-400, #a3a3a3);
margin: 0 0 var(--space-md, 16px);
}
.footer-feedback-btn.btn-primary {
background: var(--color-primary-500, #273bcd);
padding: 11px 24px;
font-size: 13px;
}
.footer-feedback-btn .nr-footer-icon { width: 16px; height: 16px; }
/* Icon footer bằng ẢNH THẬT (Facebook/Instagram/YouTube/điện thoại/email) —
ảnh gốc là hình ĐEN trên nền trong suốt, nếu để nguyên sẽ biến mất trên
nền đen của footer (đen trên đen) nên phải lật màu bằng filter:invert(1)
để hiện thành màu trắng. object-fit:contain vì vài ảnh không vuông (ví
dụ icon Facebook cao hơn rộng) — co vừa khung 20x20 mà không méo hình. */
.nr-footer-icon-img { object-fit: contain; vertical-align: middle; }
.footer-feedback-social .nr-footer-icon-img,
.footer-contact-row .nr-footer-icon-img { filter: invert(1); }
/* Riêng Zalo/TikTok: ảnh gốc đã là màu TRẮNG sẵn (khác với 5 ảnh đen ở trên)
nên KHÔNG được lật màu — lật vào sẽ thành đen, biến mất trên nền đen. */
.footer-feedback-social .nr-footer-icon-zalo,
.footer-feedback-social .nr-footer-icon-tiktok { filter: none; }
.footer-contact-row {
display: flex;
align-items: flex-start;
gap: var(--space-xs, 8px);
margin: 0 0 var(--space-sm, 12px);
color: var(--color-neutral-300, #d1d1d1);
}
.footer-contact-row:last-child { margin-bottom: 0; }
.footer-contact-row .nr-footer-icon { flex: 0 0 auto; margin-top: 2px; color: var(--color-primary-300, #8f9aef); }
.footer-contact-row strong { display: block; font-size: 12px; color: var(--color-neutral-400, #a3a3a3); font-weight: 400; }
.footer-contact-row a { color: var(--color-neutral-00, #fff); font-weight: 600; }
/* distribute="between" trong ux_stack gốc → space-between, icon dàn đều
hết chiều rộng cột (span=4), không dồn về 1 phía. */
.footer-feedback-social { display: flex; align-items: center; justify-content: space-between; }
.footer-feedback-social a {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--color-neutral-700, #333);
color: var(--color-neutral-300, #d1d1d1);
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.footer-feedback-social a:hover { background: var(--color-primary-500, #273bcd); color: #fff; border-color: var(--color-primary-500, #273bcd); }
/* 2) 5 cột link — CSS Grid, mỗi "khối" (.footer-acc-item) gán đúng vị trí
cột/hàng theo span gốc, KHÔNG phụ thuộc thứ tự trong HTML (thứ tự HTML
viết theo đúng thứ tự accordion tablet/mobile cần, xem footer.php). Ở PC,
accordion "mở sẵn" hoàn toàn — button tiêu đề không có hiệu ứng bấm,
chevron ẩn, panel luôn hiện. */
.footer-columns {
display: grid;
grid-template-columns: 2fr 2fr 2fr 2fr 4fr;
grid-template-rows: auto auto;
gap: 0 var(--space-2xl, 40px);
padding-bottom: var(--space-2xl, 40px);
}
.footer-acc-coolclub { grid-column: 1; grid-row: 1; }
.footer-acc-tuyen-dung { grid-column: 1; grid-row: 2; }
.footer-acc-chinh-sach { grid-column: 2; grid-row: 1; }
.footer-acc-coolmate-me { grid-column: 2; grid-row: 2; }
.footer-acc-cskh { grid-column: 3; grid-row: 1; }
.footer-acc-kien-thuc { grid-column: 3; grid-row: 2; }
.footer-acc-ve-coolmate { grid-column: 4; grid-row: 1 / span 2; }
.footer-acc-dia-chi { grid-column: 5; grid-row: 1 / span 2; }
/* Khoảng cách giữa 2 khối xếp chồng trong CÙNG 1 cột (PC) — chỉ 3 khối
"hàng dưới" (tuyen-dung/coolmate-me/kien-thuc) mới cần margin-top, dựa
theo VỊ TRÍ LƯỚI (grid-row) chứ không dùng "+" theo thứ tự DOM, vì DOM
viết theo thứ tự accordion mobile nên không khớp thứ tự hiển thị ở PC
(ví dụ "Về Coolmate"/"Địa chỉ liên hệ" đứng sau trong DOM nhưng lại nằm
ở HÀNG 1, không được ăn margin-top của "hàng 2"). */
.footer-acc-tuyen-dung, .footer-acc-coolmate-me, .footer-acc-kien-thuc { margin-top: var(--space-lg, 24px); }
.footer-acc-toggle {
display: block;
width: 100%;
background: none;
border: none;
padding: 0;
margin-bottom: var(--space-sm, 12px);
color: var(--color-neutral-00, #fff);
font-family: inherit;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .02em;
text-align: left;
cursor: default;
}
.footer-acc-toggle span { pointer-events: none; }
.footer-acc-toggle .footer-acc-chevron { display: none; } /* PC: luôn mở, không cần mũi tên thu/xổ */
.footer-acc-static-title {
color: var(--color-neutral-00, #fff);
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .02em;
margin: 0 0 var(--space-sm, 12px);
}
.footer-acc-panel { max-height: none; overflow: visible; }
.footer-acc-panel ul { margin: 0; padding: 0; list-style: none; }
.footer-acc-panel li { margin-bottom: var(--space-xs, 8px); }
.footer-acc-panel li a { color: var(--color-neutral-400, #a3a3a3); }
.footer-acc-panel li a:hover { color: var(--color-primary-300, #8f9aef); }
.footer-acc-panel p { font-size: 13px; line-height: 1.5; color: var(--color-neutral-400, #a3a3a3); margin: 0 0 var(--space-sm, 12px); }
.footer-acc-panel p strong { color: var(--color-neutral-00, #fff); font-weight: 600; }
/* 3) Thông tin công ty + badge xác thực — grid 7:5 đúng span gốc.
Padding: trước đây "24px 0" (trên VÀ dưới) — nhưng NGAY PHÍA TRÊN khối
này đã có tự có margin-bottom 40px rồi, nên
cộng thêm 24px padding-top nữa thành ra khoảng cách divider→khối này
(64px) LỚN HƠN HẲN so với khoảng cách feedback→divider hay divider→cột-
link (đều đúng 40px) — đây chính là chỗ padding không đều giữa các phần.
Sửa: bỏ hẳn padding-top (để đúng 40px như những chỗ khác, do divider lo),
dồn hết vào padding-bottom = 40px để khớp với padding-top 40px của
.site-footer — mép trên và mép dưới của cả khối footer đen giờ bằng nhau. */
.footer-legal {
display: grid;
grid-template-columns: 7fr 5fr;
gap: var(--space-lg, 24px);
align-items: center;
padding: var(--space-2xl, 40px);
font-size: 12px;
color: var(--color-neutral-400, #a3a3a3);
}
.footer-legal-text p { margin: 0 0 4px; }
.footer-legal-text p:last-child { margin-bottom: 0; }
.footer-legal-badges { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-md, 16px); flex-wrap: wrap; }
/* 4 ảnh chứng nhận thật (badge-*.png trong assets/) — mỗi ảnh tự có nền/viền
riêng sẵn trong file nên không cần thêm box bao ở đây, chỉ cần đồng bộ
chiều cao hiển thị (chiều rộng tự co theo đúng tỉ lệ gốc mỗi ảnh, xem
width/height khai báo trong footer.php để trình duyệt không bị giật layout
lúc ảnh chưa tải xong). */
.footer-badge {
display: block;
line-height: 0;
}
.footer-badge img {
display: block;
height: 40px;
width: auto;
}
.footer-badge:hover { opacity: .85; }
.footer-badge-static { cursor: default; }
.footer-badge-static:hover { opacity: 1; }
/* ============================================================
Bước 3: trang danh sách Newsroom (page-newsroom.php)
============================================================ */
.newsroom-page { width: 100%; }
.thumb-placeholder {
background: var(--color-neutral-200, #e5e5e5);
border-radius: var(--radius-md, 12px);
aspect-ratio: 4 / 3;
width: 100%;
}
.nr-eyebrow {
display: block;
font-size: var(--text-sub1-size, 18px);
line-height: var(--text-sub1-line, 26px);
font-weight: 400;
color: var(--color-primary-700, #1f2fa4);
text-transform: none;
letter-spacing: -0.36px;
margin-bottom: var(--space-xs, 8px);
}
.nr-tag {
display: inline-block;
color: var(--color-primary-400, #4c5ddd);
font-feature-settings: 'cv01' on, 'cv02' on, 'cv03' on, 'cv04' on, 'cv10' on;
font-family: var(--font-body, sans-serif);
font-size: var(--text-body3-size, 14px);
font-style: normal;
font-weight: 400;
line-height: var(--text-body3-line, 20px);
margin-bottom: 0;
}
/* Banner đen full-width "COOLMATE NEWSROOM" — nền đen chạm hết viewport,
không cần "trick" margin âm nữa vì .newsroom-page giờ không còn giới hạn
1200px (xem .nr-container ở đầu file). Padding dọc giờ chuyển sang đặt
ở .nr-banner-row (hàng logo) thay vì ở chính .nr-banner — vì .nr-banner
giờ còn chứa thêm .nr-search-panel (khung tìm kiếm xổ ra) là 1 khối con
thứ 2 nữa; nếu để padding-bottom ở .nr-banner như trước, khoảng đệm đó
sẽ lòi ra thành 1 dải đen thừa NGAY DƯỚI khung tìm kiếm màu trắng (dưới
cùng .nr-banner) mỗi khi khung tìm kiếm đang mở, thay vì nằm sát dưới
logo như ý muốn. */
.nr-banner {
background: var(--color-neutral-900, #000);
color: var(--color-neutral-00, #fff);
text-align: center;
margin: 0 0 var(--space-2xl, 40px);
/* Cố định (sticky) trên đầu trang khi cuộn — dùng chung mọi trang vì
banner giờ nằm trong header.php. z-index cao để luôn nổi trên nội
dung bài viết/carousel/lightbox bên dưới khi cuộn qua. */
position: sticky;
top: 0;
z-index: 100;
}
/* Lỗi "2 dải đè lên nhau" khi cuộn, chỉ thấy lúc ĐÃ ĐĂNG NHẬP wp-admin: do
thanh admin bar của WordPress cũng position:fixed, top:0, cao 32px (46px
ở màn hình ≤782px) và z-index rất cao (99999) — banner sticky ở top:0 nên
khi cuộn, phần trên cùng của banner bị đúng thanh admin bar đó đè lên.
Fix chuẩn của WordPress: dịch top của mọi phần tử sticky/fixed xuống
đúng bằng chiều cao admin bar khi thẻ có class "admin-bar" (WP tự
thêm class này khi đang đăng nhập và bật thanh admin bar). Người dùng
thường (không đăng nhập, hoặc đã tắt thanh admin bar cho front-end) sẽ
không có class này nên banner vẫn dính đúng top:0 như cũ. */
body.admin-bar .nr-banner { top: 32px; }
@media screen and (max-width: 782px) {
body.admin-bar .nr-banner { top: 46px; }
}
.nr-banner h1 { margin: 0; font-weight: 400; font-size: var(--text-h5-size, 28px); letter-spacing: .05em; }
/* Logo/chữ "NEWSROOM" giờ là link (quay lại trang Newsroom) — flex canh
giữa logo+chữ trước đây khai báo ở .nr-banner h1, giờ chuyển sang chính
thẻ (header.php) vì mới là phần tử bao cả lẫn .
color: inherit + text-decoration: none để link không tự đổi màu xanh/
gạch chân mặc định của trình duyệt, nhìn vẫn y hệt lúc còn là text tĩnh. */
.nr-banner h1 a {
display: inline-flex;
align-items: center;
gap: var(--space-xs, 8px);
color: inherit;
text-decoration: none;
}
/* Ẩn khỏi màn hình nhưng screen reader vẫn đọc được — dùng cho