/* =========================================================================
   In Hoàng Gia — phong cách mềm (10/2026). Nạp sau cùng.
   Nền xanh rất nhạt, thẻ trắng bo tròn đổ bóng nhẹ, nút xanh dương bo tròn,
   chữ Inter. Lấy cảm hứng bố cục từ các xưởng in lớn, màu theo logo Hoàng Gia.
   ========================================================================= */
html body.hg-navy {
	--s-bg: #eaeffa;
	--s-card: #ffffff;
	--s-ink: #0b1633;
	--s-text: #3d4a66;
	--s-muted: #6b7690;
	--s-line: #e4e9f3;
	--s-blue: #1452dc;
	--s-blue2: #306de4;
	--s-blue-soft: #edf3ff;
	--s-grad: linear-gradient(315deg, #1250dc, #306de4);
	--s-r: 16px;
	--s-r-sm: 12px;
	--s-shadow: 0 6px 18px rgba(16, 42, 104, .08);
	--s-shadow-h: 0 12px 28px rgba(16, 42, 104, .14);
	--n-blue: #1452dc;
	--n-line: #e4e9f3;
	--n-soft: #f2f5fc;
	font-family: Inter, "Be Vietnam Pro", Arial, sans-serif;
}
html body.hg-navy .hn,
html body.hg-navy .hn-foot { font-family: Inter, "Be Vietnam Pro", Arial, sans-serif; }
html body.hg-navy .hn { background: var(--s-bg); color: var(--s-ink); }
html body.hg-navy .hn :where(h1, h2, h3) { color: var(--s-ink); }

/* ---------- Khung chung ---------- */
html body.hg-navy .hn-sec,
html body.hg-navy .hn-sec--soft,
html body.hg-navy .hn-dark,
html body.hg-navy .hn-cband,
html body.hg-navy .hn-chero,
html body.hg-navy .hn-chhero { background: transparent; border: 0; }
html body.hg-navy .hn-sec { padding-top: 56px; padding-bottom: 56px; }
html body.hg-navy .hn-head { margin-bottom: 24px; }
html body.hg-navy .hn-h2 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; color: var(--s-ink); letter-spacing: -.01em; }
html body.hg-navy .hn-eyebrow { color: var(--s-blue); font-size: 12px; font-weight: 600; letter-spacing: .12em; }
html body.hg-navy .hn-more { color: var(--s-blue) !important; border: 0; font-weight: 600; }
html body.hg-navy .hn-crumb { background: transparent; }
html body.hg-navy .hn-crumb a { color: var(--s-muted) !important; }
html body.hg-navy .hn-crumb span[aria-current] { color: var(--s-ink); }

