/* =========================================================
   nr-dock -- cum nut lien he noi (thay cum nut tron cu trong footer, 28/09/2026)
   Template: templates/frontend/modules/components/nr_contact_dock.twig
   JS: assets/frontend/js/dock.js
   May tinh: 1 khung doc mep phai. Dien thoai (<=600px): thanh day 4 o, gio hang
   thanh nut nho noi rieng.
   ========================================================= */

.nr-dock {
  --nr-dock-item-w: 64px;
  --nr-dock-ico: 24px;
  --nr-dock-lb: 11px;
  --nr-dock-z: 950;
  --nr-dock-cart-bottom: calc(122px + env(safe-area-inset-bottom)); /* tren nut Len dau trang #scrollToTop */

  position: fixed;
  right: var(--nr-space-3);
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--nr-dock-z);
  display: flex;
  flex-direction: column;
  gap: var(--nr-space-1);
  padding: 6px;
  background: var(--nr-surface);
  border: 1px solid var(--nr-border);
  border-radius: var(--nr-radius-lg);
  box-shadow: var(--nr-shadow-sm), 0 8px 24px rgb(16 24 40 / 12%);
  box-sizing: border-box;
  font-family: inherit;
}

.nr-dock-group { position: relative; }

.nr-dock-item {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 3px;
  width: var(--nr-dock-item-w);
  padding: var(--nr-space-2) 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: var(--nr-radius-md);
  color: var(--nr-text);
  font: inherit;
  font-size: var(--nr-dock-lb);
  font-weight: var(--nr-weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.nr-dock-item:hover { background: var(--nr-soft); color: var(--nr-text); }
.nr-dock-item.nr-dock-item--hot { background: var(--nr-primary-btn); color: var(--nr-text-invert); }
.nr-dock-item.nr-dock-item--hot:hover { background: var(--nr-primary-dark); color: var(--nr-text-invert); }

.nr-dock-ico { position: relative; display: grid; place-items: center; font-size: var(--nr-dock-ico); }
.nr-dock-ico > svg,
.nr-dock-zalo { width: 1em; height: 1em; display: block; }
.nr-dock-lb { white-space: nowrap; }

.nr-dock-badge {
  position: absolute;
  top: -6px;
  right: -10px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--nr-primary);
  color: var(--nr-text-invert);
  font-size: 10px;
  font-weight: var(--nr-weight-bold);
  line-height: 16px;
  text-align: center;
  box-sizing: border-box;
}

/* Danh sach 2 so (Zalo / Goi) -- mo ben trai dock */
.nr-dock-menu {
  position: absolute;
  right: calc(100% + var(--nr-space-3));
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: var(--nr-space-1);
  width: 260px;
  padding: var(--nr-space-2);
  background: var(--nr-surface);
  border: 1px solid var(--nr-border);
  border-radius: var(--nr-radius-lg);
  box-shadow: 0 8px 24px rgb(16 24 40 / 16%);
}
.nr-dock-menu[hidden] { display: none; }
.nr-dock-menu > a {
  display: flex;
  align-items: center;
  gap: var(--nr-space-3);
  padding: var(--nr-space-2);
  border-radius: var(--nr-radius-md);
  color: var(--nr-text);
  text-decoration: none;
  font-size: var(--nr-text-sm);
}
.nr-dock-menu > a:hover { background: var(--nr-soft); }
/* So dung nganh cua trang dang xem (dock.js dua len dau) */
.nr-dock-menu > a[data-state="match"] { background: var(--nr-soft); }
.nr-dock-menu > a[data-state="match"] strong::after {
  content: "Phù hợp trang này";
  display: inline-block;
  margin-left: var(--nr-space-2);
  padding: 0 6px;
  border-radius: 999px;
  background: var(--nr-primary-btn);
  color: var(--nr-text-invert);
  font-size: 10px;
  font-weight: var(--nr-weight-semibold);
  line-height: 18px;
  vertical-align: 1px;
}
.nr-dock-menu > a > svg,
.nr-dock-menu-ico { flex: none; width: 32px; height: 32px; }
.nr-dock-menu-ico { display: grid; place-items: center; border-radius: 50%; background: var(--nr-primary-btn); color: var(--nr-text-invert); font-size: var(--nr-text-lg); }
.nr-dock-menu strong { display: block; font-weight: var(--nr-weight-semibold); }
.nr-dock-menu small { color: var(--nr-text-muted); font-size: var(--nr-text-xs); }

/* Popup form */
.nr-dock-modal {
  position: fixed;
  inset: 0;
  z-index: 100000; /* popup chuyen ra <body> nen khong ke thua bien cua .nr-dock */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--nr-space-4);
  background: rgb(15 23 42 / 55%);
  box-sizing: border-box;
}
.nr-dock-modal[hidden] { display: none; }
.nr-dock-dialog {
  --nr-dock-aside-w: 300px;
  position: relative;
  display: grid;
  grid-template-columns: var(--nr-dock-aside-w) minmax(0, 1fr);
  width: min(920px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: var(--nr-surface);
  border-radius: var(--nr-radius-lg);
}
.nr-dock-dialog .nr-lead { --nr-lead-pad: var(--nr-space-4); margin: 0; border: 0; box-shadow: none; } /* the nr-lead dat trong popup: bo khung the -- ngoai le co chu dich, component long component */
.nr-dock-close {
  position: absolute;
  top: var(--nr-space-3);
  right: var(--nr-space-3);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--nr-border);
  border-radius: 50%;
  background: var(--nr-surface);
  color: var(--nr-text);
  font-size: var(--nr-text-lg);
  cursor: pointer;
}

