/* Standalone Ha Giang recommendation layout, shared by modern and legacy guides. */
.hihi-related.hihi-related { padding: 76px 0; background: #e7f15a; color: #1d292c; font: 15px/1.65 Inter, sans-serif; scroll-margin-top: 112px; }
.hihi-related, .hihi-related * { box-sizing: border-box; letter-spacing: 0; }
.hihi-related .hihi-related__inner { width: min(1248px, calc(100% - 96px)); margin-inline: auto; }
.hihi-related .hihi-related__heading { max-width: 710px; margin-bottom: 30px; }
.hihi-related .hihi-related__heading h2 { font: 600 48px/1.12 Phudu, sans-serif; margin: 8px 0 16px; color: #1d292c; overflow-wrap: anywhere; }
.hihi-related .hihi-related__heading p { margin: 0; }
.hihi-related .hihi-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.hihi-related .hihi-related__card { min-width: 0; display: flex; flex-direction: column; color: #1d292c; text-decoration: none; overflow: hidden; background: #fff; border: 1px solid rgba(29,41,44,.16); border-radius: 8px; transition: transform 180ms, border-color 180ms; }
.hihi-related .hihi-related__image { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; flex-shrink: 0; }
.hihi-related .hihi-related__copy { display: flex; flex-direction: column; flex: 1; padding: 24px; overflow-wrap: anywhere; }
.hihi-related .hihi-related__copy h3 { margin: 0; font: 700 21px/1.35 Inter, sans-serif; color: #1d292c; }
.hihi-related .hihi-related__copy p { margin: 12px 0; font: 400 15px/1.65 Inter, sans-serif; }
.hihi-related .hihi-related__action { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin-top: auto; gap: 16px; padding: 8px 0; color: #8500ff; font-weight: 600; }
.hihi-related .hihi-related__arrow { width: 24px; height: 24px; flex: 0 0 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 180ms; }
.hihi-related .hihi-related__card:hover { transform: translateY(-4px); border-color: #8500ff; }
.hihi-related .hihi-related__card:hover .hihi-related__arrow { transform: translate(2px, -2px); }
.hihi-related .hihi-related__card:focus-visible { outline: 3px solid #8500ff; outline-offset: 5px; }
@media (max-width: 1100px) {
    .hihi-related .hihi-related__heading h2 { font-size: 38px; }
}
@media (max-width: 800px) {
    .hihi-related.hihi-related { padding-block: 52px; scroll-margin-top: 155px; }
    .hihi-related .hihi-related__inner { width: calc(100% - 40px); }
    .hihi-related .hihi-related__grid { grid-template-columns: 1fr; }
    .hihi-related .hihi-related__heading h2 { font-size: 32px; }
}
@media (max-width: 520px) {
    .hihi-related .hihi-related__inner { width: calc(100% - 32px); }
    .hihi-related .hihi-related__heading h2 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
    .hihi-related .hihi-related__card, .hihi-related .hihi-related__arrow { transition: none; }
    .hihi-related .hihi-related__card:hover, .hihi-related .hihi-related__card:hover .hihi-related__arrow { transform: none; }
}