:root {
      --bg: #050505;
      --panel: #0d0d0d;
      --panel-2: #121212;
      --text: #f5f5f5;
      --muted: #8f8f8f;
      --line: rgba(255,255,255,.10);
      --blue: #0b63f6;
      --blue-2: #4aa3ff;
      --max: 1380px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.5;
      overflow-x: hidden;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; width: 100%; }
    button, input, textarea { font: inherit; }

    .container {
      width: min(calc(100% - 48px), var(--max));
      margin-inline: auto;
    }

    .eyebrow {
      color: var(--muted);
      font-size: 12px;
      letter-spacing: .18em;
      text-transform: uppercase;
    }

    .section {
      padding: 120px 0;
      border-top: 1px solid var(--line);
    }

    .header {
      position: fixed;
      inset: 0 0 auto;
      z-index: 1000;
      backdrop-filter: blur(14px);
      background: rgba(5,5,5,.72);
      border-bottom: 1px solid rgba(255,255,255,.07);
    }

    .header-inner {
      height: 84px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 14px;
      font-weight: 700;
      letter-spacing: .08em;
    }

    .brand img {
      width: 118px;
      height: 42px;
      object-fit: contain;
    }

    .brand-fallback {
      font-size: 18px;
      font-weight: 800;
      letter-spacing: .1em;
    }

    nav {
      display: flex;
      gap: 28px;
      font-size: 14px;
      color: #d6d6d6;
    }

    nav a {
      position: relative;
      padding: 8px 0;
    }

    nav a::after {
      content: "";
      position: absolute;
      left: 0; right: 100%; bottom: 2px;
      height: 1px;
      background: var(--blue-2);
      transition: .25s ease;
    }

    nav a:hover::after { right: 0; }

    .menu-btn {
      display: none;
      border: 0;
      background: transparent;
      color: white;
      letter-spacing: .15em;
    }

    .hero {
      min-height: 100vh;
      display: grid;
      align-items: end;
      position: relative;
      overflow: hidden;
      padding-top: 84px;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 75% 30%, rgba(11,99,246,.28), transparent 28%),
        radial-gradient(circle at 20% 80%, rgba(74,163,255,.13), transparent 28%),
        linear-gradient(120deg, #090909 0%, #050505 48%, #111826 100%);
    }

    .hero-grid {
      position: absolute;
      inset: 84px 0 0;
      opacity: .16;
      background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
      background-size: 72px 72px;
      mask-image: linear-gradient(to bottom, black, transparent 90%);
    }

    .hero-inner {
      position: relative;
      z-index: 2;
      padding: 140px 0 70px;
    }

    .hero-copy {
      display: grid;
      grid-template-columns: 1.3fr .7fr;
      gap: 48px;
      align-items: end;
    }

    .hero h1 {
      margin: 18px 0 0;
      font-size: clamp(64px, 10vw, 156px);
      line-height: .84;
      letter-spacing: -.06em;
      text-transform: uppercase;
    }

    .hero h1 .accent {
      color: transparent;
      -webkit-text-stroke: 1px rgba(255,255,255,.72);
    }

    .hero-side {
      max-width: 430px;
      justify-self: end;
      color: #cfcfcf;
      font-size: 17px;
    }

    .hero-side p {
      margin: 0 0 28px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      border: 1px solid rgba(255,255,255,.18);
      padding: 14px 18px;
      transition: .25s ease;
    }

    .btn:hover {
      background: white;
      color: black;
    }

    .hero-bottom {
      display: flex;
      justify-content: space-between;
      gap: 24px;
      margin-top: 110px;
      padding-top: 22px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 12px;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .section-head {
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: flex-start;
      margin-bottom: 56px;
    }

    .section-head h2 {
      margin: 10px 0 0;
      font-size: clamp(42px, 6vw, 86px);
      line-height: .94;
      letter-spacing: -.05em;
      max-width: 900px;
    }

    .section-head p {
      max-width: 430px;
      color: var(--muted);
      margin: 0;
    }

    .services-list {
      border-top: 1px solid var(--line);
    }

    .service-row {
      display: grid;
      grid-template-columns: 80px 1fr 1fr 40px;
      gap: 24px;
      align-items: center;
      padding: 30px 0;
      border-bottom: 1px solid var(--line);
      transition: .25s ease;
    }

    .service-row:hover {
      padding-left: 16px;
      background: linear-gradient(90deg, rgba(11,99,246,.12), transparent 55%);
    }

    .service-row .num { color: var(--muted); }
    .service-row h3 {
      margin: 0;
      font-size: clamp(26px, 3vw, 44px);
      font-weight: 600;
      letter-spacing: -.03em;
    }
    .service-row p {
      margin: 0;
      color: var(--muted);
    }

    .projects {
      display: grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 24px;
    }

    .project-card {
      position: relative;
      min-height: 520px;
      overflow: hidden;
      border: 1px solid var(--line);
      background: var(--panel);
    }

    .project-card.small { min-height: 350px; }
    .project-stack { display: grid; gap: 24px; }

    .project-art {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 30% 30%, rgba(74,163,255,.35), transparent 25%),
        linear-gradient(135deg, #131313, #101827 55%, #070707);
      transition: transform .55s ease;
    }

    .project-card:nth-child(1) .project-art {
      background:
        linear-gradient(150deg, rgba(0,0,0,.12), rgba(0,0,0,.76)),
        radial-gradient(circle at 70% 30%, rgba(23,102,255,.45), transparent 25%),
        linear-gradient(120deg, #262626, #101c34);
    }

    .project-stack .project-card:nth-child(1) .project-art {
      background:
        linear-gradient(150deg, rgba(0,0,0,.10), rgba(0,0,0,.72)),
        radial-gradient(circle at 40% 40%, rgba(255,255,255,.16), transparent 20%),
        linear-gradient(120deg, #1c1c1c, #101010);
    }

    .project-stack .project-card:nth-child(2) .project-art {
      background:
        linear-gradient(150deg, rgba(0,0,0,.15), rgba(0,0,0,.76)),
        radial-gradient(circle at 70% 25%, rgba(11,99,246,.5), transparent 20%),
        linear-gradient(120deg, #0f1728, #0a0a0a);
    }

    .project-card:hover .project-art { transform: scale(1.035); }

    .project-content {
      position: absolute;
      inset: auto 0 0;
      padding: 28px;
      background: linear-gradient(transparent, rgba(0,0,0,.82));
    }

    .project-content span {
      color: #bdbdbd;
      font-size: 12px;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .project-content h3 {
      margin: 8px 0 4px;
      font-size: 34px;
      letter-spacing: -.03em;
    }

    .project-content p {
      margin: 0;
      color: var(--muted);
    }

    .about-strip {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: start;
    }

    .about-strip h2 {
      margin: 0;
      font-size: clamp(48px, 7vw, 104px);
      line-height: .88;
      letter-spacing: -.06em;
    }

    .about-copy {
      color: #cfcfcf;
      max-width: 560px;
      padding-top: 10px;
    }

    .dna-words {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      margin-top: 54px;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .dna-word {
      padding: 28px 18px 28px 0;
      border-right: 1px solid var(--line);
    }
    .dna-word:last-child { border-right: 0; padding-left: 18px; }
    .dna-word:nth-child(2) { padding-left: 18px; }
    .dna-word b {
      display: block;
      font-size: 28px;
      margin-bottom: 4px;
    }
    .dna-word span { color: var(--muted); }

    .activity-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .activity-card {
      border-top: 1px solid var(--line);
      padding-top: 16px;
    }

    .thumb {
      aspect-ratio: 16 / 10;
      background:
        linear-gradient(135deg, rgba(11,99,246,.22), transparent),
        linear-gradient(145deg, #171717, #0b0b0b);
      margin-bottom: 20px;
      overflow: hidden;
      position: relative;
    }

    .thumb::after {
      content: "DNA";
      position: absolute;
      right: 14px;
      bottom: 4px;
      font-size: 74px;
      font-weight: 800;
      letter-spacing: -.07em;
      color: rgba(255,255,255,.06);
    }

    .activity-card .meta {
      display: flex;
      justify-content: space-between;
      color: var(--muted);
      font-size: 12px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .activity-card h3 {
      margin: 12px 0 0;
      font-size: 24px;
      letter-spacing: -.025em;
    }

    .cta {
      min-height: 70vh;
      display: grid;
      align-items: center;
      background:
        radial-gradient(circle at 80% 30%, rgba(11,99,246,.26), transparent 25%),
        linear-gradient(135deg, #050505, #111111);
    }

    .cta h2 {
      margin: 14px 0 26px;
      font-size: clamp(58px, 9vw, 138px);
      line-height: .88;
      letter-spacing: -.06em;
    }

    footer {
      border-top: 1px solid var(--line);
      padding: 34px 0 42px;
      color: var(--muted);
    }

    .footer-inner {
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: 32px;
      align-items: center;
    }

    .socials {
      display: flex;
      gap: 18px;
    }

    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .7s ease, transform .7s ease;
    }
    .reveal.visible {
      opacity: 1;
      transform: none;
    }

    @media (max-width: 980px) {
      nav { display: none; }
      .menu-btn { display: block; }
      .hero-copy,
      .about-strip,
      .projects {
        grid-template-columns: 1fr;
      }
      .hero-side {
        justify-self: start;
        margin-top: 24px;
      }
      .section-head {
        display: block;
      }
      .section-head p { margin-top: 24px; }
      .service-row {
        grid-template-columns: 54px 1fr 32px;
      }
      .service-row p { display: none; }
      .activity-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 680px) {
      .container { width: min(calc(100% - 28px), var(--max)); }
      .header-inner { height: 70px; }
      .hero { padding-top: 70px; }
      .hero-grid { inset: 70px 0 0; }
      .section { padding: 82px 0; }
      .hero-inner { padding: 100px 0 34px; }
      .hero h1 { font-size: clamp(54px, 18vw, 86px); }
      .hero-bottom { margin-top: 72px; flex-direction: column; }
      .activity-grid { grid-template-columns: 1fr; }
      .dna-words { grid-template-columns: 1fr; }
      .dna-word {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding: 22px 0 !important;
      }
      .dna-word:last-child { border-bottom: 0; }
      .footer-inner {
        grid-template-columns: 1fr;
      }
      .brand img { width: 96px; }
    }
  
/* Trang nội dung */
.page-hero{padding:170px 0 82px;min-height:420px;background:radial-gradient(circle at 80% 25%,rgba(20,107,255,.20),transparent 35%)}
.page-hero h1{font-size:clamp(52px,9vw,132px);line-height:1.02;letter-spacing:-.07em;margin:25px 0}.page-hero p{max-width:680px;color:var(--muted);font-size:19px;line-height:1.6}
.page-section{padding:90px 0;border-top:1px solid var(--line)}.page-section h2{font-size:clamp(34px,5vw,72px);letter-spacing:-.055em;line-height:1.08;margin:18px 0 34px}.page-section p{color:var(--muted);line-height:1.7;max-width:800px}
.tile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.tile{display:block;background:#111;border:1px solid var(--line);overflow:hidden}.tile:hover .tile-art{transform:scale(1.025)}.tile-art{aspect-ratio:16/10;background:radial-gradient(circle at 68% 35%,rgba(48,124,255,.5),transparent 31%),linear-gradient(125deg,#1a2338,#050607 65%);display:flex;align-items:flex-end;padding:28px;transition:transform .3s}.tile:nth-child(2n) .tile-art{background:radial-gradient(circle at 24% 60%,rgba(20,107,255,.45),transparent 30%),linear-gradient(135deg,#161b24,#050607 65%)}.tile-art span{font-size:clamp(30px,4vw,64px);font-weight:800;letter-spacing:-.06em}.tile-copy{padding:24px}.tile-copy h3{font-size:25px;margin:0 0 10px}.tile-copy p{margin:0}.tile-copy small{color:var(--blue);text-transform:uppercase;letter-spacing:.12em}
.article-layout{display:grid;grid-template-columns:1fr 1fr;gap:70px}.article-layout p{font-size:18px}.detail-media{aspect-ratio:16/8;background:radial-gradient(circle at 60% 35%,rgba(20,107,255,.45),transparent 30%),linear-gradient(125deg,#1b243a,#08090b);display:grid;place-items:center;color:#9fb8e8;font-weight:800;font-size:clamp(36px,8vw,110px);letter-spacing:-.06em;margin:25px 0 45px}.tag-list{display:flex;flex-wrap:wrap;gap:12px}.tag-list span,.filter a{border:1px solid var(--line);padding:10px 15px;border-radius:50px}.filter{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 34px}.filter a.active,.filter a:hover{background:var(--blue);border-color:var(--blue)}.meta-line{color:var(--muted);margin-bottom:24px}.contact-options{display:grid;grid-template-columns:1fr 1fr;gap:35px}.contact-options a{font-size:clamp(24px,3vw,46px);border-bottom:1px solid var(--line);padding:22px 0;overflow-wrap:anywhere}.home-tile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.home-tile-grid .tile-art{aspect-ratio:3/4;align-items:end}.home-tile-grid .tile-art span{font-size:clamp(26px,2.7vw,42px)}.home-tile-grid .tile-copy{padding:18px}.home-tile-grid .tile-copy h3{font-size:20px}
@media(max-width:850px){.tile-grid,.article-layout,.contact-options{grid-template-columns:1fr}.home-tile-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.home-tile-grid{grid-template-columns:1fr}.home-tile-grid .tile-art{aspect-ratio:16/10}.page-hero{padding-top:125px;min-height:320px}.page-section{padding:55px 0}}

@media(max-width:980px){.header nav.open{display:flex;position:absolute;top:84px;left:0;right:0;background:#08090b;flex-direction:column;padding:24px;z-index:100;border-bottom:1px solid var(--line)}}

@media(max-width:980px){nav.filter{display:flex}}

/* Custom navbar font size */
.header nav a { font-size: 16px !important; margin-left: 1.5rem !important; }
.full-content p, .full-content ul, .full-content ol, .full-content h2, .full-content h3 { max-width: 100% !important; }

/* Vibe News Card Design */
.vibe-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.vibe-news-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 4/3;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: white;
    background: #111;
    transition: transform 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.vibe-news-card:hover {
    transform: translateY(-5px);
}
.vibe-news-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.5s ease;
}
.vibe-news-card:hover img {
    transform: scale(1.05);
}
.vibe-news-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 40%, transparent 100%);
    z-index: 2;
}
.vibe-news-card-content {
    position: relative;
    z-index: 3;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
}
.vibe-news-card-text {
    flex: 1;
}
.vibe-news-card-date {
    color: #4aa3ff; /* blue-2 */
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
    display: block;
}
.vibe-news-card-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.vibe-news-card-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #4aa3ff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4aa3ff;
    flex-shrink: 0;
    transition: all 0.3s ease;
}
.vibe-news-card:hover .vibe-news-card-arrow {
    background: #4aa3ff;
    color: #fff;
}
@media (max-width: 980px) {
    .vibe-news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .vibe-news-grid { grid-template-columns: 1fr; }
}