/* ---------- Nút ---------- */
html body.hg-navy .hn-btn { border-radius: 999px; font-weight: 600; box-shadow: none; }
html body.hg-navy .hn-btn--gold,
html body.hg-navy .hn-btn--navy { background: var(--s-grad); border-color: transparent; color: #fff !important; }
html body.hg-navy .hn-btn--gold:hover,
html body.hg-navy .hn-btn--navy:hover { background: linear-gradient(315deg, #0e45c2, #2a62d6); box-shadow: 0 8px 20px rgba(20, 82, 220, .28); }
html body.hg-navy .hn-btn--zalo { background: #fff; border: 1px solid #cfdcf8; color: var(--s-blue) !important; }
html body.hg-navy .hn-btn--zalo:hover { background: var(--s-blue-soft); border-color: var(--s-blue); }
html body.hg-navy .hn-btn--line,
html body.hg-navy .hn-btn--ghost { background: #fff; border: 1px solid #cfdcf8; color: var(--s-ink) !important; }
html body.hg-navy .hn-btn--line:hover,
html body.hg-navy .hn-btn--ghost:hover { border-color: var(--s-blue); color: var(--s-blue) !important; }

/* ---------- Đầu trang ---------- */
html body.hg-navy .hn-topbar { background: #f5f8ff; border-bottom: 1px solid var(--s-line); color: var(--s-muted); }
html body.hg-navy .hn-topbar a { color: var(--s-ink) !important; }
html body.hg-navy #header { box-shadow: 0 0 20px rgba(0, 0, 0, .08); }
html body.hg-navy #header details.hd-category > summary { background: var(--s-grad) !important; border-color: transparent !important; color: #fff !important; border-radius: 10px !important; }
html body.hg-navy #header details.hd-category > summary * { color: #fff !important; }
html body.hg-navy #header .hd-top__search { border-radius: 10px !important; border-color: #d5def0 !important; overflow: hidden; }
html body.hg-navy #header .hd-top__search button { background: var(--s-blue) !important; }
html body.hg-navy #header .hd-top__branch-phone { background: #fff !important; border: 1px solid #cfdcf8 !important; border-radius: 999px !important; color: var(--s-ink) !important; padding: 6px 18px !important; }
html body.hg-navy #header .hd-top__branch-phone small { color: var(--s-muted) !important; }
html body.hg-navy #header .hd-top__branch-phone strong { color: var(--s-blue) !important; }
html body.hg-navy #header .hn-hd-zalo { border-radius: 999px; }
html body.hg-navy #header .hg-primary-nav__list > li > a { border-radius: 999px !important; }
html body.hg-navy #header .hg-primary-nav__list > li.current-menu-item > a,
html body.hg-navy #header .hg-primary-nav__list > li:hover > a { background: var(--s-blue-soft) !important; color: var(--s-blue) !important; }

/* ---------- Thẻ sản phẩm ---------- */
html body.hg-navy .hn-grid { gap: 20px; }
html body.hg-navy .hn-card { background: var(--s-card); border: 0; border-radius: var(--s-r-sm); box-shadow: var(--s-shadow); padding: 10px; transition: box-shadow .3s, transform .3s; }
html body.hg-navy .hn-card:hover { box-shadow: var(--s-shadow-h); transform: translateY(-3px); }
html body.hg-navy .hn-card__media { border-radius: 8px; background: #f3f6fc; }
html body.hg-navy .hn-card__body { padding: 12px 4px 4px; gap: 8px; }
html body.hg-navy .hn-card__title { font-size: 15px; font-weight: 600; color: var(--s-ink) !important; }
html body.hg-navy .hn-card__price { margin-top: auto; padding: 8px 12px; border-radius: 8px; background: #f1f4fa; gap: 4px 8px; }
html body.hg-navy .hn-card__from { font-size: 13px; color: var(--s-muted); }
html body.hg-navy .hn-card__price strong { font-size: 16px; color: var(--s-blue); }
html body.hg-navy .hn-card__actions { margin-top: 4px; }
html body.hg-navy .hn-card__actions .hn-btn--gold { background: var(--s-grad); border: 0; color: #fff !important; min-height: 40px; }
html body.hg-navy .hn-card__actions .hn-btn--gold:hover { background: linear-gradient(315deg, #0e45c2, #2a62d6); }
html body.hg-navy .hn-badge { background: #ff5b4f; color: #fff; border: 0; font-weight: 700; }

/* ---------- Trang chủ ---------- */
html body.hg-navy .hn-hero { background: linear-gradient(180deg, #ffffff 0%, var(--s-bg) 100%); }
html body.hg-navy .hn-hero__title { color: var(--s-ink); }
html body.hg-navy .hn-hero__title span { color: var(--s-blue); }
html body.hg-navy .hn-hero__stats { border-top-color: var(--s-line); }
html body.hg-navy .hn-hero__stats strong { color: var(--s-blue); }
html body.hg-navy .hn-tile { border-radius: var(--s-r); box-shadow: var(--s-shadow); background: #fff; }
html body.hg-navy .hn-tile__tag { border-radius: 999px; }
html body.hg-navy .hn-trust { background: #fff; border: 0; border-radius: var(--s-r); box-shadow: var(--s-shadow); padding: 20px 24px; }
html body.hg-navy .hn-trust__ic { background: var(--s-blue-soft); border-radius: 10px; width: 40px; height: 40px; }
html body.hg-navy .hn-bento__item { background: #fff; border-radius: var(--s-r); box-shadow: var(--s-shadow); padding: 10px 10px 14px; transition: box-shadow .3s, transform .3s; }
html body.hg-navy .hn-bento__item:hover { box-shadow: var(--s-shadow-h); transform: translateY(-3px); }
html body.hg-navy .hn-bento__item img { border-radius: 10px; }
html body.hg-navy .hn-bento__label { padding: 0 6px; }
html body.hg-navy .hn-bento__go { border-color: #cfdcf8; color: var(--s-blue); }
html body.hg-navy .hn-bento__item:hover .hn-bento__go { background: var(--s-blue); border-color: var(--s-blue); }
html body.hg-navy .hn-tabs { background: #fff; padding: 6px; border-radius: 999px; box-shadow: var(--s-shadow); }
html body.hg-navy .hn-tab { border-radius: 999px; min-height: 38px; color: var(--s-text); }
html body.hg-navy .hn-tab.is-active { background: var(--s-grad); color: #fff; }
html body.hg-navy .hn-dark .hn-split { background: #fff; border-radius: 20px; box-shadow: var(--s-shadow); padding: 40px; margin-top: 8px; margin-bottom: 8px; }
html body.hg-navy .hn-tech li { border-color: var(--s-line); }
html body.hg-navy .hn-tech__n { color: var(--s-blue); }
html body.hg-navy .hn-steps li { background: #fff; border: 0; border-radius: var(--s-r-sm); box-shadow: var(--s-shadow); padding: 18px; }
html body.hg-navy .hn-steps__n { width: 32px; height: 32px; border-radius: 50%; background: var(--s-blue-soft); color: var(--s-blue); justify-content: center; }
html body.hg-navy .hn-gallery a { border-radius: var(--s-r-sm); box-shadow: var(--s-shadow); }
html body.hg-navy .hn-gallery span { border-radius: 999px; }
html body.hg-navy .hn-post { background: #fff; border-radius: var(--s-r-sm); box-shadow: var(--s-shadow); padding: 10px 10px 16px; }
html body.hg-navy .hn-post time, html body.hg-navy .hn-post strong { padding: 0 6px; }
html body.hg-navy .hn-post__media { border-radius: 8px; }

/* Khối liên hệ cuối trang: thẻ trắng nổi trên nền */
html body.hg-navy .hn-cband { padding: 8px 0 56px; }
html body.hg-navy .hn-cband__grid { background: #fff; border-radius: 20px; box-shadow: var(--s-shadow); padding: 40px; }
html body.hg-navy .hn-cband__links a { border-radius: var(--s-r-sm) !important; border-color: var(--s-line); }
html body.hg-navy .hn-cband__links a.hn-cband__main { background: var(--s-grad) !important; }

/* ---------- Danh mục ---------- */
html body.hg-navy .hn-chead h1 { color: var(--s-ink); }
html body.hg-navy .hn-chead__sub a { background: #fff; border-color: #fff; box-shadow: 0 2px 8px rgba(16, 42, 104, .06); }
html body.hg-navy .hn-chead__sub a:hover { color: var(--s-blue) !important; border-color: #cfdcf8; }
html body.hg-navy .hn-side { display: flex; background: #fff; border-radius: var(--s-r); box-shadow: var(--s-shadow); padding: 18px; }
html body.hg-navy .hn-side nav a { padding: 8px 10px; border-radius: 8px; }
html body.hg-navy .hn-side nav a.is-active, html body.hg-navy .hn-side nav a:hover { background: var(--s-blue-soft); color: var(--s-blue) !important; }
html body.hg-navy .hn-toolbar { background: #fff; border-radius: var(--s-r-sm); box-shadow: var(--s-shadow); padding: 10px 14px; }
html body.hg-navy .hn-sort a { border-radius: 999px; }
html body.hg-navy .hn-sort a.is-active { background: var(--s-blue); color: #fff !important; }
html body.hg-navy .hn-pages .page-numbers { background: #fff; border: 0; box-shadow: var(--s-shadow); border-radius: 10px; }
html body.hg-navy .hn-pages .page-numbers.current { background: var(--s-blue); color: #fff; }
html body.hg-navy .hn-seo details { background: #fff; border: 0; box-shadow: var(--s-shadow); }

/* ---------- Chi tiết sản phẩm ---------- */
html body.hg-navy .hn-pd { align-items: start; }
html body.hg-navy .hn-gal { background: #fff; border-radius: 20px; box-shadow: var(--s-shadow); padding: 14px; }
html body.hg-navy .hn-gal__main { background: #f3f6fc; border-radius: 14px; }
html body.hg-navy .hn-gal__thumbs button { border-radius: 10px; background: #f3f6fc; }
html body.hg-navy .hn-gal__thumbs button.is-active { border-color: var(--s-blue); }
html body.hg-navy .hn-buy { background: #fff; border-radius: 20px; box-shadow: var(--s-shadow); padding: 26px; }
html body.hg-navy .hn-buy__cats a { color: var(--s-blue) !important; }
html body.hg-navy .hn-price { background: linear-gradient(90deg, #fff6e5, #fffaf0); border: 1px solid #ffe2a8; border-radius: 14px; padding: 14px 18px; }
html body.hg-navy .hn-price__val strong { color: #e25b10; }
html body.hg-navy .hn-buy__spec { background: #f5f8ff; border-radius: 12px; }
html body.hg-navy .hn-buy__cta .hn-btn--gold { min-height: 52px; }
html body.hg-navy .hn-buy__row .hn-btn--zalo { background: #fff; border-color: #cfdcf8; color: var(--s-blue) !important; }
html body.hg-navy .hn-buy .hn-reach { background: #f5f8ff; }
html body.hg-navy .hn-trustlist .hn-trust__ic { background: var(--s-blue-soft); border-radius: 50%; color: var(--s-blue); }
html body.hg-navy .hn-ptabs { background: #fff; border-radius: 999px; padding: 6px; border: 0; box-shadow: var(--s-shadow); display: inline-flex; margin-bottom: 20px; }
html body.hg-navy .hn-ptab { border: 0; margin: 0; border-radius: 999px; min-height: 40px; padding: 0 20px; }
html body.hg-navy .hn-ptab.is-active { background: var(--s-grad); color: #fff; border: 0; }
html body.hg-navy .hn-panel { background: #fff; border-radius: 20px; box-shadow: var(--s-shadow); padding: 28px; }
html body.hg-navy .hn-spec { border: 0; }
html body.hg-navy .hn-qa div { border-bottom-color: var(--s-line); }

/* ---------- Liên hệ ---------- */
html body.hg-navy .hn-ch a { border: 0; box-shadow: var(--s-shadow); border-radius: var(--s-r) !important; }
html body.hg-navy .hn-ch .is-call { background: var(--s-grad); }
html body.hg-navy .hn-ws__card, html body.hg-navy .hn-map { background: #fff; border: 0; border-radius: 20px; box-shadow: var(--s-shadow); }
html body.hg-navy .hn-prep > div { background: #fff; border-radius: 20px; box-shadow: var(--s-shadow); padding: 26px; }
html body.hg-navy .hn-prep__n, html body.hg-navy .hn-prep li.is-dark .hn-prep__n { background: var(--s-blue-soft); color: var(--s-blue); border-radius: 50%; }

/* ---------- Nút liên hệ nổi & thanh điện thoại ---------- */
html body.hg-navy .hn-float__btn.is-call { background: var(--s-grad); }
html body.hg-navy .hn-float__btn.is-call::after { animation-name: hn-pulse-b; }
@keyframes hn-pulse-b { 0% { box-shadow: 0 0 0 0 rgba(20, 82, 220, .4); } 70% { box-shadow: 0 0 0 14px rgba(20, 82, 220, 0); } 100% { box-shadow: 0 0 0 0 rgba(20, 82, 220, 0); } }
@media (max-width: 850px) {
	html body.hg-navy .hn-mbar__call { background: var(--s-grad) !important; }
}

/* ---------- Điện thoại ---------- */
@media (max-width: 900px) {
	html body.hg-navy .hn-side { display: none; }
	html body.hg-navy .hn-dark .hn-split { padding: 24px; }
	html body.hg-navy .hn-cband__grid { padding: 24px; }
}
@media (max-width: 640px) {
	html body.hg-navy .hn-sec { padding-top: 40px; padding-bottom: 40px; }
	html body.hg-navy .hn-card { padding: 8px; }
	html body.hg-navy .hn-card__price { padding: 6px 8px; }
	html body.hg-navy .hn-card__title { font-size: 14px; }
	html body.hg-navy .hn-buy, html body.hg-navy .hn-panel { padding: 18px; border-radius: 16px; }
	html body.hg-navy .hn-gal { padding: 10px; border-radius: 16px; }
	html body.hg-navy .hn-ptabs { display: flex; overflow-x: auto; }
	html body.hg-navy .hn-ptab { flex: none; }
	html body.hg-navy .hn-tabs { border-radius: 14px; }
	html body.hg-navy .hn-trust { padding: 14px; }
}

/* ===== v2 hiện đại: nền toàn trang, hero full-width xanh gradient ===== */
html body.hg-navy { background: var(--s-bg) !important; }
html body.hg-navy #page { background: var(--s-bg) !important; }
html body.hg-navy main.hn { max-width: none !important; width: 100% !important; margin: 0 !important; overflow-x: clip; }
html body.hg-navy .hn-sec { padding-top: 56px; padding-bottom: 56px; }

html body.hg-navy .hn-hero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(1200px 520px at 85% -10%, rgba(80, 150, 255, .55), transparent 60%), radial-gradient(800px 480px at -10% 110%, rgba(0, 196, 255, .28), transparent 60%), linear-gradient(135deg, #0a2f8f 0%, #1250dc 55%, #2f7bff 100%); }
html body.hg-navy .hn-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); pointer-events: none; }
html body.hg-navy .hn-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 70px; background: var(--s-bg); clip-path: ellipse(75% 100% at 50% 100%); }
html body.hg-navy .hn-hero__grid { position: relative; z-index: 1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; padding-top: 64px; padding-bottom: 128px; }
html body.hg-navy .hn-hero .hn-eyebrow { color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); padding: 7px 14px; border-radius: 999px; letter-spacing: .08em; font-size: 12px; align-self: flex-start; backdrop-filter: blur(6px); }
html body.hg-navy .hn-hero__title { color: #fff; font-size: clamp(36px, 4.4vw, 60px); font-weight: 800; line-height: 1.08; letter-spacing: -.025em; }
html body.hg-navy .hn-hero__title span { color: #ffd34d; }
html body.hg-navy .hn-hero__lead { color: rgba(255,255,255,.86); font-size: 17px; }
html body.hg-navy .hn-hero .hn-btn--gold { background: #fff !important; color: #0d3fb5 !important; border: 0; box-shadow: 0 10px 30px rgba(3, 20, 80, .3); }
html body.hg-navy .hn-hero .hn-btn--gold:hover { transform: translateY(-2px); }
html body.hg-navy .hn-hero .hn-btn--ghost { background: rgba(255,255,255,.12) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.4); }
html body.hg-navy .hn-hero .hn-btn--ghost:hover { background: rgba(255,255,255,.22) !important; }
html body.hg-navy .hn-hero .hn-reach, html body.hg-navy .hn-hero .hn-reach a { color: rgba(255,255,255,.9) !important; font-weight: 500; }
html body.hg-navy .hn-hero .hn-reach .hn-ic { color: #ffd34d; }
html body.hg-navy .hn-hero__stats { border-top: 1px solid rgba(255,255,255,.2); gap: 40px; }
html body.hg-navy .hn-hero__stats strong { color: #fff; font-size: 28px; font-weight: 800; }
html body.hg-navy .hn-hero__stats span { color: rgba(255,255,255,.72); }
html body.hg-navy .hn-hero__media { gap: 14px; }
html body.hg-navy .hn-hero .hn-tile { border: 5px solid rgba(255,255,255,.9); border-radius: 22px; box-shadow: 0 24px 60px rgba(2, 16, 64, .35); background: #fff; }
html body.hg-navy .hn-hero .hn-tile__tag { background: rgba(255,255,255,.95); color: #0d3fb5; font-weight: 700; backdrop-filter: blur(6px); }
html body.hg-navy .hn-hero__flag { display: flex !important; left: -22px; bottom: 28px; background: #ffd34d; color: #0a1f5c; border-radius: 14px; z-index: 2; animation: hgFloat 4s ease-in-out infinite; }
@keyframes hgFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

html body.hg-navy .hn-trustwrap { position: relative; z-index: 2; margin-top: -84px; }
html body.hg-navy .hn-trust { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; padding: 22px 26px; border-radius: 18px; box-shadow: 0 18px 50px rgba(16, 42, 104, .14); border: 0; }
html body.hg-navy .hn-trust__ic { background: linear-gradient(315deg, #1250dc, #306de4); color: #fff; border-radius: 12px; }
html body.hg-navy .hn-trustwrap + .hn-sec { padding-top: 48px; }

@media (max-width: 1024px) {
	html body.hg-navy .hn-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	html body.hg-navy .hn-hero__grid { grid-template-columns: 1fr; gap: 32px; padding-top: 36px; padding-bottom: 104px; }
	html body.hg-navy .hn-hero__flag { left: 10px; bottom: 10px; }
}
@media (max-width: 640px) {
	html body.hg-navy .hn-sec { padding-top: 40px; padding-bottom: 40px; }
	html body.hg-navy .hn-hero__title { font-size: 34px; }
	html body.hg-navy .hn-hero__stats { gap: 22px; }
	html body.hg-navy .hn-hero__stats strong { font-size: 22px; }
	html body.hg-navy .hn-hero::after { height: 40px; }
	html body.hg-navy .hn-trustwrap { margin-top: -64px; }
	html body.hg-navy .hn-trust { grid-template-columns: 1fr 1fr; padding: 16px; gap: 14px; }
	html body.hg-navy .hn-trust li:last-child { grid-column: span 2; }
}

/* ===== Chi tiết sản phẩm v2 (pd2) ===== */
html body.hg-navy .pd2 { --pd2-blue: #1452dc; --pd2-line: #dfe7f7; }
html body.hg-navy .pd2 .hn-crumb .hn-wrap { padding-top: 16px; padding-bottom: 14px; font-size: 14px; }
html body.hg-navy .pd2-top { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 24px; align-items: start; padding-bottom: 32px; }
html body.hg-navy .pd2-gal { position: sticky; top: calc(var(--pd2-top, 0px) + 16px); }
html body.hg-navy .pd2-gal__main { position: relative; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 6px 16px rgba(16, 42, 104, .08); }
html body.hg-navy .pd2-gal__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
html body.hg-navy .pd2-gal__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: #1b2a4a; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, .12); transition: background .2s, color .2s; padding: 0; }
html body.hg-navy .pd2-gal__nav:hover { background: var(--pd2-blue); color: #fff; }
html body.hg-navy .pd2-gal__nav.is-prev { left: 14px; }
html body.hg-navy .pd2-gal__nav.is-next { right: 14px; }
html body.hg-navy .pd2-gal__count { position: absolute; left: 14px; bottom: 14px; background: rgba(2, 11, 39, .6); color: #fff; font-size: 13px; padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(4px); }
html body.hg-navy .pd2-gal__count b { font-weight: 700; }
html body.hg-navy .pd2-gal__thumbs { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
html body.hg-navy .pd2-gal__thumbs button { position: relative; width: 84px; height: 84px; padding: 3px; border-radius: 10px; border: 2px solid transparent; background: #fff; cursor: pointer; overflow: hidden; transition: border-color .2s; }
html body.hg-navy .pd2-gal__thumbs button.is-hidden { display: none; }
html body.hg-navy .pd2-gal__thumbs button.is-active, html body.hg-navy .pd2-gal__thumbs button:hover { border-color: var(--pd2-blue); }
html body.hg-navy .pd2-gal__thumbs img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; display: block; }
html body.hg-navy .pd2-more { position: absolute; inset: 3px; border-radius: 7px; background: rgba(2, 11, 39, .55); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 16px; }

html body.hg-navy .pd2-side { display: flex; flex-direction: column; gap: 14px; }
html body.hg-navy .pd2-head h1 { font-size: 28px; line-height: 1.25; font-weight: 700; color: #020b27; margin: 0 0 6px; letter-spacing: -.01em; }
html body.hg-navy .pd2-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: #6b7690; }
html body.hg-navy .pd2-meta a { color: var(--pd2-blue) !important; font-weight: 600; }
html body.hg-navy .pd2-box { background: #fff; border: 1.5px solid #9bb8f2; border-radius: 14px; padding: 6px; box-shadow: 0 6px 16px rgba(16, 42, 104, .06); }
html body.hg-navy .pd2-price { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 14px 14px 16px; }
html body.hg-navy .pd2-price__val small { display: block; font-size: 13px; color: #6b7690; }
html body.hg-navy .pd2-price__val strong { font-size: 28px; font-weight: 800; color: #020b27; line-height: 1.2; }
html body.hg-navy .pd2-price__val del { margin-left: 8px; color: #98a2b8; font-size: 15px; }
html body.hg-navy .pd2-price__val em { display: block; font-style: normal; font-size: 12.5px; color: #6b7690; }
html body.hg-navy .pd2-price__or { font-size: 13px; color: #6b7690; padding: 0 6px; border-left: 1px solid var(--pd2-line); height: 100%; display: flex; align-items: center; padding-left: 16px; }
html body.hg-navy .pd2-price__ask { display: flex; flex-direction: column; align-items: center; gap: 8px; }
html body.hg-navy .pd2-price__ask > span { font-size: 14px; color: #1b2a4a; }
html body.hg-navy .pd2-pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 8px 0 22px; border-radius: 999px; background: linear-gradient(315deg, #1250dc, #306de4); color: #fff !important; font-weight: 600; font-size: 15px; text-decoration: none !important; box-shadow: 0 6px 16px rgba(20, 82, 220, .25); transition: transform .2s, box-shadow .2s; white-space: nowrap; }
html body.hg-navy .pd2-pill:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(20, 82, 220, .32); }
html body.hg-navy .pd2-pill i { width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--pd2-blue); display: inline-flex; align-items: center; justify-content: center; }
html body.hg-navy .pd2-pill--lg, html body.hg-navy .pd2-pill--block { padding: 0 32px; min-height: 48px; }
html body.hg-navy .pd2-pill--block { display: flex; width: 100%; margin-top: 6px; }
html body.hg-navy .pd2-spec { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; margin: 0; padding: 18px 20px; border-radius: 10px; border: 1px solid var(--pd2-line); background: #fff; }
html body.hg-navy .pd2-spec div { min-width: 0; }
html body.hg-navy .pd2-spec dt { font-size: 13px; color: #6b7690; font-weight: 400; margin: 0 0 4px; }
html body.hg-navy .pd2-spec dd { margin: 0; font-size: 14.5px; font-weight: 600; color: #020b27; line-height: 1.45; }
html body.hg-navy .pd2-short { padding: 14px 16px 8px; font-size: 14.5px; color: #3b4660; }
html body.hg-navy .pd2-short p:last-child { margin-bottom: 0; }

html body.hg-navy .pd2-card { background: #fff; border-radius: 14px; box-shadow: 0 6px 16px rgba(16, 42, 104, .06); padding: 14px; }
html body.hg-navy .pd2-perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
html body.hg-navy .pd2-perk { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid var(--pd2-line); border-radius: 12px; min-width: 0; }
html body.hg-navy .pd2-perk__ic { flex: none; width: 38px; height: 38px; border-radius: 10px; background: #eaf0ff; color: var(--pd2-blue); display: flex; align-items: center; justify-content: center; }
html body.hg-navy .pd2-perk strong { display: block; font-size: 14px; color: #020b27; font-weight: 700; }
html body.hg-navy .pd2-perk small { display: block; font-size: 12.5px; color: #6b7690; line-height: 1.35; }
html body.hg-navy .pd2-contact p { display: flex; align-items: center; gap: 8px; margin: 2px 0 12px; font-weight: 600; font-size: 15px; color: #020b27; }
html body.hg-navy .pd2-contact p svg { color: var(--pd2-blue); }
html body.hg-navy .pd2-contact__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
html body.hg-navy .pd2-contact__row a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border: 1.5px solid #9bb8f2; border-radius: 10px; color: var(--pd2-blue) !important; font-weight: 600; font-size: 15px; text-decoration: none !important; transition: background .2s, color .2s; }
html body.hg-navy .pd2-contact__row a:hover { background: var(--pd2-blue); color: #fff !important; border-color: var(--pd2-blue); }
html body.hg-navy .pd2-contact__row img { border-radius: 5px; }
html body.hg-navy .pd2-contact .hn-reach { padding-top: 12px; border-top: 1px dashed var(--pd2-line); font-size: 13.5px; }

html body.hg-navy .pd2-tabs { position: sticky; top: var(--pd2-top, 0px); z-index: 20; background: #fff; box-shadow: 0 4px 14px rgba(16, 42, 104, .06); }
html body.hg-navy .pd2-tabs .hn-wrap { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
html body.hg-navy .pd2-tabs a { position: relative; flex: none; padding: 15px 14px; font-size: 15px; font-weight: 500; color: #1b2a4a !important; text-decoration: none !important; }
html body.hg-navy .pd2-tabs a.is-active { color: var(--pd2-blue) !important; font-weight: 600; }
html body.hg-navy .pd2-tabs a.is-active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--pd2-blue); }
html body.hg-navy .pd2-sec { padding: 56px 0 8px; scroll-margin-top: calc(var(--pd2-top, 0px) + 60px); }
html body.hg-navy .pd2-sec:last-of-type { padding-bottom: 56px; }
html body.hg-navy .pd2 .hn-cband { margin-top: 56px; }
html body.hg-navy .pd2-h2 { font-size: 28px; font-weight: 700; color: #020b27; margin: 0 0 20px; letter-spacing: -.01em; }
html body.hg-navy .pd2-chips { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 18px; scrollbar-width: none; }
html body.hg-navy .pd2-chips a { flex: none; padding: 9px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--pd2-line); color: #1b2a4a !important; font-size: 14px; text-decoration: none !important; transition: all .2s; }
html body.hg-navy .pd2-chips a:hover { border-color: var(--pd2-blue); color: var(--pd2-blue) !important; }
html body.hg-navy .pd2-chips a.is-active { background: var(--pd2-blue); border-color: var(--pd2-blue); color: #fff !important; }
html body.hg-navy .pd2-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
html body.hg-navy .pd2-sample { display: flex; flex-direction: column; gap: 12px; background: #fff; border-radius: 14px; padding: 10px 10px 14px; box-shadow: 0 6px 16px rgba(16, 42, 104, .06); text-decoration: none !important; transition: transform .25s, box-shadow .25s; }
html body.hg-navy .pd2-sample:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(16, 42, 104, .12); }
html body.hg-navy .pd2-sample__img { display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: #f3f6fc; }
html body.hg-navy .pd2-sample__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
html body.hg-navy .pd2-sample:hover .pd2-sample__img img { transform: scale(1.05); }
html body.hg-navy .pd2-sample__name { display: flex; align-items: center; gap: 8px; justify-content: space-between; font-size: 14.5px; font-weight: 600; color: #020b27; padding: 0 4px; }
html body.hg-navy .pd2-sample__name { overflow: hidden; }
html body.hg-navy .pd2-sample__name i { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #eaf0ff; color: var(--pd2-blue); display: inline-flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }
html body.hg-navy .pd2-sample:hover .pd2-sample__name i { background: var(--pd2-blue); color: #fff; }
html body.hg-navy .pd2-center { display: flex; justify-content: center; margin-top: 26px; }

html body.hg-navy .pd2-desc { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
html body.hg-navy .pd2-article { background: #fff; border-radius: 16px; padding: 28px 32px; box-shadow: 0 6px 16px rgba(16, 42, 104, .06); font-size: 16px; line-height: 1.75; color: #1b2a4a; }
html body.hg-navy .pd2-article img { border-radius: 12px; height: auto; max-width: 100%; }
html body.hg-navy .pd2-article h2, html body.hg-navy .pd2-article h3 { color: #020b27; }
html body.hg-navy .pd2-article table { width: 100%; border-collapse: collapse; border-radius: 10px; overflow: hidden; }
html body.hg-navy .pd2-article th, html body.hg-navy .pd2-article td { border: 1px solid var(--pd2-line); padding: 10px 12px; }
html body.hg-navy .pd2-article th { background: #eef3ff; }
html body.hg-navy .pd2-desc__side { position: sticky; top: calc(var(--pd2-top, 0px) + 72px); }
html body.hg-navy .pd2-consult { padding: 22px; display: flex; flex-direction: column; gap: 10px; }
html body.hg-navy .pd2-consult h3 { margin: 0; font-size: 18px; font-weight: 700; color: #020b27; }
html body.hg-navy .pd2-consult p { margin: 0 0 4px; font-size: 14px; color: #6b7690; }
html body.hg-navy .pd2-consult__item { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--pd2-line); border-radius: 12px; text-decoration: none !important; transition: border-color .2s, background .2s; }
html body.hg-navy .pd2-consult__item:hover { border-color: var(--pd2-blue); background: #f5f8ff; }
html body.hg-navy .pd2-consult__item > span:first-child { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #eaf0ff; color: var(--pd2-blue); display: flex; align-items: center; justify-content: center; font-size: 18px; }
html body.hg-navy .pd2-consult__item > span.is-call { background: linear-gradient(315deg, #1250dc, #306de4); color: #fff; }
html body.hg-navy .pd2-consult__item small { display: block; font-size: 12.5px; color: #6b7690; }
html body.hg-navy .pd2-consult__item strong { display: block; font-size: 16px; color: #020b27; font-weight: 700; }
html body.hg-navy .pd2-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; counter-reset: none; }
html body.hg-navy .pd2-steps li { background: #fff; border-radius: 14px; padding: 18px; box-shadow: 0 6px 16px rgba(16, 42, 104, .06); display: flex; flex-direction: column; gap: 6px; }
html body.hg-navy .pd2-steps b { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(315deg, #1250dc, #306de4); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; margin-bottom: 4px; }
html body.hg-navy .pd2-steps strong { font-size: 15.5px; color: #020b27; }
html body.hg-navy .pd2-steps span { font-size: 13.5px; color: #6b7690; line-height: 1.5; }

@media (max-width: 1100px) {
	html body.hg-navy .pd2-perks { grid-template-columns: 1fr; }
	html body.hg-navy .pd2-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	html body.hg-navy .pd2-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	html body.hg-navy .pd2-top { grid-template-columns: 1fr; }
	html body.hg-navy .pd2-gal { position: static; }
	html body.hg-navy .pd2-perks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	html body.hg-navy .pd2-desc { grid-template-columns: 1fr; }
	html body.hg-navy .pd2-desc__side { position: static; }
}
@media (max-width: 640px) {
	html body.hg-navy .pd2-head h1 { font-size: 22px; }
	html body.hg-navy .pd2-gal__thumbs { justify-content: flex-start; overflow-x: auto; }
	html body.hg-navy .pd2-gal__thumbs button { flex: none; width: 64px; height: 64px; }
	html body.hg-navy .pd2-price { grid-template-columns: 1fr; text-align: left; gap: 10px; }
	html body.hg-navy .pd2-price__or { display: none; }
	html body.hg-navy .pd2-price__ask { flex-direction: row; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--pd2-line); }
	html body.hg-navy .pd2-price__val strong { font-size: 24px; }
	html body.hg-navy .pd2-spec { gap: 14px 16px; padding: 14px; }
	html body.hg-navy .pd2-perks { grid-template-columns: 1fr; }
	html body.hg-navy .pd2-perk { flex-direction: row; align-items: center; padding: 12px; }
	html body.hg-navy .pd2-contact__row a { font-size: 13.5px; gap: 6px; }
	html body.hg-navy .pd2-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
	html body.hg-navy .pd2-sample__name { font-size: 13px; }
	html body.hg-navy .pd2-sample__name i { display: none; }
	html body.hg-navy .pd2-h2 { font-size: 22px; }
	html body.hg-navy .pd2-sec { padding-top: 40px; }
	html body.hg-navy .pd2-article { padding: 18px; font-size: 15px; }
	html body.hg-navy .pd2-steps { grid-template-columns: 1fr 1fr; }
	html body.hg-navy .pd2-tabs a { padding: 13px 10px; font-size: 14px; }
}