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

/* sidebar */
.vnt-main .vnt-category-menu {
    background: #001639;
    margin-top: 1px;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .12);
    position: relative;
    max-height: 335px;
    z-index:1;
    display:none;
}

/* KHI CLICK */
.vnt-main.open .vnt-category-menu{
    display: block;
     position:relative;
}


/* menu */
.vnt-main .cate-menu {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
    background: linear-gradient(
    135deg,
    rgba(255,255,255,0.5),
    rgba(255,255,255,0.2)
  );

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

  border: 1px solid rgba(255,255,255,0.25);
   /*border-radius: 0 0 14px 14px;

 box-shadow:
    0 10px 30px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.4);*/
}

/* 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 rgba(255, 255, 255, .06);
}

/* link */
.vnt-main .cate-menu > li > a {
  display: block;
  padding: 13px 16px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  transition: .22s ease;
}

/* hover */
.vnt-main .cate-menu > li:hover {
  background: rgba(255, 255, 255, .05);
}
.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: rgba(255, 255, 255, .5);
  transition: .22s ease;
}
.vnt-main .cate-menu > li:hover > a:after {
  color: #fff;
  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: 600px;
  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**/
/* ==================================================
VNTrendy / menu-primary.min.css
TOPBAR ONLY + SHARED MEGA
================================================== */



/* ===== TOPBAR FULL WIDTH ===== */
.vnt-topbar{
   background:
        linear-gradient(
            135deg,
            #081224 0%,
            #0d2142 100%
        );

    /*border-top:
        1px solid rgba(255,255,255,0.04);

    border-bottom:
        1px solid rgba(255,255,255,0.06);*/

    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{
        background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.06),
            rgba(255,255,255,0.03)
        );

    color:#fff;

    border-right:
        1px solid rgba(255,255,255,0.06);

    transition:0.3s ease;

    backdrop-filter:blur(10px);
    position: relative;
    padding-right: 35px;

    height: 54px;
    padding:15px 10px 15px 10px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    border-right: 1px solid rgba(255, 255, 255, .12);
    transition: .25s ease;
    align-items: center;
    display: flex;
    align-items: center;
    gap: 8px;
}
/* hover */
.vnt-topbar .category-toggle:hover{

    background:
        rgba(255,179,0,0.08);

    color:#ffb300;
}


.vnt-main.open .category-toggle::after{
    transform: translateY(-50%) rotate(180deg);
}

.vnt-topbar .category-toggle i{
    color:#ffb300;
}
/* Mũi tên */
.vnt-topbar .category-toggle::after{
  content: "▾";
    font-size: 14px;
    position: absolute;
    right: 12px;
    top: 50%;
     color:#ffb300;
    transition: transform 0.3s cubic-bezier(.4,0,.2,1);
    transform: translateY(-50%);
    font-size: 14px;
    transition: 0.25s ease;
}





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


/* 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 > a{

    color:#ffffff;

    transition:
        color 0.25s ease,
        opacity 0.25s ease;

    position:relative;
}

/* 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;
}



.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;

    color:#fff;

    font-size:15px;

    font-weight:700;

    line-height:1;

    letter-spacing:.3px;

    text-transform:uppercase;

    white-space:nowrap;

    transition:.25s ease;
}


/* underline */
.header-nav .main-menu > li > a:after{

    content:"";

    position:absolute;

    left:0;

    bottom:5px;

    width:0;

    height:2px;

    background:#fff;

    border-radius:20px;

    transition:.25s 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;

    color:rgba(255,255,255,.8);

    font-size:11px;

    cursor:pointer;

    transition:.22s ease;
}


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


.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
========================================= */

.mega-parent{
    position:relative;
}


.mega-menu-box{

display:none;
position:absolute;
top:100%;
left:50%;
transform:translateX(-50%);

/* responsive width */
width:clamp(760px,80vw,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;
    }



}


@media (max-width:991px){

    .header-nav .header-nav{
        display:none;
    }

}