/* Compact floating contact icons for desktop and mobile. */
#root:has(.floating.has-zalo) .floating.has-zalo {
  position: fixed;
  z-index: 70;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom));
  left: auto;
  display: flex;
  width: max-content;
  height: auto;
  min-height: 0;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#root:has(.floating.has-zalo) .floating.has-zalo > a {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  display: grid;
  box-sizing: border-box;
  width: 56px;
  min-width: 56px;
  height: 56px;
  min-height: 56px;
  padding: 0;
  place-items: center;
  overflow: visible;
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: 50%;
  color: #fff !important;
  font: inherit;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 7px 18px rgb(8 31 53 / 22%), 0 2px 5px rgb(8 31 53 / 12%);
  isolation: isolate;
  transition: none !important;
  transform: none !important;
  filter: none !important;
}

#root:has(.floating.has-zalo) .floating.has-zalo > a.floating-phone {
  order: 0;
  background: #17c964;
}

#root:has(.floating.has-zalo) .floating.has-zalo > a.floating-zalo {
  order: 1;
  background: #0877ee;
  border-color: rgb(255 255 255 / 65%);
}

#root:has(.floating.has-zalo) .floating.has-zalo > a.floating-phone:hover,
#root:has(.floating.has-zalo) .floating.has-zalo > a.floating-phone:active {
  background: #17c964;
}

#root:has(.floating.has-zalo) .floating.has-zalo > a.floating-zalo:hover,
#root:has(.floating.has-zalo) .floating.has-zalo > a.floating-zalo:active {
  background: #0877ee;
}

#root:has(.floating.has-zalo) .floating.has-zalo > a:hover,
#root:has(.floating.has-zalo) .floating.has-zalo > a:active {
  width: 56px;
  min-width: 56px;
  height: 56px;
  min-height: 56px;
  padding: 0;
  transform: none !important;
  filter: none !important;
  box-shadow: 0 7px 18px rgb(8 31 53 / 22%), 0 2px 5px rgb(8 31 53 / 12%);
}

#root:has(.floating.has-zalo) .floating.has-zalo > a:focus-visible {
  outline: 3px solid #ff9a43;
  outline-offset: 3px;
}

#root:has(.floating.has-zalo) .floating-phone .floating-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible;
  clip: auto;
  clip-path: none;
  opacity: 1 !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none;
  border-radius: 0;
  background: transparent;
}

#root:has(.floating.has-zalo) .floating-phone svg {
  display: block;
  width: 24px;
  height: 24px;
  transform: none !important;
  animation: none !important;
  fill: currentColor;
  stroke: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#root:has(.floating.has-zalo) .floating-zalo-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 48px;
  height: 48px;
  max-width: none !important;
  margin: 0 !important;
  object-fit: contain;
  border-radius: 50%;
  transform: translate(-50%, -50%) !important;
  pointer-events: none;
}

#root:has(.floating.has-zalo) .floating-badge {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: grid;
  box-sizing: border-box;
  clip: auto !important;
  clip-path: none !important;
  opacity: 1 !important;
  transform: none !important;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #ff304f;
  color: #fff;
  font: 700 11px/1 Arial, sans-serif;
  pointer-events: none;
}
#root:has(.floating.has-zalo) .floating.has-zalo > a::before,
#root:has(.floating.has-zalo) .floating.has-zalo > a::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

@media (max-width: 760px) {
  #root:has(.floating.has-zalo) .floating.has-zalo {
    right: 12px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    left: auto;
    display: flex;
    width: max-content;
    max-width: none;
    padding: 0;
    gap: 9px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #root:has(.floating.has-zalo) .floating.has-zalo > a,
  #root:has(.floating.has-zalo) .floating.has-zalo > a:hover,
  #root:has(.floating.has-zalo) .floating.has-zalo > a:active {
    width: 56px;
    min-width: 56px;
    height: 56px;
    min-height: 56px;
    padding: 0;
  }

  #root:has(.floating.has-zalo) .floating-phone .floating-icon {
    width: 26px;
    height: 26px;
  }

  #root:has(.floating.has-zalo) .floating-phone svg {
    width: 22px;
    height: 22px;
  }

  #root:has(.floating.has-zalo) .floating-zalo-logo {
    width: 48px;
    height: 48px;
  }
}

