/************************************************
VNTrendy / menu-primary.min.css
MAIN ONLY
************************************************/

/* ===== TOPBAR FULL WIDTH ===== */

.vnt-topbar {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.22);
    position: relative;
}

.vnt-topbar::after {
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,179,0,0.4),transparent);
}

/* FLEX */

.vnt-topbar .topbar-inner {
  display:flex;
  height:55px;
}

/* CATEGORY BUTTON */

.vnt-topbar .category-toggle {
    transition: 0.3s ease;
    position: relative;
    width: 100%;
    height: 54px;
    padding: 0 12px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    border:none;
}

/* Mũi tên */

.vnt-topbar .category-toggle::after {
  content:"→";
  font-size:14px;
  color:#ffb300;
  transform:rotate(0deg);
  margin-left:auto;
  /* đẩy sang phải bằng flex */

    transition:0.25s ease;
}

.vnt-main.is-collapsed .category-toggle::after {
  transform:rotate(90deg);
}

@media (max-width:1199px) {
  .vnt-topbar .category-toggle {
    font-size:14px;
  }
}

/* hover */

.vnt-topbar .category-toggle:hover {
  background:rgba(255,179,0,0.08);
  color:#ffb300;
}

.vnt-topbar .category-toggle i {
  margin-right:8px;
  color:#ffb300;
}

/* NAV WRAP */

.vnt-topbar .header-nav {
  flex:1;
  display:flex;
  /*justify-content:center;
  */

/*Căn giữa cả menu và mega*/

 align-items:center;
  min-width:0;
}

/* MAIN MENU */

.header-nav .main-menu {
  display:flex;
  align-items:center;
  gap:34px;
  margin:0;
  padding:0;
  list-style:none;
  flex-wrap:nowrap;
  min-width:0;
}

/* =========================================================
   MENU LINK
========================================================= */

.header-nav .main-menu > li {
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
}

/* TOP LINKS */

.header-nav .main-menu > li > a {
  position:relative;
  display:block;
  padding:15px 0;

  font-size:15px;
  font-weight:700;
  line-height:1;
  letter-spacing:.3px;
  text-transform:uppercase;
  white-space:nowrap;
  transition:color 0.25s ease,opacity 0.25s ease;
}

/* underline effect */

.header-nav .main-menu > li > a::after {
  content:"";
  position:absolute;
  left:0;
  bottom:10px;
  width:0;
  height:2px;
  background:linear-gradient(
            90deg,#ffb300,#ff8f00
        );
  transition:0.3s ease;
}

/* hover */

.header-nav .main-menu > li:hover > a:after,
.header-nav .main-menu > li.open > a:after,
.header-nav .main-menu > li.current-menu-item > a:after,
.header-nav .main-menu > li.current-menu-parent > a:after {
  width:100%;
}

/* TOGGLE */

.header-nav .submenu-toggle {
  background:none;
  border:0;
  padding:0;
  margin:0;
  font-size:11px;
  cursor:pointer;
  transition:.22s ease;
}

.header-nav .submenu-toggle:hover {
  color:#333;
}

.header-nav .main-menu > li.open > .submenu-toggle {
  transform:rotate(180deg);
  color:#fff;
}

/* NORMAL DROPDOWN */

.header-nav .main-menu > li > ul {
  display:none;
  position:absolute;
  top:100%;
  left:0;
  min-width:240px;
  padding:12px 0;
  margin:0;
  list-style:none;
  background:#111;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  z-index:9999;
}

.header-nav .main-menu > li.open > ul {
  display:block;
}

.header-nav .main-menu > li > ul > li > a {
  display:block;
  padding:12px 18px;
  color:#fff;
  font-size:14px;
  font-weight:600;
  transition:.2s ease;
}

.header-nav .main-menu > li > ul > li > a:hover {
  padding-left:24px;
  background:rgba(255,255,255,.05);
}

