/* Menu mobile Quà Tặng Đức Đạt: áp dụng cho màn hình dưới 992px (Bootstrap navbar-expand-lg).
   Hàng 1: logo + nút Menu. Hàng 2: ô tìm kiếm. Bấm Menu: bảng danh mục xổ ngay dưới header.
   Gỡ bằng cách xóa dòng <link> tới file này trong head.php. */

.nav-cta { display: none; }

@media (max-width: 991.98px) {
  header.page-header > .container {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    align-items: center;
  }

  /* logo (trái) và ô tìm kiếm (hàng dưới, tràn ngang) */
  header.page-header .logo-search-row { display: contents; }
  header.page-header .logo-search-row > div:first-child {
    grid-column: 1; grid-row: 1;
    flex: none; width: auto; max-width: none;
    margin: 0 !important; padding: 10px 0;
    text-align: left !important;
  }
  header.page-header .logo-search-row > div:last-child {
    grid-column: 1 / -1; grid-row: 2;
    flex: none; width: auto; max-width: none;
    padding: 0 0 12px;
  }
  header.page-header .logo-link img { display: block; height: 36px; width: auto; max-width: 100%; }

  /* nút Menu (phải) */
  header.page-header nav.navbar {
    grid-column: 2; grid-row: 1;
    margin: 0 !important; padding: 0; min-height: 0; position: static;
  }
  header.page-header .navbar-toggler {
    display: flex; align-items: center; gap: 6px;
    height: 48px; margin: 0; padding: 0 16px;
    border: 0; border-radius: 14px;
    background: #006837; color: #fff;
    font-size: 15px; font-weight: 700; line-height: 1;
    box-shadow: none;
  }
  header.page-header .navbar-toggler:hover { background: #005a2f; color: #fff; }
  header.page-header .navbar-toggler:focus-visible { outline: 3px solid #0A7A45; outline-offset: 2px; }
  header.page-header .navbar-toggler-icon { display: none; }
  header.page-header .navbar-toggler span:last-child { margin-left: 0; }

  /* bảng danh mục */
  header.page-header .navbar-collapse {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 1040;
    background: #fff;
    border-top: 1px solid #E1E9E3;
    box-shadow: 0 18px 36px rgba(20, 35, 26, .16);
    max-height: calc(100vh - 250px);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 8px 12px 14px;
  }
  header.page-header .navbar-nav { margin: 0 !important; }
  header.page-header .navbar-nav .nav-item { margin: 2px 0; }
  header.page-header .navbar-nav .nav-link {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 52px; padding: 0 12px;
    border-radius: 12px;
    font-size: 16px; font-weight: 600; line-height: 1.3;
    color: #14231A; text-transform: none; background: transparent;
  }
  header.page-header .navbar-nav .nav-link:hover,
  header.page-header .navbar-nav .nav-link:focus { background: #F1F6F3; color: #14231A; }
  header.page-header .navbar-nav .nav-link:focus-visible { outline: 3px solid #0A7A45; outline-offset: -3px; }
  header.page-header .navbar-nav .nav-item.active .nav-link { background: #E6F2EA; color: #006837; font-weight: 700; }

  /* mũi tên nhóm: xoay khi mở */
  header.page-header .navbar-nav .dropdown-toggle::after {
    content: ""; display: block; flex: none;
    width: 22px; height: 22px; margin: 0; border: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23566A5C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 22px no-repeat;
    transition: transform .2s ease;
  }
  header.page-header .navbar-nav .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
  header.page-header .navbar-nav .dropdown-toggle[aria-expanded="true"] { background: #F1F6F3; color: #006837; }

  /* nhóm con */
  header.page-header .navbar-nav .dropdown-menu {
    position: static; float: none;
    margin: 2px 0 6px; padding: 4px;
    background: #F6F9F7; border: 0; border-radius: 12px; box-shadow: none;
  }
  header.page-header .navbar-nav .dropdown-item {
    display: flex; align-items: center;
    min-height: 46px; padding: 0 12px;
    border-radius: 9px;
    font-size: 15px; font-weight: 500; color: #14231A; white-space: normal;
  }
  header.page-header .navbar-nav .dropdown-item:hover,
  header.page-header .navbar-nav .dropdown-item:focus { background: #E6F2EA; color: #006837; }

  /* nút Chat trực tuyến cuối bảng: mở khung chat tư vấn có sẵn của site (chat.js, thuộc tính data-fx-chat) */
  header.page-header .navbar-nav .nav-cta {
    display: block; margin: 12px 0 0; padding-top: 12px;
    border-top: 1px solid #E1E9E3;
  }
  header.page-header .navbar-nav .nav-cta .nav-cta-chat {
    width: 100%; height: 56px;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    border: 0; border-radius: 14px;
    background: #006837; color: #fff;
    font-size: 16px; font-weight: 700; line-height: 1;
  }
  header.page-header .navbar-nav .nav-cta .nav-cta-chat:hover { background: #005a2f; color: #fff; }
  header.page-header .navbar-nav .nav-cta .nav-cta-chat:focus-visible { outline: 3px solid #0A7A45; outline-offset: 2px; }
  header.page-header .navbar-nav .nav-cta .nav-cta-chat::before {
    content: ""; flex: none; width: 22px; height: 22px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/%3E%3Cpath d='M9 11h6M9 14h4'/%3E%3C/svg%3E") center / 22px no-repeat;
  }
}

/* Nút "Chat live" ở thanh liên hệ nhanh dưới cùng (thay nút Đường đi): là <button> nên cần bỏ kiểu mặc định, giữ dáng như .ux-bar__side */
.ux-bar button.ux-bar__side {
  -webkit-appearance: none; appearance: none;
  background: transparent; border: 0; margin: 0; padding: 0;
  font-family: inherit; cursor: pointer;
}
/* Chat live: hành động chính của thanh dưới. Biểu tượng nằm trong viên thuốc xanh (nổi hơn "Báo giá"), chấm trạng thái xanh khi đang trong giờ làm việc
   (chat.js gắn class is-online, ngoài giờ là chấm xám), vùng chạm cao 52px. */
.ux-bar .ux-bar__chat { position: relative; flex: 0 0 64px; min-height: 52px; gap: 3px; color: #0f4d2c; font-weight: 700; font-size: 11px; -webkit-tap-highlight-color: transparent; }
.ux-bar .ux-bar__chat svg { box-sizing: content-box; width: 20px; height: 20px; padding: 5px 14px; border-radius: 16px; background: #0f4d2c; color: #fff; transition: background .15s ease, transform .1s ease; }
.ux-bar .ux-bar__chat:hover svg { background: #0b3a21; }
.ux-bar .ux-bar__chat:active svg { transform: scale(.94); }
.ux-bar .ux-bar__chat::after { content: ""; position: absolute; top: 2px; right: 6px; width: 9px; height: 9px; box-sizing: content-box; border-radius: 50%; background: #9aa5a0; border: 2px solid #fff; }
.ux-bar .ux-bar__chat.is-online::after { background: #22c55e; animation: fxPulse 2.4s ease-out infinite; }
@keyframes fxPulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); } }
@media (prefers-reduced-motion: reduce) {
  .ux-bar .ux-bar__chat.is-online::after { animation: none; }
  .ux-bar .ux-bar__chat svg { transition: none; }
}
.ux-bar .ux-bar__chat:focus-visible { outline: 3px solid #0A7A45; outline-offset: 2px; border-radius: 12px; }

/* Nút "Chat live" trong dock nổi trên máy tính (cùng cột với Chat Zalo, Gọi): nút chính nên nằm trên cùng, có chấm trạng thái giống thanh dưới mobile */
.ux-dock__btn--chat { background: #0f4d2c; border: 0; font-family: inherit; cursor: pointer; }
.ux-dock__btn--chat::after { content: ""; position: absolute; top: 1px; right: 1px; width: 11px; height: 11px; box-sizing: content-box; border-radius: 50%; background: #9aa5a0; border: 2px solid #fff; }
.ux-dock__btn--chat.is-online::after { background: #22c55e; animation: fxPulse 2.4s ease-out infinite; }
.ux-dock__btn--chat:focus-visible { outline: 3px solid #fff; box-shadow: 0 0 0 6px #0f4d2c; }
@media (prefers-reduced-motion: reduce) { .ux-dock__btn--chat.is-online::after { animation: none; } }