/* ===== Thanh menu ngang =====
   Gộp hai thanh lối tắt trên / dưới cũ vào một hàng dính dưới header.
   Từ 1080px: hiện đủ mọi mục, ẩn luôn nút "Xem tất cả", mục cuối đẩy sát lề
   phải. Dưới 1080px: không cuộn ngang — mục nào không đủ chỗ thì ẩn hẳn ở hàng
   ngang và chỉ đúng những mục đó mới hiện trong bảng "Xem tất cả".

   Việc chia mục nằm trọn trong khối "Bao nhiêu mục hiện ra" bên dưới, không
   dùng JS đo đạc. JS còn lại duy nhất việc đóng / mở bảng. */

:root {
    /* Đệm ngang của mỗi mục — nền hover cần nó, nhưng nó cũng đẩy chữ vào
       trong, nên hai mục ngoài cùng phải trừ ngược lại đúng chừng này. */
    --menu-bar-pad-x: min(calc(8 * 100vw / 430), 8px);
}

/* Hai khối dưới đây phải đi kèm .menu-top: style.css có sẵn
   `.menu-top .container { display:flex; flex-wrap:wrap }` cho thanh menu cũ,
   trọng số cao hơn nên viết trơn `.menu-bar` là bị nó đè. */
.menu-top .menu-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.menu-bar-list {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;

    /* Kéo ngược bằng đúng phần đệm để chữ của mục đầu tiên thẳng hàng với
       cạnh trái container, chứ không thụt vào 8px như trước. */
    margin-left: calc(-1 * var(--menu-bar-pad-x));
}

.menu-bar-item {
    display: flex;
    flex: none;
}

.menu-top .menu-bar-item > a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: min(calc(4 * 100vw / 430), 4px) var(--menu-bar-pad-x);
    border-radius: 6px;
    white-space: nowrap;
    transition: background-color .15s ease;
}

.menu-bar-item > a:hover { background: rgba(0, 0, 0, .06); }

/* ----- Nút mở bảng đầy đủ ----- */

.menu-bar-all {
    display: flex;
    flex: none;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    margin-right: calc(-1 * var(--menu-bar-pad-x));
    padding: min(calc(4 * 100vw / 430), 4px) var(--menu-bar-pad-x);
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #333;
    font-family: Arial;
    font-size: min(calc(15 * 100vw / 430), 15px);
    line-height: 1.35;
    white-space: nowrap;
    cursor: pointer;
}

.menu-bar-all:hover { background: rgba(0, 0, 0, .06); }

/* Icon ăn theo màu chữ của từng mục, để mã màu đỏ / xanh của các lối tắt vẫn
   đọc được ở cả hình lẫn chữ. Riêng hai icon của nút "Xem tất cả" thì để xám. */
.menu-bar-icon {
    width: 15px;
    height: 15px;
    flex: none;
}

.menu-bar-all .menu-bar-icon { color: #6b7280; }

.menu-bar-chevron { transition: transform .18s ease; }
.menu-bar-all[aria-expanded="true"] .menu-bar-chevron { transform: rotate(180deg); }

/* ----- Bảng đầy đủ ----- */

/* Khung trắng bám đúng bề ngang container: dải bao ngoài chỉ để định vị nên
   để trong suốt và cho chuột đi xuyên qua — bấm ra hai bên vẫn tính là bấm ra
   ngoài bảng, tức vẫn đóng được. */
.menu-top .menu-bar-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 30;
    pointer-events: none;
}

.menu-bar-panel[hidden] { display: none; }

.menu-top .menu-bar-panel-inner {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 4px;
    padding: 10px;
    pointer-events: auto;
    border: 1px solid #dcdcdc;
    border-top: 0;
    border-radius: 0 0 10px 10px;
    background: #fff;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .12);
}

/* Kèm .menu-top vì style.css có `.menu a { display: inline-block }` trọng số
   cao hơn — viết trơn thì icon bị đẩy xuống dòng riêng, không nằm cạnh chữ. */
.menu-top .menu-bar-panel-link {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border-radius: 8px;
    color: #333;
    font-family: Arial;
    font-size: min(calc(15 * 100vw / 430), 15px);
    text-decoration: none;
}