/* Cho trong cuoi trang cho thanh day (chi hien tren dien thoai) */
.nr-dock-spacer { display: none; }

/* Dien thoai: thanh day 4 o; gio hang tach thanh nut nho noi */
@media (max-width: 600px) {
  .nr-dock {
    --nr-dock-ico: 22px;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    flex-direction: row;
    gap: 0;
    padding: 0 0 env(safe-area-inset-bottom);
    border-width: 1px 0 0;
    border-radius: 0;
    box-shadow: 0 -2px 10px rgb(16 24 40 / 8%);
  }
  .nr-dock > * { flex: 1; order: 1; }
  .nr-dock-item { width: 100%; min-height: 54px; border-radius: 0; align-content: center; }
  .nr-dock > .nr-dock-item.nr-dock-item--hot { order: 2; }
  .nr-dock-group .nr-dock-item { height: 100%; }
  .nr-dock-item.nr-dock-item--cart {
    position: fixed;
    right: var(--nr-space-3);
    bottom: var(--nr-dock-cart-bottom);
    width: 48px;
    min-height: 48px;
    padding: 0;
    border-radius: 50%;
    background: var(--nr-surface);
    box-shadow: 0 3px 10px rgb(16 24 40 / 18%);
    color: var(--nr-primary-text);
  }
  .nr-dock-item.nr-dock-item--cart .nr-dock-lb { display: none; }
  /* fixed theo man hinh: absolute theo o nho trong thanh day bi day lech ra ngoai mep trai (do v2 28/09: x = -101px) */
  .nr-dock-menu { position: fixed; right: auto; left: 50%; top: auto; bottom: calc(62px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(340px, 94vw); }
  .nr-dock-spacer { display: block; height: calc(54px + env(safe-area-inset-bottom)); }
  .nr-dock-modal { align-items: flex-end; padding: 0; }
  .nr-dock-dialog { width: 100%; max-height: 92vh; border-radius: var(--nr-radius-lg) var(--nr-radius-lg) 0 0; }
  .nr-dock-dialog .nr-lead { --nr-lead-pad: var(--nr-space-4); }
}

/* ---- Popup 2 cot (28/09/2026: ban 1 cot "nho, cung, thieu so") ---- */
.nr-dock-aside {
  display: flex;
  flex-direction: column;
  gap: var(--nr-space-3);
  padding: var(--nr-space-8) var(--nr-space-6);
  background: var(--nr-soft);
  border-right: 1px solid var(--nr-border);
}
.nr-dock-eyebrow { margin: 0; color: var(--nr-primary-text); font-size: var(--nr-text-xs); font-weight: var(--nr-weight-bold); letter-spacing: .08em; }
.nr-dock-title { margin: 0; color: var(--nr-text); font-size: var(--nr-text-2xl); font-weight: var(--nr-weight-bold); line-height: 1.25; }
.nr-dock-desc { margin: 0; color: var(--nr-text-muted); font-size: var(--nr-text-sm); line-height: 1.5; }
.nr-dock-perks { display: grid; gap: var(--nr-space-2); margin: var(--nr-space-1) 0 0; padding: 0; list-style: none; font-size: var(--nr-text-sm); color: var(--nr-text); }
.nr-dock-perks li { display: flex; align-items: center; gap: var(--nr-space-2); }
.nr-dock-perk-ico { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--nr-surface); color: var(--nr-success); font-size: var(--nr-text-base); }
.nr-dock-lines { display: grid; gap: var(--nr-space-2); margin-top: auto; padding-top: var(--nr-space-3); }
.nr-dock-line {
  display: flex;
  align-items: center;
  gap: var(--nr-space-3);
  padding: var(--nr-space-2) var(--nr-space-3);
  background: var(--nr-surface);
  border: 1px solid var(--nr-border);
  border-radius: var(--nr-radius-md);
  color: var(--nr-text);
  text-decoration: none;
}
.nr-dock-line:hover { border-color: var(--nr-primary); color: var(--nr-text); }
.nr-dock-line[data-state="match"] { border-color: var(--nr-primary); }
.nr-dock-line small { display: block; color: var(--nr-text-muted); font-size: var(--nr-text-xs); }
.nr-dock-line strong { display: block; color: var(--nr-primary-text); font-size: var(--nr-text-lg); font-weight: var(--nr-weight-bold); letter-spacing: .01em; }
.nr-dock-line-ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--nr-primary-btn); color: var(--nr-text-invert); font-size: var(--nr-text-lg); }
.nr-dock-form { display: flex; align-items: center; padding: var(--nr-space-6) var(--nr-space-2); }
.nr-dock-form > .nr-lead { width: 100%; }

