:root{
  --bg:#f7f5f1;
  --bg2:#ece6df;
  --ink:#2b2927;
  --muted:#77716a;
  --line:rgba(43,41,39,.16);
  --accent:#a86c43;
  --white:#fff;
  --max:1500px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Segoe UI",Roboto,Arial,sans-serif;line-height:1.55}
body.loading{overflow:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,textarea,select{font:inherit}
.wrap{width:min(var(--max),calc(100% - 72px));margin:auto}
.serif{font-family:"Segoe UI",Roboto,Arial,"Helvetica Neue",sans-serif}
.eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:700}
.site-header{position:fixed;z-index:50;top:0;left:0;right:0;height:82px;color:#fff;transition:.35s}
.site-header.scrolled,.site-header.light{background:rgba(247,245,241,.92);color:var(--ink);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav{height:100%;display:flex;align-items:center;justify-content:space-between}
.logo{width:88px;height:52px;object-fit:contain}
.site-header.scrolled .logo,.site-header.light .logo{filter:brightness(.38)}
.menu{display:flex;gap:30px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.menu a{position:relative}
.menu a:after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:currentColor;transition:.3s}
.menu a:hover:after{right:0}
.menu-toggle{display:none;border:0;background:transparent;color:inherit;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.loader{position:fixed;z-index:100;inset:0;background:var(--ink);color:white;display:grid;place-items:center;transition:.7s}
.loader.hide{opacity:0;visibility:hidden}
.loader-word{font-size:clamp(58px,10vw,150px);font-weight:700;letter-spacing:-.07em}
.loader-line{width:0;height:2px;background:var(--accent);margin-top:18px;animation:loadline 1.8s ease forwards}
@keyframes loadline{to{width:100%}}
.hero-v7{height:100svh;min-height:720px;position:relative;overflow:hidden;background:#111;color:#fff}
.hero-v7 .bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.03);animation:slowzoom 18s ease-in-out infinite alternate}
.hero-v7 .bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,9,.76),rgba(10,10,9,.12) 60%),linear-gradient(0deg,rgba(10,10,9,.48),transparent 55%)}
@keyframes slowzoom{to{transform:scale(1.1)}}
.hero-inner{position:absolute;z-index:2;left:0;right:0;bottom:64px}
.hero-kicker{font-size:11px;letter-spacing:.22em;text-transform:uppercase;margin-bottom:28px}
.hero-title{font-family:"Segoe UI",Roboto,Arial,"Helvetica Neue",sans-serif;font-size:clamp(64px,8.4vw,132px);line-height:.9;letter-spacing:-.06em;font-weight:400;margin:0;max-width:1050px;text-wrap:balance}
.hero-bottom{margin-top:38px;display:flex;justify-content:space-between;align-items:flex-end;gap:30px}
.hero-bottom p{max-width:570px;color:rgba(255,255,255,.78);font-size:18px;margin:0}
.scroll-hint{font-size:10px;letter-spacing:.2em;text-transform:uppercase}
.manifesto{min-height:88svh;display:grid;align-items:center;padding:120px 0}
.manifesto-grid{display:grid;grid-template-columns:.7fr 2.3fr;gap:80px}
.manifesto h2{font-family:"Segoe UI",Roboto,Arial,"Helvetica Neue",sans-serif;font-weight:400;font-size:clamp(46px,6.5vw,100px);line-height:1.02;letter-spacing:-.05em;margin:0;text-wrap:balance}
.manifesto em{font-style:normal;color:var(--accent)}
.featured{padding-bottom:120px}
.featured-head{display:flex;justify-content:space-between;align-items:end;padding:40px 0 28px;border-bottom:1px solid var(--line)}
.featured-head h2{font-family:"Segoe UI",Roboto,Arial,"Helvetica Neue",sans-serif;font-weight:400;font-size:clamp(45px,6vw,88px);letter-spacing:-.05em;margin:0}
.project-chapter{padding:80px 0 100px;border-bottom:1px solid var(--line)}
.chapter-meta{display:flex;justify-content:space-between;margin-bottom:18px;font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.chapter-title{font-family:"Segoe UI",Roboto,Arial,"Helvetica Neue",sans-serif;font-weight:400;font-size:clamp(48px,7vw,105px);line-height:.94;letter-spacing:-.055em;margin:0 0 30px;max-width:1100px}
.chapter-image{height:76svh;min-height:560px;overflow:hidden;background:#ddd;position:relative}
.chapter-image img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.chapter-image:after{content:"XEM DỰ ÁN";position:absolute;right:24px;bottom:22px;background:rgba(247,245,241,.92);color:var(--ink);padding:12px 16px;font-size:10px;letter-spacing:.15em;font-weight:700}
.project-chapter:hover img{transform:scale(1.03)}
.chapter-copy{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:24px}
.chapter-copy p{max-width:600px;color:var(--muted);margin:0}
.chapter-link{text-align:right;font-size:11px;letter-spacing:.15em;text-transform:uppercase}
.studio-strip{background:var(--ink);color:#fff;padding:120px 0}
.studio-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:90px}
.studio-grid h2{font-family:"Segoe UI",Roboto,Arial,"Helvetica Neue",sans-serif;font-size:clamp(52px,7vw,98px);line-height:.96;font-weight:400;letter-spacing:-.05em;margin:0}
.studio-grid p{color:rgba(255,255,255,.72);font-size:18px}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.18);margin-top:40px}
.stat{background:var(--ink);padding:28px}
.stat strong{display:block;font-family:"Segoe UI",Roboto,Arial,"Helvetica Neue",sans-serif;font-size:48px;font-weight:400}
.stat span{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.journal-section{padding:120px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:42px}
.section-head h2{font-family:"Segoe UI",Roboto,Arial,"Helvetica Neue",sans-serif;font-size:clamp(48px,6vw,90px);font-weight:400;letter-spacing:-.05em;margin:0}
.journal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.article-card{border-top:1px solid var(--line);padding-top:18px}
.article-card .num{font-family:"Segoe UI",Roboto,Arial,"Helvetica Neue",sans-serif;font-size:44px;color:rgba(43,41,39,.15)}
.article-card h3{font-family:"Segoe UI",Roboto,Arial,"Helvetica Neue",sans-serif;font-size:32px;line-height:1.07;font-weight:400;margin:30px 0 18px}
.article-card p{color:var(--muted)}
.cta{background:var(--accent);color:#fff;padding:105px 0}
.cta-grid{display:grid;grid-template-columns:1.7fr .8fr;gap:80px;align-items:end}
.cta h2{font-family:"Segoe UI",Roboto,Arial,"Helvetica Neue",sans-serif;font-size:clamp(58px,8vw,118px);line-height:.9;letter-spacing:-.06em;font-weight:400;margin:0}
.cta a{display:inline-block;border-bottom:1px solid #fff;padding-bottom:8px;font-size:12px;letter-spacing:.15em;text-transform:uppercase}
.footer{padding:70px 0 30px}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px}
.footer h4{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.footer p,.footer a{margin:0;line-height:1.8}
.footer-bottom{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:22px;margin-top:60px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
/* inner pages */
.page-hero{padding:160px 0 80px}
.page-hero h1{font-family:"Segoe UI",Roboto,Arial,"Helvetica Neue",sans-serif;font-size:clamp(64px,9vw,140px);line-height:.88;letter-spacing:-.06em;font-weight:400;margin:0;max-width:1200px;text-wrap:balance}
.page-hero p{max-width:700px;font-size:20px;color:var(--muted);margin:32px 0 0}
.content-section{padding:80px 0;border-top:1px solid var(--line)}
.two-col{display:grid;grid-template-columns:1fr 1.4fr;gap:80px}
.two-col h2{font-family:"Segoe UI",Roboto,Arial,"Helvetica Neue",sans-serif;font-size:clamp(40px,5vw,72px);line-height:1;font-weight:400;margin:0}
.two-col p{color:var(--muted);font-size:18px}
.process{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.step{background:var(--bg);padding:30px;min-height:220px}
.step strong{font-family:"Segoe UI",Roboto,Arial,"Helvetica Neue",sans-serif;font-size:48px;font-weight:400;color:rgba(43,41,39,.18)}
.step h3{font-size:22px;margin:30px 0 10px}
.step p{color:var(--muted)}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contact-form .full{grid-column:1/-1}
.contact-form input,.contact-form textarea,.contact-form select{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;padding:15px 0;outline:none}
.contact-form textarea{min-height:130px;resize:vertical}
.contact-form button{grid-column:1/-1;background:var(--ink);color:#fff;border:0;padding:18px;cursor:pointer}
.project-hero{padding:150px 0 50px}
.project-hero h1{font-family:"Segoe UI",Roboto,Arial,"Helvetica Neue",sans-serif;font-weight:400;font-size:clamp(58px,8vw,118px);line-height:.9;letter-spacing:-.06em;margin:0}
.project-info{display:grid;grid-template-columns:1.6fr 1fr;gap:70px;margin-top:42px}
.project-info p{font-size:19px;color:var(--muted)}
.facts{border-top:1px solid var(--line)}
.fact{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:13px 0;font-size:11px;text-transform:uppercase;letter-spacing:.12em}
.project-cover{height:82svh;min-height:600px;background-size:cover;background-position:center}
.story{padding:100px 0}
.story-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:80px}
.story h2{font-family:"Segoe UI",Roboto,Arial,"Helvetica Neue",sans-serif;font-size:clamp(42px,5vw,74px);font-weight:400;line-height:1;margin:0}
.story p{font-size:19px;color:var(--muted)}
.gallery-v7{display:grid;grid-template-columns:repeat(12,1fr);gap:22px;padding-bottom:100px}
.gallery-v7 figure{margin:0;grid-column:span 6;overflow:hidden}
.gallery-v7 figure:nth-child(3n+1){grid-column:span 12}
.gallery-v7 img{width:100%;height:100%;max-height:920px;object-fit:cover}
.next{background:var(--bg2);padding:90px 0}
.next a{display:flex;justify-content:space-between;align-items:end}
.next h3{font-family:"Segoe UI",Roboto,Arial,"Helvetica Neue",sans-serif;font-size:clamp(44px,6vw,90px);margin:10px 0 0;font-weight:400;letter-spacing:-.05em}
.reveal{opacity:0;transform:translateY(30px);transition:.8s ease}
.reveal.visible{opacity:1;transform:none}
@media(max-width:900px){
 .wrap{width:calc(100% - 32px)}.menu{display:none}.menu-toggle{display:block}
 .hero-title{font-size:clamp(52px,15vw,82px);line-height:.96}.hero-bottom{display:block}.scroll-hint{margin-top:24px}
 .manifesto-grid,.studio-grid,.cta-grid,.two-col,.project-info,.story-grid{grid-template-columns:1fr;gap:34px}
 .chapter-image{height:58svh;min-height:430px}.chapter-copy{grid-template-columns:1fr}.chapter-link{text-align:left}
 .journal-grid,.footer-grid{grid-template-columns:1fr}.process{grid-template-columns:1fr}.contact-form{grid-template-columns:1fr}.contact-form .full{grid-column:auto}
 .gallery-v7{grid-template-columns:1fr}.gallery-v7 figure,.gallery-v7 figure:nth-child(3n+1){grid-column:auto}
 .project-cover{height:58svh;min-height:430px}.footer-bottom{display:block;line-height:1.8}
}

/* V7.1 — sửa font tiếng Việt và chống tràn bố cục */
html,body{
  overflow-x:hidden;
}
body{
  font-family:"Segoe UI",Roboto,Arial,"Helvetica Neue",sans-serif;
  font-feature-settings:"kern" 1,"liga" 1;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
.hero-title,
.manifesto h2,
.featured-head h2,
.chapter-title,
.studio-grid h2,
.section-head h2,
.cta h2,
.page-hero h1,
.two-col h2,
.project-hero h1,
.story h2,
.next h3,
.article-card h3,
.loader-word{
  font-family:"Segoe UI",Roboto,Arial,"Helvetica Neue",sans-serif !important;
  font-weight:600;
  letter-spacing:-0.045em;
  word-break:normal;
  overflow-wrap:normal;
  hyphens:none;
  text-wrap:balance;
}
.page-hero{
  overflow:hidden;
}
.page-hero h1{
  font-size:clamp(54px,7.2vw,112px);
  line-height:.98;
  max-width:1250px;
}
.hero-title{
  font-size:clamp(56px,7.6vw,118px);
  line-height:.96;
  max-width:1050px;
}
.manifesto h2{
  font-size:clamp(44px,5.8vw,86px);
  line-height:1.05;
}
.chapter-title{
  font-size:clamp(44px,6vw,88px);
  line-height:1;
}
.studio-grid h2,
.section-head h2{
  font-size:clamp(44px,5.7vw,82px);
  line-height:1.02;
}
.cta h2{
  font-size:clamp(52px,7vw,100px);
  line-height:.94;
}
.project-hero h1{
  font-size:clamp(52px,7vw,102px);
  line-height:.96;
}
.two-col h2,
.story h2{
  font-size:clamp(38px,4.6vw,66px);
  line-height:1.05;
}
.next h3{
  font-size:clamp(42px,5.5vw,78px);
  line-height:1;
}
.loader-word{
  font-size:clamp(54px,9vw,126px);
}
@media(max-width:900px){
  .page-hero{padding:130px 0 58px}
  .page-hero h1{
    font-size:clamp(44px,12vw,68px);
    line-height:1.02;
    letter-spacing:-.04em;
  }
  .hero-title{
    font-size:clamp(46px,13vw,72px);
    line-height:1;
  }
  .manifesto h2{
    font-size:clamp(36px,10vw,56px);
    line-height:1.08;
  }
  .chapter-title{
    font-size:clamp(38px,11vw,58px);
    line-height:1.03;
  }
  .studio-grid h2,
  .section-head h2{
    font-size:clamp(40px,11vw,60px);
  }
  .cta h2{
    font-size:clamp(46px,12vw,70px);
    line-height:.98;
  }
  .project-hero h1{
    font-size:clamp(44px,12vw,68px);
    line-height:1;
  }
}