/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/
/*************** ADD CUSTOM CSS HERE. ***************/
/* Mở rộng cột dropdown menu "Danh mục sản phẩm" — mặc định Flatsome set cứng 160px,
quá hẹp cho tên category tiếng Việt dài, gây word-wrap từng chữ một. */
.nav-dropdown > li.nav-dropdown-col,
.nav-dropdown > li.image-column {
width: 230px;
min-width: 230px;
white-space: normal;
}
/* #1 — Tăng min-width dropdown menu để tên dài (vd "Kiến Thức Ngành Hoá Chất") không xuống
dòng. Áp mọi dropdown top-level. */
.header-nav .nav-dropdown {
min-width: 240px;
}
.header-nav .nav-dropdown > li > a {
white-space: nowrap;
}
/* #2 — Menu "Danh mục sản phẩm": hiển thị 1 cột dọc (không mega-menu table). Flatsome tự thêm
.nav-dropdown-col + display:table-cell cho item có con ở depth 1 (structure-header.php:253),
khiến submenu bung inline gây lộn xộn. Ép về block để mọi item xếp dọc, submenu cấp 2 của
"Hoá chất xi mạ" thành flyout hiện bên phải khi hover. */
.menu-item-1114 > .nav-dropdown {
display: block;
}
.menu-item-1114 > .nav-dropdown > li {
display: block;
width: 100%;
}
/* Item có submenu (Hoá chất xi mạ): giữ relative làm mốc cho flyout, hiện mũi tên chỉ hướng. */
.menu-item-1114 > .nav-dropdown > li.nav-dropdown-col {
position: relative;
display: block;
width: 100%;
}
/* Submenu cấp 2 (Flatsome render class .nav-column, không phải .nav-dropdown): ẩn mặc định,
định vị flyout bên phải item cha. */
.menu-item-1114 > .nav-dropdown > li.nav-dropdown-col > .nav-column {
display: block;
position: absolute;
top: -20px;
left: 100%;
min-width: 240px;
padding: 20px;
background-color: #fff;
box-shadow: 0 10px 40px rgba(0,0,0,.13);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .25s;
z-index: 10;
}
/* Hover vào item cha → hiện submenu flyout. */
.menu-item-1114 > .nav-dropdown > li.nav-dropdown-col:hover > .nav-column {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* Icon "☰" trước "Danh mục sản phẩm": nhỏ lại + cách chữ. Flatsome set 1.9em (~33px) qua
.nav>li>a>i.icon-menu (specificity 0,2,3) → thêm .nav ancestor để thắng cascade. */
.nav .menu-item-1114 > a > i.icon-menu {
font-size: 24px;
margin-right: 8px;
}
/* Item "Hoá chất xi mạ" (nav-dropdown-col) bị Flatsome cho font nhỏ (12.8px) + đậm (700) + màu
đen đậm rgb(0,0,0) như tiêu đề cột mega-menu → ép về cỡ/weight/màu bằng các item khác
(16px / 400 / rgba(102,102,102,.85)). */
.menu-item-1114 > .nav-dropdown > li.nav-dropdown-col > a {
font-size: 16px;
font-weight: 400;
color: rgba(102, 102, 102, 0.85);
}
/* Phân biệt item có submenu bằng mũi tên "›" (thay cho chữ đậm), căn phải trong item. */
.menu-item-1114 > .nav-dropdown > li.nav-dropdown-col > a {
position: relative;
padding-right: 20px;
}
.menu-item-1114 > .nav-dropdown > li.nav-dropdown-col > a::after {
content: "›";
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
font-size: 18px;
line-height: 1;
opacity: 0.6;
}
/* Top bar: nền trắng, social icon màu xám (topbar_color=light đã đổi màu chữ/nav-top-menu,
nhưng social-icons dùng màu cố định riêng nên cần override thêm), viền dưới mảnh để
phân tách với header chính bên dưới (giống ảnh tham khảo). */
.header-top .social-icons a.icon {
color: #888;
}
.header-top .social-icons a.icon:hover {
color: #555;
}
.header-top {
border-bottom: 1px solid #e5e5e5;
}
/* Flag icons bên phải top bar (link ra bản ngôn ngữ khác trên site production). */
.topbar-flags {
display: flex;
align-items: center;
gap: 8px;
}
.topbar-flags a {
display: inline-flex;
line-height: 0;
}
.topbar-flags img {
display: block;
border-radius: 2px;
}
/* Mô tả ảnh (figcaption trong khối ảnh Gutenberg) căn giữa toàn site — mặc định browser
render figcaption với text-align:start (lệch trái), không khớp ảnh aligncenter phía trên. */
figure figcaption {
text-align: center;
}
/* Trang danh mục (archive): tiêu đề danh mục (H1) đang nhỏ hơn tiêu đề từng bài viết (H2,
font-size:2em cố định của Flatsome) do class .is-large chỉ nhân 1.15em lên h1 gốc — không
có theme option nào điều chỉnh riêng size này, phải override CSS trực tiếp. */
.archive-page-header .page-title {
font-size: 2.4em;
}
/* Title Case cho tiêu đề bài viết trên trang danh mục xử lý ở PHP (functions.php:
ath_title_case_if_all_caps) vì nhiều post_title lưu sẵn ALL CAPS trong DB — CSS
text-transform không thể phân biệt/khôi phục lại chữ thường từ chữ hoa. */
/* Trust badge trang sản phẩm đơn (functions.php: ath_product_trust_badge), nằm dưới mô tả
ngắn — margin-top tách khỏi excerpt phía trên, max-width tránh badge tràn quá khổ cột info. */
.ath-trust-badge {
margin-top: 15px;
}
.ath-trust-badge img {
display: block;
max-width: 100%;
height: auto;
}
/* B2B: sản phẩm không có giá → .price-wrapper chứa rỗng, chiếm khoảng trắng
thừa. Ẩn wrapper rỗng (kể cả khi chỉ chứa
rỗng, dùng :has) để layout gọn. */
.single-product .entry-summary .price-wrapper:empty,
.product-small .price-wrapper:empty,
.single-product .entry-summary .price-wrapper:has(> .price:empty),
.product-small .price-wrapper:has(> .price:empty) {
display: none;
}
/* Nút "Yêu cầu báo giá" trên trang sản phẩm đơn (functions.php: ath_product_quote_button). */
.ath-quote-wrap {
margin: 20px 0;
}
.ath-quote-button {
display: inline-flex;
align-items: center;
gap: 8px;
text-transform: none; /* bỏ uppercase mặc định của .button toàn site */
}
/* Màu nền + chữ nút lấy từ class .secondary (Flatsome tự inject theo color_secondary theme_mod),
KHÔNG hardcode — đổi màu secondary trong theme là nút tự cập nhật. */
.ath-quote-button .icon-envelop {
font-size: 1.1em;
}
/* ============================================================
Popup báo giá B2B (Flatsome lightbox + CF7 3900) — style chuyên nghiệp, tăng trust.
============================================================ */
.ath-quote-popup {
position: relative;
max-width: 620px;
padding: 0; /* padding chuyển vào header/body */
border-radius: 14px;
overflow: hidden;
box-shadow: 0 30px 80px -20px rgba(0, 51, 91, .45);
}
/* --- Header: dải nền navy nhẹ, icon tròn, tiêu đề, sub-text --- */
.ath-quote-header {
background: linear-gradient(135deg, var(--primary-color, #00335b) 0%, #004b85 100%);
color: #fff;
padding: 20px 34px 18px;
text-align: center;
}
.ath-quote-popup-title {
margin: 0 0 6px;
color: #fff;
font-size: 22px;
line-height: 1.2;
}
.ath-quote-sub {
margin: 0;
color: rgba(255, 255, 255, .85);
font-size: 13.5px;
line-height: 1.5;
}
.ath-quote-sub strong { color: #fff; }
/* --- Body --- */
.ath-quote-body {
padding: 24px 34px 28px;
background: #fff;
}
/* Badge sản phẩm đang hỏi */
.ath-quote-product {
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 18px;
padding: 10px 14px;
background: #f4f8fb;
border-left: 3px solid var(--ath-secondary, #00acbe);
border-radius: 6px;
}
.ath-quote-product__label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: .04em;
color: #8a97a3;
}
.ath-quote-product__name {
font-weight: 700;
color: var(--primary-color, #00335b);
font-size: 14.5px;
}
/* --- Input / textarea: nền, viền, focus state cyan, icon --- */
.ath-quote-body .wpcf7-form-control-wrap { display: block; }
.ath-quote-body .wpcf7 p { margin: 0 0 14px; }
.ath-quote-body input[type="text"],
.ath-quote-body input[type="email"],
.ath-quote-body input[type="tel"],
.ath-quote-body textarea {
width: 100%;
background: #f7f9fb;
border: 1px solid #e2e8ee;
border-radius: 8px;
padding: 13px 15px;
font-size: 15px;
color: #23303c;
transition: border-color .15s, box-shadow .15s, background .15s;
}
.ath-quote-body input::placeholder,
.ath-quote-body textarea::placeholder { color: #97a3ad; }
.ath-quote-body input[type="text"]:focus,
.ath-quote-body input[type="email"]:focus,
.ath-quote-body input[type="tel"]:focus,
.ath-quote-body textarea:focus {
background: #fff;
border-color: var(--ath-secondary, #00acbe);
box-shadow: 0 0 0 3px rgba(0, 172, 190, .14);
outline: none;
}
.ath-quote-body textarea { min-height: 96px; resize: vertical; }
/* (Layout 2 cột bỏ qua: form CF7 3900 gói mọi field trong 1
ngăn bằng
, không có
wrapper riêng mỗi field → không tách cột bằng CSS được. Sửa cấu trúc form 3900 có side effect
vì form dùng chung ở Trang Chủ. Giữ 1 cột.) */
/* --- Nút submit --- */
.ath-quote-body input[type="submit"].wpcf7-submit {
display: block;
width: 100%;
margin: 4px 0 0; /* bỏ margin-bottom mặc định của CF7 */
padding: 14px 20px;
font-size: 15px;
font-weight: 700;
border-radius: 8px;
transition: transform .1s, box-shadow .15s, background .15s;
}
/*
cuối (chứa nút) + response-output ẩn: bỏ margin thừa đẩy trust line xuống xa. */
.ath-quote-body .wpcf7 p:last-of-type { margin-bottom: 0; }
.ath-quote-body .wpcf7-response-output { margin: 12px 0 0; }
.ath-quote-body .wpcf7-form { margin-bottom: 0; }
/* Spinner CF7 (nút block full-width nên spinner rơi xuống dòng riêng, chiếm 24px khi idle).
Định vị absolute để KHÔNG chiếm chỗ trong luồng; khi đang gửi vẫn hiện đè lên vùng nút. */
.ath-quote-body .wpcf7 p:last-of-type { position: relative; }
.ath-quote-body .wpcf7-spinner {
position: absolute;
right: 14px;
bottom: 12px;
margin: 0;
}
.ath-quote-body input[type="submit"].wpcf7-submit:hover {
transform: translateY(-1px);
box-shadow: 0 8px 20px -6px rgba(0, 172, 190, .55);
}
/* --- Trust line dưới form --- */
.ath-quote-trust {
display: flex;
align-items: center;
justify-content: center;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #eef2f5;
font-size: 13px;
color: #667581;
}
.ath-quote-trust__item { display: inline-flex; align-items: center; gap: 6px; }
.ath-quote-trust .icon-lock { color: #2fa563; }
/* Nút submit MỌI form CF7 lấy màu secondary từ theme (không hardcode). */
.wpcf7 input[type="submit"].wpcf7-submit {
background-color: var(--ath-secondary);
border-color: var(--ath-secondary);
}
/* Nút close: JS di chuyển .mfp-close vào trong popup → định vị góc phải trên (đè lên header). */
.ath-quote-popup > .mfp-close {
position: absolute !important;
top: 8px;
right: 8px;
width: 36px;
height: 36px;
color: #fff !important;
opacity: .85;
}
.ath-quote-popup > .mfp-close:hover { opacity: 1; }
/* Mobile: giảm padding cho gọn */
@media (max-width: 549px) {
.ath-quote-header { padding: 24px 22px 20px; }
.ath-quote-body { padding: 20px 22px 24px; }
}
/* Bản đồ Google Maps trang liên hệ (post 206) — full width trên cùng, bo góc nhẹ. iframe
query search (không cần API key), render thật cần internet (local Docker offline hiện ô xám). */
.ath-contact-map {
margin-bottom: 30px;
}
.ath-contact-map iframe {
display: block;
width: 100%;
border-radius: 6px;
}
/* Fanpage Facebook nhúng ở footer (widget Custom HTML, footer-1 cột 2). data-adapt-container-
-width co iframe theo cột, nhưng vẫn giới hạn để không tràn + căn theo cột. */
.ath-fanpage {
max-width: 100%;
max-height: 260px;
overflow: hidden;
}
.ath-fanpage .fb-page,
.ath-fanpage .fb-page span,
.ath-fanpage .fb-page iframe {
max-width: 100% !important;
}
/* Chữ + tiêu đề vùng widget footer màu trắng (nền navy #00335b). Theme option footer_1_color
'light' chỉ áp class .dark cho .absolute-footer (dòng copyright), KHÔNG cho vùng widget →
phải override CSS. */
.footer-widgets.footer-1,
.footer-widgets.footer-1 p,
.footer-widgets.footer-1 li,
.footer-widgets.footer-1 .widget-title,
.footer-widgets.footer-1 .widget-title span {
color: #ffffff;
}
/* Link/SĐT trong footer hover màu tối (mặc định Flatsome darken khi hover) khó đọc trên nền
navy → ép trắng khi hover, chỉ scope trong footer-1 để không ảnh hưởng link nơi khác. */
.footer-widgets.footer-1 a:hover,
.footer-widgets.footer-1 a:focus {
color: #ffffff;
}
/* Logo trắng cột 1 (Thông tin công ty) — cách nội dung text bên dưới. */
.ath-footer-logo {
display: block;
max-width: 220px;
height: auto;
margin-bottom: 16px;
}
/* Footer-1 4 cột chia đều 25% mặc định (.large-columns-4 > .col { max-width:25% }) khiến số điện
thoại + email ở cột "Liên Hệ" bị xuống dòng. Thu hẹp cột "Liên Kết Hữu Ích" (#nav_menu-5), nới
rộng cột "Liên Hệ" (#custom_html-7) — nhắm theo ID widget (ổn định, không đổi khi kéo-thả lại
thứ tự) thay vì nth-child (dễ vỡ nếu thứ tự widget đổi). Chỉ áp desktop (≥850px, mốc chuẩn
Flatsome) — dưới breakpoint đó Flatsome tự chuyển full-width từng cột, không cần can thiệp. */
@media (min-width: 850px) {
.footer-widgets.footer-1 .row.large-columns-4 > #nav_menu-5 {
max-width: 22%;
flex-basis: 22%;
}
.footer-widgets.footer-1 .row.large-columns-4 > #custom_html-7 {
max-width: 28%;
flex-basis: 28%;
}
}
/* Ảnh mockup tạm cần thay bằng ảnh ATH thật — badge góc trên trái để dễ tìm. Bọc ảnh trong
... . Bỏ toàn bộ khi đã thay ảnh thật (hoặc
xóa class .ath-mock). */
.ath-mock {
position: relative;
display: block;
}
.ath-mock::before {
content: "⚑ " attr(data-note);
position: absolute;
top: 8px;
left: 8px;
z-index: 5;
background: rgba(252, 188, 0, 0.95);
color: #00335b;
font-size: 11px;
font-weight: 700;
padding: 3px 8px;
border-radius: 4px;
max-width: 90%;
line-height: 1.3;
pointer-events: none;
}
/* ============================================================
Timeline Vertical SO LE 2 BÊN (dùng cho trang About Us) — đường timeline nằm GIỮA, mỗi mốc
luân phiên trái/phải. Màu theo THEME: navy --primary-color (#00335b) làm màu chính, secondary
#00acbe (cyan) làm shadow trang trí badge.
Cấu trúc: [section class="ath-timeline-vertical"] > mỗi mốc [row class="ath-tl-row"] >
[col class="ath-tl-section"] chứa [ux_text class="ath-tl-time"] + đoạn mô tả.
============================================================ */
.ath-timeline-vertical {
position: relative;
max-width: 900px;
margin: 0 auto; /* căn giữa toàn timeline → đường giữa nằm giữa màn hình */
padding: 20px 0;
}
/* Đường dọc chính — nằm chính GIỮA container. top/bottom lùi vào để đường bắt đầu ~tâm badge
mốc đầu và kết thúc ~tâm badge mốc cuối, không thò ra ngoài các ô nội dung. */
.ath-timeline-vertical:before {
content: "";
position: absolute;
top: 16px;
bottom: 16px;
left: 50%;
width: 2px;
margin-left: -1px;
background: var(--primary-color);
}
.ath-timeline-vertical .ath-tl-row {
position: relative;
padding-bottom: 20px; /* khoảng cách cố định giữa các ô (áp dụng cả desktop + mobile) */
}
.ath-timeline-vertical .ath-tl-row:last-child {
padding-bottom: 0;
}
/* Che đoạn đường thừa DƯỚI badge mốc cuối (đường container top/bottom cố định không biết
trước chiều cao row cuối). Phủ nền trắng từ ngay dưới tâm badge xuống hết row cuối. */
.ath-timeline-vertical .ath-tl-row:last-child:after {
content: "";
position: absolute;
top: 16px;
bottom: 0;
left: 50%;
width: 4px;
margin-left: -2px;
background: #fff;
z-index: 1;
}
/* Badge tròn nhỏ (bỏ icon đồng hồ) — nằm chính giữa đường timeline. */
.ath-timeline-vertical .ath-tl-row:before {
content: "";
width: 20px;
height: 20px;
background: #fff;
box-shadow: 2px 2px 0 var(--ath-secondary, #00acbe);
position: absolute;
left: 50%;
margin-left: -10px;
top: 6px;
border: 2px solid var(--primary-color);
border-radius: 99px;
z-index: 2;
}
/* Bỏ hiệu ứng hover đổi màu badge (theo yêu cầu bỏ animation). */
/* Nhãn mốc thời gian (nền navy, chữ trắng) — font nhỏ hơn, gọn hơn. */
.ath-timeline-vertical .ath-tl-time {
line-height: 22px;
border-radius: 4px;
margin-bottom: 6px;
padding: 2px 10px;
background: var(--primary-color);
color: #fff;
display: inline-block;
font-size: .82em; /* badge năm nhỏ hơn chút */
}
.ath-timeline-vertical .ath-tl-time p {
margin-bottom: 0;
}
/* Khối nội dung mỗi mốc — chiếm ~44% 1 bên (override flex-basis 100% của Flatsome .col để
không full width), có mũi tên chỉ về đường giữa. */
.ath-timeline-vertical .ath-tl-section {
width: 44%;
flex: 0 0 44%;
max-width: 44%;
border: 2px solid var(--primary-color);
border-radius: 6px;
box-shadow: 0 20px 25px -15px rgba(0, 0, 0, .3);
position: relative;
/* Gọn: giảm padding trên/dưới trong ô nội dung (ghi đè padding inline của [col_inner]). */
padding-top: 12px !important;
padding-bottom: 12px !important;
}
/* Đoạn mô tả trong ô: bỏ margin-bottom dư để ô sát nội dung. */
.ath-timeline-vertical .ath-tl-section > p:last-child {
margin-bottom: 0;
}
/* Mốc LẺ → bên TRÁI, mũi tên chỉ sang phải (về đường giữa). */
.ath-timeline-vertical .ath-tl-row:nth-child(odd) .ath-tl-section {
margin-left: 0;
margin-right: auto;
}
.ath-timeline-vertical .ath-tl-row:nth-child(odd) .ath-tl-section:before {
content: "";
position: absolute;
top: 8px; /* ngang tâm vòng tròn (tâm badge ~16px, tam giác 8px → top 8) */
right: -10px;
border-top: 8px solid transparent;
border-left: 8px solid var(--primary-color);
border-bottom: 8px solid transparent;
}
/* Mốc CHẴN → bên PHẢI, mũi tên chỉ sang trái (về đường giữa). */
.ath-timeline-vertical .ath-tl-row:nth-child(even) .ath-tl-section {
margin-left: auto;
margin-right: 0;
}
.ath-timeline-vertical .ath-tl-row:nth-child(even) .ath-tl-section:before {
content: "";
position: absolute;
top: 8px; /* ngang tâm vòng tròn */
left: -10px;
border-top: 8px solid transparent;
border-right: 8px solid var(--primary-color);
border-bottom: 8px solid transparent;
}
/* ============================================================
TẦM NHÌN - SỨ MỆNH (2 cột card) + GIÁ TRỊ CỐT LÕI (4 cột icon) — trang About Us.
Màu theo THEME: navy --primary-color, secondary #00acbe.
============================================================ */
/* --- Tầm Nhìn - Sứ Mệnh --- */
.ath-vm-card {
border: 1px solid #e6e6e6;
border-radius: 8px;
background: #fff;
padding: 24px;
height: 100%;
box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .25);
}
.ath-vm-title {
color: var(--primary-color);
margin: 0 0 16px;
display: flex;
align-items: baseline;
gap: 8px;
}
.ath-vm-title span[class^="icon-"] {
color: var(--ath-secondary, #00acbe);
font-size: 1.1em;
}
.ath-vm-title small {
color: #888;
font-weight: 400;
font-size: .6em;
text-transform: uppercase;
letter-spacing: .05em;
}
.ath-vm-img {
width: 100%;
aspect-ratio: 64 / 30; /* 640x300 */
object-fit: cover;
border-radius: 6px;
margin-bottom: 16px;
display: block;
}
.ath-vm-list {
list-style: none;
padding: 0;
margin: 0;
}
.ath-vm-list li {
position: relative;
padding-left: 22px;
margin-bottom: 12px;
color: #555;
}
.ath-vm-list li:before {
content: "+";
position: absolute;
left: 0;
top: 0;
color: var(--ath-secondary, #00acbe);
font-weight: 700;
}
/* --- Giá Trị Cốt Lõi --- */
.ath-cv-card {
text-align: center;
border: 1px solid #eee;
border-radius: 10px;
background: #fff;
padding: 30px 20px;
height: 100%;
transition: box-shadow .25s, transform .25s;
}
.ath-cv-card:hover {
box-shadow: 0 18px 40px -20px rgba(0, 51, 91, .35);
transform: translateY(-4px);
}
.ath-cv-icon {
width: 76px;
height: 76px;
margin: 0 auto 18px;
display: flex;
align-items: center;
justify-content: center;
}
.ath-cv-icon span[class^="icon-"] {
color: var(--primary-color);
font-size: 24px;
}
/* Icon dạng ảnh PNG (thay cho font-icon) — chiếm trọn ô icon, giữ tỉ lệ. */
.ath-cv-icon img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.ath-cv-title {
color: var(--primary-color);
margin: 0 0 6px;
font-size: 1.05em;
}
.ath-cv-sub {
color: var(--ath-secondary, #00acbe);
font-size: .72em;
letter-spacing: .12em;
font-weight: 600;
margin-bottom: 12px;
}
.ath-cv-card p {
color: #666;
font-size: .92em;
margin: 0;
}
@media (max-width: 849px) {
/*************** ADD MOBILE ONLY CSS HERE ***************/
/* Mobile: timeline về 1 CỘT — đường + badge canh chung mốc 20px bên trái, ô nội dung nới
rộng gần full (bên phải đường). Tâm đường (left:20px) trùng tâm badge (left:20px, width 40,
margin-left:-20 → tâm 20px). */
.ath-timeline-vertical {
max-width: 100%;
}
.ath-timeline-vertical:before {
left: 20px;
margin-left: -1px;
}
/* Badge (20px) canh TÂM trùng đường: đường ở left:20px (theo container). Row .row-small lùi trái
10px (margin-left:-10px) → badge tính theo row phải bù +10px = left:30px, rồi margin-left:-10px
(nửa badge 20px) → tâm badge = 30-10 = 20px, trùng đường. */
.ath-timeline-vertical .ath-tl-row:before {
left: 30px;
margin-left: -10px;
}
/* Mask che đường thừa dưới badge cuối — trùng tâm đường (left:30px theo row = 20px container). */
.ath-timeline-vertical .ath-tl-row:last-child:after {
left: 30px;
margin-left: -2px;
}
/* Reset flex/width 44% của desktop → ô nội dung co ngang, đẩy cách badge xa hơn (margin-left
lớn hơn), mép phải giữ nguyên (margin-right:0). */
.ath-timeline-vertical .ath-tl-section,
.ath-timeline-vertical .ath-tl-row:nth-child(odd) .ath-tl-section,
.ath-timeline-vertical .ath-tl-row:nth-child(even) .ath-tl-section {
width: auto;
flex: 1 1 auto;
max-width: none;
margin-left: 72px;
margin-right: 0;
}
/* Mũi tên luôn chỉ sang trái (về đường bên trái). */
.ath-timeline-vertical .ath-tl-row:nth-child(odd) .ath-tl-section:before,
.ath-timeline-vertical .ath-tl-row:nth-child(even) .ath-tl-section:before {
left: -10px;
right: auto;
border-left: 0;
border-right: 8px solid var(--primary-color);
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
}
/* ===== Mobile off-canvas menu (#main-menu) — chỉ render ở mobile nên không cần media query.
Mục con (submenu) đang 16px, TO HƠN tên menu cha (12.8px) → thu nhỏ về ~13px cho đúng phân
cấp (cha to hơn con). Bao gồm cả "Hoá chất xi mạ" (nav-dropdown-col) vốn lệch cỡ. ===== */
#main-menu .nav-sidebar li li > a,
#main-menu .nav-sidebar li li.nav-dropdown-col > a {
font-size: 12px;
}
/* Ẩn icon "☰" trước "Danh mục sản phẩm" trên mobile off-canvas (thừa, đã có mũi tên toggle). */
#main-menu .menu-item-1114 > a > i.icon-menu {
display: none;
}
/* Ẩn topbar trên mobile — theme option topbar_show là toggle toàn cục (không riêng mobile),
nên ẩn bằng CSS ở breakpoint mobile header của Flatsome (≤849px). Topbar mobile hiện chỉ là
dải trống ~30px chiếm chỗ. */
@media (max-width: 849px) {
#top-bar {
display: none;
}
}
/* ============================================================
TRANG DANH MỤC SẢN PHẨM (product category / shop)
============================================================ */
/* Breadcrumb đang to hơn cả tiêu đề — thu nhỏ + giảm đậm cho hợp thứ bậc. */
.shop-page-title .woocommerce-breadcrumb,
.shop-page-title .breadcrumbs {
font-size: 12px;
line-height: 1.6;
opacity: 0.75;
}
/* Breadcrumb (trang danh mục + trang sản phẩm): Flatsome ép uppercase qua class .uppercase.
Đổi sang Title Case (capitalize). Tên category đã chuẩn hoá Title Case trong DB nên capitalize
chỉ còn hoa chữ đầu các từ cố định như "Trang chủ" → "Trang Chủ". */
.woocommerce-breadcrumb.uppercase,
.breadcrumbs.uppercase,
.shop-page-title .woocommerce-breadcrumb,
.product-info .woocommerce-breadcrumb,
.single-product .woocommerce-breadcrumb {
text-transform: capitalize;
}
/* H1 tên danh mục (nằm trong category description) — cho lớn, rõ, canh giữa,
là heading chính của trang. */
.term-description h1,
.category-description h1 {
font-size: 30px;
line-height: 1.3;
font-weight: 700;
margin: 6px 0 18px;
color: var(--primary-color, #00335b);
}
/* Sidebar "DANH MỤC SẢN PHẨM": nội dung link danh mục đang to hơn cả tiêu đề widget.
Thu nhỏ về mức hợp lý, nhỏ hơn tiêu đề widget. */
.widget_product_categories .widget-title,
.widget_product_categories .widget-title span {
font-size: 15px;
}
.widget_product_categories ul.product-categories li a {
font-size: 13px;
line-height: 1.5;
}
.widget_product_categories ul.product-categories li {
padding-top: 4px;
padding-bottom: 4px;
}
/* Bỏ hẳn nút "Quick View" khi hover ảnh sản phẩm — ẩn cả wrapper .image-tools
để không còn vệt hover slide-in. */
.product-small .box-image .image-tools,
.product-small .quick-view,
.box-image .quick-view {
display: none !important;
}
/* Ảnh đại diện sản phẩm trong lưới danh sách:
file thumbnail đã được PAD về VUÔNG thật (canvas cạnh dài nhất, nền trắng, ảnh canh giữa —
xem pad-thumbnails-gd.php) → lưới đồng đều mà vẫn thấy TRỌN sản phẩm, không cắt.
Nền trắng + object-fit:contain là lớp phòng hờ cho ảnh chưa pad (SP thêm mới sau này). */
.products .product-small .box-image {
background: #fff;
}
.products .product-small .box-image img:not(.nsw-product-overlay-logo) {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: contain;
object-position: center;
background: #fff;
}
/* ============================================================
Block "Thông tin liên hệ + Yêu Cầu Tư Vấn" ([ath_contact_cta])
Tự chèn cuối trang sản phẩm — thông tin trái, nút phải.
============================================================ */
.ath-contact-cta {
margin: 0 0 30px;
padding: 26px 30px;
background: #f6f8fa;
border: 1px solid #e6ebf0;
border-left: 4px solid var(--ath-secondary, #00acbe);
border-radius: 10px;
}
/* Đoạn giới thiệu ATH (full-width, trên cùng block) */
.ath-contact-cta__intro {
margin-bottom: 22px;
padding-bottom: 20px;
border-bottom: 1px solid #e6ebf0;
}
.ath-contact-cta__intro-title {
margin: 0 0 10px;
color: var(--primary-color, #00335b);
font-size: 20px;
line-height: 1.3;
}
.ath-contact-cta__intro-text {
margin: 0;
color: #555;
font-size: 15px;
line-height: 1.7;
}
/* Hàng dưới: thông tin liên hệ (trái) + nút (phải) */
.ath-contact-cta__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
flex-wrap: wrap;
}
.ath-contact-cta__info {
flex: 1 1 340px;
min-width: 280px;
}
.ath-contact-cta__lead {
margin: 0 0 12px;
color: #333;
font-size: 15px;
}
.ath-contact-cta__company {
margin: 0 0 10px;
color: var(--ath-secondary, #00acbe);
font-weight: 700;
font-size: 15px;
letter-spacing: .01em;
}
.ath-contact-cta__list {
list-style: none;
margin: 0;
padding: 0;
}
.ath-contact-cta__list li {
display: flex;
align-items: flex-start;
gap: 9px;
margin: 0 0 8px;
color: #333;
font-size: 14.5px;
line-height: 1.55;
}
.ath-contact-cta__list li:last-child {
margin-bottom: 0;
}
.ath-contact-cta__ico {
color: var(--primary-color, #00335b);
flex: 0 0 auto;
line-height: 1.55;
}
.ath-contact-cta__list a {
color: var(--primary-color, #00335b);
}
.ath-contact-cta__action {
flex: 0 0 auto;
}
.ath-contact-cta__btn.button {
margin: 0;
background-color: var(--ath-secondary, #00acbe);
border-color: var(--ath-secondary, #00acbe);
color: #fff;
font-weight: 700;
text-transform: none;
padding: 0 30px;
border-radius: 6px;
white-space: nowrap;
}
.ath-contact-cta__btn.button:hover {
background-color: var(--primary-color, #00335b);
border-color: var(--primary-color, #00335b);
color: #fff;
}
/* Mobile: xếp dọc, nút full-width dưới thông tin */
@media (max-width: 549px) {
.ath-contact-cta {
padding: 22px 20px;
}
.ath-contact-cta__row {
flex-direction: column;
align-items: stretch;
gap: 16px;
}
/* Trục dọc (column): flex-basis 340px của info bị hiểu thành chiều CAO tối thiểu
→ sinh khoảng trống thừa dưới danh sách. Reset về auto. */
.ath-contact-cta__info {
flex: 0 0 auto;
min-width: 0;
}
.ath-contact-cta__action {
width: 100%;
}
.ath-contact-cta__btn.button {
display: block;
width: 100%;
margin: 0;
text-align: center;
}
}
/* Khối "Sản phẩm tương tự" cuối trang SP: giữ đường ngăn cách trên (border-top gốc của Flatsome)
nhưng thêm khoảng thở phía trên — block liên hệ nằm ngay trên nó có margin-bottom nhỏ nên
trước đó đường kẻ dính sát, khó thấy. */
.single-product .related.related-products-wrapper {
margin-top: 30px;
padding-top: 30px;
}
/* UX Block liên hệ cuối trang SP (bọc trong .ath-product-contact-block từ hook).
Xuống hàng các dòng liên hệ xử lý ở PHP (hook chạy wpautop cho nội dung [ux_text] → mỗi
dòng thành
) — bền vững kể cả sau khi user sửa block trong UX Builder.
Các dòng liên hệ (col span 8) margin mặc định 20px quá rộng → thu gọn còn 6px cho danh sách
liền mạch. Không đụng đoạn intro (nằm ux_text riêng phía trên, ngoài .row). */
.ath-product-contact-block .row .col .text p {
margin-bottom: 6px;
}
.ath-product-contact-block .row .col .text p:last-child {
margin-bottom: 0;
}
/* Nút "Yêu Cầu Tư Vấn": căn PHẢI desktop (align=right trong block), căn GIỮA trên mobile.
Nhắm theo class .text-right (từ align="right" trong [col]) — KHÔNG neo theo href, vì href
nút này đổi qua nhiều đích khác nhau (/contact-us/, /#quote...) theo thời gian và làm rớt
style nếu selector neo cứng vào 1 URL cụ thể (đã vấp 2026-08-18 khi đổi link sang /#quote). */
@media (max-width: 549px) {
.ath-product-contact-block .col-inner.text-right {
text-align: center;
}
}
/* ============================================================
Bản ghi bài viết — trang danh sách (blog/archive) VÀ trang single post.
Mục 1,2,3 áp cho cả 3 context (.blog/.archive/.single); mục 4 chỉ danh sách.
============================================================ */
/* 1) Bỏ tên danh mục hiển thị phía trên tiêu đề bài. */
.blog .entry-category,
.archive .entry-category,
.single .entry-category {
display: none;
}
/* 2) Dòng "Đăng ngày ... bởi ..." không viết hoa (class .uppercase ép hoa cả dòng). */
.blog .entry-meta.uppercase,
.archive .entry-meta.uppercase,
.single .entry-meta.uppercase {
text-transform: none;
}
/* 3) Ảnh featured bài viết (.entry-image chỉ là ảnh header, không phải ảnh trong nội dung):
viền xám nhạt giống 2 đường line của footer metadata (1px solid #ececec). */
.blog .entry-image,
.archive .entry-image,
.single .entry-image {
border: 1px solid #ececec;
}
/* 4) Bỏ "Leave a comment" trong footer metadata (chỉ trang danh sách). */
.blog .entry-meta .comments-link,
.archive .entry-meta .comments-link {
display: none;
}
/* Blockquote "is-style-large" (Gutenberg) trong nội dung bài: mặc định 1.8em (28.8px) quá to
→ thu về ~1.15em cho cân đối, vẫn nổi bật hơn body. */
.entry-content blockquote.is-style-large,
.entry-content blockquote.is-style-large p {
font-size: 18px;
line-height: 1.6;
}
/* ============================================================
Form Liên Hệ trang contact-us (CF7 3904, class .contact-3) — style chuyên nghiệp B2B,
đồng bộ với form báo giá. Nhắm .contact-3 để KHÔNG đụng form quote (.contact-2) / form khác.
============================================================ */
.contact-3 .con {
display: flex;
flex-wrap: wrap;
gap: 0 16px;
}
/* Mỗi field bọc trong .input. — mặc định full hàng */
.contact-3 .con > .input,
.contact-3 .con > div:not(.input) {
flex: 1 1 100%;
}
/* Họ tên + Email nằm 2 cột (desktop) cho gọn */
@media (min-width: 550px) {
.contact-3 .con > .input.name,
.contact-3 .con > .input.email {
flex: 1 1 calc(50% - 8px);
}
}
.contact-3 .con .input p { margin: 0 0 14px; }
.contact-3 label {
display: block;
font-size: 13.5px;
font-weight: 600;
color: var(--primary-color, #00335b);
margin-bottom: 6px;
}
/* Input / textarea: nền xám nhạt, viền mảnh, focus cyan (giống form báo giá) */
.contact-3 input[type="text"],
.contact-3 input[type="email"],
.contact-3 input[type="tel"],
.contact-3 textarea {
width: 100%;
background: #f7f9fb;
border: 1px solid #e2e8ee;
border-radius: 8px;
padding: 12px 15px;
font-size: 15px;
color: #23303c;
transition: border-color .15s, box-shadow .15s, background .15s;
}
.contact-3 input:focus,
.contact-3 textarea:focus {
background: #fff;
border-color: var(--ath-secondary, #00acbe);
box-shadow: 0 0 0 3px rgba(0, 172, 190, .14);
outline: none;
}
.contact-3 textarea { min-height: 130px; resize: vertical; }
/* Nút gửi: full-width, bo góc, hover nhấc lên */
.contact-3 input[type="submit"].wpcf7-submit {
display: block;
width: 100%;
margin: 4px 0 0;
padding: 14px 20px;
font-size: 15px;
font-weight: 700;
border-radius: 8px;
text-transform: none;
transition: transform .1s, box-shadow .15s, background .15s;
}
.contact-3 input[type="submit"].wpcf7-submit:hover {
transform: translateY(-1px);
box-shadow: 0 8px 20px -6px rgba(0, 172, 190, .55);
}
/* Spinner idle chiếm chỗ → absolute (giống form báo giá) */
.contact-3 .con .input:last-child p,
.contact-3 p:has(> input[type="submit"]) { position: relative; }
.contact-3 .wpcf7-spinner { position: absolute; right: 14px; bottom: 12px; margin: 0; }
.contact-3 .wpcf7-form { margin-bottom: 0; }
/* ============================================================
Widget CTA "Nhận tư vấn miễn phí" ở sidebar blog (custom_html-8).
Nền gradient navy, nút secondary → /contact-us/.
============================================================ */
.ath-blog-cta {
background: linear-gradient(135deg, var(--primary-color, #00335b) 0%, #004b85 100%);
color: #fff;
padding: 22px 20px;
border-radius: 10px;
text-align: center;
}
.ath-blog-cta__title {
font-size: 17px;
font-weight: 700;
line-height: 1.3;
margin-bottom: 8px;
}
.ath-blog-cta__text {
font-size: 13.5px;
line-height: 1.55;
color: rgba(255, 255, 255, .85);
margin: 0 0 16px;
}
.ath-blog-cta__text strong { color: var(--ath-secondary, #00acbe); }
.ath-blog-cta__btn.button {
display: block;
width: 100%;
margin: 0;
background-color: var(--ath-secondary, #00acbe);
border-color: var(--ath-secondary, #00acbe);
color: #fff;
font-weight: 700;
text-transform: none;
border-radius: 8px;
padding: 3px 16px;
}
.ath-blog-cta__btn.button:hover {
background-color: #fff;
border-color: #fff;
color: var(--primary-color, #00335b);
}
.ath-blog-cta__phone {
margin-top: 12px;
font-size: 13px;
color: rgba(255, 255, 255, .8);
}
.ath-blog-cta__phone a { color: #fff; font-weight: 700; }
/* Sticky: widget CTA (đặt cuối sidebar) dính lại khi scroll → luôn hiển thị dù cuộn sâu.
position:sticky chỉ dính trong phạm vi CHA. .widget-area mặc định chỉ cao bằng nội dung widget
(ngắn hơn cột bài) → sticky hết chỗ dính sớm. Cho .widget-area cao 100% (bằng .post-sidebar
vốn cao bằng cột nội dung do row flex) để widget dính suốt chiều dài bài. */
.blog-archive .post-sidebar .widget-area,
.single-post .post-sidebar .widget-area,
.archive .post-sidebar .widget-area {
height: 100%;
}
.widget:has(> .textwidget > .ath-blog-cta),
.widget:has(> .textwidget .ath-blog-cta) {
position: sticky;
/* header sticky (sticky-jump, hiện khi scroll lên) cao ~49px → offset 70px để menu không
che phần trên widget. */
top: 70px;
}
/* Mobile: sidebar xuống dưới nội dung, sticky không cần → tắt cho gọn. */
@media (max-width: 849px) {
.widget:has(> .textwidget .ath-blog-cta) {
position: static;
}
}
/* Icon PNG dẫn trước mục menu (chèn qua filter nav_menu_item_title trong functions.php).
Căn giữa theo dòng chữ, cỡ cố định, không cho theme phóng to. */
.ath-menu-icon {
display: inline-block;
width: 20px;
height: 20px;
vertical-align: middle;
margin-right: 8px;
margin-top: -2px;
object-fit: contain;
}
/* Lưới sản phẩm: căn giữa tên danh mục + tiêu đề sản phẩm.
- .products = lưới shop / danh mục.
- .related = mục "Sản phẩm liên quan" cuối trang SP (Flatsome dùng wrapper .related, KHÔNG có
class .products nên phải thêm selector riêng — cấu trúc .box-text bên trong y hệt).
KHÔNG ảnh hưởng phần thông tin trang chi tiết SP (nằm ngoài .products/.related). */
.products .box-text,
.products .box-text .title-wrapper,
.products .box-text .category,
.products .box-text .name.product-title,
.related .box-text,
.related .box-text .title-wrapper,
.related .box-text .category,
.related .box-text .name.product-title {
text-align: center;
}
/* Section "Sản phẩm" (about-us): 8 card danh mục SP.
Layout 4/dòng desktop (span=3) + 2/dòng mobile (span__sm=6) do Flatsome col lo.
Card: icon PNG + tiêu đề + mô tả ngắn, nền trắng, hover nâng nhẹ. */
.ath-product-cats .ath-pc-intro {
max-width: 760px;
margin: -6px auto 10px;
text-align: center;
color: #5b6b7b;
font-size: 15px;
}
.ath-product-cats .ath-pc-card {
display: block;
position: relative; /* mốc cho .ath-pc-link phủ toàn card */
height: 100%;
background: #ffffff;
border: 1px solid #e6ebf0;
border-radius: 10px;
padding: 26px 20px 22px;
text-align: center;
color: inherit;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* Link phủ toàn card (thay cho việc bọc cả card trong — tránh wpautop tách thẻ khi lưu). */
.ath-product-cats .ath-pc-link {
position: absolute;
inset: 0;
z-index: 1;
border-radius: 10px;
}
/* Phòng hờ: khi user lưu qua editor, wpautop có thể bọc rỗng thành
.
Vô hiệu hoá bọc đó để link vẫn phủ đúng toàn card (không tạo khoảng trắng/đẩy layout). */
.ath-product-cats .ath-pc-card > p:last-child {
margin: 0;
}
.ath-product-cats .ath-pc-card > p > .ath-pc-link {
position: absolute;
inset: 0;
}
.ath-product-cats .ath-pc-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(0, 51, 91, .12);
border-color: #cddceb;
}
.ath-product-cats .ath-pc-icon {
width: 72px;
height: 72px;
margin: 0 auto 14px;
display: flex;
align-items: center;
justify-content: center;
}
.ath-product-cats .ath-pc-icon img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.ath-product-cats .ath-pc-title {
font-size: 16px;
line-height: 1.35;
color: #00335b;
margin: 0 0 8px;
min-height: 2.7em;
display: flex;
align-items: center;
justify-content: center;
}
.ath-product-cats .ath-pc-desc {
font-size: 13.5px;
line-height: 1.6;
color: #62717f;
margin: 0;
}
@media (max-width: 549px) {
.ath-product-cats .ath-pc-card {
padding: 20px 12px 16px;
}
.ath-product-cats .ath-pc-title {
font-size: 14.5px;
min-height: 0;
}
.ath-product-cats .ath-pc-desc {
font-size: 12.5px;
}
}
/* Breakout full-width trên mobile cho .ath-product-cats + .ath-applications + .ath-core-values khi
đặt trong trang dùng template "default" (VD /services/, /about-us/) — khác trang chủ dùng
page-blank.php (full-width sẵn, không cần breakout). Template default bọc content trong
.content-area > .row-main > .large-12.col (padding 15px mỗi bên) → cộng dồn với padding của
chính [section] khiến card bị co hẹp và lệch cân đối so với cùng section ở trang chủ (phát hiện
2026-08-22, so sánh computed style thật giữa 2 trang: cardWidth trang chủ 157.5px vs services
127.5px cùng viewport 375px; about-us/.ath-core-values đo cùng mức 127.5px, cùng nguyên nhân).
Kỹ thuật: kéo section rộng bằng 100vw rồi căn giữa lại bằng margin âm — thoát khỏi giới hạn của
.col cha mà KHÔNG cần đổi template cả trang (an toàn, không ảnh hưởng section khác). */
@media (max-width: 549px) {
.page-template-default .ath-product-cats,
.page-template-default .ath-applications,
.page-template-default .ath-core-values {
width: 100vw;
margin-left: calc(-50vw + 50%);
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
}
}
/* ============================================================
Trang Chính Sách Chất Lượng (page 5036) — layout theo company profile tr.8.
============================================================ */
/* Hero navy: tiêu đề + subtitle EN + 2 câu mục tiêu/mục đích */
.ath-qp-hero .ath-qp-subtitle {
text-align: center;
letter-spacing: .22em;
font-size: 14px;
color: rgba(255, 255, 255, .7);
margin: -8px 0 22px;
text-transform: uppercase;
}
.ath-qp-goals {
max-width: 820px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 12px;
}
.ath-qp-goal {
background: rgba(255, 255, 255, .07);
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 8px;
padding: 14px 20px;
text-align: center;
}
.ath-qp-goal__label {
display: block;
font-size: 13px;
color: rgba(255, 255, 255, .65);
margin-bottom: 4px;
}
.ath-qp-goal__value {
display: block;
font-size: 18px;
font-weight: 700;
color: var(--ath-secondary, #fcbc00);
line-height: 1.35;
}
/* Cột trái: 6 điểm chính sách đánh số lớn viền rỗng (giống profile) */
.ath-qp-policy .ath-qp-list {
display: flex;
flex-direction: column;
gap: 22px;
}
.ath-qp-policy .ath-qp-item {
display: flex;
align-items: flex-start;
gap: 18px;
}
.ath-qp-policy .ath-qp-num {
flex: 0 0 auto;
width: 54px;
height: 54px;
border: 2px solid var(--ath-secondary, #fcbc00);
border-radius: 50%;
color: #00335b;
font-size: 20px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.ath-qp-policy .ath-qp-text {
font-size: 15px;
line-height: 1.65;
color: #47535f;
padding-top: 4px;
}
/* Cột phải: chứng chỉ ISO */
.ath-qp-cert {
border: 1px solid #e6ebf0;
border-radius: 10px;
padding: 16px;
background: #fff;
box-shadow: 0 10px 30px rgba(0, 51, 91, .08);
}
.ath-qp-cert .ath-qp-cert__caption {
text-align: center;
font-size: 13px;
color: #7a8794;
margin: 12px 0 0;
}
/* Section mục tiêu chất lượng: card gạch đầu dòng có tick */
.ath-qp-target .ath-qp-goal-card {
display: flex;
align-items: flex-start;
gap: 12px;
background: #fff;
border: 1px solid #e6ebf0;
border-radius: 8px;
padding: 16px 18px;
margin-bottom: 14px;
font-size: 14.5px;
line-height: 1.6;
color: #47535f;
}
/* Icon check MỚI màu secondary (#00acbe): badge tròn nền secondary + dấu ✓ trắng (SVG).
Ẩn glyph font-icon cũ (icon-checkmark), render SVG qua ::before. */
.ath-qp-target .ath-qp-goal-card__icon {
flex: 0 0 auto;
width: 22px;
height: 22px;
margin-top: 1px;
border-radius: 50%;
background: var(--secondary-color, #00acbe);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0; /* triệt tiêu glyph font-icon cũ */
}
.ath-qp-target .ath-qp-goal-card__icon::before {
content: "";
width: 12px;
height: 12px;
background-color: #fff;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.ath-qp-target .ath-qp-goal-card--quote {
background: #00335b;
color: #fff;
font-style: italic;
font-weight: 600;
justify-content: center;
text-align: center;
border-color: #00335b;
}
@media (max-width: 849px) {
.ath-qp-goal__value { font-size: 16px; }
.ath-qp-policy .ath-qp-num { width: 46px; height: 46px; font-size: 17px; }
.ath-qp-cert { margin-top: 26px; }
}
/* ============================================================
Card đồng chiều cao (equal-height) cho:
- Giá Trị Cốt Lõi (.ath-core-values) — 4 card
- Nhóm Sản Phẩm (.ath-product-cats) — 8 card
Flatsome .row là flexbox, .col là flex-item (stretch sẵn) NHƯNG .col-inner + card không cao
100% nên card chỉ cao bằng nội dung. Ép chuỗi height:100% để mọi card trong cùng hàng bằng nhau.
============================================================ */
.ath-core-values .row,
.ath-product-cats .row {
align-items: stretch;
}
.ath-core-values .col,
.ath-product-cats .col {
display: flex;
}
.ath-core-values .col > .col-inner,
.ath-product-cats .col > .col-inner {
display: flex;
flex-direction: column;
width: 100%;
}
/* Card (và link-card) cao trọn cột → 4/8 card cùng hàng bằng chiều cao nhau. */
.ath-core-values .ath-cv-card,
.ath-product-cats .ath-pc-card {
height: 100%;
}
/* Với card có mô tả dài ngắn khác nhau, đẩy phần mô tả giãn đều để đáy card thẳng hàng. */
.ath-product-cats .ath-pc-card {
display: flex;
flex-direction: column;
}
/* ============================================================
Section "Khách Hàng Tiêu Biểu" (about-us) — nền navy, nổi bật, "hoành tráng".
============================================================ */
.ath-customers .ath-cus-intro {
max-width: 820px;
margin: -6px auto 8px;
text-align: center;
color: rgba(255, 255, 255, .82);
font-size: 15.5px;
line-height: 1.7;
}
/* Dải số liệu */
.ath-customers .ath-cus-stats {
margin: 26px 0 6px;
}
.ath-customers .ath-cus-stat {
padding: 10px 6px;
}
.ath-customers .ath-cus-stat__num {
display: block;
font-size: 40px;
font-weight: 800;
line-height: 1;
color: var(--ath-secondary, #fcbc00);
margin-bottom: 8px;
}
.ath-customers .ath-cus-stat__label {
display: block;
font-size: 13.5px;
color: rgba(255, 255, 255, .78);
line-height: 1.4;
}
/* 2 card nhóm khách hàng — nền kính mờ */
.ath-customers .ath-cus-card {
height: 100%;
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 12px;
padding: 28px 26px;
backdrop-filter: blur(2px);
}
.ath-customers .ath-cus-card__head h3 {
color: #fff;
font-size: 19px;
margin: 0 0 12px;
line-height: 1.3;
position: relative;
padding-bottom: 12px;
}
.ath-customers .ath-cus-card__head h3::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 48px; height: 3px;
background: var(--ath-secondary, #fcbc00);
border-radius: 2px;
}
.ath-customers .ath-cus-card p {
color: rgba(255, 255, 255, .8);
font-size: 14.5px;
line-height: 1.7;
margin: 0 0 16px;
}
.ath-customers .ath-cus-card p strong { color: var(--ath-secondary, #fcbc00); }
/* Tag khu công nghiệp — viền mảnh */
.ath-customers .ath-cus-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.ath-customers .ath-cus-tag {
display: inline-block;
padding: 8px 14px;
border: 1px solid rgba(255, 255, 255, .28);
border-radius: 30px;
color: #fff;
font-size: 13.5px;
font-weight: 500;
transition: background .2s, border-color .2s;
}
.ath-customers .ath-cus-tag:hover {
background: rgba(252, 188, 0, .14);
border-color: var(--ath-secondary, #fcbc00);
}
/* Chip thương hiệu lớn — nổi bật hơn tag */
.ath-customers .ath-cus-brands {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.ath-customers .ath-cus-brand {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 22px;
background: #fff;
color: #00335b;
border-radius: 8px;
font-size: 17px;
font-weight: 800;
letter-spacing: .01em;
box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
transition: transform .2s;
}
.ath-customers .ath-cus-brand:hover { transform: translateY(-3px); }
@media (max-width: 849px) {
.ath-customers .ath-cus-stat__num { font-size: 32px; }
.ath-customers .ath-cus-card { margin-bottom: 16px; }
.ath-customers .ath-cus-brand { font-size: 15px; padding: 10px 16px; }
}
/* Section "Đội Ngũ Nhân Sự" (lab-rd): lưới 2x2 ảnh LAB thật ở cột phải. */
.ath-lab-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.ath-lab-grid img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 8px;
display: block;
}
@media (max-width: 549px) {
.ath-lab-grid { gap: 8px; }
}
/* Icon PNG thông tin liên hệ (contact-us): Văn Phòng + Kho — thay emoji ☎️✉️📍. */
.ath-contact-ico {
width: 20px;
height: 20px;
object-fit: contain;
vertical-align: middle;
margin-right: 8px;
margin-top: -2px;
display: inline-block;
}
/* Mục Tiêu Chất Lượng: 1 cột (5 mục) → giới hạn bề rộng, canh giữa cho dễ đọc (không tràn full-width). */
.ath-qp-target .col > .col-inner {
max-width: 760px;
margin: 0 auto;
}
/* Dự án "Dây chuyền OSP": ảnh đại diện lớn + 3 ảnh hỗ trợ (thumbnail hàng dưới). */
.ath-osp-gallery .ath-osp-main {
width: 100%;
border-radius: 8px;
display: block;
box-shadow: 0 15px 35px -20px rgba(0, 0, 0, .4);
aspect-ratio: 4 / 3;
object-fit: cover;
}
.ath-osp-gallery .ath-osp-thumbs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-top: 10px;
}
.ath-osp-gallery .ath-osp-thumbs img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 6px;
display: block;
cursor: pointer;
transition: transform .2s, box-shadow .2s;
}
.ath-osp-gallery .ath-osp-thumbs img:hover {
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
}
/* ============================================================
Services — 2 section mới: Cung Cấp Thiết Bị Máy Móc + Dịch Vụ Sau Bán Hàng.
Card đồng chiều cao, hover nâng. Dùng cho lĩnh vực KD #2 và #3.
============================================================ */
.ath-svc-machinery .row,
.ath-svc-aftersales .row {
align-items: stretch;
}
.ath-svc-machinery .col,
.ath-svc-aftersales .col {
display: flex;
}
.ath-svc-machinery .col > .col-inner,
.ath-svc-aftersales .col > .col-inner {
display: flex;
flex-direction: column;
width: 100%;
}
.ath-svc-machine-card,
.ath-svc-as-card {
height: 100%;
background: #fff;
border: 1px solid #e6ebf0;
border-radius: 10px;
transition: transform .2s, box-shadow .2s, border-color .2s;
}
/* After-sales card: có ảnh trên cùng — style GIỐNG "Lĩnh Vực Kinh Doanh" (16:10, bo góc, có padding). */
.ath-svc-as-card {
padding: 24px;
display: flex;
flex-direction: column;
}
.ath-svc-as-card__img {
margin: 0 0 16px;
}
.ath-svc-as-card__img img {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
border-radius: 8px;
display: block;
}
/* Machinery: card có ảnh đại diện trên cùng → padding chuyển vào phần nội dung, ảnh tràn mép trên. */
.ath-svc-machine-card {
overflow: hidden;
text-align: center;
display: flex;
flex-direction: column;
}
.ath-svc-machine-card__img {
margin: 0 0 16px;
}
.ath-svc-machine-card__img img {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
display: block;
}
.ath-svc-machine-card__title,
.ath-svc-machine-card__sub,
.ath-svc-machine-card p {
padding-left: 24px;
padding-right: 24px;
}
.ath-svc-machine-card p {
padding-bottom: 24px;
}
.ath-svc-machine-card:hover,
.ath-svc-as-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 32px rgba(0, 51, 91, .12);
border-color: #cddceb;
}
.ath-svc-machine-card__title,
.ath-svc-as-card__title {
color: #00335b;
font-size: 1.12em;
margin: 0 0 6px;
position: relative;
padding-bottom: 10px;
}
/* Dịch Vụ Sau Bán Hàng: căn giữa nội dung 3 card + gạch chân tiêu đề canh giữa. */
.ath-svc-as-card {
text-align: center;
}
.ath-svc-as-card__title::after {
content: "";
position: absolute;
left: 50%; bottom: 0;
transform: translateX(-50%);
width: 42px; height: 3px;
background: var(--ath-secondary, #fcbc00);
border-radius: 2px;
}
/* Machinery title: căn giữa + gạch chân canh giữa. */
.ath-svc-machine-card__title::after {
content: "";
position: absolute;
left: 50%; bottom: 0;
transform: translateX(-50%);
width: 42px; height: 3px;
background: var(--ath-secondary, #fcbc00);
border-radius: 2px;
}
.ath-svc-machine-card__sub,
.ath-svc-as-card__sub {
color: #00acbe;
text-transform: uppercase;
letter-spacing: .04em;
font-size: .78em;
font-weight: 600;
margin-bottom: 10px;
}
.ath-svc-machine-card p,
.ath-svc-as-card p {
color: #62717f;
font-size: .94em;
line-height: 1.7;
margin: 0;
}
/* Ứng Dụng (services): 8 card icon. Viết class thay inline style → tránh wpautop phá layout;
HTML mỗi card trên 1 dòng nên an toàn khi mở/lưu qua UX Builder.
Chuỗi display:flex + width:100% từ .row → .col → .col-inner → .ath-app-card BẮT BUỘC phải khai
đủ (giống hệt pattern .ath-product-cats .ath-pc-card bên dưới) — thiếu bước nào thì card mất mốc
width tường minh, dễ co lại theo nội dung con nhỏ nhất trong ngữ cảnh UX Builder editor (DOM lồng
thêm .uxb-wrapper +
quanh nội dung [ux_text] mà frontend thật không có) →
card đè chồng lên nhau, text tràn lung tung khi CHỈ MỞ trang bằng UX Builder (fix 2026-08-20).
BÀI HỌC quan trọng: bản trước dùng selector POSITIONAL `.col-inner > div > div:first-child` với
`!important` để style riêng ô icon — trong DOM editor (thêm 1 lớp bọc so với frontend) selector
này khớp NHẦM vào div bọc ngoài `.ath-app-card` thay vì đúng `.ath-app-card__icon` bên trong, đè
width xuống 72px bất kể CSS nào set sau đó. KHÔNG dùng selector vị trí (:first-child, > div > div)
để nhắm 1 phần tử cụ thể khi HTML nằm trong ngữ cảnh UX Builder — DOM editor luôn lồng thêm
wrapper so với frontend, phải dùng đúng class riêng (.ath-app-card__icon) mới an toàn ở cả 2 nơi. */
.ath-applications .row {
align-items: stretch;
}
.ath-applications .col {
display: flex;
}
.ath-applications .col > .col-inner {
display: flex;
flex-direction: column;
width: 100%;
}
.ath-applications .ath-app-card {
display: flex;
flex-direction: column;
text-align: center;
background: #fff;
border: 1px solid #eee;
border-radius: 10px;
padding: 26px 18px;
width: 100%;
height: 100%;
}
.ath-applications .ath-app-card__icon {
width: 72px;
height: 72px;
margin: 0 auto 14px;
display: flex;
align-items: center;
justify-content: center;
}
.ath-applications .ath-app-card__icon img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.ath-applications .ath-app-card__title {
color: #00335b;
margin: 0 0 8px;
font-size: 1em;
}
.ath-applications .ath-app-card__desc {
color: #666;
font-size: .88em;
margin: 0;
}
/* Lĩnh Vực Kinh Doanh (services): 3 card, ảnh nằm TRONG card dưới tiêu đề.
Dùng class (không inline) + HTML 1 dòng → an toàn wpautop/UX Builder. */
.ath-fields .ath-field-card {
border: 1px solid #e6e6e6;
border-radius: 10px;
padding: 28px;
height: 100%;
box-shadow: 0 10px 30px -20px rgba(0, 0, 0, .3);
}
.ath-fields .ath-field-card__num {
font-size: 42px;
font-weight: bold;
color: #00acbe;
line-height: 1;
}
.ath-fields .ath-field-card__title {
color: #00335b;
margin: 10px 0 14px;
font-size: 1.15em;
}
.ath-fields .ath-field-card__img {
margin: 0 0 16px;
}
.ath-fields .ath-field-card__img img {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
border-radius: 8px;
display: block;
}
.ath-fields .ath-field-card__list {
list-style: none;
padding: 0;
margin: 0;
color: #555;
line-height: 1.9;
}
/* Đồng chiều cao 3 card. */
.ath-fields .row {
align-items: stretch;
}
.ath-fields .col {
display: flex;
}
.ath-fields .col > .col-inner {
display: flex;
flex-direction: column;
width: 100%;
}
/* Không Gian Làm Việc (about-us): lưới 8 ảnh office thật. 4/hàng desktop, 2/hàng mobile, tỉ lệ 4:3. */
.ath-office-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.ath-office-grid img {
width: 100%;
aspect-ratio: 4 / 3; /* 640x480 */
object-fit: cover;
border-radius: 8px;
display: block;
transition: transform .2s, box-shadow .2s;
}
.ath-office-grid img:hover {
transform: translateY(-3px);
box-shadow: 0 12px 26px rgba(0, 51, 91, .16);
}
@media (max-width: 849px) {
.ath-office-grid {
grid-template-columns: repeat(2, 1fr); /* 2 ảnh/hàng mobile */
gap: 10px;
}
}
/* Cơ Sở Vật Chất (about-us): mỗi card có lưới ảnh thật trên cùng + tiêu đề + mô tả.
Văn phòng/Kho = 2x2 (4 ảnh), Vận tải = 2x1 (2 ảnh). Card đồng chiều cao. */
.ath-facilities .row {
align-items: stretch;
}
.ath-facilities .col {
display: flex;
}
.ath-facilities .col > .col-inner {
display: flex;
flex-direction: column;
width: 100%;
}
.ath-facilities .ath-fac-card {
height: 100%;
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 10px 30px -20px rgba(0, 0, 0, .3);
display: flex;
flex-direction: column;
}
.ath-facilities .ath-fac-gallery {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
}
.ath-facilities .ath-fac-gallery img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
}
.ath-facilities .ath-fac-card__body {
padding: 22px;
}
.ath-facilities .ath-fac-card__title {
color: #00335b;
margin: 0 0 10px;
font-size: 1.1em;
}
.ath-facilities .ath-fac-card__desc {
color: #666;
margin: 0;
font-size: .95em;
}
/* ============================================================
About-us — 3 section tóm tắt mới (Lĩnh Vực KD / LAB R&D / Dự Án).
Card dùng chung .ath-abf-card: đồng chiều cao, hover nâng, căn giữa.
Biến thể: --plain (không số), --img (có ảnh trên cùng).
============================================================ */
.ath-ab-fields .row,
.ath-ab-lab .row,
.ath-ab-project .row {
align-items: stretch;
}
.ath-ab-fields .col,
.ath-ab-lab .col,
.ath-ab-project .col {
display: flex;
}
.ath-ab-fields .col > .col-inner,
.ath-ab-lab .col > .col-inner,
.ath-ab-project .col > .col-inner {
display: flex;
flex-direction: column;
width: 100%;
}
.ath-abf-card {
height: 100%;
background: #fff;
border: 1px solid #e6ebf0;
border-radius: 10px;
padding: 28px 24px;
text-align: center;
transition: transform .2s, box-shadow .2s, border-color .2s;
display: flex;
flex-direction: column;
}
.ath-abf-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 32px rgba(0, 51, 91, .12);
border-color: #cddceb;
}
.ath-abf-card__num {
font-size: 40px;
font-weight: 800;
line-height: 1;
color: #00acbe;
margin-bottom: 8px;
}
.ath-abf-card__title {
color: #00335b;
font-size: 1.12em;
margin: 0 0 10px;
position: relative;
padding-bottom: 10px;
}
.ath-abf-card__title::after {
content: "";
position: absolute;
left: 50%; bottom: 0;
transform: translateX(-50%);
width: 42px; height: 3px;
background: var(--ath-secondary, #fcbc00);
border-radius: 2px;
}
.ath-abf-card__desc {
color: #62717f;
font-size: .94em;
line-height: 1.7;
margin: 0;
}
/* Biến thể có ảnh (Dự Án): ảnh tràn mép trên, bo góc, nội dung có padding riêng. */
.ath-abf-card--img {
padding: 0;
overflow: hidden;
}
.ath-abf-card--img .ath-abf-card__img img {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
display: block;
}
.ath-abf-card--img .ath-abf-card__body {
padding: 22px 24px 26px;
}
/* ============================================================
Trang chủ — khối hoàn thiện nội dung.
============================================================ */
/* Khu thống kê (nền navy) */
.ath-home-stat__num {
font-size: 42px;
font-weight: 800;
line-height: 1;
color: var(--ath-secondary, #fcbc00);
margin-bottom: 6px;
}
.ath-home-stat__label {
color: #fff;
text-transform: uppercase;
font-size: 14px;
font-weight: 700;
letter-spacing: .03em;
}
.ath-home-stat__sub {
color: rgba(255, 255, 255, .7);
font-size: 13px;
margin-top: 2px;
}
/* ============================================================
Pain Point 3 tầng: Vấn đề → ATH hỗ trợ → Kết quả.
Card có connector dọc nối 3 tầng, nhãn màu để skim nhanh.
============================================================ */
.ath-pain3 {
position: relative;
height: 100%;
border: 1px solid #e6ebf0;
border-radius: 12px;
background: #fff;
padding: 24px 22px 22px;
display: flex;
flex-direction: column;
box-shadow: 0 12px 34px -24px rgba(0, 51, 91, .45);
transition: transform .2s ease, box-shadow .2s ease;
}
.ath-pain3:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px -22px rgba(0, 51, 91, .5);
}
/* Đường nối dọc chạy qua 3 tầng (căn theo tâm chấm bullet 11px + padding trái 22px) */
.ath-pain3::before {
content: "";
position: absolute;
left: 27px;
top: 34px;
bottom: 46px;
width: 2px;
background: linear-gradient(180deg, #e0c3c5 0%, #cfe9ec 55%, #bfe6d6 100%);
z-index: 0;
}
.ath-pain3__step {
position: relative;
z-index: 1;
padding-left: 20px;
}
.ath-pain3__step:not(:last-child) {
margin-bottom: 16px;
}
/* Chấm tròn đầu mỗi tầng nằm trên đường nối */
.ath-pain3__step::before {
content: "";
position: absolute;
left: -0.5px;
top: 4px;
width: 11px;
height: 11px;
border-radius: 50%;
background: #fff;
border: 2px solid currentColor;
}
.ath-pain3__step--p { color: #c0555c; }
.ath-pain3__step--s { color: #00acbe; }
.ath-pain3__step--r { color: #17a673; }
.ath-pain3__head {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 4px;
}
.ath-pain3__label {
display: inline-block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
padding: 3px 9px;
border-radius: 20px;
color: #c0555c;
background: #fbeced;
}
.ath-pain3__label--s {
color: #00849a;
background: #e2f6f8;
}
.ath-pain3__label--r {
color: #0e8a5f;
background: #e2f5ec;
}
.ath-pain3__tag {
font-size: 15px;
font-weight: 700;
line-height: 1.3;
color: #2c3742;
}
.ath-pain3__text {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: #55606b;
}
/* Tầng Kết quả nhấn mạnh (outcome) — nền nhạt + chữ đậm hơn */
.ath-pain3__step--r {
margin-top: 2px;
padding: 12px 14px 12px 20px;
background: #f3faf6;
border-radius: 8px;
}
.ath-pain3__step--r .ath-pain3__text {
color: #22503f;
font-weight: 600;
}
.ath-pain3__step--r::before {
top: 15px;
}
/* Đồng chiều cao 6 pain card qua col flex. */
.ath-pain-section .row {
align-items: stretch;
}
.ath-pain-section .col {
display: flex;
}
.ath-pain-section .col > .col-inner {
display: flex;
flex-direction: column;
width: 100%;
}
/* Pain Point + Stats: đồng chiều cao card qua col flex. */
.ath-pain-section .row,
.ath-stats-section .row {
align-items: stretch;
}
.ath-pain-section .col {
display: flex;
}
.ath-pain-section .col > .col-inner {
display: flex;
flex-direction: column;
width: 100%;
}
/* Stat "ISO" (chứng chỉ) — chữ ISO nhỏ hơn số, vẫn nổi bật. */
.ath-home-stat__num--iso {
font-size: 34px;
letter-spacing: .04em;
}
/* ============================================================
Hero trang chủ: sub-title gạch 2 bên + căn giữa, CTA căn giữa, H1 nhỏ hơn trên mobile.
============================================================ */
.ath-hero-sub {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 16px;
}
.ath-hero-sub__line {
width: 48px;
height: 1px;
background: #fff;
display: inline-block;
flex: 0 0 auto;
}
.ath-hero-sub__text {
color: #fff;
text-transform: uppercase;
letter-spacing: 0.15em;
font-weight: 600;
font-size: 13px;
}
/* 2 nút CTA căn giữa */
.ath-hero-cta {
margin-top: 32px;
display: flex;
gap: 16px;
flex-wrap: wrap;
justify-content: center;
}
.ath-hero-cta .button {
margin: 0;
min-width: 320px;
box-sizing: border-box;
text-align: center;
justify-content: center;
}
/* 3 trust badge (icon + text, trắng) dưới CTA hero — 1 hàng desktop, xuống dòng tự nhiên mobile. */
.ath-hero-trust {
margin-top: 28px;
display: flex;
align-items: center;
justify-content: center;
gap: 32px;
flex-wrap: wrap;
}
.ath-hero-trust__item {
display: flex;
align-items: center;
gap: 8px;
color: #fff;
font-size: 14px;
font-weight: 600;
}
.ath-hero-trust__icon {
width: 20px;
height: 20px;
flex: 0 0 auto;
color: #fff;
}
/* Mobile: tiêu đề hero nhỏ hơn 1 chút + gạch sub ngắn lại cho cân đối */
@media (max-width: 549px) {
.ath-hero-title {
font-size: 30px !important;
}
.ath-hero-sub__line {
width: 28px;
}
.ath-hero-sub__text {
font-size: 11px;
}
.ath-hero-cta .button {
min-width: 0;
width: 100%;
}
.ath-hero-trust {
gap: 16px 24px;
margin-top: 20px;
}
.ath-hero-trust__item {
font-size: 12px;
}
}
/* ============================================================
Trang chủ — Quy Trình 5 Bước: 5 step đều nhau + line liên kết.
============================================================ */
.ath-process {
display: flex;
justify-content: space-between;
align-items: flex-start;
position: relative;
max-width: 960px;
margin: 10px auto 0;
}
/* Đường ngang nối các vòng tròn (nằm sau, ngang tâm vòng tròn = 32px). */
.ath-process::before {
content: "";
position: absolute;
top: 32px;
left: 10%;
right: 10%;
height: 2px;
background: #cdd6e0;
z-index: 0;
}
.ath-process__step {
position: relative;
z-index: 1;
flex: 1 1 0;
text-align: center;
padding: 0 8px;
}
.ath-process__num {
width: 64px;
height: 64px;
background: var(--primary-color, #00335b);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 20px;
margin: 0 auto 16px;
box-shadow: 0 0 0 6px rgb(248, 248, 248); /* nền để "cắt" line hai bên vòng tròn */
}
.ath-process__title {
text-transform: uppercase;
font-size: 14px;
margin: 0 0 6px;
color: var(--primary-color, #00335b);
}
.ath-process__desc {
font-size: 12px;
color: #42474f;
margin: 0;
}
/* Mobile: xếp dọc, line dọc bên trái đi qua tâm vòng tròn.
Mỗi step = [số] [nội dung(title+desc)] canh trái, số cố định 56px. */
@media (max-width: 849px) {
.ath-process {
flex-direction: column;
align-items: stretch;
max-width: 440px;
margin: 10px auto 0;
}
.ath-process::before {
top: 28px;
bottom: 28px;
left: 28px; /* = tâm vòng tròn (28px = nửa của 56px) */
right: auto;
width: 2px;
height: auto;
}
.ath-process__step {
display: flex;
align-items: flex-start;
gap: 16px;
text-align: left;
padding: 0 0 26px;
}
.ath-process__step:last-child {
padding-bottom: 0;
}
.ath-process__num {
width: 56px;
height: 56px;
font-size: 18px;
margin: 0;
flex: 0 0 56px; /* cố định, không co */
box-shadow: 0 0 0 5px rgb(248, 248, 248);
}
/* Cột nội dung: title + desc xếp dọc, chiếm phần còn lại. */
.ath-process__content {
flex: 1 1 auto;
min-width: 0;
padding-top: 6px;
}
.ath-process__title {
margin: 0 0 4px;
}
.ath-process__desc {
text-align: left;
}
}
/* ============================================================
Trang chủ — Section Quote form: nền navy nổi bật (section đặc biệt).
Cột trái: tiêu đề + value-prop list (chữ trắng/xám sáng trên navy).
Cột phải: card form nền navy đậm hơn, tiêu đề + nút CĂN GIỮA.
============================================================ */
.ath-quote-title {
color: #fff;
font-size: 32px;
line-height: 1.3;
margin: 0 0 14px;
}
.ath-quote-left > p {
color: rgba(255, 255, 255, .8);
line-height: 1.7;
}
.ath-quote-benefits {
list-style: none;
padding: 0;
margin: 20px 0;
}
.ath-quote-benefits li {
position: relative;
padding: 0 0 12px 28px;
color: rgba(255, 255, 255, .8);
line-height: 1.6;
font-size: 15px;
}
.ath-quote-benefits li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: var(--ath-secondary, #00acbe);
font-weight: 700;
}
.ath-quote-benefits strong {
color: #fff;
}
.ath-quote-cta-line {
color: rgba(255, 255, 255, .8);
font-size: 15px;
margin: 4px 0 0;
}
.ath-quote-cta-line strong {
color: var(--ath-secondary, #00acbe);
}
.ath-quote-phone-icon {
width: 48px;
height: 48px;
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .25);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
flex-shrink: 0;
}
.ath-quote-support-title {
color: #fff;
}
.ath-quote-support-sub {
font-size: 14px;
color: rgba(255, 255, 255, .75);
}
/* Card form: nền đậm hơn section để tách lớp, viền vàng nhấn trên. */
.ath-quote-form-card {
background: #012242;
padding: 40px;
border-top: 4px solid #fcbc00;
border-radius: 4px;
box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .5);
}
.ath-quote-form-title {
color: #fff;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 24px;
text-align: center;
}
/* Input/textarea: nền xám nhạt, viền mảnh, focus cyan — đồng bộ form Liên Hệ (.contact-3). */
.ath-quote-form-card input[type="text"],
.ath-quote-form-card input[type="email"],
.ath-quote-form-card input[type="tel"],
.ath-quote-form-card textarea {
width: 100%;
background: #f7f9fb;
border: 1px solid #e2e8ee;
border-radius: 8px;
padding: 12px 15px;
font-size: 15px;
color: #23303c;
transition: border-color .15s, box-shadow .15s, background .15s;
}
.ath-quote-form-card input:focus,
.ath-quote-form-card textarea:focus {
background: #fff;
border-color: var(--ath-secondary, #00acbe);
box-shadow: 0 0 0 3px rgba(0, 172, 190, .14);
outline: none;
}
.ath-quote-form-card textarea { min-height: 130px; resize: vertical; }
/* Nút "Gửi yêu cầu": full-width giống form Liên Hệ, màu VÀNG (đồng bộ viền trên card) thay vì
cyan mặc định (rule global .wpcf7 input[type="submit"] dòng ~322) — tạo khác biệt với các CTA
điều hướng (cyan) dẫn TỚI form này, nhấn mạnh đây là hành động hoàn tất. */
.ath-quote-form-card input[type="submit"].wpcf7-submit {
display: block;
width: 100%;
margin: 4px 0 0;
padding: 14px 20px;
font-size: 15px;
font-weight: 700;
border-radius: 8px;
text-transform: none;
background-color: #fcbc00;
border-color: #fcbc00;
color: #00335b;
transition: transform .1s, box-shadow .15s, background .15s;
}
.ath-quote-form-card input[type="submit"].wpcf7-submit:hover {
background-color: #e3a900;
border-color: #e3a900;
transform: translateY(-1px);
box-shadow: 0 8px 20px -6px rgba(252, 188, 0, .5);
}
/* Spinner idle chiếm chỗ → absolute (giống form báo giá/liên hệ) */
.ath-quote-form-card p:has(> input[type="submit"]) { position: relative; }
.ath-quote-form-card .wpcf7-spinner { position: absolute; right: 14px; bottom: 12px; margin: 0; }
/* Message lỗi/thành công dưới form (khung viền vàng/xanh mặc định CF7) chữ mặc định tối,
khó đọc trên nền navy #012242 của card → ép trắng, chỉ scope trong card này. */
.ath-quote-form-card .wpcf7-response-output {
color: #ffffff;
}
.ath-quote-form-card .wpcf7 .wpcf7-not-valid-tip,
.ath-quote-form-card.wpcf7 .wpcf7-not-valid-tip {
background-color: rgba(255, 255, 255, .12);
color: #ffd6d6;
}
@media (max-width: 549px) {
.ath-quote-title { font-size: 25px; }
.ath-quote-form-card { padding: 28px 22px; }
}
/* ============================================================
FINAL CTA (cuối trang chủ) — nền navy, giữa, nút cyan
============================================================ */
.ath-final-cta__inner {
max-width: 820px;
margin: 0 auto;
text-align: center;
}
.ath-final-cta__title {
color: #fff;
font-size: 30px;
font-weight: 700;
line-height: 1.3;
margin: 0 0 10px;
}
.ath-final-cta__sub {
color: rgba(255, 255, 255, .85);
font-size: 17px;
line-height: 1.55;
margin: 0 0 26px;
}
.ath-final-cta__btn.button {
display: inline-block;
margin: 0;
background-color: var(--ath-secondary, #00acbe);
border-color: var(--ath-secondary, #00acbe);
color: #fff;
font-weight: 700;
text-transform: none;
border-radius: 8px;
padding: 13px 40px;
font-size: 16px;
}
.ath-final-cta__btn.button:hover {
background-color: #fff;
border-color: #fff;
color: var(--primary-color, #00335b);
}
@media (max-width: 549px) {
.ath-final-cta__title { font-size: 23px; }
.ath-final-cta__sub { font-size: 15px; }
.ath-final-cta__btn.button { display: block; width: 100%; padding: 13px 20px; }
}
/* ============================================================
Trang chủ — "Lý Do Chọn ATH Việt Nam"
Ảnh đại diện + giới thiệu sơ bộ + 6 trust signal + CTA.
============================================================ */
.ath-why-ath__media img {
width: 100%;
border-radius: 12px;
box-shadow: 0 18px 44px -26px rgba(0, 51, 91, .55);
display: block;
}
.ath-why-ath__title {
color: #00335b;
font-size: 24px;
line-height: 1.25;
margin: 0 0 8px;
}
.ath-why-ath__lead {
color: #47535f;
font-size: 15.5px;
line-height: 1.65;
margin: 0 0 14px;
}
.ath-trust-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 0;
}
.ath-trust {
display: block;
background: #f6f8fa;
border: 1px solid #e6ebf0;
border-radius: 8px;
padding: 12px 14px 11px;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ath-trust__big {
color: #00335b;
font-size: 18px;
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.01em;
}
.ath-trust__desc {
color: #55606b;
font-size: 12.5px;
line-height: 1.4;
margin-top: 4px;
}
/* Item ISO: nổi bật màu xanh lá (không còn là link — chỉ hiển thị thông tin) */
.ath-trust--link {
border-color: #bfe6d6;
background: #f3faf6;
}
.ath-trust--link .ath-trust__big {
color: #0e8a5f;
}
.ath-trust:hover {
transform: translateY(-3px);
box-shadow: 0 14px 30px -20px rgba(0, 51, 91, .45);
border-color: #00acbe;
}
.ath-why-ath .button {
padding: 9px 22px;
font-size: 13px;
}
@media (max-width: 849px) {
.ath-why-ath__media { margin-bottom: 24px; }
}
@media (max-width: 549px) {
.ath-trust-grid { grid-template-columns: repeat(2, 1fr); }
.ath-why-ath__title { font-size: 24px; }
.ath-why-ath .button { display: block; width: 100%; text-align: center; }
}
/* Anchor "#quote" cho hero/final-CTA — bù trừ header sticky khi jump-scroll. */
.ath-anchor {
display: block;
position: relative;
top: -90px;
visibility: hidden;
height: 0;
}
/* Logo overlay ảnh sản phẩm: CSS định vị (top/left/kích thước) giờ do plugin nswebmaster tự in
inline (module "Logo Overlay Sản Phẩm") — chỉ còn selector loại trừ ở trên (:not) cần giữ lại
ở đây vì thuộc rule ảnh sản phẩm chính, không phải rule của riêng overlay. */
/* Ảnh méo trong bài blog trên mobile (fix 2026-08-21, phát hiện qua "Quy Trình Mạ Thiếc Tiêu
Chuẩn"). Nguyên nhân: Gutenberg image-resize handle ghi inline style="width:800px;height:533px"
(pixel tuyệt đối) trực tiếp lên thẻ
![]()
khi kéo resize trong editor — mọi ảnh bị dính trong
CÙNG 1 bài đều có chung 1 giá trị height hệt nhau bất kể tỷ lệ ảnh gốc khác nhau, xác nhận đây
là lỗi thao tác hàng loạt (chọn nhiều ảnh rồi resize 1 lần), không phải chỉnh thủ công từng ảnh.
width co đúng theo max-width:100% (rule .entry-content img có sẵn) nhưng height:Npx là giá trị
TUYỆT ĐỐI không bị ràng buộc theo width → ảnh méo khi width thực tế nhỏ hơn giá trị gốc (mọi
viewport dưới desktop). height:auto trong CSS thường (dù đã có ở nhiều rule khác) KHÔNG thắng
được vì inline style trên chính thẻ luôn có specificity cao nhất — bắt buộc phải ép !important.
Quét toàn site (regex `