/* Ferry Archi: bố cục trang chủ và phân loại dự án. */
:root{--paper:#fafafa;--ink:#242424;--muted:#666;--line:#dedede;--accent:#282828;--sand:#ccc;--surface:#f0f0f0}
.topbar{padding-block:20px;gap:24px}.nav{font-size:14px}.button{background:#282828;border-color:#282828;color:#fff;min-height:48px;padding:12px 22px}.text-link{font-size:15px}.eyebrow{color:var(--muted)}
.home .hero{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:center;padding:40px 0 64px}
.home .hero-copy{text-align:left}.home .hero h1{font-size:clamp(36px,3.6vw,52px);line-height:1.35;margin:20px 0 24px;max-width:520px}.home .hero .hero-copy>p{font-size:17px;line-height:1.9;max-width:480px;margin-inline:0}.home .hero .eyebrow{font-size:14px}.home .hero-meta{justify-content:flex-start;gap:10px 22px;margin-top:28px;font-size:13px}.home .hero-actions{justify-content:flex-start;gap:18px;margin-top:30px}.home .hero-actions .text-link{margin-top:0}
.home .hero-gallery{min-width:0}.home .slideshow,.home .hero-poster{aspect-ratio:1/1.05;overflow:hidden;background:#e9e9e9}.home .hero-poster img,.home .slide img{width:100%;height:100%;object-fit:cover;object-position:center}.home .gallery-caption{font-size:12px;line-height:1.7;margin-top:12px;max-width:none;color:var(--muted)}
.home .section{padding-block:80px}.home .section-head{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:72px}.home .section-head>:first-child,.home .section-head>:first-child h2{text-align:left;margin-inline:0}.home .section h2{font-size:36px;line-height:1.5}.home .section-intro{padding-top:30px}.home .eyebrow{font-size:15px;font-weight:500}
.home .featured-projects{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:40px;margin-top:40px}.home .featured-projects .project-card:first-child{grid-row:span 2}.home .featured-projects .project-card:only-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:0 56px;align-content:center}.home .featured-projects .project-card:only-child>a{grid-row:1/4}.home .featured-projects .project-card:only-child .post-meta{align-self:end;margin:0}.home .featured-projects .project-card img{aspect-ratio:4/3;object-fit:cover}.home .featured-projects .project-card h3{font-size:28px;margin:16px 0}.home .featured-projects .project-card p{font-size:14px}.home .featured-projects .project-card:only-child h3{align-self:center}
.home .studio-section{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);align-items:center;gap:80px}.studio-visual img{display:block;width:100%;height:auto;max-height:580px;object-fit:cover}.studio-visual>p{font-size:12px;line-height:1.7;color:var(--muted);margin-top:10px}.home .studio-copy h2{margin-bottom:24px}.studio-copy>p{color:var(--muted);margin-top:16px}.studio-copy .text-link{margin-top:24px}
.home .services{border:0;gap:24px}.home .service,.home .service+.service{border:0;padding:32px 26px;background:#efefef;display:flex;flex-direction:column;align-items:flex-start}.home .service:nth-child(2){background:#e5e5e5}.home .service:nth-child(3){background:#dedede;color:var(--ink)}.home .service-no,.home .service h3{text-align:left}.home .service-no{font-size:12px;letter-spacing:.08em}.home .service h3{font-size:23px;margin:36px 0 16px}.home .service p{font-size:15px;margin-bottom:24px}.home .service .text-link{margin-top:auto;font-size:14px}.home .service:nth-child(3) p,.home .service:nth-child(3) .service-no{color:var(--muted)}
.home .approach{padding:80px 0;background:#242424}.home .approach h2,.home .approach .eyebrow{text-align:left;margin-inline:0}.home .principle span{color:#ccc}.home .approach-grid{gap:80px}.home .approach h2{font-size:36px}
.home #bai-viet .post-card img{aspect-ratio:3/2}.home #bai-viet .post-card h3{font-size:23px}.home #bai-viet .post-card p{font-size:15px}.home #bai-viet .post-grid{gap:40px}
.consultation-banner{background:#eaeaea;padding:64px 0}.consultation-banner>.wrap{display:flex;justify-content:space-between;align-items:center;gap:60px}.consultation-banner h2{font-size:36px;line-height:1.5;margin:16px 0}.consultation-banner p{color:var(--muted);max-width:560px}.consultation-banner .button{flex-shrink:0}
.project-filters{margin:32px 0;border-block:1px solid var(--line);padding:20px 0;display:grid;gap:20px}.filter-row{display:flex;gap:24px;align-items:baseline}.filter-row>span{width:150px;flex-shrink:0;font-size:13px;color:var(--muted)}.filter-row nav{display:flex;gap:10px;flex-wrap:wrap}.filter-row a{padding:6px 14px;border:1px solid transparent;font-size:14px}.filter-row a[aria-current]{border-color:#282828;background:#282828;color:#fff}.filter-row a:hover{text-decoration:underline;text-underline-offset:4px}.empty-projects{padding:24px 0}
@media(max-width:1000px){.home .hero{gap:32px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.home .hero h1{font-size:36px}.home .studio-section{gap:40px}.home .featured-projects .project-card:only-child{gap:0 32px}.home .section-head{gap:40px}.home .service,.home .service+.service{padding:24px 20px}.home .service h3{font-size:20px}.home .approach-grid{gap:40px}}
@media(max-width:760px){.topbar{flex-direction:column;align-items:flex-start;gap:18px}.nav{gap:12px 20px;font-size:13px}.home .hero{grid-template-columns:minmax(0,1fr);padding:32px 0 44px;gap:32px}.home .hero h1{font-size:36px;max-width:500px}.home .hero .hero-copy>p{font-size:16px}.home .hero-gallery{width:100%}.home .slideshow,.home .hero-poster{aspect-ratio:4/3}.home .hero-actions{gap:16px;flex-wrap:wrap}.home .hero .eyebrow{font-size:13px}.home .hero-meta{font-size:12px;gap:10px 20px}.home .section{padding-block:48px}.home .section-head,.home .studio-section{grid-template-columns:minmax(0,1fr);gap:24px}.home .section h2,.home .approach h2,.consultation-banner h2{font-size:28px}.home .section-intro{padding-top:0}.home .featured-projects,.home .featured-projects .project-card:only-child{display:block}.home .featured-projects .project-card{margin-top:28px}.home .featured-projects .project-card .post-meta{margin-top:18px}.home .featured-projects .project-card h3{font-size:24px}.home .services{grid-template-columns:minmax(0,1fr);gap:16px}.home .service,.home .service+.service{padding:28px 24px}.home .service h3{font-size:23px;margin-top:24px}.home .approach{padding:48px 0}.home .approach-grid{grid-template-columns:minmax(0,1fr);gap:28px}.consultation-banner{padding:48px 0}.consultation-banner>.wrap{display:block}.consultation-banner .button{margin-top:28px}.filter-row{display:block}.filter-row>span{display:block;width:auto;margin-bottom:10px}.filter-row nav{gap:6px}.filter-row a{padding:6px 10px}.studio-visual img{max-height:440px}}

/* Trang chủ: tiêu đề cân đối và nền phân vùng thay đường kẻ. */
.home > .wrap {
  position: relative;
  isolation: isolate;
  --section-background: #ffffff;
}
.home > .wrap::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--section-background);
  z-index: -1;
  pointer-events: none;
}
.home > .project-section { --section-background: #eeeeee; }
.home > #services { --section-background: #f2f2f2; }
.home > .section { border-top: 0; }
.home .hero-copy,
.home .section-head > :first-child,
.home .section-head > :first-child h2,
.home .studio-copy h2,
.home .approach h2,
.home .approach .eyebrow {
  text-align: center;
}
.home .hero h1 {
  font-size: 36px;
  line-height: 1.5;
  margin-inline: auto;
}
.home .section-head > :first-child h2,
.home .studio-copy h2,
.home .approach h2 {
  margin-inline: auto;
}
.home .eyebrow,
.home .hero .eyebrow {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
}
.home .hero .hero-copy > p { margin-inline: auto; }
.home .hero-meta,
.home .hero-actions { justify-content: center; }
.home .consultation-banner > .wrap > :first-child h2 {
  text-align: center;
}
@media (max-width: 760px) {
  .home .hero h1 { font-size: 28px; }
  .home .eyebrow,
  .home .hero .eyebrow { font-size: 18px; }
}

.home .hero-actions .button{display:inline-flex;align-items:center;justify-content:center;font-size:14px;line-height:1.6;min-height:48px}.home .service .button{margin-top:auto;font-size:14px;line-height:1.6;display:inline-flex;align-items:center;justify-content:center}


/* Liên hệ: những băn khoăn của khách và lời mời trao đổi. */
.home #contact .contact-intro{min-width:0}
.home #contact .contact-concerns{list-style:none;display:grid;gap:16px;margin:28px 0 0;padding:0;text-align:left}
.home #contact .contact-concerns li{position:relative;padding-left:20px;font-size:16px;line-height:1.75}
.home #contact .contact-concerns li::before{content:"";position:absolute;left:0;top:.7em;width:5px;height:5px;border-radius:50%;background:var(--ink)}
.home #contact .contact-reassurance{margin:24px 0 0;color:var(--muted);font-size:15px;line-height:1.85;text-align:left;max-width:none}
.home #contact .contact-cta{display:inline-block;margin-top:18px;text-align:left;font-weight:500;line-height:1.7}
@media(max-width:760px){
  .home #contact .contact-concerns{margin-top:24px;gap:14px}
  .home #contact .contact-note{padding-top:0}
}

/* Logo: biểu tượng bên trái, tên và ba dịch vụ xếp thành hai hàng bên phải. */
.topbar{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:32px;padding-block:24px}
.topbar .brand-lockup{display:grid;grid-template-columns:104px 300px;grid-template-areas:"symbol wordmark" "symbol services";align-items:center;column-gap:20px;row-gap:8px;min-width:0;white-space:normal;flex-shrink:0}
.topbar .brand-symbol{grid-area:symbol;display:block;width:104px;height:auto;align-self:center}
.topbar .brand-wordmark{grid-area:wordmark;display:block;width:300px;height:auto;max-width:100%;align-self:end}
.topbar .brand-services{grid-area:services;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:6px;margin:0;font-size:16px;font-weight:500;line-height:1.5;color:var(--ink);white-space:nowrap;align-self:start}
.topbar .brand-services span{display:inline-flex;align-items:center;white-space:nowrap}
.topbar .brand-services span+span::before{content:"·";margin-right:8px;color:var(--muted)}
.topbar .nav{justify-content:flex-end;gap:12px 24px;min-width:0}
@media(max-width:1100px){
  .topbar{flex-direction:column;align-items:flex-start;gap:20px}
  .topbar .nav{width:100%;justify-content:flex-end}
}
@media(max-width:760px){
  .topbar{gap:22px;padding-block:20px}
  .topbar .brand-lockup{width:100%;grid-template-columns:84px minmax(0,1fr);column-gap:12px;row-gap:6px;max-width:460px}
  .topbar .brand-symbol{width:84px}
  .topbar .brand-wordmark{width:100%;max-width:none}
  .topbar .brand-services{font-size:clamp(10px,3vw,14px);line-height:1.5;gap:4px}
  .topbar .brand-services span+span::before{margin-right:5px}
  .topbar .nav{justify-content:space-between;gap:10px 12px;font-size:13px}
}
@media(max-width:360px){
  .topbar .brand-lockup{grid-template-columns:72px minmax(0,1fr);column-gap:8px}
  .topbar .brand-symbol{width:72px}
  .topbar .brand-services{font-size:10px;gap:2px}
  .topbar .nav{justify-content:center;gap:8px 16px;font-size:12px}
}

/* Chữ bám hai mép tên thương hiệu; chấm nằm giữa khoảng trống thực tế. */
.topbar .brand-services{
  display:grid;
  grid-template-columns:max-content minmax(0,1fr) max-content minmax(0,1fr) max-content;
  align-items:center;
  justify-content:normal;
  column-gap:0;
  padding-inline:2px;
}
.topbar .brand-services span{display:contents}
.topbar .brand-services span+span::before{
  content:"";
  position:static;
  width:5px;
  height:5px;
  margin:0;
  border-radius:50%;
  background:currentColor;
  color:inherit;
  justify-self:center;
  align-self:center;
  transform:none;
}
@media(max-width:760px){
  .topbar .brand-services{gap:0;padding-inline:2px}
  .topbar .brand-services span+span::before{width:4px;height:4px;margin:0}
}