/* ===================================================================== THEPMEGA — TÔNG SÁNG "SANG" + HIỆU ỨNG CHUYỂN ĐỘNG (07/10/2026) Nạp SAU main.css, chỉ ghi đè. Lùi về tông tối: bỏ link tệp này + fx.js. ===================================================================== */ :root{ color-scheme: light; --bg:#f6f4ef; --bg-2:#ffffff; --bg-3:#f2eee7; --line:#e6e0d6; --line-hi:#cdc4b6; --text:#14171c; --text-2:#474c55; --text-3:#7b8089; --hot:#d9481a; --hot-2:#b06a12; --hot-soft:rgba(217,72,26,.08); --steel:#5b6b78; --steel-2:#2c3a47; --navy:#16212d; --gold:#c99a3b; --radius:16px; --radius-sm:10px; --shadow-sm:0 1px 2px rgba(20,23,28,.04),0 2px 8px rgba(20,23,28,.04); --shadow:0 2px 6px rgba(20,23,28,.05),0 12px 32px rgba(20,23,28,.07); --shadow-lg:0 10px 30px rgba(20,23,28,.08),0 30px 60px rgba(217,72,26,.10); --ease:cubic-bezier(.2,.8,.2,1); } /* ---------- Font tiêu đề: Archivo 900 tự phục vụ, ĐỦ dấu tiếng Việt. Đặt tên 'Archivo Black' để mọi chỗ cũ tự dùng (Archivo Black gốc của Google thiếu bộ tiếng Việt). */ @font-face{font-family:'Archivo Black';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/archivo-900-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;} @font-face{font-family:'Archivo Black';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/archivo-900-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Archivo Black';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/archivo-900-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} /* ---------- Nền ---------- */ html{background:var(--bg) !important;color-scheme:light} html,body{background:var(--bg) !important;color:var(--text) !important} body{ background-image: radial-gradient(ellipse 70% 45% at 15% -5%, rgba(217,72,26,.07), transparent 70%), radial-gradient(ellipse 60% 40% at 95% 105%, rgba(44,58,71,.06), transparent 70%) !important; } body::before{opacity:.025} ::selection{background:var(--hot);color:#fff} /* ---------- Thanh cuộn đọc trang ---------- */ .fx-progress{ position:fixed;top:0;left:0;height:3px;width:100%;z-index:300;pointer-events:none; background:linear-gradient(90deg,var(--hot),var(--gold)); transform-origin:0 50%;transform:scaleX(var(--p,0)); } /* ---------- NAV ---------- */ .nav{ background:rgba(255,255,255,.72); backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px); border-bottom:1px solid rgba(230,224,214,.7); transition:box-shadow .35s var(--ease),background .35s var(--ease); } .nav.scrolled{background:rgba(255,255,255,.9);box-shadow:0 6px 24px rgba(20,23,28,.06)} .nav-links{gap:2px !important;font-size:13.5px !important;letter-spacing:.05em} @media(min-width:1421px){.nav-links{position:relative}} .nav-inner{gap:16px} .nav-links a{ color:var(--text-2);padding:8px 10px;border-radius:999px;z-index:1;white-space:nowrap; transition:color .25s var(--ease); } .nav-links a:hover{color:var(--hot)} .nav-links a.active{color:var(--hot)} .nav-links a.active::after{ content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px; background:linear-gradient(90deg,var(--hot),var(--gold)); } /* viên nền trượt theo chuột */ .nav-ind{ position:absolute;top:0;left:0;height:100%;border-radius:999px;z-index:0;pointer-events:none; background:var(--hot-soft);box-shadow:inset 0 0 0 1px rgba(217,72,26,.14); opacity:0;transition:transform .4s var(--ease),width .4s var(--ease),opacity .25s; } .nav-links:hover .nav-ind{opacity:1} .nav-logo{filter:drop-shadow(0 1px 1px rgba(20,23,28,.35)) drop-shadow(0 4px 10px rgba(20,23,28,.10))} .nav-logo-pnm{filter:drop-shadow(0 3px 6px rgba(20,23,28,.10))} .brand img{transition:transform .5s var(--ease)} .brand:hover img{transform:translateY(-2px) scale(1.03)} .nav-hot{border-radius:12px;transition:transform .3s var(--ease),color .2s !important} .nav-hot:hover{color:var(--navy) !important} .nav-hot:hover .nav-hot-num{color:var(--navy) !important} .nav-hot-num{color:var(--hot) !important} /* ---------- CHỮ LĂN khi rê chuột (JS tách chữ) ---------- */ .roll{display:inline-flex;overflow:hidden;line-height:1.35em;height:1.35em;vertical-align:bottom} .roll i{ display:inline-block;font-style:normal;white-space:pre; text-shadow:0 1.35em 0 var(--roll-c,var(--hot)); transition:transform .5s var(--ease);transition-delay:calc(var(--i) * 16ms); } a:hover > .roll i, button:hover > .roll i, .roll-host:hover .roll i{transform:translateY(-1.35em)} /* ---------- HERO ---------- */ .hero{border-bottom:1px solid var(--line);isolation:isolate} .hero::before{opacity:.55;filter:saturate(.9) contrast(1.05)} .hero::after{ background: radial-gradient(600px circle at var(--mx,70%) var(--my,30%), rgba(217,72,26,.10), transparent 60%), linear-gradient(100deg, rgba(246,244,239,.97) 0%, rgba(246,244,239,.90) 45%, rgba(246,244,239,.62) 100%), linear-gradient(180deg, rgba(246,244,239,0) 60%, rgba(246,244,239,1) 100%); } .hero-logos{border-bottom-color:var(--line)} .hero-logo-wrap::before{background:radial-gradient(ellipse at center, rgba(201,154,59,.12), transparent 70%)} .hero-logo-wrap img{ filter:drop-shadow(0 1px 1px rgba(20,23,28,.4)) drop-shadow(0 10px 22px rgba(20,23,28,.12)); transition:transform .6s var(--ease),filter .4s; } .hero-logo-wrap:nth-child(2) img{filter:drop-shadow(0 10px 22px rgba(20,23,28,.10))} .hero-logo-wrap:hover img{transform:translateY(-4px) scale(1.04)} .hero-logo-label{color:var(--steel)} .hero-tag{color:var(--hot)} .hero h1{color:var(--text)} .hero h1 .outline{-webkit-text-stroke:2.5px var(--text);text-shadow:none;color:transparent} .hero h1 .orange{ background:linear-gradient(100deg,var(--hot) 0%,#f07a2a 30%,var(--gold) 50%,#f07a2a 70%,var(--hot) 100%); background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent; animation:fx-shine 6s linear infinite;padding-right:.08em; } @keyframes fx-shine{to{background-position:-220% 0}} .fx-pre .hero h1{opacity:0;animation:fx-safe 0s 1.5s forwards} @keyframes fx-safe{to{opacity:1}} .hero h1 .ln{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.04em} .hero h1 .ln > span{display:inline-block} .fx .hero h1 .ln > .orange{transform:translateY(105%);animation:fx-up 1s var(--ease) forwards;animation-delay:var(--d,400ms)} .fx .hero h1 .ch{display:inline-block;transform:translateY(105%);opacity:0;animation:fx-up .9s var(--ease) forwards;animation-delay:calc(var(--i) * 35ms + 120ms)} @keyframes fx-up{to{transform:none;opacity:1}} .hero h1 .ch{transition:color .3s,transform .35s var(--ease)} .hero h1:hover .ch:hover{transform:translateY(-6px)} .hero-meta{color:var(--steel)} .hero-desc{color:var(--text-2)} .hero-stats{border-top-color:var(--line)} .stat-num{color:var(--text) !important;font-variant-numeric:tabular-nums} .stat-lbl{color:var(--text-3) !important} /* ---------- DẢI MÁC THÉP chạy ngang ---------- */ .brand-strip{ background:var(--navy);border-bottom:none;color:rgba(255,255,255,.55); overflow:hidden;position:relative; } .brand-strip span{color:rgba(255,255,255,.4)} .brand-strip b{color:#ffb27a} .brand-strip.fx-marquee{display:block;padding:20px 0} .fx-track{display:flex;gap:48px;width:max-content;align-items:center;animation:fx-marq 38s linear infinite} .fx-track > *{flex:none} .fx-track .grp{display:flex;gap:48px;align-items:center} .brand-strip:hover .fx-track{animation-play-state:paused} .brand-strip b{transition:color .25s,text-shadow .25s} .brand-strip b:hover{color:#fff;text-shadow:0 0 18px rgba(255,178,122,.9)} @keyframes fx-marq{to{transform:translateX(-50%)}} .brand-strip.fx-marquee::before,.brand-strip.fx-marquee::after{ content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none; } .brand-strip.fx-marquee::before{left:0;background:linear-gradient(90deg,var(--navy),transparent)} .brand-strip.fx-marquee::after{right:0;background:linear-gradient(-90deg,var(--navy),transparent)} /* ---------- Tiêu đề mục: chữ quét màu khi rê ---------- */ .section-title,.pg-head h2,.contact-title{ background:linear-gradient(90deg,var(--hot) 0%,var(--gold) 25%,var(--text) 50%,var(--text) 100%); background-size:200% 100%;background-position:100% 0; -webkit-background-clip:text;background-clip:text;color:transparent; transition:background-position .9s var(--ease); } .section-title:hover,.pg-head h2:hover,.contact-title:hover{background-position:0 0} .contact-title .orange{color:transparent} .section-num,.pg-head .section-num{display:inline-flex;align-items:center;gap:10px} .section-num::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--hot);transition:width .5s var(--ease)} .section-head:hover .section-num::before,.pg-head:hover .section-num::before{width:44px} /* ---------- THẺ: tách rời, bo góc, nổi bóng ---------- */ .cat-grid,.pi-grid,.mills-grid,.contact-grid{background:transparent;border:none;gap:18px} .faq-list{background:transparent;border:none;gap:12px} .cat,.pi-card,.mill,.contact-card,.faq-item,.pg-card,.wh-card,.calc-wrap,.qb-wrap,.products,.filter-bar{ background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow-sm); } .cat,.pi-card,.mill,.pg-card,.wh-card,.faq-item{ transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s,background .3s !important; will-change:transform; } .cat,.pi-card,.mill,.pg-card,.wh-card{ transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px)) !important; } .cat:hover,.pi-card:hover,.mill:hover,.pg-card:hover,.wh-card:hover{ background:var(--bg-2);border-color:rgba(217,72,26,.35);box-shadow:var(--shadow-lg);--ty:-5px; } .faq-item:hover{background:var(--bg-2);border-color:rgba(217,72,26,.3);box-shadow:var(--shadow)} .cat::before,.pi-card::before,.mill::before{height:3px;background:linear-gradient(90deg,var(--hot),var(--gold))} /* đốm sáng theo chuột */ .cat::after,.pi-card::after,.mill::after,.pg-card::after,.contact-card::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%), rgba(217,72,26,.09), transparent 45%); opacity:0;transition:opacity .35s; } .cat:hover::after,.pi-card:hover::after,.mill:hover::after,.pg-card:hover::after,.contact-card:hover::after{opacity:1} .contact-card{position:relative;overflow:hidden} .cat > *,.pi-card > *,.mill > *{position:relative;z-index:1} .cat-name{transition:color .3s} .cat:hover .cat-name{color:var(--hot)} .cat-count{color:var(--hot)} .cat-code{color:var(--hot)} .mill-logo{border:1px solid var(--line);box-shadow:var(--shadow-sm)} .mill:hover .mill-logo{box-shadow:0 8px 20px rgba(217,72,26,.18)} .pg-card img{transition:transform .7s var(--ease)} .pg-card:hover img{transform:scale(1.06)} .pi-meta,.calc-formula,.qb-cformula{background:var(--bg-3);border-radius:0 var(--radius-sm) var(--radius-sm) 0} .pi-uses li::before{transition:transform .3s var(--ease)} .pi-uses li:hover::before{transform:translateX(4px)} /* ---------- Bảng sản phẩm ---------- */ .products{overflow:hidden} .prod-head{background:var(--bg-3)} .prod-row{transition:background .2s,box-shadow .2s} .prod-row:hover{background:#fffaf6;box-shadow:inset 3px 0 0 var(--hot)} .prod-code{background:var(--hot-soft);border:1px solid rgba(217,72,26,.18);color:var(--hot);border-radius:6px} .prod-weight{color:var(--steel-2)} /* ---------- Ô nhập, nút, viên lọc, tab ---------- */ .search-box input,.calc-field input,.calc-field select,.qb-field input,.qb-search-input,.qb-cgrid select,.qb-table .qb-input{ background:#fff;border-color:var(--line-hi);border-radius:var(--radius-sm); transition:border-color .2s,box-shadow .25s; } .search-box input:focus,.calc-field input:focus,.calc-field select:focus,.qb-field input:focus,.qb-search-input:focus,.qb-table .qb-input:focus{ border-color:var(--hot);box-shadow:0 0 0 4px rgba(217,72,26,.12);background:#fff; } .pill{border-radius:999px;border-color:var(--line-hi);position:relative;overflow:hidden;isolation:isolate;transition:color .3s,border-color .3s} .pill::before{ content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit; background:var(--hot-soft);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease); } .pill:hover{color:var(--hot);border-color:rgba(217,72,26,.45)} .pill:hover::before{transform:scaleX(1)} .pill.active{color:#fff;box-shadow:0 6px 16px rgba(217,72,26,.25)} .nav-cta,.calc-btn,.qb-btn,.modal-btn,.prod-cta,.pager button{border-radius:var(--radius-sm)} .nav-cta,.calc-btn-primary,.qb-btn-primary,.modal-btn.phone,.prod-cta:hover,.pager button.active{color:#fff !important} .calc-btn-primary,.qb-btn-primary,.modal-btn.phone{ background:linear-gradient(135deg,var(--hot),#ee6a2b);border-color:transparent; box-shadow:0 8px 20px rgba(217,72,26,.25);transition:transform .3s var(--ease),box-shadow .3s,background .3s; } .calc-btn-primary:hover,.qb-btn-primary:hover,.modal-btn.phone:hover{ background:linear-gradient(135deg,var(--navy),#2c3a47);color:#fff !important; box-shadow:0 10px 26px rgba(22,33,45,.25);transform:translateY(-2px); } .modal-btn.zalo{border-color:var(--steel-2);color:var(--steel-2)} .modal-btn.zalo:hover{background:var(--steel-2);color:#fff} .prod-cta{border-color:var(--line-hi);color:var(--text)} .calc-tabs{background:var(--bg-3)} .calc-tab,.qb-ctab{position:relative;transition:color .3s,background .3s} .calc-tab::after,.qb-ctab::after{ content:"";position:absolute;left:18%;right:18%;bottom:-1px;height:2px;border-radius:2px; background:linear-gradient(90deg,var(--hot),var(--gold));transform:scaleX(0);transition:transform .4s var(--ease); } .calc-tab:hover,.qb-ctab:hover{color:var(--hot);background:#fff} .calc-tab:hover::after,.qb-ctab:hover::after{transform:scaleX(1)} .calc-tab.active,.qb-ctab.active{background:#fff;color:var(--hot)} .calc-tab.active::after,.qb-ctab.active::after{transform:scaleX(1);left:0;right:0} .calc-panel.active,.qb-cform.active{animation:fx-fade .45s var(--ease)} @keyframes fx-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .calc-result,.qb-totals{background:var(--bg-3)} .qb-results{background:#fff;border-radius:var(--radius-sm);box-shadow:var(--shadow)} .qb-result-item:hover{background:#fff6f0} /* ---------- Liên hệ, kho, chân trang ---------- */ .contact{background:linear-gradient(180deg,var(--bg) 0%,#efe9df 100%);border-top-color:var(--line)} .contact-card{background:#fff} .cc-logo-img{filter:drop-shadow(0 1px 1px rgba(20,23,28,.35))} .cc-head img[src*="pnm"]{filter:drop-shadow(0 3px 6px rgba(20,23,28,.10))} .cc-val a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease)} .cc-val a:hover{text-decoration:none;background-size:100% 1px} .wh-card{overflow:hidden} .wh-name{background:var(--bg-3)} .wh-phone{background:var(--bg-3)} .wh-map{filter:none} .wh-actions a{background:#fff} .wh-actions a:hover{background:#fff6f0} .footer{color:var(--text-3)} /* ---------- Hộp thoại ---------- */ .modal-bg{background:rgba(22,33,45,.45)} .modal{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 30px 80px rgba(20,23,28,.25)} .modal-prod{background:var(--bg-3);border-radius:var(--radius-sm)} .modal-close{border-radius:999px} .lightbox-close:hover{color:#fff} /* ---------- Màn vừa (máy tính bảng, laptop nhỏ): menu gập ---------- */ @media(min-width:1600px){.nav-links{font-size:15px !important;gap:8px !important}} @media(max-width:1420px) and (min-width:769px){ .nav-inner{position:relative} .nav-mobile-btn{display:flex !important;order:3;background:transparent;border:1px solid var(--line-hi);color:var(--text); padding:8px 14px;font-size:22px;cursor:pointer;line-height:1;border-radius:10px} .nav-links{display:none !important;position:absolute;top:100%;left:0;right:0;flex-direction:column; background:rgba(255,255,255,.98);padding:12px 32px 20px;border-bottom:1px solid var(--line); box-shadow:0 20px 40px rgba(20,23,28,.08)} .nav-links.open{display:flex !important} .nav-links a{padding:12px 0;border-radius:0;border-bottom:1px solid var(--line);font-size:15px} .nav-links a:last-child{border-bottom:none} .nav-links a.active::after,.nav-ind{display:none} .nav-hotlines{margin-left:auto} } /* ---------- Di động ---------- */ @media(max-width:768px){ .nav-mobile-btn{border-color:var(--line-hi) !important;color:var(--text) !important;border-radius:10px} .nav-links{background:rgba(255,255,255,.98) !important;box-shadow:0 20px 40px rgba(20,23,28,.08)} .nav-links a{border-radius:0;padding:14px 0 !important;font-size:16px} .nav-links a.active::after{display:none} .mobile-bottom-bar{background:linear-gradient(135deg,var(--hot),#ee6a2b) !important;border-top:none !important;box-shadow:0 -6px 20px rgba(217,72,26,.25)} .mobile-bottom-bar a{color:#fff !important;border-right-color:rgba(255,255,255,.3) !important} .cat-grid,.pi-grid,.mills-grid,.contact-grid{gap:12px} .hero::after{background:linear-gradient(180deg, rgba(246,244,239,.93) 0%, rgba(246,244,239,.97) 100%)} } /* ---------- Hiện dần khi cuộn (chỉ khi JS chạy) ---------- */ .fx .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)} .fx .reveal.in{opacity:1;transform:none} /* ---------- Tôn trọng người tắt chuyển động ---------- */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none !important;transition:none !important} .fx .reveal{opacity:1;transform:none} .fx .hero h1 .ch,.fx .hero h1 .ln > .orange{opacity:1;transform:none} .fx-pre .hero h1{opacity:1} .fx-track{animation:none !important} } /* ---------- CHÂN TRANG TỐI + logo PNM bản nền tối (07/10) ---------- */ .footer-dark{ --fd-bg:#0b0f12; background:radial-gradient(ellipse 60% 80% at 30% 40%, #151a1e 0%, var(--fd-bg) 70%); color:rgba(255,255,255,.7);margin-top:0;position:relative;overflow:hidden; } .footer-dark::before{ content:"";position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,transparent,var(--hot) 30%,var(--gold) 70%,transparent); } .fd-inner{ max-width:1400px;margin:0 auto;padding:56px 32px 36px; display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap; } .fd-brand{display:flex;align-items:center;gap:28px} /* logo có sẵn nền đen sợi carbon: làm mờ 4 mép để hoà vào nền chân trang */ .fd-logo-pnm{ height:120px;width:auto;display:block; -webkit-mask-image:radial-gradient(ellipse 52% 56% at 50% 50%, #000 78%, transparent 100%); mask-image:radial-gradient(ellipse 52% 56% at 50% 50%, #000 78%, transparent 100%); transition:transform .6s var(--ease),filter .6s var(--ease); } .fd-brand:hover .fd-logo-pnm{transform:scale(1.04);filter:brightness(1.12)} .fd-logo-mega{height:70px;width:auto;display:block;filter:drop-shadow(0 4px 14px rgba(0,0,0,.5));opacity:.92} .fd-slogan{ font-family:'JetBrains Mono',mono;font-size:12px;letter-spacing:.2em;text-transform:uppercase; color:#ffb27a;margin-bottom:16px; } .fd-lines{display:flex;gap:22px;flex-wrap:wrap} .fd-lines a{ color:#fff;text-decoration:none;font-family:'Archivo Black',sans-serif;font-size:16px;letter-spacing:.02em; background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease),color .25s; padding-bottom:3px; } .fd-lines a:hover{color:#ffb27a;background-size:100% 1px} .fd-lines a span{font-family:'JetBrains Mono',mono;font-size:10px;color:rgba(255,255,255,.45);letter-spacing:.1em;text-transform:uppercase;margin-left:4px} .footer-dark .footer{ border-top:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.4);padding:22px 32px; } @media(max-width:768px){ .fd-inner{padding:40px 16px 24px;flex-direction:column;align-items:flex-start;gap:24px} .fd-brand{gap:16px} .fd-logo-pnm{height:84px} .fd-logo-mega{height:48px} .fd-lines{flex-direction:column;gap:12px} .footer-dark .footer{padding:18px 16px} } /* logo PNM mới bè ngang hơn ⇒ bớt cao trên menu cho khỏi tràn */ .nav-logo-pnm{height:40px !important} @media(max-width:768px){.nav-logo-pnm{height:32px !important}} /* ---------- Canh lề đồng nhất (07/10): khu Liên hệ + chân trang thẳng hàng các khu khác ---------- */ .contact{padding-left:0;padding-right:0} .contact-inner{max-width:1400px;padding:0 32px} @media(min-width:1600px){.contact-inner{max-width:1600px}} @media(max-width:768px){ .contact-inner{padding:0} .fd-inner{padding-left:14px;padding-right:14px} .footer-dark .footer{padding-left:14px;padding-right:14px} .calc{padding-left:14px !important;padding-right:14px !important} } /* ---------- SỬA CẮT CHỮ (07/10): chữ tô chuyển sắc chỉ có màu TRONG hộp phần tử ⇒ nới hộp cho chân chữ nghiêng + dấu tiếng Việt chồng tầng (Ẩ Ỗ Ệ Ọ), bù bằng lề âm ---------- */ .hero h1 .orange{padding:.24em .2em .2em .06em;margin:-.24em -.2em -.2em -.06em} .hero h1 .ln{padding:.26em .24em .22em 0;margin:-.26em -.24em -.22em 0} .hero h1.fx-xong .ln{overflow:visible} .section-title,.pg-head h2,.contact-title{padding:.22em .1em .16em 0;margin-top:-.22em;margin-bottom:-.16em} .contact-title{margin-bottom:calc(48px - .16em)} /* ---------- HERO CHẠY HÌNH ĐỘNG: 6 ảnh thật, chuyển mờ + phóng chậm (Ken Burns) ---------- */ .hero-slides{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none} .hero.co-slide::before{opacity:0} .hero-slides .s{ position:absolute;inset:-3%;background-size:cover;background-position:center; opacity:0;transition:opacity 1.8s ease;filter:saturate(.9) contrast(1.05);will-change:opacity,transform; } .hero-slides .s.on{opacity:.62;animation:fx-kb 9s linear forwards} .hero-slides .s:nth-child(odd).on{animation-name:fx-kb2} @keyframes fx-kb{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.16) translate(-2%,-1.5%)}} @keyframes fx-kb2{from{transform:scale(1.16) translate(1.5%,1%)}to{transform:scale(1.04) translate(0,0)}} .hero-dots{ position:absolute;right:32px;bottom:26px;z-index:3;display:flex;align-items:center;gap:10px; font-family:'JetBrains Mono',mono;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2); } .hero-dots .cap{margin-right:6px;min-width:150px;text-align:right;transition:opacity .5s} .hero-dots button{ width:26px;height:4px;border:0;border-radius:4px;background:rgba(20,23,28,.18);cursor:pointer;padding:0; position:relative;overflow:hidden; } .hero-dots button::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--hot),var(--gold));transform:scaleX(0);transform-origin:left} .hero-dots button.on::after{animation:fx-dot var(--dur,6s) linear forwards} @keyframes fx-dot{to{transform:scaleX(1)}} @media(max-width:768px){ .hero-slides .s.on{opacity:.45} .hero-dots{right:14px;bottom:14px} .hero-dots .cap{display:none} } @media (prefers-reduced-motion: reduce){.hero-slides .s.on{animation:none}} .hero h1{line-height:1.06} /* ---------- NÚT LIÊN HỆ GÓC PHẢI: Zalo OA + Hotline (Sếp chốt 07/10) ---------- */ .lh-fab{position:fixed;right:22px;bottom:22px;z-index:240;display:flex;flex-direction:column;align-items:flex-end;gap:10px} .lh-btn{ display:flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:999px;text-decoration:none; color:#fff;box-shadow:0 10px 26px rgba(20,23,28,.22); transition:transform .35s var(--ease),box-shadow .35s var(--ease),filter .25s; } .lh-btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 16px 34px rgba(20,23,28,.28)} .lh-btn:active{transform:scale(.97)} .lh-zalo{background:#0068ff} .lh-tel{background:linear-gradient(135deg,var(--hot),#ee6a2b)} .lh-ic{ width:40px;height:40px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center; background:#fff;position:relative; } .lh-zalo .lh-ic{color:#0068ff;font:800 11.5px/1 'Inter',sans-serif;letter-spacing:-.02em} .lh-tel .lh-ic{color:var(--hot)} .lh-tel .lh-ic svg{width:20px;height:20px} .lh-tel .lh-ic::after{ content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(255,255,255,.75); animation:lh-song 2.2s ease-out infinite; } @keyframes lh-song{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.45);opacity:0}} .lh-tel .lh-ic svg{animation:lh-lac 2.2s ease-in-out infinite;transform-origin:50% 50%} @keyframes lh-lac{0%,70%,100%{transform:rotate(0)}75%{transform:rotate(-14deg)}80%{transform:rotate(12deg)}85%{transform:rotate(-8deg)}90%{transform:rotate(5deg)}} .lh-tx{display:flex;flex-direction:column;line-height:1.15} .lh-tx b{font:700 15px/1.15 'Inter',sans-serif;letter-spacing:.01em;white-space:nowrap} .lh-tx small{font:500 11px/1.2 'JetBrains Mono',mono;letter-spacing:.08em;text-transform:uppercase;opacity:.85} @media(max-width:768px){ .mobile-bottom-bar{display:none !important} /* nút góc phải thay thanh dưới (cùng 2 cách liên hệ) */ body{padding-bottom:0 !important} .lh-fab{right:12px;bottom:14px;gap:8px} .lh-btn{padding:6px 12px 6px 6px} .lh-ic{width:36px;height:36px} .lh-tx b{font-size:14px} } @media print{.lh-fab{display:none}} @media (prefers-reduced-motion: reduce){.lh-tel .lh-ic::after,.lh-tel .lh-ic svg{animation:none}} /* chừa chỗ cho nút liên hệ góc phải khi cuộn tới cuối trang — chữ chân trang không bị che */ .footer-dark{padding-bottom:128px} @media(max-width:768px){.footer-dark{padding-bottom:120px}} /* ---------- HERO RÕ HƠN (Sếp 07/10: "hình động bị mờ quá") ---------- Ảnh hiện 100%; lớp phủ CHỈ đậm bên trái (chữ tiêu đề) rồi mỏng dần; khối chữ bên phải đặt trên kính mờ. */ .hero-slides .s{filter:saturate(1.05) contrast(1.04)} .hero-slides .s.on{opacity:1} .hero.co-slide::after{ background: radial-gradient(600px circle at var(--mx,70%) var(--my,30%), rgba(217,72,26,.08), transparent 60%), linear-gradient(100deg, rgba(246,244,239,.95) 0%, rgba(246,244,239,.86) 30%, rgba(246,244,239,.42) 58%, rgba(246,244,239,.12) 100%), linear-gradient(180deg, rgba(246,244,239,0) 78%, rgba(246,244,239,.9) 100%); } .hero.co-slide .hero-right{ background:rgba(255,255,255,.74);backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2); border:1px solid rgba(255,255,255,.7);border-radius:18px;padding:24px 26px 20px;box-shadow:0 18px 40px rgba(20,23,28,.12); } .hero.co-slide .hero-logo-wrap{background:rgba(255,255,255,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border-radius:16px;padding:14px 22px 10px;box-shadow:0 10px 28px rgba(20,23,28,.10)} .hero.co-slide .hero-logos{border-bottom-color:rgba(20,23,28,.08)} .hero-dots{background:rgba(255,255,255,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:8px 12px;border-radius:999px} @media(max-width:768px){ .hero-slides .s.on{opacity:.9} .hero.co-slide::after{background:linear-gradient(180deg, rgba(246,244,239,.55) 0%, rgba(246,244,239,.80) 45%, rgba(246,244,239,.92) 100%)} .hero.co-slide .hero-right{padding:18px 16px} } /* ---------- TRANG CHỦ GỌN (Sếp 07/10: rút còn mấy ý chính) ---------- */ .hero-lead{font:700 clamp(22px,2.2vw,30px)/1.25 'Inter',sans-serif;letter-spacing:-.01em;color:var(--text);margin:4px 0 20px} .hero-lead .l2{background:linear-gradient(90deg,var(--hot),#f07a2a 60%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .1em .12em 0} .hero-points{list-style:none;display:grid;gap:10px;margin:0 0 24px;padding:0} .hero-points li{ display:grid;grid-template-columns:28px 130px 1fr;align-items:center;gap:10px; padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.55);border:1px solid rgba(20,23,28,.06); transition:transform .35s var(--ease),background .3s,border-color .3s,box-shadow .35s var(--ease); } .hero-points li::before{ content:"";width:28px;height:28px;border-radius:50%; background:var(--hot) url("data:image/svg+xml;utf8,") center/15px no-repeat; box-shadow:0 4px 10px rgba(217,72,26,.3); } .hero-points li:hover{transform:translateX(4px);background:#fff;border-color:rgba(217,72,26,.3);box-shadow:0 8px 20px rgba(20,23,28,.08)} .hero-points b{font:700 15px/1.2 'Inter',sans-serif;color:var(--text);white-space:nowrap} .hero-points span{font:500 13.5px/1.35 'JetBrains Mono',mono;color:var(--text-2);letter-spacing:.01em} .hero.co-slide .hero-right{max-width:560px;justify-self:end;width:100%} @media(max-width:900px){.hero.co-slide .hero-right{justify-self:stretch;max-width:none}} @media(max-width:768px){ .hero-points li{grid-template-columns:26px 1fr;gap:4px 10px;padding:9px 10px} .hero-points li::before{grid-row:span 2;width:26px;height:26px} .hero-points span{font-size:12.5px} .hero-lead{margin-bottom:16px} } /* màn đầu GỌN: tiêu đề + khối ý chính nằm trọn trong một màn hình laptop */ @media(min-width:901px){ .hero{padding-top:40px !important;padding-bottom:48px !important} .hero-logos{padding:4px 0 24px;margin-bottom:28px} .hero-logo-wrap img{height:70px} .hero-grid{align-items:center} .hero h1{font-size:clamp(40px,6vw,88px)} } /* màn THẤP (laptop 1366×768…): bỏ hàng logo lớn ở màn đầu — logo đã có trên thanh menu */ @media(min-width:901px) and (max-height:860px){ .hero-logos{display:none} .hero{padding-top:28px !important} } /* ---------- KHÔNG KẺ KHUNG — chữ thanh thoát (Sếp 07/10) ---------- Bỏ kính mờ/khung dòng/khung logo. Đọc được nhờ QUẦNG SÁNG MỀM không viền phía sau khối chữ. */ .hero.co-slide .hero-right{ background:radial-gradient(closest-side, rgba(246,244,239,.9) 0%, rgba(246,244,239,.78) 55%, rgba(246,244,239,0) 100%); border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0; padding:56px 64px;margin:-56px -64px; } .hero.co-slide .hero-logo-wrap{background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0} .hero-dots{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0} .hero-meta{letter-spacing:.18em} .hero-lead{font:600 clamp(24px,2.3vw,32px)/1.22 'Inter',sans-serif;letter-spacing:-.02em;margin:6px 0 22px; text-shadow:0 1px 16px rgba(246,244,239,.9)} .hero-points{gap:12px} .hero-points li{ display:flex;align-items:baseline;gap:12px;padding:0;background:none;border:0;border-radius:0;box-shadow:none; text-shadow:0 1px 12px rgba(246,244,239,.95);transition:transform .4s var(--ease); } .hero-points li::before{ width:16px;height:16px;flex:none;border-radius:0;box-shadow:none;align-self:center; background:url("data:image/svg+xml;utf8,") center/16px no-repeat; } .hero-points li:hover{transform:translateX(6px);background:none;border:0;box-shadow:none} .hero-points li:hover b{color:var(--hot)} .hero-points b{font:600 17px/1.3 'Inter',sans-serif;min-width:128px;transition:color .3s} .hero-points span{font:400 16px/1.4 'Inter',sans-serif;color:var(--text-2);letter-spacing:0} .hero-stats{border-top:0;padding-top:4px} @media(max-width:768px){ .hero.co-slide .hero-right{padding:28px 20px;margin:-28px -20px;background:radial-gradient(closest-side, rgba(246,244,239,.92), rgba(246,244,239,.8) 60%, rgba(246,244,239,0))} .hero-points li{flex-wrap:wrap;gap:2px 10px} .hero-points b{min-width:0;font-size:16px} .hero-points span{flex-basis:100%;padding-left:26px;font-size:15px} } /* tinh chỉnh bản không khung: quầng sáng rộng hơn, câu chính không gãy dòng, chấm chuyển ảnh sang trái, logo có quầng */ .hero.co-slide .hero-right{ max-width:620px;padding:72px 84px;margin:-72px -84px; background:radial-gradient(ellipse at 50% 50%, rgba(246,244,239,.95) 0%, rgba(246,244,239,.88) 42%, rgba(246,244,239,.5) 64%, rgba(246,244,239,0) 78%); } .hero-lead{font-size:clamp(22px,2vw,29px)} @media(min-width:901px){ .hero-lead .l1{white-space:nowrap} .hero-points span{white-space:nowrap} } .hero-meta{color:var(--text-2);text-shadow:0 1px 10px rgba(246,244,239,1)} .hero-dots{left:32px;right:auto;bottom:22px;flex-direction:row-reverse} .hero-dots .cap{text-align:left;margin:0 0 0 6px;color:var(--text);text-shadow:0 1px 10px rgba(246,244,239,1)} .hero.co-slide .hero-logos{position:relative} .hero.co-slide .hero-logos::before{ content:"";position:absolute;left:50%;top:50%;width:min(720px,96%);height:150%;transform:translate(-50%,-50%);z-index:-1;pointer-events:none; background:radial-gradient(ellipse at 50% 50%, rgba(246,244,239,.9) 0%, rgba(246,244,239,.65) 45%, rgba(246,244,239,0) 72%); } .hero.co-slide .hero-logo-label{color:var(--text-2);text-shadow:0 1px 8px rgba(246,244,239,1)} @media(max-width:768px){ .hero-dots{left:14px;bottom:12px} .hero.co-slide .hero-right{padding:32px 22px;margin:-32px -22px;max-width:none} } /* ---------- "CHÚNG TÔI CUNG ỨNG" — THÉP ÁNH KIM như logo (Sếp 07/10) ---------- Chữ đậm khối + nghiêng như logo PNM, tô dải crôm sáng–tối, vệt sáng lướt qua, bóng đổ cho nổi khối. 🪤 chữ tô cắt nền chỉ có màu TRONG hộp ⇒ nới padding + bù margin âm (dấu Ú Ô Ứ không bị mất). */ .hero-lead{margin:2px 0 20px;text-shadow:none} .hero-lead .l1{ display:inline-block;font:900 clamp(30px,3.1vw,46px)/1.05 'Archivo Black','Archivo',sans-serif; letter-spacing:-.01em;text-transform:uppercase;transform:skewX(-9deg);transform-origin:left bottom; padding:.22em .28em .18em .06em;margin:-.22em -.28em -.18em -.06em; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.95) 50%, transparent 60%) 0 0/250% 100% no-repeat, linear-gradient(180deg, #fbfcfd 0%, #d7dde2 18%, #8e98a1 40%, #f2f5f7 50%, #b4bcc4 62%, #5d666e 82%, #2f363c 100%); -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent; filter:drop-shadow(0 1px 0 rgba(255,255,255,.9)) drop-shadow(0 2px 1px rgba(20,23,28,.45)) drop-shadow(0 8px 14px rgba(20,23,28,.18)); animation:kim-lot 5.5s ease-in-out infinite; } .hero-lead .l1 .l2{background:none;-webkit-background-clip:initial;background-clip:initial;color:inherit;-webkit-text-fill-color:inherit;padding:0} @keyframes kim-lot{0%,55%{background-position:160% 0,0 0}100%{background-position:-60% 0,0 0}} @media (prefers-reduced-motion: reduce){.hero-lead .l1{animation:none}} @media(max-width:768px){.hero-lead .l1{font-size:30px}} .hero-lead .l1{font-size:clamp(34px,3.4vw,52px);line-height:1.02} @media(max-width:768px){.hero-lead .l1{font-size:36px}} /* ---------- "CHÚNG TÔI CUNG ỨNG" = ẢNH CHỮ THÉP 3D Sếp gửi (07/10) — nền đã tách trong suốt ---------- Vệt sáng lướt CHỈ trên nét chữ: lớp ::after dùng chính ảnh làm mặt nạ. */ .hero-lead-anh{position:relative;display:block;width:100%;max-width:560px;margin:4px 0 22px;line-height:0} .hero-lead-anh img{display:block;width:100%;height:auto} .hero-lead-anh::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.75) 50%, transparent 62%) 0 0/250% 100% no-repeat; -webkit-mask:url("/assets/chung-toi-cung-ung.webp") center/100% 100% no-repeat; mask:url("/assets/chung-toi-cung-ung.webp") center/100% 100% no-repeat; mix-blend-mode:screen;animation:kim-lot2 5.5s ease-in-out infinite; } @keyframes kim-lot2{0%,55%{background-position:160% 0}100%{background-position:-60% 0}} .hero-lead-anh:hover::after{animation-duration:1.6s} @media (prefers-reduced-motion: reduce){.hero-lead-anh::after{animation:none;opacity:0}} @media(max-width:768px){.hero-lead-anh{max-width:100%;margin-bottom:18px}} /* Sếp 07/10: chữ "CHÚNG TÔI CUNG ỨNG" nhỏ lại — không giành chú ý của logo */ .hero-lead-anh{max-width:340px;margin:2px 0 18px} @media(max-width:768px){.hero-lead-anh{max-width:240px;margin-bottom:14px}} /* ---------- LOGO GÓC TRÁI (Sếp 07/10): PNM nhỏ lại cân với Mega + chữ PHƯƠNG NHẬT MINH dưới chân ---------- */ .brand{gap:12px;align-items:center} .nav-logo-mega{height:52px !important} .nav-pnm{display:inline-flex;flex-direction:column;align-items:center;gap:3px;line-height:1} .nav-logo-pnm{height:22px !important;width:auto} .nav-pnm-ten{ font:900 7.4px/1 'Archivo Black','Archivo',sans-serif;letter-spacing:.04em;white-space:nowrap; background:linear-gradient(180deg,#9aa3ab 0%,#5b646c 55%,#2f363c 100%);-webkit-background-clip:text;background-clip:text;color:transparent; padding:.15em .1em .1em;margin:-.15em -.1em -.1em; } @media(max-width:768px){ .nav-logo-mega{height:42px !important} .nav-logo-pnm{height:18px !important} .nav-pnm-ten{font-size:6.1px} } .brand,.brand:hover{text-decoration:none} .nav-logo-pnm{height:24px !important} .nav-pnm-ten{font:700 6.6px/1 'Inter',sans-serif;letter-spacing:.02em;text-decoration:none; background:linear-gradient(180deg,#a7afb6 0%,#6b747c 50%,#3a4147 100%);-webkit-background-clip:text;background-clip:text} @media(max-width:768px){.nav-logo-pnm{height:19px !important}.nav-pnm-ten{font-size:5.3px}} /* Sếp 07/10: cụm PNM lớn hơn cho cân xứng; chữ PHƯƠNG NHẬT MINH nằm GỌN trong chiều ngang logo */ .nav-pnm{gap:4px} .nav-logo-pnm{height:30px !important} .nav-pnm-ten{font-size:7.3px;letter-spacing:.01em} @media(max-width:768px){.nav-logo-pnm{height:24px !important}.nav-pnm-ten{font-size:5.8px}} /* ---------- ĐIỆN THOẠI: lớp phủ TRONG, ảnh lộ rõ (Sếp 07/10: "chữ che hết hình") ---------- Bỏ quầng sáng sau khối chữ; chữ đọc được nhờ VIỀN SÁNG MỀM quanh nét (không phủ cả vùng). */ @media(max-width:768px){ .hero-slides .s.on{opacity:1} .hero.co-slide::after{background:linear-gradient(180deg, rgba(246,244,239,.15) 0%, rgba(246,244,239,.28) 45%, rgba(246,244,239,.45) 100%)} .hero.co-slide .hero-right{background:none} .hero-tag,.hero-meta,.hero h1,.hero-points li,.hero-points b,.hero-points span,.stat-num,.stat-lbl,.hero-dots .cap{ text-shadow:0 0 2px rgba(255,255,255,.95),0 0 8px rgba(255,255,255,.9),0 0 18px rgba(255,255,255,.75) !important; } .hero h1 .orange,.hero-lead-anh{filter:drop-shadow(0 0 3px rgba(255,255,255,.95)) drop-shadow(0 0 10px rgba(255,255,255,.8))} .hero-points span{color:var(--text) !important} .hero-meta,.stat-lbl{color:var(--text) !important} } @media(max-width:768px){ /* chữ tô cắt nền (lòng chữ trong suốt): text-shadow thừa kế sẽ HIỆN QUA lòng chữ ⇒ trắng xóa — tắt, chỉ giữ bóng mép mỏng */ .hero h1 .orange,.hero h1 .orange *{text-shadow:none !important} .hero h1 .orange{filter:drop-shadow(0 0 1.5px rgba(255,255,255,.95)) drop-shadow(0 0 4px rgba(255,255,255,.7))} } /* ---------- ĐIỆN THOẠI: PHỦ TỐI + CHỮ TRẮNG (Sếp 07/10: "chữ chìm quá") ---------- Chữ tối trên ảnh rối/sáng không cứu được bằng viền sáng ⇒ đảo: ảnh trầm xuống, chữ trắng. Máy tính KHÔNG đổi. */ @media(max-width:768px){ .hero.co-slide::after{background:linear-gradient(180deg, rgba(11,15,18,.42) 0%, rgba(11,15,18,.58) 40%, rgba(11,15,18,.80) 100%) !important} .hero-tag,.hero-meta,.hero h1,.hero h1 *,.hero-points li,.hero-points b,.hero-points span,.stat-num,.stat-lbl,.hero-dots .cap{ text-shadow:0 1px 3px rgba(0,0,0,.55) !important; } .hero h1 .orange,.hero h1 .orange *{text-shadow:none !important} .hero h1 .orange{filter:drop-shadow(0 2px 4px rgba(0,0,0,.45))} .hero h1{color:#fff} .hero h1 .outline{-webkit-text-stroke:2.2px #fff;color:transparent} .hero h1 .outline .ch{-webkit-text-stroke:inherit} .hero-tag{color:#ffb27a} .hero-tag::before{background:#ffb27a} .hero-meta{display:none} .hero-points b{color:#fff !important} .hero-points span{color:rgba(255,255,255,.84) !important} .hero-points li::before{background-image:url("data:image/svg+xml;utf8,")} .stat-num{color:#fff !important} .stat-lbl{color:rgba(255,255,255,.72) !important} .hero-lead-anh{filter:drop-shadow(0 3px 8px rgba(0,0,0,.45))} .hero-dots .cap{color:#fff} .hero-dots button{background:rgba(255,255,255,.32)} } @media(max-width:768px){ /* ảnh chữ thép làm cho nền SÁNG ⇒ trên nền tối phải làm sáng lên cho nổi như thép dưới đèn */ .hero-lead-anh{filter:brightness(1.85) contrast(1.15) drop-shadow(0 0 1px rgba(255,255,255,.35)) drop-shadow(0 4px 10px rgba(0,0,0,.5))} } /* ĐIỆN THOẠI (nền tối): "CHÚNG TÔI CUNG ỨNG" = CHỮ THẬT tô thép crôm — ảnh tách nền "trắng→trong suốt" làm phần bạc sáng thành nửa trong suốt ⇒ trên nền tối mờ đi. Chữ thật luôn đặc. Máy tính vẫn dùng ảnh 3D Sếp gửi. */ .lead-chu{display:none} @media(max-width:768px){ .hero-lead-anh{filter:none;max-width:none;line-height:1} .hero-lead-anh picture{display:none} .hero-lead-anh::after{display:none} .hero-lead-anh .lead-chu{ display:inline-block;font:900 31px/1 'Archivo Black','Archivo',sans-serif;text-transform:uppercase;letter-spacing:-.005em; transform:skewX(-9deg);transform-origin:left bottom;white-space:nowrap; padding:.24em .3em .2em .06em;margin:-.24em -.3em -.2em -.06em; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.95) 50%, transparent 60%) 0 0/250% 100% no-repeat, linear-gradient(180deg,#ffffff 0%,#e3e8ec 22%,#a7b0b8 44%,#f4f6f8 52%,#c3cad0 64%,#808a93 84%,#5a636b 100%); -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent; filter:drop-shadow(0 1px 0 rgba(255,255,255,.35)) drop-shadow(0 2px 1px rgba(0,0,0,.6)) drop-shadow(0 6px 12px rgba(0,0,0,.45)); text-shadow:none !important;animation:kim-lot 5.5s ease-in-out infinite; } } @media (prefers-reduced-motion: reduce){.hero-lead-anh .lead-chu{animation:none}} @media(max-width:768px){.hero-lead-anh .lead-chu{font-size:26px}} @media(max-width:360px){.hero-lead-anh .lead-chu{font-size:22px}} /* máy bật "Giảm chuyển động": ảnh nền vẫn chuyển — CHỈ chuyển mờ chậm, đứng yên không phóng/trượt */ @media (prefers-reduced-motion: reduce){ .hero-slides .s{transition:opacity 1.6s ease !important} .hero-slides .s.on{animation:none !important;transform:none} .hero-dots button.on::after{animation:none !important;transform:scaleX(1)} } /* ---------- ẢNH CHUYỂN ĐỘNG TRÀN HẾT MÀN HÌNH trên iPad + Mac (Sếp 07/10) ---------- Khung hero rộng TRỌN màn hình (ảnh mép-tới-mép), cao = màn hình trừ thanh menu; NỘI DUNG vẫn nằm trong khung 1400px giữa. */ @media(min-width:769px){ .hero{ max-width:none !important;width:100%;margin:0; padding-left:max(32px, calc((100vw - 1400px) / 2)) !important;padding-right:max(32px, calc((100vw - 1400px) / 2)) !important; min-height:calc(100vh - var(--nav-h, 81px));min-height:calc(100dvh - var(--nav-h, 81px)); display:flex;flex-direction:column;justify-content:center; } .hero-grid{width:100%} .hero-dots{left:max(32px, calc((100vw - 1400px) / 2))} } @media(min-width:1600px){ .hero{padding-left:calc((100vw - 1600px) / 2) !important;padding-right:calc((100vw - 1600px) / 2) !important} .hero-dots{left:calc((100vw - 1600px) / 2)} } /* quầng sáng sau khối chữ phải TẮT HẲN trước mép khối (closest-side ⇒ 100% = mép), không lộ viền chữ nhật */ @media(min-width:769px){ .hero.co-slide .hero-right{background:radial-gradient(closest-side, rgba(246,244,239,.94) 0%, rgba(246,244,239,.86) 50%, rgba(246,244,239,.45) 78%, rgba(246,244,239,0) 100%)} } /* ---------- ĐIỆN THOẠI: MÀN ĐẦU HAI TẦNG (Sếp 07/10: dùng ĐÚNG mẫu chữ 3D + trang chủ sạch gọn) ---------- Tầng trên = dải ảnh chuyển động + tiêu đề trắng · tầng dưới = nền sáng: ảnh chữ 3D "CHÚNG TÔI CUNG ỨNG" của Sếp + 4 ý + số liệu. --band do fx.js đo: từ đỉnh hero tới dưới tiêu đề. */ @media(max-width:768px){ .hero-slides,.hero::before{bottom:auto !important;height:var(--band,420px)} .hero.co-slide::after{bottom:auto;height:var(--band,420px); background:linear-gradient(180deg, rgba(11,15,18,.25) 0%, rgba(11,15,18,.45) 55%, rgba(11,15,18,.72) 100%) !important} .hero{padding-bottom:28px !important} .hero-right{margin-top:34px} /* tầng dưới trên nền sáng: trả chữ về màu tối, bỏ bóng */ .hero-points li,.hero-points b,.hero-points span,.stat-num,.stat-lbl{text-shadow:none !important} .hero-points b{color:var(--text) !important} .hero-points span{color:var(--text-2) !important} .stat-num{color:var(--text) !important} .stat-lbl{color:var(--text-3) !important} .hero-points li::before{background-image:url("data:image/svg+xml;utf8,")} /* đúng mẫu chữ 3D của Sếp */ .hero-lead-anh{filter:none;max-width:300px} .hero-lead-anh picture{display:block} .hero-lead-anh::after{display:block} .hero-lead-anh .lead-chu{display:none} /* chấm chuyển ảnh nằm trong dải ảnh */ .hero-dots{top:calc(var(--band,420px) - 30px);bottom:auto} .hero-dots .cap{display:none} } /* ---------- THANH TRÊN TỰ ẨN khi cuộn xuống, HIỆN khi cuộn lên (mọi thiết bị) ---------- */ .nav{transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease)} .nav.nav-an{transform:translateY(-100%)} /* ---------- ĐIỆN THOẠI: nút Zalo/Hotline gọn thành 2 nút tròn ---------- */ @media(max-width:768px){ .lh-fab{gap:10px;right:12px;bottom:16px} .lh-btn{padding:6px;border-radius:50%} .lh-tx{display:none} .lh-ic{width:44px;height:44px} } @media(max-width:768px){ /* bỏ lề âm cũ của quầng sáng ⇒ khối chữ nằm TRỌN dưới dải ảnh, dấu Ú Ô Ứ không lẫn vào nền tối */ .hero.co-slide .hero-right{margin:28px 0 0 !important;padding:0 !important;background:none} } /* ---------- ĐIỆN THOẠI: BỎ CHIA NGĂN — chữ đè lên hình (Sếp 07/10) ---------- Ảnh phủ TOÀN hero, phủ tối, chữ trắng; "CHÚNG TÔI CUNG ỨNG" = ĐÚNG mẫu 3D của Sếp, bản ĐẶC cho nền tối (chung-toi-cung-ung-toi.webp). */ @media(max-width:768px){ .hero-slides,.hero::before{bottom:0 !important;height:auto} .hero.co-slide::after{bottom:0;height:auto; background:linear-gradient(180deg, rgba(11,15,18,.42) 0%, rgba(11,15,18,.58) 40%, rgba(11,15,18,.80) 100%) !important} .hero.co-slide .hero-right{margin:26px 0 0 !important;padding:0 !important;background:none} .hero-points li,.hero-points b,.hero-points span,.stat-num,.stat-lbl{text-shadow:0 1px 3px rgba(0,0,0,.55) !important} .hero-points b{color:#fff !important} .hero-points span{color:rgba(255,255,255,.84) !important} .stat-num{color:#fff !important} .stat-lbl{color:rgba(255,255,255,.72) !important} .hero-points li::before{background-image:url("data:image/svg+xml;utf8,")} .hero-lead-anh{filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));max-width:300px} .hero-lead-anh picture{display:block} .hero-lead-anh .lead-chu{display:none} .hero-lead-anh::after{display:block;-webkit-mask-image:url("/assets/chung-toi-cung-ung-toi.webp");mask-image:url("/assets/chung-toi-cung-ung-toi.webp")} .hero-dots{top:auto;bottom:12px} } /* ---------- ĐIỆN THOẠI: chữ 3D "CHÚNG TÔI CUNG ỨNG" đặt trên QUẦNG NỀN SÁNG mềm (Sếp 07/10: "nhìn ghê, phủ nền xung quanh") ---------- Dùng lại bản ảnh GỐC cho nền sáng (đẹp nhất); quầng sáng đặc ở giữa, tan dần ra mép — không viền, không khung. */ @media(max-width:768px){ .hero-lead-anh{ position:relative;max-width:310px;padding:26px 30px;margin:-26px -30px 4px;filter:none; background:radial-gradient(closest-side, rgba(246,244,239,.96) 0%, rgba(246,244,239,.92) 58%, rgba(246,244,239,.55) 82%, rgba(246,244,239,0) 100%); } .hero-lead-anh img{filter:drop-shadow(0 2px 4px rgba(20,23,28,.18))} .hero-lead-anh::after{inset:26px 30px;-webkit-mask-image:url("/assets/chung-toi-cung-ung.webp");mask-image:url("/assets/chung-toi-cung-ung.webp")} } /* ---------- Hộp "Yêu cầu báo giá" (Sếp 07/10: nút Zalo lỗi) ---------- */ .modal-btn.zalo{background:#0068ff;border-color:#0068ff;color:#fff} .modal-btn.zalo:hover{background:#0050c8;border-color:#0050c8;color:#fff} .modal-btn{display:flex;align-items:center;justify-content:center;letter-spacing:.06em} @media(max-width:600px){ .modal-actions{grid-template-columns:1fr} /* xếp 1 cột ⇒ chữ dài không tràn khỏi hộp */ .modal{padding:24px 20px} } /* ---------- Quầng sáng sau chữ 3D trên điện thoại: RỘNG hơn, NHẠT hơn, tự nhiên (Sếp 07/10) ---------- */ @media(max-width:768px){ .hero-lead-anh{padding:44px 56px;margin:-44px -56px -12px; background:radial-gradient(closest-side, rgba(246,244,239,.72) 0%, rgba(246,244,239,.55) 45%, rgba(246,244,239,.22) 75%, rgba(246,244,239,0) 100%)} .hero-lead-anh::after{inset:44px 56px} } /* ---------- THANH TRÊN TRONG SUỐT ở đầu trang (Sếp 07/10) — chỉ logo · hotline · ☰ làm điểm nhấn ---------- Ảnh hero kéo lên NẰM DƯỚI thanh; cuộn xuống (.scrolled) thì thanh có lại nền mờ. */ .nav:not(.scrolled){background:transparent !important;border-bottom-color:transparent !important;box-shadow:none !important; backdrop-filter:none !important;-webkit-backdrop-filter:none !important} .nav ~ .hero{margin-top:calc(-1 * var(--nav-h, 81px)) !important;padding-top:calc(var(--nav-h, 81px) + 40px) !important} @media(min-width:769px){ .nav ~ .hero{min-height:100vh;min-height:100dvh} } @media(min-width:901px) and (max-height:860px){ .nav ~ .hero{padding-top:calc(var(--nav-h, 81px) + 24px) !important} } @media(max-width:768px){ .nav ~ .hero{padding-top:calc(var(--nav-h, 67px) + 36px) !important} } /* dải mỏng phía trên ảnh để logo/menu đọc được */ .hero-slides::after{content:"";position:absolute;left:0;right:0;top:0;height:170px;z-index:2;pointer-events:none; background:linear-gradient(180deg, rgba(246,244,239,.88) 0%, rgba(246,244,239,.45) 55%, rgba(246,244,239,0) 100%)} @media(max-width:768px){ .hero-slides::after{height:130px;background:linear-gradient(180deg, rgba(11,15,18,.6) 0%, rgba(11,15,18,0) 100%)} } /* điểm nhấn */ .nav:not(.scrolled) .nav-logo{filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)) drop-shadow(0 4px 12px rgba(0,0,0,.18))} .nav-mobile-btn{background:rgba(255,255,255,.88) !important;border:0 !important;border-radius:14px !important; box-shadow:0 4px 14px rgba(20,23,28,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .nav:not(.scrolled) .nav-hot{background:rgba(255,255,255,.82) !important;padding:6px 12px !important;border-radius:12px;box-shadow:0 4px 14px rgba(20,23,28,.14)} @media(max-width:768px){ .co-hero .nav:not(.scrolled) .nav-pnm-ten{background:linear-gradient(180deg,#f2f4f6,#b9c0c6);-webkit-background-clip:text;background-clip:text} } @media(max-width:768px){ .co-hero .nav:not(.scrolled) .nav-logo-mega{filter:brightness(1.5) drop-shadow(0 1px 2px rgba(0,0,0,.6))} } @media(max-width:768px){ /* thanh trong suốt trên ảnh tối: logo PNM bản BẠC SÁNG (logo_pnm_bac.png) */ } /* Sếp 08/10 (ảnh chụp): quầng quá nhạt ⇒ chữ 3D chìm. Mức GIỮA: rộng & mềm, giữa đủ sáng cho chữ thép nổi */ @media(max-width:768px){ .hero-lead-anh{background:radial-gradient(closest-side, rgba(246,244,239,.86) 0%, rgba(246,244,239,.74) 42%, rgba(246,244,239,.34) 74%, rgba(246,244,239,0) 100%)} .hero-lead-anh img{filter:brightness(1.12) contrast(1.08) drop-shadow(0 2px 4px rgba(20,23,28,.22))} } /* logo PNM bạc cho nền ảnh tối: HAI thẻ ảnh, chỉ ẩn/hiện (Safari iPhone bỏ qua kích thước khi đổi ảnh bằng content:url — 08/10) */ .nav-logo-pnm-bac{display:none !important} @media(max-width:768px){ .co-hero .nav:not(.scrolled) .nav-logo-pnm:not(.nav-logo-pnm-bac){display:none !important} .co-hero .nav:not(.scrolled) .nav-logo-pnm-bac{display:block !important;filter:brightness(1.35) contrast(1.05) drop-shadow(0 1px 2px rgba(0,0,0,.6))} } /* ---------- CHÂN TRANG: logo PNM bạc trong suốt + tên, CÂN với Mega (Sếp 08/10) ---------- */ .fd-brand{align-items:center;gap:28px} .fd-pnm{display:inline-flex;flex-direction:column;align-items:center;gap:6px} .fd-logo-pnm{height:46px !important;width:auto;-webkit-mask-image:none !important;mask-image:none !important; filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))} .fd-pnm-ten{font:700 11px/1 'Inter',sans-serif;letter-spacing:.02em;color:#c9cfd4;white-space:nowrap} .fd-logo-mega{height:78px !important;opacity:1} @media(max-width:768px){ .fd-brand{gap:22px} .fd-logo-pnm{height:36px !important} .fd-pnm-ten{font-size:8.6px} .fd-logo-mega{height:62px !important} } /* ---------- NHÀ MÁY: CHỈ LOGO (Sếp 08/10) — bỏ ghi chú, bỏ khung lồng, logo đều cỡ ---------- */ .mill-tag{display:none !important} .mill{min-height:120px;padding:22px 18px;gap:0} .mill-logo{background:none !important;border:0 !important;box-shadow:none !important;padding:0 !important;border-radius:0 !important; width:82%;max-width:200px;height:58px;max-height:none;object-fit:contain} .mill:hover .mill-logo{box-shadow:none !important;transform:scale(1.06)} @media(max-width:768px){ .mill{min-height:96px;padding:16px 12px} .mill-logo{height:46px} } /* chân trang điện thoại: chừa chỗ cho 2 nút tròn */ @media(max-width:768px){ .footer-dark{padding-bottom:150px} } /* ---------- CHÂN TRANG GỌN kiểu PYVina (Sếp 08/10): logo · giới thiệu 1 câu · LIÊN HỆ 4 dòng, canh giữa ---------- */ .fd-inner{flex-direction:column;align-items:center;justify-content:center;gap:0;padding:52px 24px 28px;text-align:center} .fd-brand{justify-content:center} .fd-lh{max-width:760px;margin:26px auto 0;padding:0 24px 30px;text-align:center;color:rgba(255,255,255,.72)} .fd-ten{font:800 22px/1.2 'Inter',sans-serif;letter-spacing:.04em;color:#fff;margin-bottom:12px} .fd-gt{font:400 15px/1.75 'Inter',sans-serif;color:rgba(255,255,255,.66);margin:0 auto 26px;max-width:620px} .fd-lh-tit{font:600 13px/1 'Inter',sans-serif;letter-spacing:.24em;color:rgba(255,255,255,.55);margin-bottom:16px} .fd-lh-ds{list-style:none;padding:0;margin:0;display:grid;gap:10px;font:400 15px/1.55 'Inter',sans-serif} .fd-lh-ds li span{margin-right:8px} .fd-lh-ds a{color:#ffb27a;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,178,122,.45)} .fd-lh-ds a:hover{color:#fff} .footer-dark .footer{justify-content:center;text-align:center;gap:6px 18px} @media(max-width:768px){ .fd-inner{padding:40px 16px 20px;align-items:center} .fd-ten{font-size:19px} .fd-gt,.fd-lh-ds{font-size:14px} .fd-lh{padding:0 8px 24px} } /* Sếp 08/10: bỏ tên + giới thiệu, mỗi địa chỉ một dòng, chân trang ngắn lại */ .fd-lh{margin-top:22px} .fd-lh-ds li{line-height:1.5} .footer-dark{padding-bottom:0 !important} .footer-dark .footer{padding-top:16px;padding-bottom:18px} @media(max-width:768px){ .footer-dark .footer{justify-content:flex-start;text-align:left;padding:14px 16px 26px} .fd-lh-ds{gap:12px} } .lh-fab{transition:opacity .3s,transform .3s} .lh-fab.lh-an{opacity:0;transform:translateY(20px);pointer-events:none} @media(max-width:768px){ .fd-lh-ds{text-align:left;max-width:360px;margin:0 auto} .fd-lh-ds li{display:grid;grid-template-columns:26px 1fr;align-items:start} .fd-lh-ds li span{margin:0} } /* Lô thép H ở cảng (Sếp 08/10): bắt đầu PHÓNG XA thấy trọn cảng + cẩu, rồi ZOOM VÀO đống thép cho hùng vĩ */ .hero-slides .s.kb-vao{background-position:50% 62%} .hero-slides .s.kb-vao.on,.hero-slides .s.kb-vao:nth-child(odd).on{animation:kb-vao 7.5s cubic-bezier(.25,.1,.25,1) forwards} @keyframes kb-vao{from{transform:scale(1) translate(0,0)}to{transform:scale(1.32) translate(0,-3%)}} @media (prefers-reduced-motion: reduce){.hero-slides .s.kb-vao.on{animation:none !important}} /* Sếp 08/10: MÁY TÍNH — lớp phủ sau chữ trong hơn một chút */ @media(min-width:769px){ .hero.co-slide::after{ background: radial-gradient(600px circle at var(--mx,70%) var(--my,30%), rgba(217,72,26,.06), transparent 60%), linear-gradient(100deg, rgba(246,244,239,.84) 0%, rgba(246,244,239,.70) 28%, rgba(246,244,239,.28) 56%, rgba(246,244,239,.06) 100%), linear-gradient(180deg, rgba(246,244,239,0) 82%, rgba(246,244,239,.85) 100%); } .hero.co-slide .hero-right{background:radial-gradient(closest-side, rgba(246,244,239,.82) 0%, rgba(246,244,239,.70) 50%, rgba(246,244,239,.32) 78%, rgba(246,244,239,0) 100%)} .hero h1,.hero-points b,.stat-num{text-shadow:0 1px 14px rgba(246,244,239,.85)} } @media(min-width:769px){ .hero h1 .orange,.hero h1 .orange *{text-shadow:none !important} .hero h1 .orange{filter:drop-shadow(0 1px 8px rgba(246,244,239,.7))} } /* Sếp 08/10 — MÁY TÍNH: "CHÚNG TÔI CUNG ỨNG" có vệt lóe sáng THẤY RÕ + quầng sáng dời sang TRÁI cho chữ "CHÚNG" rõ */ @media(min-width:769px){ .hero-lead-anh{padding:34px 46px;margin:-34px -46px 4px; background:radial-gradient(ellipse 62% 78% at 34% 50%, rgba(246,244,239,.94) 0%, rgba(246,244,239,.78) 48%, rgba(246,244,239,.30) 78%, rgba(246,244,239,0) 100%)} .hero-lead-anh::after{inset:34px 46px;mix-blend-mode:normal; background:linear-gradient(105deg, transparent 42%, rgba(255,255,255,.0) 44%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 56%, transparent 58%) 0 0/260% 100% no-repeat; filter:drop-shadow(0 0 6px rgba(255,255,255,.9));animation:kim-lot2 4.2s ease-in-out infinite} } @media(min-width:769px){ .hero-lead-anh{background:radial-gradient(closest-side at 40% 50%, rgba(246,244,239,.95) 0%, rgba(246,244,239,.82) 55%, rgba(246,244,239,.35) 82%, rgba(246,244,239,0) 100%)} .hero-lead-anh::after{background:linear-gradient(105deg, transparent 36%, rgba(255,255,255,.95) 50%, transparent 64%) 0 0/240% 100% no-repeat} .hero-lead-anh img{animation:kim-bung 4.2s ease-in-out infinite} } @keyframes kim-bung{0%,58%,100%{filter:brightness(1) drop-shadow(0 2px 4px rgba(20,23,28,.2))} 78%{filter:brightness(1.45) contrast(1.1) drop-shadow(0 0 10px rgba(255,255,255,.9)) drop-shadow(0 2px 4px rgba(20,23,28,.2))}} @media (prefers-reduced-motion: reduce){.hero-lead-anh img{animation:none}} /* Sếp 08/10: lô H mở đầu PHÓNG XA HƠN (thấy trọn cẩu + trời), zoom sâu hơn, 9 giây */ .hero-slides .s.kb-vao{inset:-1%;background-position:50% 55%} .hero-slides .s.kb-vao.on,.hero-slides .s.kb-vao:nth-child(odd).on{animation:kb-vao2 9s cubic-bezier(.3,.05,.3,1) forwards} @keyframes kb-vao2{from{transform:scale(.99) translate(0,0)}to{transform:scale(1.42) translate(0,-4%)}} /* Sếp 08/10: Mac bật "Giảm chuyển động" vẫn cho chữ CHÚNG TÔI CUNG ỨNG LÓE SÁNG (hiệu ứng tại chỗ, không di chuyển màn hình) */ @media (prefers-reduced-motion: reduce){ .hero-lead-anh::after{opacity:1 !important;animation:kim-lot2 4.2s ease-in-out infinite !important} @media(min-width:769px){ .hero-lead-anh img{animation:kim-bung 4.2s ease-in-out infinite !important} } @media(max-width:768px){ .hero-lead-anh::after{animation:kim-lot2 5.5s ease-in-out infinite !important} } } /* Sếp 08/10: ý nhà máy dài ⇒ máy tính cũng xếp 2 tầng (tên ý / chi tiết), không tràn */ @media(min-width:769px){ .hero-points{gap:10px} .hero-points li{flex-wrap:wrap;gap:1px 12px} .hero-points b{min-width:0} .hero-points span{white-space:normal !important;flex-basis:100%;padding-left:28px;font-size:15px} } /* ---------- ĐA NGÔN NGỮ (12/10/2026): nút VI | EN | 한국어 | 中文 + phông chữ Hàn/Trung ---------- */ .lang-sw{display:flex;align-items:center;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.04em;white-space:nowrap;flex-shrink:0} .lang-sw a{color:var(--text-3);text-decoration:none;padding:4px 7px;line-height:1;transition:color .2s} .lang-sw a+a{border-left:1px solid var(--line)} .lang-sw a:hover{color:var(--hot)} .lang-sw a.on{color:var(--hot);font-weight:700} html[lang="ko"] .lang-sw a,html[lang^="zh"] .lang-sw a{font-family:'JetBrains Mono','Apple SD Gothic Neo','Malgun Gothic','PingFang SC','Microsoft YaHei',sans-serif} @media(max-width:768px){ .nav-mobile-btn{margin-left:auto} .lang-sw{font-size:10px} .lang-sw a{padding:4px 5px} } /* trang không phải tiếng Việt: ảnh chữ "CHÚNG TÔI CUNG ỨNG" là ảnh tiếng Việt ⇒ thay bằng chữ thật của ngôn ngữ đó (mọi cỡ màn) */ html:not([lang="vi"]) .hero-lead-anh picture{display:none !important} html:not([lang="vi"]) .hero-lead-anh::after{display:none !important} html:not([lang="vi"]) .hero-lead-anh{filter:none !important;max-width:none !important;line-height:1} html:not([lang="vi"]) .hero-lead-anh .lead-chu{ display:inline-block !important;font:900 clamp(22px,2.2vw,32px)/1.05 'Archivo Black','Archivo','Inter',sans-serif;text-transform:uppercase;letter-spacing:.01em; background:linear-gradient(180deg,#8e979f 0%,#3f474e 55%,#20262b 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent; animation:none;transform:none;padding:0;margin:0;filter:none;white-space:normal; } @media(max-width:768px){ html:not([lang="vi"]) .hero-lead-anh .lead-chu{font-size:24px;background:linear-gradient(180deg,#ffffff 0%,#dfe4e8 40%,#aab3bb 100%); -webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 2px 1px rgba(0,0,0,.6))} } /* Hàn / Trung: phông chữ hệ thống có Hangul / Hán tự (không nạp webfont nặng); chữ in hoa & chữ ngắt theo từ */ html[lang="ko"] body,html[lang="ko"] .hero-points,html[lang="ko"] .section-desc{font-family:'Inter','Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR','NanumGothic',sans-serif} html[lang^="zh"] body,html[lang^="zh"] .hero-points,html[lang^="zh"] .section-desc{font-family:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif} html[lang="ko"] h1,html[lang="ko"] h2,html[lang="ko"] h3,html[lang="ko"] .cat-name,html[lang="ko"] .section-title,html[lang="ko"] .pi-name,html[lang="ko"] .lead-chu{font-family:'Archivo Black','Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif;font-weight:900;word-break:keep-all} html[lang^="zh"] h1,html[lang^="zh"] h2,html[lang^="zh"] h3,html[lang^="zh"] .cat-name,html[lang^="zh"] .section-title,html[lang^="zh"] .pi-name,html[lang^="zh"] .lead-chu{font-family:'Archivo Black','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;font-weight:900} html[lang="ko"] .hero h1,html[lang^="zh"] .hero h1{letter-spacing:0} /* ---------- "CHÚNG TÔI CUNG ỨNG" = CLIP CHỮ THÉP 4 NGÔN NGỮ (Sếp 12/10: "chèn clip vào chỗ chúng tôi cung ứng") ---------- Clip nền TRẮNG ⇒ mix-blend-mode:multiply cho nền trắng tan vào quầng sáng; cắt đúng dải chữ (object-fit:cover theo khung ảnh cũ 1137×276). Có clip thì ẩn ảnh tĩnh + tắt vệt sáng (vệt sáng dùng mặt nạ ảnh tĩnh, lệch với chữ trong clip). Chạy ở MỌI máy, kể cả máy bật "giảm chuyển động" (máy Sếp bật — chữ đổi chậm, không nhấp nháy). Mỗi bản ngôn ngữ chạy từ đoạn của mình (fx.js). */ /* [12/10 — Sếp: "phải đảm bảo nền không bị trắng"]