/* ========= NAVBAR BASE ========= */
.main-navbar{
  background:#fff;
  border-bottom:1px solid #e5e7eb;
  position:sticky;
  top:0;
  z-index:40;
}
.brand-luxury {
    font-family: "Playfair Display", serif;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: #1a1a1a !important;
    text-transform: uppercase;
}

.main-navbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap; /* cho phép menu rơi xuống dòng dưới */
}

.navbar-brand{
  font-weight:800;
  font-size:20px;
  color:#111827;
  text-decoration:none;
}

/* Cụm bên phải (search + nút 3 sọc) */
.header-right{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
}

/* MENU ngang (desktop) */
.menu{
  display:flex;
  align-items:center;
  gap:16px;
  margin:0;
  padding:0;
}

.menu-link{
  font-weight:700;
  color:#111827;
  text-decoration:none;
  padding:8px 4px;
  line-height:1.2;
}
.menu-link:hover,
.menu-item:focus-within > .menu-link{
  color:#0ea5e9;
}

/* ===== Dropdown anchor & bridge ===== */
.menu-item.has-dropdown{
  position:relative;
}
.menu-item.has-dropdown::after{
  content:"";
  position:absolute;
  left:-12px;
  right:-12px;
  top:100%;
  height:18px; /* cầu nối giữ hover */
}

/* ===== Panel ===== */
.dropdown-panel{
  display:none;
  position:absolute;
  top:calc(100% + 10px);
  left:-12px;
  --dpw:560px;
  width:var(--dpw);
  max-width:min(92vw,var(--dpw));
  max-height:60vh;
  overflow:auto;
  background:#fff;
  margin:0;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 20px 40px rgba(16,24,40,.12);
  padding:12px;
  z-index:1000;
}
.menu-item.has-dropdown:hover > .dropdown-panel,
.dropdown-panel.open{
  display:block;
}

/* ===== Grid trong panel ===== */
.dropdown-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(180px,1fr));
  gap:8px 10px;
  min-width:260px;
}

/* ===== Item trong dropdown ===== */
.dropdown-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:10px;
  color:#111827;
  text-decoration:none;
  border:1px solid transparent;
  transition:background .15s ease;
}
.dropdown-item:hover,
.dropdown-item:focus{
  background:#f8fafc;
  border-color:#e2e8f0;
  color:#0ea5e9;
}
.dropdown-thumb{
  width:32px;
  height:32px;
  object-fit:cover;
  border-radius:8px;
  border:1px solid rgba(0,0,0,.06);
}
.dropdown-name{
  flex:1;
}
.dropdown-count{
  font-size:12px;
  color:#475569;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  border-radius:999px;
  padding:2px 8px;
}
.dropdown-actions{
  padding:8px 2px;
}
.btn-mini{
  font-size:12px;
  padding:6px 10px;
  border:1px solid #e5e7eb;
  border-radius:8px;
  background:#fff;
}

/* ===== Status text ===== */
.dropdown-status{
  padding:8px 12px;
  color:#6b7280;
}
.dropdown-status.error{
  color:#dc2626;
}

/* ===== Search form ===== */
.search-form{
  display:flex;
  align-items:center;
  gap:8px;
}

.search-input{
  height:40px;
  border-radius:10px;
  border:1px solid #e5e7eb;
  padding:0 12px;
  width:min(320px,40vw);
}

.btn-search{
  height:40px;
  border-radius:10px;
  font-weight:700;
  background:linear-gradient(45deg,#0ea5e9,#60a5fa);
  color:#fff;
  border:0;
  padding:0 14px;
  box-shadow:0 10px 22px rgba(14,165,233,.20);
}

/* ===== Nút 3 sọc (hamburger) ===== */
.menu-toggle{
  display:none; /* desktop ẩn */
  border:0;
  background:transparent;
  padding:6px;
  cursor:pointer;
}

.menu-toggle-bar{
  display:block;
  width:22px;
  height:2px;
  border-radius:999px;
  background:#111827;
  position:relative;
}
.menu-toggle-bar::before,
.menu-toggle-bar::after{
  content:"";
  position:absolute;
  left:0;
  width:22px;
  height:2px;
  border-radius:999px;
  background:#111827;
}
.menu-toggle-bar::before{ top:-6px; }
.menu-toggle-bar::after{ top:6px; }

/* ========= RESPONSIVE ========= */

/* >= 1200px: dropdown-grid 4 cột */
@media (max-width: 768px) {

    /* Container: xếp theo cột, căn giữa */
    .main-navbar .container {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        gap: 8px;
    }

    /* Logo + ô tìm kiếm đều căn giữa */
    .search-form {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .search-input {
        width: 100%;
        max-width: 320px;
    }

    /* Nút 3 sọc hiện trên mobile */
    .menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: 0;
    }

    /* MENU: ẩn mặc định, xổ dọc khi mở */
    .menu {
        display: none !important; /* ẩn khi chưa bấm */
        flex-direction: column;
        align-items: stretch; /* mỗi item chiếm full width */
        width: 100%;
        margin-top: 8px;
        gap: 4px; /* giảm khoảng cách giữa các item */
    }

    /* Khi header có .is-open (Blazor set) -> hiện menu */
    .main-navbar.is-open .menu {
        display: flex !important;
    }

    /* Mỗi item & link: full chiều ngang, chữ căn giữa */
    .menu-item {
        width: 100%;
    }

    .menu-link {
        display: block;
        width: 100%;
        padding: 6px 0;
        text-align: center;
    }

    /* Dropdown trong mobile: nằm ngay dưới, không tràn */
    .menu-item.has-dropdown {
        position: static;
    }

        .menu-item.has-dropdown::after {
            display: none;
        }

    .dropdown-panel {
        position: relative;
        top: auto;
        left: 0;
        right: 0;
        box-shadow: none;
        border-radius: 8px;
        margin-top: 4px;
    }

    .dropdown-grid {
        grid-template-columns: 1fr;
    }
}