/* =========================================================== CTA SECTION TRANG CHỦ — Phương án 2: Be ngà + xanh thương hiệu + cam đất =========================================================== */ body.home #main section.section:last-of-type { background-color: #F4F7FB !important; border-top: 3px solid #0A1F44 !important; position: relative; z-index: 2; } body.home #main section.section:last-of-type .section-bg, body.home #main section.section:last-of-type .section-bg-overlay { background-color: #F4F7FB !important; background-image: none !important; opacity: 1 !important; } body.home #main section.section:last-of-type h1, body.home #main section.section:last-of-type h2, body.home #main section.section:last-of-type h3 { color: #0A1F44 !important; } body.home #main section.section:last-of-type p { color: #2c2c2c !important; } /* Nút GỌI NGAY (is-outline) — cam đất */ body.home #main section.section:last-of-type a.button.is-outline { background-color: #FF8A00 !important; border-color: #FF8A00 !important; color: #ffffff !important; } body.home #main section.section:last-of-type a.button.is-outline:hover { background-color: #F58400 !important; border-color: #F58400 !important; color: #ffffff !important; } /* Nút CHAT ZALO (button solid) — xanh thương hiệu */ body.home #main section.section:last-of-type a.button:not(.is-outline) { background-color: #0A1F44 !important; border-color: #0A1F44 !important; color: #ffffff !important; } body.home #main section.section:last-of-type a.button:not(.is-outline):hover { background-color: #102A5C !important; border-color: #102A5C !important; color: #ffffff !important; } /* ============================================ PTH HOMEPAGE B2B (TEST PAGE ID 4669) Scoped to .page-id-4669 only - won't affect live homepage or other pages ============================================ */ .page-id-4669 .entry-content, .page-id-4669 .page-wrapper, .page-id-4669 .container { max-width:none !important; padding:0 !important; } .page-id-4669 .pth-home { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; color:#1A1B50; line-height:1.6; } .page-id-4669 .pth-home h1, .page-id-4669 .pth-home h2, .page-id-4669 .pth-home h3 { font-family: Montserrat, -apple-system, sans-serif; color:#0A1F44; margin:0; } /* Exception: override h2 color in dark sections */ .page-id-4669 .pth-home .pth-onesource h2, .page-id-4669 .pth-home .pth-onesource-head h2 { color: #ffffff; } .page-id-4669 .pth-home section { padding:60px 24px; } .page-id-4669 .pth-home section + section { border-top:1px solid #eef2ee; } /* === SECTION 1: HERO === */ .page-id-4669 .pth-hero { background: linear-gradient(135deg,#0A1F44 0%,#1B3D7A 100%); color:#fff; padding:80px 24px !important; } .page-id-4669 .pth-hero-inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:center; } .page-id-4669 .pth-hero h1 { color:#fff; font-size:42px; line-height:1.2; margin-bottom:20px; font-weight:800; } .page-id-4669 .pth-hero-desc { font-size:17px; color:rgba(255,255,255,.9); margin-bottom:32px; } .page-id-4669 .pth-hero-desc strong { color:#fff; font-weight:700; } .page-id-4669 .pth-hero-cta { display:flex; flex-wrap:wrap; gap:14px; } .page-id-4669 .pth-btn { display:inline-block; padding:16px 28px; border-radius:8px; font-weight:700; font-size:15px; text-decoration:none; transition:all .2s; line-height:1; } .page-id-4669 .pth-btn-primary { background:#fff; color:#0A1F44; } .page-id-4669 .pth-btn-primary:hover { background:#fff7d6; transform:translateY(-2px); } .page-id-4669 .pth-btn-outline { background:transparent; color:#fff; border:2px solid rgba(255,255,255,.6); } .page-id-4669 .pth-btn-outline:hover { border-color:#fff; background:rgba(255,255,255,.1); } .page-id-4669 .pth-hero-placeholder { background:rgba(255,255,255,.08); border:2px dashed rgba(255,255,255,.3); border-radius:16px; padding:60px 24px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px; } .page-id-4669 .pth-ph-icon { font-size:80px; } .page-id-4669 .pth-ph-text { font-size:16px; font-weight:600; color:#fff; } .page-id-4669 .pth-ph-note { font-size:12px; color:rgba(255,255,255,.6); font-style:italic; } /* === SECTION 2: TRUST BAR === */ .page-id-4669 .pth-trust { background:#f7faf8; padding:48px 24px !important; } .page-id-4669 .pth-trust-grid { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(6,1fr); gap:24px; } .page-id-4669 .pth-trust-item { background:#fff; padding:24px 16px; border-radius:12px; text-align:center; box-shadow:0 2px 8px rgba(0,0,0,.04); border:1px solid #eef2ee; } .page-id-4669 .pth-trust-num { font-size:36px; font-weight:800; color:#0A1F44; line-height:1; margin-bottom:8px; } .page-id-4669 .pth-trust-label { font-size:14px; color:#1E386E; font-weight:500; } /* === SECTION 3: VẤN ĐỀ === */ .page-id-4669 .pth-problems { background:#fff; } .page-id-4669 .pth-problems h2, .page-id-4669 .pth-solutions h2, .page-id-4669 .pth-rfq h2 { font-size:32px; text-align:center; margin-bottom:16px; max-width:900px; margin-left:auto; margin-right:auto; } .page-id-4669 .pth-problems-intro, .page-id-4669 .pth-solutions-intro { max-width:900px; margin:0 auto 36px; text-align:center; color:#102A5C; font-size:16px; } .page-id-4669 .pth-problems-grid { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .page-id-4669 .pth-problem-card { background:#fff; border:1px solid #e5ebe7; border-radius:12px; padding:20px 16px; text-decoration:none; color:#1A1B50; transition:all .2s; display:flex; flex-direction:column; gap:6px; min-height:140px; } .page-id-4669 .pth-problem-card:hover { border-color:#0A1F44; box-shadow:0 6px 18px rgba(23,58,106,.12); transform:translateY(-3px); } .page-id-4669 .pth-prob-icon { font-size:32px; } .page-id-4669 .pth-problem-card strong { font-size:15px; font-weight:700; color:#0A1F44; } .page-id-4669 .pth-problem-card span { font-size:13px; color:#102A5C; line-height:1.5; } .page-id-4669 .pth-problem-cta { background:linear-gradient(135deg,#0A1F44 0%,#0A1F44 100%); border-color:transparent; color:#fff; } .page-id-4669 .pth-problem-cta strong, .page-id-4669 .pth-problem-cta span { color:#fff; } .page-id-4669 .pth-problem-cta:hover { color:#fff; } /* === SECTION 4: 4 GIẢI PHÁP === */ .page-id-4669 .pth-solutions { background:#f7faf8; } .page-id-4669 .pth-solutions-grid { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .page-id-4669 .pth-sol-card { background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.05); display:flex; flex-direction:column; transition:all .2s; } .page-id-4669 .pth-sol-card:hover { transform:translateY(-4px); box-shadow:0 10px 28px rgba(0,0,0,.1); } .page-id-4669 .pth-sol-img { background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%); height:200px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; overflow:hidden; padding:16px; margin:12px 12px 0; border-radius:14px; } .page-id-4669 .pth-sol-img img { width:100% !important; height:100% !important; object-fit:contain !important; border-radius:8px !important; } .page-id-4669 .pth-sol-img span { font-size:54px; } .page-id-4669 .pth-sol-img em { font-size:11px; color:#1B3D7A; font-style:italic; } .page-id-4669 .pth-sol-card h3 { font-size:18px; padding:18px 18px 8px; } .page-id-4669 .pth-sol-card p { padding:0 18px; font-size:14px; color:#102A5C; flex:1; margin:0 0 14px; } .page-id-4669 .pth-sol-link { display:block; padding:14px 18px; background:#0A1F44; color:#fff; text-align:center; text-decoration:none; font-weight:700; font-size:14px; transition:background .2s; } .page-id-4669 .pth-sol-link:hover { background:#0A1F44; color:#fff; } /* === SECTION 13: FORM RFQ === */ .page-id-4669 .pth-rfq { background:#fff; } .page-id-4669 .pth-rfq-intro { max-width:800px; margin:0 auto 32px; text-align:center; color:#102A5C; font-size:16px; } .page-id-4669 .pth-rfq form.wpcf7-form { max-width:900px; margin:0 auto; } .page-id-4669 .pth-rfq .pth-rfq-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .page-id-4669 .pth-rfq label { display:block; font-weight:600; color:#0A1F44; margin-bottom:6px; font-size:14px; } .page-id-4669 .pth-rfq input[type="text"], .page-id-4669 .pth-rfq input[type="email"], .page-id-4669 .pth-rfq input[type="tel"], .page-id-4669 .pth-rfq select, .page-id-4669 .pth-rfq textarea { width:100%; padding:12px 14px; border:1.5px solid #d5dfd9; border-radius:8px; font-size:14px; background:#fff; transition:border-color .2s; } .page-id-4669 .pth-rfq input:focus, .page-id-4669 .pth-rfq select:focus, .page-id-4669 .pth-rfq textarea:focus { border-color:#0A1F44; outline:none; box-shadow:0 0 0 3px rgba(23,58,106,.1); } .page-id-4669 .pth-rfq .req { color:#d63638; } .page-id-4669 .pth-rfq .pth-rfq-submit { text-align:center; margin-top:24px; } .page-id-4669 .pth-rfq input[type="submit"], .page-id-4669 .pth-rfq button[type="submit"] { background:linear-gradient(135deg,#0A1F44 0%,#0A1F44 100%); color:#fff; border:none; padding:16px 48px; font-size:16px; font-weight:700; border-radius:10px; cursor:pointer; letter-spacing:.5px; transition:all .2s; } .page-id-4669 .pth-rfq input[type="submit"]:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(23,58,106,.3); } /* === SECTION 14: CTA CUỐI === */ .page-id-4669 .pth-final-cta { background:linear-gradient(135deg,#0A1F44 0%,#0A1F44 50%,#0A1F44 100%); color:#fff; text-align:center; padding:70px 24px !important; } .page-id-4669 .pth-final-cta h2 { color:#fff; font-size:30px; max-width:800px; margin:0 auto 16px; } .page-id-4669 .pth-final-cta p { max-width:700px; margin:0 auto 36px; font-size:16px; color:rgba(255,255,255,.92); } .page-id-4669 .pth-final-cta-buttons { max-width:900px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .page-id-4669 .pth-fcta-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:22px 16px; border-radius:12px; text-decoration:none; transition:all .2s; font-weight:700; } .page-id-4669 .pth-fcta-btn strong { font-size:18px; } .page-id-4669 .pth-fcta-btn span { font-size:13px; font-weight:500; opacity:.9; } .page-id-4669 .pth-fcta-call { background:#0A1F44; color:#fff; } .page-id-4669 .pth-fcta-call:hover { background:#102A5C; color:#fff; transform:translateY(-2px); } .page-id-4669 .pth-fcta-zalo { background:#0080ff; color:#fff; } .page-id-4669 .pth-fcta-zalo:hover { background:#1894ff; color:#fff; transform:translateY(-2px); } .page-id-4669 .pth-fcta-form { background:#fff; color:#0A1F44; border:2px solid #fff; } .page-id-4669 .pth-fcta-form:hover { background:#fff7d6; transform:translateY(-2px); } /* === MOBILE RESPONSIVE === */ @media(max-width:960px){ .page-id-4669 .pth-hero-inner { grid-template-columns:1fr; gap:32px; } .page-id-4669 .pth-hero h1 { font-size:32px; } .page-id-4669 .pth-trust-grid { grid-template-columns:repeat(2,1fr); } .page-id-4669 .pth-problems-grid { grid-template-columns:repeat(2,1fr); } .page-id-4669 .pth-solutions-grid { grid-template-columns:repeat(2,1fr); } .page-id-4669 .pth-final-cta-buttons { grid-template-columns:1fr; } .page-id-4669 .pth-rfq .pth-rfq-row { grid-template-columns:1fr; } } @media(max-width:640px){ .page-id-4669 .pth-home section { padding:40px 16px; } .page-id-4669 .pth-hero { padding:50px 16px !important; } .page-id-4669 .pth-hero h1 { font-size:26px; } .page-id-4669 .pth-trust-grid { grid-template-columns:1fr 1fr; } .page-id-4669 .pth-problems-grid { grid-template-columns:1fr; } .page-id-4669 .pth-solutions-grid { grid-template-columns:1fr; } .page-id-4669 .pth-problems h2, .page-id-4669 .pth-solutions h2, .page-id-4669 .pth-rfq h2, .page-id-4669 .pth-final-cta h2 { font-size:24px; } } /* === END HOMEPAGE B2B === */ /* FIX hide auto br in grids */ .page-id-4669 .pth-final-cta-buttons br, .page-id-4669 .pth-problems-grid br, .page-id-4669 .pth-solutions-grid br, .page-id-4669 .pth-trust-grid br, .page-id-4669 .pth-hero-cta br { display:none !important; } /* ============================================== */ /* PTH HOMEPAGE B2B - PHASE 2 (Page 4669) */ /* ============================================== */ .page-id-4669 .pth-industry, .page-id-4669 .pth-products, .page-id-4669 .pth-capacity, .page-id-4669 .pth-cases, .page-id-4669 .pth-process, .page-id-4669 .pth-docs, .page-id-4669 .pth-blog, .page-id-4669 .pth-faq { padding: 60px 20px; max-width: 1200px; margin: 0 auto; } .page-id-4669 .pth-sec-head { text-align: center; margin-bottom: 40px; } .page-id-4669 .pth-sec-head h2 { font-size: 30px; color: #0A1F44; margin: 0 0 10px; font-weight: 700; } .page-id-4669 .pth-sec-head p { font-size: 16px; color: #555; max-width: 720px; margin: 0 auto; } /* Industry */ .page-id-4669 .pth-industry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .page-id-4669 .pth-ind-card { background: #fff; border: 1px solid #e3e8e3; border-radius: 12px; padding: 24px; transition: all .25s; } .page-id-4669 .pth-ind-card:hover { border-color: #0A1F44; box-shadow: 0 8px 24px rgba(26,58,106,.10); transform: translateY(-3px); } .page-id-4669 .pth-ind-icon { font-size: 36px; margin-bottom: 10px; } .page-id-4669 .pth-ind-card h3 { font-size: 18px; color: #0A1F44; margin: 0 0 10px; font-weight: 700; } .page-id-4669 .pth-ind-card ul { margin: 0; padding-left: 18px; } .page-id-4669 .pth-ind-card ul li { font-size: 14px; color: #444; margin-bottom: 4px; } /* Industry card with image */ .page-id-4669 .pth-ind-card.has-image { padding: 0; overflow: hidden; } .page-id-4669 .pth-ind-card.has-image .pth-ind-icon { margin: 0; height: 180px; overflow: hidden; position: relative; } .page-id-4669 .pth-ind-card.has-image .pth-ind-icon img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .page-id-4669 .pth-ind-card.has-image:hover .pth-ind-icon img { transform: scale(1.06); } .page-id-4669 .pth-ind-card.has-image .pth-ind-icon::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: linear-gradient(180deg, transparent 0%, rgba(10,31,68,.55) 100%); pointer-events: none; } .page-id-4669 .pth-ind-card.has-image h3 { padding: 16px 20px 0; } .page-id-4669 .pth-ind-card.has-image ul { padding: 0 20px 20px 38px; margin-top: 8px; } .page-id-4669 .pth-ind-card.has-image { border-radius: 18px; } /* Products */ .page-id-4669 .pth-prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .page-id-4669 .pth-prod-card { display: block; background: #fff; border: 1px solid #e3e8e3; border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; transition: all .25s; } .page-id-4669 .pth-prod-card:hover { border-color: #0A1F44; transform: translateY(-3px); box-shadow: 0 8px 22px rgba(26,58,106,.10); } .page-id-4669 .pth-prod-img { height: 180px; background: linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%); display: flex; align-items: center; justify-content: center; color: #1B3D7A; font-size: 13px; font-style: italic; overflow: hidden; padding: 14px; margin: 12px 12px 0; border-radius: 12px; } .page-id-4669 .pth-prod-img img { width: 100% !important; height: 100% !important; object-fit: contain !important; transition: transform .35s ease; border-radius: 6px; } .page-id-4669 .pth-prod-card { border-radius: 16px !important; overflow: hidden; transition: all .25s; } .page-id-4669 .pth-prod-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.08); } .page-id-4669 .pth-prod-card:hover .pth-prod-img img { transform: scale(1.06); } .page-id-4669 .pth-prod-card h3 { font-size: 15px; color: #0A1F44; margin: 14px 14px 6px; font-weight: 700; } .page-id-4669 .pth-prod-card p { font-size: 13px; color: #666; margin: 0 14px 14px; } /* Capacity */ .page-id-4669 .pth-capacity { background: #f6faf6; border-radius: 16px; } .page-id-4669 .pth-cap-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; } .page-id-4669 .pth-cap-item { text-align: center; background: #fff; padding: 24px 14px; border-radius: 12px; border: 1px solid #e3e8e3; } .page-id-4669 .pth-cap-num { font-size: 30px; font-weight: 800; color: #0A1F44; margin-bottom: 8px; line-height: 1; } .page-id-4669 .pth-cap-lbl { font-size: 13px; color: #555; line-height: 1.4; } /* Cases */ .page-id-4669 .pth-case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .page-id-4669 .pth-case-card { background: #fff; border: 1px solid #e3e8e3; border-radius: 12px; overflow: hidden; } .page-id-4669 .pth-case-img { height: 160px; background: linear-gradient(135deg,#e8f1e8,#1B3D7A); display: flex; align-items: center; justify-content: center; color: #1B3D7A; font-size: 13px; font-style: italic; } .page-id-4669 .pth-case-card h3 { font-size: 16px; color: #0A1F44; margin: 16px 18px 8px; font-weight: 700; } .page-id-4669 .pth-case-card p { font-size: 14px; color: #555; margin: 0 18px 18px; } /* Process */ .page-id-4669 .pth-proc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .page-id-4669 .pth-proc-step { background: #fff; border: 1px solid #e3e8e3; border-left: 4px solid #0A1F44; border-radius: 10px; padding: 22px 22px 22px 18px; position: relative; } .page-id-4669 .pth-proc-num { position: absolute; top: 14px; right: 18px; width: 36px; height: 36px; line-height: 36px; text-align: center; background: #0A1F44; color: #fff; font-weight: 800; border-radius: 50%; font-size: 16px; } .page-id-4669 .pth-proc-step h3 { font-size: 17px; color: #0A1F44; margin: 0 50px 8px 0; font-weight: 700; } .page-id-4669 .pth-proc-step p { font-size: 14px; color: #555; margin: 0; } /* Docs */ .page-id-4669 .pth-doc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .page-id-4669 .pth-doc-card { display: flex; align-items: center; gap: 16px; background: #fff; border: 2px dashed #1B3D7A; border-radius: 12px; padding: 18px 20px; text-decoration: none; color: inherit; transition: all .25s; } .page-id-4669 .pth-doc-card:hover { border-color: #0A1F44; border-style: solid; background: #f6faf6; } .page-id-4669 .pth-doc-icon { font-size: 30px; flex-shrink: 0; } .page-id-4669 .pth-doc-card h3 { font-size: 15px; color: #0A1F44; margin: 0 0 4px; font-weight: 700; } .page-id-4669 .pth-doc-card p { font-size: 13px; color: #666; margin: 0; } /* Blog */ .page-id-4669 .pth-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .page-id-4669 .pth-blog-card { display: block; background: #fff; border: 1px solid #e3e8e3; border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; transition: all .25s; } .page-id-4669 .pth-blog-card:hover { border-color: #0A1F44; transform: translateY(-3px); box-shadow: 0 8px 22px rgba(26,58,106,.08); } .page-id-4669 .pth-blog-img { height: 150px; background: linear-gradient(135deg,#eaf3ea,#1B3D7A); display: flex; align-items: center; justify-content: center; color: #1B3D7A; font-size: 13px; font-style: italic; } .page-id-4669 .pth-blog-card h3 { font-size: 16px; color: #0A1F44; margin: 14px 18px 8px; font-weight: 700; line-height: 1.4; } .page-id-4669 .pth-blog-card span { display: inline-block; margin: 0 18px 18px; color: #0A1F44; font-size: 14px; font-weight: 600; } /* FAQ */ .page-id-4669 .pth-faq-list { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .page-id-4669 .pth-faq-item { background: #fff; border: 1px solid #e3e8e3; border-radius: 10px; padding: 0; overflow: hidden; } .page-id-4669 .pth-faq-item summary { cursor: pointer; padding: 16px 20px; font-weight: 700; color: #0A1F44; font-size: 15px; list-style: none; position: relative; padding-right: 44px; } .page-id-4669 .pth-faq-item summary::-webkit-details-marker { display: none; } .page-id-4669 .pth-faq-item summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 22px; color: #0A1F44; font-weight: 400; } .page-id-4669 .pth-faq-item[open] summary::after { content: "−"; } .page-id-4669 .pth-faq-item p { margin: 0; padding: 0 20px 18px; font-size: 14px; color: #444; line-height: 1.6; } /* Mobile responsive Phase 2 */ @media (max-width: 900px) { .page-id-4669 .pth-industry-grid, .page-id-4669 .pth-prod-grid, .page-id-4669 .pth-cap-grid, .page-id-4669 .pth-case-grid, .page-id-4669 .pth-proc-grid, .page-id-4669 .pth-doc-grid, .page-id-4669 .pth-blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .page-id-4669 .pth-industry-grid, .page-id-4669 .pth-prod-grid, .page-id-4669 .pth-case-grid, .page-id-4669 .pth-proc-grid, .page-id-4669 .pth-doc-grid, .page-id-4669 .pth-blog-grid { grid-template-columns: 1fr; } .page-id-4669 .pth-cap-grid { grid-template-columns: repeat(2, 1fr); } .page-id-4669 .pth-sec-head h2 { font-size: 24px; } .page-id-4669 .pth-industry, .page-id-4669 .pth-products, .page-id-4669 .pth-capacity, .page-id-4669 .pth-cases, .page-id-4669 .pth-process, .page-id-4669 .pth-docs, .page-id-4669 .pth-blog, .page-id-4669 .pth-faq { padding: 40px 16px; } } /* PHASE 2 wpautop fix - hide empty p/br in grids */ .page-id-4669 .pth-industry-grid > p, .page-id-4669 .pth-industry-grid > br, .page-id-4669 .pth-prod-grid > p, .page-id-4669 .pth-prod-grid > br, .page-id-4669 .pth-cap-grid > p, .page-id-4669 .pth-cap-grid > br, .page-id-4669 .pth-case-grid > p, .page-id-4669 .pth-case-grid > br, .page-id-4669 .pth-proc-grid > p, .page-id-4669 .pth-proc-grid > br, .page-id-4669 .pth-doc-grid > p, .page-id-4669 .pth-doc-grid > br, .page-id-4669 .pth-blog-grid > p, .page-id-4669 .pth-blog-grid > br, .page-id-4669 .pth-faq-list > p, .page-id-4669 .pth-faq-list > br { display: none !important; } /* Phase 2 - Fix doc-card layout (icon left, text stacked right) */ .page-id-4669 .pth-doc-card { display: grid !important; grid-template-columns: 40px 1fr; align-items: center; column-gap: 16px; } .page-id-4669 .pth-doc-card .pth-doc-icon { grid-column: 1; grid-row: 1 / span 2; } .page-id-4669 .pth-doc-card h3 { grid-column: 2; grid-row: 1; } .page-id-4669 .pth-doc-card p { grid-column: 2; grid-row: 2; } /* Phase 2 - Add "Read more" pseudo to blog card */ .page-id-4669 .pth-blog-card { position: relative; padding-bottom: 38px; } .page-id-4669 .pth-blog-card::after { content: "Đọc tiếp →"; position: absolute; left: 18px; bottom: 14px; color: #0A1F44; font-size: 14px; font-weight: 600; } .page-id-4669 .pth-blog-card span { display: none; } /* Hero - giữ navy gradient nhẹ Phương án 2 anh đã thích */ html body.page-id-4669 .pth-hero{ background: linear-gradient(135deg,#0A1F44 0%,#1B3D7A 100%) !important; } /* Các section nền navy - dùng SOLID color, không gradient để dịu mắt */ html body.page-id-4669 .pth-capacity, html body.page-id-4669 .pth-final-cta, html body.page-id-4669 .pth-closer{ background: #0A1F44 !important; background-image: none !important; } /* Tiêu đề trắng trên nền navy */ html body.page-id-4669 .pth-capacity h2, html body.page-id-4669 .pth-capacity h3, html body.page-id-4669 .pth-final-cta h2, html body.page-id-4669 .pth-final-cta h3, html body.page-id-4669 .pth-closer h2, html body.page-id-4669 .pth-closer h3{ color:#FFFFFF !important; } /* Card trong .pth-capacity - viền nhẹ trên nền navy */ html body.page-id-4669 .pth-capacity .col, html body.page-id-4669 .pth-capacity [class*="card"]{ border:1px solid rgba(255,255,255,0.15) !important; } /* Section nền sáng - đổi sang xanh nhạt phụ */ html body.page-id-4669 .section.bg-light, html body.page-id-4669 .section[class*="light"]{ background:#EAF2FB !important; } /* Tiêu đề h2/h3 trên nền sáng - dùng navy đậm */ html body.page-id-4669 .section:not(.pth-hero):not(.pth-capacity):not(.pth-final-cta):not(.pth-closer) h2, html body.page-id-4669 .section:not(.pth-hero):not(.pth-capacity):not(.pth-final-cta):not(.pth-closer) h3{ color:#0E274A !important; } /* Nội dung text trên nền trắng */ html body.page-id-4669 .section:not(.pth-hero):not(.pth-capacity):not(.pth-final-cta):not(.pth-closer) p{ color:#4B5563 !important; } /* CTA button cam */ html body.page-id-4669 .button.primary, html body.page-id-4669 a.button.primary, html body.page-id-4669 .pth-hero .button:not(.is-outline){ background:#FF9900 !important; border-color:#FF9900 !important; color:#fff !important; } html body.page-id-4669 .button.primary:hover, html body.page-id-4669 a.button.primary:hover{ background:#E68A00 !important; border-color:#E68A00 !important; } /* Card / box kỹ thuật trên nền sáng - viền nhẹ */ html body.page-id-4669 .section:not(.pth-capacity):not(.pth-final-cta):not(.pth-closer) .col-inner > .box, html body.page-id-4669 .section:not(.pth-capacity):not(.pth-final-cta):not(.pth-closer) [class*="card"]{ border:1px solid #D9E4F2 !important; } /* === END PTH NAVY PALETTE v4 === */ /* === PTH NAVY v4 OVERRIDE for pth-brand-colors inline style === */ html body.page-id-4669 .pth-capacity.pth-capacity{background:#0A1F44 !important;background-image:none !important;color:#fff !important} html body.page-id-4669 .pth-capacity.pth-capacity .pth-cap-num{color:#FF9900 !important} html body.page-id-4669 .pth-capacity.pth-capacity .pth-cap-card, html body.page-id-4669 .pth-capacity.pth-capacity [class*="card"], html body.page-id-4669 .pth-capacity.pth-capacity .col-inner > div{background:rgba(255,255,255,0.06) !important;border:1px solid rgba(255,255,255,0.18) !important} html body.page-id-4669 .pth-final-cta.pth-final-cta{background:#0A1F44 !important;background-image:none !important} html body.page-id-4669 .pth-closer.pth-closer{background:#0A1F44 !important;background-image:none !important} /* === Sản phẩm tiêu biểu - card layout === */ .page-id-4669 .pth-prod-grid{display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:18px !important}@media (max-width:900px){.page-id-4669 .pth-prod-grid{grid-template-columns:repeat(2,1fr) !important}}@media (max-width:540px){.page-id-4669 .pth-prod-grid{grid-template-columns:1fr !important}}.page-id-4669 .pth-prod-card{display:flex;flex-direction:column;background:#fff;border:1px solid #e3e8e3;border-radius:16px !important;overflow:hidden;transition:.25s;text-align:left}.page-id-4669 .pth-prod-card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.08);border-color:#0A1F44}.page-id-4669 .pth-prod-card .pth-prod-img{height:180px !important;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f8f9fa,#e9ecef);overflow:hidden;margin:0 !important;padding:0 !important}.page-id-4669 .pth-prod-card .pth-prod-img img{width:100% !important;height:100% !important;object-fit:contain !important;transition:transform .35s}.page-id-4669 .pth-prod-card:hover .pth-prod-img img{transform:scale(1.06)}.page-id-4669 .pth-prod-card h3{font-size:15px !important;color:#0A1F44 !important;margin:14px 14px 6px !important;font-weight:700 !important;text-align:left}.page-id-4669 .pth-prod-card .pth-prod-desc{font-size:13px;color:#666;margin:0 14px 10px}.page-id-4669 .pth-prod-card .pth-prod-toggle{display:inline-flex;align-items:center;gap:6px;margin:0 14px 14px;padding:7px 12px;border-radius:30px;background:#FFF6E5;color:#B35A00;font-size:12px;font-weight:600;border:1px solid #FFD699;cursor:pointer;transition:.2s;font-family:inherit;width:fit-content}.page-id-4669 .pth-prod-card .pth-prod-toggle:hover{background:#FFB000;color:#fff;border-color:#FFB000}.page-id-4669 .pth-prod-card.is-open .pth-prod-toggle{background:#0A1F44;color:#fff;border-color:#0A1F44}.page-id-4669 .pth-prod-card .pth-prod-details{max-height:0;overflow:hidden;transition:max-height .35s ease;padding:0 14px;background:#f7faf8;border-top:1px solid transparent}.page-id-4669 .pth-prod-card.is-open .pth-prod-details{max-height:360px;padding:14px;border-top:1px solid #e3e8e3}.page-id-4669 .pth-prod-card .pth-prod-details ul{list-style:none !important;margin:0 !important;padding:0 !important}.page-id-4669 .pth-prod-card .pth-prod-details li{font-size:12.5px;color:#1E2850;padding:4px 0;line-height:1.5;list-style:none;margin:0}.page-id-4669 .pth-prod-card .pth-prod-cta-row{display:flex;gap:8px;margin:auto 14px 14px 14px}.page-id-4669 .pth-prod-card .pth-prod-cta-row a{flex:1;text-align:center;padding:9px 8px;border-radius:8px;font-size:12px;font-weight:600;text-decoration:none;transition:.2s;line-height:1.2}.page-id-4669 .pth-prod-card .pth-cta-quote{background:#FF8A00 !important;color:#fff !important;border:1px solid #FF8A00 !important}.page-id-4669 .pth-prod-card .pth-cta-quote:hover{background:#E67700 !important;border-color:#E67700 !important}.page-id-4669 .pth-prod-card .pth-cta-call{background:#fff !important;color:#0A1F44 !important;border:1px solid #0A1F44 !important}.page-id-4669 .pth-prod-card .pth-cta-call:hover{background:#0A1F44 !important;color:#fff !important} /* === Fix nowrap nút XEM THÔNG SỐ === */ .page-id-4669 .pth-prod-card .pth-prod-toggle{white-space:nowrap !important;padding:8px 14px !important} /* === end Fix 3 === */ /* === FIX HEADER PADDING HOMEPAGE (page-id-4669) === Khoi phuc padding hai ben cho header tren trang chu de logo va nut Lien He Tu Van khong sat mep ================================================== */ .page-id-4669 .header-main .container, .page-id-4669 .header-bottom .container, .page-id-4669 .header-top .container, .page-id-4669 #header .container { padding-left: 15px !important; padding-right: 15px !important; max-width: 1270px !important; } .page-id-4669 .pth-prod-card .pth-flip-back h3, .page-id-4669 .pth-prod-card .pth-flip-back h2, .page-id-4669 .pth-prod-card .pth-flip-back-title { color: #FFFFFF !important; } /* === PTH FLIP CARD - MOBILE TAP HANDLER === Mobile tap handled by JS injected in page content Mobile tap will be handled by inline JS added separately. =========================================== */ /* === PTH All-White Clean v1 - Khung anh Giai phap cot loi === */ .page-id-4669 .pth-sol-card { background:#ffffff !important; border:1px solid #ECEFF3 !important; border-radius:14px !important; box-shadow:0 2px 10px rgba(10,31,68,.04) !important; position:relative !important; overflow:hidden !important; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease !important; } .page-id-4669 .pth-sol-card::before { display:none !important; } .page-id-4669 .pth-sol-card::after { display:none !important; } .page-id-4669 .pth-sol-card:hover { transform: translateY(-4px) !important; box-shadow:0 12px 28px rgba(10,31,68,.08) !important; border-color:#DDE2E8 !important; } .page-id-4669 .pth-sol-img { background:#ffffff !important; border:none !important; box-shadow:none !important; border-radius:0 !important; margin:0 !important; height:240px !important; padding:0 !important; position:relative !important; overflow:hidden !important; border-bottom:1px solid #F2F4F7 !important; display:flex !important; align-items:center !important; justify-content:center !important; } .page-id-4669 .pth-sol-img::before { display:none !important; } .page-id-4669 .pth-sol-img::after { display:none !important; } .page-id-4669 .pth-sol-img img { position:relative !important; z-index:2 !important; width:128% !important; height:128% !important; max-width:128% !important; max-height:128% !important; margin:0 !important; object-fit:contain !important; object-position:center !important; mix-blend-mode: normal !important; -webkit-clip-path: inset(11% 11% 11% 11%) !important; clip-path: inset(11% 11% 11% 11%) !important; transition: transform .4s ease !important; } .page-id-4669 .pth-sol-card:hover .pth-sol-img img { transform: scale(1.04); } @media (max-width:767px){ .page-id-4669 .pth-sol-img { height:200px !important; } } /* === END All-White Clean === */ /* === PTH Premium CTA v3 - Brand Hierarchy + Icons + Stripe Polish === */ .page-id-4669 .pth-final-cta-buttons { display:flex !important; gap:14px !important; align-items:stretch !important; flex-wrap:wrap !important; max-width:1100px !important; margin:0 auto !important; } .page-id-4669 .pth-final-cta-buttons .pth-fcta-btn { flex:1 1 0 !important; min-width:240px !important; display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-start !important; gap:14px !important; border-radius:14px !important; padding:16px 22px 16px 18px !important; min-height:74px !important; font-family:'Inter','Segoe UI','SF Pro Display',-apple-system,sans-serif !important; font-weight:600 !important; font-size:13px !important; text-align:left !important; text-decoration:none !important; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, background .35s ease, border-color .35s ease, filter .35s ease !important; border:1.5px solid transparent !important; letter-spacing:.1px !important; position:relative !important; overflow:hidden !important; white-space:normal !important; } /* Icon box - dùng pseudo ::after, đặt order:-1 để xuất hiện đầu tiên */ .page-id-4669 .pth-fcta-btn::after { content:""; flex-shrink:0; width:42px; height:42px; border-radius:10px; order:-1; background-position:center; background-repeat:no-repeat; background-size:22px 22px; transition: all .35s ease; } .page-id-4669 .pth-fcta-btn br { display:none !important; } .page-id-4669 .pth-fcta-btn strong { display:block !important; font-size:16px !important; font-weight:700 !important; letter-spacing:.2px !important; margin:0 0 1px 0 !important; line-height:1.25 !important; } /* === NUT 1 PRIMARY: Cam premium === */ .page-id-4669 .pth-fcta-btn.pth-fcta-call { background: linear-gradient(135deg, #FF7A00 0%, #F5A623 55%, #FFB949 100%) !important; box-shadow: 0 1px 0 0 rgba(255,255,255,.30) inset, 0 -1px 0 0 rgba(0,0,0,.10) inset, 0 8px 22px -4px rgba(245,166,35,.55), 0 4px 8px -2px rgba(255,122,0,.30) !important; border-color: rgba(255,255,255,.18) !important; } .page-id-4669 .pth-fcta-btn.pth-fcta-call, .page-id-4669 .pth-fcta-btn.pth-fcta-call * { color:#ffffff !important; } .page-id-4669 .pth-fcta-btn.pth-fcta-call::after { background-color: rgba(255,255,255,.22); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72%2012.84%2012.84%200%200%200%20.7%202.81%202%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45%2012.84%2012.84%200%200%200%202.81.7A2%202%200%200%201%2022%2016.92z%22%2F%3E%3C%2Fsvg%3E"); } .page-id-4669 .pth-fcta-btn.pth-fcta-call:hover { transform: translateY(-2px) !important; box-shadow: 0 1px 0 0 rgba(255,255,255,.35) inset, 0 -1px 0 0 rgba(0,0,0,.10) inset, 0 14px 32px -4px rgba(245,166,35,.65), 0 6px 12px -2px rgba(255,122,0,.40) !important; filter: brightness(1.04); } .page-id-4669 .pth-fcta-btn.pth-fcta-call::before { content:""; position:absolute; inset:0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.20) 50%, transparent 70%); transform: translateX(-100%); transition: transform .8s ease; pointer-events:none; z-index:1; } .page-id-4669 .pth-fcta-btn.pth-fcta-call:hover::before { transform: translateX(100%); } /* === NUT 2 SECONDARY: Trang === */ .page-id-4669 .pth-fcta-btn.pth-fcta-zalo { background: #ffffff !important; border-color: rgba(255,255,255,.30) !important; box-shadow: 0 1px 0 0 rgba(255,255,255,1) inset, 0 4px 14px -4px rgba(0,0,0,.18), 0 2px 4px -2px rgba(0,0,0,.10) !important; } .page-id-4669 .pth-fcta-btn.pth-fcta-zalo, .page-id-4669 .pth-fcta-btn.pth-fcta-zalo * { color:#0A1F44 !important; } .page-id-4669 .pth-fcta-btn.pth-fcta-zalo::after { background-color: #E8EFF7 !important; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230A1F44%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2011.5a8.38%208.38%200%200%201-.9%203.8%208.5%208.5%200%200%201-7.6%204.7%208.38%208.38%200%200%201-3.8-.9L3%2021l1.9-5.7a8.38%208.38%200%200%201-.9-3.8%208.5%208.5%200%200%201%204.7-7.6%208.38%208.38%200%200%201%203.8-.9h.5a8.48%208.48%200%200%201%208%208v.5z%22%2F%3E%3C%2Fsvg%3E") !important; } .page-id-4669 .pth-fcta-btn.pth-fcta-zalo:hover { background: #FAFCFE !important; transform: translateY(-2px) !important; box-shadow: 0 1px 0 0 rgba(255,255,255,1) inset, 0 10px 24px -4px rgba(0,0,0,.22), 0 4px 8px -2px rgba(0,0,0,.12) !important; } /* === NUT 3 GHOST: Glassmorphism === */ .page-id-4669 .pth-fcta-btn.pth-fcta-form { background: rgba(255,255,255,.05) !important; backdrop-filter: blur(10px) saturate(140%) !important; -webkit-backdrop-filter: blur(10px) saturate(140%) !important; border-color: rgba(255,255,255,.20) !important; box-shadow: 0 1px 0 0 rgba(255,255,255,.10) inset, 0 4px 12px -4px rgba(0,0,0,.20) !important; } .page-id-4669 .pth-fcta-btn.pth-fcta-form, .page-id-4669 .pth-fcta-btn.pth-fcta-form * { color:#ffffff !important; } .page-id-4669 .pth-fcta-btn.pth-fcta-form::after { background-color: rgba(255,255,255,.10); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z%22%2F%3E%3Cpolyline%20points%3D%2214%202%2014%208%2020%208%22%2F%3E%3Cline%20x1%3D%229%22%20y1%3D%2213%22%20x2%3D%2215%22%20y2%3D%2213%22%2F%3E%3Cline%20x1%3D%229%22%20y1%3D%2217%22%20x2%3D%2215%22%20y2%3D%2217%22%2F%3E%3C%2Fsvg%3E"); border:1px solid rgba(255,255,255,.12); } .page-id-4669 .pth-fcta-btn.pth-fcta-form:hover { background: rgba(255,255,255,.10) !important; border-color: rgba(255,255,255,.35) !important; transform: translateY(-2px) !important; box-shadow: 0 1px 0 0 rgba(255,255,255,.15) inset, 0 10px 22px -4px rgba(0,0,0,.30) !important; } @media (max-width:767px){ .page-id-4669 .pth-final-cta-buttons { gap:10px !important; flex-direction:column !important; } .page-id-4669 .pth-final-cta-buttons .pth-fcta-btn { min-height:64px !important; padding:14px 18px 14px 14px !important; min-width:100% !important; } .page-id-4669 .pth-fcta-btn::after { width:38px; height:38px; background-size:19px 19px; } .page-id-4669 .pth-fcta-btn strong { font-size:15px !important; } } /* Heading vấn đề - red accent + yellow warn icon */ .page-id-4669 .pth-problem-heading .pth-accent-red { color: #dc2626 !important; } .page-id-4669 .pth-problem-heading .pth-warn-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-right: 12px; vertical-align: middle; color: #fff; font-weight: 900; font-size: 22px; line-height: 1; background: #f5b400; clip-path: polygon(50% 0%, 100% 100%, 0% 100%); padding-top: 8px; box-sizing: border-box; } @media (max-width: 600px) { .page-id-4669 .pth-problem-heading .pth-warn-icon { width: 30px; height: 30px; font-size: 18px; padding-top: 6px; margin-right: 8px; } } .page-id-4669 .pth-docs .pth-sec-head h2{ font-family:'Plus Jakarta Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important; font-size:32px !important; font-weight:800 !important; letter-spacing:-.02em !important; line-height:1.15 !important; color:#0A1F44 !important; margin:0 auto 14px !important; position:relative !important; display:inline-block !important; padding-bottom:14px !important; } .page-id-4669 .pth-docs .pth-sec-head h2::after{ content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:60px; height:3px; background:#f97316; border-radius:2px; } .page-id-4669 .pth-docs .pth-sec-head p{ font-family:'Plus Jakarta Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important; font-size:14.5px !important; font-weight:500 !important; color:#475569 !important; margin:0 auto !important; max-width:600px !important; line-height:1.6 !important; letter-spacing:.005em !important; } /* ----- Grid ----- */ .page-id-4669 .pth-docs .pth-doc-grid{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:18px !important; align-items:stretch !important; } /* ----- Card base ----- */ .page-id-4669 .pth-docs .pth-doc-card{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:flex-start !important; gap:8px !important; padding:20px 20px 18px !important; background:#ffffff !important; border:1px solid #e5e7eb !important; border-radius:12px !important; box-shadow:none !important; position:relative !important; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease !important; height:100% !important; grid-template-columns:none !important; grid-template-rows:none !important; } .page-id-4669 .pth-docs .pth-doc-card:hover{ transform:translateY(-3px) !important; box-shadow:0 10px 24px rgba(15,23,42,.08) !important; border-color:#d1d5db !important; } /* ----- Icon ----- */ .page-id-4669 .pth-docs .pth-doc-card .pth-doc-icon{ width:46px !important; height:46px !important; display:inline-flex !important; align-items:center; justify-content:center; background:#1B3D7A !important; color:#0A1F44 !important; border-radius:10px !important; margin:0 0 6px !important; padding:0 !important; grid-column:auto !important; grid-row:auto !important; font-size:0 !important; } .page-id-4669 .pth-docs .pth-doc-card .pth-doc-icon svg{ width:24px !important; height:24px !important; display:block; filter:none !important; stroke:currentColor; } /* ----- Title — premium typography ----- */ .page-id-4669 .pth-docs .pth-doc-card h4{ font-family:'Plus Jakarta Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important; font-size:17px !important; font-weight:800 !important; letter-spacing:-.015em !important; line-height:1.3 !important; color:#0A1F44 !important; margin:4px 0 2px !important; grid-column:auto !important; grid-row:auto !important; } /* Featured card: short orange underline below title (option a) */ .page-id-4669 .pth-docs .pth-doc-card.pth-doc-featured h4{ position:relative; padding-bottom:8px !important; } .page-id-4669 .pth-docs .pth-doc-card.pth-doc-featured h4::after{ content:""; position:absolute; left:0; bottom:0; width:32px; height:2.5px; background:#f97316; border-radius:2px; } /* ----- Description ----- */ .page-id-4669 .pth-docs .pth-doc-card p{ font-size:13.5px !important; font-weight:400 !important; color:#475569 !important; margin:6px 0 12px !important; line-height:1.6 !important; grid-column:auto !important; grid-row:auto !important; flex-grow:1; } /* ----- Button ----- */ .page-id-4669 .pth-docs .pth-doc-btn{ display:inline-flex !important; align-items:center; gap:7px; margin-top:auto !important; padding:10px 16px !important; border-radius:8px !important; font-family:'Plus Jakarta Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important; font-size:13px !important; font-weight:700 !important; letter-spacing:.01em !important; text-decoration:none !important; transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease !important; border:1px solid transparent !important; line-height:1 !important; } .page-id-4669 .pth-docs .pth-doc-btn svg{flex-shrink:0;} /* Primary — Cam */ .page-id-4669 .pth-docs .pth-doc-btn-pdf{ background:#f97316 !important; color:#ffffff !important; border-color:#f97316 !important; box-shadow:0 1px 2px rgba(249,115,22,.18) !important; } .page-id-4669 .pth-docs .pth-doc-btn-pdf:hover{ background:#ea580c !important; border-color:#ea580c !important; transform:translateY(-1px); box-shadow:0 6px 14px rgba(249,115,22,.3) !important; color:#fff !important; } /* Secondary — Outline xanh PTH */ .page-id-4669 .pth-docs .pth-doc-btn-zalo{ background:#ffffff !important; color:#0A1F44 !important; border-color:#0A1F44 !important; } .page-id-4669 .pth-docs .pth-doc-btn-zalo:hover{ background:#0A1F44 !important; color:#ffffff !important; border-color:#0A1F44 !important; transform:translateY(-1px); } /* Coming card */ .page-id-4669 .pth-docs .pth-doc-card.pth-doc-coming{ background:#ffffff !important; border:1px solid #e5e7eb !important; } /* Featured card — left orange border accent */ .page-id-4669 .pth-docs .pth-doc-card.pth-doc-featured{ background:#ffffff !important; border:1px solid #e5e7eb !important; border-left:3px solid #f97316 !important; box-shadow:none !important; } .page-id-4669 .pth-docs .pth-doc-card.pth-doc-featured:hover{ box-shadow:0 10px 24px rgba(15,23,42,.08) !important; } /* Hide old badges */ .page-id-4669 .pth-docs .pth-doc-card .pth-doc-badge, .page-id-4669 .pth-docs .pth-doc-card.pth-doc-featured::before{ display:none !important; content:none !important; } /* NEW ribbon — refined */ .page-id-4669 .pth-docs .pth-doc-card .pth-doc-ribbon{ position:absolute; top:14px; right:14px; display:inline-block; font-family:'Plus Jakarta Sans','Inter',sans-serif !important; font-size:10px; font-weight:800; letter-spacing:.08em; color:#f97316; background:#fff7ed; padding:4px 8px; border-radius:5px; text-transform:uppercase; line-height:1; } /* Responsive */ @media (max-width:1024px){ .page-id-4669 .pth-docs .pth-doc-grid{grid-template-columns:repeat(2,1fr) !important; gap:14px !important;} .page-id-4669 .pth-docs .pth-sec-head h2{font-size:28px !important;} } @media (max-width:600px){ .page-id-4669 .pth-docs .pth-doc-grid{grid-template-columns:1fr !important; gap:12px !important;} .page-id-4669 .pth-docs .pth-doc-card{padding:18px !important;} .page-id-4669 .pth-docs .pth-doc-btn{width:100%; justify-content:center;} .page-id-4669 .pth-docs .pth-sec-head h2{font-size:24px !important;} .page-id-4669 .pth-docs .pth-doc-card h4{font-size:16px !important;} } /* === Fix chữ mờ trong section pth-onesource - Một đầu mối === */ /* Fix H2 "Một đầu mối" - không thấy vì màu tối trên nền tối */ /* Cần override .page-id-4669 .pth-home h2 { color: #0a1f44 } */ .page-id-4669 .pth-home .pth-onesource h2, .page-id-4669 .pth-home .pth-onesource-head h2 { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* Fix H3 (Van xung lực, Túi lọc công nghiệp, Màng van rũ bụi, Khung xương túi lọc) */ .page-id-4669 .pth-home .pth-onesource h3, .page-id-4669 .pth-home .pth-onesrc-item h3 { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-weight: 700 !important; }