/* topbar mega trigger */

.header-nav .main-menu > li.open > .mega-menu-box {
  display:grid;
}

/* topbar mega position */

.header-nav .mega-menu-box {
  top:100%;
  left:50%;
  transform:translateX(-50%);
}

/* =========================================
SHARED MEGA MENU
========================================= */

.mega-parent {
  position:relative;
}

.mega-menu-box {
  display:none;
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  /* responsive width */

width:clamp(750px,70vw,1200px);
  padding:28px 10px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  box-shadow:0 22px 55px rgba(0,0,0,.25);
  grid-template-columns:1fr;
  gap:30px;
  z-index:10000;
}

.header-nav .mega-menu-box {
  width:clamp(760px,71vw,1200px);
}

/* image */

.mega-col.image img {
  width:100%;
  height:auto;
  object-fit:cover;
  border-radius:14px;
}

/* layout */

.mega-menu-box.no-image {
  grid-template-columns:1fr;
}

.mega-menu-box.has-one {
  grid-template-columns:160px 1fr;
}

.mega-menu-box.has-both {
  grid-template-columns:160px 1fr 160px;
}

/* links */

.mega-col.links > ul {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  margin:0;
  padding:0;
  list-style:none;
}

@media (min-width:1200px) {
  .mega-col.links > ul {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (min-width:1600px) {
  .mega-col.links > ul {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

.mega-col.links > ul > li > a {
  display:block;
  margin-bottom:10px;
  border-bottom:1px solid #ccc;
  font-size:20px;
  font-weight:700;
  color:#000;
}

/* sub */

.mega-sub {
  margin:0;
  padding:0;
  list-style:none;
}

.mega-sub li {
  margin-bottom:6px;
}

.mega-sub li a {
  font-size:16px;
  color:#666;
  transition:.2s;
}

.mega-sub li a:hover {
  color:#052845;
  padding-left:6px;
}

/* responsive */

@media (max-width:1200px) {
  .header-nav .main-menu {
    gap:22px;
  }
  .header-nav .main-menu > li > a {
    font-size:14px;
  }
  .mega-menu-box {
    gap:20px;
  }
}

/* sidebar */

.vnt-main .vnt-category-menu {

  margin-top:0;
  border-radius:0 0 14px 14px;
  box-shadow:0 8px 25px rgba(0,0,0,.12);
  position:relative;
  max-height:335px;
  z-index:1;
}

/* KHI CLICK Menu !front-end*/

/* JS mode only */

/* chỉ khi JS add class mới ẩn */

.vnt-main.is-collapsed .vnt-category-menu {
  display:none;
}

/* menu */

.vnt-main .cate-menu {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #f0f0f0;
}

/* item */

.vnt-main .cate-menu > li {
  display:block;
  position:static;
  transition:.22s ease;
}

.vnt-main .cate-menu > li:not(:last-child) {
    border-bottom: 1px solid rgb(159 159 159 / 18%);
}

/* link */

.vnt-main .cate-menu > li > a {
  display:block;
  padding:13px 16px;

  font-size:14px;
  font-weight:500;
  transition:.22s ease;
}

/* hover */

.vnt-main .cate-menu > li:hover {
  background: rgb(219 219 219);
}

.vnt-main .cate-menu > li:hover > a {
  padding-left:22px;
}

/* hide toggle */

.vnt-main .submenu-toggle {
  display:none !important;
}

/* arrow */

.vnt-main .cate-menu > li.menu-item-has-children > a:after {
  content:"\203A";
  float:right;
  font-size:18px;
  color:rgb(0 0 0 / 50%);
  transition:.22s ease;
}

.vnt-main .cate-menu > li:hover > a:after {

  transform:translateX(4px);
}

/* category mega trigger */

.vnt-main .cate-menu > li:hover > .mega-menu-box {
  display:grid;
}

/* category mega position */

.vnt-main .vnt-category-menu .mega-menu-box {
  left:100%;
  top:0;
  transform:none;
  max-width:900px;
  min-height:100%;
  max-height:68vh;
  padding:20px;
  overflow-y:auto;
  border-radius:0 16px 16px 0;
  position:absolute;
}

/************************************************
VNTrendy / Slideshow
MAIN ONLY
************************************************/

/* 3. Slider fill full chiều cao cột */

#vnt-slider {
  flex:1;
  width:100%;
  height:100%;
}

/* 4. Quan trọng nhất:KHÔNG cho ảnh tự quyết chiều cao */

#vnt-slider .carousel-inner,
#vnt-slider .item {
  height:100%;
}

/* 5. Ảnh bị "nhốt" trong khung */

#vnt-slider .item img {
  width:100%;
  height:319px;
  object-fit:cover;
  display:block;
}

#vnt-slider .carousel-inner {
  height:319px;
  display:block;
  position:relative;
  /* chỉnh theo layout */;
}