@media (max-width: 760px) {
  .nr-dock-dialog { grid-template-columns: minmax(0, 1fr); }
  .nr-dock-aside { gap: var(--nr-space-2); padding: var(--nr-space-5) var(--nr-space-4) var(--nr-space-3); border-right: 0; border-bottom: 1px solid var(--nr-border); }
  .nr-dock-title { font-size: var(--nr-text-xl); padding-right: 40px; }
  .nr-dock-perks { display: none; }
  .nr-dock-lines { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--nr-space-1); padding-top: 0; }
  .nr-dock-line { padding: var(--nr-space-2); gap: var(--nr-space-2); }
  .nr-dock-line-ico { width: 30px; height: 30px; font-size: var(--nr-text-base); }
  .nr-dock-line strong { font-size: var(--nr-text-base); }
  .nr-dock-form { padding: var(--nr-space-2) 0; }
}

/* Popup rieng cua landing (z-index thap hon dock) dang mo -> an dock de khong de len day popup.
   Cac mau popup dang co: .consult-modal.is-open (bi gam), .nr-modal[data-state="open"] (3M, phim cach nhiet),
   body.cr-blk-pro-modal-open (3M CR BLK Pro). */
body:has(.consult-modal.is-open, .nr-modal[data-state="open"]) .nr-dock,
body.cr-blk-pro-modal-open .nr-dock { display: none; } /* 3M CR BLK Pro gan class len body khi mo popup */