/* Hùng Vũ đặt hàng khi hết hàng - frontend v1.1.1 */
body .hv-oos-wrap,
body .hv-oos-wrap *{box-sizing:border-box!important;font-family:inherit!important}

body .hv-oos-wrap{
  width:100%!important;
  margin:16px 0 22px!important;
  padding:12px!important;
  border:1px solid var(--hv-oos-border)!important;
  border-radius:var(--hv-oos-radius)!important;
  background:#fff!important;
  color:inherit!important;
  font-size:var(--hv-oos-font-size)!important;
  line-height:1.45!important;
}
body .hv-oos-wrap .hv-oos-top{
  background:var(--hv-oos-panel-bg)!important;
  border-radius:calc(var(--hv-oos-radius) - 2px)!important;
  padding:12px 14px!important;
  text-align:center!important;
  margin:0 0 12px!important;
}
body .hv-oos-wrap .hv-oos-title{
  font-size:var(--hv-oos-title-size)!important;
  line-height:1.25!important;
  font-weight:700!important;
  color:inherit!important;
  margin:0!important;
  padding:0!important;
  text-transform:none!important;
  letter-spacing:0!important;
}
body .hv-oos-wrap .hv-oos-subtitle{
  font-size:var(--hv-oos-subtitle-size)!important;
  line-height:1.4!important;
  font-weight:400!important;
  margin:3px 0 0!important;
  padding:0!important;
  color:inherit!important;
}
body .hv-oos-wrap .hv-oos-heading{
  text-align:center!important;
  font-size:var(--hv-oos-heading-size)!important;
  line-height:1.4!important;
  font-weight:700!important;
  margin:8px 0 12px!important;
  padding:0!important;
  color:inherit!important;
  text-transform:none!important;
  letter-spacing:0!important;
}
body .hv-oos-wrap .hv-oos-field{display:block!important;margin:0 0 10px!important;padding:0!important}
body .hv-oos-wrap .hv-oos-field input,
body .hv-oos-wrap .hv-oos-field select,
body .hv-oos-wrap .hv-oos-field textarea{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  min-height:var(--hv-oos-input-height)!important;
  height:var(--hv-oos-input-height)!important;
  margin:0!important;
  padding:9px 12px!important;
  border:1px solid var(--hv-oos-border)!important;
  border-radius:var(--hv-oos-radius)!important;
  background:#fff!important;
  box-shadow:none!important;
  outline:none!important;
  font-family:inherit!important;
  font-size:var(--hv-oos-field-size)!important;
  font-weight:400!important;
  line-height:1.35!important;
  color:inherit!important;
  text-transform:none!important;
  letter-spacing:0!important;
}
body .hv-oos-wrap .hv-oos-field textarea{height:auto!important;min-height:96px!important;resize:vertical!important}
body .hv-oos-wrap .hv-oos-field input:focus,
body .hv-oos-wrap .hv-oos-field select:focus,
body .hv-oos-wrap .hv-oos-field textarea:focus{border-color:var(--hv-oos-accent)!important;box-shadow:0 0 0 1px var(--hv-oos-accent)!important}
body .hv-oos-wrap .hv-oos-actions{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:10px!important;margin:4px 0 0!important;padding:0!important}
body .hv-oos-wrap button.hv-oos-submit,
body .hv-oos-wrap a.hv-oos-other{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-width:0!important;
  min-height:var(--hv-oos-button-height)!important;
  height:auto!important;
  margin:0!important;
  padding:9px 12px!important;
  border-radius:var(--hv-oos-radius)!important;
  text-decoration:none!important;
  text-transform:none!important;
  letter-spacing:0!important;
  font-family:inherit!important;
  font-size:var(--hv-oos-button-size)!important;
  font-weight:700!important;
  line-height:1.25!important;
  cursor:pointer!important;
  box-shadow:none!important;
}
body .hv-oos-wrap button.hv-oos-submit{border:1px solid var(--hv-oos-accent)!important;background:var(--hv-oos-accent)!important;color:var(--hv-oos-btn-text)!important}
body .hv-oos-wrap a.hv-oos-other{border:1px solid var(--hv-oos-accent)!important;background:#fff!important;color:var(--hv-oos-accent)!important}
body .hv-oos-wrap button.hv-oos-submit:hover,
body .hv-oos-wrap button.hv-oos-submit:focus{opacity:.92!important}
body .hv-oos-wrap a.hv-oos-other:hover,
body .hv-oos-wrap a.hv-oos-other:focus{background:#fafafa!important;color:var(--hv-oos-accent)!important}
body .hv-oos-wrap .hv-oos-count{text-align:center!important;margin:11px 0 0!important;padding:0!important;font-size:var(--hv-oos-count-size)!important;line-height:1.45!important;color:inherit!important}
body .hv-oos-wrap button.hv-oos-open-list{
  appearance:none!important;
  display:inline!important;
  width:auto!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  border:0!important;
  background:transparent!important;
  color:var(--hv-oos-accent)!important;
  padding:0!important;
  margin:0!important;
  font-family:inherit!important;
  font-size:inherit!important;
  font-weight:400!important;
  line-height:inherit!important;
  text-transform:none!important;
  letter-spacing:0!important;
  box-shadow:none!important;
  cursor:pointer!important;
}
body .hv-oos-wrap .hv-oos-message{margin:9px 0 0!important;padding:0!important;text-align:center!important;font-size:var(--hv-oos-font-size)!important;font-weight:600!important}
body .hv-oos-wrap .hv-oos-message.is-success{color:#16803c!important}
body .hv-oos-wrap .hv-oos-message.is-error{color:#b42318!important}
body .hv-oos-hp{position:absolute!important;left:-99999px!important;opacity:0!important;pointer-events:none!important}
body .hv-oos-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Popup phải luôn ẩn trong HTML ban đầu. Chỉ JS mở khi người dùng bấm “Xem danh sách”. */
.hv-oos-modal[hidden],
.hv-oos-modal:not(.is-open){display:none!important}

/* Popup được JS chuyển thẳng xuống body để tránh transform/overflow của Flatsome và các theme khác. */
html body > .hv-oos-modal,
html body > .hv-oos-modal *{
  box-sizing:border-box!important;
  font-family:var(--hv-oos-site-font-family, inherit)!important;
}
html body > .hv-oos-modal{
  position:fixed!important;
  inset:0!important;
  z-index:2147483000!important;
  display:none!important;
  align-items:center!important;
  justify-content:center!important;
  width:100vw!important;
  height:100vh!important;
  height:100dvh!important;
  margin:0!important;
  padding:24px!important;
  border:0!important;
  background:transparent!important;
  transform:none!important;
  overflow:auto!important;
  isolation:isolate!important;
  font-size:var(--hv-oos-popup-body-size)!important;
  line-height:1.45!important;
  color:#333!important;
}
html body > .hv-oos-modal.is-open{display:flex!important}
html body > .hv-oos-modal .hv-oos-backdrop{
  position:fixed!important;
  inset:0!important;
  z-index:0!important;
  display:block!important;
  width:100vw!important;
  height:100vh!important;
  height:100dvh!important;
  margin:0!important;
  padding:0!important;
  background:rgba(0,0,0,.58)!important;
  border:0!important;
  transform:none!important;
}
html body > .hv-oos-modal .hv-oos-dialog{
  position:relative!important;
  inset:auto!important;
  z-index:1!important;
  display:flex!important;
  flex-direction:column!important;
  width:min(var(--hv-oos-popup-width),100%)!important;
  max-width:100%!important;
  max-height:calc(100dvh - 48px)!important;
  margin:auto!important;
  padding:0!important;
  overflow:hidden!important;
  background:#fff!important;
  border:0!important;
  border-radius:18px!important;
  box-shadow:0 20px 70px rgba(0,0,0,.28)!important;
  color:#333!important;
  transform:none!important;
  opacity:1!important;
  visibility:visible!important;
}
html body > .hv-oos-modal .hv-oos-modal-head{
  position:relative!important;
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:68px!important;
  margin:0!important;
  padding:14px 64px 14px 20px!important;
  border:0!important;
  border-bottom:1px solid #e5e5e5!important;
  background:#fff!important;
  color:#222!important;
  font-size:var(--hv-oos-popup-title-size)!important;
  font-weight:700!important;
  line-height:1.35!important;
  text-align:center!important;
  text-transform:none!important;
  letter-spacing:0!important;
}
html body > .hv-oos-modal button.hv-oos-close{
  position:absolute!important;
  right:16px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:38px!important;
  min-width:38px!important;
  height:38px!important;
  min-height:38px!important;
  margin:0!important;
  padding:0 0 2px!important;
  border:0!important;
  border-radius:50%!important;
  background:#f3f3f3!important;
  color:#222!important;
  font-family:var(--hv-oos-site-font-family, inherit)!important;
  font-size:28px!important;
  font-weight:700!important;
  line-height:1!important;
  box-shadow:none!important;
  text-transform:none!important;
  cursor:pointer!important;
}
html body > .hv-oos-modal .hv-oos-modal-body{
  position:relative!important;
  flex:1 1 auto!important;
  min-height:0!important;
  overflow:auto!important;
  margin:0!important;
  padding:20px 28px 28px!important;
  background:#fff!important;
  color:#333!important;
  font-size:var(--hv-oos-popup-body-size)!important;
  line-height:1.45!important;
}
html body > .hv-oos-modal .hv-oos-modal-body p{font-size:inherit!important;line-height:inherit!important;margin:0 0 12px!important;color:inherit!important}
html body > .hv-oos-modal .hv-oos-list-total{margin-bottom:14px!important}
html body > .hv-oos-modal .hv-oos-table-wrap{width:100%!important;overflow:auto!important}
html body > .hv-oos-modal table.hv-oos-public-table{
  width:100%!important;
  min-width:620px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-collapse:collapse!important;
  border-spacing:0!important;
  background:#fff!important;
  color:#333!important;
  font-size:inherit!important;
}
html body > .hv-oos-modal table.hv-oos-public-table th,
html body > .hv-oos-modal table.hv-oos-public-table td{
  padding:11px 14px!important;
  border:0!important;
  border-bottom:1px solid #ddd!important;
  background:transparent!important;
  color:inherit!important;
  font-size:inherit!important;
  line-height:1.4!important;
  text-align:left!important;
  vertical-align:middle!important;
  white-space:nowrap!important;
}
html body > .hv-oos-modal table.hv-oos-public-table th{font-weight:700!important}
html body > .hv-oos-modal table.hv-oos-public-table tbody tr:nth-child(odd){background:#f5f5f5!important}
html body > .hv-oos-modal .hv-oos-pagination{text-align:center!important;padding:18px 0 0!important;margin:0!important}
html body > .hv-oos-modal .hv-oos-pagination button{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:34px!important;
  width:auto!important;
  height:34px!important;
  min-height:34px!important;
  margin:0 3px!important;
  padding:0 8px!important;
  border:1px solid #ddd!important;
  border-radius:6px!important;
  background:#fff!important;
  color:#333!important;
  font-family:inherit!important;
  font-size:13px!important;
  font-weight:400!important;
  line-height:1!important;
  box-shadow:none!important;
  text-transform:none!important;
}
html body > .hv-oos-modal .hv-oos-pagination button.is-active{border-color:var(--hv-oos-accent)!important;background:var(--hv-oos-accent)!important;color:#fff!important}
html body.hv-oos-modal-open{overflow:hidden!important}

@media(max-width:640px){
  body .hv-oos-wrap{padding:10px!important;border-radius:var(--hv-oos-radius)!important}
  body .hv-oos-wrap .hv-oos-actions{grid-template-columns:1fr!important}
  html body > .hv-oos-modal{padding:10px!important}
  html body > .hv-oos-modal .hv-oos-dialog{width:100%!important;max-height:calc(100dvh - 20px)!important;border-radius:14px!important}
  html body > .hv-oos-modal .hv-oos-modal-head{min-height:60px!important;padding:12px 54px 12px 14px!important}
  html body > .hv-oos-modal button.hv-oos-close{right:10px!important;width:36px!important;min-width:36px!important;height:36px!important;min-height:36px!important}
  html body > .hv-oos-modal .hv-oos-modal-body{padding:16px!important}
  html body > .hv-oos-modal table.hv-oos-public-table{min-width:560px!important}
  html body > .hv-oos-modal table.hv-oos-public-table th,
  html body > .hv-oos-modal table.hv-oos-public-table td{padding:9px 10px!important}
}