/* ========================================================================== 9Prep — CHROME: header + footer + nút (nạp TOÀN SITE) Thay header/footer Flatsome trên mọi trang. Mọi selector nằm dưới .np-topbar / .np-footer và được "gia cố" để không bị CSS Flatsome đè. ========================================================================== */ :root{ --np-ink:#191714; --np-ink2:#454039; --np-muted:#746c63; --np-line:#e7dfd2; --np-paper:#fff; --np-cream:#fbfaf6; --np-cream2:#f4efe5; --np-brand:#c8442c; --np-brand-dark:#a83622; --np-brand-soft:#f9e5df; --np-yellow:#ffe34a; --np-yellow-soft:#fff7c9; --np-green:#315f3c; --np-green-soft:#e4efe6; --np-dark:#191714; --np-shadow:0 18px 48px rgba(46,35,25,.09); --np-sans:'Noto Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --np-display:'Manrope','Noto Sans',sans-serif; --np-topbar-h:72px; } .np-topbar,.np-topbar *,.np-footer,.np-footer *{box-sizing:border-box} .np-wrap{width:min(1160px,calc(100% - 40px));margin-inline:auto} .np-skip{position:absolute;left:-9999px;top:8px;z-index:9999;background:#fff;color:#191714!important;padding:10px 14px;border-radius:8px;font:700 14px/1.2 var(--np-sans);text-decoration:none} .np-skip:focus{left:12px} /* ---------- Nút (dùng chung header, footer, trang 9Prep) ---------- */ a.np-btn,button.np-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:12px 20px;margin:0;border-radius:11px;border:1px solid transparent;font-family:var(--np-display);font-size:14px;font-weight:800;line-height:1.2;letter-spacing:0;text-transform:none;text-decoration:none;cursor:pointer;box-shadow:none;transition:transform .16s,background .16s,border-color .16s,box-shadow .16s} a.np-btn:hover,button.np-btn:hover{transform:translateY(-1px);text-decoration:none} .np-btn.np-btn-brand,.np-btn.np-btn-brand:hover,.np-btn.np-btn-brand:focus,.np-btn.np-btn-brand:visited{color:#fff!important} .np-btn.np-btn-brand{background:var(--np-brand);box-shadow:0 10px 24px rgba(200,68,44,.18)} .np-btn.np-btn-brand:hover{background:var(--np-brand-dark)} .np-btn.np-btn-white,.np-btn.np-btn-white:hover,.np-btn.np-btn-white:visited{color:var(--np-ink)!important} .np-btn.np-btn-white{background:#fff;border-color:rgba(255,255,255,.2)} .np-btn.np-btn-line,.np-btn.np-btn-line:hover,.np-btn.np-btn-line:visited{color:var(--np-ink)!important} .np-btn.np-btn-line{background:#fff;border-color:var(--np-line)} .np-btn.np-btn-line:hover{border-color:#b9ab9d} .np-btn.np-btn-ghost,.np-btn.np-btn-ghost:hover,.np-btn.np-btn-ghost:visited{color:#fff!important} .np-btn.np-btn-ghost{background:transparent;border-color:rgba(255,255,255,.38)} .np-btn.np-btn-ghost:hover{border-color:#fff} .np-btn.np-btn-lg{min-height:54px;padding:14px 24px;font-size:14.5px} /* Bỏ khoảng trống mà theme/plugin chừa cho header dính của Flatsome — header 9Prep đã tự dính (sticky) nên không cần khoảng này. Giữ nguyên margin-top của vì đó là chỗ của thanh admin WordPress. */ body.np-page, body:has(> #np-topbar), body:has(> .np-skip + #np-topbar){padding-top:0!important;margin-top:0!important} /* ---------- HEADER ---------- */ .np-topbar{position:sticky;top:0;z-index:999;margin:0;padding:0;background:rgba(25,23,20,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08);font-family:var(--np-sans);font-size:16px;line-height:1.5;color:#fff;transition:box-shadow .2s} .np-topbar.is-scrolled{box-shadow:0 8px 24px rgba(0,0,0,.18)} .admin-bar .np-topbar{top:32px} @media (max-width:782px){.admin-bar .np-topbar{top:46px}} @media (max-width:600px){.admin-bar .np-topbar{top:0}} .np-topbar .np-nav{position:relative;height:var(--np-topbar-h);display:flex;align-items:center;justify-content:space-between;gap:20px} .np-topbar a,.np-footer a{text-decoration:none} a.np-brand,a.np-brand:hover,a.np-brand:visited{display:flex;align-items:center;gap:9px;color:#fff!important;font-family:var(--np-display);font-size:22px;font-weight:800;letter-spacing:-.03em;line-height:1.65;text-transform:none} .np-brand b{color:var(--np-yellow);font-weight:800} .np-mark{display:flex;align-items:flex-end;gap:3px;height:22px} .np-mark i{display:block;width:4px;border-radius:3px;background:var(--np-brand);font-style:normal} .np-mark i:nth-child(1){height:9px}.np-mark i:nth-child(2){height:15px} .np-mark i:nth-child(3){height:22px;background:var(--np-yellow)}.np-mark i:nth-child(4){height:12px} .np-topbar .np-navlinks{display:flex;align-items:center;gap:32px;margin:0;padding:0} .np-topbar .np-navlinks > a{font-size:15px;font-weight:600;line-height:1.2;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.72)!important} .np-topbar .np-navlinks > a:hover{color:#fff!important} .np-topbar .np-navlinks-act{display:none} .np-topbar .np-navact{display:flex;align-items:center;gap:16px} .np-topbar a.np-login{font-size:14.5px;font-weight:700;color:rgba(255,255,255,.74)!important} .np-topbar a.np-login:hover{color:#fff!important} .np-topbar a.np-btn{min-height:42px;padding:10px 18px;font-size:14px} /* ---------- Ảnh đại diện trong header ---------- */ .np-topbar a.np-ava,.np-ava{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:0 0 36px;border-radius:50%;overflow:hidden;background:var(--np-brand);color:#fff!important;font-family:var(--np-display);font-size:15px;font-weight:800;line-height:1;text-decoration:none;border:1.5px solid rgba(255,255,255,.22);transition:border-color .16s,transform .16s} .np-topbar a.np-ava:hover{border-color:var(--np-yellow);transform:translateY(-1px)} .np-topbar a.np-ava:focus-visible{outline:3px solid var(--np-yellow);outline-offset:3px} .np-ava img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%} .np-ava > span{display:block;transform:translateY(.5px)} /* màu nền cố định theo từng người dùng */ .np-ava[data-tone="0"]{background:#C8442C} .np-ava[data-tone="1"]{background:#315f3c} .np-ava[data-tone="2"]{background:#33507f} .np-ava[data-tone="3"]{background:#8a5a1f} .np-ava[data-tone="4"]{background:#6d3a6a} .np-ava[data-tone="5"]{background:#1f6b73} /* dòng tài khoản trong menu mobile */ .np-topbar .np-ava-row{display:flex;align-items:center;gap:10px;justify-content:flex-start;text-align:left} .np-ava.np-ava-sm{width:28px;height:28px;flex:0 0 28px;font-size:12.5px;border-width:0} /* nút mở menu — reset hẳn style button của Flatsome */ .np-topbar button.np-burger{display:none;appearance:none;-webkit-appearance:none;width:40px;height:38px;min-height:0;min-width:0;margin:0;padding:0 9px;border:1px solid rgba(255,255,255,.2)!important;border-radius:9px;background:transparent!important;box-shadow:none!important;text-transform:none;letter-spacing:0;line-height:1;cursor:pointer;flex-direction:column;justify-content:center;gap:4px} .np-topbar .np-burger span{display:block;height:2px;width:auto;border-radius:2px;background:#fff;transition:transform .2s,opacity .2s} .np-topbar.is-open .np-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)} .np-topbar.is-open .np-burger span:nth-child(2){opacity:0} .np-topbar.is-open .np-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* ---------- FOOTER ---------- */ .np-footer{position:relative;overflow:hidden;display:block;margin:0;background:#191714;color:rgba(255,255,255,.66);padding:72px 0 28px;font-family:var(--np-sans);font-size:16px;line-height:1.65;text-align:left} .np-footer::before,.np-footer::after{content:"";position:absolute;border-radius:50%;pointer-events:none} .np-footer::before{width:520px;height:520px;left:-200px;bottom:-300px;background:radial-gradient(circle,rgba(200,68,44,.16),rgba(200,68,44,0) 68%)} .np-footer::after{width:560px;height:560px;right:-220px;top:-280px;background:radial-gradient(circle,rgba(255,227,74,.07),rgba(255,227,74,0) 68%)} .np-footer .np-wrap{position:relative;z-index:1} .np-footer .np-footgrid{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.09)} .np-footer a.np-brand{font-size:28px;margin-bottom:18px} .np-footer .np-mark{height:26px;gap:4px} .np-footer .np-mark i{width:5px} .np-footer .np-mark i:nth-child(1){height:11px}.np-footer .np-mark i:nth-child(2){height:18px} .np-footer .np-mark i:nth-child(3){height:26px}.np-footer .np-mark i:nth-child(4){height:14px} .np-footer p.np-foot-tagline{max-width:34ch;margin:0 0 26px;font-size:15.5px;line-height:1.7;color:rgba(255,255,255,.62)} .np-footer .np-foot-tagline em{font-style:normal;font-weight:600;color:var(--np-yellow)} .np-footer .np-social{display:flex;gap:12px} .np-footer .np-social a{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.72)!important;transition:border-color .16s,color .16s,background .16s} .np-footer .np-social a:hover{border-color:var(--np-yellow);color:var(--np-yellow)!important;background:rgba(255,227,74,.06)} .np-footer .np-social svg{width:21px;height:21px;fill:currentColor;display:block} .np-footer .np-footgrid h4{margin:6px 0 22px;padding:0;font-family:var(--np-display);font-size:13px;font-weight:800;line-height:1.3;letter-spacing:.18em;text-transform:uppercase;color:var(--np-brand)} .np-footer ul{margin:0;padding:0;list-style:none;display:grid;gap:14px} .np-footer li{margin:0;padding:0;list-style:none;line-height:1.4} .np-footer ul li a,.np-footer ul li a:visited{font-size:15.5px;color:rgba(255,255,255,.66)!important;transition:color .16s} .np-footer ul li a:hover{color:#fff!important} .np-footer .np-copyright{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;padding-top:24px;font-size:13px;color:rgba(255,255,255,.45)} .np-footer .np-copyright a,.np-footer .np-copyright a:visited{color:rgba(255,255,255,.55)!important} .np-footer .np-copyright a:hover{color:#fff!important} .np-topbar a:focus-visible,.np-topbar button:focus-visible,.np-footer a:focus-visible{outline:3px solid var(--np-yellow);outline-offset:3px;border-radius:8px} /* ---------- Responsive ---------- */ @media (max-width:980px){ .np-topbar button.np-burger{display:flex} .np-topbar .np-navlinks{display:none;position:absolute;left:-20px;right:-20px;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 18px;background:rgba(25,23,20,.98);border-bottom:1px solid rgba(255,255,255,.08)} .np-topbar.is-open .np-navlinks{display:flex} .np-topbar .np-navlinks > a{padding:14px 0;font-size:16.5px;border-bottom:1px solid rgba(255,255,255,.07)} .np-topbar .np-navlinks-act{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px} .np-footer{padding:56px 0 26px} .np-footer .np-footgrid{grid-template-columns:1fr 1fr 1fr;gap:38px 28px} .np-footer .np-foot-brand{grid-column:1/-1} } @media (max-width:680px){ .np-wrap{width:min(100% - 28px,1160px)} .np-topbar .np-navlinks{left:-14px;right:-14px;padding:8px 14px 18px} .np-topbar .np-navact .np-login{display:none} .np-topbar a.np-ava{width:34px;height:34px;flex:0 0 34px;font-size:14px} .np-topbar a.np-nav-cta{padding:8px 10px} .np-topbar a.np-brand{font-size:20px} .np-footer .np-footgrid{grid-template-columns:1fr 1fr;gap:34px 22px;padding-bottom:36px} .np-footer .np-footgrid h4{margin:0 0 16px;font-size:12px} .np-footer ul{gap:12px} .np-footer ul li a{font-size:15px} .np-footer .np-copyright{flex-direction:column;gap:6px} } @media (max-width:400px){ .np-topbar .np-nav{gap:8px} .np-topbar a.np-nav-cta{padding:9px 12px;font-size:13px} .np-topbar a.np-brand{font-size:18px} } @media (max-width:330px){ .np-topbar a.np-nav-cta{padding:9px 10px;font-size:12px} } /* ---------- Popup chọn kỹ năng (demo) ---------- */ .np-modal{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;padding:20px} .np-modal.is-open{display:flex} .np-modal-veil{position:absolute;inset:0;background:rgba(15,13,12,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:npFade .2s ease} .np-modal-box{position:relative;width:min(680px,100%);max-height:calc(100vh - 40px);overflow:auto;background:var(--np-paper);border-radius:22px;padding:34px 32px 26px;box-shadow:0 40px 90px rgba(0,0,0,.4);animation:npPop .22s cubic-bezier(.2,.9,.3,1.1)} @keyframes npFade{from{opacity:0}to{opacity:1}} @keyframes npPop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}} .np-modal-x{position:absolute;top:14px;right:14px;width:38px;height:38px;min-height:0;display:grid;place-items:center;padding:0;margin:0;border:1px solid var(--np-line);border-radius:50%;background:#fff;box-shadow:none;cursor:pointer;font-size:18px;line-height:1;color:var(--np-muted);text-transform:none;letter-spacing:0} .np-modal-x:hover{border-color:var(--np-ink);color:var(--np-ink)} .np-modal-kick{display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--np-display);font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--np-brand);margin-bottom:10px} .np-modal-kick::before,.np-modal-kick::after{content:"";width:16px;height:2px;background:currentColor} .np-modal-box h2,.np-modal-box h3{text-transform:none;letter-spacing:normal;font-weight:800;color:var(--np-ink)} .np-page .np-modal-box h2{font-family:var(--np-display);font-size:clamp(23px,2.4vw,28px);line-height:1.2;letter-spacing:-.03em;text-align:center;margin:0 0 8px;color:var(--np-ink)} .np-modal-box p{margin:0} .np-page .np-modal-sub{text-align:center;font-size:15px;line-height:1.6;color:var(--np-ink2);max-width:46ch;margin:0 auto 24px} .np-modal-opts{display:grid;grid-template-columns:1fr 1fr;gap:14px} .np-page a.np-opt{display:flex;flex-direction:column;padding:22px 20px 18px;border:1.5px solid var(--np-line);border-radius:16px;background:#fff;color:var(--np-ink)!important;text-decoration:none;transition:border-color .16s,transform .16s,box-shadow .16s} .np-page a.np-opt:hover{border-color:var(--np-brand);transform:translateY(-2px);box-shadow:0 16px 34px -18px rgba(200,68,44,.6)} .np-opt-ic{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;margin-bottom:14px;font-family:var(--np-display);font-weight:800;font-size:17px} .np-opt-r .np-opt-ic{background:var(--np-brand-soft);color:var(--np-brand)} .np-opt-l .np-opt-ic{background:var(--np-green-soft);color:var(--np-green)} .np-opt-kick{font-family:var(--np-display);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--np-muted);margin-bottom:4px} .np-page .np-opt h3{font-family:var(--np-display);font-size:19px;line-height:1.3;letter-spacing:-.02em;text-transform:none;margin:0 0 6px} .np-page .np-opt p{font-size:14px;line-height:1.55;color:var(--np-ink2);margin:0 0 14px} .np-opt-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px} .np-opt-chips span{font-size:11.5px;font-weight:600;color:var(--np-ink2);background:var(--np-cream);border:1px solid var(--np-line);border-radius:999px;padding:4px 10px} .np-opt-go{margin-top:auto;display:inline-flex;align-items:center;gap:7px;font-family:var(--np-display);font-size:14px;font-weight:800;color:var(--np-brand)} .np-opt-l .np-opt-go{color:var(--np-green)} .np-opt-go i{font-style:normal;transition:transform .16s} .np-opt:hover .np-opt-go i{transform:translateX(3px)} .np-page .np-modal-foot{margin:20px 0 0;text-align:center;font-size:12.5px;color:var(--np-muted)} body.np-modal-open{overflow:hidden} @media (max-width:620px){ .np-modal{padding:12px;align-items:flex-end} .np-modal-box{padding:28px 20px 20px;border-radius:20px;max-height:calc(100vh - 24px)} .np-modal-opts{grid-template-columns:1fr} .np-page .np-opt p{margin-bottom:10px} } @media (prefers-reduced-motion:reduce){.np-modal-veil,.np-modal-box{animation:none}}