/* ==========================================================
   Mecom Hotline Bar — frontend styles
   ========================================================== */
.footer-fixed-bottom{display:none!important;}
.mhb-bar,
.mhb-bar * {
  box-sizing: border-box;
}

.mhb-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
  display: flex;
  justify-content: center;
  padding: 0 8px max(0.5rem, env(safe-area-inset-bottom));
  pointer-events: none;
  font-family: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.mhb-bar__inner {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: 8px;
  max-width: 100%;
  /* Lưu ý: KHÔNG đặt overflow-x ở đây. Các thẻ popup chi nhánh
     (.mhb-popover) được định vị "bottom: 100%" để nổi lên PHÍA
     TRÊN phần tử này, tức là nằm ngoài vùng nội dung của nó theo
     chiều dọc. Nếu overflow-x được đặt khác "visible" (vd: auto)
     mà overflow-y không được khai báo, trình duyệt sẽ tự tính
     overflow-y thành "auto" (theo đặc tả CSS Overflow), khiến
     toàn bộ popup bị cắt/ẩn mất dù JS đã bỏ thuộc tính "hidden".
     Đây chính là nguyên nhân gây lỗi "bấm nút chi nhánh không
     thấy popup hiện ra". */
}

.mhb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  box-shadow: 0 10px 25px -5px rgba(0,0,0,.25), 0 8px 10px -6px rgba(0,0,0,.15);
  transition: filter .15s ease, transform .15s ease;
}
.mhb-btn:hover { filter: brightness(1.1); color: #fff; }
.mhb-btn:active { transform: scale(.97); }

.mhb-btn--branch { padding: 8px 12px 8px 8px; }
.mhb-btn--callback { padding: 12px 14px; }

.mhb-btn__icon-wrap {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255,255,255,.2);
}
.mhb-icon { width: 14px; height: 14px; }
.mhb-btn__icon-wrap img.mhb-icon { width: 16px; height: 16px; object-fit: contain; border-radius: 50%; }
.mhb-icon--shake { animation: mhb-shake 1.6s ease-in-out infinite; }

@keyframes mhb-shake {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-9deg); }
  40% { transform: rotate(9deg); }
  60% { transform: rotate(-6deg); }
  80% { transform: rotate(6deg); }
}

.mhb-branch { position: relative; }

.mhb-popover {
  position: absolute;
  bottom: 100%;
  margin-bottom: 12px;
  width: 320px;
  max-width: calc(100vw - 16px);
  animation: mhb-rise .22s ease both;
}
.mhb-popover[data-align="left"] { left: 0; }
.mhb-popover[data-align="center"] { left: 50%; transform: translateX(-50%); animation-name: mhb-rise-center; }
.mhb-popover[data-align="right"] { right: 0; }
.mhb-popover[hidden] { display: none; }

