/* =========================================================================
   In Hoàng Gia — lớp hoàn thiện (10/2026). Nạp sau hg-min.css.
   Tỉ lệ ảnh đồng nhất, hiệu ứng nhẹ, thông tin liên hệ rõ ràng.
   ========================================================================= */

/* ---------- Ảnh: tỉ lệ cố định, không méo, không nhảy bố cục ---------- */
body.hg-navy .hn img { image-rendering: auto; }
body.hg-navy .hn-card__media,
body.hg-navy .hn-card--list .hn-card__media { aspect-ratio: 1 / 1; }
body.hg-navy .hn-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Ảnh mở đầu trang chủ: 1 ô vuông lớn + 2 ô nhỏ */
body.hg-navy .hn-hero__media { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 14px; }
body.hg-navy .hn-tile--tall { grid-row: span 2; aspect-ratio: 1 / 1; }
body.hg-navy .hn-tile:not(.hn-tile--tall) { min-height: 0; }
body.hg-navy .hn-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.hg-navy .hn-tile__tag { z-index: 1; box-shadow: 0 1px 2px rgba(7,26,63,.08); }

/* Danh mục trang chủ: lưới đều 3 cột, ảnh 4:3, nhãn nằm dưới ảnh */
body.hg-navy .hn-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: 28px 20px; }
body.hg-navy .hn-bento__item,
body.hg-navy .hn-bento__item.is-big { grid-row: auto; grid-column: auto; display: flex; flex-direction: column; gap: 12px; background: transparent; border-radius: 0; overflow: visible; }
body.hg-navy .hn-bento__item img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; background: var(--n-soft); }
body.hg-navy .hn-bento__item:hover img { transform: none; filter: brightness(.96); }
body.hg-navy .hn-bento__label { position: static; padding: 0; background: transparent; border-radius: 0; justify-content: space-between; }
body.hg-navy .hn-bento__label > span:first-child { gap: 2px; }
body.hg-navy .hn-bento__label strong { font-size: 17px; }
body.hg-navy .hn-bento__label small { display: block; white-space: normal; }
body.hg-navy .hn-bento__go { display: flex; width: 34px; height: 34px; background: transparent; color: var(--n-900); border: 1px solid #cfd6e3; transition: background .2s, color .2s, border-color .2s; }
body.hg-navy .hn-bento__item:hover .hn-bento__go { background: var(--n-900); border-color: var(--n-900); color: #fff; }

/* Năng lực xưởng: 2 ảnh dọc 4:5 */
body.hg-navy .hn-dark__media img { height: auto; aspect-ratio: 4 / 5; object-fit: cover; }

/* Thành phẩm: lưới vuông đều */
body.hg-navy .hn-gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: auto; gap: 14px; }
body.hg-navy .hn-gallery a,
body.hg-navy .hn-gallery a.is-tall { grid-row: auto; aspect-ratio: 1 / 1; }
body.hg-navy .hn-gallery img { position: absolute; inset: 0; }

/* Ảnh sản phẩm chính: hiển thị trọn ảnh trên nền nhạt */
body.hg-navy .hn-gal__main { cursor: zoom-in; }
body.hg-navy .hn-gal__main img { object-fit: contain; }
body.hg-navy .hn-gal__thumbs img { aspect-ratio: 1 / 1; }
body.hg-navy .hn-gal__zoom { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--n-900); font-size: 13px; font-weight: 600; pointer-events: none; }

/* Bài viết 16:9 */
body.hg-navy .hn-post__media img { aspect-ratio: 16 / 9; }

/* ---------- Hiệu ứng nhẹ ---------- */
body.hg-navy .hn-card__media img,
body.hg-navy .hn-gallery img,
body.hg-navy .hn-tile img,
body.hg-navy .hn-post__media img { transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .3s; }
body.hg-navy .hn-card:hover .hn-card__media img,
body.hg-navy .hn-gallery a:hover img,
body.hg-navy .hn-tile:hover img,
body.hg-navy .hn-post:hover .hn-post__media img { transform: scale(1.04); }
body.hg-navy .hn-btn { transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s; }
body.hg-navy .hn-btn:focus-visible,
body.hg-navy .hn a:focus-visible,
body.hg-navy .hn button:focus-visible { outline: 2px solid var(--n-blue); outline-offset: 2px; }
body.hg-navy.hn-js .hn-rv { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
body.hg-navy.hn-js .hn-rv.hn-in { opacity: 1; transform: none; }
body.hg-navy #header { transition: box-shadow .25s; }
body.hg-navy.hn-scrolled #header { box-shadow: 0 6px 20px rgba(7,26,63,.06); }
@media (prefers-reduced-motion: reduce) {
	body.hg-navy.hn-js .hn-rv { opacity: 1; transform: none; transition: none; }
	body.hg-navy .hn img { transition: none !important; }
}

/* Xem ảnh lớn */
.hn-lb { position: fixed; inset: 0; z-index: 2147483000; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(7,26,63,.88); }
.hn-lb.is-open { display: flex; }
.hn-lb img { max-width: min(1100px, 100%); max-height: 100%; object-fit: contain; border-radius: 12px; background: #fff; }
.hn-lb button { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: #071a3f; font-size: 26px; line-height: 1; cursor: pointer; }

/* ---------- Thông tin liên hệ rõ ràng ---------- */
body.hg-navy .hn-topbar__inner { align-items: center; }
body.hg-navy .hn-topbar__right { display: inline-flex; align-items: center; gap: 18px; }
body.hg-navy .hn-topbar a { color: var(--n-900) !important; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
body.hg-navy .hn-topbar a:hover { color: var(--n-blue) !important; }
body.hg-navy .hn-topbar .hn-tb-zalo { color: var(--n-zalo) !important; }
body.hg-navy .hn-reach { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--n-muted); }
body.hg-navy .hn-reach span, body.hg-navy .hn-reach a { display: inline-flex; align-items: center; gap: 6px; }
body.hg-navy .hn-reach a { color: var(--n-900) !important; font-weight: 600; }
body.hg-navy .hn-reach .hn-ic { color: var(--n-blue); }
body.hg-navy .hn-buy .hn-reach { padding: 14px 16px; border-radius: 12px; background: var(--n-soft); }

@media (max-width: 900px) {
	body.hg-navy .hn-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.hg-navy .hn-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 850px) {
	body.hg-navy .hn-topbar__inner > .hn-topbar__right { display: none; }
}
@media (max-width: 640px) {
	body.hg-navy .hn-hero__media { grid-template-rows: auto auto; gap: 10px; }
	body.hg-navy .hn-bento { gap: 20px 12px; }
	body.hg-navy .hn-bento__label strong { font-size: 14px; }
	body.hg-navy .hn-bento__label small, body.hg-navy .hn-bento__go { display: none; }
	body.hg-navy .hn-gallery { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.hg-navy .hn-dark__media img + img { margin-top: 24px; }
	body.hg-navy .hn-reach { font-size: 13px; gap: 6px 16px; }
	body.hg-navy .hn-gal__zoom { display: none; }
}