/* Home page laid out like the Aleric "Digital Agency" demo.
   Sizes come from measuring that page at 1440 and 1920 wide (client widths 1425 / 1905);
   values in between are interpolated linearly. Below 1200px sections stack. */
.al-home{--ink:#030303;--grey:#525252;--line:#eee;--gold:#F8D000;font-family:'Kanit',sans-serif;color:var(--ink);overflow:hidden;background:#fff}
.al-home *{box-sizing:border-box}
.al-home a{color:inherit;text-decoration:none}
.al-home img{display:block;max-width:100%}
/* Zero-specificity reset so component margins below always win. */
:where(.al-home) :where(h1,h2,h3,h4,h5,p){margin:0}
.al-container{width:min(1343px,calc(100% - 82px));margin:0 auto;position:relative}
.al-sec{padding:140px 0}
.al-arrow{display:block}
/* Parallax images: home.js sizes and moves them (frame + travel height). */
.al-home img[data-speed]{position:relative;width:100%;object-fit:cover;max-width:none}
.al-video>img[data-speed]{position:absolute}

/* Section head: pill on the left, title in the right column (Aleric about / capabilities / testimonials / blog) */
.al-split{display:grid;grid-template-columns:547px 1fr;column-gap:30px}
.al-split--half{grid-template-columns:1fr 1fr}
.al-split--blog{grid-template-columns:644px 1fr}
.al-pill{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 20px;border:1px solid var(--line);border-radius:50px;font:500 16px/26px 'Space Grotesk',sans-serif;color:var(--ink);white-space:nowrap}
.al-pill i{width:8px;height:8px;border-radius:50%;background:var(--gold)}
.al-pill--dark{border-color:rgba(255,255,255,.1);color:#fff}
.al-pill--dark i{background:#fff}
.al-h2{font:700 70px/84px 'Space Grotesk',sans-serif;letter-spacing:-1.4px;text-transform:uppercase}
.al-lead{margin-top:35px;max-width:547px;font:500 22px/35px 'Space Grotesk',sans-serif;color:var(--grey)}
.al-lead--25{font-size:25px}

/* ---------- Header (fixed) ---------- */
.al-header{--ink:#030303;--line:#eee;--gold:#F8D000;position:fixed;top:0;left:0;right:0;z-index:950;height:82px;background:#fff;transition:box-shadow .3s}
.al-header.is-scrolled{box-shadow:0 6px 24px rgba(3,3,3,.06)}
.al-header__in{position:relative;width:min(1775px,calc(100% - 24px));height:100%;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.al-header__logo{display:block;margin-left:-10px}
.al-header__logo img{height:92px;width:auto}
.al-header__nav{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:44px}
.al-header__nav a{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font:700 15px/1 'Space Grotesk',sans-serif;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:20px 0}
.al-header__nav a.has-sub:after{content:'';border:4px solid transparent;border-top-color:#999;margin-top:4px}
.al-header__nav a:hover{color:#777}
.al-header__nav a.is-current{color:#d1a800}
.al-header__act{display:flex;align-items:center;gap:20px}
@media (max-width:1439px){.al-header__nav{gap:26px}.al-header__nav a{font-size:14px}}
.al-header__search{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;background:#fff;cursor:pointer;transition:background-color .3s,border-color .3s,transform .3s}
.al-header__search svg{transition:transform .3s}
.al-header__search:hover{background:var(--gold);border-color:var(--gold)}
.al-header__search:hover svg{transform:rotate(-12deg) scale(1.08)}
.al-header__btn{transition:background-color .3s,color .3s}
.al-header__btn svg{transition:transform .3s}
.al-header__btn:hover{background:var(--gold);color:var(--ink)!important}
.al-header__btn:hover path{stroke:#030303}
.al-header__btn:hover svg{transform:translateX(4px)}
.al-header__btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;border-radius:50px;background:var(--ink);color:#fff!important;font:700 15px/1 'Space Grotesk',sans-serif;text-transform:uppercase;text-decoration:none}

/* ---------- Hero ---------- */
.al-hero{--fs:clamp(44px,calc(80px + (100vw - 1425px) * .0417),110px);--lh:calc(var(--fs) * 1.05)}
.al-hero__wrap{position:relative;width:min(1775px,calc(100% - 24px));margin:0 auto;height:calc(var(--lh) * 3 + 445px)}
.al-hero__rail{position:absolute;left:0;top:220px;width:36px;display:flex;flex-direction:column;align-items:center}
.al-hero__follow{writing-mode:vertical-rl;font:700 18px/26px 'Space Grotesk',sans-serif;color:var(--ink)}
.al-hero__follow-line{display:block;width:1px;height:46px;margin:20px 0 0;background:var(--ink);position:relative}
.al-hero__follow-line:after{content:'';position:absolute;left:-3px;bottom:-1px;border:3.5px solid transparent;border-top:5px solid var(--ink)}
.al-hero__social{margin-top:15px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink)}
.al-hero__follow-line+.al-hero__social{margin-top:62px}
.al-hero__social b{font:700 10px 'Space Grotesk',sans-serif}
/* Pinned version (home.js moves the rail to <body>): same spot as in the hero, stays while scrolling. */
.al-hero__rail.is-fixed{position:fixed;left:max(12px,calc((100vw - 1775px) / 2));top:calc(50% + 41px);transform:translateY(-50%);z-index:900;--ink:#030303;--line:#eee;--gold:#F8D000}
.al-hero__rail.is-fixed .al-hero__social{background:#fff;color:#030303;text-decoration:none;transition:transform .3s,box-shadow .3s}
/* Brand-coloured buttons: Facebook = blue disc with white f, TikTok = white with the tri-colour note, Zalo = blue with white wordmark. */
/* All three buttons alike: 36px white circle, thin border, brand logo 22px centred. */
.al-hero__rail .al-hero__social{width:41px;height:41px;border:1px solid var(--line)!important;overflow:visible}
.al-hero__rail .al-hero__social svg,.al-hero__rail .al-hero__social img{display:block;width:27px!important;height:27px!important}
/* Official Zalo mark (speech-bubble square) shown whole inside the round button, not cropped by it. */
.al-hero__social--zalo{background:#fff!important}
.al-hero__rail .al-hero__social:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(3,3,3,.15);background:#fff}
.al-hero__rail.is-fixed .al-hero__follow{color:#030303!important;mix-blend-mode:normal!important;filter:none!important}
.al-hero__rail.is-fixed .al-hero__follow-line{background:#030303!important;mix-blend-mode:normal!important;filter:none!important}
.al-hero__rail.is-fixed .al-hero__follow-line:after{border-top-color:#030303!important}
@media (max-width:1199px){.al-hero__rail.is-fixed{display:none}}
.al-hero__social:hover{background:var(--gold);border-color:var(--gold)}
.al-hero{--L:clamp(60px,calc(28.07% - 274px),420px);--D:clamp(560px,calc(61.23% - 205px),1200px);--R:clamp(1000px,calc(104.55% - 277px),1700px)}
.al-hero__main{position:absolute;inset:0}
.al-hero__title{position:absolute;left:var(--L);top:200px;font:700 var(--fs)/var(--lh) 'Space Grotesk',sans-serif;letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap}
.al-hero__tag{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:151px;height:65px;margin:calc(var(--fs) * .21) 14px 0 0;transform:translateY(calc(var(--fs) * .09));vertical-align:top;border-radius:50px;background:var(--gold);font:700 25px/25px 'Space Grotesk',sans-serif;letter-spacing:-.5px}
.al-hero__info{position:absolute;top:calc(200px + var(--lh) * 3 - 27px);left:var(--D);width:clamp(380px,calc(421px + (100vw - 1425px) * .0167),460px)}
.al-hero__info p{font:400 20px/28px 'Kanit',sans-serif;color:var(--grey)}
.al-hero__video{display:inline-flex;align-items:center;gap:20px;margin-top:60px}
.al-hero__play{width:70px;height:70px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;padding-left:4px;transition:transform .3s}
.al-hero__play{transition:transform .3s,background-color .3s,color .3s}
.al-hero__video:hover .al-hero__play{transform:scale(1.08);background:var(--gold);color:var(--ink)}
.al-hero__video b{font:700 18px/19.8px 'Space Grotesk',sans-serif}
.al-hero__customer{position:absolute;top:calc(200px + var(--lh) * 3 + 52px);left:var(--L);display:flex;align-items:center;gap:20px}
.al-hero__avatars{display:flex}
.al-hero__avatars img{width:44px;height:44px;border-radius:50%;border:2px solid #fff;object-fit:cover;margin-left:-13px}
.al-hero__avatars img:first-child{margin-left:0}
.al-hero__customer p{font:500 16px/20.8px 'Kanit',sans-serif;color:var(--grey)}
.al-hero__customer b{color:var(--ink)}
.al-hero__side{position:absolute;top:215px;left:var(--R);width:196px}
.al-hero__side h5{font:500 25px/27.5px 'Space Grotesk',sans-serif;letter-spacing:-.5px}
.al-hero__side-line{display:block;height:1px;margin-top:10px;background:var(--ink);position:relative}
.al-hero__side-line:before,.al-hero__side-line:after{content:'';position:absolute;top:-2px;width:5px;height:5px;border-radius:50%;background:var(--ink)}
.al-hero__side-line:before{left:0}.al-hero__side-line:after{right:0}
.al-hero__shape{margin-top:116px}

/* ---------- Launch: big image + card (548 high, 40 below the hero) ---------- */
.al-launch{display:grid;grid-template-columns:72.3% 1fr;column-gap:25px;height:548px;margin-top:40px}
.al-launch__img{position:relative;overflow:hidden}
.al-launch__img img{width:100%;height:100%;object-fit:cover}
.al-launch__play{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;background:var(--gold);color:var(--ink);display:grid;place-items:center;padding-left:5px}
.al-launch__badge{position:absolute;left:40px;bottom:40px;height:44px;padding:0 20px;border-radius:50px;background:#fff;display:flex;align-items:center;gap:10px;font:400 16px 'Kanit',sans-serif;color:var(--grey)}
.al-launch__badge b{font:700 16px 'Space Grotesk',sans-serif;color:var(--ink)}
.al-launch__card{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:70px 60px 182px;background-color:var(--gold);background-image:linear-gradient(rgba(3,3,3,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(3,3,3,.07) 1px,transparent 1px);background-size:36px 36px}
/* Aleric "Recently Launched" card: mark at the top, divider + label + title pinned near the bottom, bar on the edge. */
.al-launch__card{padding:70px 60px 70px;justify-content:flex-end}
.al-launch__card:after{content:'';position:absolute;left:0;right:0;bottom:0;height:10px;background:var(--ink)}
.al-launch__mark{width:100px;height:100px;object-fit:contain;padding:14px;background:#fff;border-radius:50%}
.al-launch__bottom{display:block;padding-top:28px;border-top:1px solid rgba(3,3,3,.25)}
.al-launch__bottom>span{display:block;font:400 18px/26px 'Kanit',sans-serif}
.al-launch__card b{display:block;margin-top:8px;font:700 25px/27.5px 'Space Grotesk',sans-serif;letter-spacing:-.5px;position:relative;padding-right:40px}
.al-launch__card i{position:absolute;right:0;bottom:4px;transition:transform .3s}
.al-launch__card:hover i{transform:translate(4px,-4px)}

/* ---------- About ---------- */
.al-about{padding:140px 0 155px}
.al-about__title{font:500 50px/60px 'Space Grotesk',sans-serif;color:var(--ink)}
.al-about__desc{margin-top:25px;font:500 22px/35px 'Space Grotesk',sans-serif;color:var(--grey)}
.al-about__row{display:grid;grid-template-columns:317px 211px 423px 1fr;column-gap:25px;margin-top:96px;align-items:start}
.al-about__exp{display:flex;align-items:flex-start}
.al-about__exp b{font:500 100px/100px 'Space Grotesk',sans-serif;letter-spacing:-2px}
.al-about__exp sup{font:500 50px/1 'Space Grotesk',sans-serif;margin:0 14px 0 2px}
.al-about__exp span{margin-top:33px;font:700 18px/26px 'Space Grotesk',sans-serif}
.al-about__thumb{position:relative;overflow:hidden}
.al-about__thumb--sm{height:209px;overflow:visible}
.al-about__frame{display:block;height:209px;overflow:hidden}
.al-about__frame img{width:100%;object-fit:cover}
.al-about__icon{position:absolute;left:121px;top:249px}
.al-about__thumb--lg{height:399px}
.al-about__thumb--lg img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.al-about__btn{justify-self:end;margin-right:40px}
.al-round{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;width:160px;height:160px;border-radius:50%;border:1px solid var(--line);background:#fff;font:500 18px/20px 'Space Grotesk',sans-serif;text-transform:uppercase;text-align:center;transition:color .4s}
.al-round>span{display:block;margin-bottom:10px;line-height:0}
.al-round:hover{border-color:var(--gold)}
.al-round:hover .pgs-round-btn__dot{width:420px;height:420px}

/* ---------- Brand slider ---------- */
.al-brand{position:relative;height:310px;border-top:1px solid var(--line)}
.al-brand .al-marquee.al-brand__row--2{top:176px}
.al-brand__pill{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);padding:0 20px;height:34px;display:flex;align-items:center;border:1px solid var(--line);border-radius:50px;background:#fff;font:700 18px/18px 'Space Grotesk',sans-serif;white-space:nowrap;z-index:2}
.al-brand .al-marquee{position:absolute;left:0;right:0;top:66px}
.al-brand__item{display:flex;align-items:center;justify-content:center;width:290px;height:60px}
.al-brand__item img{max-height:44px;width:auto}
.al-brand:after{content:'';position:absolute;left:15px;right:15px;bottom:40px;border-bottom:1px solid var(--line)}
.al-marquee{overflow:hidden}
.al-marquee__track{display:flex;width:max-content;will-change:transform}

/* ---------- Capabilities ---------- */
.al-sec--160{padding-top:160px}
.al-caps .al-h2{padding-left:0}
.al-caps__intro{display:flex;gap:40px;margin-top:80px;align-items:flex-start}
.al-caps__intro svg{flex:none;margin-top:8px}
.al-caps__intro p{font:500 25px/35px 'Space Grotesk',sans-serif;color:var(--grey);max-width:547px}
.al-caps__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;margin-top:60px}
.al-caps__item{border:1px solid var(--line);padding:26px 18px 40px 30px;min-height:369px;transition:background .3s}
/* Hover (Aleric tp-service-item): a grid pattern fades in behind the card; links get a left-to-right underline. */
.al-caps__item{position:relative;isolation:isolate}
.al-caps__item:before{content:'';position:absolute;inset:0;z-index:-1;opacity:0;visibility:hidden;transition:.4s;background-image:linear-gradient(rgba(3,3,3,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(3,3,3,.06) 1px,transparent 1px);background-size:40px 40px;background-position:-1px -1px}
.al-caps__item:hover:before{opacity:1;visibility:visible}
.al-caps__item li a{background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .3s linear}
.al-caps__item li a:hover{background-size:100% 1px;color:inherit}
.al-caps__more a{background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .3s linear}
.al-caps__more a:hover{background-size:100% 1px}
.al-caps__item h4{font:500 35px/45px 'Space Grotesk',sans-serif;letter-spacing:-.7px;text-transform:uppercase;margin-bottom:26px}
.al-caps__item ul{list-style:none;margin:0;padding:0}
.al-caps__item li{margin-top:20px}
.al-caps__item li a{position:relative;padding-left:18px;font:500 22px/30.8px 'Space Grotesk',sans-serif;white-space:nowrap}
.al-caps__item li a:before{content:'';position:absolute;left:0;top:13px;width:6px;height:6px;border-radius:50%;background:var(--ink)}
.al-caps__more{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:14px 24px;white-space:nowrap;margin-top:25px;border:1px solid var(--line);padding:28px 40px}
.al-caps__more b{font:700 22px 'Space Grotesk',sans-serif;text-transform:uppercase;padding:6px 16px;border-radius:50px;background:var(--gold)}
.al-caps__more a{position:relative;padding-left:16px;font:400 20px 'Space Grotesk',sans-serif}
.al-caps__more a:before{content:'';position:absolute;left:0;top:50%;width:5px;height:5px;margin-top:-2px;border-radius:50%;background:var(--ink)}

/* ---------- Video / commitment (697 at 1440 → 797 at 1920) ---------- */
.al-video{position:relative;overflow:hidden;height:clamp(560px,calc(697px + (100vw - 1425px) * .208),900px)}
.al-video>img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover}
.al-video .al-container{height:100%}
.al-video__card{position:absolute;left:12px;bottom:0;width:424px;height:397px;padding:40px;background:var(--gold);color:var(--ink)}
.al-video__card span{font:700 14px 'Space Grotesk',sans-serif;text-transform:uppercase}
.al-video__card h4{margin-top:12px;font:700 30px/36px 'Space Grotesk',sans-serif}
.al-video__card ul{list-style:none;margin:45px 0 0;padding:0}
.al-video__card li{position:relative;padding-left:36px;margin-top:22px;font:400 17px/24px 'Kanit',sans-serif}
.al-video__card li:before{content:'✓';position:absolute;left:0;top:-1px;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--gold);font:700 12px/22px sans-serif;text-align:center}

/* ---------- Process ---------- */
.al-process__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;margin-top:80px}
.al-process__item{border:1px solid var(--line);padding:40px 30px 50px;min-height:400px;transition:background-color .35s,border-color .35s;cursor:default}
.al-process__item p{transition:color .35s}
.al-process__item.is-active{background:var(--gold);border-color:var(--gold)}
.al-process__item b{display:block;font:500 70px/80px 'Space Grotesk',sans-serif}
.al-process__item h4{margin-top:24px;font:700 25px/32px 'Space Grotesk',sans-serif}
.al-process__item p{margin-top:14px;font:400 18px/26px 'Kanit',sans-serif;color:var(--grey)}
.al-process__item.is-active p{color:var(--ink)}

/* ---------- Work (positions from the demo, relative to the container) ---------- */
.al-work{padding-top:110px}
.al-work .al-container{height:2578px}
.al-work__title{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:32px;font:700 145px/159.5px 'Space Grotesk',sans-serif;letter-spacing:-2.9px;text-transform:uppercase;white-space:nowrap}
/* The rule runs from the title to the right edge of the content (= right edge of the project images below). */
.al-work__line{display:block;flex:1 1 auto;min-width:80px;height:5px;background:var(--ink)}
.al-work__aside{position:absolute;left:905px;top:167px;width:438px}
.al-work__aside p{font:400 18px/28px 'Kanit',sans-serif;color:var(--grey);text-align:justify;text-align-last:left}
/* Category strip: pill chips running sideways; "Tất cả" is the dark active chip. */
.al-work__tags{margin-top:22px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.al-work__tags .al-marquee__track{gap:10px;padding:2px 0}
.al-work__tags a{flex:none;height:42px;padding:0 22px;display:flex;align-items:center;border:1px solid #e3e3e3;border-radius:50px;background:#fff;font:700 16px 'Space Grotesk',sans-serif;color:var(--ink);white-space:nowrap;transition:background .3s,color .3s,border-color .3s}
.al-work__tags a.is-active,.al-work__tags a:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.al-work__tags:hover .al-marquee__track{animation-play-state:paused}
.al-work__item{position:absolute;display:block}
.al-work__item--1{left:0;top:270px;width:659px}
.al-work__item--2{left:794px;top:405px;width:549px}
.al-work__item--3{left:0;top:1046px;width:100%}
.al-work__item--4{left:0;top:1821px;width:578px}
.al-work__item--5{left:713px;top:1821px;width:630px}
.al-work__thumb{display:block;overflow:hidden;height:604px;margin-bottom:20px}
.al-work__item--2 .al-work__thumb,.al-work__item--4 .al-work__thumb{height:470px}
.al-work__thumb{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.al-work__thumb img{width:100%;height:100%;object-fit:cover}
.al-work__item:hover .al-work__thumb{transform:scale(.98)}
.al-work__item h3{font:700 25px/36px 'Space Grotesk',sans-serif;letter-spacing:-.5px}
.al-work__meta{display:flex;gap:17px;margin-top:13px}
.al-work__meta em{font:700 16px/26px 'Space Grotesk',sans-serif;font-style:normal;color:var(--grey);height:30px;padding:0 18px;display:flex;align-items:center;border:1px solid var(--line);border-radius:50px}
.al-work__meta em.is-hl{background:#FEF6CC;border-color:#FEF6CC;color:var(--ink)}
.al-work__all{position:absolute;left:178px;top:2462px;height:56px;padding:0 30px;display:flex;align-items:center;gap:12px;border-radius:26px;background:var(--gold);font:700 16px 'Space Grotesk',sans-serif;text-transform:uppercase}

/* Cursor bubble shown over project images */
.al-cursor{position:fixed;left:0;top:0;z-index:999;pointer-events:none}
.al-cursor{display:flex;align-items:center;justify-content:center;width:110px;height:110px;border-radius:50%;background:#fff;color:#030303;font:700 17px/1.2 'Inter',sans-serif;text-align:center;opacity:0;scale:.3;transition:opacity .25s,scale .35s cubic-bezier(.2,.8,.2,1)}
.al-cursor.is-on{opacity:1;scale:1}
.al-work__thumb{cursor:none}

/* ---------- Counter: four 380px circles that overlap (step 336) ---------- */
/* Counter sits centred between Case Study and the team: 80px on both sides. */
.al-counter{padding:20px 0 0}
.al-counter+.al-team{padding-top:80px}
/* One circle at a time turns yellow, moving on every 2s (home.js). */
.al-counter__item{transition:background-color .6s,border-color .6s}
.al-counter__item.is-on{background:var(--gold);border-color:var(--gold);position:relative;z-index:1}
.al-counter__item.is-on>span{color:var(--ink)}
.al-counter__row{display:flex;height:380px}
.al-counter__item{flex:none;width:380px;height:380px;margin-left:-44px;border:1px solid var(--line);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:transparent}
.al-counter__item:first-child{margin-left:0}
.al-counter__item b{font:500 70px/80px 'Space Grotesk',sans-serif}
.al-counter__item>span{font:500 18px/22px 'Kanit',sans-serif;color:var(--grey)}

/* ---------- Team ---------- */
.al-team__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;margin-top:80px;align-items:start}
.al-team__item:nth-child(even){margin-top:60px}
.al-team__thumb{display:block;overflow:hidden;height:400px;margin-bottom:16px}
.al-team__thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:transform .8s}
.al-team__item:hover img{transform:scale(1.05)}
.al-team__item h4{font:700 25px/32px 'Space Grotesk',sans-serif}
.al-team__item>span{font:400 18px 'Kanit',sans-serif;color:var(--grey)}

/* ---------- Team popup ---------- */
.al-modal{--ink:#030303;--grey:#525252;--line:#eee;--gold:#F8D000;color:var(--ink);font-family:'Kanit',sans-serif;position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:30px;background:rgba(3,3,3,.72);opacity:0;transition:opacity .3s}
.al-modal[hidden]{display:none}
.al-modal.is-open{opacity:1}
.al-modal__panel{display:grid;grid-template-columns:400px 1fr;width:min(1100px,100%);max-height:calc(100vh - 60px);background:#fff;overflow:hidden;transform:translateY(20px);transition:transform .35s}
.al-modal.is-open .al-modal__panel{transform:none}
.al-modal__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.al-modal__body{position:relative;padding:40px 50px 40px 40px;overflow:auto}
.al-modal__close{position:absolute;right:24px;top:24px;width:40px;height:40px;border:0;border-radius:50%;background:var(--ink);color:#fff;font-size:22px;line-height:40px;cursor:pointer}
.al-modal *{box-sizing:border-box}
.al-modal a{color:inherit;text-decoration:none}
.al-modal p,.al-modal h3,.al-modal h6{margin:0}
.al-modal__body h3{margin-top:18px;font:700 44px/1.1 'Space Grotesk',sans-serif;text-transform:uppercase}
.al-modal .al-modal__bio{margin-top:16px;max-width:520px;font:400 17px/26px 'Kanit',sans-serif;color:var(--grey)}
.al-modal__stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:24px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.al-modal__stats div{padding:0 20px;border-left:1px solid var(--line)}
.al-modal__stats div:first-child{padding-left:0;border:0}
.al-modal__stats b{display:block;font:500 40px/1.1 'Space Grotesk',sans-serif}
.al-modal__stats span{font:400 14px 'Kanit',sans-serif;color:var(--grey)}
.al-modal h6{margin:24px 0 12px;font:700 13px 'Space Grotesk',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#C9A400}
.al-modal__chips{display:flex;flex-wrap:wrap;gap:10px}
.al-modal__chips span{padding:6px 14px;border:1px solid var(--line);border-radius:50px;font:500 14px 'Space Grotesk',sans-serif}
.al-modal__projects{list-style:none;margin:0;padding:0}
.al-modal__projects li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.al-modal__projects b{display:block;font:700 16px 'Space Grotesk',sans-serif}
.al-modal__projects small{font:400 13px 'Kanit',sans-serif;color:var(--grey)}
.al-modal__projects em{flex:none;font:700 13px 'Space Grotesk',sans-serif;font-style:normal;padding:6px 12px;border-radius:50px;background:#FEF6CC}
.al-modal__btn{display:inline-flex;margin-top:24px;height:50px;padding:0 28px;align-items:center;border-radius:50px;background:var(--gold);font:700 15px 'Space Grotesk',sans-serif;text-transform:uppercase}
@media (max-width:767px){.al-modal__panel{grid-template-columns:1fr}.al-modal__photo{height:280px}.al-modal__body{padding:30px 22px}.al-modal__body h3{font-size:30px}}

/* ---------- Achievement (dark, 110/50) ---------- */
.al-award{background:#030303;color:#fff;padding:110px 0 50px;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:36px 36px}
.al-award__desc{margin-top:180px;font:500 25px/35px 'Space Grotesk',sans-serif;max-width:420px}
.al-award__title{font:500 50px/60px 'Space Grotesk',sans-serif;letter-spacing:-1px}
.al-fx-invert,.al-award__title .line{display:block;background-image:linear-gradient(to right,#fff 50%,#999 50%);background-size:200% 100%;background-position:100% center;-webkit-background-clip:text;background-clip:text;color:transparent}
.al-award__list{margin-top:55px}
.al-award__top{display:flex;justify-content:space-between;padding-right:30px;font:400 22px/26px 'Kanit',sans-serif;color:#999;margin-bottom:35px}
.al-award__item{display:grid;grid-template-columns:344px 1fr auto;align-items:center;padding:0 30px 30px 0;margin-bottom:35px;border-bottom:1px solid rgba(255,255,255,.1)}
.al-award__item:last-child{border:0}
.al-award__logo{display:flex;align-items:center;justify-content:center;width:220px;height:62px;background:#fff;border-radius:6px}
.al-award__logo img{max-height:36px;width:auto}
.al-award__item b{font:600 22px/26px 'Kanit',sans-serif}

/* ---------- Text slider (yellow) ---------- */
.al-ticker{height:76px;background:var(--gold);display:flex;align-items:center}
.al-ticker__item{font:700 22px/26px 'Space Grotesk',sans-serif;text-transform:uppercase;white-space:nowrap}
.al-ticker__sep{display:flex;align-items:center;width:263px;justify-content:center;font-size:22px}

/* ---------- Testimonials ---------- */
.al-testi__body{position:relative;height:412px;margin-top:62px}
.al-testi__count{position:absolute;left:0;top:246px}
.al-testi__count b{display:block;font:500 70px/84px 'Space Grotesk',sans-serif;letter-spacing:-1.4px}
.al-testi__count span{font:700 18px/35px 'Space Grotesk',sans-serif}
.al-testi__thumb{position:absolute;left:295px;top:0;width:312px;height:412px;overflow:hidden}
/* Photo and logo swap with the review (cross-fade). Without a photo: the customer's initial on yellow. */
.al-testi__face,.al-testi__brand{position:absolute;inset:0;opacity:0;transition:opacity .8s}
.al-testi__face.is-on,.al-testi__brand.is-on{opacity:1}
.al-testi__face img{width:100%;height:100%;object-fit:cover}
.al-testi__face b{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--gold);font:700 160px/1 'Space Grotesk',sans-serif;color:var(--ink)}
.al-testi__brand{display:flex;align-items:center;justify-content:center;text-align:center}
.al-testi__brand img{max-width:100%;max-height:100%;object-fit:contain}
/* Logos with white lettering (e.g. Ezev) sit on a dark tile so they stay readable. */
.al-testi__brand.is-dark{inset:auto 0;top:50%;height:110px;margin-top:-55px;padding:14px;border-radius:12px;background:#030303}
.al-testi__brand span{padding:16px;border:1px solid var(--line);border-radius:12px;font:700 18px/1.3 'Space Grotesk',sans-serif}
.al-testi__play{position:absolute;right:20px;top:20px;width:36px;height:36px;border-radius:50%;background:var(--gold)}
.al-testi__quote{position:absolute;left:678px;top:40px;width:500px}
/* Review slider (Aleric tp-testimonial: 1 per view, loop, 1000ms) — auto every 3s, draggable. */
.al-testi__viewport{overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none}
.al-testi__viewport.is-drag{cursor:grabbing}
.al-testi__track{display:flex;will-change:transform}
.al-testi__slide{flex:0 0 100%;min-height:250px;padding-right:10px}
.al-testi__slide p{font:500 35px/42px 'Space Grotesk',sans-serif}
.al-testi__slide h5{margin-top:30px;font:700 25px/27.5px 'Space Grotesk',sans-serif}
.al-testi__slide>span{font:400 18px/26px 'Kanit',sans-serif;color:var(--grey)}
.al-testi__pager{display:flex;align-items:center;gap:15px;margin-top:40px;font:400 22px 'Kanit',sans-serif}
.al-testi__pager i{width:200px;height:1px;background:var(--line);position:relative;overflow:hidden}
.al-testi__pager b{position:absolute;left:0;top:0;height:1px;width:25%;background:var(--ink);transition:transform .6s}
.al-testi__logo{position:absolute;left:1123px;top:219px;width:220px;height:180px;display:flex;align-items:center;justify-content:center}

/* ---------- Lead form ---------- */
.al-h2--left{margin-top:35px;font-size:64px;line-height:72px}
.al-checks{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--line)}
.al-checks li{position:relative;padding:18px 0 18px 40px;border-bottom:1px solid var(--line);font:400 20px 'Kanit',sans-serif}
.al-checks li:before{content:'✓';position:absolute;left:0;top:18px;width:24px;height:24px;border-radius:50%;background:var(--gold);font:700 13px/24px sans-serif;text-align:center}
.al-hotline{position:relative;display:block;margin-top:30px;max-width:600px;padding:18px 32px;border-radius:10px;background:var(--gold)}
.al-hotline small{display:block;font:400 15px 'Kanit',sans-serif}
.al-hotline b{font:700 30px/36px 'Space Grotesk',sans-serif}
.al-hotline i{position:absolute;right:24px;top:50%;width:44px;height:44px;margin-top:-22px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center}
.al-form{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px;align-content:start;padding:45px;border:1px solid var(--gold);border-radius:4px}
.al-form .is-full{grid-column:1/-1}
.al-form label{display:flex;flex-direction:column;gap:10px;font:700 14px 'Space Grotesk',sans-serif;text-transform:uppercase}
.al-form input,.al-form select,.al-form textarea{width:100%;height:56px;padding:0 20px;border:1px solid var(--line);border-radius:4px;font:400 16px 'Kanit',sans-serif;color:var(--ink);background:#fff;outline:none;text-transform:none}
.al-form textarea{height:auto;padding:16px 20px;resize:vertical}
/* Selects: own down-pointing chevron instead of the browser arrow. */
.al-form select{-webkit-appearance:none;appearance:none;padding-right:52px;cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5 7 7.5l6-6' fill='none' stroke='%23030303' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 22px center}
.al-form select:invalid{color:#8a8a8a}
.al-form select option{color:#030303}
/* Custom dropdown (always opens below). The native select sits under it, transparent, for submit + validation. */
.al-dd{position:relative}
.al-dd select{position:absolute;inset:0;opacity:0;pointer-events:none}
.al-dd__btn{display:block;width:100%;height:56px;padding:0 52px 0 20px;border:1px solid var(--line);border-radius:4px;text-align:left;font:400 16px 'Kanit',sans-serif;color:var(--ink);text-transform:none;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5 7 7.5l6-6' fill='none' stroke='%23030303' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 22px center;transition:border-color .2s}
.al-dd__btn.is-empty{color:#8a8a8a}
.al-dd.is-open .al-dd__btn,.al-dd__btn:focus{border-color:var(--gold);outline:none}
.al-dd.is-open .al-dd__btn{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 7.5 7 1.5l6 6' fill='none' stroke='%23030303' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.al-dd__list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;max-height:300px;overflow:auto;margin:0;padding:6px 0;list-style:none;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 14px 40px rgba(3,3,3,.12);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s,visibility .2s}
.al-dd.is-open .al-dd__list{opacity:1;visibility:visible;transform:none}
.al-dd__list li{padding:11px 20px;font:400 16px 'Kanit',sans-serif;text-transform:none;color:var(--ink);cursor:pointer}
.al-dd__list li:hover{background:#FEF6CC}
.al-dd__list li.is-sel{background:var(--gold);font-weight:500}
.al-form input:focus,.al-form select:focus,.al-form textarea:focus{border-color:var(--gold)}
.al-form button[type="submit"]{height:56px;border:0;border-radius:50px;background:var(--gold);font:700 16px 'Space Grotesk',sans-serif;text-transform:uppercase;cursor:pointer}
.al-form small{font:400 14px 'Kanit',sans-serif;color:var(--grey)}

/* ---------- Blog ---------- */
.al-blog{padding:140px 0 136px}
.al-blog__intro{display:flex;gap:40px;margin:47px 0 0 468px;max-width:500px}
.al-blog__intro svg{flex:none}
.al-blog__intro p{font:400 18px/28px 'Kanit',sans-serif;color:var(--grey)}
.al-blog__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px}
/* News card: image with category pill, title, excerpt, date + "Đọc thêm" row. */
.al-blog__item{display:flex;flex-direction:column}
.al-blog__thumb{position:relative;display:block;overflow:hidden;height:299px}
.al-blog__thumb img{width:100%;height:100%;object-fit:cover}
.al-blog__cat{position:absolute;left:18px;top:18px;z-index:2;padding:7px 16px;border-radius:50px;background:#fff;font:700 14px/1 'Space Grotesk',sans-serif;font-style:normal;color:var(--ink)}
.al-blog__item h3{margin-top:22px;font:700 25px/32px 'Space Grotesk',sans-serif;letter-spacing:-.5px;transition:color .3s}
.al-blog__item:hover h3{color:#777}
.al-home .al-blog__excerpt{margin-top:14px;font:400 18px/26px 'Kanit',sans-serif;color:var(--grey)}
.al-blog__foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:24px}
.al-blog__foot time{font:400 16px 'Kanit',sans-serif;color:var(--grey)}
.al-blog__foot b{display:inline-flex;align-items:center;gap:10px;font:700 16px 'Space Grotesk',sans-serif;text-transform:uppercase}
.al-blog__foot svg{transition:transform .3s}
.al-blog__item:hover .al-blog__foot svg{transform:translateX(5px)}

/* Search panel (Aleric style): white sheet slides down from the top, page dimmed behind. */
.al-search{position:fixed;inset:0;z-index:2100;background:rgba(3,3,3,0);transition:background-color .45s}
.al-search[hidden]{display:none}
.al-search.is-open{background:rgba(3,3,3,.55)}
.al-search__panel{background:#fff;transform:translateY(-100%);transition:transform .5s cubic-bezier(.76,0,.24,1)}
.al-search.is-open .al-search__panel{transform:none}
.al-search__in{width:min(1320px,calc(100% - 40px));margin:0 auto;padding:60px 0 100px}
.al-search__top{display:flex;align-items:center;justify-content:space-between}
.al-search__logo img{display:block;height:72px;width:auto}
.al-search__close{width:44px;height:44px;border:0;background:none;display:grid;place-items:center;cursor:pointer;transition:transform .3s}
.al-search__close:hover{transform:rotate(90deg)}
.al-search__form{position:relative;margin-top:50px;border-bottom:1px solid #e5e5e5;opacity:0;transform:translateY(16px);transition:opacity .4s .2s,transform .4s .2s,border-color .3s}
.al-search.is-open .al-search__form{opacity:1;transform:none}
.al-search__form:focus-within{border-color:#030303}
.al-search__form input{width:100%;height:64px;padding:0 50px 0 0;border:0;background:none;outline:none;font:400 24px 'Kanit',sans-serif;color:#030303}
.al-search__form input::placeholder{color:#555}
.al-search__form input::-webkit-search-cancel-button{display:none}
.al-search__form button{position:absolute;right:0;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;background:none;display:grid;place-items:center;cursor:pointer}
@media (max-width:767px){.al-search__in{padding:24px 0 50px}.al-search__logo img{height:52px}.al-search__form{margin-top:30px}.al-search__form input{font-size:18px}}

/* Search results / plain pages */
.al-results{--ink:#030303;--line:#eee;--gold:#F8D000;width:min(1000px,calc(100% - 40px));margin:0 auto;padding:180px 0 140px;font-family:'Kanit',sans-serif;color:#030303}
.al-results h1{margin:24px 0 40px;font:700 56px/1.1 'Space Grotesk',sans-serif;text-transform:uppercase}
.al-results ul{list-style:none;margin:0;padding:0;border-top:1px solid #eee}
.al-results li a{display:block;padding:24px 0;border-bottom:1px solid #eee;color:inherit;text-decoration:none}
.al-results li b{display:block;font:700 22px 'Space Grotesk',sans-serif;transition:color .2s}
.al-results li span{display:block;margin-top:6px;color:#555}
.al-results li a:hover b{color:#C9A400}
.al-results p a{color:inherit;font-weight:600}

/* Mega menus: fade + slide in/out instead of popping (overrides the display toggle from style.css). */
body .pgs-mega{display:block;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .35s cubic-bezier(.2,.7,.2,1),transform .45s cubic-bezier(.2,.7,.2,1),visibility .35s}
body .pgs-mega.is-open{opacity:1;visibility:visible;transform:none}

/* Preloader — same values as Aleric's .loader-wrap: black SVG sheet, Space Grotesk 500 62px white uppercase,
   each letter blinks (opacity 1→0, 1s ease, infinite alternate, +0.1s per letter). Exit timeline in header.js. */
.al-loader{position:fixed;inset:0;z-index:2147483647;display:flex;align-items:center;justify-content:center;overflow:hidden;background:transparent}
.al-loader svg{position:absolute;top:0;left:0;width:100%;height:110vh;fill:#000}
.al-loader__heading{position:relative;z-index:20}
.al-loader__text{font:500 62px/1 'Space Grotesk',sans-serif;letter-spacing:0;text-transform:uppercase;color:#fff}
.al-loader__text span{animation:alLoading 1s ease 0s infinite alternate}
.al-loader__heading{visibility:visible;display:inline-flex;flex-direction:column;align-items:stretch;text-align:center}
/* Sub line at the same size as PGSAGENCY (62px / 40px / 20px), dimmed so the name stays first. */
.al-loader__sub{margin-top:14px;font:500 62px/1.05 'Space Grotesk',sans-serif;text-transform:uppercase;color:rgba(255,255,255,.55);white-space:nowrap}
@media (max-width:1199px){.al-loader__sub{font-size:40px}}
@media (max-width:767px){.al-loader__sub{font-size:20px;white-space:normal}}
.al-loader svg.al-loader__gold{fill:#F8D000}
@keyframes alLoading{0%{opacity:1}100%{opacity:0}}
@media (max-width:1199px){.al-loader__text{font-size:40px}}
@media (max-width:767px){.al-loader__text{font-size:20px}}
@media (prefers-reduced-motion:reduce){.al-loader{display:none}}
.pgs-seen .al-loader{display:none}

/* ---------- Demo chatbot (chat.js), bottom-right on every page ---------- */
.pgs-chat{--ink:#030303;--gold:#F8D000;position:fixed;right:30px;bottom:30px;z-index:960;font-family:'Kanit',sans-serif}
.pgs-chat *{box-sizing:border-box}
.pgs-chat__fab{position:relative;width:60px;height:60px;border:0;border-radius:50%;background:var(--gold);display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 30px rgba(3,3,3,.2);transition:transform .3s}
.pgs-chat__fab:hover{transform:scale(1.06)}
.pgs-chat__fab:before{content:'';position:absolute;inset:0;border-radius:50%;background:var(--gold);z-index:-1;animation:pgsPulse 2.2s ease-out infinite}
@keyframes pgsPulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.6);opacity:0}}
.pgs-chat__dot{position:absolute;right:4px;top:4px;width:12px;height:12px;border-radius:50%;background:#E5322D;border:2px solid #fff}
.pgs-chat.is-open .pgs-chat__dot,.pgs-chat.is-open .pgs-chat__fab:before{display:none}
.pgs-chat__panel{position:absolute;right:0;bottom:76px;width:370px;height:540px;max-height:calc(100vh - 140px);display:flex;flex-direction:column;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(3,3,3,.22);opacity:0;visibility:hidden;transform:translateY(16px) scale(.97);transform-origin:bottom right;transition:opacity .3s,transform .35s cubic-bezier(.2,.8,.2,1),visibility .3s}
.pgs-chat.is-open .pgs-chat__panel{opacity:1;visibility:visible;transform:none}
.pgs-chat__head{display:flex;align-items:center;gap:12px;padding:16px 18px;background:var(--ink);color:#fff}
.pgs-chat__ava{flex:none;width:40px;height:40px;border-radius:50%;background:var(--gold);color:var(--ink);display:grid;place-items:center;font:700 18px 'Space Grotesk',sans-serif}
.pgs-chat__head b{display:block;font:700 16px 'Space Grotesk',sans-serif}
.pgs-chat__head small{display:flex;align-items:center;gap:6px;font-size:12px;color:rgba(255,255,255,.65)}
.pgs-chat__head small i{width:7px;height:7px;border-radius:50%;background:#34C759}
.pgs-chat__close{margin-left:auto;width:32px;height:32px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:20px;line-height:32px;cursor:pointer}
.pgs-chat__log{flex:1;overflow-y:auto;padding:18px 16px;background:#F6F6F4;display:flex;flex-direction:column;gap:10px}
.pgs-chat__msg{display:flex;flex-direction:column;align-items:flex-start;max-width:86%}
.pgs-chat__msg.is-me{align-self:flex-end;align-items:flex-end}
.pgs-chat__bubble{padding:10px 14px;border-radius:14px 14px 14px 4px;background:#fff;font-size:14.5px;line-height:1.5;color:var(--ink);box-shadow:0 1px 2px rgba(3,3,3,.06)}
.pgs-chat__msg.is-me .pgs-chat__bubble{border-radius:14px 14px 4px 14px;background:var(--gold)}
.pgs-chat__bubble a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.pgs-chat__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.pgs-chat__chips button{padding:7px 14px;border:1px solid var(--ink);border-radius:50px;background:#fff;font:500 13px 'Space Grotesk',sans-serif;cursor:pointer;transition:background .2s}
.pgs-chat__chips button:hover{background:var(--gold);border-color:var(--gold)}
.pgs-chat__typing{display:flex;gap:4px;padding:13px 14px}
.pgs-chat__typing i{width:7px;height:7px;border-radius:50%;background:#aaa;animation:pgsType 1s infinite}
.pgs-chat__typing i:nth-child(2){animation-delay:.15s}.pgs-chat__typing i:nth-child(3){animation-delay:.3s}
@keyframes pgsType{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.pgs-chat__form{display:flex;gap:8px;padding:12px;border-top:1px solid #eee;background:#fff}
.pgs-chat__form input{flex:1;height:44px;padding:0 16px;border:1px solid #e3e3e3;border-radius:50px;font:400 14.5px 'Kanit',sans-serif;outline:none}
.pgs-chat__form input:focus{border-color:var(--gold)}
.pgs-chat__form button{width:44px;height:44px;border:0;border-radius:50%;background:var(--ink);color:var(--gold);display:grid;place-items:center;cursor:pointer}
/* Contact hub above the chat button (pgsagency.vn style): black round button → panel of channels. */
.pgs-chat{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.pgs-hub{position:relative}
.pgs-hub__fab{width:60px;height:60px;border:2px solid var(--gold);border-radius:50%;background:#111;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 30px rgba(3,3,3,.25);transition:transform .3s}
.pgs-hub__fab:hover{transform:scale(1.06)}
.pgs-hub__fab svg{animation:pgsRing 2.4s ease-in-out infinite}
@keyframes pgsRing{0%,60%,100%{transform:none}65%,75%,85%{transform:rotate(-14deg)}70%,80%,90%{transform:rotate(14deg)}}
.pgs-hub__panel{position:absolute;right:0;bottom:76px;width:380px;border:1px solid rgba(248,208,0,.6);border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 24px 60px rgba(3,3,3,.25);opacity:0;visibility:hidden;transform:translateY(14px) scale(.97);transform-origin:bottom right;transition:opacity .3s,transform .35s cubic-bezier(.2,.8,.2,1),visibility .3s}
.pgs-hub.is-open .pgs-hub__panel{opacity:1;visibility:visible;transform:none}
.pgs-hub__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:20px 20px 18px;background:linear-gradient(135deg,#111 0%,#1d1a0d 100%);border-bottom:2px solid var(--gold)}
.pgs-hub__head b{display:block;font:700 20px/1.25 'Space Grotesk',sans-serif;color:var(--gold)}
.pgs-hub__head small{display:block;margin-top:6px;font-size:13.5px;color:rgba(255,255,255,.85)}
.pgs-hub__close{flex:none;width:34px;height:34px;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:transparent;color:#fff;font-size:20px;line-height:32px;cursor:pointer}
.pgs-hub__item{display:flex;align-items:center;gap:14px;width:100%;padding:14px 20px;border:0;border-bottom:1px solid #eee;background:#fff;text-align:left;color:var(--ink);text-decoration:none;cursor:pointer;font-family:inherit;transition:background .2s}
.pgs-hub__item:hover{background:#FFFBEA}
.pgs-hub__item>span:nth-child(2){flex:1}
.pgs-hub__item b{display:block;font:700 16px 'Space Grotesk',sans-serif}
.pgs-hub__item small{display:block;margin-top:2px;font-size:13.5px;color:#555}
.pgs-hub__ic{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 0 0 1px #eee}
.pgs-hub__ic.is-gold{background:linear-gradient(135deg,#F8D000,#C99A12);box-shadow:none}
.pgs-hub__ic.is-msg{background:linear-gradient(135deg,#00B2FF,#006AFF);box-shadow:none}
.pgs-hub__go{flex:none;color:#555;transition:transform .2s}
.pgs-hub__item:hover .pgs-hub__go{transform:translateX(3px)}
.pgs-hub__foot{padding:12px 20px;background:#F6F3EA;font-size:12px;line-height:1.6;color:#555}
/* Free-consultation popup form (opened from the contact hub). */
.pgs-lead{--ink:#030303;--gold:#F8D000;position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(3,3,3,.65);font-family:'Kanit',sans-serif;opacity:0;transition:opacity .3s}
.pgs-lead[hidden]{display:none}
.pgs-lead.is-open{opacity:1}
.pgs-lead *{box-sizing:border-box}
.pgs-lead__box{position:relative;width:min(560px,100%);max-height:calc(100vh - 40px);overflow:auto;padding:38px 40px 30px;border-radius:20px;background:#fff;border-top:6px solid var(--gold);box-shadow:0 30px 80px rgba(3,3,3,.35);transform:translateY(20px) scale(.97);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.pgs-lead.is-open .pgs-lead__box{transform:none}
.pgs-lead__close{position:absolute;right:18px;top:18px;width:38px;height:38px;border:0;border-radius:50%;background:var(--ink);color:#fff;font-size:22px;line-height:38px;cursor:pointer}
.pgs-lead__tag{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid #eee;border-radius:50px;font:500 13px 'Space Grotesk',sans-serif}
.pgs-lead__tag i{width:7px;height:7px;border-radius:50%;background:var(--gold)}
.pgs-lead h3{margin:14px 0 6px;font:700 34px/1.1 'Space Grotesk',sans-serif;text-transform:uppercase;color:var(--ink)}
.pgs-lead__box>p{margin:0 0 22px;font-size:15.5px;line-height:1.55;color:#555}
.pgs-lead__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.pgs-lead__grid .is-full{grid-column:1/-1}
.pgs-lead label{display:flex;flex-direction:column;gap:7px;font:700 12.5px 'Space Grotesk',sans-serif;text-transform:uppercase;color:var(--ink)}
.pgs-lead input,.pgs-lead select,.pgs-lead textarea{width:100%;height:50px;padding:0 16px;border:1px solid #e5e5e5;border-radius:8px;font:400 15px 'Kanit',sans-serif;color:var(--ink);background:#fff;outline:none;text-transform:none;transition:border-color .2s}
.pgs-lead textarea{height:auto;padding:12px 16px;resize:vertical}
.pgs-lead select{-webkit-appearance:none;appearance:none;padding-right:44px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5 7 7.5l6-6' fill='none' stroke='%23030303' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center}
.pgs-lead input:focus,.pgs-lead select:focus,.pgs-lead textarea:focus{border-color:var(--gold)}
.pgs-lead__send{width:100%;height:54px;margin-top:20px;border:0;border-radius:50px;background:var(--gold);font:700 15px 'Space Grotesk',sans-serif;text-transform:uppercase;color:var(--ink);cursor:pointer;transition:background .3s,color .3s}
.pgs-lead__send:hover{background:var(--ink);color:var(--gold)}
.pgs-lead__send:disabled{opacity:.6;cursor:wait}
.pgs-lead__box>small{display:block;margin-top:12px;font-size:12.5px;color:#777;text-align:center}
.pgs-lead__done{padding:30px 0 10px;text-align:center}
.pgs-lead__done span{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--gold);font:700 30px sans-serif}
.pgs-lead__done p{color:#555}
@media (max-width:600px){.pgs-lead__box{padding:30px 22px 24px}.pgs-lead__grid{grid-template-columns:1fr}.pgs-lead h3{font-size:26px}}

/* Back-to-top button sits above both launchers. */
.pgs-backtop{bottom:178px!important;right:45px!important;width:60px!important;height:60px!important}
@media (max-width:767px){.pgs-chat{right:16px;bottom:16px}.pgs-chat__panel,.pgs-hub__panel{width:calc(100vw - 32px)}.pgs-chat__panel{height:calc(100vh - 200px)}.pgs-backtop{right:27px!important;bottom:138px!important;width:52px!important;height:52px!important}}

/* Footer on the home page spans the viewport */
.al-footer-wrap .pgs-footer{padding-left:max(41px,calc((100% - 1343px) / 2));padding-right:max(41px,calc((100% - 1343px) / 2))}

/* ---------- Tablet & mobile ---------- */
@media (max-width:1199px){
	.al-container{width:calc(100% - 40px)}
	.al-sec,.al-about{padding:90px 0}
	.al-split,.al-split--half,.al-split--blog{grid-template-columns:1fr;row-gap:24px}
	.al-h2{font-size:48px;line-height:56px}
	.al-hero__wrap{height:auto;padding:130px 0 60px 56px}
	.al-hero__rail{top:130px}
	.al-hero__main,.al-hero__info,.al-hero__customer,.al-hero__side{position:static;width:auto}
	.al-hero__title{white-space:normal}
	.al-hero__info{margin-top:30px;max-width:520px}
	.al-hero__customer{margin-top:30px}
	.al-hero__side{display:none}
	.al-launch{grid-template-columns:1fr;height:auto}
	.al-launch__img{height:420px}
	.al-launch__card{padding:40px 30px 70px}
	.al-about__row{grid-template-columns:1fr 1fr;row-gap:30px}
	.al-about__btn{justify-self:start}
	.al-caps__grid,.al-process__grid,.al-team__grid{grid-template-columns:1fr 1fr}
	.al-caps__more{flex-wrap:wrap;justify-content:flex-start;white-space:normal}
	.al-work .al-container{height:auto}
	.al-work__title,.al-work__aside,.al-work__item,.al-work__all{position:static;width:auto}
	.al-work__title{font-size:72px;line-height:80px}
	.al-work__aside{margin-top:24px}
	.al-work__grid{display:grid;grid-template-columns:1fr 1fr;gap:40px 24px;margin-top:50px}
	.al-work__item--3{grid-column:1/-1}
	.al-work__thumb,.al-work__item--2 .al-work__thumb,.al-work__item--4 .al-work__thumb{height:380px}
	.al-work__all{justify-self:start;margin-top:10px}
	.al-counter__row{height:auto;flex-wrap:wrap;justify-content:center;gap:20px}
	.al-counter__item{width:280px;height:280px;margin:0}
	.al-award__desc{margin-top:30px}
	.al-award__item{grid-template-columns:240px 1fr auto}
	.al-testi__body{height:auto;display:grid;grid-template-columns:312px 1fr;gap:30px}
	.al-testi__count,.al-testi__thumb,.al-testi__quote,.al-testi__logo{position:static;width:auto}
	.al-testi__logo{display:none}
	.al-blog__intro{margin-left:0}
	.al-header__nav{display:none}
}
@media (max-width:767px){
	.al-h2,.al-h2--left{font-size:34px;line-height:40px}
	.al-lead,.al-about__desc{font-size:18px;line-height:28px}
	.al-about__title,.al-award__title{font-size:30px;line-height:38px}
	.al-hero__wrap{padding-left:46px}
	.al-hero__tag{width:110px;height:48px;font-size:18px}
	.al-launch__img{height:280px}
	.al-about__row,.al-caps__grid,.al-process__grid,.al-team__grid,.al-work__grid,.al-blog__grid,.al-testi__body,.al-form{grid-template-columns:1fr}
	.al-team__item:nth-child(even){margin-top:0}
	.al-work__title{font-size:44px;line-height:52px}
	.al-work__line{display:none}
	.al-counter__item{width:46%;height:auto;aspect-ratio:1}
	.al-counter__item b{font-size:42px;line-height:48px}
	.al-video__card{left:0;width:100%}
	.al-award__item{grid-template-columns:1fr auto;gap:12px}
	.al-award__logo{grid-column:1/-1}
	.al-ticker__sep{width:90px}
	.al-header__btn{display:none}
}

/* ---------- Inner pages: one design per screen width ----------
   desktop ≥ 1200px · tablet design (768) 600–1199px · mobile design (390) below 600px. */
.pgs-page--t,.pgs-page--m{display:none}
.pgs-page--t .pgs-fig,.pgs-page--m .pgs-fig{width:auto}
@media (max-width:1199px){.pgs-page--d{display:none}.pgs-page--t{display:block}}
@media (max-width:599px){.pgs-page--t{display:none}.pgs-page--m{display:block}}

/* ---------- Header below 1200px: logo, search and the menu button only ---------- */
.al-header__burger{display:none;width:44px;height:44px;padding:12px 8px;border:0;background:none;cursor:pointer;flex-direction:column;justify-content:space-between}
.al-header__burger span{display:block;height:2px;background:#030303;transition:transform .3s,opacity .3s}
.pgs-menu-open .al-header__burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.pgs-menu-open .al-header__burger span:nth-child(2){opacity:0}
.pgs-menu-open .al-header__burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.al-menu{position:fixed;left:0;right:0;top:var(--al-head,82px);bottom:0;z-index:940;overflow-y:auto;background:#fff;padding:20px 24px 40px;box-sizing:border-box;opacity:0;transform:translateY(-12px);transition:opacity .3s,transform .3s}
.al-menu.is-open{opacity:1;transform:none}
.al-menu__item{position:relative;border-bottom:1px solid #eee}
.al-menu__link{display:block;padding:18px 50px 18px 0;font:700 22px/1.2 'Space Grotesk',sans-serif;text-transform:uppercase;color:#030303;text-decoration:none}
.al-menu__toggle{position:absolute;right:0;top:12px;width:40px;height:40px;border:1px solid #eee;border-radius:50%;background:#fff;cursor:pointer}
.al-menu__toggle:before{content:'';position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-6px 0 0 -4px;border:solid #030303;border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .3s}
.al-menu__item.is-open .al-menu__toggle:before{transform:rotate(-135deg);margin-top:-2px}
.al-menu__sub{display:none;padding:0 0 16px 2px}
.al-menu__item.is-open .al-menu__sub{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.al-menu__sub a{font:400 16px/1.4 'Kanit',sans-serif;color:#525252;text-decoration:none}
.al-menu__cta{display:flex;align-items:center;justify-content:center;gap:10px;height:56px;margin-top:30px;border-radius:50px;background:#F8D000;font:700 15px 'Space Grotesk',sans-serif;text-transform:uppercase;color:#030303;text-decoration:none}
.al-menu__tel{display:block;margin-top:18px;text-align:center;font:400 16px 'Kanit',sans-serif;color:#525252;text-decoration:none}
.al-menu__tel b{color:#030303;font-weight:600}
.pgs-menu-open,.pgs-menu-open body{overflow:hidden}
@media (max-width:1199px){
	.al-header__burger{display:flex}
	.al-header__btn{display:none}
	.al-header__act{gap:12px}
}
@media (max-width:767px){
	.al-header{height:72px}
	.al-header__logo img{height:64px}
	.al-header__search{width:44px;height:44px}
	.al-menu{--al-head:72px}
	.al-menu__item.is-open .al-menu__sub{grid-template-columns:1fr}
}

/* ---------- Shared footer below 1200px (it is no longer scaled) ---------- */
@media (max-width:1199px){
	.pgs-footer{height:auto;padding-left:max(24px,calc((100% - 540px) / 2));padding-right:max(24px,calc((100% - 540px) / 2))}
	.pgs-footer__top{flex-direction:column;gap:30px;height:auto;padding:90px 0 50px}
	.pgs-footer .pgs-footer__title{margin:14px 0 24px;font-size:88px;line-height:96px;letter-spacing:-1.8px;white-space:normal}
	.pgs-footer__social{flex-wrap:wrap;gap:10px}
	.pgs-footer__main{flex-direction:column;gap:30px;height:auto;padding:40px 0 50px}
	.pgs-footer__brand{width:auto}
	.pgs-footer__cols{grid-template-columns:1fr 1fr;column-gap:40px;row-gap:30px}
	.pgs-footer__bottom{flex-wrap:wrap;gap:12px;height:auto;padding:22px 0 26px}
	.pgs-footer__bottom nav{gap:24px}
}
@media (max-width:767px){
	.pgs-footer{padding-left:15px;padding-right:15px}
	.pgs-footer__top{padding-top:70px}
	.pgs-footer .pgs-footer__title{font-size:54px;line-height:60px;letter-spacing:-1px}
	.pgs-footer__cols{grid-template-columns:1fr}
	.pgs-footer__bottom{flex-direction:column;align-items:flex-start}
}

/* No single word left alone on the last line of footer copy. */
.pgs-footer p{text-wrap:pretty}

/* ---------- Home below 1200px: the approved Figma "Trang chủ — Tablet (768)" / "— Mobile (390)" ---------- */
@media (max-width:1199px){
	.al-hero__wrap{width:auto;height:auto;padding:142px 24px 80px 76px}
	.al-hero__rail{left:12px;top:142px}
	.al-hero__main{position:static;display:flex;flex-direction:column;align-items:flex-start}
	.al-hero__title{position:static;font-size:64px;line-height:70px;white-space:normal}
	.al-hero__tag{width:150px;height:62px;margin:0 16px 0 0;transform:translateY(-6px);font-size:20px;line-height:20px}
	.al-hero__customer{position:static;order:2;margin-top:30px}
	.al-hero__info{position:static;order:3;width:auto;max-width:620px;margin-top:32px}
	.al-hero__video{margin-top:36px}
}
@media (max-width:767px){
	.al-hero__wrap{padding:112px 15px 60px}
	.al-hero__rail{display:none}
	.al-hero__title{font-size:44px;line-height:48px}
	.al-hero__tag{width:118px;height:50px;margin-right:12px;transform:translateY(-4px);font-size:17px}
	.al-hero__tag .al-arrow{width:58px}
	.al-hero__customer{margin-top:26px;gap:16px}
	.al-hero__customer svg{width:50px;height:auto}
	.al-hero__info p{font-size:17px;line-height:27px}
	.al-hero__video{margin-top:30px;gap:18px}
	.al-hero__play{width:64px;height:64px}
}
.al-nowrap{white-space:nowrap}
/* Content column below 1200px as on Aleric (Bootstrap containers): 960 · 720 · 540 · full width. */
@media (max-width:1199px){
	.al-container,.al-hero__wrap{width:calc(100% - 30px);max-width:960px;margin-left:auto;margin-right:auto}
	.al-hero__wrap{padding:142px 0 80px}
	.al-hero__rail{display:none}
	.al-home h1,.al-home h2,.al-home h3,.al-home h4,.al-home h5,.al-home p,.al-home b,.al-home li{text-wrap:pretty}
}
@media (max-width:991px){.al-container,.al-hero__wrap{max-width:720px}.al-hero__title{font-size:58px;line-height:64px}}
@media (max-width:767px){.al-container,.al-hero__wrap{max-width:540px}.al-hero__wrap{padding:112px 0 60px}.al-hero__title{font-size:44px;line-height:48px}}
/* Sections below 1200px, sizes from the approved Figma tablet / mobile frames. */
@media (max-width:1199px){
	.al-about__title{font-size:36px;line-height:44px}
	.al-brand__pill{white-space:nowrap}
	.al-caps__intro{margin-top:24px;gap:30px}
	.al-caps__intro p{font-size:23px;line-height:33px}
	.al-caps__grid{grid-template-columns:1fr;gap:24px}
	.al-caps__item{min-height:0;padding:30px 28px 34px}
	.al-caps__item h4{font-size:32px;line-height:40px;margin-bottom:14px}
	.al-caps__item li a{font-size:20px;line-height:28px}
	.al-process__item{min-height:0;padding:30px 24px 34px}
	.al-process__item b{font-size:60px;line-height:66px}
	.al-process__item h4{margin-top:12px;font-size:22px;line-height:28px}
	.al-process__item p{margin-top:12px;font-size:16px;line-height:24px}
	.al-work__aside p{text-align:left}
	.al-work__grid{grid-template-columns:1fr;gap:56px}
	.al-work__item--3{grid-column:auto}
	.al-work__thumb,.al-work__item--2 .al-work__thumb,.al-work__item--4 .al-work__thumb{height:400px}
	.al-work__item h3{font-size:25px;line-height:34px}
	.al-work__all{justify-self:center}
	.al-counter__row{flex-wrap:nowrap;gap:0}
	.al-counter__item{width:180px;height:180px;margin-left:-12px;gap:8px}
	.al-counter__item:first-child{margin-left:0}
	.al-counter__item b{font-size:52px;line-height:58px}
	.al-counter__item>span{font-size:14px;line-height:18px;text-align:center;padding:0 14px}
	.al-counter__item b span{font:inherit}
	.al-testi__thumb{position:relative;left:auto;top:auto}
	.al-counter__item>span{text-wrap:balance}
	.al-team__grid{margin-top:40px;gap:36px 24px}
	.al-team__item:nth-child(even){margin-top:0}
	.al-team__thumb{height:330px;margin-bottom:10px}
	.al-team__item h4{font-size:22px;line-height:28px}
	.al-award__title{font-size:36px;line-height:44px}
	.al-award__desc{font-size:21px;line-height:31px}
	.al-award__logo{width:180px;height:56px}
	.al-award__top{font-size:16px;margin-bottom:16px}
	.al-award__item{padding:18px 0;margin:0;border-bottom:0;border-top:1px solid #222}
	.al-award__item b{font-size:20px}
	.al-testi__thumb{height:400px}
	.al-testi__slide p{font-size:28px;line-height:36px}
	.al-form{padding:34px 30px}
	.al-blog__grid{grid-template-columns:1fr 1fr;gap:44px 24px}
	.al-blog__thumb{height:190px}
	.al-blog__item h3{font-size:20px;line-height:27px}
}
@media (max-width:767px){
	.al-about__title{font-size:27px;line-height:35px}
	.al-brand__pill{font-size:13px;padding:0 14px}
	.al-caps__intro{flex-direction:column;gap:18px}
	.al-caps__intro svg{width:60px;height:60px}
	.al-caps__intro p{font-size:20px;line-height:30px}
	.al-caps__grid{gap:20px}
	.al-caps__item{padding:26px 24px 30px}
	.al-caps__item h4{font-size:28px;line-height:36px}
	.al-caps__item li a{font-size:18px}
	.al-process__grid{gap:16px}
	.al-process__item b{font-size:56px}
	.al-work__grid{gap:44px}
	.al-work__thumb,.al-work__item--2 .al-work__thumb,.al-work__item--4 .al-work__thumb{height:260px}
	.al-work__item h3{font-size:21px;line-height:28px}
	.al-work__title{font-size:50px;line-height:56px}
	.al-counter__row{flex-direction:column;align-items:center;gap:16px}
	.al-counter__item,.al-counter__item:first-child{width:170px;height:170px;margin:0;aspect-ratio:auto}
	.al-team__grid{grid-template-columns:1fr 1fr;gap:28px 14px}
	.al-team__thumb{height:220px}
	.al-team__item h4{font-size:18px;line-height:24px}
	.al-team__item>span{font-size:14px}
	.al-award__title{font-size:27px;line-height:35px}
	.al-award__desc{font-size:18px;line-height:28px}
	.al-award__item{grid-template-columns:110px 1fr auto;gap:16px}
	.al-award__logo{grid-column:auto;width:110px;height:40px}
	.al-award__item b{font-size:17px}
	.al-testi__thumb{height:420px}
	.al-testi__slide p{font-size:23px;line-height:31px}
	.al-form{padding:26px 20px}
	.al-blog__grid{grid-template-columns:1fr;gap:40px}
	.al-blog__thumb{height:230px}
}
/* Hero title breaks: desktop/tablet "MARKETING HÀNG ĐẦU / VIỆT NAM.", mobile "MARKETING HÀNG / ĐẦU VIỆT NAM.". */
.al-br-m{display:none}
@media (max-width:767px){.al-br-m{display:inline}.al-br-d{display:none}.al-home .al-hero__title{white-space:nowrap;font-size:min(44px,11.2vw);line-height:1.09}}
/* TVC card title: "Đối tác Marketing tổng thể" stays on one line on phones. */
@media (max-width:767px){.al-home .al-launch__card b{white-space:nowrap;font-size:min(25px,5.9vw);line-height:1.15;padding-right:34px}}
/* Phones: the "Bắt đầu hành trình" circle, smaller, sits beside "9+ Năm kinh nghiệm"; the photos follow full width. */
@media (max-width:767px){
	.al-about__row{grid-template-columns:1fr auto;align-items:center;column-gap:16px}
	.al-about__exp{grid-column:1;grid-row:1}
	.al-about__btn{grid-column:2;grid-row:1;justify-self:end;margin:0}
	.al-about__thumb{grid-column:1/-1}
	.al-about__btn .al-round{width:110px;height:110px;gap:6px;font-size:12px;line-height:15px}
	.al-about__btn .al-round svg{width:16px;height:16px}
}
/* Case-study tags: each pill keeps its words on one line; the row wraps instead. */
.al-work__meta em{white-space:nowrap}
@media (max-width:1199px){.al-work__meta{display:flex;flex-wrap:wrap;gap:8px}}
@media (max-width:767px){.al-work__meta em{height:30px;padding:0 14px;font-size:14px}}

/* ---------- Home, round 2 of phone / tablet fixes ---------- */
/* One-column grids must never grow past the screen (a long <select> option or a nowrap line did that,
   and the overflow was clipped at the right edge). */
@media (max-width:1199px){
	.al-split,.al-split--half,.al-split--blog{grid-template-columns:minmax(0,1fr)}
	.al-split>*,.al-form>*,.al-form label,.al-blog__item{min-width:0}
	.al-form select,.al-form input,.al-form textarea{min-width:0;max-width:100%}
	.al-hotline{box-sizing:border-box;max-width:100%;padding-right:84px}
	.al-hotline b{white-space:nowrap}
}
@media (max-width:767px){
	.al-form{grid-template-columns:minmax(0,1fr)}
	.al-hotline{padding:16px 72px 16px 20px}
	.al-hotline b{font-size:26px}
	.al-hero__wrap{padding-bottom:36px}
}
/* News: desktop shows three; tablet / phone get a swipe strip of all ten (one card per view on phones). */
.al-blog__item:nth-child(n+4){display:none}
@media (max-width:1199px){
	.al-blog__grid{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:6px}
	.al-blog__grid::-webkit-scrollbar{display:none}
	.al-blog__item,.al-blog__item:nth-child(n+4){display:flex;flex:0 0 calc(50% - 10px);scroll-snap-align:start}
}
@media (max-width:767px){.al-blog__item,.al-blog__item:nth-child(n+4){flex-basis:100%}}
/* Testimonials: the company's small logo beside the name (tablet / phone). */
.al-testi__mini{display:none}
@media (max-width:1199px){
	.al-testi__slide{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:center}
	.al-testi__slide p{grid-column:1/-1}
	.al-testi__slide h5{grid-column:1;grid-row:2}
	.al-testi__slide span{grid-column:1;grid-row:3}
	.al-testi__mini{display:block;grid-column:2;grid-row:2/4;width:auto;max-width:110px;height:48px;object-fit:contain;margin-top:24px}
}
/* Footer on phones: no "Liên hệ ngay" block and no bottom links; bigger centred logo, centred copyright. */
@media (max-width:767px){
	.pgs-footer__top,.pgs-footer__bottom nav{display:none}
	.pgs-footer__main{border-top:0;padding-top:50px}
	.pgs-footer__brand{text-align:center}
	.pgs-footer__brand img{width:120px;height:120px;margin:0 auto}
	.pgs-footer__brand p{margin-left:auto;margin-right:auto}
	.pgs-footer__bottom{align-items:center;text-align:center}
	.pgs-footer__bottom span{text-wrap:balance}
}
@media (max-width:1199px){.al-footer-wrap .pgs-footer,.pgs-wrap .pgs-footer{padding-left:max(24px,calc((100% - 540px) / 2));padding-right:max(24px,calc((100% - 540px) / 2))}}
@media (max-width:767px){.al-footer-wrap .pgs-footer,.pgs-wrap .pgs-footer{padding-left:15px;padding-right:15px}}
/* Chat button: the blue robot mark on a white disc (replaces the gold speech bubble). */
.pgs-chat__fab{background:#fff;box-shadow:0 10px 30px rgba(3,3,3,.18),0 0 0 1px rgba(59,79,228,.12)}
.pgs-chat__robot{display:block;width:44px;height:auto}

/* ---------- UI/UX pass for phones & tablets (ui-ux-pro-max: touch targets ≥44px, text ≥13px, sticky UI never hides content) ---------- */
html{scroll-padding-top:96px}
/* Invisible 44px hit area around small links of the tablet / phone designs (header.js marks them .pgs-hit). */
.pgs-hit:after{content:'';position:absolute;left:-8px;right:-8px;top:50%;height:44px;min-height:100%;transform:translateY(-50%)}
@media (max-width:1199px){
	.pgs-footer__col a{display:inline-block;padding:8px 0}
	.pgs-footer__input button{width:44px;height:44px;right:13px;display:grid;place-items:center}
	.al-caps__item li a,.al-caps__more a{display:inline-block;padding:8px 0}
	.al-caps__item li{margin:0}
}
@media (max-width:767px){
	html{scroll-padding-top:84px}
	.pgs-chat{right:12px;bottom:12px;gap:10px}
	.pgs-chat__fab,.pgs-hub__fab{width:52px;height:52px}
	.pgs-chat__robot{width:38px}
	.pgs-backtop{right:27px!important;bottom:136px!important;width:52px!important;height:52px!important}
	.pgs-footer{padding-bottom:110px}
}
@media (max-width:1199px){.pgs-footer__bottom nav a{display:inline-block;padding:9px 0}}
@media (max-width:767px){.al-about__btn .al-round{font-size:13px;line-height:16px}}
/* Step pills on tablet / phone designs: one swipeable row of tabs. */
.pgs-page [data-n="Thanh trượt"],.pgs-page [data-n="Thanh tab"]{overflow-x:auto!important;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pgs-page [data-n="Thanh trượt"]::-webkit-scrollbar,.pgs-page [data-n="Thanh tab"]::-webkit-scrollbar{display:none}
.pgs-page [data-n="Thanh trượt"]>*,.pgs-page [data-n="Thanh tab"]>*{flex:none!important;scroll-snap-align:start}

/* Outlined pills / buttons: a heavier, slightly darker border (user request). */
.al-pill,.al-brand__pill,.al-work__tags a,.al-work__meta em,.al-header__search,.al-round,.al-caps__item,.al-process__item,.al-counter__item{border-width:1.5px;border-color:#c9c9c9}
.al-pill--dark{border-color:#555}
.al-work__tags a.is-active,.al-work__meta em.is-hl,.al-process__item.is-active,.al-counter__item.is-active{border-color:transparent}

/* Testimonials: no big company logo; the small logo sits beside the name and company, centred on them. */
.al-testi__logo{display:none!important}
.al-testi__slide{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;align-items:center}
.al-testi__slide p{grid-column:1/-1}
.al-testi__slide h5{grid-column:1;grid-row:2;align-self:end}
.al-testi__slide span{grid-column:1;grid-row:3;align-self:start}
.al-testi__mini{display:block!important;grid-column:2;grid-row:2/4;align-self:center;width:auto;max-width:140px;height:56px;margin-top:30px;object-fit:contain}
@media (max-width:767px){.al-testi__mini{max-width:110px;height:44px}}
/* Tablet / phone designs: labels of full-width buttons sit in the middle. */
.pgs-page--t [data-n^="Nút"]>[data-th],.pgs-page--m [data-n^="Nút"]>[data-th],.pgs-page--t [data-n^="Gửi"]>[data-th],.pgs-page--m [data-n^="Gửi"]>[data-th]{text-align:center}
.pgs-page--t [data-n^="Nút"]:has(>[data-th]:only-child),.pgs-page--m [data-n^="Nút"]:has(>[data-th]:only-child){justify-content:center!important}

/* ---------- Feedback round 2 (mobile / tablet) ---------- */
/* Service bullets: dot centred on its line, text after it. */
@media (max-width:1199px){
	.al-caps__item li a{padding:8px 0 8px 18px}
	.al-caps__item li a:before{top:50%;margin-top:-3px}
	.al-caps__more a{padding:6px 0 6px 16px}
}
/* Burger → X: the three bars meet in the middle. */
.pgs-menu-open .al-header__burger span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.pgs-menu-open .al-header__burger span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
.al-header__burger{padding:12px 8px;height:44px;box-sizing:border-box}
/* Phone menu: services in labelled groups, links with room to tap. */
.al-menu__item.is-open .al-menu__sub{display:block!important;padding:4px 0 18px}
.al-menu__sub>a,.al-menu__group a{display:block;padding:9px 0 9px 14px;border-left:2px solid #eee;font:400 16px/1.3 'Kanit',sans-serif;color:#333;text-decoration:none}
.al-menu__sub>a:hover,.al-menu__group a:hover{border-left-color:#F8D000;color:#030303}
.al-menu__group{margin-top:14px}
.al-menu__group:first-child{margin-top:4px}
.al-menu__group b{display:block;margin-bottom:4px;font:700 12px/1 'Space Grotesk',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#b08f00}
@media (min-width:600px){.al-menu__item.is-open .al-menu__sub{display:grid!important;grid-template-columns:1fr 1fr;column-gap:30px}.al-menu__sub>a{grid-column:1/-1}}
/* Home lead form: labels line up, fields with a clearer border. */
@media (max-width:1199px){
	.al-form label{gap:8px;line-height:1.3}
	.al-form input,.al-form select,.al-form textarea{border:1.5px solid #cfcfcf}
	.al-form input:focus,.al-form select:focus,.al-form textarea:focus{border-color:#F8D000}
}
@media (max-width:1199px){.al-home .al-form select,.al-home .al-form input,.al-home .al-form textarea,.al-home .al-form .al-dd__btn{border:1.5px solid #cfcfcf!important}}

/* ===== Home, phone (feedback doc 2, 2026-10-29) ===== */
@media (max-width:767px){
	/* client logos: one running row */
	.al-brand__row--2{display:none}
	.al-brand{height:200px!important}
	/* less air around the services list and between form and news */
	.al-caps{padding-bottom:40px}
	.al-caps__more{margin-top:16px}
	.al-process{padding-top:44px}
	.al-lead-form{padding-bottom:40px}
	.al-blog{padding-top:44px}
	/* case study tags: one line, the same pill for all three */
	.al-work__meta{flex-wrap:nowrap!important;gap:6px!important;overflow-x:auto;scrollbar-width:none}
	.al-work__meta::-webkit-scrollbar{display:none}
	.al-work__meta em{flex:0 0 auto;display:inline-flex!important;align-items:center;height:30px!important;padding:0 12px!important;border:1.5px solid #c9c9c9!important;border-radius:99px!important;background:#fff!important;font-size:13px!important;line-height:1!important;white-space:nowrap}
	.al-work__meta em.is-hl{border-color:#F8D000!important;background:#FEF6CC!important}
	/* reviews: smaller photo (sharper), name and company on one line each, smaller company logo */
	.al-testi__thumb{width:280px!important;height:300px!important;margin-left:auto;margin-right:auto}
	.al-testi__slide h5,.al-testi__slide>span{white-space:nowrap}
	.al-testi__mini{max-width:84px!important;height:36px!important}
	/* form ticks on one line */
	.al-checks li{font-size:16px;white-space:nowrap}
	/* news: real cards in a swipe strip */
	.al-blog__grid{gap:14px!important;scroll-snap-type:x mandatory;padding-bottom:8px!important}
	.al-blog__item{flex:0 0 86%!important;scroll-snap-align:start;border:1.5px solid #e3e3e3;border-radius:16px;overflow:hidden;background:#fff;padding:0 0 18px!important}
	.al-blog__item>h3,.al-blog__item>.al-blog__excerpt,.al-blog__item>.al-blog__foot{margin-left:18px!important;margin-right:18px!important}
	.al-blog__item .al-blog__thumb{border-radius:0!important}
	/* footer: bigger logo closer to its text, less space under the copyright */
	.pgs-footer__main{padding-top:36px}
	.pgs-footer__brand img{width:190px!important;height:auto!important;margin-bottom:-18px!important}
	.pgs-footer{padding-bottom:40px!important}
}

/* TVC band and video badge line up with the content column below (≤1199px). */
@media (max-width:1199px){
	.al-home .al-launch__card{padding-left:max(15px,calc((100% - 960px) / 2));padding-right:max(15px,calc((100% - 960px) / 2))}
	.al-home .al-launch__badge{left:max(15px,calc((100% - 960px) / 2))}
}
@media (max-width:991px){
	.al-home .al-launch__card{padding-left:max(15px,calc((100% - 720px) / 2));padding-right:max(15px,calc((100% - 720px) / 2))}
	.al-home .al-launch__badge{left:max(15px,calc((100% - 720px) / 2))}
}
@media (max-width:767px){
	.al-home .al-launch__card{padding-left:max(15px,calc((100% - 540px) / 2));padding-right:max(15px,calc((100% - 540px) / 2))}
	.al-home .al-launch__badge{left:max(15px,calc((100% - 540px) / 2))}
}

/* News: the 10 latest posts in one strip on every screen, dragged by finger or mouse (user request). */
.al-home .al-blog__grid{display:flex!important;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px;cursor:grab}
.al-home .al-blog__grid::-webkit-scrollbar{display:none}
.al-home .al-blog__grid.is-drag{cursor:grabbing;scroll-snap-type:none}
.al-home .al-blog__grid.is-drag a{pointer-events:none}
.al-home .al-blog__item,.al-home .al-blog__item:nth-child(n+4){display:flex!important;flex:0 0 calc((100% - 48px) / 3);scroll-snap-align:start}
.al-home .al-blog__item img{-webkit-user-drag:none;user-select:none}
@media (max-width:1199px){.al-home .al-blog__item,.al-home .al-blog__item:nth-child(n+4){flex-basis:calc(50% - 12px)}}

/* "Dịch vụ thuê ngoài": two lines below 1200px — the label, then the four services in one row
   (two per row on phones, label beside them). */
@media (max-width:1199px){
	.al-home .al-caps__more{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;align-items:center;gap:12px 22px;padding:22px 24px}
	.al-home .al-caps__more b{grid-column:1/-1;justify-self:start;font-size:18px}
	.al-home .al-caps__more a{font-size:17px;white-space:nowrap}
}
@media (max-width:767px){
	.al-home .al-caps__more{grid-template-columns:1fr 1fr;gap:6px 14px;padding:18px 16px}
	.al-home .al-caps__more b{font-size:16px}
	.al-home .al-caps__more a{font-size:15px}
}
@media (min-width:768px) and (max-width:991px){
	.al-home .al-caps__more{gap:10px 14px;padding:20px 18px}
	.al-home .al-caps__more a{font-size:15px;padding-left:13px}
}