@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Manrope:wght@400;500;600;700&display=swap');
:root{--ink:#090b0f;--ink2:#11151c;--panel:#171b23;--cream:#f4efe6;--muted:#aaa9a4;--line:#2b3039;--orange:#f26a28;--peach:#ffb27d;--max:1180px;--r:18px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--cream);font-family:Manrope,sans-serif;line-height:1.65}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto;display:block}.image-error{background:linear-gradient(135deg,var(--panel),#242a34);min-height:180px}.skip-link{position:fixed;z-index:99;left:16px;top:-60px;background:var(--cream);color:var(--ink);padding:10px 16px;border-radius:8px}.skip-link:focus{top:14px}.wrap{width:min(var(--max),calc(100% - 48px));margin:auto}.display{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:-.025em;line-height:1.08;margin:0}/* 1.08 chu khong phai .95: chu hoa tieng Viet xep dau hai tang (E-mu-sac tren, E-nang duoi). O .95 dau cham dong ke; tren 1.2 thi khoi chu tran man hinh. 1.08 tach duoc net ma van giu duoc do chat. */.eyebrow{color:var(--peach);font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 22px;border:1px solid transparent;border-radius:999px;background:var(--orange);color:white;font-size:.85rem;font-weight:700;transition:transform .2s,background .2s,border-color .2s}.btn:hover{transform:translateY(-2px);background:#ff7b3a}.btn.ghost{background:transparent;border-color:var(--line)}.btn.ghost:hover{background:#ffffff0b;border-color:#ffffff55}:focus-visible{outline:3px solid var(--peach);outline-offset:4px}
header{position:sticky;top:0;z-index:50;background:#090b0fdd;backdrop-filter:blur(18px);border-bottom:1px solid #ffffff12}.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:26px}.brand{position:relative;z-index:60;flex:none}.brand img{width:76px}.links{display:flex;align-items:center;gap:28px;font-size:.8rem;font-weight:600;color:#d3d0ca}.links a{position:relative;padding:8px 0}.links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--orange);transition:.2s}.links a:hover,.links a.active{color:white}.links a:hover::after,.links a.active::after{right:0}.menu{display:none;position:relative;z-index:60;flex:none;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:none;color:white;font-size:1.2rem;line-height:1;cursor:pointer}:is(a,button):focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}
.page-hero{padding:62px 0 44px;border-bottom:1px solid var(--line);background:radial-gradient(circle at 80% 20%,#f26a2825,transparent 28%);overflow:hidden}.page-hero h1{font-size:clamp(2.6rem,5.2vw,5.25rem);max-width:14ch;margin:14px 0 24px;overflow-wrap:anywhere}.page-hero p{max-width:650px;color:#c0bdb6;font-size:1.08rem}.page-hero .meta{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}.pill{border:1px solid var(--line);border-radius:999px;padding:8px 13px;color:var(--muted);font-size:.74rem}.hero-layout{display:grid;grid-template-columns:1.05fr .7fr;gap:60px;align-items:end}.hero-media{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);transform:rotate(1.5deg);box-shadow:0 35px 80px #0008}.hero-media img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.82) contrast(1.05)}
section{padding:58px 0;border-bottom:1px solid var(--line)}.section-head{display:grid;grid-template-columns:1fr .7fr;gap:40px;align-items:end;margin-bottom:30px}.section-head h2{font-size:clamp(3rem,6vw,5.5rem);margin-top:12px}.section-head p{color:var(--muted)}
.home-hero{min-height:calc(100svh - 76px);display:grid;align-items:center;padding:48px 0 36px;border-bottom:1px solid var(--line);background:radial-gradient(circle at 78% 26%,#f26a2828,transparent 30%)}.home-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:52px;align-items:center}.home-title{font-size:clamp(3.4rem,7vw,6rem);max-width:14ch;margin:12px 0 22px;text-wrap:balance}.home-title span{color:var(--orange)}.home-copy{max-width:650px;color:#c0bdb6;font-size:1.08rem}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.feature-image{position:relative;align-self:center;width:calc(clamp(300px,62vh,600px) * .8);max-width:100%;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 70px #0008}.feature-image img{width:100%;aspect-ratio:4/5;object-fit:cover}.proof{grid-column:1/-1;display:grid;grid-template-columns:1fr repeat(3,auto);gap:26px;align-items:center;margin-top:22px;padding-top:22px;border-top:1px solid var(--line);color:var(--muted);font-size:.76rem}.proof strong{display:block;color:var(--cream);font-family:'Barlow Condensed';font-size:1.8rem;line-height:1}.logo-strip{padding:30px 0;border-bottom:1px solid var(--line)}.logo-row{display:flex;align-items:center;justify-content:space-between;gap:28px}.logo-row span{color:var(--muted);font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}.logo-row img{height:25px;width:auto;max-width:105px;object-fit:contain;filter:grayscale(1) brightness(2.2);opacity:.7}.service-teasers{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line)}.service-teaser{display:grid;grid-template-columns:58px 1fr;gap:18px;padding:28px 28px 28px 0;border-bottom:1px solid var(--line)}.service-teaser:nth-child(odd){border-right:1px solid var(--line)}.service-teaser:nth-child(even){padding-left:28px}.service-teaser b{font-family:'Barlow Condensed';font-size:1.8rem;color:var(--orange)}.service-teaser h3{margin:0 0 7px}.service-teaser p{margin:0;color:var(--muted);font-size:.86rem}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}.card .media{aspect-ratio:4/3;overflow:hidden}.card .media img{width:100%;height:100%;object-fit:cover}.card-body{padding:22px}.card h3{margin:0 0 8px}.card p{margin:0;color:var(--muted);font-size:.88rem}.tag{color:var(--peach);font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.card .tag+h3{margin-top:8px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px}.prose{max-width:720px}.prose h2{font-size:clamp(2.8rem,6vw,5rem)}.prose p,.prose li{color:#b9b6af}.facts{display:grid;grid-template-columns:1fr 1fr;gap:14px}.fact{padding:24px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}.fact strong{display:block;color:var(--orange);font-family:'Barlow Condensed';font-size:2rem}.list{display:grid;gap:0;border-top:1px solid var(--line)}.row{display:grid;grid-template-columns:70px 1fr;gap:22px;padding:28px 0;border-bottom:1px solid var(--line)}.row b{font-family:'Barlow Condensed';font-size:1.8rem;color:var(--orange)}.row h3{margin:0 0 8px}.row p{margin:0;color:var(--muted)}
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.projects.has-featured>.project.featured:last-child{grid-column:1/-1}.projects.has-featured>.project.featured:last-child img{aspect-ratio:21/9}.project{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;background:var(--panel);border:1px solid var(--line);transition:.25s}.project.featured img{aspect-ratio:auto}.project img{width:100%;aspect-ratio:4/5;flex:1 1 auto;min-height:0;object-fit:cover;transition:.45s}.project div{padding:16px}.project h3{margin:6px 0 0;font-size:.92rem}.project:hover{transform:translateY(-6px);border-color:#ffffff40;box-shadow:0 24px 45px #0006}.project:hover img{transform:scale(1.035)}.project.featured{grid-column:span 2}.project.featured img{aspect-ratio:16/9}.project.featured h3{font-size:1.2rem}
.case{display:grid;grid-template-columns:.75fr 1.25fr;gap:60px}.case dl{margin:0}.case dt{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;margin-top:20px}.case dd{margin:4px 0}.metric{margin-top:26px;padding:26px;border-radius:var(--r);background:var(--orange);color:white}.metric strong{display:block;font-family:'Barlow Condensed';font-size:3.2rem;line-height:1}
.jobs{display:grid;gap:12px}.job{display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px;padding:24px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}.job h3{margin:0}.job p{color:var(--muted);margin:5px 0 0;font-size:.85rem}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.contact-card{padding:28px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}.contact-card h3{margin-top:0}.contact-card p,.contact-card a{color:var(--muted)}
.image-story{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}.image-story img{width:100%;height:100%;min-height:380px;object-fit:cover;border-radius:var(--r);border:1px solid var(--line)}.image-story img:last-child{margin-top:48px}.cta-band{padding:62px;border-radius:var(--r);background:var(--orange);color:white;display:flex;justify-content:space-between;align-items:end;gap:30px}.cta-band h2{font-size:clamp(3rem,6vw,5.5rem);max-width:9ch}.cta-band p{max-width:45ch;color:var(--ink)}.cta-band .btn{background:white;color:#cf4d0f;white-space:nowrap}
footer{padding:52px 0 28px}.footer{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px}.footer p,.footer a{display:block;color:var(--muted);font-size:.8rem;margin:0 0 7px}.bottom{display:flex;justify-content:space-between;margin-top:40px;padding-top:18px;border-top:1px solid var(--line);color:#85878d;font-size:.7rem}
@media(max-width:850px){section{padding:70px 0}.section-head{margin-bottom:32px}.cards{grid-template-columns:1fr 1fr}.projects{grid-template-columns:1fr 1fr}.split,.case,.hero-layout,.home-grid{grid-template-columns:1fr}.hero-media,.feature-image{max-width:520px}.proof{grid-template-columns:1fr 1fr}.proof>span:first-child{grid-column:1/-1}.logo-row{justify-content:flex-start;flex-wrap:wrap}.logo-row span{width:100%}.section-head{grid-template-columns:1fr}.footer{grid-template-columns:1fr}.links{position:fixed;inset:0;z-index:40;height:100dvh;width:100%;background:var(--ink);padding:calc(76px + 18px) 26px 32px;display:none;flex-direction:column;align-items:stretch;gap:0;overflow-y:auto;overscroll-behavior:contain;font-size:1.15rem}.links.open{display:flex}.links a{padding:18px 2px;border-bottom:1px solid var(--line)}.links a::after{display:none}.links a:last-child{border-bottom:0}body.nav-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}.nav-cta{display:none}.menu{display:block}.cta-band{align-items:flex-start;flex-direction:column}}
@media(max-width:560px){.wrap{width:calc(100% - 34px)}section{padding:40px 0}.section-head{margin-bottom:24px}.home-hero{padding:36px 0 40px}.feature-image{width:min(100%,300px)}.proof{margin-top:18px;padding-top:18px;gap:18px}.logo-strip{padding:22px 0}.project img{aspect-ratio:4/5}.project div{padding:14px}.row{padding:22px 0}.service-teaser{padding:22px 0}.fact{padding:20px}.contact-card{padding:22px}.job{padding:20px}.cards{gap:14px}.projects{gap:14px}footer{padding:40px 0 24px}.footer{gap:28px}.bottom{margin-top:28px}.page-hero{padding:44px 0 32px}.page-hero h1{font-size:clamp(2.2rem,8.5vw,2.9rem)}.home-title{font-size:clamp(3.8rem,18vw,5.4rem)}.cards,.facts,.contact-grid,.image-story,.service-teasers{grid-template-columns:1fr}.projects{grid-template-columns:1fr 1fr}.project.featured{grid-column:1/-1}.service-teaser:nth-child(odd){border-right:0}.service-teaser:nth-child(even){padding-left:0}.image-story img:last-child{margin-top:0}.job{grid-template-columns:1fr}.cta-band{padding:34px 24px}.bottom{flex-direction:column;gap:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ── Trang Dịch vụ (bản thiết kế lại 2026-09-02) ─────────────────────────────
   Lấy từ newsmedia-services-redesign.css. Đã đổi tên các lớp đụng với site:
   .container->.wrap  .button->.btn  .contact*->.svc-close*  .hero->.svc-hero
   Bỏ phần header/menu/footer vì site đã có sẵn, và bỏ .timeline/.process vì
   bản thiết kế không dùng tới. Riêng .channel-strip có trong CSS gốc nhưng
   thiếu ở HTML — đã dựng lại thành .channel-block/.channel-groups chia nhóm. */
.btn.dark{border-color:var(--ink);background:var(--ink);color:#fff}.btn.dark:hover{background:#20242b}
.svc-hero{padding:56px 0;border-bottom:1px solid var(--line);background:radial-gradient(circle at 78% 28%,#f26a2824,transparent 30%)}
.svc-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center}
.svc-hero h1{max-width:12ch;margin:15px 0 24px;font-size:clamp(3.4rem,6.4vw,5.4rem)}
.svc-hero .lead{max-width:640px;color:#c0bdb6;font-size:1rem}
.expertise-poster{position:relative;overflow:hidden;min-height:520px;padding:30px;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(145deg,#181c24,#0b0d11);box-shadow:0 35px 80px #0007}
.expertise-poster::before{position:absolute;inset:-35% auto auto 45%;width:300px;height:300px;border-radius:50%;background:var(--orange);filter:blur(100px);opacity:.17;content:""}
.poster-kicker{display:block;margin-bottom:32px;color:var(--muted);font-size:.65rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.poster-row{position:relative;display:flex;align-items:baseline;gap:17px;padding:13px 0;border-bottom:1px solid var(--line)}
.poster-row b{width:25px;color:var(--orange);font-size:.7rem}
.poster-row strong{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;line-height:.9;letter-spacing:-.025em;font-size:clamp(2.4rem,4vw,3.9rem)}
.poster-mark{position:absolute;right:27px;bottom:18px;color:#ffffff0b;font-family:'Barlow Condensed';font-size:7rem;font-weight:800;line-height:1}.poster-mark span{color:var(--orange)}
.section-intro{display:grid;grid-template-columns:1fr .58fr;gap:60px;align-items:end;margin-bottom:46px}
.section-intro h2{margin:12px 0 0;font-size:clamp(3rem,6vw,5.5rem)}
.section-intro>p{max-width:430px;margin:0;color:var(--muted)}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.service-card{min-height:360px;display:flex;flex-direction:column;justify-content:space-between;padding:28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:.25s ease}.service-card.is-final{grid-column:1/-1;min-height:0;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:44px;padding:40px;background:linear-gradient(135deg,#171b23,#0d1015)}.service-card.is-final .service-top{grid-column:1/-1;font-size:2rem}.service-card.is-final h3{font-size:clamp(2.05rem,3.2vw,3.2rem);margin:0}.service-card.is-final p{max-width:44ch}.service-card.is-final ul{margin:0}.service-card.is-final:hover{background:var(--orange)}
.service-top{display:flex;justify-content:space-between;color:var(--orange);font-family:'Barlow Condensed';font-size:1.7rem;font-weight:700}
.service-card h3{margin:0 0 10px;font-size:clamp(1.9rem,2.95vw,2.95rem);line-height:.94}
.service-card p{max-width:39ch;margin:0;color:var(--muted);font-size:.9rem}
.service-card ul{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.service-card li{padding:6px 11px;border:1px solid var(--line);border-radius:999px;color:#c5c1b9;font-size:.68rem}
.service-card li.hot-tag{border-color:var(--orange);background:var(--orange);color:#fff}
.service-card:hover{background:var(--orange);color:white}
.service-card:hover .service-top,.service-card:hover p{color:white}
.service-card:hover li{border-color:#ffffff60;color:white}
.service-card:hover li.hot-tag{border-color:#fff;background:#fff;color:var(--orange)}
.story-beat{display:block;margin-bottom:13px;color:var(--peach);font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.service-card:hover .story-beat{color:#fff}
.listen-panel{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;margin-top:28px;padding:52px 48px;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(135deg,#171b23,#0d1015)}
.listen-heading h3{margin:14px 0 0;font-family:'Barlow Condensed',sans-serif;font-size:clamp(2.1rem,3.5vw,3.4rem);line-height:1.06;letter-spacing:-.015em;text-transform:uppercase}
.listen-steps{display:grid;grid-template-columns:repeat(3,1fr);border-left:1px solid var(--line)}
.listen-steps>div{padding:10px 26px;border-right:1px solid var(--line)}
.listen-steps span{color:var(--orange);font-size:.67rem;font-weight:700}
.listen-steps h4{margin:46px 0 8px;font-family:'Barlow Condensed',sans-serif;font-size:1.8rem;line-height:1;text-transform:uppercase}
.listen-steps p{margin:0;color:var(--muted);font-size:.78rem}
.channel-block{margin-top:30px;padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.channel-block .channel-label{margin:0 0 22px;color:var(--peach);font-size:.65rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.channel-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}.channel-group h4{margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line);color:#8f9196;font-family:Manrope,sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.channel-group ul{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0;padding:0;list-style:none}.channel-group li{display:inline-flex;align-items:center;color:var(--cream);font-family:'Barlow Condensed',sans-serif;font-size:1.02rem;text-transform:uppercase;letter-spacing:.01em}.channel-group li::before{display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:var(--orange);content:""}.channel-group li.is-new::before{background:var(--peach);box-shadow:0 0 0 3px #ffb27d2e}.channel-note{margin:22px 0 0;color:#8f9196;font-size:.74rem}@media(max-width:850px){.channel-groups{grid-template-columns:1fr 1fr;gap:26px}}@media(max-width:560px){.channel-block{margin-top:24px;padding:24px 0}.channel-groups{grid-template-columns:1fr;gap:22px}.channel-group li{font-size:.98rem}}
.statement{overflow:hidden;padding:55px 0;background:var(--orange);color:#fff;text-align:center;border-bottom:1px solid var(--line)}
.statement-track{display:flex;align-items:center;justify-content:center;gap:26px;white-space:nowrap;font-family:'Barlow Condensed';font-size:clamp(2.4rem,6vw,5.4rem);font-weight:800;line-height:.9;text-transform:uppercase}
.statement-track i{font-style:normal;font-weight:400;opacity:.5}
.statement>p{margin:25px 20px 0;color:var(--ink);font-size:.82rem;font-weight:600;letter-spacing:.04em}
.svc-close{padding:86px 0;background:var(--cream);color:var(--ink)}
.svc-close .eyebrow{color:#b8420d}
.svc-close h2{margin:12px 0 0;font-size:clamp(3rem,6vw,5.5rem)}
.svc-close-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:70px;align-items:end}
.svc-close-action p{max-width:38ch;margin-bottom:28px;color:#53504a}
@media(max-width:850px){
.svc-hero-grid{grid-template-columns:1fr;gap:45px}.service-grid{grid-template-columns:1fr 1fr}.service-card.is-final{grid-template-columns:1fr;gap:26px;padding:32px;align-items:start}.service-card:nth-last-child(2):nth-child(odd){grid-column:1/-1}.listen-panel{padding:40px 32px}
.expertise-poster{min-height:460px}
.section-intro,.svc-close-grid{grid-template-columns:1fr;gap:24px}
.statement-track{flex-wrap:wrap;white-space:normal;gap:12px 20px}
.listen-panel{grid-template-columns:1fr;gap:38px}
.listen-steps{border-top:1px solid var(--line);border-left:0}
.listen-steps>div{padding-top:22px}
}
@media(max-width:560px){
.svc-hero{padding:40px 0}
.expertise-poster{min-height:400px;padding:22px}
.poster-row strong{font-size:2.6rem}
.poster-mark{font-size:5rem;right:18px}
.service-grid{grid-template-columns:1fr}
.service-card{min-height:auto;padding:23px}
.service-card.is-final{padding:26px 23px;gap:20px}
.statement{padding:44px 0}
.statement-track{flex-wrap:wrap;white-space:normal;gap:8px 14px;font-size:2.1rem}
.svc-close{padding:56px 0}
.listen-panel{padding:26px 22px}
.listen-steps{grid-template-columns:1fr}
.listen-steps>div{padding:22px 0;border-right:0;border-bottom:1px solid var(--line)}
.listen-steps>div:last-child{border-bottom:0}
.listen-steps h4{margin:18px 0 7px}
}

/* Lấp hàng cuối của lưới dự án ở khổ 2 cột (cả ≤850 lẫn ≤560 đều 2 cột).
   Thẻ lớn chiếm trọn hàng nên các thẻ sau bắt đầu lại từ cột 1 -> mốc đổi từ
   2n+1 sang 2n. Đặt cuối file để thắng mọi khai báo 2 cột phía trên.        */
@media(max-width:850px){
.projects:not(.has-featured)>.project:last-child:nth-child(2n+1),
.projects.has-featured>.project:last-child:nth-child(2n){grid-column:1/-1}
.projects:not(.has-featured)>.project:last-child:nth-child(2n+1) img,
.projects.has-featured>.project:last-child:nth-child(2n) img{aspect-ratio:16/9}
}

/* Lấp hàng cuối — CHỈ cho lưới 3 cột. Phải khoá theo min-width, nếu để ở base
   thì ở khổ 2 cột các mốc 3n sẽ khớp nhầm một thẻ giữa danh sách, kéo nó rộng
   ra và đẻ thêm lỗ trống mới.                                                */
@media(min-width:851px){
.projects:not(.has-featured)>.project:last-child:nth-child(3n+1){grid-column:span 3}
.projects:not(.has-featured)>.project:nth-last-child(2):nth-child(3n+1){grid-column:span 2}
.projects.has-featured>.project:last-child:nth-child(3n){grid-column:span 3}
.projects.has-featured>.project:nth-last-child(2):nth-child(3n){grid-column:span 2}
.projects:not(.has-featured)>.project:last-child:nth-child(3n+1) img,
.projects.has-featured>.project:last-child:nth-child(3n) img{aspect-ratio:21/9}
.projects:not(.has-featured)>.project:nth-last-child(2):nth-child(3n+1) img,
.projects.has-featured>.project:nth-last-child(2):nth-child(3n) img{aspect-ratio:16/9}
}

/* Nhịp trang của trang Dịch vụ: đen (đầu trang) -> kem (chúng tôi làm gì)
   -> cam (thẻ 04) -> đen (kênh + lắng nghe) -> cam (tuyên ngôn) -> kem (kết).
   Không dùng gradient hay hình nền: chỉ đổi nền để ngắt mảng đen dài.
   Cam gốc #f26a28 trên nền kem chỉ đạt 2,67:1 nên chữ cam đổi sang #b8420d. */
.svc-what{background:var(--cream);color:var(--ink);border-bottom:0}
.svc-what .eyebrow,.svc-what .story-beat{color:#b8420d}
.svc-what .section-intro>p{color:#53504a}
.svc-what .service-grid{border-top-color:#d8d0c0;border-left-color:#d8d0c0}
.svc-what .service-card{border-right-color:#d8d0c0;border-bottom-color:#d8d0c0}
.svc-what .service-card p{color:#53504a}
.svc-what .service-top{color:#b8420d}
.svc-what .service-card li{border-color:#cdc4b2;color:#53504a}
.svc-what .service-card li.hot-tag{border-color:var(--orange);background:var(--orange);color:var(--ink)}
/* Mọi mảng cam đều dùng chữ ink: trắng trên cam chỉ 3,06:1, hụt chuẩn cho chữ nhỏ. */
.svc-what .service-card:hover{background:var(--orange);color:var(--ink)}
.svc-what .service-card:hover .service-top,
.svc-what .service-card:hover .story-beat,
.svc-what .service-card:hover p{color:var(--ink)}
.svc-what .service-card:hover li{border-color:#0a0c1055;color:var(--ink)}
.svc-what .service-card:hover li.hot-tag{border-color:var(--ink);background:var(--ink);color:var(--orange)}
/* Thẻ 04 — nhịp cam, đứng sẵn chứ không đợi hover */
.svc-what .service-card.is-final{background:var(--orange);color:var(--ink);border-right-color:var(--orange);border-bottom-color:var(--orange)}
.svc-what .service-card.is-final .service-top,
.svc-what .service-card.is-final .story-beat,
.svc-what .service-card.is-final p{color:var(--ink)}
.svc-what .service-card.is-final li{border-color:#0a0c1055;color:var(--ink)}
.svc-what .service-card.is-final li.hot-tag{border-color:var(--ink);background:var(--ink);color:var(--orange)}
.svc-what .service-card.is-final:hover{background:#e35f1e}

/* Mối nối thẻ 04 (cam) -> section đen: trước đây cộng dồn 92px đệm đáy kem
   + 92px đệm đỉnh đen + 30px margin dải kênh = 214px trống. Bản thân việc
   đổi màu đã là vách ngăn, không cần thêm khoảng đệm ở đúng chỗ đó.        */
/* Nhịp ở mối nối: kem → cam (thẻ 04) → kem → đen.
   Dải kem sau thẻ 04 là chủ ý, giữ lại. Phần cần cắt là khoảng ĐEN rỗng
   phía trên vạch kẻ dải kênh — trước đây 68px trước vạch, 99px trước nhãn. */
.svc-what{padding-bottom:80px}
.svc-flow{padding-top:30px}
.svc-flow .channel-block{margin-top:0}
/* Tiêu đề thẻ 04 để margin:0 nên đoạn mô tả bắt đầu ngay tại chân chữ —
   dấu tiếng Việt của hai dòng chồng lên nhau. */
.service-card.is-final h3{margin:0 0 14px}
@media(max-width:560px){.svc-what{padding-bottom:52px}.svc-flow{padding-top:22px}}
/* Tieu de bai viet & du an dai gap nhieu lan tieu de trang nen phai nho hon han, va can do dai dong rong hon de khong vo vun thanh chuc dong. */
body.single .page-hero h1{font-size:clamp(1.85rem,3vw,3.1rem);max-width:26ch;letter-spacing:-.015em}
@media(max-width:560px){body.single .page-hero h1{font-size:clamp(1.6rem,6.4vw,2.1rem);max-width:none}}

/* --- Trang bai viet ---------------------------------------------------
   Anh trong than bai truoc day an theo img{max-width:100%} toan cuc nen
   anh doc chiem tron chieu rong cot va cao vo tan. Chan lai bang chieu cao
   toi da theo khung nhin, va cho cot doc mot do rong de doc duoc. */
.post-cover{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);margin:0 0 40px}
.post-cover img{width:100%;aspect-ratio:16/9;object-fit:cover}
.prose.article{max-width:70ch;margin:0 auto}
.prose.article>*+*{margin-top:1.15em}
.prose img{max-height:74vh;width:auto;max-width:100%;margin:30px auto;border-radius:12px}
.prose figure{margin:30px 0}
.prose figure img{margin:0 auto}
.prose figcaption{margin-top:10px;color:var(--muted);font-size:.85rem;text-align:center}
.prose h2,.prose h3{margin-top:1.6em}
.prose h3{font-size:1.25rem}
.prose a{color:var(--peach);text-decoration:underline;text-underline-offset:3px}
@media(max-width:560px){.prose img{max-height:none;margin:22px auto}.post-cover{margin-bottom:26px}}

/* ── Khối "Vì sao chọn Newsmedia" (thiết kế lại 2026-09-02) ────────────────
   Trái: tuyên ngôn. Phải: bốn bước 01–04 nối nhau bằng đường cam mảnh.
   Dưới: dải ba nguyên tắc, rồi một câu kết có gạch hai bên.
   Đường nối vẽ bằng ::after của chính thẻ nên không cần đo toạ độ; xuống
   một cột thì tắt hẳn vì lúc đó nối ngang/dọc không còn nghĩa gì.        */
.why-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.why-intro h2{margin:14px 0 0;font-size:clamp(2.6rem,4.6vw,4.4rem);line-height:1.08}
.why-rule{display:block;width:52px;height:2px;margin:26px 0 22px;background:var(--orange)}
.why-intro p{max-width:46ch;margin:0;color:#bab8b2}

.why-steps{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:26px;margin:0;padding:0;list-style:none}
.why-step{position:relative;display:grid;grid-template-rows:auto auto auto;align-content:start;gap:12px;min-height:0;padding:19px 26px;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(150deg,#141821,#0c0f14)}
.why-step-head{display:flex;align-items:baseline;gap:12px}
.why-step-head b{font-family:'Barlow Condensed',sans-serif;font-size:2.5rem;line-height:1;color:var(--orange)}
.why-step-head span{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cream)}
.why-step-head span::before{content:"— ";color:var(--muted)}
.why-step .nm-icon{width:60px;height:60px;justify-self:end;color:#7c8390}
.why-step p{margin:0;color:#c0bfb9;font-size:.88rem;line-height:1.55}

/* Đường nối: 01→02 và 03→04 nằm ngang, 02→04 chạy dọc bên phải. */
/* Mạch nối 01→02→03→04. Lưới đọc trái-phải cả hai hàng nên chặng 02→03 là
   một nét chữ L: tụt xuống rãnh giữa hai hàng, chạy ngược sang trái, rồi lên
   thẻ 03. Rãnh nằm đúng 50% chiều cao lưới vì grid-auto-rows:1fr chia đều hai
   hàng — nhờ vậy không phải đo toạ độ bằng JS.
   Tâm thẻ cách mép lưới (W-26)/4 = 25% trừ 6,5px (26px là gap).            */
.why-step::after,.why-step::before{content:"";position:absolute;background:var(--orange)}
.why-step:nth-child(1)::after,.why-step:nth-child(3)::after{top:50%;right:-26px;width:26px;height:1px}
.why-step:nth-child(2)::after{left:50%;bottom:-13px;width:1px;height:13px}
.why-step:nth-child(3)::before{left:50%;top:-13px;width:1px;height:13px}
.why-step:nth-child(4)::after{display:none}
/* chấm đặt ở thẻ NHẬN, ngay giữa rãnh ngang */
.why-step:nth-child(2)::before,.why-step:nth-child(4)::before{left:-16.5px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%}
.why-step:nth-child(1)::before{display:none}
/* chặng ngang của nét L, nối tâm thẻ 02 về tâm thẻ 03 */
.why-steps::after{content:"";position:absolute;top:50%;left:calc(25% - 6.5px);right:calc(25% - 6.5px);height:1px;background:var(--orange)}.why-steps::before{content:"";position:absolute;top:calc(50% + 13px);left:calc(25% - 6.5px);width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--orange)}

.why-principles{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 34px;margin:58px 0 0;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);list-style:none}
.why-principles li{display:inline-flex;align-items:center;gap:12px;font-family:'Barlow Condensed',sans-serif;font-size:1.15rem;letter-spacing:.06em;text-transform:uppercase}
.why-principles .nm-icon{width:26px;height:26px;color:var(--orange)}
.why-principles li+li::before{content:"";flex:none;width:6px;height:6px;margin-right:22px;border-radius:50%;background:var(--orange)}

.why-close{display:flex;align-items:center;gap:24px;margin:18px 0 0;color:#d0cec8;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.why-close::before,.why-close::after{content:"";flex:1;height:1px;background:var(--line)}

@media(max-width:980px){
.why-grid{grid-template-columns:1fr;gap:40px}
.why-intro p{max-width:none}
}
@media(max-width:640px){
.why-steps{grid-template-columns:1fr;gap:14px}
.why-step{min-height:0;padding:20px 22px}
.why-step::after,.why-step::before,.why-steps::after,.why-steps::before{display:none}
.why-step .nm-icon{width:48px;height:48px}
.why-principles{gap:14px;margin-top:40px;padding:20px 0;flex-direction:column;align-items:flex-start}
.why-principles li+li::before{display:none}
.why-close{gap:14px;font-size:.7rem;letter-spacing:.16em}
.why-close::before{display:none}
}