/* =========================================================================
   In Hoàng Gia — lớp tối giản (10/2026). Nạp sau hg-navy.css.
   Nền trắng, xanh đậm làm điểm nhấn, bỏ khối nền lớn và bóng đổ.
   Tắt: đổi HG_MIN thành false trong inc/navy.php.
   ========================================================================= */
body.hg-navy {
	--n-line: #e8ecf3;
	--n-soft: #f4f6fa;
	--n-soft2: #fafbfd;
}
body.hg-navy .hn { background: #fff; }

/* ---------- Chung ---------- */
body.hg-navy .hn-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .16em; color: var(--n-muted); gap: 0; }
body.hg-navy .hn-eyebrow::before { display: none; }
body.hg-navy .hn-eyebrow--gold { color: var(--n-muted); }
body.hg-navy .hn-h2 { font-weight: 700; color: var(--n-900); letter-spacing: -.02em; }
body.hg-navy .hn-h2--light { color: var(--n-900); }
body.hg-navy .hn-sec { padding-top: 96px; padding-bottom: 96px; }
body.hg-navy .hn-sec--soft { background: #fff; border-top: 1px solid var(--n-line); }
body.hg-navy .hn-head { margin-bottom: 36px; }
body.hg-navy .hn-more { font-weight: 600; color: var(--n-900) !important; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

body.hg-navy .hn-btn { border-radius: 10px; font-weight: 600; min-height: 50px; }
body.hg-navy .hn-btn:hover { transform: none; }
body.hg-navy .hn-btn--gold { background: var(--n-900); color: #fff !important; }
body.hg-navy .hn-btn--gold:hover { background: var(--n-800); }
body.hg-navy .hn-btn--ghost,
body.hg-navy .hn-btn--line { background: #fff; color: var(--n-900) !important; border-color: #cfd6e3; }
body.hg-navy .hn-btn--ghost:hover,
body.hg-navy .hn-btn--line:hover { border-color: var(--n-900); }
body.hg-navy .hn-btn--zalo { background: #fff; color: var(--n-zalo) !important; border-color: var(--n-zalo); }
body.hg-navy .hn-btn--zalo:hover { background: #f0f6ff; }
body.hg-navy .hn-btn--lg { min-height: 54px; font-size: 16px; }

body.hg-navy .hn-badge { background: #fff; color: var(--n-900); border: 1px solid var(--n-line); font-weight: 700; }
body.hg-navy .hn-chip { border-color: var(--n-line); background: #fff; font-weight: 500; color: var(--n-text); }
body.hg-navy .hn-chip strong { color: var(--n-900); }
body.hg-navy .hn-crumb { border-bottom: 0; }

/* Thẻ sản phẩm */
body.hg-navy .hn-grid { gap: 32px 24px; }
body.hg-navy .hn-card { border: 0; border-radius: 0; background: transparent; }
body.hg-navy .hn-card:hover { box-shadow: none; transform: none; }
body.hg-navy .hn-card__media { border-radius: 14px; background: var(--n-soft); }
body.hg-navy .hn-card:hover .hn-card__media img { transform: scale(1.03); }
body.hg-navy .hn-card__body { padding: 14px 2px 0; gap: 6px; }
body.hg-navy .hn-card__cat { font-size: 11px; font-weight: 600; letter-spacing: .1em; }
body.hg-navy .hn-card__title { font-weight: 600; color: var(--n-900) !important; }
body.hg-navy .hn-card__price strong { font-size: 17px; color: var(--n-900); }
body.hg-navy .hn-card__actions { grid-template-columns: minmax(0, 1fr); margin-top: 8px; }
body.hg-navy .hn-card__actions .hn-btn--gold { background: #fff; color: var(--n-900) !important; border-color: #cfd6e3; min-height: 42px; }
body.hg-navy .hn-card__actions .hn-btn--gold:hover { background: var(--n-900); border-color: var(--n-900); color: #fff !important; }
body.hg-navy .hn-card__actions .hn-btn--zalo { display: none; }

/* Khối liên hệ cuối trang */
body.hg-navy .hn-cband { background: #fff; border-top: 1px solid var(--n-line); }
body.hg-navy .hn-cband__links a { border-color: var(--n-line); box-shadow: none !important; }
body.hg-navy .hn-cband__links a:hover { transform: none; border-color: var(--n-900); }
body.hg-navy .hn-cband__links a.hn-cband__main { background: var(--n-900) !important; border-color: var(--n-900) !important; }
body.hg-navy .hn-cband__links a.hn-cband__main .hn-cband__icon { background: rgba(255,255,255,.12); color: #fff; }
body.hg-navy .hn-cband__icon--zalo { background: #eef4ff; color: var(--n-zalo); }

/* ---------- Header ---------- */
body.hg-navy .hn-topbar { background: #fff; color: var(--n-muted); border-bottom: 1px solid var(--n-line); }
body.hg-navy #header .hd-top__branch-phone { background: var(--n-900) !important; border-color: var(--n-900) !important; color: #fff !important; }
body.hg-navy #header .hd-top__branch-phone small { color: #c7d2ea !important; }
body.hg-navy #header .hd-top__branch-phone strong { color: #fff !important; }
body.hg-navy #header details.hd-category > summary { background: #fff !important; color: var(--n-900) !important; border-color: #cfd6e3 !important; }

/* ---------- Nút nổi / thanh di động ---------- */
body.hg-navy .hg-float-contact a.hg-float__btn--hanoi { background: var(--n-900) !important; border-color: var(--n-900) !important; }
body.hg-navy .hg-float-contact a.hg-float__btn--hanoi .hg-float__btn-icon { background: rgba(255,255,255,.14) !important; }
body.hg-navy .hg-float-contact a.hg-float__btn--hanoi .hg-float__label,
body.hg-navy .hg-float-contact a.hg-float__btn--hanoi .hg-float__num { color: #fff !important; }
@media (max-width: 850px) {
	body.hg-navy .hn-mbar { box-shadow: none; gap: 6px; }
	body.hg-navy .hn-mbar__call { background: var(--n-900); color: #fff !important; }
	body.hg-navy .hn-mbar__zalo { background: #fff; color: var(--n-zalo) !important; border: 1.5px solid var(--n-zalo); }
	body.hg-navy .hn-mbar__msg { background: #fff; color: var(--n-900) !important; border: 1.5px solid #cfd6e3; }
}

/* ======================= Trang chủ ======================= */
body.hg-navy .hn-hero { background: #fff; color: var(--n-900); }
body.hg-navy .hn-hero__grid { padding-top: 64px; padding-bottom: 72px; gap: 64px; }
body.hg-navy .hn-hero__title { color: var(--n-900); font-weight: 700; letter-spacing: -.03em; }
body.hg-navy .hn-hero__title span { color: var(--n-blue); }
body.hg-navy .hn-hero__lead { color: var(--n-text); }
body.hg-navy .hn-hero__stats { gap: 40px; padding-top: 18px; border-top: 1px solid var(--n-line); }
body.hg-navy .hn-hero__stats strong { color: var(--n-900); font-weight: 700; font-size: 26px; }
body.hg-navy .hn-hero__stats span { color: var(--n-muted); }
body.hg-navy .hn-tile { border-radius: 16px; background: var(--n-soft); }
body.hg-navy .hn-tile__tag { font-weight: 600; font-size: 13px; padding: 6px 12px; }
body.hg-navy .hn-hero__flag { display: none; }
body.hg-navy .hn-trustwrap { margin-top: 0; }
body.hg-navy .hn-trust { box-shadow: none; border-radius: 0; padding: 26px 0; border-top: 1px solid var(--n-line); border-bottom: 1px solid var(--n-line); }
body.hg-navy .hn-trust__ic { background: transparent; width: 28px; height: 28px; color: var(--n-blue); }
body.hg-navy .hn-trust strong { color: var(--n-900); font-weight: 600; }
body.hg-navy .hn-bento { gap: 16px; }
body.hg-navy .hn-bento__item { border-radius: 16px; }
body.hg-navy .hn-bento__label { left: 12px; right: auto; bottom: 12px; padding: 10px 14px; border-radius: 10px; }
body.hg-navy .hn-bento__label strong { font-size: 16px; font-weight: 600; color: var(--n-900); }
body.hg-navy .hn-bento__label small { display: none; }
body.hg-navy .hn-bento__go { display: none; }
body.hg-navy .hn-tab { border: 0; background: transparent; color: var(--n-muted); padding: 0 14px; font-weight: 600; border-radius: 8px; }
body.hg-navy .hn-tab.is-active { background: var(--n-soft); color: var(--n-900); }
body.hg-navy .hn-dark { background: #fff; color: var(--n-900); border-top: 1px solid var(--n-line); }
body.hg-navy .hn-dark__media img { border-radius: 14px; }
body.hg-navy .hn-dark__copy > p { color: var(--n-text); }
body.hg-navy .hn-tech { gap: 0; }
body.hg-navy .hn-tech li { background: transparent; border: 0; border-top: 1px solid var(--n-line); border-radius: 0; padding: 18px 0; }
body.hg-navy .hn-tech li:last-child { border-bottom: 1px solid var(--n-line); }
body.hg-navy .hn-tech__n { background: transparent; color: var(--n-blue); width: auto; height: auto; font-size: 14px; padding-top: 3px; }
body.hg-navy .hn-tech strong { color: var(--n-900); font-weight: 600; }
body.hg-navy .hn-tech small { color: var(--n-muted); }
body.hg-navy .hn-steps { gap: 24px; }
body.hg-navy .hn-steps li { background: transparent; border-radius: 0; padding: 18px 0 0; border-top: 2px solid var(--n-900); }
body.hg-navy .hn-steps__n { width: auto; height: auto; background: transparent; color: var(--n-blue); justify-content: flex-start; font-size: 14px; }
body.hg-navy .hn-steps strong { color: var(--n-900); font-weight: 600; }
body.hg-navy .hn-gallery a { border-radius: 14px; }
body.hg-navy .hn-gallery span { background: rgba(255,255,255,.92); color: var(--n-900); }
body.hg-navy .hn-post__media { border-radius: 14px; }
body.hg-navy .hn-post strong { color: var(--n-900); font-weight: 600; }

/* ======================= Danh mục ======================= */
body.hg-navy .hn-chero { background: #fff; }
body.hg-navy .hn-chero__grid { padding-top: 32px; padding-bottom: 48px; gap: 56px; align-items: start; }
body.hg-navy .hn-chero__copy h1 { color: var(--n-900); font-weight: 700; letter-spacing: -.03em; }
body.hg-navy .hn-brief { background: #fff; color: var(--n-900); border: 1px solid var(--n-line); border-radius: 18px; }
body.hg-navy .hn-brief__img { display: none; }
body.hg-navy .hn-brief__kick { color: var(--n-muted); font-weight: 600; letter-spacing: .14em; font-size: 12px; }
body.hg-navy .hn-brief h2 { color: var(--n-900); font-size: 21px; font-weight: 700; max-width: none; }
body.hg-navy .hn-brief__n { background: var(--n-soft); color: var(--n-900); }
body.hg-navy .hn-brief li strong { color: var(--n-900); font-weight: 600; }
body.hg-navy .hn-brief li small { color: var(--n-muted); }
body.hg-navy .hn-brief .hn-btn--gold { background: #fff; color: var(--n-zalo) !important; border-color: var(--n-zalo); }
body.hg-navy .hn-sub { padding-top: 8px; }
body.hg-navy .hn-sub h2 { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--n-muted); }
body.hg-navy .hn-sub__item { border-color: var(--n-line); min-height: 50px; }
body.hg-navy .hn-sub__item img, body.hg-navy .hn-sub__ph { width: 38px; height: 38px; }
body.hg-navy .hn-sub__item:hover, body.hg-navy .hn-sub__item.is-active { background: var(--n-soft); border-color: var(--n-soft); color: var(--n-900) !important; }
body.hg-navy .hn-listing { padding-top: 40px; gap: 48px; grid-template-columns: 220px minmax(0, 1fr); }
body.hg-navy .hn-side { border: 0; padding: 0; border-radius: 0; }
body.hg-navy .hn-side h3 { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--n-muted); }
body.hg-navy .hn-side nav a { padding: 7px 0; border-radius: 0; }
body.hg-navy .hn-side nav a:hover, body.hg-navy .hn-side nav a.is-active { background: transparent; color: var(--n-900) !important; font-weight: 600; }
body.hg-navy .hn-side__help { background: var(--n-soft); border-radius: 12px; }
body.hg-navy .hn-side__help span { color: var(--n-muted); }
body.hg-navy .hn-sort a { border: 0; padding: 6px 10px; color: var(--n-muted) !important; }
body.hg-navy .hn-sort a.is-active { background: var(--n-soft); color: var(--n-900) !important; }
body.hg-navy .hn-promo { background: var(--n-soft); color: var(--n-900); border-radius: 16px; grid-template-columns: minmax(0, 1fr); }
body.hg-navy .hn-promo small { color: var(--n-muted); font-weight: 600; letter-spacing: .14em; }
body.hg-navy .hn-promo strong { font-size: 20px; font-weight: 600; }
body.hg-navy .hn-promo img { display: none; }
body.hg-navy .hn-pages .page-numbers { border-color: var(--n-line); }
body.hg-navy .hn-pages .page-numbers.current { background: var(--n-900); border-color: var(--n-900); }
body.hg-navy .hn-faq details { border: 0; border-bottom: 1px solid var(--n-line); border-radius: 0; padding: 0; }
body.hg-navy .hn-faq summary { font-weight: 600; color: var(--n-900); }
body.hg-navy .hn-faq summary::after { background: transparent; }
body.hg-navy .hn-seo details { border-color: var(--n-line); border-radius: 14px; }
body.hg-navy .hn-seo summary { font-weight: 600; font-size: 16px; color: var(--n-900); }

/* ======================= Chi tiết sản phẩm ======================= */
body.hg-navy .hn-pd { gap: 64px; }
body.hg-navy .hn-gal__main { border-radius: 18px; background: var(--n-soft); }
body.hg-navy .hn-gal__main img { background: transparent; }
body.hg-navy .hn-gal__thumbs button { border-width: 2px; border-radius: 10px; }
body.hg-navy .hn-gal__thumbs button.is-active { border-color: var(--n-900); }
body.hg-navy .hn-buy { gap: 22px; }
body.hg-navy .hn-buy h1 { color: var(--n-900); font-weight: 700; letter-spacing: -.02em; }
body.hg-navy .hn-buy__cats a { background: transparent; padding: 0; color: var(--n-muted) !important; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
body.hg-navy .hn-price { background: transparent; padding: 0 0 20px; border-radius: 0; border-bottom: 1px solid var(--n-line); }
body.hg-navy .hn-price__val strong { color: var(--n-900); font-weight: 700; }
body.hg-navy .hn-buy__spec { border: 0; background: var(--n-soft); padding: 16px 18px; }
body.hg-navy .hn-buy__cta { border: 0; padding: 0; }
body.hg-navy .hn-buy__cta .hn-btn--gold { min-height: 56px; font-size: 17px; }
body.hg-navy .hn-trustlist { padding-top: 6px; }
body.hg-navy .hn-trustlist .hn-trust__ic { background: transparent; color: var(--n-blue); width: 20px; height: 20px; }
body.hg-navy .hn-ptab { font-weight: 500; }
body.hg-navy .hn-ptab.is-active { border-bottom-color: var(--n-900); font-weight: 700; color: var(--n-900); }
body.hg-navy .hn-spec { border-radius: 0; border: 0; border-bottom: 1px solid var(--n-line); }
body.hg-navy .hn-spec th { background: transparent; color: var(--n-muted); font-weight: 500; padding-left: 0; }
body.hg-navy .hn-spec td { color: var(--n-900); }
body.hg-navy .hn-qa div { border: 0; border-bottom: 1px solid var(--n-line); border-radius: 0; padding: 18px 0; }

/* ======================= Liên hệ ======================= */
body.hg-navy .hn-chhero { background: #fff; color: var(--n-900); }
body.hg-navy .hn-chhero .hn-wrap { padding-top: 56px; padding-bottom: 40px; }
body.hg-navy .hn-chhero h1 { color: var(--n-900); font-weight: 700; letter-spacing: -.03em; }
body.hg-navy .hn-chhero__copy p { color: var(--n-text); }
body.hg-navy .hn-ch a { border: 1px solid var(--n-line); min-height: 170px; border-radius: 16px; }
body.hg-navy .hn-ch a:hover { transform: none; box-shadow: none; border-color: var(--n-900); }
body.hg-navy .hn-ch .is-call { background: var(--n-900); border-color: var(--n-900); color: #fff !important; }
body.hg-navy .hn-ch .is-call small { color: #c7d2ea; }
body.hg-navy .hn-ch .is-call .hn-ch__icon { background: rgba(255,255,255,.12); }
body.hg-navy .hn-ch .is-zalo { background: #fff; color: var(--n-900) !important; }
body.hg-navy .hn-ch .is-zalo small { color: var(--n-muted); }
body.hg-navy .hn-ch .is-zalo .hn-ch__icon { background: #eef4ff; color: var(--n-zalo); }
body.hg-navy .hn-ch strong { font-weight: 700; }
body.hg-navy .hn-ch .is-mail strong { font-size: 13px; word-break: normal; overflow-wrap: anywhere; }
body.hg-navy .hn-ws { padding-top: 40px; }
body.hg-navy .hn-ws__card { border-radius: 16px; }
body.hg-navy .hn-map { border-radius: 16px; background: var(--n-soft); }
body.hg-navy .hn-prep h2 { font-weight: 700; color: var(--n-900); font-size: 24px; }
body.hg-navy .hn-prep li { border: 0; border-bottom: 1px solid var(--n-line); border-radius: 0; padding: 14px 0; background: transparent; }
body.hg-navy .hn-prep li.is-dark { background: transparent; border-color: var(--n-line); color: var(--n-900); }
body.hg-navy .hn-prep li.is-dark strong { color: var(--n-900); }
body.hg-navy .hn-prep li.is-dark small { color: var(--n-muted); }
body.hg-navy .hn-prep__n, body.hg-navy .hn-prep li.is-dark .hn-prep__n { background: var(--n-soft); color: var(--n-900); font-size: 13px; }

/* ======================= Responsive ======================= */
@media (max-width: 900px) {
	body.hg-navy .hn-hero__grid { padding-top: 32px; padding-bottom: 48px; gap: 36px; }
	body.hg-navy .hn-listing { grid-template-columns: minmax(0, 1fr); }
	body.hg-navy .hn-side { display: none; }
	body.hg-navy .hn-sec { padding-top: 64px; padding-bottom: 64px; }
}
@media (max-width: 640px) {
	body.hg-navy .hn-hero__grid { padding-top: 24px; }
	body.hg-navy .hn-hero__stats { gap: 22px; }
	body.hg-navy .hn-trust { padding: 18px 0; }
	body.hg-navy .hn-bento__label { left: 8px; bottom: 8px; padding: 7px 10px; }
	body.hg-navy .hn-bento__label strong { font-size: 13px; }
	body.hg-navy .hn-grid { gap: 24px 12px; }
	body.hg-navy .hn-card__actions .hn-btn--gold { min-height: 38px; font-size: 13px; }
	body.hg-navy .hn-ch a { min-height: 0; }
	body.hg-navy .hn-pd { gap: 28px; }
}