/* ===== tvx_groupspdv.css =====================================================
CSS RIENG cua groupspdv.asp — theo nep cua ho listings:
css_listings3.css : nen chung ca ho
tvx.css : he thiet ke TVX dung chung toan site
tvx_groupspdv.css : luat rieng cua DUNG trang nay <-- file nay
VI SAO KHONG DUNG CHUNG tvx_listings.css:
trong 105 class cua file do co 8 class ma groupspdv dang dung —
page_bg (tren ), m_display, pc_display, fw500, sticky,
listing_phai, gt_lh, gioithieucongty_img — nap vao se doi kieu ca 8.
CACH BUST CACHE: doi chuoi `tvxver` trong groupspdv.asp (dong ~632),
KHONG sua ?v= o tung the .
Lat 1: chua can luat nao. Cac lat sau NOI THEM vao cuoi file nay.
========================================================================== */
/* ===== LAT 2 — khoi dan dau trang (H1 nhom + doan mo) =========================
Chep tu .pd-name / .pd-lead cua tvx_products.css (trang anh em da chay that),
doi tien to pd- -> gsp-. Bien mau lay tu tvx.css.
Thay cho: id="colorFF6600" (id trung 4 lan) va class dark_blue_color. */
.gsp-name{font-size:25px;font-weight:800;letter-spacing:-.3px;line-height:1.25;color:var(--tvx-ink)}
.gsp-lead{font-size:15.5px;line-height:1.75;color:var(--tvx-muted)}
.gsp-lead strong,.gsp-lead b{color:var(--tvx-ink);font-weight:700}
@media screen and (max-width:767.98px){.gsp-name{font-size:20px}.gsp-lead{font-size:14.5px;line-height:1.68}}
/* ===== LAT 5 — thanh lien he mobile (thay cho nut lien he noi) ===============
Chep tu tvx_listings.css (listings.asp da chay that, user da duyet).
KHONG nap ca tvx_listings.css vi 8 class cua trang nay se bi doi kieu
(page_bg tren , m_display, pc_display, fw500, sticky, listing_phai,
gt_lh, gioithieucongty_img). Nen chi lay dung nhung luat can dung. */
.tvx-abar{display:none}
@media (max-width:991.98px){
.tvx-abar{position:fixed;left:0;right:0;bottom:0;z-index:1050;display:flex;gap:8px;background:rgba(255,255,255,.97);backdrop-filter:saturate(180%) blur(8px);border-top:1px solid var(--tvx-line);box-shadow:0 -8px 28px -14px rgba(20,24,31,.35);padding:9px 10px;padding-bottom:calc(9px + env(safe-area-inset-bottom,0px))}
a.tvx-ab,a.tvx-ab:link,a.tvx-ab:visited{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:7px;padding:11px 8px;border-radius:11px;font-size:13px;font-weight:700;white-space:nowrap;border:1px solid var(--tvx-line);background:#fff;text-decoration:none!important;transition:.15s}
a.tvx-ab i{font-size:14px;flex:0 0 auto}
a.tvx-ab:active{transform:scale(.97)}
a.tvx-ab.is-call,a.tvx-ab.is-call:link,a.tvx-ab.is-call:visited{background:#151310;border-color:#151310;color:var(--tvx-brand)!important;flex:1.25 1 0}
a.tvx-ab.is-call i{color:var(--tvx-brand)}
a.tvx-ab.is-zalo,a.tvx-ab.is-zalo:link,a.tvx-ab.is-zalo:visited{color:#0068ff!important;border-color:#cfe4ff;background:#f5faff}
a.tvx-ab.is-zalo i{color:#0068ff}
a.tvx-ab.is-mail,a.tvx-ab.is-mail:link,a.tvx-ab.is-mail:visited{color:var(--tvx-teal)!important;border-color:#cfe0e1;background:#fff}
a.tvx-ab.is-mail i{color:var(--tvx-teal)}
}
@media (max-width:359.98px){a.tvx-ab{font-size:12px;padding:10px 5px;gap:5px}}
/* ===== LAT 7 — khuon the cong ty `pd-*` ======================================
CHEP NGUYEN VAN nhom luat .pd-* tu tvx_products.css (products.asp da chay
that, user da duyet). KHONG nap ca file do vi 10 class dung chung se doi
kieu cua trang nay (page_bg tren , fw500, sticky, span_lienhe, num,
is-call/is-mail/is-zalo, tvx-abar, tvx-panel).
Nhom .pd-* la khong gian ten sach: groupspdv truoc lat nay dung 0 class pd-*. */
/* ============================================================================
TVX_PRODUCTS.CSS — CSS RIÊNG trang chi tiết dịch vụ (products.asp)
Marker: TVXCSS_PRODUCTS_20260721p20
----------------------------------------------------------------------------
ĐỘC LẬP với tvx_listings.css. Chỉ mượn TOKEN MÀU của tvx.css, không mượn
một selector nào — nên sửa listings không ảnh hưởng products và ngược lại.
NGUYÊN TẮC LỀ (khác hẳn .tvxsec của listings):
.tvxsec của listings để padding ngang = 0, MỖI CON tự chừa 22px
-> nhét component không có lề riêng vào là dính mép, lệch hàng.
.pd-card ở đây CHỨA TOÀN BỘ LỀ. Con không cần biết gì về lề.
-> mọi thứ bên trong tự thẳng hàng, không thể tràn mép.
Nạp SAU css/tvx.css. Đổi file này -> BẮT BUỘC bump ?v= trong products.asp.
============================================================================ */
/* ---------- 1. THẺ BAO ---------- */
.pd-card{
background:#fff;
border-radius:16px;
padding:22px; /* <<< toàn bộ lề nằm ở đây */
margin-bottom:16px;
}
.pd-card > :first-child{margin-top:0}
.pd-card > :last-child{margin-bottom:0}
/* ---------- 2. HERO: logo trái | nội dung phải ---------- */
.pd-hero{
display:grid;
grid-template-columns:132px minmax(0,1fr);
gap:22px;
align-items:start;
}
.pd-hero.is-nologo{grid-template-columns:minmax(0,1fr)}
.pd-logo{
width:132px;min-height:112px;
border:1px solid var(--tvx-line);
border-radius:12px;
background:#fff;
display:grid;place-items:center;
padding:10px;
}
.pd-logo img{max-width:100%;max-height:92px;object-fit:contain;display:block}
.pd-main{min-width:0}
/* ---------- 3. TÊN + BADGE ---------- */
.pd-name{
font-size:25px;font-weight:800;letter-spacing:-.3px;line-height:1.25;
color:var(--tvx-ink);
margin:0 0 9px;
}
.pd-badges{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px}
.pd-badges:empty{display:none}
.pd-b{
display:inline-flex;align-items:center;gap:7px;
padding:5px 11px;border-radius:999px;
font-size:11.5px;font-weight:700;line-height:1;
white-space:nowrap;
}
/* bộ số chép từ tvx.css dòng 63–72 — cùng một hệ badge với listings */
.pd-b-sp{gap:9px;padding:4px 12px;background:var(--tvx-spbg);border:1px solid var(--tvx-spline)}
.pd-b-sp .pd-dia{display:inline-flex;gap:3px;color:#e0a516}
.pd-b-sp .pd-dia i{font-size:12px}
.pd-b-sp .pd-bar{width:1px;height:11px;background:#e6d8b6}
.pd-splbl{font-size:11.5px;font-weight:700;color:#b0770a;letter-spacing:.01em}
.pd-b-vf{gap:6px;padding:4px 10px 4px 11px;background:var(--tvx-verify-tint);border:1px solid #bfe6cc;color:#15803d;font-size:11.5px;font-weight:700}
.pd-b-vf>i{color:#1a9e4b;font-size:13px}
.pd-b-sp,.pd-b-vf{min-height:24px;box-sizing:border-box}
.pd-upd{
display:inline-flex;align-items:center;gap:6px;
font-size:12px;color:var(--tvx-muted);
}
.pd-upd i{color:var(--tvx-faint)}
.pd-upd-x{color:#b42318}
.pd-upd-x i{color:#b42318}
/* ---------- 4. DÒNG THÔNG TIN ---------- */
.pd-rows{display:flex;flex-direction:column;gap:8px;margin-top:15px}
.pd-r{
display:flex;align-items:flex-start;gap:10px;
font-size:14px;line-height:1.55;color:#3a352c;min-width:0;
}
.pd-r > i{
width:16px;flex:0 0 auto;margin-top:3px;
text-align:center;color:var(--tvx-gold);font-size:13px;
}
.pd-r b{font-weight:700}
.pd-r a{color:var(--tvx-ink);text-decoration:none;font-weight:600;word-break:break-word}
.pd-r a:hover{color:var(--tvx-gold);text-decoration:underline}
.pd-r a[href^="tel:"]{font-weight:800!important;color:var(--tvx-ink)!important;font-family:'Space Grotesk',ui-monospace,monospace;letter-spacing:.2px}
.pd-r a[href^="tel:"]:hover{color:var(--tvx-gold)!important}
.pd-r .fw500 a[href^="tel:"]{font-weight:800!important}
.pd-r .num{font-family:'Space Grotesk',ui-monospace,monospace;font-weight:700;letter-spacing:.2px}
.pd-r.is-mask{color:var(--tvx-faint)}
.pd-r.is-mask > i{color:var(--tvx-faint)}
.pd-r img{vertical-align:middle}
/* ---------- 5. NÚT EMAIL / WEBSITE ---------- */
.pd-acts{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0 0;padding-top:15px;border-top:1px dashed var(--tvx-line)}
.pd-acts:empty{display:none;border-top:0;padding-top:0;margin-top:0}
.pd-act{
display:inline-flex;align-items:center;gap:9px;
max-width:100%;
padding:9px 15px;border:1px solid #cfe0e1;border-radius:8px;
background:#fff;color:var(--tvx-teal)!important;
font-size:13px;font-weight:600;text-decoration:none!important;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
transition:.15s;
}
.pd-act i{color:var(--tvx-teal);font-size:14px;flex:0 0 auto}
.pd-act span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-act:hover{border-color:var(--tvx-teal)!important;background:#f2f9f9;color:var(--tvx-teal)!important;text-decoration:none!important}
/* ---- Điều hướng TRONG Trang Vàng: vàng thương hiệu, KHÁC hẳn nút liên hệ xanh ngọc ---- */
.pd-profile{display:inline-flex;align-items:center;gap:9px;margin-top:12px;
padding:10px 16px;border:1px solid var(--tvx-brand-deep);border-radius:8px;
background:var(--tvx-brand-tint);color:var(--tvx-gold)!important;
font-size:13px;font-weight:700;text-decoration:none!important;transition:.15s}
.pd-profile > i{color:var(--tvx-gold);font-size:13px;flex:0 0 auto}
.pd-profile::after{content:"\f061";font-family:"Font Awesome 6 Free";font-weight:900;
font-size:11px;transition:transform .15s}
.pd-profile:hover{background:var(--tvx-brand);border-color:var(--tvx-brand-deep);
color:var(--tvx-ink)!important;text-decoration:none!important}
.pd-profile:hover > i{color:var(--tvx-ink)}
.pd-profile:hover::after{transform:translateX(3px)}
.pd-act.is-lock{border-style:dashed!important;color:var(--tvx-muted)!important;background:var(--tvx-paper);cursor:default}
.pd-act.is-lock i{color:var(--tvx-faint)!important}
/* ---------- 6. BA THẺ DỮ KIỆN ---------- */
.pd-facts{
display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
gap:12px;margin:18px 0 0;
}
.pd-facts:empty{display:none;margin:0}
.pd-fact{border:1px solid var(--tvx-line);border-radius:12px;padding:13px 15px;background:var(--tvx-paper)}
.pd-fact .k{
display:flex;align-items:center;gap:7px;
font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
color:var(--tvx-gold);margin-bottom:7px;
}
.pd-fact .k i{color:var(--tvx-gold);font-size:11px}
.pd-fact .v{font-size:14.5px;font-weight:600;color:var(--tvx-ink);line-height:1.5}
/* ---------- 7. NGÀNH NGHỀ + CHỨNG NHẬN ---------- */
.pd-sec{margin:18px 0 0}
.pd-lbl{
display:flex;align-items:center;gap:7px;
font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
color:var(--tvx-gold);margin-bottom:9px;
}
.pd-lbl i{color:var(--tvx-gold);font-size:11px}
.pd-tags{display:flex;flex-wrap:wrap;gap:8px}
.pd-tag{
display:inline-flex;align-items:center;gap:7px;
padding:7px 13px;border:1px solid var(--tvx-line);border-radius:9px;
background:#fff;color:var(--tvx-ink)!important;
font-size:13px;font-weight:600;text-decoration:none!important;
}
.pd-tag::after{content:"\f105";font-family:"Font Awesome 6 Free";font-weight:900;font-size:11px;color:var(--tvx-faint)}
.pd-tag:hover{background:#fffdf3;border-color:var(--tvx-brand-deep);color:var(--tvx-ink)!important;text-decoration:none!important}
.pd-tag:hover::after{color:var(--tvx-brand-deep)}
.pd-cert{
display:flex;align-items:flex-start;gap:10px;
padding:12px 14px;border:1px solid #a9d9b8;border-radius:10px;background:#f6fdf8;
font-size:14px;line-height:1.55;color:var(--tvx-ink);
}
.pd-cert i{color:#15803d;font-size:14px;margin-top:2px;flex:0 0 auto}
/* ---------- 8. MOBILE ---------- */
@media screen and (max-width:767.98px){
.pd-card{padding:16px;border-radius:14px}
.pd-hero{grid-template-columns:minmax(0,1fr);gap:14px}
.pd-logo{width:100%;max-width:150px;min-height:0}
.pd-logo img{max-height:84px}
.pd-name{font-size:20px}
.pd-r{font-size:14px}
.pd-facts{grid-template-columns:1fr;gap:10px}
.pd-acts{gap:8px}
.pd-act{width:100%;justify-content:center}
}
/* ---------- 10. THANH MỤC LỤC — lề riêng của products (xem thêm mục 15) ---------- */
.pd-nav{margin-bottom:16px}
.pd-nav + .pd-card{margin-top:0}
/* ---------- 9. KHỐI DẪN ĐẦU TRANG (H1 + đoạn mở) ---------- */
.pd-intro{padding-bottom:20px}
.pd-intro .pd-name{margin:0 0 14px}
.pd-lead{max-width:none}
.pd-lead p{margin:0 0 12px;font-size:15.5px;line-height:1.75;color:var(--tvx-muted)}
.pd-lead p:last-child{margin-bottom:0}
.pd-lead p:first-child{font-size:16.5px;color:var(--tvx-ink)}
.pd-lead strong,.pd-lead b{color:var(--tvx-ink);font-weight:700}
.pd-lead a{color:var(--tvx-ink);font-weight:600;text-decoration:none}
.pd-lead a:hover{color:var(--tvx-gold);text-decoration:underline}
@media screen and (max-width:767.98px){
.pd-lead p{font-size:14.5px;line-height:1.68}
.pd-lead p:first-child{font-size:15.5px}
}
/* ---------- 11. ZALO PILL + NÚT XEM CHI TIẾT ---------- */
.pd-r img[src*="zalo"],.pd-r img[alt*="alo"]{display:none}
.pd-zalo{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 8px;
border:1px solid #cfe4ff;border-radius:20px;background:#f2f8ff;
font-size:10.5px;font-weight:800;color:#0068ff!important;text-decoration:none!important;vertical-align:middle}
.pd-zalo i{color:#0068ff!important;font-size:10px}
.pd-zalo:hover{background:#e4f0ff;border-color:#a9cfff;color:#0055d4!important;text-decoration:none!important}
/* tên + badge nằm trong cột phải của .pd-hero */
.pd-main > .pd-name{margin:0 0 9px}
.pd-main > .pd-badges{margin-top:9px}
.pd-vfslot{display:inline-flex;align-items:center}
/* ---------- 12. HERO: bo
rong con lai giua pd-card va pd-hero ---------- */
.pd-card > div:empty{display:none}
.pd-hero + .pd-facts{margin-top:18px}
/* ---------- 13. TOOLTIP "XÁC THỰC" ---------- */
.pd-vwrap{position:relative;display:inline-flex}
.pd-info{margin-left:6px;width:15px;height:15px;flex:0 0 auto;padding:0;
border:1px solid #a9d9b8;border-radius:50%;background:#fff;color:#15803d;
font-size:9.5px;font-weight:800;line-height:1;cursor:pointer;display:inline-flex;
align-items:center;justify-content:center}
.pd-info:hover{background:#15803d;color:#fff;border-color:#15803d}
.pd-tip{display:none;position:absolute;top:calc(100% + 9px);left:0;z-index:60;
width:296px;max-width:78vw;padding:13px 14px;
background:#fff;border:1px solid var(--tvx-line);border-radius:11px;
box-shadow:0 10px 28px rgba(0,0,0,.13);
font-size:13px;font-weight:400;line-height:1.6;color:var(--tvx-muted);
white-space:normal;text-align:left}
.pd-tip.is-open{display:block}
/* cấu trúc 4 phần — chép từ tvx.css dòng 79–86 */
.pd-tip-h{display:flex;flex-direction:column;gap:3px;padding-bottom:10px;border-bottom:1px solid var(--tvx-line);margin-bottom:10px}
.pd-tip-hl{display:flex;align-items:flex-start;gap:8px;font-weight:700;font-size:13px;color:var(--tvx-ink);line-height:1.35}
.pd-tip-hl i{color:var(--tvx-verify);margin-top:2px;flex:0 0 auto}
.pd-tip-sub{font-size:11.5px;font-weight:400;color:var(--tvx-muted);line-height:1.45}
.pd-tip-b{display:flex;flex-direction:column;gap:9px}
.pd-tip-b>span{font-size:12.5px;color:var(--tvx-ink-soft);display:flex;gap:8px;align-items:flex-start;line-height:1.45}
.pd-tip-b>span i{color:var(--tvx-verify);margin-top:3px;font-size:11px;flex:0 0 12px}
.pd-tip-n{display:block;margin-top:10px;padding-top:10px;border-top:1px solid var(--tvx-line);font-size:11px;color:var(--tvx-muted);line-height:1.55}
@media screen and (max-width:575.98px){.pd-tip{left:auto;right:0}}
/* ---------- 14. THẺ LIÊN HỆ CỘT PHẢI (.pd-side-*) — LÁT 1 ----------
Chép cơ học từ tvx_listings.css dòng 102–134, chỉ đổi tiền tố .tvxc → .pd-side.
Khai báo giữ nguyên từng byte: mục tiêu lát này là CẮT PHỤ THUỘC, không đổi hình.
Các .tvxc-* KHÔNG dùng ở products (-p -av -pn -pr -rows -r -num -cp -zpill
-loc -note) cố ý không chép sang.
Ghi nhận: bản gốc không có .tvxc-sec:last-child{border-bottom:0} — ở listings
phần tử cuối là .tvxc-note (border-bottom:0) nên không lộ; ở products phần tử
cuối là .pd-side-sec nên còn một vạch sát đáy thẻ. GIỮ NGUYÊN ở lát này.
-------------------------------------------------------------------------- */
.pd-side{background:#fff;border:1px solid var(--tvx-line);border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(20,24,31,.05),0 14px 30px -22px rgba(20,24,31,.35)}
.pd-side-hd{background:#151310;color:var(--tvx-brand);padding:13px 16px;display:flex;align-items:center;gap:9px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.pd-side-hd i{font-size:14px}
.pd-side-co{display:flex;gap:12px;align-items:center;padding:15px 16px;border-bottom:1px solid var(--tvx-line)}
.pd-side-colog{width:58px;height:58px;flex:0 0 auto;border:1px solid var(--tvx-line);border-radius:10px;display:grid;place-items:center;padding:5px;background:#fff}
.pd-side-colog img{max-width:100%;max-height:44px;object-fit:contain}
.pd-side-colog i{color:#c9c4b8;font-size:20px}
.pd-side-conm{font-size:13.5px;font-weight:700;color:var(--tvx-ink);line-height:1.42;min-width:0}
.pd-side-sec{padding:15px 16px;border-bottom:1px solid var(--tvx-line)}
.pd-side-lbl{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--tvx-gold);margin-bottom:12px}
.pd-side-hr{height:1px;background:var(--tvx-line);margin:13px 0}
.pd-side-kv{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:5px 0}
.pd-side-kv .k{color:var(--tvx-muted);flex:0 0 auto}
.pd-side-kv .v{font-weight:700;color:var(--tvx-ink);text-align:right}
/* -- khối NGƯỜI PHỤ TRÁCH + ĐỊA ĐIỂM: chép cơ học tvx_listings.css 116–136,
chỉ đổi tiền tố tvxc- -> pd-side-. Lát 1 chưa port vì markup lúc đó
còn dùng cấu trúc cũ (.pd-r + nhãn .span_lienhe). -- */
.pd-side-p{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
.pd-side-av{width:36px;height:36px;flex:0 0 auto;border-radius:9px;background:var(--tvx-brand-tint);border:1px solid #f0e4b4;display:grid;place-items:center;font-weight:800;font-size:12.5px;color:var(--tvx-gold);letter-spacing:.5px}
.pd-side-pn{font-size:13.5px;font-weight:700;color:var(--tvx-ink);line-height:1.35}
.pd-side-pr{font-size:12px;color:var(--tvx-muted);margin-top:1px}
.pd-side-rows{display:flex;flex-direction:column;gap:7px;margin-left:46px}
.pd-side-r{display:flex;align-items:center;gap:8px;font-size:13px;color:#3a352c;min-width:0}
.pd-side-r>i{width:14px;text-align:center;color:var(--tvx-gold);font-size:12px;flex:0 0 auto}
.pd-side-r a{color:var(--tvx-ink);text-decoration:none;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-side-r a:hover{color:var(--tvx-gold)}
.pd-side-num{font-family:'Space Grotesk',ui-monospace,monospace;font-weight:700;letter-spacing:.2px}
.pd-side-zpill{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:800;color:#0068ff;border:1px solid #cfe4ff;background:#f2f8ff;border-radius:5px;padding:1px 6px;text-decoration:none;flex:0 0 auto}
.pd-side-loc{font-size:13.5px;color:var(--tvx-ink);font-weight:600;display:flex;gap:8px;align-items:flex-start}
.pd-side-loc i{color:var(--tvx-gold);font-size:12px;margin-top:3px}
/* ---------- 15. THANH MỤC LỤC (.pd-nav*) — LÁT 2 ----------
Chép cơ học từ tvx_listings.css dòng 271–278, chỉ đổi tiền tố tvxnav → pd-nav.
.tvx-panel (tvx.css) chỉ đặt viền + đổ bóng nên KHÔNG xung đột; nền/bo góc do
.pd-nav quyết định, và file này nạp sau cùng nên luôn thắng.
-------------------------------------------------------------------------- */
.pd-nav{margin-top:18px;border-radius:14px;background:#fff;overflow:hidden}
.pd-nav-in{display:flex;align-items:stretch;padding:0 10px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pd-nav-in::-webkit-scrollbar{display:none}
a.pd-nav-a, a.pd-nav-a:link, a.pd-nav-a:visited{
flex:0 0 auto;display:inline-flex;align-items:center;padding:14px 15px 11px;font-size:14px;font-weight:600;white-space:nowrap;
color:var(--tvx-muted)!important;text-decoration:none!important;border-bottom:3px solid transparent;transition:.15s}
a.pd-nav-a:hover{color:var(--tvx-ink)!important;background:var(--tvx-paper);text-decoration:none!important}
a.pd-nav-a.is-on{color:var(--tvx-ink)!important;font-weight:700;border-bottom-color:var(--tvx-brand)}
/* ---------- 17. VỎ SECTION → .pd-card + LƯỚI DỊCH VỤ (.pd-svc-*) — LÁT 3 ----------
Nguồn: tvx_listings.css. Vỏ
section giữ .tvx-panel (viền+bóng, KHÔNG đổi
diện mạo — tôn trọng "đang hiển thị đúng" của §5), chỉ thay class .tvxsec →
.pd-card. Vì .pd-card đã cấp padding 22px cho CHA nên MỌI con bỏ lề NGANG
(đúng nguyên tắc §2: cha ôm hết lề, con không biết gì). Lề dọc port nguyên si.
Chỉ hai giá trị bị đổi so với bản gốc listings, đều là lề ngang:
h2 pill : margin 0 22px 14px -> 0 0 14px (mobile 0 16px 12px -> 0 0 12px)
grid : padding 2px 22px 16px -> 2px 0 16px (mobile 2px 16px 14px -> 2px 0 14px)
Inset ngang desktop vẫn = 22px (pd-card), mobile = 16px (pd-card) — khớp bản cũ.
LƯU Ý dọc: pd-card thêm 22px đáy (desktop) CHỒNG lên 16px đáy của grid => khoảng
trống dưới item cuối tăng ~18px so với .tvxsec cũ. Nếu muốn khít như cũ: đổi
grid bottom 16px -> 0 (một dòng). Để ảnh chụp quyết.
-------------------------------------------------------------------------- */
/* -- tựa đề pill nét đứt (was h2.tvxl-sh) -- */
h2.pd-svc-h{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
color:#9a7a0f;background:#fffbe8;border:1px dashed #e9c900;border-radius:7px;padding:8px 15px;margin:0 0 14px;line-height:1.2}
h2.pd-svc-h i{font-size:12px;color:#c9a400}
/* -- lưới (was .tvxs-grid) -- */
.pd-svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:0 20px;padding:2px 0 16px}
.pd-svc-grid > p{grid-column:1/-1;margin:0}
/* -- tiêu đề nhóm SP (was .tvxp-gh) -- */
.pd-svc-gh{grid-column:1/-1;display:flex;align-items:baseline;gap:10px;font-size:14.5px;font-weight:800;color:var(--tvx-ink);margin:12px 0 0;padding-left:12px;border-left:3px solid var(--tvx-brand);line-height:1.4}
.pd-svc-gh:first-child{margin-top:2px}
.pd-svc-gh a, .pd-svc-gh a:link, .pd-svc-gh a:visited{color:var(--tvx-ink)!important;text-decoration:none!important}
.pd-svc-gh a:hover{color:var(--tvx-gold)!important;text-decoration:none!important}
.pd-svc-grid > .pd-svc-gh{margin:16px 0 6px;padding-left:11px}
.pd-svc-grid > .pd-svc-gh:first-child{margin-top:0}
/* -- item + icon (was .tvxs-item / .tvxs-i) -- */
.pd-svc-item{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:14px;line-height:1.5;min-width:0}
.pd-svc-i{width:19px;height:19px;flex:0 0 auto;margin-top:1px;border-radius:6px;background:var(--tvx-brand-tint);border:1px solid #f0e4b4;
display:grid;place-items:center;transition:.15s}
.pd-svc-i i{font-size:9px;color:var(--tvx-gold);transition:.15s}
.pd-svc-item:hover .pd-svc-i{background:var(--tvx-brand);border-color:#d9b800;transform:scale(1.08)}
.pd-svc-item:hover .pd-svc-i i{color:#151310}
.pd-svc-item a, .pd-svc-item a:link, .pd-svc-item a:visited{color:var(--tvx-ink)!important;text-decoration:none!important;font-weight:500}
.pd-svc-item a:hover{color:var(--tvx-gold)!important;text-decoration:none!important}
@media(max-width:575.98px){
h2.pd-svc-h{margin:0 0 12px}
.pd-svc-grid{grid-template-columns:1fr;padding:2px 0 14px}
}
/* ---------- 18. THANH HÀNH ĐỘNG ĐÁY (mobile/tablet) — LÁT 4 ----------
Chép cơ học từ tvx_listings.css dòng 288–325, chỉ đổi tiền tố tvx-ab → pd-ab
(đổi luôn .tvx-abar → .pd-abar vì "tvx-abar" = "tvx-ab" + "ar").
GIỮ NGUYÊN TÊN hai selector cuối, có lý do:
· body.page_bg — class nằm trên (products.asp dòng 714), gốc từ
css_listings3.css; đổi tên là đụng vào thứ ngoài phạm vi việc này.
· .gotop,#gotop — phần tử do include/go_top.asp sinh ra. File include đó
DÙNG CHUNG với listings.asp, không được sửa. Rule này chỉ nhấc nút go-top
lên trên thanh hành động; thiếu nó thì trên mobile nút bị thanh che.
Đây là khối phụ thuộc CUỐI CÙNG — port xong thì gỡ được tvx_listings.css.
-------------------------------------------------------------------------- */
/* --- THANH HÀNH ĐỘNG ĐÁY (chỉ mobile/tablet) --- */
.pd-abar{display:none}
@media(max-width:991.98px){
.pd-abar{
position:fixed;left:0;right:0;bottom:0;z-index:1050;
display:flex;gap:8px;
background:rgba(255,255,255,.97);backdrop-filter:saturate(180%) blur(8px);
border-top:1px solid var(--tvx-line);
box-shadow:0 -8px 28px -14px rgba(20,24,31,.35);
padding:9px 10px;padding-bottom:calc(9px + env(safe-area-inset-bottom,0px))}
a.pd-ab, a.pd-ab:link, a.pd-ab:visited{
flex:1 1 0;min-width:0;
display:flex;align-items:center;justify-content:center;gap:7px;
padding:11px 8px;border-radius:11px;
font-size:13px;font-weight:700;white-space:nowrap;
border:1px solid var(--tvx-line);background:#fff;
text-decoration:none!important;transition:.15s}
a.pd-ab i{font-size:14px;flex:0 0 auto}
a.pd-ab:active{transform:scale(.97)}
/* Gọi ngay = hành động chính (đen/vàng, nổi bật nhất) */
a.pd-ab.is-call, a.pd-ab.is-call:link, a.pd-ab.is-call:visited{
background:#151310;border-color:#151310;color:var(--tvx-brand)!important;flex:1.25 1 0}
a.pd-ab.is-call i{color:var(--tvx-brand)}
a.pd-ab.is-zalo, a.pd-ab.is-zalo:link, a.pd-ab.is-zalo:visited{
color:#0068ff!important;border-color:#cfe4ff;background:#f5faff}
a.pd-ab.is-zalo i{color:#0068ff}
a.pd-ab.is-mail, a.pd-ab.is-mail:link, a.pd-ab.is-mail:visited{
color:var(--tvx-teal)!important;border-color:#cfe0e1;background:#fff}
a.pd-ab.is-mail i{color:var(--tvx-teal)}
/* chừa chỗ cho thanh, footer không bị che */
body.page_bg{padding-bottom:76px}
/* nút go-top nhấc lên trên thanh */
.gotop, #gotop{bottom:88px!important}
}
/* rất hẹp: rút gọn chữ */
@media(max-width:359.98px){
a.pd-ab{font-size:12px;padding:10px 5px;gap:5px}
}
/* ================= DONG BO 3 TRANG =================
Quy the noi dung ve mot chuan: vien 1px --tvx-line, bo 16px, bong 2 lop.
Than luat chep TUNG KY TU tu .sp-cline (tvx_sp.css) - von chep tu
.tvxsec + .tvx-panel cua listings. KHONG dung !important: cac the da
duoc go class rounded-3 nen khong con tranh chap voi Bootstrap. */
.pd-cline{border:1px solid var(--tvx-line);border-radius:16px;box-shadow:0 1px 2px rgba(20,24,31,.05),0 8px 22px -18px rgba(20,24,31,.15)}
/* ===== LAT 10 — vo section "Gioi thieu cong ty" ==============================
CHEP tu tvx_listings.css (listings.asp da chay that). Bo 16px cho khop
voi pd-card / pd-side. Nhan muc = pill net dut vang h2.tvxl-sh. */
/* ================= TỰA ĐỀ MỤC (pill nét đứt + icon) ================= */
h2.tvxl-sh{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
color:#9a7a0f;background:#fffbe8;border:1px dashed #e9c900;border-radius:7px;padding:8px 15px;margin:0 0 4px;line-height:1.2}
h2.tvxl-sh i{font-size:12px;color:#c9a400}
/* --- 2) VỎ SECTION: bo khung + nhịp trong khung --- */
.tvxsec{border-radius:16px;background:#fff;overflow:hidden;padding:20px 0 4px}
.tvxsec > h2.tvxl-sh{margin:0 22px 14px}
.tvxsec > .tvx-sh{padding:0 22px}
/* text dài trong panel (giới thiệu / SP mở rộng) */
.tvxsec .gioithieucongty_img, .tvxsec .gt_lh, .tvxsec > .tvxs-grid > p{padding-left:22px!important;padding-right:22px!important}
.tvxsec p:last-child{margin-bottom:0}
@media(max-width:575.98px){
.tvxsec{padding:16px 0 2px}
.tvxsec > h2.tvxl-sh{margin:0 16px 12px}
.tvxs-grid{grid-template-columns:1fr;padding:2px 16px 14px}
.tvxg-grid{grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:14px 12px;padding:2px 16px 16px}
.tvxg-img{height:120px}
.tvxp-wrap{padding:2px 16px 16px}
.tvxf{padding:2px 16px 14px}
.tvxsec .gioithieucongty_img,.tvxsec .gt_lh{padding-left:16px!important;padding-right:16px!important}
}
/* --- 3) Mục lục A→Z: tách khỏi footer --- */
.tvxsec:last-of-type, .tvx-panel.tvxaz-pan{margin-bottom:34px}
/* ================= DONG BO 3 TRANG =================
.tvx-panel (tvx.css) khong khai border-radius, nen `rounded-3` cua
Bootstrap - nap SAU va co !important - ep hai the cuoi trang ve 8px
trong khi 7 the .tvxsec o tren la 16px. Da go rounded-3 khoi hai the do
va dung .tvxl-cline. Than luat chep TUNG KY TU tu .sp-cline / .pd-cline. */
.tvxl-cline{border:1px solid var(--tvx-line);border-radius:16px;box-shadow:0 1px 2px rgba(20,24,31,.05),0 8px 22px -18px rgba(20,24,31,.15)}
/* ===== LAT 12 — bieu tuong danh sach san pham ================================
CHEP tu tvx_listings.css. Dau tich tron -> o vuong bo 6px nen vang nhat,
vien #f0e4b4, icon vang; hover doi nen sang vang dam.
Chi doi BIEU TUONG — vo luoi `sanphamdichvu` cua trang giu nguyen. */
/* text dài trong panel (giới thiệu / SP mở rộng) */
.tvxsec .gioithieucongty_img, .tvxsec .gt_lh, .tvxsec > .tvxs-grid > p{padding-left:22px!important;padding-right:22px!important}
/* --- 3) SẢN PHẨM DỊCH VỤ: lưới + icon hiện đại --- */
.tvxs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:0 20px;padding:2px 22px 16px}
.tvxs-grid > p{grid-column:1/-1;margin:0}
.tvxs-grid > .tvxp-gh{margin:16px 0 6px;padding-left:11px}
.tvxs-grid > .tvxp-gh:first-child{margin-top:0}
.tvxs-item{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:14px;line-height:1.5;min-width:0}
.tvxs-i{width:19px;height:19px;flex:0 0 auto;margin-top:1px;border-radius:6px;background:var(--tvx-brand-tint);border:1px solid #f0e4b4;
display:grid;place-items:center;transition:.15s}
.tvxs-i i{font-size:9px;color:var(--tvx-gold);transition:.15s}
.tvxs-item:hover .tvxs-i{background:var(--tvx-brand);border-color:#d9b800;transform:scale(1.08)}
.tvxs-item:hover .tvxs-i i{color:#151310}
a.tvxs-item-l{}
.tvxs-item a, .tvxs-item a:link, .tvxs-item a:visited{color:var(--tvx-ink)!important;text-decoration:none!important;font-weight:500}
.tvxs-item a:hover{color:var(--tvx-gold)!important;text-decoration:none!important}
@media(max-width:575.98px){
.tvxsec{padding:16px 0 2px}
.tvxsec > h2.tvxl-sh{margin:0 16px 12px}
.tvxs-grid{grid-template-columns:1fr;padding:2px 16px 14px}
.tvxg-grid{grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:14px 12px;padding:2px 16px 16px}
.tvxg-img{height:120px}
.tvxp-wrap{padding:2px 16px 16px}
.tvxf{padding:2px 16px 14px}
.tvxsec .gioithieucongty_img,.tvxsec .gt_lh{padding-left:16px!important;padding-right:16px!important}
}