@keyframes mhb-rise {
  0% { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes mhb-rise-center {
  0% { opacity: 0; transform: translate(-50%, 24px); }
  100% { opacity: 1; transform: translate(-50%, 0); }
}

.mhb-popover__card {
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid #f1f5f9;
  background: #fff;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.15), 0 8px 10px -6px rgba(0,0,0,.1);
}
.mhb-popover__head { padding: 12px 16px; text-align: center; }
.mhb-popover__eyebrow {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
}
.mhb-popover__title {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}
.mhb-popover__rows > * + * { border-top: 1px solid #f1f5f9; }

.mhb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  transition: background .15s ease;
}
.mhb-row:hover { background: #f8fafc; }

.mhb-row__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: #fff;
}
.mhb-row__icon--zalo { font-size: 11px; font-weight: 800; }
.mhb-row__body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.mhb-row__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #94a3b8;
}
.mhb-row__value {
  display: block;
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mhb-row__value--muted { font-size: 14px; font-weight: 500; color: #475569; white-space: normal; }
.mhb-row__cta {
  flex-shrink: 0;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.mhb-popover__arrow {
  position: absolute;
  bottom: -8px;
  width: 16px;
  height: 16px;
  transform: rotate(45deg);
  border-bottom: 1px solid #f1f5f9;
  border-right: 1px solid #f1f5f9;
  background: #fff;
}
.mhb-popover__arrow[data-align="left"] { left: 24px; }
.mhb-popover__arrow[data-align="center"] { left: 50%; margin-left: -8px; }
.mhb-popover__arrow[data-align="right"] { right: 24px; }

/* -----------------------------------------------------------
   Modal "Yêu cầu gọi lại"
----------------------------------------------------------- */
.mhb-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(15, 23, 42, .5);
  padding: 16px;
  font-family: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (min-width: 640px) {
  .mhb-modal-overlay { align-items: center; }
}
.mhb-modal-overlay[hidden] { display: none; }

.mhb-modal {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: 20px;
  padding: 28px 24px 24px;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.4);
  animation: mhb-rise .22s ease both;
}
.mhb-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding:0;
}
.mhb-modal__eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.mhb-modal__title { margin: 4px 0 8px; font-size: 22px; font-weight: 800; color: #0e2033; }
.mhb-modal__desc { margin: 0; color: #64748b; font-size: 14px; line-height: 1.5; }

/* -----------------------------------------------------------
   Khung chứa form Contact Form 7 bên trong popup.
   "--mhb-accent" được PHP gán bằng inline style theo màu nút
   "Yêu cầu gọi lại" đã cấu hình, để nút gửi của CF7 luôn đồng
   bộ màu với phần còn lại của Hotline Bar dù CF7 không tự biết
   về màu này.
----------------------------------------------------------- */
.mhb-modal__cf7-wrap { margin-top: 18px; }
.mhb-modal__cf7-wrap .wpcf7-form p { margin: 0 0 12px; }
.mhb-modal__cf7-wrap .wpcf7-form label { display: block; font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 6px; }
.mhb-modal__cf7-wrap .wpcf7-form input[type="text"],
.mhb-modal__cf7-wrap .wpcf7-form input[type="email"],
.mhb-modal__cf7-wrap .wpcf7-form input[type="tel"],
.mhb-modal__cf7-wrap .wpcf7-form input[type="number"],
.mhb-modal__cf7-wrap .wpcf7-form select,
.mhb-modal__cf7-wrap .wpcf7-form textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 15px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  outline: none;
}
.mhb-modal__cf7-wrap .wpcf7-form input:focus,
.mhb-modal__cf7-wrap .wpcf7-form textarea:focus,
.mhb-modal__cf7-wrap .wpcf7-form select:focus { border-color: var(--mhb-accent, #94a3b8); }
.mhb-modal__cf7-wrap .wpcf7-form input[type="submit"] {
  margin-top: 4px;
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 12px;
  color: #fff;
  background: var(--mhb-accent, #0e2033);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s ease, opacity .15s ease;
}
.mhb-modal__cf7-wrap .wpcf7-form input[type="submit"]:hover { filter: brightness(1.1); }
.mhb-modal__cf7-wrap .wpcf7-form input[type="submit"]:disabled { opacity: .6; cursor: default; }
.mhb-modal__cf7-wrap .wpcf7-spinner { display: block; margin: 8px auto 0; }
.mhb-modal__cf7-wrap .wpcf7-response-output {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
}
.mhb-modal__cf7-wrap form.sent .wpcf7-response-output { color: #12997B; border-color: #12997B; }
.mhb-modal__cf7-wrap form.failed .wpcf7-response-output,
.mhb-modal__cf7-wrap form.aborted .wpcf7-response-output,
.mhb-modal__cf7-wrap form.invalid .wpcf7-response-output { color: #b60812; border-color: #b60812; }
.mhb-modal__cf7-wrap .wpcf7-not-valid-tip { color: #b60812; font-size: 12px; margin-top: 4px; }

/* -----------------------------------------------------------
   Màn hình di động nhỏ (320px–480px): thu gọn các nút để luôn
   nằm trên 1 hàng, và chuyển thẻ popup chi nhánh sang dạng
   "bottom sheet" cố định theo màn hình để không bao giờ tràn
   ra ngoài 2 bên, bất kể có bao nhiêu chi nhánh hay tên dài
   ngắn khác nhau.
----------------------------------------------------------- */
@media (max-width: 480px) {
  .mhb-bar { padding-left: 6px; padding-right: 6px; }
  .mhb-bar__inner { gap: 6px; }

  .mhb-btn { font-size: 11px; gap: 5px; }
  .mhb-btn--branch { padding: 7px 10px 7px 6px; }
  .mhb-btn--callback { padding: 9px 11px; }

  .mhb-btn__icon-wrap { width: 21px; height: 21px; }
  .mhb-icon { width: 12px; height: 12px; }
  .mhb-btn__icon-wrap img.mhb-icon { width: 14px; height: 14px; }

  /* Popup chi nhánh: neo theo màn hình (viewport), không neo theo
     nút bấm nữa -> không thể bị lệch ra ngoài mép trái/phải dù
     nút nằm ở đâu trên thanh và dù có bao nhiêu chi nhánh.
     Dùng "[data-align]" (khớp cả left/center/right) để độ ưu
     tiên (specificity) bằng hoặc cao hơn các quy tắc
     .mhb-popover[data-align="..."] ở phần desktop bên trên, nếu
     không trình duyệt vẫn ưu tiên transform/animation của quy
     tắc desktop bất kể thứ tự khai báo trong file. */
  .mhb-popover[data-align] {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(60px + env(safe-area-inset-bottom));
    width: auto;
    max-width: none;
    transform: none;
    animation-name: mhb-rise;
  }
  .mhb-popover__arrow { display: none; }

  /* Thu gọn khoảng đệm bên trong thẻ liên hệ để số điện thoại dài
     vẫn hiển thị đủ, không bị cắt bớt (ellipsis) trên màn hình hẹp. */
  .mhb-row { padding: 12px 12px; gap: 8px; }
  .mhb-row__icon { width: 34px; height: 34px; }
  .mhb-row__cta { padding: 7px 12px; font-size: 13px; }
  .mhb-row__value { font-size: 14.5px; }
}

@media (max-width: 360px) {
  .mhb-btn { font-size: 10.5px; }
  .mhb-btn--branch { padding: 6px 9px 6px 6px; }
  .mhb-btn--callback { padding: 8px 10px; }
}