/* Shared project and news detail page, aligned with the Gia Huy theme. */
.gh-project-detail { overflow: hidden; background: #fff; color: var(--gh-text); }
.gh-project-detail h1, .gh-project-detail h2, .gh-project-detail h3, .gh-project-detail p, .gh-project-detail li, .gh-project-detail dt, .gh-project-detail dd { font-family: var(--sans); }

.gh-project-detail__crumbs { border-bottom: 1px solid var(--gh-line); background: #fff; color: var(--gh-muted); font-size: .76rem; }
.gh-project-detail__crumbs .gh-shell { display: flex; min-height: 48px; align-items: center; gap: 9px; overflow: hidden; white-space: nowrap; }
.gh-project-detail__crumbs a { color: var(--gh-text); text-decoration: none; }
.gh-project-detail__crumbs a:hover { color: #c79200; }
.gh-project-detail__crumbs span[aria-current="page"] { overflow: hidden; text-overflow: ellipsis; }
.gh-project-detail__eyebrow { margin: 0 0 10px; color: #c79200; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }

.gh-project-detail-hero { position: relative; overflow: hidden; background: var(--gh-navy); color: #fff; }
.gh-project-detail-hero::after { position: absolute; top: -280px; right: -160px; width: 620px; height: 620px; border: 1px solid rgb(247 185 0 / 16%); border-radius: 50%; box-shadow: 0 0 0 90px rgb(247 185 0 / 3%), 0 0 0 180px rgb(247 185 0 / 2%); content: ''; pointer-events: none; }
.gh-project-detail-hero__inner { position: relative; z-index: 1; padding-block: clamp(46px, 5vw, 68px); }
.gh-project-detail-hero__content { max-width: none; }
.gh-project-detail-hero__back { display: inline-flex; min-height: 34px; padding: 0 14px; margin-bottom: 26px; align-items: center; gap: 9px; border: 1px solid rgb(255 255 255 / 22%); border-radius: 999px; color: #d6d6d6; font-size: .7rem; font-weight: 600; text-decoration: none; }
.gh-project-detail-hero__back span { color: var(--gh-gold); font-size: .95rem; transition: transform .2s ease; }
.gh-project-detail-hero__back:hover { border-color: rgb(247 185 0 / 55%); color: #fff; }
.gh-project-detail-hero__back:hover span { transform: translateX(-3px); }
.gh-project-detail-hero__body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(340px, .8fr); gap: clamp(50px, 7vw, 108px); align-items: end; }
.gh-project-detail-hero .gh-project-detail__eyebrow { color: var(--gh-gold); }
.gh-project-detail-hero h1 { max-width: 760px; margin: 0; color: #fff; font-size: clamp(2.15rem, 3.35vw, 3.25rem); font-weight: 700; letter-spacing: -.05em; line-height: 1.08; text-wrap: balance; }
.gh-project-detail-hero__summary { max-width: 540px; margin: 0; color: #d2d2d2; font-size: .88rem; line-height: 1.72; }
.gh-project-detail-hero__meta { display: flex; max-width: 540px; padding-top: 19px; margin: 22px 0 0; border-top: 1px solid rgb(255 255 255 / 18%); }
.gh-project-detail-hero__meta div { min-width: 160px; padding-right: 26px; }
.gh-project-detail-hero__meta div + div { padding-left: 26px; border-left: 1px solid rgb(255 255 255 / 18%); }
.gh-project-detail-hero__meta dt { color: #aaa; font-size: .6rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.gh-project-detail-hero__meta dd { margin: 7px 0 0; color: #fff; font-size: .75rem; font-weight: 700; line-height: 1.45; }

.gh-project-detail-overview { padding: 48px 0 clamp(72px, 7vw, 96px); background: #fff; }
.gh-project-detail-overview__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0 clamp(44px, 6vw, 82px); align-items: start; }
.gh-project-detail-overview__main { width: 100%; }
.gh-project-detail__article-header { width: 100%; padding-bottom: 28px; margin: 0 0 38px; grid-column: 1 / -1; border-bottom: 1px solid #e3e9ef; }
.gh-project-detail__article-header h1 { max-width: 1080px; margin: 0; color: var(--gh-navy); font-size: clamp(2rem, 2.6vw, 2.55rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.18; text-wrap: balance; }
.gh-project-detail__section-head { display: flex; padding-bottom: 28px; margin-bottom: 34px; align-items: flex-end; justify-content: space-between; gap: 24px; border-bottom: 1px solid #e3e9ef; }
.gh-project-detail__section-head h2 { max-width: 680px; margin: 0; color: var(--gh-navy); font-size: clamp(1.95rem, 3vw, 2.65rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.14; text-wrap: balance; }
.gh-project-detail__section-head > span { flex: 0 0 auto; padding-bottom: 4px; color: #777; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.gh-project-detail__copy { width: 100%; color: var(--gh-muted); font-size: 1rem; line-height: 1.88; }
.gh-project-detail__copy > p:first-child { color: inherit !important; font-size: inherit !important; }
.gh-project-detail__copy p, .gh-project-detail__copy div, .gh-project-detail__copy span, .gh-project-detail__copy a, .gh-project-detail__copy li, .gh-project-detail__copy td, .gh-project-detail__copy th, .gh-project-detail__copy strong, .gh-project-detail__copy b, .gh-project-detail__copy em, .gh-project-detail__copy i { color: inherit !important; font-family: var(--sans) !important; font-size: inherit !important; line-height: inherit !important; }
.gh-project-detail__copy p, .gh-project-detail__copy div, .gh-project-detail__copy li, .gh-project-detail__copy td, .gh-project-detail__copy th { text-align: left !important; }
.gh-project-detail__copy p { margin: 0 0 18px !important; }
.gh-project-detail__copy strong, .gh-project-detail__copy b { color: var(--gh-navy) !important; font-weight: 700; }
.gh-project-detail__copy h2, .gh-project-detail__copy h3, .gh-project-detail__copy h4, .gh-project-detail__copy h5, .gh-project-detail__copy h6 { padding: 0 !important; margin: 40px 0 13px !important; color: var(--gh-navy) !important; font-family: var(--sans) !important; font-weight: 700 !important; letter-spacing: -.025em !important; line-height: 1.35 !important; text-align: left !important; text-wrap: balance; }
.gh-project-detail__copy h2 { font-size: 1.65rem !important; }
.gh-project-detail__copy h3 { font-size: 1.25rem !important; }
.gh-project-detail__copy h4 { font-size: 1.1rem !important; }
.gh-project-detail__copy h5, .gh-project-detail__copy h6 { font-size: 1rem !important; }
.gh-project-detail__copy h2.afcbc-sapo { margin: 0 0 18px !important; color: inherit !important; font-size: inherit !important; font-weight: 400 !important; letter-spacing: normal !important; line-height: inherit !important; text-wrap: pretty; }
.gh-project-detail__copy img { display: block; width: 100%; height: auto; margin: 30px 0; border-radius: 16px; box-shadow: 0 10px 30px rgb(63 63 63 / 10%); }
.gh-project-detail__copy figure { max-width: 100%; margin: 30px 0; }
.gh-project-detail__copy figcaption { margin-top: 9px; color: #777; font-size: .7rem; text-align: center; }

.gh-project-detail-aside { position: sticky; top: 105px; display: block; margin: 0; }
.gh-project-detail-aside__card { padding: 28px; border: 1px solid #e3e9ef; border-radius: 18px; background: #f5f8fc; }
.gh-project-detail-aside__card h2 { margin: 0; color: var(--gh-navy); font-size: 1.3rem; letter-spacing: -.025em; line-height: 1.35; }
.gh-project-detail-aside__card ul { display: grid; padding: 0; margin: 23px 0 0; grid-template-columns: 1fr; list-style: none; }
.gh-project-detail-aside__card li { display: grid; min-width: 0; padding: 0; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; }
.gh-project-detail-aside__card li + li { padding-top: 16px; margin-top: 16px; border-top: 1px solid #e0e6eb; }
.gh-project-detail-aside__card li > span { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; background: #fff3c9; color: #bb8c00; }
.gh-project-detail-aside__card .gh-icon { width: 19px; height: 19px; }
.gh-project-detail-aside__card strong, .gh-project-detail-aside__card small { display: block; }
.gh-project-detail-aside__card strong { color: var(--gh-navy); font-size: .73rem; line-height: 1.35; }
.gh-project-detail-aside__card small { margin-top: 4px; color: var(--gh-muted); font-size: .63rem; line-height: 1.45; }
.gh-project-detail-aside__contact { display: flex; padding: 28px; margin: 16px 0 0; justify-content: center; flex-direction: column; border-radius: 18px; background: var(--gh-navy); color: #fff; }
.gh-project-detail-aside__contact > p { margin: 0 0 7px; color: var(--gh-gold); font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.gh-project-detail-aside__contact h2 { margin: 0 0 20px; color: #fff; font-size: 1.2rem; letter-spacing: -.025em; line-height: 1.35; }
.gh-project-detail-aside__contact .gh-project-detail__button { width: 100%; }
.gh-project-detail-aside__phone { display: flex; padding-top: 17px; margin-top: 17px; align-items: center; justify-content: space-between; border-top: 1px solid rgb(255 255 255 / 16%); color: #fff; text-decoration: none; }
.gh-project-detail-aside__phone small { color: #aaa; font-size: .63rem; }
.gh-project-detail-aside__phone strong { color: #fff; font-size: .84rem; }
.gh-project-detail__button { display: inline-flex; min-height: 50px; padding: 0 24px; align-items: center; justify-content: center; gap: 14px; border-radius: 999px; background: var(--gh-gold); box-shadow: 0 12px 28px rgb(247 185 0 / 22%); color: var(--gh-navy); font-size: .76rem; font-weight: 700; text-decoration: none; transition: background .25s ease, transform .25s ease; }
.gh-project-detail__button:hover { background: #ffd13a; color: var(--gh-navy); transform: translateY(-2px); }

.gh-project-detail-gallery { padding: clamp(76px, 9vw, 112px) 0; background: #f5f8fc; }
.gh-project-detail-gallery--inline { padding: 34px 0 0; margin-top: 42px; border-top: 1px solid #e3e9ef; background: transparent; }
.gh-project-detail-gallery--inline .gh-project-detail-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.gh-project-detail-gallery--inline .gh-project-detail__section-head { margin-bottom: 28px; }
.gh-project-detail__section-head--gallery > p { max-width: 410px; margin: 0 0 5px; color: var(--gh-muted); font-size: .8rem; line-height: 1.65; text-align: right; }
.gh-project-detail-gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.gh-project-detail-gallery figure { position: relative; aspect-ratio: 4 / 3; margin: 0; overflow: hidden; border-radius: 18px; background: #dce2e6; box-shadow: 0 5px 18px rgb(63 63 63 / 8%); }
.gh-project-detail-gallery figure::after { position: absolute; inset: 58% 0 0; background: linear-gradient(transparent, rgb(25 25 25 / 46%)); content: ''; pointer-events: none; }
.gh-project-detail-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .5s ease; }
.gh-project-detail-gallery figure:hover img { transform: scale(1.035); }
.gh-project-detail-gallery figcaption { position: absolute; right: 15px; bottom: 13px; left: 15px; z-index: 2; color: #fff; text-align: right; }
.gh-project-detail-gallery figcaption small { font-size: .61rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.gh-project-detail-related { padding: clamp(76px, 9vw, 112px) 0; background: #fff; }
.gh-project-detail-related .gh-project-detail__section-head > a { padding-bottom: 5px; color: var(--gh-navy); font-size: .73rem; font-weight: 700; text-decoration: none; }
.gh-project-detail-related .gh-project-detail__section-head > a span { margin-left: 8px; color: #c79200; }
.gh-project-detail-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.gh-project-detail-card { overflow: hidden; border: 1px solid #e3e9ef; border-radius: 18px; background: #fff; box-shadow: 0 2px 4px rgb(63 63 63 / 3%); }
.gh-project-detail-card__media { position: relative; display: block; overflow: hidden; background: #dce2e6; }
.gh-project-detail-card__media > img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .45s ease; }
.gh-project-detail-card:hover .gh-project-detail-card__media > img { transform: scale(1.035); }
.gh-project-detail-card__view { position: absolute; right: 16px; bottom: 15px; color: #fff; font-size: .68rem; font-weight: 700; text-shadow: 0 1px 6px rgb(0 0 0 / 35%); }
.gh-project-detail-card__view b { margin-left: 7px; color: var(--gh-gold); }
.gh-project-detail-card > div { padding: 22px 23px 25px; }
.gh-project-detail-card p { margin: 0 0 8px; color: #c79200; font-size: .62rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.gh-project-detail-card h3 { margin: 0; color: var(--gh-navy); font-size: 1rem; line-height: 1.48; }
.gh-project-detail-card h3 a { color: inherit; text-decoration: none; }
.gh-project-detail-card h3 a:hover { color: #c79200; }

.gh-project-detail-cta { padding: 0 0 82px; background: #fff; }
.gh-project-detail-cta__inner { display: flex; padding: 52px 58px; align-items: center; justify-content: space-between; gap: 42px; border-radius: 26px; background: var(--gh-navy); box-shadow: 0 24px 70px rgb(63 63 63 / 18%); }
.gh-project-detail-cta .gh-project-detail__eyebrow { color: var(--gh-gold); }
.gh-project-detail-cta h2 { max-width: 700px; margin: 0; color: #fff; font-size: clamp(1.8rem, 3vw, 2.7rem); letter-spacing: -.035em; line-height: 1.2; text-wrap: balance; }
.gh-project-detail-cta .gh-project-detail__button { flex: 0 0 auto; }

@media (max-width: 1000px) {
	.gh-project-detail-hero__body { grid-template-columns: minmax(0, 1fr) minmax(310px, .75fr); gap: 42px; }
	.gh-project-detail-overview__grid { grid-template-columns: 1fr; }
	.gh-project-detail-aside { position: static; display: grid; margin-top: 56px; grid-template-columns: 1fr 1fr; gap: 18px; }
	.gh-project-detail-aside__contact { display: flex; margin: 0; }
	.gh-project-detail-aside__contact h2 { margin-bottom: 20px; }
	.gh-project-detail-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
	.gh-project-detail-hero__body { grid-template-columns: 1fr; gap: 24px; }
	.gh-project-detail-hero__summary { max-width: 680px; }
	.gh-project-detail-aside { grid-template-columns: 1fr; }
	.gh-project-detail-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gh-project-detail-card:last-child { display: none; }
	.gh-project-detail-cta__inner { display: block; padding: 42px; }
	.gh-project-detail-cta .gh-project-detail__button { width: 100%; margin-top: 27px; }
}

@media (max-width: 580px) {
	.gh-project-detail__crumbs .gh-shell { width: calc(100% - 32px); }
	.gh-project-detail-overview { padding: 36px 0 64px; }
	.gh-project-detail-hero__inner { padding-block: 36px 44px; }
	.gh-project-detail-hero__back { margin-bottom: 22px; }
	.gh-project-detail-hero__body { gap: 18px; }
	.gh-project-detail-hero h1 { font-size: 2rem; line-height: 1.1; }
	.gh-project-detail-hero__summary { display: -webkit-box; overflow: hidden; font-size: .88rem; line-height: 1.68; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
	.gh-project-detail-hero__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gh-project-detail-hero__meta div { min-width: 0; padding-right: 12px; }
	.gh-project-detail-hero__meta div + div { padding-left: 12px; }
	.gh-project-detail-hero--article .gh-project-detail-hero__meta div:nth-child(3) { grid-column: 1 / -1; padding: 16px 0 0; margin-top: 16px; border-top: 1px solid rgb(255 255 255 / 18%); border-left: 0; }
	.gh-project-detail__section-head { display: block; }
	.gh-project-detail__section-head h2 { font-size: 1.75rem; }
	.gh-project-detail__article-header h1 { font-size: 2rem; }
	.gh-project-detail__section-head > span, .gh-project-detail__section-head--gallery > p { display: block; margin-top: 13px; text-align: left; }
	.gh-project-detail__copy { font-size: .94rem; line-height: 1.82; }
	.gh-project-detail__copy h2 { font-size: 1.45rem !important; }
	.gh-project-detail__copy h3 { font-size: 1.18rem !important; }
	.gh-project-detail-gallery--inline { padding-top: 28px; margin-top: 34px; }
	.gh-project-detail-aside__card { padding: 26px; }
	.gh-project-detail-aside__card ul { grid-template-columns: 1fr; margin: 0; }
	.gh-project-detail-aside__card li { display: grid; grid-template-columns: 40px 1fr; gap: 13px; padding: 16px 0 0; align-items: center; }
	.gh-project-detail-aside__card li + li { border-top: 1px solid #e0e6eb; border-left: 0; }
	.gh-project-detail-aside__card li > span { margin: 0; }
	.gh-project-detail-aside__contact { display: flex; padding: 27px; }
	.gh-project-detail-aside__contact h2 { margin-bottom: 20px; }
	.gh-project-detail-aside__contact .gh-project-detail__button { width: 100%; }
	.gh-project-detail-gallery__grid, .gh-project-detail-gallery--inline .gh-project-detail-gallery__grid, .gh-project-detail-related__grid { grid-template-columns: 1fr; }
	.gh-project-detail-card:last-child { display: block; }
	.gh-project-detail-cta { padding-bottom: 56px; }
	.gh-project-detail-cta__inner { padding: 34px 24px; border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.gh-project-detail-hero__back span, .gh-project-detail__button { transition: none; }
	.gh-project-detail-gallery img, .gh-project-detail-card__media > img { transition: transform .22s ease; }
	.gh-project-detail-gallery figure:hover img, .gh-project-detail-card:hover .gh-project-detail-card__media > img { transform: translateZ(0) scale(1.01); }
}