/* ============ TOKENS ============ */
  :root{ color-scheme:dark;
    --ink:#0B0C0D; --ink-raise:#141517; --ink-sink:#08090A;
    --bone:#F2F3F0; --bone-dim:#A6A8AA; --bone-faint:#5F6163;
    --gold:#DFF20D; --gold-bright:#EAF75A; --btn-bg:#DFF20D; --btn-fg:#0B0C0D; --teal:#9AA0A6;
    --line:rgba(242,243,240,.12); --line-soft:rgba(242,243,240,.06);
    --hero-a:#111214; --hero-b:#08090A;
    --particle:205,210,214; --particle-alpha:.55;
    --card-hover:#17181A; --chip:rgba(242,243,240,.045); --chip-line:rgba(242,243,240,.11);
    --shadow:0 30px 80px -40px rgba(0,0,0,.85);
    --mono:'SF Mono',ui-monospace,'DejaVu Sans Mono',Menlo,Consolas,monospace;
    --wrap:1240px;--pad:clamp(20px,5vw,68px);
  }
  @media (prefers-color-scheme:dark){
    :root{
      --ink:#0B0C0D; --ink-raise:#141517; --ink-sink:#08090A;
      --bone:#F2F3F0; --bone-dim:#A6A8AA; --bone-faint:#5F6163;
      --gold:#DFF20D; --gold-bright:#EAF75A; --btn-bg:#DFF20D; --btn-fg:#0B0C0D; --teal:#9AA0A6;
      --line:rgba(242,243,240,.12); --line-soft:rgba(242,243,240,.06);
      --hero-a:#111214; --hero-b:#08090A;
      --particle:205,210,214; --particle-alpha:.55;
      --card-hover:#17181A; --chip:rgba(242,243,240,.045); --chip-line:rgba(242,243,240,.11);
      --shadow:0 30px 80px -40px rgba(0,0,0,.85);
    }
  }
  :root[data-theme="dark"]{
    --ink:#0B0C0D; --ink-raise:#141517; --ink-sink:#08090A;
    --bone:#F2F3F0; --bone-dim:#A6A8AA; --bone-faint:#5F6163;
    --gold:#DFF20D; --gold-bright:#EAF75A; --btn-bg:#DFF20D; --btn-fg:#0B0C0D; --teal:#9AA0A6;
    --line:rgba(242,243,240,.12); --line-soft:rgba(242,243,240,.06);
    --hero-a:#111214; --hero-b:#08090A;
    --particle:205,210,214; --particle-alpha:.55;
    --card-hover:#17181A; --chip:rgba(242,243,240,.045); --chip-line:rgba(242,243,240,.11);
    --shadow:0 30px 80px -40px rgba(0,0,0,.85);
  }
  @property --glowc{syntax:'<color>';inherits:true;initial-value:#DFF20D}

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  body{
    background:var(--ink);color:var(--bone);
    font-family:'Helvetica Neue','Arial Nova',Arimo,Arial,'Segoe UI',system-ui,sans-serif;
    font-weight:400;line-height:1.55;letter-spacing:.005em;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
  }
  ::selection{background:var(--gold);color:var(--ink-sink)}
  a{color:inherit;text-decoration:none}
  .mono{font-family:var(--mono);font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:11px}
  .wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
  .gold{color:var(--gold)} .dim{color:var(--bone-dim)}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

  /* ============ NAV ============ */
  header.nav{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;justify-content:space-between;
    padding:18px var(--pad);transition:background .4s,border-color .4s,padding .3s;border-bottom:1px solid transparent}
  header.nav.scrolled{background:color-mix(in srgb,var(--ink) 82%,transparent);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft);padding-block:13px}
  .brand{font-weight:800;font-size:20px;letter-spacing:-.03em;display:flex;align-items:baseline;gap:1px}
  .brand i{color:var(--gold);font-style:normal;font-weight:800}
  nav.links{display:flex;gap:26px;align-items:center}
  nav.links a{position:relative;color:var(--bone-dim);transition:color .25s;display:flex;gap:7px;align-items:baseline}
  nav.links a .n{font-family:var(--mono);font-size:10px;color:var(--gold);letter-spacing:.1em}
  nav.links a span.t{font-size:13.5px;font-weight:500;letter-spacing:.01em}
  nav.links a:hover{color:var(--bone)}
  .nav-right{display:flex;align-items:center;gap:18px}
  .langsel{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;letter-spacing:.08em}
  .langbtn{background:none;border:none;color:var(--bone-faint);cursor:pointer;font:inherit;padding:2px 2px;transition:color .2s;letter-spacing:.08em}
  .langbtn.on{color:var(--gold)} .langbtn:hover{color:var(--bone)}
  .langsel .sep{color:var(--bone-faint);opacity:.45}
  .navcta{color:var(--gold)}
  .toggle{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:transparent;cursor:pointer;
    display:grid;place-items:center;color:var(--bone);transition:border-color .25s,transform .4s;flex:none}
  .toggle:hover{border-color:var(--gold);transform:rotate(180deg)}
  .toggle svg{width:16px;height:16px}
  @media(max-width:900px){nav.links{display:none}}
  @media(max-width:560px){.navcta{display:none}}

  /* ============ SECTION SHELL ============ */
  section.blk{padding:clamp(72px,11vw,150px) 0;position:relative}
  .sec-head{display:flex;align-items:baseline;gap:16px;margin-bottom:14px}
  .sec-head .tick{font-family:var(--mono);color:var(--gold);font-size:12px;letter-spacing:.16em}
  .sec-head .lbl{font-family:var(--mono);color:var(--bone-faint);letter-spacing:.22em;text-transform:uppercase;font-size:11px}
  .about-lead{font-weight:700;letter-spacing:-.025em;line-height:1.16;font-size:clamp(24px,3.8vw,44px);max-width:21ch;text-wrap:balance;margin:26px 0 40px}
  .about-lead .hl{color:var(--gold)}
  .about-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
  .about-body p{color:var(--bone-dim);font-size:16.5px;line-height:1.75;margin-bottom:18px;max-width:60ch}
  .about-body p b{color:var(--bone);font-weight:600}
  .sig{font-weight:700;font-size:19px;letter-spacing:-.02em;color:var(--bone);margin-top:8px}
  .sig small{display:block;color:var(--bone-faint);font-weight:400;font-size:13px;letter-spacing:.02em;margin-top:6px;font-family:var(--mono);text-transform:uppercase}
  .provenance{border-left:1px solid var(--line);padding-left:clamp(20px,3vw,36px)}
  .prov-row{padding:16px 0;border-bottom:1px solid var(--line-soft);display:flex;flex-direction:column;gap:4px}
  .prov-row:first-child{padding-top:0}
  .prov-row .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-faint)}
  .prov-row .v{font-size:15.5px;color:var(--bone);font-weight:500}
  @media(max-width:820px){.about-grid{grid-template-columns:1fr}
    .provenance{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:24px}}

  /* ============ SERVICES ============ */
  #services{padding-bottom:clamp(40px,7vw,90px)}
  .svc{border-top:1px solid var(--line);padding:clamp(40px,6vw,74px) 0;display:grid;grid-template-columns:0.9fr 1.55fr;
    gap:clamp(26px,5vw,64px);position:relative;transition:background .5s}
  .svc:last-child{border-bottom:1px solid var(--line)}
  .svc-num{font-family:var(--mono);color:var(--gold);font-size:13px;letter-spacing:.2em;margin-bottom:22px;display:block}
  .svc-title{font-weight:800;letter-spacing:-.035em;line-height:.98;font-size:clamp(32px,4.4vw,58px);margin-bottom:8px}
  .svc-vn{color:var(--teal);font-size:clamp(15px,2vw,19px);font-weight:500;letter-spacing:.01em;margin-bottom:22px}
  .svc-proof{display:flex;flex-direction:column;gap:10px;margin-top:26px}
  .svc-proof .pr{display:flex;gap:11px;align-items:flex-start;color:var(--bone-dim);font-size:13.5px;line-height:1.5}
  .svc-proof .pr::before{content:"";width:6px;height:6px;margin-top:7px;flex:none;border-radius:1px;background:var(--gold);transform:rotate(45deg)}
  .flow{list-style:none;counter-reset:f;display:grid;grid-template-columns:repeat(3,1fr);column-gap:20px;border-top:1px solid var(--line)}
  @media(max-width:520px){.flow{grid-template-columns:repeat(2,1fr)}}
  .flow li{counter-increment:f;padding:14px 14px 14px 0;border-bottom:1px solid var(--line);color:var(--bone);font-size:15px;line-height:1.45}
  .flow li::before{content:counter(f,decimal-leading-zero);display:block;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--gold);margin-bottom:6px}
  .svc-desc{color:var(--bone-dim);font-size:clamp(16px,1.9vw,19px);line-height:1.7;max-width:56ch;margin-bottom:26px}
  .svc-desc b{color:var(--bone);font-weight:600}
  .chips{display:flex;flex-wrap:wrap;gap:8px}
  .chip{font-size:12.5px;letter-spacing:.01em;color:var(--bone-dim);padding:7px 13px;border:1px solid var(--chip-line);
    background:var(--chip);border-radius:999px;transition:.25s;white-space:nowrap}
  .chip:hover{color:var(--bone);border-color:var(--gold);background:transparent}
  .svc-cta{display:inline-flex;align-items:center;gap:10px;margin-top:30px;font-weight:600;font-size:15px;color:var(--bone);transition:gap .25s,color .25s}
  .svc-cta .arw{color:var(--gold);transition:transform .3s}
  .svc-cta:hover{color:var(--gold)} .svc-cta:hover .arw{transform:translateX(6px)}
  @media(max-width:820px){.svc{grid-template-columns:1fr;gap:22px}}

  .rv{opacity:0;transform:translateY(30px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
  .rv.in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){.rv{opacity:1!important;transform:none!important;transition:none}}

  /* ============ MARQUEE ============ */
  .marquee{border-block:1px solid var(--line);padding:26px 0;overflow:hidden;background:var(--ink-raise);white-space:nowrap;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .mtrack{display:inline-flex;gap:0;animation:march 44s linear infinite;will-change:transform}
  .marquee:hover .mtrack{animation-play-state:paused}
  .mtrack span{font-weight:800;letter-spacing:-.02em;font-size:clamp(22px,3vw,34px);color:var(--bone);padding:0 26px;display:inline-flex;align-items:center;gap:26px}
  .mtrack span::after{content:"✳";color:var(--gold);font-size:.55em;font-weight:400}
  @keyframes march{to{transform:translateX(-50%)}}
  @media(prefers-reduced-motion:reduce){.mtrack{animation:none}}

  /* ============ CLIENTS ============ */
  .clients .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(22px,5vw,60px);justify-content:space-between}
  .clients .cnote{font-family:var(--mono);text-transform:uppercase;letter-spacing:.18em;font-size:11px;color:var(--bone-faint);flex:none}
  .client-logos{display:flex;flex-wrap:wrap;gap:clamp(26px,4vw,54px);align-items:center}
  .client-logos span{font-weight:700;letter-spacing:-.02em;font-size:clamp(20px,2.6vw,30px);color:var(--bone-dim);transition:color .3s}
  .client-logos span:hover{color:var(--bone)}

  /* ============ CTA ============ */
  .cta{background:var(--ink-raise);border-top:1px solid var(--line)}
  .cta .wrap{padding-block:clamp(70px,10vw,130px)}
  .cta h2{font-weight:800;letter-spacing:-.035em;line-height:1.02;font-size:clamp(34px,6.2vw,84px);text-wrap:balance;max-width:16ch}
  .cta h2 .g{color:var(--gold)}
  .cta-sub{color:var(--bone-dim);font-size:clamp(16px,2vw,20px);margin:26px 0 40px;max-width:54ch;line-height:1.65}
  .cta-actions{display:flex;flex-wrap:wrap;gap:16px 30px;align-items:center}
  .btn{display:inline-flex;align-items:center;gap:12px;padding:16px 26px;border-radius:999px;font-weight:600;font-size:16px;
    background:var(--btn-bg);color:var(--btn-fg);transition:transform .25s,box-shadow .25s;box-shadow:var(--shadow)}
  .btn:hover{transform:translateY(-3px)}
  .btn.ghost{background:transparent;color:var(--bone);border:1px solid var(--line);box-shadow:none}
  .btn.ghost:hover{border-color:var(--gold);color:var(--gold)}
  .btn .arw{transition:transform .3s}.btn:hover .arw{transform:translateX(5px)}

  /* ============ FOOTER ============ */
  footer{padding:clamp(48px,7vw,80px) 0 40px;border-top:1px solid var(--line)}
  .foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;padding-bottom:44px;border-bottom:1px solid var(--line-soft)}
  .foot-brand .brand{font-size:34px;margin-bottom:16px}
  .foot-brand p{color:var(--bone-dim);max-width:36ch;line-height:1.6;font-size:14.5px}
  .foot-brand .vnsig{color:var(--teal);font-weight:600;margin-top:14px;font-size:14px}
  .fcol h4{font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:var(--bone-faint);margin-bottom:16px;font-weight:500}
  .fcol a,.fcol p{display:block;color:var(--bone-dim);font-size:14.5px;line-height:1.6;margin-bottom:10px;transition:color .2s}
  .fcol a:hover{color:var(--gold)}
  .foot-bot{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;padding-top:26px;color:var(--bone-faint);font-size:12.5px}
  .foot-bot .mono{color:var(--bone-faint)}
  @media(max-width:760px){.foot-top{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
  @media(max-width:520px){.foot-top{grid-template-columns:1fr}}

  /* ===== real brand logo ===== */
  :root{ --logo-invert:1; }
  @media (prefers-color-scheme:dark){ :root{ --logo-invert:1; } }
  :root[data-theme="dark"]{ --logo-invert:1; }
  .logo{height:26px;width:auto;display:block;filter:invert(var(--logo-invert));transition:filter .3s}
  .foot-brand .logo{height:40px;margin-bottom:18px}
  /* ===== nav dropdown ===== */
  nav.links .has-sub{position:relative}
  nav.links .sub{position:absolute;top:calc(100% + 14px);left:-14px;min-width:210px;padding:10px;
    background:var(--ink-raise);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
    display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:.22s ease;z-index:70}
  nav.links .has-sub:hover .sub,nav.links .has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}
  nav.links .sub a{padding:9px 12px;border-radius:8px;font-size:13.5px;color:var(--bone-dim);display:block}
  nav.links .sub a:hover{background:var(--chip);color:var(--gold)}
  nav.links .has-sub>a::after{content:"▾";font-size:9px;margin-left:5px;color:var(--gold)}
  /* ===== case study ===== */
  .case{border-top:1px solid var(--line);background:var(--ink-raise)}
  .case .wrap{padding-block:clamp(64px,9vw,120px)}
  .case-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center;margin-top:34px}
  .case-media{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--ink-sink)}
  .case-media img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:2/1;
    filter:grayscale(1) contrast(1.05);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
  .case-media:hover img{transform:scale(1.04)}
  .case-tag{display:inline-flex;gap:9px;align-items:center;font-family:var(--mono);text-transform:uppercase;
    letter-spacing:.16em;font-size:11px;color:var(--gold);margin-bottom:16px}
  .case h3{font-weight:800;letter-spacing:-.035em;line-height:1.02;font-size:clamp(28px,4.2vw,52px);margin-bottom:16px;text-wrap:balance}
  .case p{color:var(--bone-dim);font-size:16.5px;line-height:1.72;max-width:56ch;margin-bottom:20px}
  .case-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
    border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:24px}
  .case-facts div{background:var(--ink-raise);padding:16px 14px}
  .case-facts .k{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--bone-faint);margin-bottom:6px}
  .case-facts .v{font-weight:600;font-size:14.5px;color:var(--bone);line-height:1.35}
  @media(max-width:860px){.case-grid{grid-template-columns:1fr}}
  /* ===== careers ===== */
  .careers{border-top:1px solid var(--line)}
  .careers .wrap{padding-block:clamp(60px,8vw,110px)}
  .careers-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
  .careers-media{border-radius:14px;overflow:hidden;border:1px solid var(--line)}
  .careers-media img{width:100%;display:block;aspect-ratio:16/11;object-fit:cover;filter:grayscale(1)}
  .careers h2{font-weight:800;letter-spacing:-.03em;line-height:1.08;font-size:clamp(26px,4vw,46px);margin-bottom:16px;text-wrap:balance}
  .careers p{color:var(--bone-dim);font-size:16.5px;line-height:1.72;max-width:50ch;margin-bottom:26px}
  @media(max-width:820px){.careers-grid{grid-template-columns:1fr}}
  /* ===== client logo images ===== */
  .client-names .more{border-color:color-mix(in srgb,var(--gold) 45%,transparent);color:var(--gold);background:transparent}
  .client-names{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
  .client-names span{font-size:13px;color:var(--bone-dim);padding:7px 13px;border:1px solid var(--chip-line);
    background:var(--chip);border-radius:999px}

  /* ===== bảng giá media ===== */
  .price{border-top:1px solid var(--line);margin-top:clamp(34px,5vw,58px);padding-top:clamp(28px,4vw,44px)}
  .price h4{font-weight:800;letter-spacing:-.025em;font-size:clamp(20px,2.6vw,30px);margin-bottom:6px}
  .price .note{color:var(--bone-faint);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:22px}
  .price-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--line);
    border:1px solid var(--line);border-radius:12px;overflow:hidden}
  .price-row{background:var(--ink-raise);padding:16px 18px;display:flex;flex-direction:column;gap:5px}
  .price-row .n{font-weight:600;font-size:14.5px;color:var(--bone)}
  .price-row .d{color:var(--bone-dim);font-size:12.5px;line-height:1.45}
  .price-row .v{color:var(--gold);font-weight:700;font-size:14.5px;font-variant-numeric:tabular-nums;margin-top:2px}
  .price-row .v.ask{color:var(--bone-faint);font-weight:500}
  /* ===== lưới video ===== */
  .subhead{display:flex;align-items:baseline;gap:14px;margin:clamp(46px,6vw,76px) 0 22px}
  .subhead .t{font-weight:800;letter-spacing:-.03em;font-size:clamp(22px,3vw,34px)}
  .subhead .c{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-faint)}
  .vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:1px;background:var(--line);
    border:1px solid var(--line);border-radius:12px;overflow:hidden}
  .vcard{background:var(--ink-raise);padding:18px;display:flex;flex-direction:column;gap:9px;
    transition:background .28s;min-height:118px}
  .vcard:hover{background:var(--card-hover)}
  .vcard .tag{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold)}
  .vcard .ti{font-weight:600;font-size:15px;line-height:1.35;color:var(--bone);text-wrap:balance}
  .vcard .go{margin-top:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
    color:var(--bone-faint);display:inline-flex;align-items:center;gap:7px;transition:color .25s}
  .vcard:hover .go{color:var(--gold)}
  /* ===== lưới ảnh ===== */
  .pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:clamp(14px,2vw,22px)}
  .pcard{border:1px solid var(--line);border-radius:13px;overflow:hidden;background:var(--ink-raise)}
  .pcard .ph{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
    filter:grayscale(1) contrast(1.04);transition:filter .55s,transform .7s cubic-bezier(.2,.7,.2,1)}
  .pcard:hover .ph{filter:grayscale(0);transform:scale(1.035)}
  .pcard .cap{padding:15px 17px 17px}
  .pcard .cap .k{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:6px}
  .pcard .cap .t{font-weight:600;font-size:15.5px;color:var(--bone);margin-bottom:5px}
  .pcard .cap .d{color:var(--bone-dim);font-size:13px;line-height:1.5}
  .pcard{display:block;color:inherit}
  .pcard .cap .t,.pcard .cap .d{display:block}
  /* ---- photo carousel + dot nav ---- */
  .pcar{position:relative}
  .ptrack{--pn:4;--pg:clamp(14px,2vw,22px);position:relative;display:flex;gap:var(--pg);overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px}
  .ptrack::-webkit-scrollbar{display:none}
  .ptrack .pcard{flex:0 0 calc((100% - (var(--pn) - 1)*var(--pg))/var(--pn));scroll-snap-align:start}
  @media(max-width:1100px){.ptrack{--pn:3}} @media(max-width:760px){.ptrack{--pn:2}} @media(max-width:500px){.ptrack{--pn:1}}
  .pctl{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:24px}
  .pdots{display:flex;gap:9px}
  .pdot{width:8px;height:8px;border-radius:50%;background:var(--bone-faint);opacity:.5;border:0;padding:0;cursor:pointer;transition:.3s}
  .pdot:hover{opacity:.9}
  .pdot.on{background:var(--gold);opacity:1;transform:scale(1.25);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 15%,transparent)}
  .parr{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--bone);cursor:pointer;
    font-size:15px;display:grid;place-items:center;transition:border-color .25s,color .25s,opacity .25s}
  .parr:hover{border-color:var(--gold);color:var(--gold)} .parr:disabled{opacity:.28;cursor:default}
  @media(prefers-reduced-motion:reduce){.ptrack{scroll-behavior:auto}}

  /* =====================================================================
     CÁC TRANG CON — mỗi trang một luồng: đầu trang → nội dung chính → một lời mời hành động
     ===================================================================== */
  body{font-size:16px}
  img{max-width:100%}
  :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
  .skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--gold);color:var(--btn-fg);padding:10px 14px;border-radius:8px;font-weight:600}
  .skip:focus{left:12px}

  /* ---- menu: trang đang xem ---- */
  nav.links a[aria-current="page"]{color:var(--bone)}
  nav.links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;background:var(--gold)}

  /* ---- menu điện thoại ---- */
  .burger{display:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--bone);
    cursor:pointer;place-items:center;flex:none}
  .burger span,.burger span::before,.burger span::after{display:block;width:16px;height:1.5px;background:currentColor;border-radius:2px;position:relative;transition:.25s}
  .burger span::before,.burger span::after{content:"";position:absolute;left:0}
  .burger span::before{top:-5px} .burger span::after{top:5px}
  .menu-open .burger span{background:transparent}
  .menu-open .burger span::before{top:0;transform:rotate(45deg)} .menu-open .burger span::after{top:0;transform:rotate(-45deg)}
  @media(max-width:900px){.burger{display:grid}}
  .mnav{position:fixed;inset:0;z-index:55;background:var(--ink);padding:96px var(--pad) 40px;display:flex;flex-direction:column;gap:6px;
    opacity:0;visibility:hidden;transform:translateY(-8px);transition:.25s ease;overflow-y:auto}
  .menu-open .mnav{opacity:1;visibility:visible;transform:none}
  .mnav a.big{font-weight:800;letter-spacing:-.03em;font-size:clamp(30px,8vw,44px);line-height:1.15;color:var(--bone-dim);padding:6px 0;border-bottom:1px solid var(--line-soft)}
  .mnav a.big[aria-current="page"],.mnav a.big:hover{color:var(--gold)}
  .mnav .mfoot{margin-top:auto;padding-top:28px;display:flex;flex-direction:column;gap:8px;color:var(--bone-dim)}
  .menu-open{overflow:hidden}
  @media(min-width:901px){.mnav{display:none}}

  /* ---- đầu trang con ---- */
  .page-head{padding-top:clamp(128px,18vh,184px);padding-bottom:clamp(40px,6vw,72px)}
  .crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-faint);margin-bottom:22px}
  .crumbs a{color:var(--bone-dim)} .crumbs a:hover{color:var(--gold)}
  .crumbs .sep{opacity:.5}
  .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:18px;display:block}
  .ph-title{font-weight:800;letter-spacing:-.045em;line-height:.98;font-size:clamp(40px,7.4vw,100px);max-width:15ch;text-wrap:balance}
  .ph-title .g{color:var(--gold)}
  .ph-title.sm{font-size:clamp(34px,5.4vw,72px);max-width:18ch}
  .ph-lead{color:var(--bone-dim);font-size:clamp(17px,2vw,21px);line-height:1.6;max-width:58ch;margin-top:24px;text-wrap:pretty}

  /* ---- khối nội dung chung ---- */
  .blk2{padding:clamp(56px,8vw,110px) 0;border-top:1px solid var(--line)}
  .blk2.first{border-top:none;padding-top:0}
  .h2{font-weight:800;letter-spacing:-.035em;line-height:1.05;font-size:clamp(28px,4.4vw,56px);max-width:18ch;text-wrap:balance}
  .h2 .g{color:var(--gold)}
  .row-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:18px 30px;margin-bottom:clamp(28px,4vw,46px)}
  .more{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;color:var(--bone);transition:color .25s}
  .more .arw{color:var(--gold);transition:transform .3s}
  .more:hover{color:var(--gold)} .more:hover .arw{transform:translateX(6px)}

  /* ---- số liệu ---- */
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:clamp(30px,4vw,48px)}
  .stats div{background:var(--ink);padding:clamp(18px,3vw,30px)}
  .stats b{display:block;font-weight:800;letter-spacing:-.04em;font-size:clamp(30px,4.6vw,56px);line-height:1;color:var(--bone)}
  .stats span{display:block;margin-top:10px;color:var(--bone-dim);font-size:14.5px;line-height:1.45}
  @media(max-width:620px){.stats{grid-template-columns:1fr}}

  /* ---- thẻ dự án ---- */
  .work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,28px)}
  @media(max-width:980px){.work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:560px){.work-grid{grid-template-columns:1fr}}
  .wcard{display:flex;flex-direction:column;gap:14px;color:inherit;min-width:0}
  .wcard .ph{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--ink-raise);border:1px solid var(--line)}
  .wcard .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .5s;filter:saturate(.92)}
  .wcard:hover .ph img{transform:scale(1.035);filter:saturate(1.05)}
  .wcard .meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--bone-faint);display:flex;gap:8px;flex-wrap:wrap}
  .wcard .meta .c{color:var(--gold)}
  .wcard .t{font-weight:700;font-size:clamp(18px,1.7vw,21px);letter-spacing:-.02em;line-height:1.25;color:var(--bone);text-wrap:balance}
  .wcard .d{color:var(--bone-dim);font-size:14.5px;line-height:1.55;margin-top:-6px}
  .wcard:hover .t{color:var(--gold)}
  .wcard[hidden]{display:none}
  /* bìa chữ khi chưa có ảnh */
  .ph.type{display:flex;flex-direction:column;justify-content:flex-end;padding:22px;
    background:radial-gradient(120% 120% at 85% 0%,color-mix(in srgb,var(--gold) 22%,var(--ink-raise)),var(--ink-raise) 60%)}
  .ph.type b{font-weight:800;letter-spacing:-.05em;font-size:clamp(34px,4.4vw,56px);line-height:.9;color:var(--gold)}
  .ph.type small{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim);margin-top:10px}

  /* ---- bộ lọc ---- */
  .filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(26px,4vw,40px)}
  .filters button{font:inherit;font-size:13.5px;color:var(--bone-dim);padding:9px 16px;border:1px solid var(--chip-line);background:var(--chip);border-radius:999px;cursor:pointer;transition:.2s}
  .filters button:hover{color:var(--bone);border-color:var(--bone-faint)}
  .filters button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--btn-fg);font-weight:600}
  .filters button .n{opacity:.6;margin-left:6px;font-variant-numeric:tabular-nums}

  /* ---- logo khách hàng ---- */
  .logo-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:14px;overflow:hidden}
  .logo-wall li{list-style:none;background:var(--ink);display:grid;place-items:center;padding:clamp(18px,2.6vw,28px) 18px;min-height:96px}
  .logo-wall img{max-width:100%;height:auto;opacity:.72;transition:opacity .25s}
  .logo-wall li:hover img{opacity:1}
  .client-note{margin-top:18px;color:var(--bone-faint);font-size:14px}

  /* ---- trang dịch vụ ---- */
  .subnav{position:sticky;top:64px;z-index:20;background:color-mix(in srgb,var(--ink) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-block:1px solid var(--line-soft);margin-bottom:8px}
  .subnav .wrap{display:flex;gap:8px;overflow-x:auto;padding-block:12px;scrollbar-width:none}
  .subnav .wrap::-webkit-scrollbar{display:none}
  .subnav a{flex:none;font-size:13.5px;color:var(--bone-dim);padding:8px 15px;border:1px solid var(--chip-line);border-radius:999px;transition:.2s}
  .subnav a:hover,.subnav a.on{color:var(--btn-fg);background:var(--gold);border-color:var(--gold)}
  .svc{scroll-margin-top:130px}
  .svc-img{margin-top:26px;border-radius:12px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;background:var(--ink-raise)}
  .svc-img img{width:100%;height:100%;object-fit:cover;display:block}
  @media(max-width:820px){.svc-img{aspect-ratio:16/9}}
  .rel{margin-top:30px;padding-top:20px;border-top:1px solid var(--line-soft)}
  .rel .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-faint);display:block;margin-bottom:10px}
  .rel a{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line-soft);color:var(--bone);font-size:15px}
  .rel a span:last-child{color:var(--gold);flex:none}
  .rel a:hover{color:var(--gold)}

  /* ---- trang dự án chi tiết ---- */
  .case-top{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,5vw,72px);align-items:start}
  .case-top .ph-lead{margin-top:0}
  .case-p{color:var(--bone-dim);font-size:17px;line-height:1.75;max-width:60ch;margin-top:18px}
  .case-p b{color:var(--bone)}
  .deliv{margin-top:28px}
  @media(max-width:900px){.case-top{grid-template-columns:1fr}}
  .case-top .client{font-weight:600;color:var(--bone);font-size:17px;margin-bottom:14px}
  .facts{display:flex;flex-direction:column;border-top:1px solid var(--line)}
  .facts div{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--line-soft)}
  .facts .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--bone-faint);padding-top:3px}
  .facts .v{font-weight:600;font-size:15px;color:var(--bone);text-align:right}
  .case-body{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,5vw,72px);margin-top:clamp(36px,5vw,56px)}
  @media(max-width:900px){.case-body{grid-template-columns:1fr}}
  .case-body p{color:var(--bone-dim);font-size:17px;line-height:1.75;max-width:60ch;margin-bottom:16px}
  .case-body p b{color:var(--bone)}
  .deliv h2{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-faint);font-weight:500;margin-bottom:14px}
  .deliv ul{list-style:none;display:flex;flex-direction:column;gap:9px}
  .deliv li{display:flex;gap:11px;align-items:flex-start;color:var(--bone);font-size:15.5px;line-height:1.45}
  .deliv li::before{content:"";width:6px;height:6px;margin-top:8px;flex:none;border-radius:1px;background:var(--gold);transform:rotate(45deg)}
  .actions{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin-top:26px}
  .video{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#000;margin-top:clamp(36px,5vw,56px)}
  .video iframe,.video button{position:absolute;inset:0;width:100%;height:100%;border:0}
  .video button{cursor:pointer;background:#000 center/cover no-repeat;display:grid;place-items:center}
  .video button::after{content:"";width:74px;height:74px;border-radius:50%;background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l8 5-8 5z' fill='%230B0C0D'/%3E%3C/svg%3E") center/34px no-repeat;
    box-shadow:0 10px 40px -10px rgba(0,0,0,.8);transition:transform .25s}
  .video button:hover::after{transform:scale(1.08)}
  .gallery{margin-top:clamp(36px,5vw,56px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.6vw,18px)}
  .gallery a{display:block;border-radius:12px;overflow:hidden;background:var(--ink-raise);border:1px solid var(--line);cursor:zoom-in}
  .gallery a:first-child{grid-column:1/-1}
  .gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .gallery a:hover img{transform:scale(1.02)}
  .gallery.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gallery.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .gallery.g3 a:first-child,.gallery.g4 a:first-child{grid-column:auto}
  .gallery.g3 a{aspect-ratio:3/2} .gallery.g4 a{aspect-ratio:3/4}
  @media(max-width:700px){.gallery,.gallery.g3,.gallery.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
  .next{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;padding:clamp(26px,4vw,40px) 0;border-top:1px solid var(--line);color:inherit}
  .next .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-faint);display:block;margin-bottom:8px}
  .next .t{font-weight:800;letter-spacing:-.03em;font-size:clamp(24px,3.6vw,44px);line-height:1.08;color:var(--bone);transition:color .25s}
  .next .arw{font-size:clamp(26px,3.6vw,44px);color:var(--gold);transition:transform .3s}
  .next:hover .t{color:var(--gold)} .next:hover .arw{transform:translateX(8px)}

  /* ---- lightbox ---- */
  .lb{position:fixed;inset:0;z-index:90;background:rgba(5,6,7,.94);display:grid;place-items:center;padding:56px 16px}
  .lb[hidden]{display:none}
  .lb img{max-width:min(100%,1400px);max-height:calc(100vh - 112px);object-fit:contain;border-radius:8px}
  .lb button{position:absolute;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:rgba(11,12,13,.6);color:var(--bone);font-size:20px;cursor:pointer}
  .lb button:hover{border-color:var(--gold);color:var(--gold)}
  .lb .x{top:14px;right:14px} .lb .pv{left:14px;top:50%;transform:translateY(-50%)} .lb .nx{right:14px;top:50%;transform:translateY(-50%)}
  .lb .cnt{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--bone-dim)}

  /* ---- video list ---- */
  .vlist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,28px)}
  @media(max-width:980px){.vlist{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:560px){.vlist{grid-template-columns:1fr}}
  .vitem{display:flex;flex-direction:column;gap:12px;color:inherit}
  .vitem .ph{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--ink-raise)}
  .vitem .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
  .vitem .ph::after{content:"";position:absolute;right:12px;bottom:12px;width:40px;height:40px;border-radius:50%;
    background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l8 5-8 5z' fill='%230B0C0D'/%3E%3C/svg%3E") center/20px no-repeat}
  .vitem:hover .ph img{transform:scale(1.04)}
  .vitem .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold)}
  .vitem .ti{font-weight:700;font-size:17px;line-height:1.3;color:var(--bone)}
  .vitem:hover .ti{color:var(--gold)}

  /* ---- giới thiệu ---- */
  .team-photo{border-radius:14px;overflow:hidden;border:1px solid var(--line);margin-top:clamp(36px,5vw,60px)}
  .team-photo img{width:100%;display:block;aspect-ratio:3/2;object-fit:cover}
  .team-photo figcaption{padding:12px 16px;color:var(--bone-faint);font-size:13px;background:var(--ink-raise)}

  /* ---- báo giá ---- */
  .feature{display:grid;grid-template-columns:1fr auto;gap:22px 40px;align-items:center;padding:clamp(24px,4vw,40px);border:1px solid color-mix(in srgb,var(--gold) 45%,var(--line));
    border-radius:16px;background:radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--gold) 12%,var(--ink-raise)),var(--ink-raise) 55%);color:inherit;margin-bottom:clamp(36px,5vw,56px)}
  .feature .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:10px}
  .feature h2{font-weight:800;letter-spacing:-.03em;font-size:clamp(24px,3.4vw,40px);line-height:1.1;margin-bottom:10px}
  .feature p{color:var(--bone-dim);font-size:16px;line-height:1.6;max-width:52ch}
  .feature .price-tag{text-align:right}
  .feature .price-tag small{display:block;color:var(--bone-faint);font-size:13px;margin-bottom:4px}
  .feature .price-tag b{font-weight:800;font-size:clamp(26px,3.6vw,40px);letter-spacing:-.03em;color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap}
  @media(max-width:700px){.feature{grid-template-columns:1fr}.feature .price-tag{text-align:left}}
  .price{border-top:none;margin-top:0;padding-top:0}
  a.price-row:hover{background:var(--card-hover)} a.price-row .v{display:inline-flex;gap:8px}

  /* ---- liên hệ ---- */
  .contact-rows{border-top:1px solid var(--line)}
  .crow{display:grid;grid-template-columns:200px 1fr auto;gap:10px 30px;align-items:baseline;padding:clamp(20px,3vw,30px) 0;border-bottom:1px solid var(--line);color:inherit}
  .crow .k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-faint)}
  .crow .v{font-weight:700;letter-spacing:-.025em;font-size:clamp(22px,3.4vw,40px);line-height:1.15;color:var(--bone);overflow-wrap:anywhere}
  .crow .v.sm{font-size:clamp(18px,2.2vw,24px)}
  .crow .arw{color:var(--gold);font-size:22px;transition:transform .3s}
  a.crow:hover .v{color:var(--gold)} a.crow:hover .arw{transform:translateX(6px)}
  @media(max-width:700px){.crow{grid-template-columns:1fr auto}.crow .k{grid-column:1/-1}}
  .brief{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
  .brief li{list-style:none;background:var(--ink);padding:22px 20px;color:var(--bone-dim);font-size:15px;line-height:1.5}
  .brief li b{display:block;color:var(--bone);font-size:16px;margin-bottom:6px}
  .brief li::before{content:counter(b,decimal-leading-zero);counter-increment:b;display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--gold);margin-bottom:12px}
  .brief{counter-reset:b}
  @media(max-width:900px){.brief{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:520px){.brief{grid-template-columns:1fr}}

  .wcard,.vitem,.next,.crow,.feature{text-decoration:none}