,
không có class design nào để bám ⇒ mốc là body.td-legal do filter body_class
trong functions.php gắn theo SLUG GỐC (chạy đúng cho cả 5 ngôn ngữ).
Hai trang dùng HAI template khác nhau: /chinh-sach-bao-mat/ là page-blank
(nội dung trong .content-area), /dieu-khoan-su-dung/ là template mặc định
(nội dung trong .page) ⇒ phải phủ cả hai mốc. Giới hạn trong vùng nội dung
để không chạm header/footer/form liên hệ.
========================================================= */
.td-legal .content-area p,
.td-legal .content-area li,
.td-legal .page>.row p,
.td-legal .page>.row li{
text-align:justify;
text-justify:inter-word;
hyphens:none;
-webkit-hyphens:none;
}
/* Màn hẹp: dòng ngắn, căn đều sẽ hở khe → trả về căn trái */
@media (max-width:560px){
.td-legal .content-area p,
.td-legal .content-area li,
.td-legal .page>.row p,
.td-legal .page>.row li{text-align:left;}
}
/* =========================================================
MOBILE: BADGE VÀNG (.sec-tag) KHÔNG QUÁ 50% BỀ NGANG MÀN HÌNH
---------------------------------------------------------
Khách 06/08/2026: badge dài lê thê trên điện thoại, xấu.
Design đặt `--tag-wc: min(var(--tag-w), 76vw)` ⇒ trên màn 390px khối vàng
ra 296px = 76% màn hình. Hạ ngưỡng xuống 50vw.
Viền SVG do drawSecTags() (site.js) tự vẽ lại theo px THẬT của khối vàng
nên không phải sửa JS — nó tự khớp.
⚠ Nhãn là white-space:nowrap: thu khối vàng mà không thu chữ thì chữ tràn ra
ngoài. Vì vậy giảm cỡ chữ theo vw và cho phép xuống dòng khi quá chật.
========================================================= */
@media (max-width:768px){
.sec-tag{--tag-wc:min(var(--tag-w),50vw);}
/* chữ vừa trong khối vàng 50vw; nowrap → co theo vw */
.sec-tag__label{font-size:clamp(13px,3.5vw,20px);}
}
@media (max-width:480px){
/* màn rất hẹp: nhãn dài (vd "Khách hàng & đối tác") vẫn không lọt 50vw
⇒ cho xuống 2 dòng thay vì tràn, badge cao thêm một chút */
.sec-tag{height:auto;min-height:58px;}
.sec-tag__label{
font-size:clamp(12px,3.2vw,17px);
white-space:normal;text-wrap:balance;
line-height:1.15;
/* KHÔNG đặt text-align/max-width ở đây: rule căn sát viền phía trên lo phần
căn lề (trái/phải theo hướng badge), max-width sẽ phá padding sát viền. */
}
}
/* =========================================================
BADGE VÀNG: CĂN GIỮA CHỮ CẢ NGANG LẪN DỌC (khách 06/08/2026)
---------------------------------------------------------
Design căn chữ bằng toạ độ cứng nên nhìn lệch:
- ngang: `left:calc((var(--tag-wc) - 29px)/2)` — trừ 29px (nửa cạnh xiên 58px)
để "cân thị giác" với hình thang ⇒ đo thực tế lệch trái 29px.
- dọc: `top:30px` (mobile 22px) đặt cứng, không theo chiều cao khối vàng
⇒ lệch lên 10-11px so với tâm.
Thay bằng flex căn giữa CHÍNH XÁC theo khối vàng: phủ đúng vùng .sec-tag__fill
(trái: từ 0 rộng --tag-wc; phải: từ mép phải vào) rồi center 2 chiều.
Khối vàng và viền SVG giữ NGUYÊN — chỉ chữ được căn lại.
========================================================= */
.sec-tag__label{
/* phủ đúng khối vàng: cùng top/height với .sec-tag__fill */
left:0;right:auto;top:15px;height:65px;width:var(--tag-wc);
transform:none;
display:flex;align-items:center;
box-sizing:border-box;
/* CĂN SÁT VIỀN (khách chốt 06/08/2026, thay cho căn giữa):
badge trái → chữ sát mép TRÁI; badge phải → chữ sát mép PHẢI.
Khối vàng là HÌNH THANG, cạnh xiên 58px nằm ở phía TRONG:
- bản trái : cạnh xiên bên phải → lề phải phải chừa 58px + thở 12px
- bản --right: cạnh xiên bên trái → lề trái phải chừa 58px + thở 12px
Không chừa thì chữ đè lên phần vát, nhìn như tràn ra ngoài. */
justify-content:flex-start;
padding:0 70px 0 26px;
/* nhãn dài xuống 2 dòng: justify-content chỉ căn CẢ KHỐI, từng dòng bên trong
vẫn theo text-align ⇒ phải set luôn, không thì dòng ngắn nằm giữa */
text-align:left;
}
.sec-tag--right .sec-tag__label{
left:auto;right:0;
justify-content:flex-end;
padding:0 26px 0 70px;
text-align:right;
}
/* dọc: chữ vẫn căn giữa chiều cao khối vàng (align-items:center ở trên) */
/* mobile: khối vàng đổi top/height trong @media (max-width:768px) của site.css
→ chữ phải bám ĐÚNG ngưỡng 768px đó. Dùng nhầm 1024px thì trong khoảng
769-1024px chữ lấy toạ độ mobile còn khối vàng vẫn cỡ desktop ⇒ lệch dọc 26px. */
@media (max-width:768px){
.sec-tag__label{
top:11px;height:47px;
/* mobile khối vàng chỉ 50vw: cạnh vát 58px + padding desktop chiếm gần hết
bề ngang ⇒ chữ bị ép, không còn sát viền được. Thu padding lại
(vát mobile hẹp hơn theo tỉ lệ) để chữ thật sự nằm sát mép. */
padding:0 40px 0 14px;
}
.sec-tag--right .sec-tag__label{padding:0 14px 0 40px;}
}
/* nhãn xuống 2 dòng ở màn rất hẹp vẫn giữ giữa nhờ flex + height auto */
@media (max-width:480px){
.sec-tag__label{max-width:var(--tag-wc);}
}
/* =========================================================
MOBILE: RÚT GỌN FOOTER (khách 06/08/2026 — "footer quá dài")
---------------------------------------------------------
Đo trước khi sửa (màn 390x844): section CTA cao 1193px ≈ 1.5 màn hình.
form 500px + cột trái 455px (lead 66 + 3 dòng liên hệ + social 151 + copyright 42).
Giữ ĐỦ 4 ô nhập (user chốt) — rút gọn bằng cách bỏ khoảng thừa, không bỏ nội dung:
· Họ tên + SĐT về lại 2 CỘT (site.css dòng 198 ép 1 cột — thủ phạm chính)
· nhãn/ô nhập/khoảng cách thu nhẹ, ô Tin nhắn thấp lại
· icon liên hệ + social nhỏ lại, bớt padding giữa các khối
Chỉ áp ≤768px. Desktop giữ nguyên 100% design.
========================================================= */
@media (max-width:768px){
/* --- Khung section --- */
.sec-cta{padding:44px 0;}
.sec-cta__inner{gap:14px;}
/* --- Form --- */
.cta-form{padding:18px;border-radius:18px;}
/* Họ tên + SĐT nằm 2 cột (site.css ép 1fr ở mobile → trả lại 2 cột) */
.field-row{grid-template-columns:1fr 1fr;gap:10px;padding-top:12px;}
.field{gap:5px;}
.field label{font-size:12px;line-height:16px;}
.field input,.field textarea{padding:11px 13px;font-size:14px;border-radius:9px;}
/* textarea: phải thắng `.page .cta-form .field textarea{height:71px;min-height:71px}`
trong flatsome-adapt.css (specificity cao hơn) — bám đủ chuỗi + min-height.
Cao ĐÚNG 1 dòng (line-height 1.4 × 14px + padding 11×2 ≈ 42px) và
`overflow-y:hidden` để KHÔNG hiện thanh cuộn; tắt luôn tay kéo resize
(kéo giãn ở mobile chỉ làm vỡ bố cục vừa thu gọn). */
.page .cta-form .field textarea,.field textarea{
height:42px;min-height:42px;line-height:1.4;
overflow-y:hidden;resize:none;
}
.field--msg{padding-top:12px;}
/* nút gửi sát hơn */
.cta-form .btn-gold,.cta-form button,.cta-form input[type="submit"]{margin-top:14px;}
/* ô trong hàng 2 cột hẹp → placeholder nhỏ hơn cho khỏi bị cắt (vd "email@congty.com") */
.field-row .field input::placeholder{font-size:13px;}
/* --- Cột trái: thông tin liên hệ --- */
.cta-lead{font-size:15px;line-height:1.5;}
.cta-contacts{gap:10px;padding-top:16px;}
.cta-item{gap:12px;}
.gold-box{width:38px;height:38px;border-radius:10px;}
.gold-box img{width:18px;height:18px;}
.cta-item__label{font-size:11px;line-height:16px;letter-spacing:1.2px;}
.cta-item__value{font-size:14px;line-height:20px;}
/* --- Social + copyright --- */
.cta-social{gap:9px;padding-top:14px;}
.cta-social__row{gap:9px;}
.cta-social__row .gold-box img{width:20px;height:20px;}
.cta-copyright{font-size:11px;line-height:1.5;letter-spacing:.8px;}
}
/* Màn rất hẹp (≤374px: iPhone SE): 2 cột thành quá chật → trả về 1 cột,
vẫn giữ mọi thu gọn khác. Từ 375px trở lên giữ 2 cột (đã đo: ô ~150px, đủ rộng). */
@media (max-width:374px){
.field-row{grid-template-columns:1fr;gap:9px;}
}
/* =========================================================
MOBILE: KHỐI "KHÁCH HÀNG & ĐỐI TÁC" — xếp lưới cho gọn
(khách 06/08/2026: "sắp xếp lộn xộn, cần logic dễ nhìn")
---------------------------------------------------------
Trước: .logo-row là flex-wrap ⇒ badge + 7 logo KH (và 3 logo ĐT) wrap tuỳ ý
thành 1-3-3 / 1-2, các món lệch nhau vài px, VẠCH NGĂN vẫn hiện.
design gốc đã có `.logo-sep{display:none}` ở mobile (home.css 593) nhưng THUA
rule `.page span.logo-sep{display:block}` của khối blockify (native 310)
⇒ phải ẩn lại với selector đủ mạnh.
Sau: badge đứng riêng 1 hàng, logo xếp LƯỚI 2 CỘT đều nhau, canh giữa ô.
========================================================= */
@media (max-width:768px){
.logos{gap:26px;}
/* mỗi hàng = badge (full dòng) + lưới logo 2 cột */
.logo-row{
display:grid;grid-template-columns:1fr 1fr;
gap:14px 12px;justify-items:center;align-items:center;
width:100%;margin:0;
}
.logo-row--partner{gap:14px 12px;}
/* badge chiếm trọn 1 dòng, canh trái cho thẳng hàng với các section khác */
.logo-badge{grid-column:1 / -1;justify-self:start;}
/* vạch ngăn: ẩn hẳn ở mobile (design gốc cũng ẩn) — phải thắng
`.page span.logo-sep{display:block}` ở khối blockify phía trên */
.page span.logo-sep,.logo-sep{display:none!important;}
/* ô logo cao bằng nhau ⇒ lưới thẳng hàng, không so le */
.logo-box,.logo-row--partner .logo-box{
height:64px;width:100%;padding:6px 0;
}
.logo-box img,.logo-row--partner .logo-box img{
width:auto;max-width:100%;height:100%;object-fit:contain;
}
}
/* Máy nhỏ: logo hẹp lại chút cho thoáng */
@media (max-width:374px){
.logo-row{gap:12px 10px;}
.logo-box,.logo-row--partner .logo-box{height:56px;}
}
/* =========================================================
BẢN THỬ v2 — section "Vị trí chiến lược" trên MOBILE (07/08/2026)
---------------------------------------------------------
Khách gửi ảnh tham khảo (Du Long IP): lưới 2×2, icon TRÒN đặt giữa phía trên,
số liệu + nhãn căn giữa. Bản v2 bám bố cục đó nhưng GIỮ tông xanh/vàng
Tam Dương (user chốt 07/08/2026).
⚠ ĐANG CHỜ DUYỆT — KHÔNG override bản cũ:
· desktop (>768px): v2 ẩn, bản cũ chạy y như trước
· mobile (≤768px): v2 hiện, bản cũ ẩn
Không duyệt thì chạy `tools-locv2.php --remove` là sạch, CSS này vô hại
(không có section .sec-location-v2 thì mọi rule dưới đây không bám vào đâu).
========================================================= */
.page .section.sec-location-v2{display:none;}
@media (max-width:768px){
/* đổi vai: v2 lên, bản cũ tạm ẩn */
.page .section.sec-location-v2{display:block;background:var(--surface);}
.page .section.sec-location{display:none;}
.locv2-head{align-items:flex-start;text-align:left;}
.locv2-head h2{font-size:24px;line-height:1.25;}
.locv2-head p{font-size:15px;line-height:1.55;}
/* --- Lưới 2×2 --- */
.page .row.td-locv2{
display:grid;grid-template-columns:1fr 1fr;gap:12px;
width:100%;max-width:none;margin:0;
/* 4 thẻ CAO BẰNG NHAU dù nhãn dài ngắn khác nhau ("Trung tâm Hà Nội" 1 dòng
vs "Tuyến đường sắt cấp vùng Hà Nội - Lào Cai" 3 dòng) */
grid-auto-rows:1fr;align-items:stretch;
}
.td-locv2>.col{padding:0!important;width:auto;max-width:none;}
.td-locv2>.col>.col-inner{height:100%;}
.td-locv2 .col-inner>.text{margin:0;height:100%;}
/* clearfix của .row Flatsome thành grid-item ⇒ ngốn 1 slot (gotcha dự án) */
.page .row.td-locv2::before,.page .row.td-locv2::after{content:none;}
/* --- Thẻ: icon tròn giữa trên, chữ căn giữa (theo ảnh tham khảo) --- */
.locv2-card{
height:100%;box-sizing:border-box;
display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
gap:10px;padding:20px 14px 18px;
background:rgba(28,72,36,.86);border:1px solid #5ecc72;border-radius:14px;
color:#fff;text-align:center;
box-shadow:0 6px 20px -8px rgba(0,0,0,.25);
}
/* vòng tròn icon — điểm nhấn chính của bố cục mới */
.locv2-card__ic{
flex:none;width:60px;height:60px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#2f6b3d,#1c4824);
border:1px solid rgba(238,200,112,.55);
box-shadow:0 4px 14px -4px rgba(0,0,0,.4);
}
.locv2-card__ic img{width:28px;height:28px;display:block;}
.locv2-card__num{
font-family:var(--font-head);line-height:1.05;letter-spacing:-.3px;color:var(--gold);
margin:2px 0 0;
}
.locv2-card__num b{font-weight:400;font-size:34px;}
.locv2-card__num span{font-size:16px;color:#fff;}
.locv2-card__lbl{
font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.92);
text-wrap:pretty;margin:0;
}
/* bản đồ trong v2: dùng lại rule .td-locmap sẵn có (đã vừa màn hình) */
.img.td-locmap-v2{margin-top:22px;}
}
@media (max-width:374px){
.locv2-card{padding:16px 10px 14px;gap:8px;}
.locv2-card__ic{width:52px;height:52px;}
.locv2-card__ic img{width:24px;height:24px;}
.locv2-card__num b{font-size:29px;}
.locv2-card__lbl{font-size:12.5px;}
}
/* =========================================================
BẢN THỬ v2 — section "Hạ tầng kỹ thuật" (trang Tổng quan) trên MOBILE
(07/08/2026 — khách chốt layout v2 trang chủ, yêu cầu áp y hệt cho section này)
---------------------------------------------------------
Cùng cơ chế đổi vai như sec-location-v2:
· desktop (>768px): v2 ẩn, bản cũ chạy y như trước
· mobile (≤768px): v2 hiện, bản cũ ẩn
Bố cục: lưới 2×2, icon TRÒN giữa phía trên, tiêu đề + thông số căn giữa.
Khác thẻ trang chủ ở chỗ có TIÊU ĐỀ CHỮ và dòng kẻ phân cách ⇒ giữ cả 2,
nhưng thu badge 100→64px và tiêu đề 30→17px cho vừa cột hẹp.
========================================================= */
.page .section.sec-infra-v2{display:none;}
@media (max-width:768px){
.page .section.sec-infra-v2{display:block;}
/* ẩn bản cũ: bám section CHỨA .td-infra (section cũ không có class riêng) */
.page .section:has(> .section-content .td-infra){display:none;}
/* --- Lưới 2×2 --- */
.page .row.td-infrav2{
display:grid;grid-template-columns:1fr 1fr;gap:56px 12px;
width:100%;max-width:none;margin:0;
grid-auto-rows:1fr;align-items:stretch;
}
.td-infrav2>.col{padding:0!important;width:auto;max-width:none;}
.td-infrav2>.col>.col-inner{height:100%;}
.td-infrav2 .col-inner>.text{margin:0;height:100%;}
.page .row.td-infrav2::before,.page .row.td-infrav2::after{content:none;}
/* --- Thẻ: giữ ngôn ngữ design (viền vàng, nền trắng) + icon tròn nhô lên --- */
.infrav2-card{
position:relative;height:100%;box-sizing:border-box;
display:flex;flex-direction:column;align-items:center;
gap:8px;padding:42px 12px 18px;
background:#fff;border:1px solid #f2c26f;border-radius:14px;
box-shadow:0 6px 9px rgba(0,0,0,.05);
text-align:center;
}
.infrav2-card__ic{
position:absolute;top:-32px;left:50%;transform:translateX(-50%);
width:64px;height:64px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(#1b3a2a,#33674c);border:1px solid #f2c26f;
box-shadow:0 4px 12px -4px rgba(0,0,0,.35);
}
.infrav2-card__ic img{width:32px;height:32px;object-fit:contain;display:block;}
.infrav2-card__title{
font-family:var(--font-head);font-size:17px;line-height:1.15;color:#203f30;
margin:0;text-wrap:balance;
}
/* dòng kẻ trang trí như design (span inline bị blockify ⇒ ép block) */
.page span.infrav2-card__div{
display:block;width:60px;height:8px;flex:none;
background:url('figma/tq-divider.svg') center/contain no-repeat;
}
.infrav2-card__spec{
font-size:13px;line-height:1.5;color:var(--ink);margin:0;text-wrap:pretty;
}
.infrav2-card__spec b{font-weight:700;}
}
@media (max-width:374px){
.page .row.td-infrav2{gap:50px 10px;}
.infrav2-card{padding:38px 9px 15px;}
.infrav2-card__ic{width:56px;height:56px;top:-28px;}
.infrav2-card__ic img{width:28px;height:28px;}
.infrav2-card__title{font-size:15.5px;}
.infrav2-card__spec{font-size:12.5px;}
}
/* =========================================================
KHỐI LOGO "Khách hàng & đối tác" — dựng bằng element GALLERY
(khách 07/08/2026: đổi từ HTML thủ công sang Gallery để admin tự thêm logo)
---------------------------------------------------------
Giữ NGUYÊN giao diện đã duyệt: badge «KHÁCH HÀNG»/«ĐỐI TÁC» + hàng logo
(user chốt giữ badge, dùng lưới TĨNH không slider).
Flatsome render gallery thành .row > .col > .box > .image-cover với ảnh
position:absolute + padding-top theo tỉ lệ ⇒ phải ép về "ảnh nằm giữa ô,
giữ tỉ lệ gốc" cho giống .logo-box cũ.
========================================================= */
/* (.logos--gal của bản gộp đầu đã bỏ — badge và gallery nay là element riêng) */
/* Sau khi tách [ux_gallery] ra NGOÀI [ux_text] (để builder hiện đúng element
Gallery), badge nằm trong .td-logobadge riêng.
Badge CĂN TRÁI như bản HTML gốc (khách chốt 07/08/2026) — chỉ hàng logo mới
canh giữa. `.logos` gốc là flex align-items:center nên badge từng bị kéo vào
giữa; ở đây wrapper là .text thường ⇒ chỉ cần text-align:left. */
.page .text.td-logobadge{margin:0;text-align:left;}
.page .text.td-logobadge .logo-badge{margin:0;}
.page .text.td-logobadge--partner{margin-top:20px;}
/* khoảng cách giữa badge và hàng logo của nó */
.page .text.td-logobadge+.row.td-logogal{margin-top:14px;}
/* hàng gallery: bỏ gutter mặc định, canh giữa */
.page .row.td-logogal{
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
margin:0;width:100%;max-width:none;
}
.page .row.td-logogal>.col{
padding:0 10px;width:auto;max-width:none;flex:0 0 auto;
}
.td-logogal .col-inner,.td-logogal .box,.td-logogal .box-image{width:auto;}
/* Flatsome dùng padding-top % để giữ tỉ lệ → bỏ, cho ảnh tự cao 72px như design */
.td-logogal .box-image .image-cover{position:static!important;padding-top:0!important;height:auto!important;}
.td-logogal .box-image img{
position:static!important;width:auto!important;max-width:100%;
height:72px!important;object-fit:contain!important;display:block;
}
.td-logogal--partner .box-image img{height:84px!important;}
/* Flatsome gắn sẵn `box-overlay dark` + nền đen 15%
⇒ logo bị phủ XÁM. Phải tắt cả lớp phủ lẫn nền của box. */
.td-logogal .box-image .image-overlay,
.td-logogal .box .overlay,
.td-logogal .box-text{display:none!important;}
.td-logogal .box,.td-logogal .box-image,.td-logogal .col-inner{
background:none!important;box-shadow:none!important;
}
.td-logogal .box.box-overlay,.td-logogal .box.dark{background-color:transparent!important;}
/* bỏ hiệu ứng phóng của gallery — logo đứng yên như bản HTML cũ */
.td-logogal .box-image.image-zoom img{transform:none!important;transition:none!important;}
.td-logogal .box{margin:0;}
/* ảnh gallery bọc trong
mở lightbox — logo không cần, tắt con trỏ bấm */
.td-logogal a.image-lightbox{pointer-events:none;cursor:default;display:block;}
/* vạch ngăn giữa các logo — dựng lại bằng border cho giống bản HTML cũ */
.page .row.td-logogal>.col+.col{border-left:1px solid #e7e2d9;}
@media (max-width:768px){
/* mobile: lưới 2 cột như bản đã duyệt, badge riêng 1 dòng (căn trái), bỏ vạch ngăn */
.page .row.td-logogal{
display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;
justify-items:center;align-items:center;
}
.page .row.td-logogal::before,.page .row.td-logogal::after{content:none;}
.page .row.td-logogal>.col{padding:0;width:100%;}
.page .row.td-logogal>.col+.col{border-left:0;}
.td-logogal .box-image img,.td-logogal--partner .box-image img{height:56px!important;}
}
@media (max-width:374px){
.td-logogal .box-image img,.td-logogal--partner .box-image img{height:48px!important;}
}
/* Badge «ĐỐI TÁC» xuống dòng riêng + 2 badge canh trái thẳng hàng (khách 10/08/2026).
Prod: admin đã dựng lại section bằng builder — nhóm Đối tác là 1 row
[badge col-2 | gallery col-8] align-center ⇒ badge nằm CHUNG HÀNG với logo
và thụt vào (x=202 trong khi badge Khách hàng x=95). Ép row đó xếp dọc bằng
CSS, KHÔNG sửa content (giữ chỉnh sửa admin, builder re-save không phá).
Gallery admin dựng lại mang class `client-logo-gallery` (không còn td-logogal);
các rule td-logogal phía trên chỉ còn phục vụ DB local. */
.page .row:has(> .col > .col-inner > .td-logobadge--partner){display:block;}
.page .row:has(> .col > .col-inner > .td-logobadge--partner) > .col{
width:100%;max-width:100%;flex:none;margin:0;
}
/* col chứa badge bỏ padding đáy để khoảng cách badge→logo bằng nhóm Khách hàng */
.page .row:has(> .col > .col-inner > .td-logobadge--partner) > .col:has(.td-logobadge--partner){
padding-bottom:0;
}
/* 3 logo Đối tác đứng gần nhau (khách 12/08/2026): Custom CSS của admin ép logo
max-width:170px căn giữa ô, mà 3 ô gallery chia đều cả bề ngang (ô 418px)
⇒ khe giữa các logo ~250px. Cap bề rộng gallery để ô co lại (~233px, khe 63px
≈ mật độ hàng Khách hàng); logo giữ nguyên 170px, CỤM CĂN GIỮA trang
(khách chốt 12/08/2026 — margin auto đè margin:0 -10px của row-small).
Flickity đo cell lúc init (CSS đã load trước) nên slider không lệch. */
@media (min-width:850px){
.page .row:has(> .col > .col-inner > .td-logobadge--partner) .row.client-logo-gallery{
max-width:700px;margin-left:auto;margin-right:auto;
}
}
/* =========================================================
LANGUAGE SWITCHER (WPML, 10/08/2026) — ô .lang của design thành dropdown thật.
Trạng thái tĩnh (nút = cờ + tên ngôn ngữ) giữ NGUYÊN layout .lang của site.css
⇒ pixel bất biến; chỉ thêm menu xổ xuống ẩn mặc định.
========================================================= */
.td-lang{position:relative}
.td-lang__cur{display:flex;align-items:center;gap:7px;background:none;border:0;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit}
.td-lang__menu{display:none;position:absolute;top:100%;right:0;margin:10px 0 0;padding:6px 0;list-style:none;background:#fff;border:1px solid #eee;border-radius:8px;box-shadow:0 10px 28px rgba(0,0,0,.14);min-width:170px;z-index:1200}
/* cầu hover: phủ khe hở 10px giữa nút và menu để rê chuột xuống không bị đóng */
.td-lang__menu::before{content:'';position:absolute;left:0;right:0;top:-12px;height:12px}
.td-lang:hover .td-lang__menu,.td-lang.is-open .td-lang__menu,.td-lang:focus-within .td-lang__menu{display:block}
.td-lang__menu li{margin:0;list-style:none}
.td-lang__menu li a{display:flex;align-items:center;gap:8px;padding:8px 14px;font-family:var(--font-head);font-size:14px;color:#000;white-space:nowrap;text-decoration:none}
.td-lang__menu li a:hover{background:#f6f1e6}
.td-lang__menu img{width:23px;height:18px;border-radius:3px;object-fit:cover;flex:none}
/* mobile: ô ngôn ngữ nằm trong panel menu xổ dọc — menu hiển thị tĩnh, không absolute */
@media (max-width:768px){
.td-lang__menu{position:static;box-shadow:none;border:0;border-radius:0;margin:4px 0 0;padding:0 0 0 30px;min-width:0}
.td-lang__menu::before{content:none}
.td-lang__menu li a{padding:7px 0}
}
/* =========================================================
FOOTER — Chính sách bảo mật / Điều khoản sử dụng (khách 12/08/2026)
2 link đặt ngay dưới dòng copyright trong .cta-social (flex column, gap 12px
⇒ tự xuống dòng, không phải chỉnh layout khối). Kiểu chữ theo .cta-copyright
nhưng KHÔNG uppercase để phân biệt với dòng bản quyền; gạch chân khi hover.
URL do admin điền trong Customizer → "Thông tin website (Webico)" (mặc định #).
========================================================= */
.cta-legal{
display:flex;align-items:center;flex-wrap:wrap;gap:10px;
margin:0;font-family:var(--font-head);font-size:13px;line-height:20.8px;color:#fff;
}
.cta-legal a{color:#fff;text-decoration:none;opacity:.85;transition:opacity .18s ease}
.cta-legal a:hover{opacity:1;text-decoration:underline}
.cta-legal__sep{color:#fff;opacity:.45}
@media (max-width:768px){
.cta-legal{font-size:11px;line-height:1.5;gap:8px;}
}
/* =========================================================
Trang chủ — khoảng cách trên "TAM DUONG INDUSTRIAL PARK" (20/08/2026)
---------------------------------------------------------
Khách báo tiêu đề bị hở một khoảng trắng phía trên. Đo thực tế: [gap] của
builder giữa .sec-intro__head và .intro-copy đẩy xuống 30px, trong khi
khoảng dưới tiêu đề chỉ 10px (gap của .intro-copy) ⇒ nhìn lệch hẳn.
Cân lại thành 14px / 14px cho đều.
Bám selector CẤU TRÚC (.gap-element + .intro-copy) chứ KHÔNG bám #gap-:
id đó builder sinh lại mỗi lần admin lưu và khác nhau local ↔ prod.
Cần !important vì builder in inline