/* =========================
   AI168 NAVBAR (White - Blue) - FULL CSS (DESKTOP + MOBILE)
   - Mobile: menu dạng panel + item dạng card
   - Fix: dropdown mobile không bị chồng (static + show/hide)
   - Desktop: dropdown hover + click mượt
========================= */

:root{
  --bb-bg: rgba(255,255,255,.86);
  --bb-bg-solid: #ffffff;

  --bb-text: rgba(15,23,42,.86);
  --bb-text-strong: rgba(15,23,42,.96);
  --bb-muted: rgba(15,23,42,.58);

  --bb-line: rgba(2,6,23,.10);
  --bb-hover: rgba(2,6,23,.06);

  --bb-blue: #2f81f7;
  --bb-blue-2: #0ea5e9;

  --bb-radius: 16px;
  --bb-shadow: 0 18px 40px rgba(2,6,23,.18);
  --bb-shadow-soft: 0 10px 24px rgba(2,6,23,.12);
}

/* ===== Navbar base ===== */
.ai168-navbar{
  position: sticky;
  top: 0;
  z-index: 5000;
  transition: all 0.25s ease;

  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(240,248,255,.92));
  border-bottom: 1px solid var(--bb-line);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: var(--bb-shadow-soft);
}

/* Container rộng */
.ai168-navbar .container{
  max-width: 95%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

/* ===== Logo ===== */
.ai168-navbar .navbar-brand{
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--bb-text-strong);
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-right: auto;
}

.ai168-navbar .navbar-brand img{
  height: 48px;
  transition: transform .2s ease, filter .2s ease;
}

.ai168-navbar .navbar-brand:hover img{
  transform: translateY(-1px) scale(1.03);
  filter: brightness(1.02);
}

.logo-glow{
  filter: drop-shadow(0 10px 22px rgba(47,129,247,.25));
}

/* ===== Toggler ===== */
.ai168-navbar .navbar-toggler{
  border: none;
  background: transparent;
}
.ai168-navbar .navbar-toggler:focus{ box-shadow: none; }

/* ===== Menu base ===== */
.ai168-navbar .navbar-nav{
  align-items: center;
  gap: 6px;
}

.ai168-navbar .nav-link{
  font-weight: 650;
  color: var(--bb-text) !important;
  padding: 8px 14px;
  border-radius: 999px;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.ai168-navbar .nav-link:hover{
  color: var(--bb-text-strong) !important;
  background: var(--bb-hover);
  transform: translateY(-1px);
}

.ai168-navbar .nav-link.active{
  color: var(--bb-blue) !important;
  background: rgba(47,129,247,.14);
  box-shadow: inset 0 0 0 1px rgba(47,129,247,.22);
}

/* ===== Dropdown menu (base) ===== */
.ai168-navbar .dropdown-menu{
  border-radius: var(--bb-radius);
  border: 1px solid rgba(2,6,23,.10);
  background: rgba(255,255,255,.98);
  box-shadow: var(--bb-shadow);
  padding: .5rem;
  z-index: 6000;
}

.ai168-navbar .dropdown-item{
  color: var(--bb-text) !important;
  border-radius: 12px;
  padding: .6rem .8rem;
  transition: background .16s ease, color .16s ease;
}

.ai168-navbar .dropdown-item:hover{
  color: var(--bb-text-strong) !important;
  background: rgba(47,129,247,.10);
}

/* ===== Buttons ===== */
.btn-gradient{
  background: linear-gradient(135deg, var(--bb-blue), var(--bb-blue-2));
  color: #fff !important;
  font-weight: 700;
  border: none;
  border-radius: 999px;
  padding: 8px 18px;
  box-shadow: 0 12px 24px rgba(47,129,247,.18);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-gradient:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(47,129,247,.26);
  filter: saturate(1.05);
}

.btn-user{
  background: rgba(2,6,23,.04);
  color: var(--bb-text-strong) !important;
  border: 1px solid rgba(2,6,23,.12);
  border-radius: 999px;
}
.btn-user:hover{
  background: rgba(47,129,247,.08);
  border-color: rgba(47,129,247,.28);
}

/* ===== Badges ===== */
.badge-danger{
  background:#ef4444 !important;
  color:#fff !important;
  border-radius:999px;
  font-weight:800;
}
.badge-primary{
  background:var(--bb-blue) !important;
  color:#fff !important;
  border-radius:999px;
  font-weight:800;
}
#notifBadge, .cart-count{
  border: 2px solid rgba(255,255,255,.95);
}

/* ===== Bell unread animation ===== */
.ai168-navbar .nav-link.has-unread i.fa-bell,
.ai168-navbar .nav-link.has-unread i.fa-regular.fa-bell{
  animation: bellRing 1.6s ease-in-out infinite;
  transform-origin: top center;
  color: var(--bb-blue) !important;
  text-shadow: 0 10px 20px rgba(47,129,247,.25);
}
@keyframes bellRing{
  0%{transform:rotate(0deg)}
  10%{transform:rotate(-18deg)}
  20%{transform:rotate(18deg)}
  30%{transform:rotate(-14deg)}
  40%{transform:rotate(14deg)}
  50%{transform:rotate(-8deg)}
  60%{transform:rotate(8deg)}
  70%{transform:rotate(-4deg)}
  80%{transform:rotate(4deg)}
  100%{transform:rotate(0deg)}
}