body.woocommerce-cart #root:has(.floating.has-zalo) .floating.has-zalo,
body.woocommerce-checkout #root:has(.floating.has-zalo) .floating.has-zalo,
#root:has(form.checkout):has(.floating.has-zalo) .floating.has-zalo {
  display: none !important;
}

/* AlaskaShop mobile bottom navigation, adapted from the requested Industrial Modern Notch sample. */
#root .kk-bottom-nav{display:none}
#root .kk-bottom-nav-notch-border{display:none}
@media(max-width:760px){
 body:has(#root .kk-bottom-nav){padding-bottom:calc(70px + env(safe-area-inset-bottom))}
 #root:has(.kk-bottom-nav) .floating.has-zalo{display:none!important}
 #root .kk-bottom-nav{
  position:fixed;right:0;bottom:0;left:0;z-index:9999;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;
  box-sizing:border-box;width:100%;height:calc(58px + env(safe-area-inset-bottom));
  padding:0 4px env(safe-area-inset-bottom);user-select:none;
  border:0;background:transparent;box-shadow:none;
  font-family:var(--font-site,"SVN-Gilroy",Arial,sans-serif);
 }
 #root .kk-bottom-nav::before{
  content:"";position:absolute;inset:0;z-index:0;box-sizing:border-box;pointer-events:none;
  border-top:1px solid #dce5f0;background:rgb(255 255 255 / 96%);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 -6px 24px rgb(8 50 98 / 8%);
  -webkit-mask-image:radial-gradient(ellipse 48px 24px at 50% 0,transparent 98%,#000 102%);
  mask-image:radial-gradient(ellipse 48px 24px at 50% 0,transparent 98%,#000 102%);
 }
 #root .kk-bottom-nav-notch-border{
  position:fixed;right:0;bottom:calc(34px + env(safe-area-inset-bottom));left:0;z-index:9998;
  display:block;width:96px;height:24px;margin:0 auto;overflow:visible;pointer-events:none;
  fill:none;stroke:#dce5f0;stroke-width:1;vector-effect:non-scaling-stroke
 }
 #root .kk-bottom-nav .kk-nav-item{
  position:relative;z-index:1;display:flex;min-width:0;min-height:44px;height:100%;
  align-items:center;justify-content:center;flex-direction:column;gap:4px;
  box-sizing:border-box;margin:0;padding:0 2px;border:0;background:transparent;
  color:#0a3871;text-decoration:none;font-family:var(--font-site,"SVN-Gilroy",Arial,sans-serif);
  font-size:11px;font-weight:700;line-height:1.15;
  letter-spacing:.01em;white-space:nowrap;cursor:pointer;touch-action:manipulation;
  transition:color .2s cubic-bezier(.22,1,.36,1);-webkit-tap-highlight-color:transparent;
 }
 #root .kk-bottom-nav .kk-icon-box{
  position:relative;display:flex;flex:none;width:36px;height:28px;
  align-items:center;justify-content:center;box-sizing:border-box;
  border:1px solid #c9d8e8;border-bottom:2px solid #aec3da;border-radius:9px;
  background:linear-gradient(145deg,#fff 0%,#edf4fb 62%,#dce8f5 100%);
  box-shadow:0 2px 4px rgb(10 56 113 / 14%),inset 0 1px 0 rgb(255 255 255 / 95%),inset 0 -1px 0 rgb(169 193 220 / 45%);
  color:#0a4a88;transition:background .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease;
 }
 #root .kk-bottom-nav .kk-icon-box::before{
  content:"";position:absolute;top:2px;right:5px;left:5px;height:1px;border-radius:99px;
  background:linear-gradient(90deg,transparent,rgb(255 255 255 / 95%),transparent);pointer-events:none
 }
 #root .kk-bottom-nav .kk-icon-box svg{
  filter:drop-shadow(0 1px 0 rgb(255 255 255 / 90%)) drop-shadow(0 1px 1px rgb(10 56 113 / 20%))
 }
 #root .kk-bottom-nav .kk-nav-item:hover .kk-icon-box,
 #root .kk-bottom-nav .kk-nav-item:active .kk-icon-box,
 #root .kk-bottom-nav .kk-nav-item.is-active .kk-icon-box,
 #root .kk-bottom-nav .kk-nav-item.active .kk-icon-box{
  background:linear-gradient(145deg,#fff 0%,#e8f1fb 62%,#d3e2f2 100%);
  color:#004a8f;transform:translateY(-2px);
  box-shadow:0 3px 6px rgb(10 56 113 / 18%),inset 0 1px 0 #fff,inset 0 -1px 0 rgb(147 177 210 / 50%)
 }
 #root .kk-bottom-nav .kk-nav-item.is-active,
 #root .kk-bottom-nav .kk-nav-item.active{color:#004a8f}
 #root .kk-bottom-nav .kk-nav-item.is-active::after,
 #root .kk-bottom-nav .kk-nav-item.active::after{
  content:"";position:absolute;bottom:4px;width:16px;height:3px;border-radius:99px;background:#004a8f
 }
 #root .kk-bottom-nav .kk-badge-dot{
  position:absolute;top:1px;right:4px;width:7px;height:7px;
  box-sizing:border-box;border:1.5px solid #fff;border-radius:50%;background:#d91f26
 }
 #root .kk-bottom-nav .kk-call-item{
  position:relative;z-index:1;display:flex;min-width:0;height:100%;align-items:center;
  justify-content:flex-end;flex-direction:column;box-sizing:border-box;
  padding:0 0 6px;color:#8e3038;text-decoration:none;touch-action:manipulation
 }
 #root .kk-bottom-nav .kk-call-circle,
 #root .kk-bottom-nav .kk-call-pulse{
  position:absolute;top:-18px;left:50%;width:52px;height:52px;
  box-sizing:border-box;transform:translateX(-50%);border-radius:50%
 }
 #root .kk-bottom-nav .kk-call-circle{
  z-index:2;display:flex;align-items:center;justify-content:center;
  border:4px solid #fff;background:linear-gradient(135deg,#b64b53 0%,#872d36 100%);
  box-shadow:0 6px 16px rgb(117 34 40 / 28%),0 0 0 1px rgb(142 48 56 / 12%);color:#fff;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1)
 }
 #root .kk-bottom-nav .kk-call-pulse{z-index:1;background:rgb(142 48 56 / 25%);animation:kkPulseRing 2.2s infinite cubic-bezier(.215,.61,.355,1)}
 #root .kk-bottom-nav .kk-call-icon{position:relative;top:-2px}
 #root .kk-bottom-nav .kk-call-icon{filter:drop-shadow(0 1px 0 rgb(255 255 255 / 35%)) drop-shadow(0 1px 1px rgb(95 28 35 / 48%))}
 #root .kk-bottom-nav .kk-call-label{position:relative;z-index:3;margin-top:29px;color:#8e3038;font-size:11px;font-weight:800;line-height:1.15;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
 #root .kk-bottom-nav .kk-zalo-logo{display:block;width:26px;height:26px;border-radius:50%;object-fit:contain}
 #root .kk-bottom-nav .kk-nav-item:focus-visible,
 #root .kk-bottom-nav .kk-call-item:focus-visible{outline:2px solid #8e3038;outline-offset:-2px;border-radius:8px}
}
@media(max-width:760px) and (hover:hover){
 #root .kk-bottom-nav .kk-call-item:hover .kk-call-circle,
 #root .kk-bottom-nav .kk-call-item:active .kk-call-circle{transform:translateX(-50%) scale(1.07) translateY(-2px)}
}
@media(max-width:340px){
 #root .kk-bottom-nav .kk-nav-item,#root .kk-bottom-nav .kk-call-label{font-size:10px}
}
@keyframes kkPulseRing{
 0%{transform:translateX(-50%) scale(.95);opacity:.75}
 70%,100%{transform:translateX(-50%) scale(1.32);opacity:0}
}
@keyframes kkPhoneShake{
 0%,100%{transform:rotate(0deg)}
 10%{transform:rotate(-12deg) scale(1.05)}
 20%{transform:rotate(12deg) scale(1.05)}
 30%{transform:rotate(-10deg)}
 40%{transform:rotate(10deg)}
 50%{transform:rotate(0deg)}
}
@media(prefers-reduced-motion:no-preference){
 #root .kk-bottom-nav .kk-call-icon{animation:kkPhoneShake 2.8s infinite ease-in-out}
}
@media(prefers-reduced-motion:reduce){
 #root .kk-bottom-nav .kk-call-pulse,#root .kk-bottom-nav .kk-call-icon{animation:none}
 #root .kk-bottom-nav .kk-icon-box,#root .kk-bottom-nav .kk-call-circle{transition:none}
}

