.home-test{background:#fff;color:var(--color-gray-100)}
.home-test h1,.home-test h2{font-family:var(--font-ma-clayton);font-weight:400;margin:0;line-height:1.03}
.home-test h2{font-size:clamp(34px,4vw,66px)}
.home-test p{line-height:1.7}
.ht-kicker{font:500 11px/1.4 var(--font-google-sans-code);letter-spacing:.16em;text-transform:uppercase}
.ht-hero{min-height:720px;display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #ddd}
.ht-hero-image{width:100%;height:100%;object-fit:cover}
.ht-hero-copy{padding:clamp(60px,8vw,150px) clamp(30px,7vw,120px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.ht-hero h1{font-size:clamp(52px,6.3vw,105px);margin:24px 0}.ht-hero-copy>p:not(.ht-kicker){max-width:650px}
.ht-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}.ht-actions--center{justify-content:center}
.ht-proof{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding:30px max(28px,7vw);background:#f8f4ec;border-bottom:1px solid #ddd}
.ht-proof article{display:flex;gap:14px}.ht-proof img{width:30px;height:30px}.ht-proof h3{font:600 14px var(--font-manrope);margin:0}.ht-proof p{font-size:11px;margin:.5em 0}
.ht-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.home-test .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.home-test details.faq-item{display:block;min-width:0}
.home-test details.faq-item summary{cursor:pointer;list-style:none}
.home-test details.faq-item summary::-webkit-details-marker{display:none}
.home-test details.faq-item[open] .faq-item-icon{transform:rotate(45deg)}
.home-test .faq-item-icon{font:400 22px/16px var(--font-manrope);transition:transform .2s ease}
.ht-faq-answer{margin:0;padding:0 24px 20px;font-size:13px;color:var(--color-slate)}
.ht-split,.ht-glaze,.ht-faq{max-width:1400px;margin:auto;padding:clamp(75px,10vw,155px) max(28px,6vw);display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center}
.ht-copy p{max-width:580px}.ht-copy h2{margin:12px 0 24px}.ht-collage{}.ht-collage img{width:100%;height:430px;object-fit:cover}.ht-collage img:last-child{align-self:end}
.ht-glaze{max-width:none;padding:6vw;display:flex;justify-content:center}
/* Khung vuông + padding/gradient mirror .brand-category (product-brand-landing.css)
- chữ neo sát đáy khung thay vì căn giữa tuyệt đối, có lớp gradient tối phía
dưới để chữ trắng luôn đọc rõ trên ảnh. */
.ht-glaze-frame{position:relative;width:min(65vw,780px);aspect-ratio:1/1;overflow:hidden;border-radius:4px}
.ht-glaze-frame>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.74)}
.ht-glaze-frame::after{position:absolute;inset:auto 0 0;height:60%;content:'';background:linear-gradient(0deg,rgba(10,12,15,.68),transparent);pointer-events:none}
.ht-glaze-frame>div{position:absolute;z-index:1;inset:auto 0 0;display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff;max-width:600px;margin:0 auto;padding:0 clamp(18px,2vw,28px) clamp(24px,3vw,40px)}
.ht-glaze h2{margin:12px 0 20px}
.ht-ecosystem,.ht-services,.ht-blog,.ht-final{padding:clamp(80px,10vw,155px) max(28px,6vw);text-align:center}.ht-ecosystem h2,.ht-services h2,.ht-blog h2,.ht-final h2{margin:14px 0 50px}
.ht-brand-grid,.ht-blog-grid{max-width:1400px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:5vw;text-align:left}.ht-brand-grid a{position:relative;color:#fff}.ht-brand-grid img{width:100%;height:480px;object-fit:cover}.ht-brand-grid span{position:absolute;left:25px;bottom:20px;font-size:24px}
.ht-services{background:#faf7f1}.ht-service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1150px;margin:auto;text-align:left}.ht-service-grid article{background:#f2ecdf;padding:30px}.ht-service-grid h3{font:600 18px var(--font-manrope)}
.ht-project{height:min(70vw,760px);position:relative;color:#fff}.ht-project>img{width:100%;height:100%;object-fit:cover;filter:brightness(.65)}.ht-project>div{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.ht-project h2{margin:15px 0 30px}
.ht-blog-grid img{width:100%;height:420px;object-fit:cover}.ht-blog-grid h3{font:500 17px var(--font-manrope);color:var(--color-gray-100)}
.ht-faq{max-width:none;background:#fbfaf7}.ht-faq>img{width:100%;height:650px;object-fit:cover}.ht-faq h2{margin:14px 0 32px}.ht-faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.ht-faq details{background:#f2ede4;padding:17px}.ht-faq summary{cursor:pointer;font-size:13px}.ht-faq details p{font-size:12px}
.ht-final{max-width:850px;margin:auto}.ht-final>p:not(.ht-kicker){max-width:650px;margin:0 auto}
@media(max-width:900px){.ht-hero,.ht-split,.ht-faq{grid-template-columns:1fr}.ht-hero{min-height:auto}.ht-hero-image{height:70vh}.ht-proof{grid-template-columns:1fr 1fr}.ht-brand-grid,.ht-blog-grid{gap:20px}.ht-service-grid{grid-template-columns:1fr}.ht-faq>img{height:450px}.home-test .faq-grid{grid-template-columns:1fr}}
@media(max-width:600px){.ht-proof,.ht-brand-grid,.ht-blog-grid,.ht-faq-grid{grid-template-columns:1fr}.ht-brand-grid img,.ht-blog-grid img{height:330px}
  /* Dưới 600px: bỏ overlay chồng chữ lên ảnh (chữ dài dễ tràn khỏi khung
  vuông) - tách ảnh vuông + khối chữ xếp chồng theo chiều dọc thay vì đè lên
  nhau. .ht-glaze-frame chuyển display:contents để 2 con của nó (img/div)
  thành item trực tiếp của flex-column .ht-glaze. */
  .ht-glaze{padding:0;flex-direction:column;align-items:stretch}
  .ht-glaze-frame{display:contents}
  .ht-glaze-frame>img{position:static;width:100%;aspect-ratio:1/1;object-fit:cover}
  .ht-glaze-frame>div{position:static;max-width:none;background:#1c1a16;padding:32px 20px}
.ht-collage img{height:300px}.ht-collage img:last-child{height:230px}}

/* Tighter vertical rhythm for the rebuilt main homepage. */
.home-test .ht-split {
  padding-block: clamp(64px, 7vw, 104px);
}

.home-test .ht-ecosystem,
.home-test .ht-services,
.home-test .ht-blog,
.home-test .ht-final {
  padding-block: clamp(64px, 7vw, 104px);
}

.home-test .ht-ecosystem h2,
.home-test .ht-services h2,
.home-test .ht-blog h2,
.home-test .ht-final h2 {
  margin-bottom: clamp(28px, 3.5vw, 44px);
}

.home-test .faq {
  padding-block: clamp(60px, 6vw, 80px);
}

.home-test .contact {
  padding-block: clamp(72px, 7vw, 100px);
}

.home-test .bespoke {
  padding-block: clamp(60px, 6vw, 80px);
}

@media (max-width: 768px) {
  .home-test .ht-split,
  .home-test .ht-ecosystem,
  .home-test .ht-services,
  .home-test .ht-blog,
  .home-test .ht-final,
  .home-test .faq,
  .home-test .contact,
  .home-test .bespoke {
    padding-block: 52px;
  }
}

/* Typography trial — scoped to Home only. See docs/TYPOGRAPHY-GUIDELINES.md. */
.home-test {
  --home-display-xl: clamp(52px, 6.7vw, 96px);
  --home-display-lg: clamp(46px, 6.5vw, 96px);
  --home-heading-sm: clamp(34px, 4vw, 56px);
  --home-subhead: clamp(18px, 1.6vw, 24px);
  --home-body-lg: 20px;
  --home-body: 16px;
  --home-information: clamp(14px, 1.1vw, 16px);
  --home-caption: 16px;
}

.home-test .hero-headline {
  font-family: var(--font-ma-clayton);
  font-size: var(--home-display-xl);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.025em;
}

.home-test .ht-glaze h2,
.home-test .ht-ecosystem > h2,
.home-test .ht-services > h2,
.home-test .ht-blog > h2 {
  font-family: var(--font-manrope);
  font-size: var(--home-heading-sm);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.025em;
}

.home-test .ht-copy h2,
.home-test .section-heading,
.home-test .bespoke-header .section-heading,
.home-test .faq .section-heading {
  font-family: var(--font-manrope);
  font-size: var(--home-heading-sm);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.025em;
}

.home-test h3,
.home-test .feature-title {
  font-family: var(--font-manrope);
  font-size: var(--home-subhead);
  font-weight: 600;
  line-height: 1.35;
}

.home-test p,
.home-test .section-subtext,
.home-test .bespoke-lede {
  font-family: var(--font-manrope);
  font-size: var(--home-body);
  font-weight: 400;
  line-height: 1.7;
}

.home-test .hero .section-subtext {
  max-width: 680px;
  font-size: var(--home-body-lg);
  font-weight: 500;
  line-height: 1.55;
}

.home-test .subtext-row .section-subtext,
.home-test .ht-copy > p:not(.ht-kicker),
.home-test .ht-glaze-frame > div > p:not(.ht-kicker),
.home-test .bespoke-lede {
  font-family: var(--font-manrope);
  font-size: var(--home-body-lg);
  font-weight: 500;
  line-height: 1.55;
}

.home-test .ht-glaze .section-subtext {
  max-width: 720px;
  margin-inline: auto;
  color: inherit;
}

.home-test .eyebrow,
.home-test .ht-kicker,
.home-test .faq-tag {
  font-family: var(--font-google-sans-code);
  font-size: var(--home-caption);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.home-test .faq-question {
  font-family: var(--font-manrope);
  font-size: var(--home-body);
  font-weight: 500;
  line-height: 1.5;
}

.home-test a,
.home-test a:hover,
.home-test a:focus-visible {
  text-decoration: none;
}

.home-test .ht-copy > p:not(.ht-kicker),
.home-test .faq-header .section-subtext,
.home-test .bespoke-lede {
  text-align: justify;
  text-justify: inter-word;
}

.home-test .ht-brand-grid span {
  font-family: var(--font-manrope);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.02em;
  text-decoration: none;
}

.home-test .ht-blog-grid a,
.home-test .ht-blog-grid a:visited,
.home-test .ht-blog-grid a:hover,
.home-test .ht-blog-grid a:focus-visible {
  color: var(--color-gray-100);
  text-decoration: none;
}

.home-test .ht-blog-card-title {
  display: block;
  margin: 18px 0 0;
  font-family: var(--font-manrope);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
}

.home-test .btn,
.home-test button {
  font-family: var(--font-manrope);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .home-test .ht-brand-grid span {
    font-size: 24px;
    line-height: 1.3;
  }

  .home-test .ht-blog-card-title { font-size: 16px; }
}

@media (max-width: 768px) {
  .home-test .hero-headline { line-height: 1; }
  .home-test .ht-glaze h2,
  .home-test .ht-ecosystem > h2,
  .home-test .ht-services > h2,
  .home-test .ht-blog > h2 { line-height: 1.08; }

  .home-test .eyebrow,
  .home-test .ht-kicker,
  .home-test .faq-tag { font-size: 14px; }

  .home-test .subtext-row .section-subtext,
  .home-test .ht-copy > p:not(.ht-kicker),
  .home-test .ht-glaze-frame > div > p:not(.ht-kicker),
  .home-test .bespoke-lede { font-size: 18px; }
}