/* ============================================================
   Sửa lỗi submenu menu ngang (Sản phẩm / Mua xe...) bị tràn mép
   phải màn hình -> sinh thanh cuộn ngang -> nav bị reflow -> mất
   hover -> nháy liên tục khi di chuột.

   - Cầu nối vô hình lấp khe hở giữa mục menu và submenu (chống mất hover).
   - Submenu nào vượt mép phải sẽ được JS gắn class .vf-submenu--flip
     để canh về mép phải, luôn nằm trong màn hình.
   ============================================================ */

/* Cầu nối vô hình: nối liền vùng hover giữa mục menu và submenu */
.vf-design-nav__submenu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -8px;
    height: 8px;
}

/* Submenu vượt mép phải -> canh theo mép phải của mục menu */
.vf-design-nav__item .vf-design-nav__submenu.vf-submenu--flip {
    left: auto;
    right: 0;
    transform: translate(0, 10px);
}
.vf-design-nav__item:hover .vf-design-nav__submenu.vf-submenu--flip,
.vf-design-nav__item:focus-within .vf-design-nav__submenu.vf-submenu--flip {
    transform: translate(0, 0);
}

/* Biến thể trang chủ (offset 2px giống bản gốc) */
body:has(.vf-home) .vf-design-nav__submenu.vf-submenu--flip {
    transform: translate(0, 2px);
}
body:has(.vf-home) .vf-design-nav__item:hover .vf-design-nav__submenu.vf-submenu--flip,
body:has(.vf-home) .vf-design-nav__item:focus-within .vf-design-nav__submenu.vf-submenu--flip {
    transform: translate(0, 0);
}

/* ------------------------------------------------------------
   Sửa lỗi "cả menu giãn ra rồi thu lại" khi di chuột vào mục có
   submenu (Sản phẩm / Mua xe).
   Nguyên nhân: mũi tên caret dùng ::after nằm trong dòng (chiếm
   ~14px). Khi hover, rule gạch chân lại biến ::after thành absolute
   -> link mất 14px -> nav canh giữa bị reflow.
   Cách sửa: bỏ caret ::after, chuyển caret sang ::before dạng
   absolute + chừa sẵn padding -> bề rộng link KHÔNG đổi khi hover.
   ------------------------------------------------------------ */
.vf-design-nav__item.has-submenu > a {
    position: relative;
    padding-right: 18px;
}
.vf-design-nav__item.has-submenu > a::after {
    content: none !important;
}
.vf-design-nav__item.has-submenu > a::before {
    content: "";
    position: absolute;
    right: 2px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -4px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
    pointer-events: none;
}

/* ------------------------------------------------------------
   Nút đóng menu mobile (X) — nổi bật, luôn thấy ở góc trên bên
   phải panel menu. Chỉ hiện khi menu mở (panel có kích thước).
   ------------------------------------------------------------ */
.nav-mobile-close {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #e4002b;
    color: #fff;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(228, 0, 43, .35);
    transition: background .15s ease, transform .15s ease;
}
.nav-mobile-close span {
    display: block;
    margin-top: -4px;
    font-size: 30px;
    font-weight: 400;
}
.nav-mobile-close:hover,
.nav-mobile-close:focus {
    background: #b8001f;
    transform: scale(1.06);
    outline: none;
}
/* Panel đóng (width 0) -> ẩn luôn nút X để không lộ ra ngoài */
.nav-mobile:not(.nav-mobile-open) .nav-mobile-close {
    display: none;
}