/* =========================================================================
   In Hoàng Gia — cân chỉnh tỉ lệ & điểm chạm mềm (10/2026). Nạp cuối cùng.
   ========================================================================= */
body.hg-navy { --n-r: 12px; --n-ease: cubic-bezier(.22,.61,.36,1); --n-shadow: 0 8px 24px rgba(7,26,63,.10); --n-shadow-s: 0 2px 8px rgba(7,26,63,.06); }

/* ---------- Điểm chạm: bo góc đồng nhất, chuyển động mềm ---------- */
body.hg-navy .hn a, body.hg-navy .hn button, body.hg-navy .hn-mbar a, body.hg-navy .hn-float a { -webkit-tap-highlight-color: transparent; }
body.hg-navy .hn-btn {
	border-radius: var(--n-r); min-height: 48px; padding: 0 20px; font-size: 15px;
	transition: background-color .25s var(--n-ease), border-color .25s var(--n-ease), color .25s var(--n-ease), box-shadow .25s var(--n-ease), transform .25s var(--n-ease);
}
body.hg-navy .hn-btn:hover { transform: translateY(-1px); box-shadow: var(--n-shadow-s); }
body.hg-navy .hn-btn:active { transform: translateY(0) scale(.985); box-shadow: none; }
body.hg-navy .hn-btn--lg { min-height: 52px; font-size: 16px; }
body.hg-navy .hn-btn--sm { min-height: 40px; border-radius: 10px; font-size: 14px; }
body.hg-navy .hn-btn--line, body.hg-navy .hn-btn--ghost { border-color: #d9dfea; }
body.hg-navy .hn-btn--zalo::before,
body.hg-navy .hn-mbar__zalo::before,
body.hg-navy .hn-foot__social a.is-zalo::before { content: ""; flex: none; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' rx='12' fill='%230068ff'/%3E%3Cpath d='M10 14.5c0-2.5 2-4.5 4.5-4.5h19c2.5 0 4.5 2 4.5 4.5v13c0 2.5-2 4.5-4.5 4.5H22l-7 6v-6h-.5c-2.5 0-4.5-2-4.5-4.5z' fill='%23fff'/%3E%3Ctext x='24' y='25.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='10.5' font-weight='700' fill='%230068ff'%3EZalo%3C/text%3E%3C/svg%3E") center / contain no-repeat; }
body.hg-navy .hn-foot__social a.is-zalo::before { width: 18px; height: 18px; }
body.hg-navy .hn-card__media, body.hg-navy .hn-bento__item img, body.hg-navy .hn-gallery a, body.hg-navy .hn-tile, body.hg-navy .hn-gal__main { border-radius: 14px; }
body.hg-navy .hn-card__media img, body.hg-navy .hn-gallery img, body.hg-navy .hn-tile img { transition: transform .7s var(--n-ease); }
body.hg-navy .hn-sub__item, body.hg-navy .hn-chip, body.hg-navy .hn-tab, body.hg-navy .hn-sort a { transition: background-color .25s var(--n-ease), color .25s var(--n-ease), border-color .25s var(--n-ease); }
body.hg-navy .hn-faq summary::after { transition: transform .3s var(--n-ease); }
body.hg-navy .hn :focus-visible { outline: 2px solid rgba(29,78,216,.45); outline-offset: 3px; border-radius: 8px; }

/* ---------- Trang chi tiết sản phẩm: cân đối, gọn hơn ---------- */
body.hg-navy .hn-pd { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; padding-top: 20px; padding-bottom: 56px; max-width: 1180px; }
body.hg-navy .hn-gal { top: 96px; gap: 12px; }
body.hg-navy .hn-gal__main { max-height: 560px; }
body.hg-navy .hn-gal__thumbs { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
body.hg-navy .hn-gal__thumbs button { border-radius: 10px; border-width: 2px; transition: border-color .2s var(--n-ease), opacity .2s; opacity: .75; }
body.hg-navy .hn-gal__thumbs button.is-active, body.hg-navy .hn-gal__thumbs button:hover { opacity: 1; }
body.hg-navy .hn-buy { gap: 16px; padding-top: 4px; }
body.hg-navy .hn-buy h1 { font-size: clamp(24px, 2.1vw, 30px); line-height: 1.25; letter-spacing: -.015em; }
body.hg-navy .hn-buy__cats a { font-size: 11px; }
body.hg-navy .hn-price { align-items: center; padding-bottom: 16px; gap: 8px 20px; }
body.hg-navy .hn-price small { font-size: 12px; }
body.hg-navy .hn-price__val strong { font-size: 28px; letter-spacing: -.01em; }
body.hg-navy .hn-price__val del { font-size: 14px; }
body.hg-navy .hn-price__note { font-size: 12.5px; max-width: 240px; }
body.hg-navy .hn-buy__spec { font-size: 14px; max-height: 240px; border-radius: var(--n-r); }
body.hg-navy .hn-buy__cta { gap: 10px; }
body.hg-navy .hn-buy__cta > span { font-size: 13.5px; }
body.hg-navy .hn-buy__cta .hn-btn--gold { min-height: 52px; font-size: 16px; }
body.hg-navy .hn-buy__row { gap: 10px; }
body.hg-navy .hn-buy__row .hn-btn { min-height: 46px; font-size: 15px; }
body.hg-navy .hn-buy__row .hn-btn--zalo { background: #f2f7ff; border-color: #cfe0ff; color: #0058d6 !important; }
body.hg-navy .hn-buy__row .hn-btn--zalo:hover { background: #e6f0ff; border-color: #0068ff; }
body.hg-navy .hn-buy .hn-reach { padding: 12px 14px; gap: 6px 18px; font-size: 13px; border-radius: var(--n-r); }
body.hg-navy .hn-trustlist { gap: 8px 16px; padding-top: 0; }
body.hg-navy .hn-trustlist li { font-size: 13px; }
body.hg-navy .hn-ptabs { margin-bottom: 24px; }
body.hg-navy .hn-ptab { min-height: 44px; font-size: 15px; transition: color .2s var(--n-ease), border-color .2s var(--n-ease); }

/* ---------- Nút liên hệ nổi (máy tính) ---------- */
body.hg-navy .hn-float { position: fixed; right: 20px; bottom: 20px; z-index: 9990; display: flex; flex-direction: column; gap: 10px; }
body.hg-navy .hn-float__btn {
	position: relative; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%;
	background: #fff; color: #071a3f !important; box-shadow: var(--n-shadow); text-decoration: none !important;
	transition: transform .3s var(--n-ease), box-shadow .3s var(--n-ease);
}
body.hg-navy .hn-float__btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(7,26,63,.16); }
body.hg-navy .hn-float__btn.is-call { background: #071a3f; color: #fff !important; }
body.hg-navy .hn-float__btn.is-call::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(7,26,63,.35); animation: hn-pulse 2.4s var(--n-ease) infinite; }
body.hg-navy .hn-float__btn img { width: 28px; height: 28px; object-fit: contain; }
body.hg-navy .hn-float__btn .fa-facebook-messenger { font-size: 22px; color: #0866ff; }
body.hg-navy .hn-float__tip {
	position: absolute; right: calc(100% + 12px); top: 50%; display: flex; flex-direction: column; padding: 8px 14px; border-radius: 10px;
	background: #fff; color: #071a3f; box-shadow: var(--n-shadow); font-size: 14px; font-weight: 700; line-height: 1.25; white-space: nowrap;
	opacity: 0; transform: translate(6px, -50%); pointer-events: none; transition: opacity .25s var(--n-ease), transform .25s var(--n-ease);
}
body.hg-navy .hn-float__tip small { font-size: 11px; font-weight: 600; color: #55607a; }
body.hg-navy .hn-float__btn:hover .hn-float__tip, body.hg-navy .hn-float__btn:focus-visible .hn-float__tip { opacity: 1; transform: translate(0, -50%); }
/* Biểu tượng Zalo đặc, dễ nhận ra ở kích thước nhỏ */
body.hg-navy .hn-float__btn.is-zalo img { display: none; }
body.hg-navy .hn-float__btn.is-zalo::before { content: ""; width: 30px; height: 30px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' rx='12' fill='%230068ff'/%3E%3Cpath d='M10 14.5c0-2.5 2-4.5 4.5-4.5h19c2.5 0 4.5 2 4.5 4.5v13c0 2.5-2 4.5-4.5 4.5H22l-7 6v-6h-.5c-2.5 0-4.5-2-4.5-4.5z' fill='%23fff'/%3E%3Ctext x='24' y='25.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='10.5' font-weight='700' fill='%230068ff'%3EZalo%3C/text%3E%3C/svg%3E") center / contain no-repeat; }
/* Nút gọi nổi: luôn hiện số hotline */
body.hg-navy .hn-float { align-items: flex-end; }
body.hg-navy .hn-float__btn.is-call { width: auto; padding: 0 20px 0 16px; gap: 10px; border-radius: 999px; }
body.hg-navy .hn-float__num { display: flex; flex-direction: column; line-height: 1.15; font-size: 16px; font-weight: 800; letter-spacing: .2px; white-space: nowrap; }
body.hg-navy .hn-float__num small { font-size: 11px; font-weight: 600; color: #c7d2ea; letter-spacing: 0; }
body.hg-navy .hn-float__btn.is-call::after { border-radius: 999px; }
/* Nút nổi: Zalo & fanpage cũng hiện chữ luôn (dạng viên thuốc như hotline) */
body.hg-navy .hn-float__btn.is-zalo, body.hg-navy .hn-float__btn.is-msg { width: auto; padding: 0 20px 0 12px; gap: 10px; border-radius: 999px; }
body.hg-navy .hn-float__btn.is-zalo .hn-float__num, body.hg-navy .hn-float__btn.is-msg .hn-float__num { color: #071a3f; font-size: 15px; }
body.hg-navy .hn-float__btn.is-zalo .hn-float__num small, body.hg-navy .hn-float__btn.is-msg .hn-float__num small { color: #55607a; }
body.hg-navy .hn-float__btn.is-msg .fa-facebook-messenger { width: 30px; text-align: center; }
body.hg-navy .hn-float__btn.is-call, body.hg-navy .hn-float__btn.is-zalo, body.hg-navy .hn-float__btn.is-msg { min-width: 182px; justify-content: flex-start; }
/* Thanh liên hệ điện thoại: 2 dòng chữ nhỏ */
@media (max-width: 850px) {
	body.hg-navy .hn-mbar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding-left: 8px; padding-right: 8px; }
	body.hg-navy .hn-mbar a { gap: 5px; padding: 0 6px; min-width: 0; justify-content: center; }
	body.hg-navy .hn-mbar a > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; font-size: 12px; font-weight: 800; white-space: nowrap; text-align: left; }
	body.hg-navy .hn-mbar a > span small { font-size: 10.5px; font-weight: 600; opacity: .8; }
	body.hg-navy .hn-mbar .hn-ic { width: 16px; height: 16px; }
	body.hg-navy .hn-mbar__zalo::before { width: 18px; height: 18px; }
	body.hg-navy .hn-mbar__msg .fa-facebook-messenger { font-size: 17px; color: #0866ff; }
}
@media (max-width: 380px) {
	body.hg-navy .hn-mbar a { gap: 4px; padding: 0 4px; }
	body.hg-navy .hn-mbar a > span { font-size: 11px; }
	body.hg-navy .hn-mbar a > span small { font-size: 10px; }
	body.hg-navy .hn-mbar__zalo::before { width: 16px; height: 16px; }
	body.hg-navy .hn-mbar__msg .fa-facebook-messenger { font-size: 15px; }
}
/* ---------- Trang danh mục gọn: tiêu đề + danh mục con + lưới sản phẩm ---------- */
body.hg-navy .hn-chead { display: flex; flex-direction: column; gap: 14px; padding-top: 20px; padding-bottom: 4px; }
body.hg-navy .hn-chead h1 { margin: 0; font-size: clamp(26px, 2.4vw, 32px); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: #071a3f; }
body.hg-navy .hn-chead__sub { display: flex; flex-wrap: wrap; gap: 8px; }
body.hg-navy .hn-chead__sub a { padding: 7px 14px; border-radius: 999px; border: 1px solid #e3e8f1; background: #fff; color: #0f1b33 !important; font-size: 14px; font-weight: 500; text-decoration: none !important; transition: background-color .2s, border-color .2s; }
body.hg-navy .hn-chead__sub a:hover { background: #f4f6fa; border-color: #cfd6e3; }
body.hg-navy .hn-chead + .hn-listing { padding-top: 24px; }
@media (max-width: 640px) {
	body.hg-navy .hn-chead__sub { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
	body.hg-navy .hn-chead__sub a { flex: none; }
}
@keyframes hn-pulse { 0% { box-shadow: 0 0 0 0 rgba(7,26,63,.35); } 70% { box-shadow: 0 0 0 14px rgba(7,26,63,0); } 100% { box-shadow: 0 0 0 0 rgba(7,26,63,0); } }

@media (max-width: 900px) {
	body.hg-navy .hn-pd { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- Thanh liên hệ điện thoại ---------- */
@media (max-width: 850px) {
	body.hg-navy .hn-float { display: none; }
	body.hg-navy .hn-mbar { padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); gap: 8px; border-top: 1px solid #e8ecf3; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); }
	body.hg-navy .hn-mbar a { min-height: 46px; border-radius: var(--n-r); font-size: 15px; font-weight: 700; transition: transform .2s var(--n-ease), background-color .2s; }
	body.hg-navy .hn-mbar a:active { transform: scale(.97); }
	body.hg-navy .hn-mbar__zalo { background: #f2f7ff !important; border: 1px solid #cfe0ff !important; color: #0058d6 !important; }
	body.hg-navy .hn-mbar__msg { border: 1px solid #d9dfea !important; }
	body.hg-navy .hn-pd { gap: 24px; padding-top: 8px; }
	body.hg-navy .hn-gal { position: static; }
}
@media (max-width: 640px) {
	body.hg-navy .hn-gal__thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	body.hg-navy .hn-buy h1 { font-size: 23px; }
	body.hg-navy .hn-price__val strong { font-size: 26px; }
	body.hg-navy .hn-price__note { max-width: none; }
	body.hg-navy .hn-trustlist { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- Căn thẳng mép đầu trang với nội dung (logo, Mẫu, menu = mép trái nội dung) ---------- */
body.hg-navy #header .container {
	width: 100% !important; max-width: 1240px !important; margin-left: auto !important; margin-right: auto !important;
	padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important;
}
body.hg-navy #header .hg-primary-nav__list { margin-left: -12px !important; }
body.hg-navy #header .hd-top__branch-phone { width: auto !important; min-width: max-content !important; flex: none !important; white-space: nowrap !important; }
body.hg-navy #header .hd-top__branch-phones { width: auto !important; flex: none !important; }
@media (max-width: 640px) {
	body.hg-navy #header .container { padding-left: 16px !important; padding-right: 16px !important; }
}
@media (prefers-reduced-motion: reduce) {
	body.hg-navy .hn-float__btn.is-call::after { animation: none; }
	body.hg-navy .hn-btn:hover, body.hg-navy .hn-float__btn:hover { transform: none; }
}