.hhpsf-architecture,.hhpsf-related-section{--hhpsf-navy:#082b49;--hhpsf-blue:#0d5d91;--hhpsf-gold:#c9a04f;--hhpsf-border:#dbe4ea;color:#183047}.hhpsf-architecture *,.hhpsf-related-section *{box-sizing:border-box}.hhpsf-architecture{background:#fff}.hhpsf-heading,.hhpsf-related-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:24px}.hhpsf-heading>div,.hhpsf-related-head>div{position:relative}.hhpsf-number{display:inline-grid;place-items:center;min-width:38px;height:38px;margin-bottom:8px;border-radius:50%;background:var(--hhpsf-navy);color:#fff;font-size:13px;font-weight:800}.hhpsf-kicker{margin:0 0 5px;color:var(--hhpsf-gold);font-size:11px;font-weight:800;letter-spacing:.13em}.hhpsf-heading h2,.hhpsf-related-head h2{margin:0;color:var(--hhpsf-navy);font-size:30px;line-height:1.2}.hhpsf-heading>p{max-width:460px;margin:0;color:#64737f;line-height:1.6}.hhpsf-gallery{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:220px 220px;gap:12px}.hhpsf-gallery figure{position:relative;overflow:hidden;margin:0;border-radius:6px;background:#eef3f6}.hhpsf-gallery__main{grid-row:1/3}.hhpsf-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}.hhpsf-gallery figure:hover img{transform:scale(1.035)}.hhpsf-tabs{display:flex;align-items:center;gap:5px;overflow-x:auto;margin:14px 0 10px;padding:0 0 4px;scrollbar-width:thin}.hhpsf-tabs button{flex:0 0 auto;margin:0;padding:8px 14px;border:1px solid #dce5eb;border-radius:18px;background:#fff;color:#536571;font:700 11px/1 inherit;cursor:pointer}.hhpsf-tabs button.is-active{border-color:var(--hhpsf-blue);background:var(--hhpsf-blue);color:#fff}.hhpsf-thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.hhpsf-thumbs button{height:78px;margin:0;padding:2px;border:2px solid transparent;border-radius:5px;background:#fff;overflow:hidden;cursor:pointer}.hhpsf-thumbs button.is-active{border-color:var(--hhpsf-gold)}.hhpsf-thumbs img{width:100%;height:100%;object-fit:cover}.hhpsf-no-images .hhpsf-gallery,.hhpsf-no-images .hhpsf-tabs,.hhpsf-no-images .hhpsf-thumbs{display:none}.hhpsf-related-section{background:#f3f7fa}.hhpsf-related-head>a{display:inline-flex;align-items:center;gap:8px;color:var(--hhpsf-navy);font-size:13px;font-weight:800}.hhpsf-related-head>a span{color:var(--hhpsf-gold);font-size:18px}.hhpsf-related-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.hhpsf-project-card{overflow:hidden;border:1px solid var(--hhpsf-border);border-radius:7px;background:#fff;box-shadow:0 7px 22px rgba(8,43,73,.06);transition:transform .3s ease,box-shadow .3s ease}.hhpsf-project-card:hover{transform:translateY(-5px);box-shadow:0 14px 30px rgba(8,43,73,.12)}.hhpsf-project-card__image{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#eaf0f3}.hhpsf-project-card__image img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.hhpsf-project-card:hover img{transform:scale(1.045)}.hhpsf-project-card__image>span{position:absolute;bottom:10px;left:10px;padding:5px 8px;border-radius:3px;background:rgba(8,43,73,.9);color:#fff;font-size:9px;font-weight:800;text-transform:uppercase}.hhpsf-project-card__body{padding:15px}.hhpsf-project-card h3{min-height:45px;margin:0 0 10px;font-size:17px;line-height:1.32}.hhpsf-project-card h3 a{color:var(--hhpsf-navy)}.hhpsf-project-card__link{display:inline-flex;align-items:center;gap:7px;color:var(--hhpsf-blue);font-size:12px;font-weight:800}.hhpsf-project-card__link span{color:var(--hhpsf-gold);font-size:16px}
@media(max-width:900px){.hhpsf-gallery{grid-template-rows:180px 180px}.hhpsf-related-grid{grid-template-columns:repeat(2,1fr)}.hhpsf-heading{align-items:flex-start;flex-direction:column}.hhpsf-heading>p{max-width:none}}
@media(max-width:600px){.hhpsf-heading,.hhpsf-related-head{align-items:flex-start;flex-direction:column;gap:12px}.hhpsf-heading h2,.hhpsf-related-head h2{font-size:24px}.hhpsf-gallery{grid-template-columns:1fr 1fr;grid-template-rows:230px 120px}.hhpsf-gallery__main{grid-column:1/3;grid-row:auto}.hhpsf-thumbs{display:flex;overflow-x:auto}.hhpsf-thumbs button{flex:0 0 92px;height:62px}.hhpsf-related-grid{grid-template-columns:1fr}.hhpsf-project-card{display:grid;grid-template-columns:125px 1fr}.hhpsf-project-card__image{height:100%;aspect-ratio:auto}.hhpsf-project-card h3{min-height:0;font-size:15px}}
@media(prefers-reduced-motion:reduce){.hhpsf-gallery img,.hhpsf-project-card,.hhpsf-project-card img{transition:none!important;transform:none!important}}

/* V1.0.1: thu gọn khoảng trắng giữa các section và bỏ nhịp dành cho số thứ tự. */
.hhv2 #tong-quan{padding-bottom:28px!important}
.hhv2 .hhpsf-architecture{padding-top:24px!important;padding-bottom:48px!important}
.hhv2 .hhpsf-related-section{padding-top:46px!important;padding-bottom:50px!important}
.hhpsf-heading,.hhpsf-related-head{margin-top:0!important}
.hhpsf-kicker{padding-top:0!important}
@media(max-width:600px){.hhv2 #tong-quan{padding-bottom:20px!important}.hhv2 .hhpsf-architecture{padding-top:20px!important;padding-bottom:36px!important}.hhv2 .hhpsf-related-section{padding-top:34px!important;padding-bottom:38px!important}}

/* V1.0.2: thu gọn đồng bộ khoảng trắng trên toàn bộ trang Case Study. */
.hhv2 .hhv2-sec,
.hhv2 .hhpsf-architecture,
.hhv2 .hhpsf-related-section{
  padding-top:32px!important;
  padding-bottom:32px!important;
}
.hhv2 .hhv2-sec h2,
.hhv2 .hhpsf-heading h2,
.hhv2 .hhpsf-related-head h2{margin-bottom:16px!important}
.hhv2 .hhv2-intro{margin-top:-7px!important;margin-bottom:16px!important}
.hhv2 .hhv2-review{margin-top:15px!important}
.hhv2 .hhv2-cta{padding-top:22px!important;padding-bottom:22px!important}
@media(max-width:849px){.hhv2 .hhv2-sec,.hhv2 .hhpsf-architecture,.hhv2 .hhpsf-related-section{padding-top:27px!important;padding-bottom:27px!important}.hhv2 .hhv2-sec h2,.hhv2 .hhpsf-heading h2,.hhv2 .hhpsf-related-head h2{margin-bottom:14px!important}}
@media(max-width:549px){.hhv2 .hhv2-sec,.hhv2 .hhpsf-architecture,.hhv2 .hhpsf-related-section{padding-top:22px!important;padding-bottom:22px!important}.hhv2 .hhv2-sec h2,.hhv2 .hhpsf-heading h2,.hhv2 .hhpsf-related-head h2{margin-bottom:12px!important}.hhv2 .hhv2-intro{margin-bottom:12px!important}.hhv2 .hhv2-cta{padding-top:18px!important;padding-bottom:18px!important}}