*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:var(--font-b);background:var(--bg);color:var(--text);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-h);line-height:1.2}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}
.center{text-align:center;margin-top:40px}
.grad-text{background:linear-gradient(90deg,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text;color:transparent}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border-radius:999px;font-weight:700;font-size:15px;border:2px solid transparent;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s;font-family:inherit}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 8px 24px -8px var(--primary)}
.btn-gradient .btn-primary{background:linear-gradient(135deg,var(--primary),var(--secondary))}
.btn-square .btn{border-radius:6px}
.btn-outline{border-color:currentColor;color:var(--text);background:transparent}
.btn-outline:hover{background:var(--text);color:var(--bg)}
.btn-sm{padding:9px 18px;font-size:14px}
.btn-block{width:100%}

/* topbar + header */
.topbar{background:linear-gradient(90deg,var(--primary),var(--secondary));color:#fff;text-align:center;font-size:13px;font-weight:600;padding:7px 12px}
.site-header{position:relative;z-index:50;background:var(--header-bg,var(--surface-alt));border-bottom:1px solid var(--border);transition:background .3s,box-shadow .3s}
.site-header.sticky{position:sticky;top:0}
.site-header.transparent.at-top{background:transparent;border-color:transparent}
.site-header.scrolled{box-shadow:0 10px 30px -10px rgba(0,0,0,.5);backdrop-filter:blur(12px);background:color-mix(in srgb,var(--header-bg,var(--surface-alt)) 88%,transparent)}
.nav{display:flex;align-items:center;gap:28px;height:76px}
.brand img{width:auto}
.menu{display:flex;gap:26px;margin-left:auto}
.menu a{font-weight:600;font-size:15px;color:var(--muted);position:relative;padding:6px 0;transition:color .2s}
.menu a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--primary);transition:width .25s}
.menu a:hover,.menu a.active{color:var(--text)}
.menu a:hover::after,.menu a.active::after{width:100%}
.burger{display:none;background:none;border:0;cursor:pointer;width:40px;height:40px;flex-direction:column;justify-content:center;gap:5px;align-items:center}
.burger span{width:24px;height:2px;background:var(--text);border-radius:2px;transition:.3s}

/* sections */
.section{padding:var(--sec-py,100px) 0;background:var(--sec-bg,transparent);color:var(--sec-text,var(--text));position:relative}
.section:nth-of-type(even){background:var(--sec-bg,var(--surface-alt))}
.sec-head{text-align:center;max-width:720px;margin:0 auto 52px}
.sec-head.left{text-align:left;margin:0 0 24px}
.eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);margin-bottom:12px}
.sec-title{font-size:clamp(28px,4vw,42px);font-weight:800}
.sec-sub{margin-top:14px;color:var(--muted);font-size:17px}

