/* ===== MENU DỌC NÉP CẠNH ===== */
.hn-contact-wrap{position:fixed;top:var(--hn-vpos,50%);z-index:999998;transform:translateY(-50%);pointer-events:none;isolation:isolate}
.hn-pos-right{right:var(--hn-edge,0)}.hn-pos-left{left:var(--hn-edge,0)}
.hn-contact-panel{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--hn-gap,12px);padding:calc(var(--hn-curve,58px) * .66) var(--hn-pad,13px);min-width:calc(var(--hn-btn,54px) + var(--hn-pad,13px) * 2);pointer-events:auto;overflow:visible}
.hn-panel-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:-1;filter:drop-shadow(0 16px 24px rgba(0,56,150,.30));pointer-events:none}
.hn-pos-left .hn-panel-svg{transform:scaleX(-1)}
.hn-panel-fill{stroke:rgba(255,255,255,.28);stroke-width:1.2;vector-effect:non-scaling-stroke}
.hn-panel-highlight{fill:none;stroke:rgba(255,255,255,.6);stroke-width:1.3;stroke-linecap:round;vector-effect:non-scaling-stroke}
.hn-panel-rail{filter:drop-shadow(0 1px 4px rgba(0,0,0,.23))}
.hn-panel-glow .hn-panel-svg{animation:hn-panel-breathe 3.8s ease-in-out infinite}.hn-panel-glow .hn-panel-highlight{animation:hn-highlight-run 2.8s ease-in-out infinite}
.hn-contact-heading{position:absolute;top:10px;color:var(--hn-heading,#0866d8);font:800 12px/1 Arial,sans-serif;letter-spacing:1.2px;text-transform:uppercase;white-space:nowrap;text-shadow:0 1px 7px rgba(255,255,255,.98);animation:hn-title-float 3s ease-in-out infinite;z-index:3}
.hn-pos-right .hn-contact-heading{right:7px;transform:none}.hn-pos-left .hn-contact-heading{left:7px;transform:none}
.hn-contact-list{display:flex;flex-direction:column;gap:var(--hn-gap,12px);align-items:center;position:relative;z-index:2}
.hn-contact-btn{position:relative;width:var(--hn-btn,54px);height:var(--hn-btn,54px);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff!important;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.24);text-decoration:none!important;pointer-events:auto;isolation:isolate;overflow:visible;animation:hn-float 3.2s ease-in-out infinite,hn-enter .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--hn-delay),var(--hn-delay);transition:transform .25s ease,background .25s ease,box-shadow .25s ease}
.hn-contact-btn:hover{transform:translateX(-5px) scale(1.09);background:rgba(255,255,255,.18);box-shadow:0 10px 24px rgba(0,0,0,.22),0 0 0 4px rgba(255,255,255,.13)}
.hn-pos-left .hn-contact-btn:hover{transform:translateX(5px) scale(1.09)}
.hn-contact-btn:active,.hn-contact-btn.hn-tap{transform:scale(.94)}.hn-contact-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.hn-icon{position:relative;z-index:2;width:var(--hn-icon,30px);height:var(--hn-icon,30px);display:grid;place-items:center;overflow:hidden;border-radius:22%;box-sizing:border-box}
.hn-icon svg{width:100%;height:100%;fill:currentColor;display:block}.hn-zalo-mark{font:800 calc(var(--hn-icon,30px) * .48)/1 Arial,sans-serif;letter-spacing:-.7px;border:2px solid currentColor;border-radius:7px;padding:4px 3px;box-sizing:border-box}
.hn-custom-icon{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center!important;border-radius:18%;filter:none!important;box-sizing:border-box}
.hn-ring{position:absolute;inset:-5px;border:2px solid rgba(255,255,255,.58);border-radius:50%;opacity:0;animation:hn-ring 2.2s ease-out infinite;animation-delay:var(--hn-delay);z-index:-2}
.hn-label{position:absolute;top:50%;transform:translateY(-50%) translateX(8px);padding:8px 12px;border-radius:10px;background:#111827;color:#fff;font:600 13px/1.2 Arial,sans-serif;white-space:nowrap;opacity:0;visibility:hidden;box-shadow:0 8px 20px rgba(0,0,0,.22);transition:.22s ease}.hn-pos-right .hn-label{right:calc(100% + 12px)}.hn-pos-left .hn-label{left:calc(100% + 12px);transform:translateY(-50%) translateX(-8px)}.hn-contact-btn:hover .hn-label{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0)}.hn-hide-label .hn-label{display:none}

/* ===== MENU NGANG CHÂN TRANG ===== */
.hn-mobile-bar{position:fixed;left:50%;bottom:var(--hn-mobile-bottom,0);width:min(100vw,var(--hn-mobile-max,760px));height:calc(var(--hn-mobile-height,76px) + env(safe-area-inset-bottom));padding:0 4px env(safe-area-inset-bottom);transform:translateX(-50%);display:grid;grid-template-columns:repeat(var(--hn-mobile-count,5),minmax(0,1fr));align-items:stretch;background:var(--hn-mobile-bg,#fff);border-radius:var(--hn-mobile-radius,20px) var(--hn-mobile-radius,20px) 0 0;z-index:999999;isolation:isolate;box-sizing:border-box;overflow:visible;-webkit-font-smoothing:antialiased}
.hn-mobile-shadow{box-shadow:0 -10px 30px rgba(15,35,65,.16),0 -1px 0 rgba(15,35,65,.08)}
.hn-mobile-hump{position:absolute;z-index:-1;left:var(--hn-feature-x,50%);top:-35px;width:102px;height:64px;transform:translateX(-50%);background:var(--hn-mobile-bg,#fff);border-radius:52px 52px 0 0;filter:drop-shadow(0 -5px 8px rgba(15,35,65,.08));pointer-events:none}
.hn-mobile-item{position:relative;min-width:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:8px 2px 5px;text-decoration:none!important;color:var(--hn-mobile-text,#202124)!important;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;z-index:2}
.hn-mobile-item:focus-visible{outline:2px solid var(--hn-item,#159fe3);outline-offset:-4px;border-radius:12px}
.hn-mobile-icon-wrap{width:calc(var(--hn-mobile-icon,30px) + 16px);height:calc(var(--hn-mobile-icon,30px) + 16px);display:grid;place-items:center;border-radius:50%;transition:transform .22s ease,filter .22s ease}
.hn-mobile-icon{width:var(--hn-mobile-icon,30px);height:var(--hn-mobile-icon,30px);display:grid;place-items:center;color:var(--hn-item,#159fe3);overflow:hidden;border-radius:24%}
.hn-mobile-icon svg{width:100%;height:100%;fill:currentColor;display:block}
.hn-mobile-icon .hn-zalo-mark{font-size:calc(var(--hn-mobile-icon,30px) * .42);padding:4px 2px;border-width:2px}
.hn-mobile-label{max-width:100%;font:700 var(--hn-mobile-label,13px)/1.1 Arial,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;letter-spacing:-.2px}
.hn-mobile-item:hover .hn-mobile-icon-wrap{transform:translateY(-3px) scale(1.05);filter:brightness(1.05)}
.hn-mobile-item:active .hn-mobile-icon-wrap,.hn-mobile-item.hn-tap .hn-mobile-icon-wrap{transform:scale(.88)}
.hn-mobile-featured{padding-top:28px;overflow:visible}
.hn-mobile-featured .hn-mobile-icon-wrap{position:absolute;top:-31px;width:72px;height:72px;background:linear-gradient(145deg,var(--hn-item,#e50063),color-mix(in srgb,var(--hn-item,#e50063) 72%,#6b21a8));border:5px solid var(--hn-mobile-bg,#fff);box-shadow:0 9px 20px color-mix(in srgb,var(--hn-item,#e50063) 36%,transparent),inset 0 1px 0 rgba(255,255,255,.35)}
.hn-mobile-featured .hn-mobile-icon{width:calc(var(--hn-mobile-icon,30px) + 5px);height:calc(var(--hn-mobile-icon,30px) + 5px);color:#fff}
.hn-mobile-featured .hn-mobile-label{margin-top:2px;padding:4px 10px;border-radius:999px;background:linear-gradient(90deg,var(--hn-item,#e50063),color-mix(in srgb,var(--hn-item,#e50063) 70%,#00a7c8));color:#fff;box-shadow:0 3px 10px color-mix(in srgb,var(--hn-item,#e50063) 24%,transparent)}
.hn-mobile-motion .hn-mobile-item{animation:hn-mobile-enter .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--hn-mobile-delay,0s)}
.hn-mobile-motion .hn-mobile-featured .hn-mobile-icon-wrap{animation:hn-mobile-pulse 2.6s ease-in-out infinite}

/* Trình duyệt cũ chưa hỗ trợ color-mix */
@supports not (color:color-mix(in srgb,red 50%,blue)){
  .hn-mobile-featured .hn-mobile-icon-wrap{background:linear-gradient(145deg,var(--hn-item,#e50063),#8a1679);box-shadow:0 9px 20px rgba(229,0,99,.28),inset 0 1px 0 rgba(255,255,255,.35)}
  .hn-mobile-featured .hn-mobile-label{background:linear-gradient(90deg,var(--hn-item,#e50063),#00a7c8)}
}

@keyframes hn-enter{from{opacity:0;transform:translateY(18px) scale(.7)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes hn-float{0%,100%{translate:0 0}50%{translate:0 -4px}}
@keyframes hn-ring{0%{transform:scale(.72);opacity:.62}70%,100%{transform:scale(1.3);opacity:0}}
@keyframes hn-panel-breathe{0%,100%{filter:drop-shadow(0 16px 24px rgba(0,56,150,.30)) brightness(1)}50%{filter:drop-shadow(0 18px 32px rgba(0,90,220,.42)) brightness(1.06)}}
@keyframes hn-highlight-run{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes hn-title-float{0%,100%{translate:0 0}50%{translate:0 -3px}}
@keyframes hn-mobile-enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes hn-mobile-pulse{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.035)}}

@media(min-width:768px){.hn-hide-desktop,.hn-mobile-hide-desktop{display:none!important}}
@media(max-width:767px){
  .hn-hide-mobile,.hn-mobile-hide-mobile,.hn-contact-wrap{display:none!important}
  .hn-mobile-bar{width:100%;border-radius:var(--hn-mobile-radius,20px) var(--hn-mobile-radius,20px) 0 0}
  body.hn-fcb-has-mobile-bar{padding-bottom:var(--hn-fcb-mobile-reserve,90px)!important}
}

@media(max-width:430px){
  .hn-mobile-item{gap:4px;padding-left:1px;padding-right:1px}
  .hn-mobile-label{font-size:min(var(--hn-mobile-label,13px),12px)}
  .hn-mobile-featured .hn-mobile-label{padding-left:7px;padding-right:7px}
}

@media(prefers-reduced-motion:reduce){.hn-contact-btn,.hn-ring,.hn-panel-svg,.hn-panel-highlight,.hn-contact-heading,.hn-mobile-item,.hn-mobile-featured .hn-mobile-icon-wrap{animation:none!important}}

/* v2.0.2 — khóa chế độ hiển thị: desktop chỉ menu dọc, mobile chỉ menu chân */
@media (min-width:768px){
  .hn-mobile-bar{display:none!important;visibility:hidden!important;pointer-events:none!important}
}
@media (max-width:767px){
  .hn-contact-wrap{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important}
  .hn-mobile-bar:not(.hn-mobile-hide-mobile){display:grid!important;visibility:visible!important;pointer-events:auto!important}
}

/* ===== v2.1.0: BẢNG DANH MỤC & LIÊN HỆ BẬT LÊN TRÊN MOBILE ===== */
html.hn-fcb-sheet-open,body.hn-fcb-sheet-open{overflow:hidden!important;overscroll-behavior:none}
.hn-mobile-sheet-layer{position:fixed;inset:0;z-index:1000002;display:none;align-items:flex-end;justify-content:center;font-family:Arial,sans-serif;-webkit-font-smoothing:antialiased}
.hn-mobile-sheet-layer[hidden]{display:none!important}
.hn-mobile-sheet-backdrop{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:rgba(5,15,30,.58);opacity:0;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);transition:opacity .26s ease;cursor:pointer}
.hn-mobile-sheet{position:relative;width:min(100%,760px);max-height:min(78vh,680px);padding:0 0 calc(14px + env(safe-area-inset-bottom));background:#fff;border-radius:26px 26px 0 0;box-shadow:0 -18px 55px rgba(2,17,38,.28);transform:translateY(105%);opacity:0;transition:transform .3s cubic-bezier(.2,.85,.2,1),opacity .22s ease;overflow:hidden;display:none;color:#172033}
.hn-mobile-sheet.hn-sheet-active{display:flex;flex-direction:column}
.hn-sheet-layer-open .hn-mobile-sheet-backdrop{opacity:1}
.hn-sheet-layer-open .hn-mobile-sheet.hn-sheet-active{transform:translateY(0);opacity:1}
.hn-mobile-sheet-handle{display:block;flex:0 0 auto;width:46px;height:5px;margin:9px auto 2px;border-radius:999px;background:#d4dbe5}
.hn-mobile-sheet-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 18px 13px;border-bottom:1px solid #edf0f4;background:linear-gradient(180deg,#fff,#fbfcff)}
.hn-mobile-sheet-header h3{margin:1px 0 0!important;padding:0!important;font:800 21px/1.2 Arial,sans-serif!important;color:#152039!important;letter-spacing:-.35px;text-transform:none!important}
.hn-mobile-sheet-kicker{display:block;font:800 10px/1 Arial,sans-serif;color:#0876e8;letter-spacing:1.5px}
.hn-mobile-sheet-close{flex:0 0 auto;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:#eef5ff;color:#126fd4;font:400 29px/36px Arial,sans-serif;cursor:pointer;box-shadow:none!important}
.hn-mobile-sheet-close:active{transform:scale(.92)}
.hn-mobile-sheet-body{min-height:0;padding:12px 15px 4px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.hn-mobile-sheet-menu-body{padding-left:12px;padding-right:12px}
.hn-sheet-section-title{margin:14px 6px 7px!important;padding:0!important;font:800 12px/1.3 Arial,sans-serif!important;letter-spacing:.65px;text-transform:uppercase;color:#657188!important}
.hn-sheet-empty{margin:8px 3px 14px;padding:16px;border:1px dashed #cbd7e7;border-radius:14px;background:#f8fbff;color:#64748b;font:600 14px/1.5 Arial,sans-serif;text-align:center}

.hn-sheet-menu-list,.hn-sheet-menu-list ul{list-style:none!important;margin:0!important;padding:0!important}
.hn-sheet-menu-list>li{margin:0 0 7px!important}
.hn-sheet-menu-list li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;border:1px solid #e6ebf2;border-radius:13px;background:#fff;overflow:visible;box-shadow:0 4px 13px rgba(32,68,105,.055)}
.hn-sheet-menu-list li>a{display:flex!important;align-items:center!important;min-height:48px;padding:10px 13px!important;border:0!important;background:transparent!important;color:#1d293d!important;font:700 14px/1.3 Arial,sans-serif!important;text-decoration:none!important;box-shadow:none!important;white-space:normal!important}
.hn-sheet-menu-list li>a:before{content:"";flex:0 0 auto;width:7px;height:7px;margin-right:10px;border-radius:50%;background:linear-gradient(135deg,#168ff0,#00b6c8);box-shadow:0 0 0 4px rgba(22,143,240,.1)}
.hn-sheet-menu-list li>a:hover,.hn-sheet-menu-list li>a:focus{color:#0866d8!important}
.hn-submenu-toggle{grid-column:2;width:38px;height:38px;margin-right:5px;padding:0;border:0;border-radius:11px;background:#eef6ff;color:#0875df;font:800 23px/1 Arial,sans-serif;cursor:pointer;transition:transform .2s ease,background .2s ease}
.hn-submenu-toggle span{display:block;transition:transform .22s ease}
.hn-submenu-open>.hn-submenu-toggle{background:#0875df;color:#fff}
.hn-submenu-open>.hn-submenu-toggle span{transform:rotate(45deg)}
.hn-sheet-menu-list li>ul{grid-column:1/-1;width:100%;padding:0 8px 8px 17px!important;border-top:1px solid #edf1f6;background:#fbfdff}
.hn-sheet-menu-list li>ul[hidden]{display:none!important}
.hn-sheet-menu-list li>ul li{margin-top:7px!important;border-radius:11px;box-shadow:none;background:#fff}
.hn-sheet-menu-list li>ul li>a{min-height:43px;padding-top:8px!important;padding-bottom:8px!important;font-size:13px!important;font-weight:650!important}
.hn-sheet-menu-list li>ul li>a:before{width:5px;height:5px;margin-right:9px;box-shadow:none}
.hn-sheet-menu-list .current-menu-item>a,.hn-sheet-menu-list .current_page_item>a{color:#0866d8!important;background:#f2f8ff!important;border-radius:12px}

.hn-contact-sheet-list{display:grid;gap:9px}
.hn-contact-sheet-item{display:grid!important;grid-template-columns:52px minmax(0,1fr) 20px;align-items:center;gap:12px;min-height:68px;padding:8px 12px 8px 8px;border:1px solid #e8edf4;border-radius:16px;background:#fff;color:#172033!important;text-decoration:none!important;box-shadow:0 6px 18px rgba(30,64,100,.07);transition:transform .18s ease,box-shadow .18s ease}
.hn-contact-sheet-item:active{transform:scale(.98);box-shadow:0 3px 10px rgba(30,64,100,.08)}
.hn-contact-sheet-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:15px;color:#fff;overflow:hidden}
.hn-contact-sheet-icon .hn-icon{width:31px;height:31px;color:inherit}
.hn-contact-sheet-icon>svg{width:29px;height:29px;fill:currentColor}
.hn-contact-sheet-icon .hn-zalo-mark{font-size:12px;border-color:currentColor;color:inherit}
.hn-contact-sheet-icon .hn-custom-icon{width:34px!important;height:34px!important}
.hn-sheet-phone .hn-contact-sheet-icon{background:linear-gradient(135deg,#ef174f,#ca006d)}
.hn-sheet-zalo .hn-contact-sheet-icon{background:linear-gradient(135deg,#168fec,#0877c9)}
.hn-sheet-facebook .hn-contact-sheet-icon{background:linear-gradient(135deg,#1899ff,#5c54ea)}
.hn-sheet-tiktok .hn-contact-sheet-icon{background:linear-gradient(135deg,#181a23,#343947)}
.hn-contact-sheet-copy{display:flex;min-width:0;flex-direction:column;gap:3px}
.hn-contact-sheet-copy strong{font:800 15px/1.2 Arial,sans-serif;color:#182237}
.hn-contact-sheet-copy small{font:500 12px/1.35 Arial,sans-serif;color:#718096;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hn-contact-sheet-arrow{color:#9aabc0;font:400 28px/1 Arial,sans-serif;text-align:right}

@media(max-width:767px){
  .hn-mobile-sheet-layer{display:flex}
}
@media(min-width:768px){
  .hn-mobile-sheet-layer{display:none!important}
}
@media(max-width:380px){
  .hn-mobile-sheet{max-height:82vh;border-radius:22px 22px 0 0}
  .hn-mobile-sheet-header{padding-left:14px;padding-right:14px}
  .hn-mobile-sheet-header h3{font-size:19px!important}
  .hn-mobile-sheet-body{padding-left:10px;padding-right:10px}
  .hn-contact-sheet-item{grid-template-columns:47px minmax(0,1fr) 16px;gap:9px}
  .hn-contact-sheet-icon{width:47px;height:47px}
}
@media(prefers-reduced-motion:reduce){
  .hn-mobile-sheet-backdrop,.hn-mobile-sheet,.hn-submenu-toggle,.hn-submenu-toggle span{transition:none!important}
}

/* ===== v2.2.0: DANH MỤC SẢN PHẨM CÓ ICON ===== */
.hn-product-section-title{color:#d97706!important}
.hn-product-category-list li>a:before{display:none!important}
.hn-product-category-list li>a{gap:11px!important}
.hn-category-icon{flex:0 0 40px;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;overflow:hidden;background:linear-gradient(145deg,#fff7e6,#ffedd0);border:1px solid #f7d59d;color:#e27a00;box-shadow:0 3px 10px rgba(217,119,6,.10)}
.hn-category-icon-image{display:block;width:100%;height:100%;object-fit:cover}
.hn-category-icon-default{display:grid;place-items:center;width:23px;height:23px}
.hn-category-icon-default svg{width:100%;height:100%;fill:currentColor}
.hn-category-name{min-width:0;overflow-wrap:anywhere}
.hn-product-category-list li>ul .hn-category-icon{width:34px;height:34px;flex-basis:34px;border-radius:10px}
.hn-product-category-list li>ul .hn-category-icon-default{width:19px;height:19px}
