:root{--bg:#090909;--panel:#10100f;--line:rgba(255,255,255,.1);--text:#f4f0e8;--muted:rgba(244,240,232,.7);--dim:rgba(244,240,232,.5);--accent:#e8792c;--accent2:#ff9a57}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.7 Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%}
.gp-wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 20px}
@media(min-width:640px){.gp-wrap{padding:0 32px}}
@media(min-width:1024px){.gp-wrap{padding:0 48px}}

/* header */
.gp-header{position:sticky;top:0;z-index:20;background:rgba(9,9,9,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.gp-header-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:18px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.gp-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.gp-brand img{width:36px;height:36px;border-radius:50%;border:1px solid rgba(232,121,44,.7);object-fit:cover}
.gp-brand b{display:block;font-size:11px;font-weight:600;letter-spacing:.23em}
.gp-brand i{display:block;font-style:normal;font-size:10px;letter-spacing:.16em;color:var(--dim);padding-top:3px}
.gp-nav{display:none;gap:6px}
.gp-nav{align-items:center}
.gp-nav a{position:relative;display:inline-flex;align-items:center;min-height:42px;padding:0 clamp(9px,.9vw,14px);border-radius:4px;font-size:13px;letter-spacing:.01em;white-space:nowrap;text-decoration:none;color:#ded8ce;transition:color .2s,background .2s}
.gp-nav a:hover,.gp-nav a:focus-visible{background:rgba(241,131,60,.13);color:#f4f0e8}
.gp-nav a.is-active{color:#f4f0e8}
.gp-nav a.is-active::after{content:"";position:absolute;left:clamp(9px,.9vw,14px);right:clamp(9px,.9vw,14px);bottom:4px;height:2px;border-radius:2px;background:#f1833c}
.gp-menu{position:relative}
.gp-menu>summary{list-style:none;width:44px;height:44px;border:1px solid rgba(255,255,255,.2);border-radius:4px;display:grid;place-content:center;gap:5px;cursor:pointer}
.gp-menu>summary::-webkit-details-marker{display:none}
.gp-menu>summary span{display:block;width:18px;height:1.5px;background:var(--text)}
.gp-menu[open] nav{position:fixed;top:100%;left:0;right:0;height:calc(100dvh - 78px);background:#090909;padding:24px 28px;display:flex;flex-direction:column;gap:4px;overflow:auto;z-index:30}
.gp-menu nav a{font-size:clamp(22px,6.6vw,40px);font-weight:500;letter-spacing:-.04em;text-decoration:none;padding:10px 0;white-space:nowrap}
.gp-menu nav a span{font-size:11px;color:var(--accent);margin-right:14px;letter-spacing:.1em;vertical-align:middle}
@media(min-width:1100px){.gp-nav{display:flex}.gp-menu{display:none}}

/* type */
.gp-eyebrow{margin:0 0 14px;color:var(--accent);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.035em;line-height:1.1}
.gp-h2{font-size:clamp(28px,4vw,44px);margin-bottom:28px}
.gp-lead{max-width:820px;color:var(--muted);font-size:clamp(16px,1.5vw,19px);line-height:1.8;margin:22px 0 0}
.gp-link{color:var(--accent2);text-decoration:none;font-weight:500}
.gp-link:hover{text-decoration:underline}

/* hero */
.gp-hero{padding:72px 0 48px}
.gp-hero h1{font-size:clamp(38px,6.4vw,84px);text-transform:uppercase;letter-spacing:-.06em;line-height:.98;max-width:1100px}
.gp-hero h1 span{display:block;color:rgba(244,240,232,.42);font-size:.52em;letter-spacing:-.03em;text-transform:none;margin-top:14px;line-height:1.15}
.gp-crumb{margin:0 0 26px}
.gp-crumb a{color:var(--accent2);text-decoration:none;font-size:14px}
.gp-chips{list-style:none;padding:0;margin:30px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.gp-chips li{border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:14px;color:var(--muted)}
.gp-chips--links li{padding:0}
.gp-chips--links a{display:block;padding:7px 14px;text-decoration:none}
.gp-chips--links a:hover{color:var(--accent2)}
.gp-hero-media{display:grid;grid-template-columns:1.6fr 1fr;gap:14px;margin-top:40px}
.gp-hero-fig{margin:0;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/10;background:var(--panel)}
.gp-hero-fig img{width:100%;height:100%;object-fit:cover}
@media(max-width:700px){.gp-hero{padding:48px 0 32px}.gp-hero-media{grid-template-columns:1fr}.gp-hero-fig:nth-child(2){display:none}}

/* sections */
.gp-section{padding:48px 0;border-top:1px solid var(--line)}
.gp-cards{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:760px){.gp-cards{grid-template-columns:1fr 1fr}}
.gp-card{position:relative;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);text-decoration:none;transition:border-color .25s,transform .25s}
.gp-card:hover{border-color:rgba(232,121,44,.6);transform:translateY(-3px)}
.gp-card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.gp-card-no{position:absolute;left:14px;top:14px;background:rgba(9,9,9,.75);color:var(--accent2);font-size:12px;letter-spacing:.14em;padding:4px 8px;border-radius:3px}
.gp-card h2{font-size:clamp(24px,2.6vw,30px);padding:22px 24px 0}
.gp-card-vi{color:var(--accent2)!important;font-size:14px!important;margin:6px 24px 0!important}
.gp-card p{color:var(--muted);font-size:15px;margin:12px 24px 0}
.gp-card-more{margin:18px 24px 22px;color:var(--text);font-size:14px;font-weight:500}

.gp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:760px){.gp-steps{grid-template-columns:repeat(4,1fr)}}
.gp-steps li{background:var(--panel);padding:26px 22px}
.gp-steps span{color:var(--accent);font-size:12px;letter-spacing:.14em}
.gp-steps h3{font-size:20px;margin:22px 0 10px}
.gp-steps p{margin:0;color:var(--muted);font-size:15px}

.gp-split{display:grid;gap:36px;align-items:center}
@media(min-width:900px){.gp-split{grid-template-columns:1.1fr 1fr}}
.gp-split p{color:var(--muted)}
.gp-split-img{margin:0}
.gp-split-img img{width:100%;aspect-ratio:3/2;object-fit:cover;border:1px solid var(--line)}
figcaption{color:var(--dim);font-size:13px;line-height:1.5;margin-top:8px}

/* services */
.gp-service{display:grid;gap:18px 48px;padding:40px 0;border-bottom:1px solid var(--line);scroll-margin-top:100px}
.gp-service:first-child{padding-top:8px}
@media(min-width:960px){.gp-service{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}.gp-gallery{grid-column:1/-1}}
.gp-no{display:block;color:var(--accent);font-size:13px;letter-spacing:.14em;margin-bottom:12px}
.gp-service h2{font-size:clamp(24px,2.8vw,34px)}
.gp-service-desc{margin:0 0 16px;font-size:17px;color:var(--text)}
.gp-service ul{margin:0;padding-left:20px;display:grid;gap:8px;color:var(--muted)}
.gp-service li::marker{color:var(--accent)}
.gp-proof{margin:22px 0 0;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:14px}
.gp-proof span{color:var(--dim);font-size:12px;letter-spacing:.14em;text-transform:uppercase;width:100%}
.gp-proof a{color:var(--accent2);text-decoration:none}
.gp-proof a:hover{text-decoration:underline}
.gp-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:6px}
@media(min-width:760px){.gp-gallery{grid-template-columns:repeat(4,1fr)}}
.gp-gallery figure{margin:0}
.gp-gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;border:1px solid var(--line);background:var(--panel)}

.gp-channels{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:700px){.gp-channels{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.gp-channels{grid-template-columns:repeat(4,1fr)}}
.gp-channel{background:var(--panel);padding:26px 22px}
.gp-channel h2{font-size:21px;margin-bottom:12px}
.gp-channel p{color:var(--muted);font-size:15px;margin:0}
.gp-channel .gp-proof{margin-top:18px}
.gp-note{margin-top:28px;border-left:2px solid var(--accent);padding:6px 0 6px 22px;max-width:860px}
.gp-note h3{font-size:20px;margin-bottom:8px}
.gp-note p{color:var(--muted);margin:0}

.gp-fit ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
@media(min-width:760px){.gp-fit ul{grid-template-columns:1fr 1fr}}
.gp-fit li{background:var(--panel);border:1px solid var(--line);padding:16px 18px;font-size:16px}
.gp-fit li::before{content:"→";color:var(--accent);margin-right:10px}

.gp-others{display:grid;gap:12px}
@media(min-width:760px){.gp-others{grid-template-columns:repeat(3,1fr)}}
.gp-other{display:block;border:1px solid var(--line);padding:18px 20px;text-decoration:none;transition:border-color .2s}
.gp-other:hover{border-color:rgba(232,121,44,.6)}
.gp-other span{color:var(--accent);font-size:12px;letter-spacing:.14em}
.gp-other b{display:block;font-size:19px;font-weight:600;margin-top:8px}
.gp-other i{display:block;font-style:normal;color:var(--muted);font-size:14px}

/* cta + footer */
.gp-cta{padding:72px 0;border-top:1px solid var(--line);background:radial-gradient(ellipse at 20% 0%,rgba(232,121,44,.14),transparent 60%)}
.gp-cta h2{font-size:clamp(30px,4.6vw,56px);max-width:900px}
.gp-cta-lead{color:var(--muted);max-width:720px;margin:18px 0 0}
.gp-cta-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.gp-btn{display:inline-block;background:var(--accent);color:#120b05;text-decoration:none;font-weight:600;padding:14px 22px;border-radius:2px;font-size:15px}
.gp-btn:hover{background:var(--accent2)}
.gp-btn--ghost{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.25)}
.gp-btn--ghost:hover{background:transparent;border-color:var(--accent)}
.gp-footer{border-top:1px solid var(--line);padding:26px 0 40px;font-size:13px;color:var(--dim)}
.gp-footer p{margin:6px 0}
.gp-footer a{color:var(--muted);text-decoration:none}
.gp-footer a:hover{color:var(--accent2)}

/* ---- mega menu (static pages) ---- */
.mega{position:static}
.mega-trigger{position:relative}
.mega-trigger::before{content:"";position:absolute;left:-20px;right:-20px;top:100%;height:30px}
.gp-nav .mega-panel a{min-height:0;border-radius:0;white-space:normal}
.gp-nav .mega-panel a:hover,.gp-nav .mega-panel a:focus-visible{background:none}
.mega-panel{position:absolute;left:0;right:0;top:100%;background:#121211;border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 30px 60px rgba(0,0,0,.5);padding:34px 48px 26px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s;z-index:40}
.mega:hover .mega-panel,.mega:focus-within .mega-panel{opacity:1;visibility:visible;transform:none}
.mega-grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.mega-col{padding:6px 28px 10px;border-left:1px solid var(--line)}
.mega-col:first-child{border-left:0}
.mega-icon{display:block;width:40px;height:40px;color:var(--text);margin-bottom:16px}
.mega-icon svg{width:100%;height:100%}
.gp-nav .mega-title{display:block;padding:0;border:0;box-shadow:none;color:var(--accent);font-size:19px;font-weight:700;letter-spacing:-.01em;text-transform:uppercase;line-height:1.15}
.mega-vi{display:block;color:var(--dim);font-size:13px;margin:4px 0 14px}
.mega-col ul{list-style:disc;margin:0;padding-left:18px;display:grid;gap:6px}
.mega-col li::marker{color:var(--accent)}
.gp-nav .mega-col li a{display:inline;padding:0;border:0;box-shadow:none;font-size:14px;color:var(--muted);line-height:1.45}
.gp-nav .mega-col li a:hover,.gp-nav .mega-title:hover{color:var(--text)}
.gp-nav .mega-all{display:block;max-width:1240px;margin:22px auto 0;padding:14px 28px 0;border:0;border-top:1px solid var(--line);box-shadow:none;color:var(--accent2);font-size:14px}
.gp-header{position:sticky}

/* ---- overview extras ---- */
.gp-card-skills{list-style:none;margin:14px 24px 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.gp-card-skills li{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.gp-scale{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.gp-scale li{display:grid;grid-template-columns:150px 1fr;gap:14px;border-top:1px solid var(--line);padding-top:10px}
.gp-scale b{color:var(--accent2);font-weight:600;font-size:14px}
.gp-scale span{color:var(--muted);font-size:15px}
@media(max-width:600px){.gp-scale li{grid-template-columns:1fr;gap:2px}}

/* ---- solution: skills grid ---- */
.gp-skills{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:760px){.gp-skills{grid-template-columns:1fr 1fr}}
@media(min-width:1150px){.gp-skills{grid-template-columns:repeat(3,1fr)}}
.gp-skill{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);text-decoration:none;transition:border-color .25s,transform .25s}
.gp-skill:hover{border-color:rgba(232,121,44,.6);transform:translateY(-3px)}
.gp-skill img{width:100%;aspect-ratio:16/10;object-fit:cover}
.gp-skill>div{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.gp-skill h2{font-size:21px;line-height:1.2;margin-bottom:10px}
.gp-skill p{color:var(--muted);font-size:15px;margin:0}
.gp-skill .gp-skill-proof{color:var(--accent2);font-size:13px;margin-top:12px}
.gp-skill .gp-card-more{margin:16px 0 0}

/* ---- article ---- */
.gp-art-title{font-size:clamp(34px,5vw,64px)!important;text-transform:none!important;letter-spacing:-.045em!important;line-height:1.05!important}
.gp-art-cover{margin:36px 0 0;border:1px solid var(--line);overflow:hidden}
.gp-art-cover img{width:100%;aspect-ratio:2/1;object-fit:cover}
.gp-art-layout{display:grid;gap:40px;padding-top:16px;padding-bottom:40px}
@media(min-width:1100px){.gp-art-layout{grid-template-columns:minmax(0,780px) 260px;justify-content:space-between}}
.gp-art-aside{display:none}
@media(min-width:1100px){.gp-art-aside{display:block;position:sticky;top:110px;align-self:start}}
.gp-toc{border-left:1px solid var(--line);padding:4px 0 4px 20px}
.gp-toc span{display:block;color:var(--accent);font-size:11px;font-weight:600;letter-spacing:.16em;margin-bottom:12px}
.gp-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.gp-toc a{color:var(--muted);font-size:14px;text-decoration:none}
.gp-toc a:hover{color:var(--accent2)}
.gp-aside-cta{margin-top:22px;width:100%;text-align:center}
.gp-art-sec{padding:34px 0 6px;border-top:1px solid var(--line);scroll-margin-top:100px}
.gp-art-sec:first-child{border-top:0;padding-top:12px}
.gp-art-sec>h2{font-size:clamp(24px,2.6vw,30px);margin-bottom:18px}
.gp-pains{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.gp-pains li{background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--accent);padding:14px 18px;font-size:16px}
.gp-steps--art{grid-template-columns:1fr!important}
@media(min-width:700px){.gp-steps--art{grid-template-columns:1fr 1fr!important}}
.gp-exp{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.gp-exp li{border-left:2px solid var(--accent);padding:4px 0 4px 18px}
.gp-exp-case{color:var(--accent2);font-weight:600;text-decoration:none;font-size:15px}
.gp-exp-case:hover{text-decoration:underline}
.gp-exp p{margin:6px 0 0;color:var(--text);font-size:16px}
.gp-out{margin:0;padding-left:20px;display:grid;gap:8px;color:var(--muted)}
.gp-out li::marker{color:var(--accent)}
.gp-faq{border:1px solid var(--line);background:var(--panel);padding:0 18px;margin-bottom:10px}
.gp-faq summary{cursor:pointer;padding:16px 0;font-weight:600;font-size:16px;list-style:none}
.gp-faq summary::-webkit-details-marker{display:none}
.gp-faq summary::after{content:"+";float:right;color:var(--accent)}
.gp-faq[open] summary::after{content:"–"}
.gp-faq p{margin:0 0 16px;color:var(--muted)}
.gp-gallery--art{grid-template-columns:repeat(2,1fr)!important}
@media(min-width:760px){.gp-gallery--art{grid-template-columns:repeat(3,1fr)!important}}
.gp-gallery--art img{aspect-ratio:4/3!important}
.gp-back{margin-top:22px}

/* ---- Năng lực dropdown + mobile accordions (static pages) ---- */
.drop{position:relative}
.drop-trigger::before{content:"";position:absolute;left:-10px;right:-10px;top:100%;height:22px}
.drop-panel{position:absolute;left:50%;top:calc(100% + 14px);transform:translate(-50%,-6px);min-width:360px;background:#121211;border:1px solid var(--line);box-shadow:0 30px 60px rgba(0,0,0,.5);padding:12px 8px;opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s;z-index:40}
.drop:hover .drop-panel,.drop:focus-within .drop-panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
.drop-panel ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.gp-nav .drop-panel a{display:flex;gap:12px;align-items:baseline;min-height:0;padding:10px 14px;white-space:normal;font-size:14px;line-height:1.4;color:rgba(244,240,232,.8)}
.gp-nav .drop-panel a span{color:var(--accent);font-size:11px;letter-spacing:.1em;min-width:18px}
.gp-nav .drop-panel a:hover{background:rgba(241,131,60,.13);color:var(--text)}
.gp-mgroup>summary{list-style:none;display:flex;align-items:center;cursor:pointer;font-size:clamp(22px,6.6vw,40px);font-weight:500;letter-spacing:-.04em;padding:10px 0;white-space:nowrap}
.gp-mgroup>summary::-webkit-details-marker{display:none}
.gp-mgroup>summary span{font-size:11px;color:var(--accent);margin-right:14px;letter-spacing:.1em}
.gp-mgroup>summary i{margin-left:auto;font-style:normal;color:var(--accent);font-size:.6em;transition:transform .2s}
.gp-mgroup[open]>summary i{transform:rotate(45deg)}
.gp-mbody{padding:0 0 14px 34px;display:grid;gap:2px}
.gp-menu nav .gp-mbody a{font-size:16px;font-weight:400;letter-spacing:0;white-space:normal;padding:9px 0;color:rgba(244,240,232,.8);border-bottom:1px solid rgba(255,255,255,.06)}
.gp-menu nav .gp-mbody a.gp-mall,.gp-menu nav .gp-mbody a.gp-mstrong{color:var(--accent2);font-size:15px;border-bottom:0}
.gp-mbody ul{list-style:none;margin:0;padding:0;display:grid}
.gp-msub>summary{list-style:none;cursor:pointer;padding:11px 0;font-size:17px;font-weight:600;border-bottom:1px solid rgba(255,255,255,.08)}
.gp-msub>summary::-webkit-details-marker{display:none}
.gp-msub>summary::after{content:"+";float:right;color:var(--accent)}
.gp-msub[open]>summary::after{content:"–"}
.gp-msub ul{padding:2px 0 8px 12px}

/* Solution pages: desktop type and spacing follow the capability page. */
.gp-hero h1 .gp-hero-note {
  display: inline;
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

body:has(main .gp-hero) #wixheadless-banner-container {
  display: none !important;
}

@media (min-width: 1024px) {
  main .gp-wrap {
    width: calc(100% - 96px);
    max-width: 1280px;
    padding-inline: 0;
  }

  main .gp-hero {
    padding-block: clamp(52px, 4.8vw, 68px) 42px;
  }

  main .gp-hero h1 {
    max-width: 980px;
    font-size: clamp(38px, 4vw, 54px);
    font-weight: 650;
    letter-spacing: -.044em;
    line-height: 1.09;
    text-transform: none;
    text-wrap: balance;
  }

  main .gp-hero .gp-art-title {
    max-width: 920px;
    font-size: clamp(34px, 3.25vw, 46px) !important;
    line-height: 1.12 !important;
  }

  main .gp-hero h1 span,
  main .gp-hero h1 .gp-hero-note {
    display: block;
    margin: 13px 0 0;
    color: var(--muted);
    font-size: clamp(20px, 2vw, 27px);
    font-weight: 500;
    letter-spacing: -.025em;
    line-height: 1.25;
    text-wrap: pretty;
  }

  main .gp-lead {
    max-width: 80ch;
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.72;
    text-wrap: pretty;
  }

  main .gp-lead-paragraph {
    display: block;
  }

  main .gp-lead-paragraph + .gp-lead-paragraph {
    margin-top: 12px;
  }

  main .gp-crumb {
    margin-bottom: 18px;
  }

  main .gp-hero-media {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 30px;
  }

  main .gp-section {
    padding-block: 44px;
  }

  main .gp-h2,
  main .gp-cta h2 {
    font-size: clamp(28px, 3vw, 39px);
    font-weight: 650;
    line-height: 1.14;
    text-wrap: balance;
  }

  main .gp-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: clamp(28px, 3.4vw, 52px);
  }

  main .gp-split .gp-eyebrow {
    color: var(--accent2);
  }

  main .gp-split .gp-h2 {
    margin-bottom: 18px;
    font-size: clamp(27px, 2.65vw, 37px);
  }

  main .gp-split-img img,
  main .gp-gallery img {
    display: block;
  }

  main .gp-scale li {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
  }

  main .gp-card,
  main .gp-skill,
  main .gp-other {
    border-radius: 7px;
    overflow: hidden;
  }

  main .gp-card h2 {
    font-size: 25px;
  }

  main .gp-card-more {
    margin-top: auto;
    padding-top: 16px;
  }

  main .gp-skill .gp-card-more {
    margin-top: auto;
  }

  main .gp-art-sec > h2 {
    font-size: clamp(24px, 2.2vw, 30px);
    line-height: 1.18;
  }

  main .gp-gallery img {
    aspect-ratio: 4 / 3;
  }
}

@media (min-width: 1100px) {
  main .gp-art-layout {
    grid-template-columns: minmax(0, 1fr) minmax(210px, 250px);
    gap: clamp(28px, 3vw, 48px);
    justify-content: normal;
  }
}


/* 2026-11-09 — 25 numbered solutions and compact, consistent category icons */
.mega-panel { padding-top:24px; padding-bottom:22px; }
.mega-col { position:relative; padding:7px 20px 10px; }
.mega-col .mega-icon {
  position:absolute; left:20px; top:9px; width:20px; height:20px;
  margin:0; background-color:#e9e2da;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-position:center; mask-position:center;
}
.mega-col .mega-icon svg { display:none; }
#root .mega-col .mega-icon { width:20px; height:20px; margin:0; }
#root .mega-title, .gp-nav .mega-title {
  display:block; min-height:24px; padding:0 0 0 31px;
  font-size:15px; font-weight:650; line-height:1.3;
  letter-spacing:-.012em; text-transform:none;
}
#root .mega-vi, .mega-vi {
  display:block; padding-left:31px; margin:2px 0 14px;
  font-size:12px; line-height:1.4; color:rgba(244,240,232,.62);
}
#root .mega-col ul, .mega-col ul {
  list-style:none; margin:0; padding:0; display:grid; gap:9px;
}
.mega-grid>.mega-col:nth-child(1) ul { counter-reset:gpnav 0; }
.mega-grid>.mega-col:nth-child(2) ul { counter-reset:gpnav 7; }
.mega-grid>.mega-col:nth-child(3) ul { counter-reset:gpnav 13; }
.mega-grid>.mega-col:nth-child(4) ul { counter-reset:gpnav 20; }
.mega-col ul>li {
  counter-increment:gpnav; display:grid;
  grid-template-columns:23px minmax(0,1fr);
  gap:8px; align-items:start; min-width:0;
}
.mega-col ul>li::before {
  content:counter(gpnav, decimal-leading-zero); color:#e8792c;
  font-size:12px; font-weight:500; font-variant-numeric:tabular-nums;
  letter-spacing:.04em; line-height:1.55;
}
#root .mega-col li a, .gp-nav .mega-col li a {
  display:inline; padding:0; font-size:13px; font-weight:400;
  line-height:1.5; white-space:normal; overflow-wrap:break-word;
  color:rgba(244,240,232,.78);
}
#root .mega-col li a:hover, .gp-nav .mega-col li a:hover { color:#f4f0e8; }
.mobile-sub-group>summary, .gp-msub>summary {
  display:flex; align-items:center; gap:9px;
  font-size:15px; font-weight:600; letter-spacing:-.01em;
  line-height:1.45;
}
.mobile-sub-group>summary::before, .gp-msub>summary::before {
  content:""; display:block; flex:0 0 18px;
  width:18px; height:18px; background-color:#e9e2da;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-position:center; mask-position:center;
}
.mobile-sub-group>summary::after, .gp-msub>summary::after {
  margin-left:auto; float:none;
}
.mobile-sub-group:nth-of-type(1) ul, .gp-msub:nth-of-type(1) ul { counter-reset:gpmobile 0; }
.mobile-sub-group:nth-of-type(2) ul, .gp-msub:nth-of-type(2) ul { counter-reset:gpmobile 7; }
.mobile-sub-group:nth-of-type(3) ul, .gp-msub:nth-of-type(3) ul { counter-reset:gpmobile 13; }
.mobile-sub-group:nth-of-type(4) ul, .gp-msub:nth-of-type(4) ul { counter-reset:gpmobile 20; }
.mobile-sub-group ul>li:not(:first-child), .gp-msub ul>li:not(:first-child) {
  counter-increment:gpmobile; display:grid;
  grid-template-columns:24px minmax(0,1fr);
  align-items:start; column-gap:8px;
}
.mobile-sub-group ul>li:not(:first-child)::before, .gp-msub ul>li:not(:first-child)::before {
  content:counter(gpmobile, decimal-leading-zero);
  padding-top:9px; color:#e8792c; font:500 12px/1.45 Inter,system-ui,sans-serif;
  font-variant-numeric:tabular-nums;
}
.gp-skills { counter-reset:gpcard 0; }
.gp-skills:has(>a[href^="/giai-phap/creative-solution/"]) { counter-reset:gpcard 7; }
.gp-skills:has(>a[href^="/giai-phap/media-solution/"]) { counter-reset:gpcard 13; }
.gp-skills:has(>a[href^="/giai-phap/business-solution/"]) { counter-reset:gpcard 20; }
.gp-skills>.gp-skill { counter-increment:gpcard; }
.gp-skills .gp-skill .gp-no { font-size:0; line-height:0; }
.gp-skills .gp-skill .gp-no::after {
  content:counter(gpcard, decimal-leading-zero);
  font-size:13px; line-height:1.5; letter-spacing:.14em; color:#e8792c;
}
.gp-article .gp-hero .gp-eyebrow { font-size:0; line-height:1.5; }
.gp-article .gp-hero .gp-eyebrow::after {
  content:var(--gp-detail-number, "") " / " var(--gp-detail-group, "");
  font-size:12px; letter-spacing:.15em; font-weight:600; color:#e8792c;
}
@media(max-width:1099px) {
  .gp-msub>summary { font-size:15px; }
  .gp-menu nav .gp-msub li:not(:first-child)>a { font-size:14px; }
}
@media(max-width:767px) {
  #root .mobile-sub li a { font-size:14px; }
  #root .mobile-sub-group>summary { font-size:15px; }
}

.mega-col:nth-child(1) .mega-icon, .mobile-sub-group:nth-of-type(1)>summary::before, .gp-msub:nth-of-type(1)>summary::before { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2018%209%2012l4%203%208-9%22%2F%3E%3Cpath%20d%3D%22M15%206h6v6%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2018%209%2012l4%203%208-9%22%2F%3E%3Cpath%20d%3D%22M15%206h6v6%22%2F%3E%3C%2Fsvg%3E"); }
.mega-col:nth-child(2) .mega-icon, .mobile-sub-group:nth-of-type(2)>summary::before, .gp-msub:nth-of-type(2)>summary::before { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021h6l12-12-6-6L3%2015v6Z%22%2F%3E%3Cpath%20d%3D%22m12%206%206%206M3%2015l6%206%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021h6l12-12-6-6L3%2015v6Z%22%2F%3E%3Cpath%20d%3D%22m12%206%206%206M3%2015l6%206%22%2F%3E%3C%2Fsvg%3E"); }
.mega-col:nth-child(3) .mega-icon, .mobile-sub-group:nth-of-type(3)>summary::before, .gp-msub:nth-of-type(3)>summary::before { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2011v2a2%202%200%200%200%202%202h2l3%205h3l-3-5h3l8%204V5l-8%204H5a2%202%200%200%200-2%202Z%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2011v2a2%202%200%200%200%202%202h2l3%205h3l-3-5h3l8%204V5l-8%204H5a2%202%200%200%200-2%202Z%22%2F%3E%3C%2Fsvg%3E"); }
.mega-col:nth-child(4) .mega-icon, .mobile-sub-group:nth-of-type(4)>summary::before, .gp-msub:nth-of-type(4)>summary::before { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%209h18M7%2014h5%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%209h18M7%2014h5%22%2F%3E%3C%2Fsvg%3E"); }
html:has(head link[rel="canonical"][href$="/giai-phap/marketing-solution/nghien-cuu-thi-truong-dinh-vi.html"]) { --gp-detail-number:"01"; --gp-detail-group:"CHIẾN LƯỢC MARKETING"; }
html:has(head link[rel="canonical"][href$="/giai-phap/marketing-solution/chien-luoc-thuong-hieu.html"]) { --gp-detail-number:"02"; --gp-detail-group:"CHIẾN LƯỢC MARKETING"; }
html:has(head link[rel="canonical"][href$="/giai-phap/marketing-solution/ke-hoach-marketing-imc.html"]) { --gp-detail-number:"03"; --gp-detail-group:"CHIẾN LƯỢC MARKETING"; }
html:has(head link[rel="canonical"][href$="/giai-phap/marketing-solution/su-kien-activation.html"]) { --gp-detail-number:"04"; --gp-detail-group:"CHIẾN LƯỢC MARKETING"; }
html:has(head link[rel="canonical"][href$="/giai-phap/marketing-solution/tai-tro-hop-tac.html"]) { --gp-detail-number:"05"; --gp-detail-group:"CHIẾN LƯỢC MARKETING"; }
html:has(head link[rel="canonical"][href$="/giai-phap/marketing-solution/performance-chuyen-doi.html"]) { --gp-detail-number:"06"; --gp-detail-group:"CHIẾN LƯỢC MARKETING"; }
html:has(head link[rel="canonical"][href$="/giai-phap/marketing-solution/khop-noi-marketing-sales.html"]) { --gp-detail-number:"07"; --gp-detail-group:"CHIẾN LƯỢC MARKETING"; }
html:has(head link[rel="canonical"][href$="/giai-phap/creative-solution/thiet-ke-hinh-anh.html"]) { --gp-detail-number:"08"; --gp-detail-group:"SÁNG TẠO & NỘI DUNG"; }
html:has(head link[rel="canonical"][href$="/giai-phap/creative-solution/in-an-cao-cap.html"]) { --gp-detail-number:"09"; --gp-detail-group:"SÁNG TẠO & NỘI DUNG"; }
html:has(head link[rel="canonical"][href$="/giai-phap/creative-solution/san-xuat-video.html"]) { --gp-detail-number:"10"; --gp-detail-group:"SÁNG TẠO & NỘI DUNG"; }
html:has(head link[rel="canonical"][href$="/giai-phap/creative-solution/kich-ban-noi-dung-quang-cao.html"]) { --gp-detail-number:"11"; --gp-detail-group:"SÁNG TẠO & NỘI DUNG"; }
html:has(head link[rel="canonical"][href$="/giai-phap/creative-solution/pr-bao-chi.html"]) { --gp-detail-number:"12"; --gp-detail-group:"SÁNG TẠO & NỘI DUNG"; }
html:has(head link[rel="canonical"][href$="/giai-phap/creative-solution/quan-tri-mang-xa-hoi.html"]) { --gp-detail-number:"13"; --gp-detail-group:"SÁNG TẠO & NỘI DUNG"; }
html:has(head link[rel="canonical"][href$="/giai-phap/media-solution/quang-cao-meta.html"]) { --gp-detail-number:"14"; --gp-detail-group:"TRUYỀN THÔNG & QUẢNG CÁO"; }
html:has(head link[rel="canonical"][href$="/giai-phap/media-solution/google-ads.html"]) { --gp-detail-number:"15"; --gp-detail-group:"TRUYỀN THÔNG & QUẢNG CÁO"; }
html:has(head link[rel="canonical"][href$="/giai-phap/media-solution/youtube-tiktok.html"]) { --gp-detail-number:"16"; --gp-detail-group:"TRUYỀN THÔNG & QUẢNG CÁO"; }
html:has(head link[rel="canonical"][href$="/giai-phap/media-solution/tvc-truyen-hinh.html"]) { --gp-detail-number:"17"; --gp-detail-group:"TRUYỀN THÔNG & QUẢNG CÁO"; }
html:has(head link[rel="canonical"][href$="/giai-phap/media-solution/kol-koc-influencer.html"]) { --gp-detail-number:"18"; --gp-detail-group:"TRUYỀN THÔNG & QUẢNG CÁO"; }
html:has(head link[rel="canonical"][href$="/giai-phap/media-solution/quang-cao-ngoai-troi-ooh.html"]) { --gp-detail-number:"19"; --gp-detail-group:"TRUYỀN THÔNG & QUẢNG CÁO"; }
html:has(head link[rel="canonical"][href$="/giai-phap/media-solution/tim-kiem-ai-aeo-geo.html"]) { --gp-detail-number:"20"; --gp-detail-group:"TRUYỀN THÔNG & QUẢNG CÁO"; }
html:has(head link[rel="canonical"][href$="/giai-phap/business-solution/website-seo.html"]) { --gp-detail-number:"21"; --gp-detail-group:"WEBSITE & CÔNG NGHỆ"; }
html:has(head link[rel="canonical"][href$="/giai-phap/business-solution/google-maps.html"]) { --gp-detail-number:"22"; --gp-detail-group:"WEBSITE & CÔNG NGHỆ"; }
html:has(head link[rel="canonical"][href$="/giai-phap/business-solution/chatbot-crm.html"]) { --gp-detail-number:"23"; --gp-detail-group:"WEBSITE & CÔNG NGHỆ"; }
html:has(head link[rel="canonical"][href$="/giai-phap/business-solution/ai-kiem-soat-noi-dung.html"]) { --gp-detail-number:"24"; --gp-detail-group:"WEBSITE & CÔNG NGHỆ"; }
html:has(head link[rel="canonical"][href$="/giai-phap/business-solution/xay-dung-doi-marketing.html"]) { --gp-detail-number:"25"; --gp-detail-group:"WEBSITE & CÔNG NGHỆ"; }

/* 2026-11-09: Eight user-supplied portfolio solution hero photographs */
.gp-art-cover--evidence{background:var(--gp-evidence-bg,#10100f)}
.gp-art-cover--evidence img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:contain;object-position:center;}
@media(max-width:767px){.gp-art-cover--evidence img{width:100%;aspect-ratio:2/1;object-fit:contain;}}

/* 2026-11-09 — Eight outer solution card images match their detail pages */
.gp-skills .gp-skill>img.gp-skill-img--evidence {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:contain;
  object-position:center;
  background:var(--gp-skill-bg,#10100f);
}
@media(max-width:759px){
  .gp-skills .gp-skill>img.gp-skill-img--evidence {
    width:100%; aspect-ratio:16/10; object-fit:contain;
  }
}

/* 2026-11-09 — Bệnh viện Nhi Đồng 1 event replaces three-doctor photo */
.gp-art-cover--hospital-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center 70%;background:#1b1a18;}
@media(max-width:700px){.gp-art-cover--hospital-photo img{aspect-ratio:3/4;object-fit:cover;object-position:center 68%;}}

/* Creative Solution campaign image 2026-11-09 — preserve all artwork and text */
.gp-hero-media .gp-hero-fig--creative-campaign { background:#81b1f5; }
.gp-hero-media .gp-hero-fig--creative-campaign img { object-fit:contain; object-position:center; }

/* 2026-11-09 — Nano Medical copywriting: real image on outer and inner pages */
.gp-skills .gp-skill>img.gp-skill-img--copywriting {
  width:100%; height:auto; aspect-ratio:16/10; object-fit:contain;
  object-position:center; background:#75aaf0;
}
/* 2026-11-09 — Smaller full-width landscape crop in copywriting article only */
.gp-art-cover--copywriting {
  position:relative; width:100%; aspect-ratio:16/9;
  background:#75aaf0; overflow:hidden;
}
.gp-art-cover--copywriting img {
  display:block; position:absolute; inset:0;
  width:100%; height:100%; aspect-ratio:auto;
  object-fit:cover; object-position:center 42%;
}
@media(max-width:759px) {
  .gp-skills .gp-skill>img.gp-skill-img--copywriting { object-fit:contain; }
  .gp-art-cover--copywriting { aspect-ratio:4/3; }
  .gp-art-cover--copywriting img {
    width:100%; height:100%; object-fit:cover; object-position:center 40%;
  }
}