/*
Theme Name: PGS Agency
Theme URI: https://pgsagency.vn
Author: PGS Agency
Description: Giao diện PGS Agency xuất từ thiết kế Figma (page "Ngày 27").
Version: 1.0.0
Text Domain: pgs-agency
*/
html,body{margin:0;padding:0;background:#fff}
body{overflow-x:hidden}
.pgs-wrap{width:1440px;margin:0 auto;transform-origin:0 0}
.pgs-fig{position:relative;width:1440px}
.pgs-fig [data-n]{box-sizing:border-box}
.pgs-fig a{color:inherit;text-decoration:none}
.pgs-link{cursor:pointer}
.pgs-link:hover{opacity:.85}
.pgs-input{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;padding:0 16px;font:16px 'Kanit',sans-serif;color:#030303;outline:none;box-sizing:border-box}
.pgs-input::placeholder{color:#9A9A9A}
textarea.pgs-input{padding:14px 16px;resize:none}
.pgs-hide-ph{visibility:hidden}
.pgs-toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%);background:#030303;color:#fff;font:16px 'Kanit',sans-serif;padding:14px 24px;border-radius:100px;z-index:9999;opacity:0;transition:opacity .3s}
.pgs-toast.is-on{opacity:1}
.pgs-mega{position:fixed;top:82px;left:0;width:100%;z-index:900;display:none}
.pgs-mega.is-open{display:block}
.pgs-mega .pgs-fig{margin:0 auto}
.pgs-popup{position:fixed;inset:0;z-index:1000;overflow:auto}
.pgs-popup[hidden]{display:none}
.pgs-popup .pgs-fig>div{background:none!important}
.pgs-popup [data-n="Lớp phủ"]{position:fixed!important;inset:0;width:auto!important;height:auto!important}
.pgs-header-fixed{position:fixed!important;top:0;z-index:950;box-shadow:0 6px 24px rgba(0,0,0,.08)}
@keyframes pgsMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Header pulled out of the smooth-scroll content so it stays fixed. */
.pgs-headbar{position:fixed;top:0;left:0;right:0;z-index:950;height:82px;pointer-events:none}
.pgs-headbar>.pgs-wrap{position:relative;height:82px;pointer-events:auto}
.pgs-headbar [data-n="Header"]{transition:box-shadow .3s}
.pgs-headbar.is-scrolled [data-n="Header"]{box-shadow:0 6px 24px rgba(3,3,3,.06)}
.pgs-page [data-n="Liên hệ & Footer"]{display:none}
.pgs-header-wide{justify-content:space-between!important}
.pgs-header-wide>[data-n="Nav"]{position:absolute!important;left:50%;transform:translateX(-50%);width:auto!important;flex:none!important}
.pgs-header-wide>[data-n="Actions"]{flex:0 0 auto!important;width:auto!important}
.pgs-header-wide>[data-n^="Logo"]{flex:0 0 106px!important}

/* Footer — Aleric "Let's talk" layout. */
.pgs-footer{position:relative;overflow:hidden;background:#030303;height:968px;padding:0 41px;box-sizing:border-box;font-family:'Kanit',sans-serif;color:#999;isolation:isolate}
.pgs-footer a{color:inherit;text-decoration:none}
.pgs-footer__shape{position:absolute;left:0;bottom:0;z-index:-1}
.pgs-footer__top{display:flex;justify-content:space-between;align-items:flex-start;padding-top:90px;height:430px;box-sizing:border-box}
.pgs-footer__sub{display:inline-flex;align-items:center;gap:20px;font:500 18px/26px 'Space Grotesk',sans-serif;color:#F8D000}
.pgs-footer .pgs-footer__title{display:block;margin:14px 0 26px -10px;font:500 145px/159.5px 'Space Grotesk',sans-serif;letter-spacing:-2.9px;text-transform:uppercase;color:#fff;white-space:nowrap}
.pgs-footer__title .char{display:inline-block;transform-origin:0 100%}
.pgs-footer__social{display:flex;gap:20px}
.pgs-footer__social svg{flex:none}
.pgs-footer__social a{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 20px;border-radius:100px;background:rgba(26,26,26,.83);font:500 16px/26px 'Space Grotesk',sans-serif;text-transform:uppercase;color:#999;transition:color .3s,background .3s}
.pgs-footer__social a:hover{color:#030303;background:#F8D000}
.pgs-round-btn{position:relative;z-index:1;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;width:160px;height:160px;margin-top:67px;border-radius:50%;background:rgba(26,26,26,.83);font:500 18px/20px 'Space Grotesk',sans-serif;text-transform:uppercase;text-align:center;color:#fff!important;transition:color .4s}
.pgs-round-btn>span{display:block;margin-bottom:10px;line-height:0}
.pgs-round-btn__dot{position:absolute;left:var(--x,32px);top:var(--y,100%);width:0;height:0;border-radius:50%;background:#F8D000;transform:translate(-50%,-50%);z-index:-1;transition:width .6s ease-out,height .6s ease-out}
.pgs-round-btn:hover{color:#030303!important}
.pgs-round-btn:hover .pgs-round-btn__dot{width:420px;height:420px}
.pgs-footer__main{display:flex;gap:30px;height:466px;padding-top:45px;box-sizing:border-box;border-top:1px solid rgba(153,153,153,.1)}
.pgs-footer__brand{width:536px;flex:none}
.pgs-footer__brand img{display:block;width:72px;height:72px;object-fit:contain}
.pgs-footer__brand p{margin:24px 0 0;max-width:400px;font:500 18px/28px 'Kanit',sans-serif;color:#999}
.pgs-footer__cols{display:grid;grid-template-columns:439px 308px;column-gap:30px;row-gap:62px;align-content:start}
.pgs-footer__col h3,.pgs-footer__news h3{margin:0 0 15px;font:700 25px/27.5px 'Space Grotesk',sans-serif;letter-spacing:-.5px;text-transform:uppercase;color:#fff}
.pgs-footer__col p{margin:0;font:500 18px/28px 'Kanit',sans-serif;color:#999}
.pgs-footer__col a:hover{color:#F8D000}
.pgs-footer__news{grid-column:1/-1;margin:0}
.pgs-footer__news h3{margin-bottom:25px}
.pgs-footer__input{position:relative}
.pgs-footer__input input{width:100%;height:70px;box-sizing:border-box;padding:5px 80px 5px 30px;border:1px solid transparent;border-radius:10px;background:rgba(26,26,26,.83);font:500 16px 'Kanit',sans-serif;color:#fff;outline:none;transition:border-color .3s}
.pgs-footer__input input:focus{border-color:rgba(248,208,0,.5)}
.pgs-footer__input input::placeholder{color:#999}
.pgs-footer__input button{position:absolute;right:30px;top:50%;transform:translateY(-50%);padding:0;border:0;background:none;color:#F8D000;cursor:pointer;line-height:0}
.pgs-footer__bottom{display:flex;justify-content:space-between;align-items:center;height:72px;border-top:1px solid rgba(153,153,153,.1);font:400 16px/26px 'Kanit',sans-serif}
.pgs-footer__bottom b{font-weight:400;color:#fff}
.pgs-footer__bottom nav{display:flex;gap:48px}
.pgs-footer__bottom nav a{font:500 15px/26px 'Kanit',sans-serif;text-transform:uppercase;color:#fff}
.pgs-footer__bottom nav a:hover{color:#F8D000}

/* Back to top with scroll progress ring. */
.pgs-backtop{position:fixed;right:30px;bottom:30px;z-index:940;width:48px;height:48px;border:0;border-radius:50%;padding:0;background:#fff;box-shadow:0 6px 20px rgba(3,3,3,.12);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .3s,transform .3s,visibility .3s}
.pgs-backtop.is-on{opacity:1;visibility:visible;transform:none}
.pgs-backtop svg{position:absolute;inset:0}
.pgs-backtop span{position:relative;font:600 18px 'Space Grotesk',sans-serif;color:#030303}

/* Image layer used by the scroll scale/parallax effect. */
.pgs-fx-img{position:absolute;inset:0;border-radius:inherit;will-change:transform}
.pgs-fx-line{display:block}
.pgs-fx-gl{position:absolute;inset:0;width:100%!important;height:100%!important;border-radius:inherit}
/* tp_text_invert: each line is painted by a two-tone gradient that slides from grey to ink. */
.pgs-fx-invert{background-size:200% 100%;background-position:100% center;-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent}
.pgs-fx-invert *{color:transparent!important;-webkit-text-fill-color:transparent}
@media (prefers-reduced-motion:reduce){.pgs-round-btn__dot{transition:none}}

.pgs-card-link:hover{opacity:1}
.pgs-card-link:hover [data-th]{text-decoration:none}

/* shown once the stylesheet is in (inc/live.php hides it before) */
#smooth-wrapper{visibility:visible!important}