/* =========================================================
   DESKTOP LAYOUT
========================================================= */
@media (min-width: 992px){
  .ai168-navbar .navbar-collapse{
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
  }

  /* Nếu bạn muốn cố định menu giữa + phải, cần thêm class main-menu/nav-right
     (không bắt buộc, nhưng dùng thì đẹp & đều) */
  .ai168-navbar .navbar-nav.main-menu{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .ai168-navbar .navbar-nav.nav-right{
    margin-left: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
}

/* =========================================================
   DESKTOP DROPDOWN: HOVER + CLICK (Bootstrap)
========================================================= */
@media (min-width: 992px){
  .ai168-navbar .dropdown-menu{
    display: block;           /* để animation mượt */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all .18s ease-out;
    margin-top: 0;
    pointer-events: none;
  }

  .ai168-navbar .dropdown-hover:hover > .dropdown-menu{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .ai168-navbar .dropdown-menu.show{
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }
}

/* =========================================================
   MOBILE: SLIDE PANEL + CARD MENU + FIX DROPDOWN CHỒNG
========================================================= */
@media (max-width: 991.98px){

  .ai168-navbar .container{
    max-width: 100%;
    padding: 0 14px;
  }

  .ai168-navbar .navbar-brand img{ height: 42px; }

  /* Panel menu */
  .ai168-navbar .navbar-collapse{
    position: fixed;
    top: 0;
    right: -100%;
    width: min(86%, 360px);
    height: 100vh;

    background: rgba(255,255,255,.98);
    border-left: 1px solid rgba(2,6,23,.10);
    box-shadow: -14px 0 30px rgba(2,6,23,.16);

    padding: 16px 14px 18px;
    padding-top: 70px;

    transition: right .28s ease-in-out;
    z-index: 6500;
    overflow-y: auto;

    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
  }

  .ai168-navbar .navbar-collapse.show{ right: 0; }

  /* Menu list */
  .ai168-navbar .navbar-nav{
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 10px;
    margin: 0;
    padding: 0;
  }
  .ai168-navbar .nav-item{ width: 100%; }

  /* Link dạng card đều, dễ bấm */
  .ai168-navbar .nav-link{
    width: 100% !important;
    display: block !important;
    padding: 12px 44px 12px 14px !important; /* chừa chỗ mũi tên */
    border-radius: 14px !important;
    background: rgba(15,23,42,.03) !important;
    border: 1px solid rgba(2,6,23,.10) !important;
    color: var(--bb-text-strong) !important;
    transform: none !important;
  }
  .ai168-navbar .nav-link:hover{
    background: rgba(47,129,247,.08) !important;
    border-color: rgba(47,129,247,.22) !important;
  }

  /* Mũi tên dropdown gọn bên phải */
  .ai168-navbar .dropdown-toggle::after{
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
  }

  /* ===== FIX CHÍNH: dropdown mobile không chồng =====
     BS5 dropdown hay set data-bs-popper => absolute => đè lên item khác
     -> ép về static, và ẩn/hiện theo .show */
  .ai168-navbar .dropdown-menu,
  .ai168-navbar .dropdown-menu[data-bs-popper]{
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    margin: 8px 0 0 0 !important;
  }

  .ai168-navbar .dropdown-menu{
    display: none !important; /* mặc định ẩn */
    box-shadow: none !important;
    background: rgba(47,129,247,.06) !important;
    border: 1px solid rgba(47,129,247,.18) !important;
    border-radius: 14px !important;
    padding: 10px !important;
  }

  .ai168-navbar .dropdown-menu.show{
    display: block !important;
  }

  .ai168-navbar .dropdown-item{
    background: #fff !important;
    border: 1px solid rgba(2,6,23,.08) !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
  }
  .ai168-navbar .dropdown-item:last-child{ margin-bottom: 0 !important; }

  /* Dropdown của thông báo/user thường rộng -> trên mobile cho full */
  .ai168-navbar #notifDropdown + .dropdown-menu,
  .ai168-navbar #userDropdown + .dropdown-menu{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Nhóm icon + user: tách line cho sạch */
  .ai168-navbar .navbar-nav.align-items-center{
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed rgba(2,6,23,.16);
  }
}
@media (max-width: 991.98px){

  /* ✅ làm mốc cho mũi tên (pseudo-element) */
  .ai168-navbar .nav-link,
  .ai168-navbar .dropdown-toggle{
    position: relative !important;
  }

  /* ✅ cố định mũi tên luôn giữa theo chiều dọc */
  .ai168-navbar .dropdown-toggle::after{
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    transition: transform .18s ease;
  }

  /* (tuỳ chọn) xoay mũi tên khi mở dropdown */
  .ai168-navbar .dropdown-toggle.show::after{
    transform: translateY(-50%) rotate(180deg) !important;
  }
}
@media (max-width: 991.98px){
  .ai168-navbar .dropdown-menu,
  .ai168-navbar .dropdown-menu[data-bs-popper]{
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
  }
  .ai168-navbar .dropdown-menu{ display: none !important; }
  .ai168-navbar .dropdown-menu.show{ display: block !important; }
}


/* =========================================================
   Bootstrap compatibility helpers
========================================================= */
/* BS4 class */
.ai168-navbar .dropdown-menu-right{ right: 0; left: auto; }
/* BS5 class */
.ai168-navbar .dropdown-menu-end{ right: 0; left: auto; }