/* Remove the extra mobile search/category strip; the hamburger still opens the full nav drawer. */
@media(max-width:760px){
 #root .ref-header,
 #root .ref-header .ref-main-bar,
 #root .ref-header .ref-main-inner{height:64px!important;min-height:64px!important}
 #root .ref-header .ref-search{display:none!important}
 #root .ref-header .ref-nav-bar{
  position:relative;height:0!important;min-height:0!important;overflow:visible;
  border:0
 }
 #root .ref-header .ref-nav-inner{height:0!important;min-height:0!important;overflow:visible}
 #root .ref-header .ref-nav-bar:not(.is-open) .ref-nav-inner{visibility:hidden;pointer-events:none}
 #root .ref-header .ref-nav-bar.is-open .ref-nav-inner{
  top:0!important;height:auto!important;max-height:calc(100dvh - 64px)!important;
  visibility:visible;pointer-events:auto
 }
}

/* Minimal, outline-style mobile navigation inspired by the supplied reference. */
@media(max-width:760px){
 body:has(#root .kk-bottom-nav){padding-bottom:calc(74px + env(safe-area-inset-bottom))}
 #root .kk-bottom-nav{
  height:calc(66px + env(safe-area-inset-bottom));
  padding:4px 7px env(safe-area-inset-bottom);
  border-top:1px solid #e8edf3;
  border-radius:22px 22px 0 0;
  background:#fff;
  box-shadow:0 -7px 24px rgb(22 40 64 / 9%);
 }
 #root .kk-bottom-nav::before{display:none}
 #root .kk-bottom-nav-notch-border{display:none}
 #root .kk-bottom-nav .kk-nav-item,
 #root .kk-bottom-nav .kk-call-item{
  min-height:48px;
  gap:3px;
  padding:0 1px;
  color:#455468;
  font-size:10px;
  font-weight:600;
  line-height:1.1;
  letter-spacing:.025em;
  transition:color .16s ease;
 }
 #root .kk-bottom-nav .kk-icon-box{
  width:30px;
  height:27px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:currentColor;
  transition:color .16s ease;
 }
 #root .kk-bottom-nav .kk-icon-box::before{display:none}
 #root .kk-bottom-nav .kk-icon-box svg{width:23px;height:23px;filter:none}
 #root .kk-bottom-nav .kk-nav-item:hover .kk-icon-box,
 #root .kk-bottom-nav .kk-nav-item:active .kk-icon-box,
 #root .kk-bottom-nav .kk-nav-item.is-active .kk-icon-box,
 #root .kk-bottom-nav .kk-nav-item.active .kk-icon-box{
  transform:none;
  background:transparent;
  box-shadow:none;
 }
 #root .kk-bottom-nav .kk-nav-item.is-active,
 #root .kk-bottom-nav .kk-nav-item.active{color:#01458e}
 #root .kk-bottom-nav .kk-nav-item.is-active::after,
 #root .kk-bottom-nav .kk-nav-item.active::after{
  bottom:1px;
  width:15px;
  height:2px;
  background:#01458e;
 }
 #root .kk-bottom-nav .kk-badge-dot{top:1px;right:1px}
 #root .kk-bottom-nav .kk-call-item{
  justify-content:center;
  flex-direction:column;
  color:#a33d47;
 }
 #root .kk-bottom-nav .kk-call-pulse{display:none}
 #root .kk-bottom-nav .kk-call-circle{
  position:relative;
  top:auto;
  left:auto;
  width:30px;
  height:27px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:currentColor;
  transform:none;
  transition:none;
 }
 #root .kk-bottom-nav .kk-call-icon{width:23px;height:23px;top:0;filter:none;animation:none}
 #root .kk-bottom-nav .kk-call-label{margin:0;color:inherit;font-size:10px;font-weight:700;line-height:1.1}
 #root .kk-bottom-nav .kk-call-item:hover .kk-call-circle,
 #root .kk-bottom-nav .kk-call-item:active .kk-call-circle{transform:none}
 #root .kk-bottom-nav .kk-zalo-icon{display:block;width:23px;height:23px}
 #root .kk-bottom-nav .kk-nav-item:focus-visible,
 #root .kk-bottom-nav .kk-call-item:focus-visible{outline:2px solid #01458e;outline-offset:-2px;border-radius:8px}
}
@media(max-width:340px){
 #root .kk-bottom-nav .kk-nav-item,#root .kk-bottom-nav .kk-call-label{font-size:8.5px}
}