#vnt-slider .item.active {
  display:block;
  position:relative;
}

/* Reset nền mặc định của Bootstrap */

#vnt-slider .carousel-control {
  width:50px;
  height:50px;
  top:40%;
  bottom:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.4);
  border-radius:50%;
}

/* Icon mũi tên */

#vnt-slider .carousel-control span {
  display:flex;
  align-items:center;
  justify-content:center;
  width:45px;
  height:45px;
  background:rgba(0,0,0,0.5);
  border-radius:50%;
  color:#fff;
  font-size:20px;
  transition:all 0.3s ease;
}

/* Hover đẹp hơn */

#vnt-slider .carousel-control span:hover {
  background:#ff5722;
  transform:scale(1.1);
}

/* Đẩy ra sát 2 bên */

#vnt-slider .carousel-control.left {
  left:10px;
}

#vnt-slider .carousel-control.right {
  right:10px;
}

/* Hover đẹp hơn */

#vnt-slider .carousel-control span:hover {
  background:#ff5722;
  transform:scale(1.1);
}

@media (max-width:991px) {
  .vnt-slideshow .slider {
    padding:0;
  }
}

@media (min-width:992px) {
  .vnt-slideshow .slider {
    padding:15px 15px 0 0;
  }
}

/**End**/

/* ======================================
STICKY TOPBAR
====================================== */

.vnt-topbar.is-sticky {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:999;
  animation:topbarSticky .28s ease;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  background: #fff;
  height:53px;
}

/* WP ADMIN BAR */

body.admin-bar .vnt-topbar.is-sticky {
  top:32px;
}

/* FIX BOOTSTRAP ROW */

.vnt-topbar.is-sticky .topbar-inner {
  display:flex;
  height:52px;
  align-items:center;
}

/* FIX NAV */

.vnt-topbar.is-sticky .header-nav {
  position:relative;
}

/* ======================================
CATEGORY MENU STICKY MODE
====================================== */

.vnt-topbar.is-sticky .vnt-main {
  position:relative;
}

/* dropdown đóng mặc định */

.vnt-topbar.is-sticky .vnt-category-menu {
  display:none;
  position:absolute;
  top:100%;
  left:0;
  width:100%;
  z-index:999999;
}

/* sticky mode arrow rotate */

.vnt-topbar.is-sticky .vnt-main.active .category-toggle::after {
  transform:rotate(90deg);
}

/* khi mở */

.vnt-topbar.is-sticky .vnt-main.active .vnt-category-menu {
  display:block;
}

/* category button compact hơn */

.vnt-topbar.is-sticky .category-toggle {
  border-radius:0;
}

/* smooth */

.vnt-topbar {
  transition:box-shadow .25s ease,transform .25s ease;
}

/* animation */

@keyframes topbarSticky {
  from {
    transform:translateY(-100%);
    opacity:0;
  }
  to {
    transform:translateY(0);
    opacity:1;
  }
}