.is-hidden {
  display: none;
}

.tva-header-menu {
	position: relative;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    cursor: pointer;

}

.tva-header-menu-title {
	font-weight: bold;
    width: 100%;
    color: #fff;
    text-transform: uppercase;
    padding-left: 10px;
    position: relative;
    background-color: var(--tva-primary-color);
}

.tva-header-menu-title:before {
	content: ">";
    font-weight: normal;
    height: 100%;
    position: absolute;
    right: 16px;
    transform: scale(1.8, 0.8) rotate(90deg);
    z-index: 10;
    color: #fff;
}

.tva-header-menu-title span {
	font-size: 1.25rem;
    padding-right: 4px;
}

.tva-header-menu-list {
	position: absolute;
    top: var(--tva-header-list-top, 28px);
    left: 0;
    width: calc(100% + 1px);
    padding: 12px;
    border: 1px solid var(--tva-primary-color);
    background-color: var(--tva-primary-v2);
}

.tva-mega-menu-wrapper {
    display: flex;
    width: 100%;
    position: relative;
}

/* LEFT MENU */
.menu-left {
    width: 300px; /* cố định chiều rộng */
    max-height: 600px;
    overflow-y: auto;
    border: 1px solid var(--tva-border-color);
    background-color: var(--tva-primary-v2);
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
    z-index: 10;
}
.menu-left::-webkit-scrollbar {
    display: none;
}

/* RIGHT MENU: đè lên - không chiếm chỗ */
.menu-right {
    max-width: 1000px;
    position: relative;
    z-index: 5; /* thấp hơn children */
}

/* MENU STRUCTURE */
.tva-mega-menu-list {
    display: flex;
    flex-direction: column;
}

.tva-mega-menu-item {
    position: relative;
    border-bottom: 1px solid var(--tva-border-color);
    background-color: #fff;
    cursor: pointer;
}

.tva-mega-menu-item:last-child {
    border-bottom: none;
}

/* PARENT ITEM */
.tva-mega-menu-parent {
    padding: 12px 18px;
    font-weight: bold;
    font-size: 1rem;
    position: relative;
    transition: padding-left ease 0.3s;
}
.tva-mega-menu-parent a {
    display: block;
    width: 100%;
    color: var(--tva-text-color)
}
.tva-mega-menu-parent:hover {
    padding-left: 30px;
    background-color: var(--tva-primary-color);
    color: #fff;
}
.tva-mega-menu-parent a {
	color: var(--tva-text-color);
}
.tva-mega-menu-parent:hover a {
	--tva-text-color: var(--tva-text__light);
    color: var(--tva-text-color);
}

.tva-mega-menu-parent::after {
    content: "\25B6";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.5rem;
}

/* CHILD MENU */
.tva-mega-menu-children {
	--sp: calc(100vw - 30px);
	--site-width: min(1200px, var(--sp));
    --menu-right: calc(var(--site-width) * 0.8);
    --a: calc(var(--sp) - var(--site-width));
    --compare: calc(var(--menu-right) + calc(var(--a) * 0.5));
    display: none;
    background-color: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 100%;
    width: calc(clamp(var(--menu-right), var(--compare), 900px) - 10px);
    max-height: 600px;
    background: url('/wp-content/plugins/tva-wp-manager-v2/assets/images/megamenu-bg.webp') center/cover no-repeat;
    z-index: 9999;
    border: 1px solid var(--tva-primary-color);
    padding: 10px;
    overflow-y: auto;
    box-sizing: border-box;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.tva-mega-menu-children::-webkit-scrollbar {
    display: none;
}

/* Hover để hiện children */
.tva-mega-menu-item:hover .tva-mega-menu-children {
    display: block;
}

/* CHILD CONTENT */
.children__content {
    display: grid;
    grid-template-areas:
        "title avatar"
        "list avatar";
    grid-template-columns: 3fr 2fr;
    grid-template-rows: 83px auto;
    gap: 10px;
}

.children__title {
    grid-area: title;
    margin-top: 10px;
    margin-left: 10px;
    font-size: 1.5rem;
    font-weight: bold;
}

.children__list {
    grid-area: list;
    margin-left: 20px;
}

.children__list-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.children__list-grid li {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 14px 0;
    position: relative;
    font-size: 1rem;
    font-weight: bold;
}

.children__list-grid li a {
    position: relative;
    color: var(--tva-text-color);
}

.children__list-grid li:hover a {
    color: var(--tva-text-color);
}

.children__list-grid li a::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--tva-primary-color);
    transition: width 0.5s ease;
}

.children__list-grid li:hover a::after {
    width: 100%;
}

.children__list-grid li small {
    color: #ccc;
}

.children__list-grid li::before {
    content: "\25B6";
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.5rem;
}

.children__avatar {
    grid-area: avatar;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 10px;
}

.children__avatar img {
    max-width: 100%;
    height: auto;
}

/***
********** Trang Settings (ADMIN) **********
***/

#sortable-categories {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sortable-item {
    padding: 8px 12px;
    margin-bottom: 6px;
    background: #fff;
    border: 1px solid #ccd0d4;
    cursor: move;
    max-width: 300px;
}

.tva-megamenu-views {
	height: 700px;
}