header{
  position:sticky!important;
  top:0!important;
  z-index:60;
  background:#fff!important;
  box-shadow:0 8px 28px rgba(21,46,88,.08)!important;
  border:0!important;
}

.head-main{
  width:min(1160px,calc(100% - 32px));
  margin:auto;
  min-height:78px;
  display:grid;
  grid-template-columns:auto minmax(260px,1fr) auto;
  gap:20px;
  align-items:center;
}

.head-brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  min-width:0;
}

.brand-mark{
  width:42px;
  height:42px;
  border-radius:14px;
  background:linear-gradient(135deg,#3974ff,#1f57da);
  display:grid;
  place-items:center;
  box-shadow:0 12px 24px rgba(37,99,235,.25);
  flex:0 0 auto;
}

.mark-core{
  color:#fff;
  font-style:normal;
  font-size:15px;
  font-weight:900;
  letter-spacing:-1.5px;
}

.brand-text{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.head-brand strong{
  color:#235fda;
  font-size:18px;
  line-height:1;
  letter-spacing:.08em;
  font-weight:950;
}

.head-brand small{
  margin-top:5px;
  color:#7b889b;
  font-size:8px;
  letter-spacing:1.4px;
  font-weight:800;
}

.head-search{
  height:46px;
  border:1px solid #dbe4f0;
  border-radius:999px;
  background:#fbfcfe;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 16px;
}

.head-search > i{
  color:#2563eb;
  font-style:normal;
  font-size:20px;
}

.head-search input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  font-size:14px;
  color:#1b2a41;
}

.head-right{
  display:flex;
  align-items:center;
  gap:14px;
  justify-content:flex-end;
}

.head-zalo{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}

.head-zalo > i{
  width:38px;
  height:38px;
  border:2px solid #1978ef;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#1978ef;
  font-style:normal;
  font-size:10px;
  font-weight:900;
  flex:0 0 auto;
}

.head-zalo span{
  display:flex;
  flex-direction:column;
}

.head-zalo small{
  color:#7c889a;
  font-size:8px;
  font-weight:700;
}

.head-zalo strong{
  margin-top:2px;
  color:#1c2f4e;
  font-size:14px;
  letter-spacing:.02em;
}

.head-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.head-actions button{
  border:0;
  cursor:pointer;
}

.text-action,
.admin-entry{
  height:38px;
  border-radius:999px;
  padding:0 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:12px;
  font-weight:800;
}

.text-action{
  background:#fff;
  color:#173153;
  border:1px solid #dbe4f0;
}

.text-action small{
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  display:inline-grid;
  place-items:center;
  background:#fff;
  border:1px solid #cfe0ff;
  color:#2563eb;
  font-size:8px;
  font-weight:800;
}

.head-cart{
  background:#2563eb;
  color:#fff;
}

.head-cart small{
  color:#2563eb;
  border-color:#bfd4ff;
}

.admin-entry{
  background:#10233f;
  color:#fff;
}

.hidden{
  display:none!important;
}

.head-actions > b{
  min-width:28px;
  color:#182b49;
  font-size:11px;
  font-weight:800;
}

.head-nav{
  background:#edf4ff;
  border-top:1px solid #eef2f7;
}

.nav-inner{
  width:min(1160px,calc(100% - 32px));
  margin:auto;
  min-height:56px;
  display:flex;
  align-items:center;
  gap:20px;
}

.category-button{
  height:40px;
  padding:0 16px 0 8px;
  border:0;
  border-radius:999px;
  background:#fff;
  color:#172b47;
  font-size:12px;
  font-weight:800;
  display:flex;
  align-items:center;
  gap:9px;
  cursor:pointer;
}

.category-button i{
  width:32px;
  height:32px;
  border-radius:50%;
  background:#2868e8;
  color:#fff;
  display:grid;
  place-items:center;
  font-style:normal;
  font-size:17px;
}

.head-nav nav{
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
}

.head-nav nav a{
  text-decoration:none;
  color:#223652;
  font-size:12px;
  font-weight:700;
}

@media (max-width: 980px){
  .head-main{
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "brand right"
      "search search";
  }

  .head-brand{grid-area:brand}
  .head-search{grid-area:search}
  .head-right{grid-area:right}
  .head-zalo span{display:none}
  .head-nav nav a:nth-child(4){display:none}
}

@media (max-width: 640px){
  .top{display:none!important}

  .head-main{
    width:calc(100% - 20px);
    padding:10px 0;
    min-height:auto;
    grid-template-columns:1fr;
    grid-template-areas:
      "brand"
      "search"
      "right";
    gap:10px;
  }

  .head-brand{
    justify-content:center;
  }

  .brand-mark{
    width:38px;
    height:38px;
    border-radius:12px;
  }

  .head-brand strong{
    font-size:16px;
  }

  .head-brand small{
    font-size:7px;
    letter-spacing:1px;
  }

  .head-search{
    height:42px;
    padding:0 12px;
  }

  .head-search input{
    font-size:13px;
  }

  .head-right{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }

  .head-zalo{
    justify-content:center;
  }

  .head-zalo span{
    display:flex;
  }

  .head-actions{
    justify-content:center;
    flex-wrap:nowrap;
  }

  .admin-entry,
  .head-actions > b{
    display:none!important;
  }

  .text-action{
    flex:1 1 0;
    min-width:0;
    padding:0 10px;
    font-size:11px;
  }

  .head-nav{
    padding:8px 0;
  }

  .nav-inner{
    width:calc(100% - 20px);
    min-height:auto;
    gap:10px;
  }

  .category-button{
    height:38px;
    font-size:11px;
  }

  .head-nav nav{
    display:none;
  }
}