/* hero */
.hero{padding:0;overflow:hidden;background:var(--sec-bg,var(--bg))}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.hero-bg video{width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,#000 0%,var(--bg) 100%)}
.hero-gradient{background:radial-gradient(ellipse at top,var(--surface) 0%,var(--bg) 70%)}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.45;animation:float 14s ease-in-out infinite}
.b1{width:480px;height:480px;background:var(--primary);top:-120px;right:-80px}
.b2{width:380px;height:380px;background:var(--secondary);bottom:-120px;left:-100px;animation-delay:-5s}
.b3{width:260px;height:260px;background:var(--primary);bottom:20%;right:30%;opacity:.25;animation-delay:-9s}
.grid-lines{position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at center,#000 20%,transparent 75%);opacity:.5}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,30px) scale(1.08)}}
.hero-inner{position:relative;display:flex;flex-direction:column;justify-content:center;padding-top:var(--sec-py,100px);padding-bottom:var(--sec-py,100px)}
.align-center .hero-inner{align-items:center;text-align:center}
.hero-eyebrow{font-size:14px;font-weight:700;letter-spacing:.12em;color:var(--secondary);margin-bottom:18px}
.hero-title{font-size:clamp(34px,6vw,68px);font-weight:800;letter-spacing:-.01em;max-width:900px}
.hero-sub{font-size:clamp(16px,1.6vw,19px);color:var(--muted);max-width:640px;margin-top:22px}
.hero-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-highlights{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:64px;width:100%}
.hero-highlights li{display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:var(--radius);background:color-mix(in srgb,var(--surface) 70%,transparent);border:1px solid var(--border);backdrop-filter:blur(8px);font-weight:600;font-size:14px}
.hero-highlights i{font-size:20px;color:var(--primary);width:24px;text-align:center}

/* about */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.about-grid.img-left .about-media{order:-1}
.about-text p{color:var(--muted);font-size:17px;margin-bottom:16px}
.about-media img{border-radius:calc(var(--radius) * 1.4);box-shadow:0 30px 60px -20px rgba(0,0,0,.6);width:100%;aspect-ratio:4/3;object-fit:cover}
.about-art{aspect-ratio:1;max-width:420px;margin:0 auto;position:relative;display:grid;place-items:center;width:100%}
.art-ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,var(--primary),var(--secondary),transparent 60%,var(--primary));animation:spin 10s linear infinite;mask:radial-gradient(circle,transparent 62%,#000 63%)}
.art-core{width:56%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-size:56px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));box-shadow:0 0 80px -10px var(--primary)}
@keyframes spin{to{transform:rotate(360deg)}}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:64px}
.stat{text-align:center;padding:28px 12px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border)}
.stat strong{display:block;font-family:var(--font-h);font-size:clamp(30px,4vw,44px);font-weight:800;background:linear-gradient(90deg,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{color:var(--muted);font-weight:600;font-size:14px}

/* service cards */
.cards{display:grid;gap:22px}
.cols-1{grid-template-columns:1fr}.cols-2{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:30px}
.service{transition:transform .3s,border-color .3s,box-shadow .3s;position:relative;overflow:hidden}
.service::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--primary),var(--secondary));opacity:0;transition:opacity .3s;z-index:0}
.service>*{position:relative;z-index:1}
.service:hover{transform:translateY(-6px);border-color:var(--primary);box-shadow:0 24px 50px -24px var(--primary)}
.card-glass .service{background:color-mix(in srgb,var(--surface) 75%,transparent);backdrop-filter:blur(6px)}
.card-filled .service:hover::before{opacity:1}
.card-filled .service:hover p,.card-filled .service:hover .card-icon{color:#fff}
.card-outline .service{background:transparent}
.card-icon{width:60px;height:60px;border-radius:16px;display:grid;place-items:center;font-size:26px;color:var(--primary);background:color-mix(in srgb,var(--primary) 14%,transparent);margin-bottom:22px;transition:.3s}
.service:hover .card-icon{background:var(--primary);color:#fff}
.card-img{margin:-30px -30px 22px;aspect-ratio:16/9;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover}
.service h3{font-size:20px;margin-bottom:10px}
.service p{color:var(--muted);font-size:15px}

/* projects */
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:-24px 0 32px}
.filters button{border:1px solid var(--border);background:var(--surface);color:var(--muted);padding:8px 18px;border-radius:999px;font:600 14px var(--font-b);cursor:pointer}
.filters button.active,.filters button:hover{background:var(--primary);border-color:var(--primary);color:#fff}
.gallery{display:grid;gap:16px}
.shot{position:relative;overflow:hidden;border-radius:var(--radius);aspect-ratio:4/3;cursor:pointer;background:var(--surface);display:block}
.shot.hide{display:none}
.shot img,.shot .ph{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.shot:hover img,.shot:hover .ph{transform:scale(1.08)}
.ph{display:grid;place-items:center;font-size:42px;color:rgba(255,255,255,.55)}
.ph-0{background:linear-gradient(135deg,var(--primary),#3b0764)}.ph-1{background:linear-gradient(135deg,#0ea5e9,var(--surface))}
.ph-2{background:linear-gradient(135deg,var(--secondary),var(--primary))}.ph-3{background:linear-gradient(135deg,#334155,var(--primary))}
.shot-cap{position:absolute;inset:auto 0 0;padding:40px 20px 18px;background:linear-gradient(transparent,rgba(0,0,0,.85));color:#fff}
.shot-cap span{font-size:12px;font-weight:700;color:var(--secondary);text-transform:uppercase;letter-spacing:.08em}
.shot-cap h4{font-size:17px}

/* partners */
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;gap:22px;width:max-content;animation:scroll 40s linear infinite;padding:6px 0}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(calc(-50% - 11px))}}
.logo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px}
.logo-box{width:180px;height:100px;flex:none;border-radius:var(--radius);background:var(--logo-bg,#fff);display:grid;place-items:center;padding:16px;border:1px solid var(--border)}
.logo-grid .logo-box{width:auto}
.logo-box img{max-height:68px;max-width:100%;object-fit:contain;transition:filter .3s,opacity .3s}
.gray-logos .logo-box img{filter:grayscale(1);opacity:.7}
.gray-logos .logo-box:hover img{filter:none;opacity:1}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.contact-grid.no-form{grid-template-columns:1fr;max-width:760px;margin:0 auto}
.contact-info h3,.contact-form h3{font-size:21px;margin-bottom:20px}
.contact-info ul{list-style:none;display:grid;gap:18px}
.contact-info li{display:flex;gap:14px;align-items:flex-start}
.contact-info li i{width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;color:var(--primary);background:color-mix(in srgb,var(--primary) 14%,transparent)}
.contact-info small{display:block;color:var(--muted);font-size:13px}
.contact-info a:hover{color:var(--primary)}
.map{margin-top:22px;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/10}
.map iframe{width:100%;height:100%;border:0}
.contact-form{display:grid;gap:16px}
.contact-form label{display:grid;gap:6px;font-size:14px;font-weight:600;color:var(--muted)}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:13px 15px;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--text);font:15px var(--font-b);outline:none;transition:border-color .2s}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--primary)}
.hp{position:absolute;left:-9999px}
.form-msg{font-size:14px;font-weight:600;min-height:20px}
.form-msg.ok{color:#22c55e}.form-msg.err{color:#f87171}

/* footer + floating */
.site-footer{border-top:1px solid var(--border);padding:30px 0;background:var(--surface-alt);font-size:14px}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.socials{display:flex;gap:10px}
.socials a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--border);transition:.2s}
.socials a:hover{background:var(--primary);border-color:var(--primary);color:#fff}
.floating{position:fixed;right:18px;bottom:18px;display:grid;gap:12px;z-index:60}
.floating.left{right:auto;left:18px}
.fab{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:22px;box-shadow:0 10px 25px -8px rgba(0,0,0,.6);transition:transform .2s}
.fab:hover{transform:scale(1.1)}
.fab.zalo{background:#0068ff;font:800 13px var(--font-b)}
.fab.mess{background:linear-gradient(135deg,#00b2ff,#a033ff)}
.fab.call{background:var(--primary);animation:ring 2s infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--primary) 60%,transparent)}70%{box-shadow:0 0 0 16px transparent}100%{box-shadow:0 0 0 0 transparent}}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);display:grid;place-items:center;z-index:100;padding:20px}
.lightbox[hidden]{display:none}
.lightbox img{max-height:90vh;border-radius:8px}
.lightbox button{position:absolute;top:16px;right:22px;background:none;border:0;color:#fff;font-size:42px;cursor:pointer}

/* reveal animation */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease;transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:none}
.no-anim .reveal{opacity:1;transform:none;transition:none}
.no-anim .blob,.no-anim .marquee-track,.no-anim .art-ring{animation:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.blob,.marquee-track,.art-ring,.fab.call{animation:none}}

/* responsive */
@media (max-width:1024px){
  .cols-4{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:repeat(2,1fr)}
  .hero-highlights{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .nav-phone{display:none}
  .burger{display:flex;margin-left:auto}
  .menu{position:fixed;inset:0 0 0 auto;width:min(300px,82vw);flex-direction:column;gap:6px;padding:90px 26px 26px;background:var(--surface);border-left:1px solid var(--border);transform:translateX(100%);transition:transform .3s;z-index:-1}
  .menu.open{transform:none}
  .menu a{font-size:17px;padding:12px 0;border-bottom:1px solid var(--border)}
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .about-grid,.contact-grid{grid-template-columns:1fr;gap:40px}
  .about-grid.img-left .about-media{order:0}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .cols-2,.cols-3,.cols-4{grid-template-columns:1fr}
  .gallery.cols-2,.gallery.cols-3,.gallery.cols-4{grid-template-columns:repeat(2,1fr)}
  .hero-highlights{grid-template-columns:1fr}
  .shot-cap{padding:30px 12px 10px}.shot-cap h4{font-size:14px}
  .logo-box{width:140px;height:80px}
  .card{padding:22px}
  .card-img{margin:-22px -22px 18px}
}