/* Cắt bằng dấu … phải đặt trên chính ô chữ, không đặt trên thẻ flex bao ngoài */
.menu-bar-panel-link > span {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-bar-panel-link:hover { background: #f3f4f6; }

/* ----- Bao nhiêu mục hiện ra ở mỗi bề ngang -----

   Chốt bằng breakpoint chứ không đo bằng JS: nhãn nằm cứng trong $menuBarLinks
   (layouts/app_admin.blade.php) nên bề rộng biết trước. Số đo thật ở Arial 15px:
   mục 104 / 95 / 103 / 114 / 126 / 68 / 88 / 88 / 128px, nút "Xem tất cả" 128px,
   container = 100%-20px (80% trong khoảng 601–1023px, tối đa 980px). Từ đó ra
   các mốc: 3 mục → 678px: 4 → 835px: 5 → 920px: 6 → 1024px: 7 → 1080px: đủ 9.

   Ba mục đầu là mục ghim: không bao giờ ẩn (hẹp quá thì chịu bị cắt, vì chúng
   không có bản sao trong bảng) nên đáy luôn là 3.

   ĐỔI NHÃN, THÊM MỤC HAY ĐỔI THỨ TỰ TRONG $menuBarLinks LÀ PHẢI ĐO LẠI VÀ SỬA
   CÁC MỐC NÀY — cả hai danh sách dưới đây đếm theo đúng thứ tự mảng đó. */

.menu-bar-item:nth-child(n+4) { display: none; }

@media only screen and (min-width: 678px) {
    .menu-bar-item:nth-child(-n+4) { display: flex; }
    .menu-bar-item:nth-child(n+5) { display: none; }
    .menu-top .menu-bar-panel-link:nth-child(-n+1) { display: none; }
}

@media only screen and (min-width: 835px) {
    .menu-bar-item:nth-child(-n+5) { display: flex; }
    .menu-bar-item:nth-child(n+6) { display: none; }
    .menu-top .menu-bar-panel-link:nth-child(-n+2) { display: none; }
}

@media only screen and (min-width: 920px) {
    .menu-bar-item:nth-child(-n+6) { display: flex; }
    .menu-bar-item:nth-child(n+7) { display: none; }
    .menu-top .menu-bar-panel-link:nth-child(-n+3) { display: none; }
}

@media only screen and (min-width: 1024px) {
    .menu-bar-item:nth-child(-n+7) { display: flex; }
    .menu-bar-item:nth-child(n+8) { display: none; }
    .menu-top .menu-bar-panel-link:nth-child(-n+4) { display: none; }
}

@media only screen and (min-width: 1080px) {
    /* Đủ chỗ cho tất cả nên bảng và nút mở bảng đều thừa. Ẩn cả bảng để lỡ nó
       đang mở lúc kéo rộng cửa sổ thì cũng tự mất. */
    .menu-bar-item:nth-child(n) { display: flex; }
    .menu-bar-all { display: none; }
    .menu-top .menu-bar-panel { display: none; }

    /* Chỗ trống của nút vừa bỏ đi thì dồn về trước mục cuối ("Tra sản phẩm") để
       nó nằm sát lề phải container. Trừ ngược phần đệm đúng như nút cũ để chữ
       thẳng hàng với cạnh phải — nhưng đúng 8px đó lại lòi ra khỏi khung, nên
       phải mở overflow, không thì nền hover của mục cuối bị xén. Mở được vì ở
       bề ngang này mọi mục đều đủ chỗ, chẳng còn gì để cắt. */
    .menu-bar-list { overflow: visible; }

    .menu-bar-list > .menu-bar-item:last-child {
        margin-left: auto;
        margin-right: calc(-1 * var(--menu-bar-pad-x));
    }
}

@media only screen and (max-width: 480px) {
    .menu-top .menu-bar-panel-inner {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}

/* ===== MENU-BAR DÙNG CHUNG CONTAINER VỚI THANH TRÊN VÀ THÂN TRANG =====

   menu-bar và panel của nó trước đây bọc trong .container (980px) riêng của
   thongke nên lệch hẳn so với .header-inner và .admin-shell (--shell-max). Cho
   dùng chung một container thì cả ba thẳng một mép. Bỏ luôn mẹo padding-left
   145px trước đây — không cần nữa vì mép trái đã trùng nhau. */
.menu-top .menu-bar,
.menu-top .menu-bar-panel-inner {
    width: 100%;
    max-width: var(--shell-max);
    margin-inline: auto;
    padding-inline: var(--content-pad);
}