:root {
    --rvdt-menupc-primary: #981b2b;
    --rvdt-menupc-primary-soft: rgba(152, 27, 43, 0.08);
    --rvdt-menupc-primary-border: rgba(152, 27, 43, 0.16);

    --rvdt-menupc-text: #47433f;
    --rvdt-menupc-background: #e9e3d3;
    --rvdt-menupc-border: rgba(91, 82, 67, 0.18);
    --rvdt-menupc-column-border: rgba(255, 255, 255, 0.85);

    --rvdt-menupc-direct-background: rgba(255, 255, 255, 0.28);
    --rvdt-menupc-direct-link-background: rgba(255, 255, 255, 0.38);
    --rvdt-menupc-direct-link-hover: rgba(255, 255, 255, 0.72);
}

/* =========================================================
   MENU CHÍNH
========================================================= */

.rvdt-menupc-main-menu {
    position: relative;
    z-index: 1000;
}

.rvdt-menupc-main-menu > .container {
    position: relative;
}

.rvdt-menupc-main-menu-list {
    position: relative;

    display: flex;
    justify-content: center;
    flex-wrap: nowrap;

    margin: 0;
    padding: 0;

    list-style: none;
}

.rvdt-menupc-main-menu-item {
    position: relative;

    margin: 0;
    padding: 0;
}

.rvdt-menupc-main-menu-link {
    position: relative;

    display: flex;
    align-items: center;
    gap: 8px;

    min-height: 58px;
    padding: 0 14px;

    color: var(--rvdt-menupc-text);
    font-size: 17px;
    text-transform: uppercase;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.rvdt-menupc-main-menu-link:hover,
.rvdt-menupc-main-menu-link:focus,
.rvdt-menupc-main-menu-link.active {
    color: var(--rvdt-menupc-primary);
}

.rvdt-menupc-main-menu-link:focus-visible {
    outline: 2px solid var(--rvdt-menupc-primary);
    outline-offset: -4px;
}

/* =========================================================
   MỤC CÓ MEGA MENU
========================================================= */

.rvdt-menupc-mega-parent {
    position: static;
}

/* Mũi tên xuống */

.rvdt-menupc-mega-toggle::after {
    content: "";

    display: inline-block;
    flex: 0 0 auto;

    width: 7px;
    height: 7px;
    margin-top: -4px;

    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;

    transform: rotate(45deg);

    transition:
        margin-top 0.2s ease,
        transform 0.2s ease;
}

.rvdt-menupc-mega-parent:hover > .rvdt-menupc-mega-toggle::after,
.rvdt-menupc-mega-parent:focus-within > .rvdt-menupc-mega-toggle::after {
    margin-top: 4px;
    transform: rotate(225deg);
}

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

.rvdt-menupc-mega-menu {
    position: absolute;
    top: 100%;
    right: 0;
    width: 130%;
    left: -20%;
    display: block;
    margin: 0;
    padding: 22px 0 28px;
    background: var(--rvdt-menupc-background);
    border-top: 1px solid var(--rvdt-menupc-border);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 15px 30px rgba(57, 48, 35, 0.14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

/*
 * Không cần JavaScript:
 * - :hover mở bằng chuột.
 * - :focus-within mở khi dùng bàn phím Tab.
 */

.rvdt-menupc-mega-parent:hover > .rvdt-menupc-mega-menu,
.rvdt-menupc-mega-parent:focus-within > .rvdt-menupc-mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
}

.rvdt-menupc-mega-row {
    align-items: stretch;
    margin: 0;
}

/* =========================================================
   CỘT CẤP 2
========================================================= */

.rvdt-menupc-mega-column {
    min-height: 355px;
    padding: 0 28px;
}

.rvdt-menupc-mega-column:not(:last-child) {
    border-right: 1px solid var(--rvdt-menupc-column-border);
}

.rvdt-menupc-mega-heading {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 0 0 15px;
    padding: 0;

    color: var(--rvdt-menupc-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: uppercase;
}

.rvdt-menupc-mega-heading.active {
    color: var(--rvdt-menupc-primary);
}

.rvdt-menupc-mega-heading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;

    width: 22px;
    height: 22px;

    color: var(--rvdt-menupc-primary);
}

.rvdt-menupc-mega-heading-icon svg {
    display: block;

    width: 100%;
    height: 100%;

    fill: currentColor;
}

/* =========================================================
   CỘT GOM CÁC MENU CẤP 2 KHÔNG CÓ CẤP 3
========================================================= */

.rvdt-menupc-mega-direct-column {
    display: flex;
    align-items: stretch;

    padding-top: 0;
    padding-bottom: 0;

    /*background: linear-gradient( 145deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.12) ), var(--rvdt-menupc-direct-background);*/

    border-radius: 4px 0 0 4px;
}

/*
 * Danh sách chứa toàn bộ menu cấp 2 không có cấp 3.
 */

.rvdt-menupc-mega-direct-list {
    display: flex;
    flex-direction: column;

    width: 100%;
    margin: 0;
    padding: 4px 0;

    list-style: none;
}

/*
 * Ghi đè khoảng cách mặc định của danh sách cấp 3.
 */

.rvdt-menupc-mega-direct-list-item {
    margin: 0;
    padding: 0;
}

.rvdt-menupc-mega-direct-list-item
+ .rvdt-menupc-mega-direct-list-item {
    margin-top: 8px;
}

/*
 * Link menu cấp 2 trực tiếp.
 */

.rvdt-menupc-mega-direct-link {
    position: relative;

    display: flex;
    align-items: center;

    /*min-height: 52px;*/
    padding: 12px 18px 12px 44px;

    color: var(--rvdt-menupc-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;

    background: var(--rvdt-menupc-direct-link-background);
    border: 1px solid rgba(255, 255, 255, 0.68);
    border-radius: 4px;

    box-shadow: 0 3px 10px rgba(57, 48, 35, 0.035);

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

/*
 * Mũi tên bên trái link trực tiếp.
 * Ghi đè dấu gạch của .rvdt-menupc-mega-link::before.
 */

.rvdt-menupc-mega-direct-link::before {
    content: "";

    position: absolute;
    top: 50%;
    left: 20px;

    width: 7px;
    height: 7px;

    background: transparent;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;

    transform: translateY(-50%) rotate(45deg);

    transition:
        left 0.2s ease,
        width 0.2s ease,
        height 0.2s ease;
}

.rvdt-menupc-mega-direct-link:hover,
.rvdt-menupc-mega-direct-link:focus,
.rvdt-menupc-mega-direct-link.active {
    padding-left: 44px;

    color: var(--rvdt-menupc-primary);
    background: var(--rvdt-menupc-direct-link-hover);
    border-color: var(--rvdt-menupc-primary-border);

    box-shadow: 0 5px 14px rgba(57, 48, 35, 0.08);

    transform: translateX(3px);
}

.rvdt-menupc-mega-direct-link:hover::before,
.rvdt-menupc-mega-direct-link:focus::before,
.rvdt-menupc-mega-direct-link.active::before {
    left: 12px;
    width: 7px;
    height: 7px;
}

/*
 * Item hiện tại.
 */

.rvdt-menupc-mega-direct-list-item.active
> .rvdt-menupc-mega-direct-link {
    color: var(--rvdt-menupc-primary);
    background: var(--rvdt-menupc-direct-link-hover);
    border-color: var(--rvdt-menupc-primary-border);
}

/* =========================================================
   DANH SÁCH CẤP 3
========================================================= */

.rvdt-menupc-mega-list {
    margin: 0;
    padding: 0;

    list-style: none;
}

.rvdt-menupc-mega-list-item {
    margin: 0;
    padding: 0;
}

.rvdt-menupc-mega-list-item + .rvdt-menupc-mega-list-item {
    margin-top: 4px;
}

/*
 * Không áp dụng khoảng cách 4px cho danh sách trực tiếp,
 * vì đã được đặt thành 8px bên trên.
 */

.rvdt-menupc-mega-direct-list
.rvdt-menupc-mega-list-item
+ .rvdt-menupc-mega-list-item {
    margin-top: 8px;
}

.rvdt-menupc-mega-link {
    position: relative;
    display: block;
    padding: 9px;
    color: #534f4a;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    text-decoration: none;

    transition:
        color 0.2s ease,
        padding-left 0.2s ease;
}

.rvdt-menupc-mega-link::before {
    content: "";

    position: absolute;
    top: 50%;
    left: 0;

    width: 0;
    height: 1px;

    background: var(--rvdt-menupc-primary);

    transform: translateY(-50%);

    transition: width 0.2s ease;
}

.rvdt-menupc-mega-link:hover,
.rvdt-menupc-mega-link:focus,
.rvdt-menupc-mega-link.active {
    padding-left: 17px;
    color: var(--rvdt-menupc-primary);
}

.rvdt-menupc-mega-link:hover::before,
.rvdt-menupc-mega-link:focus::before,
.rvdt-menupc-mega-link.active::before {
    width: 10px;
}

.rvdt-menupc-mega-link:focus-visible {
    outline: 1px dashed var(--rvdt-menupc-primary);
    outline-offset: 2px;
}

/*
 * Phải đặt sau style chung của .rvdt-menupc-mega-link
 * để link trực tiếp không bị đổi thành padding-left: 17px.
 */

.rvdt-menupc-mega-direct-link:hover,
.rvdt-menupc-mega-direct-link:focus,
.rvdt-menupc-mega-direct-link.active {
    padding-left: 26px;
}

.rvdt-menupc-mega-direct-link:hover::before,
.rvdt-menupc-mega-direct-link:focus::before,
.rvdt-menupc-mega-direct-link.active::before {
    width: 7px;
}

/* =========================================================
   RESPONSIVE
   Chỉ hiển thị menu trên desktop từ 992px
========================================================= */

@media (max-width: 991.98px) {
    .rvdt-menupc-main-menu {
        display: none !important;
    }
}

/*
 * Desktop nhỏ:
 * giảm padding để tránh cột quá hẹp.
 */

@media (min-width: 992px) and (max-width: 1199.98px) {
    .rvdt-menupc-main-menu-link {
        padding-right: 10px;
        padding-left: 10px;

        font-size: 15px;
    }

    .rvdt-menupc-mega-column {
        padding-right: 20px;
        padding-left: 20px;
    }

    .rvdt-menupc-mega-direct-column {
        padding-right: 18px;
        padding-left: 18px;
    }

    .rvdt-menupc-mega-direct-link {
        padding-right: 14px;
        padding-left: 40px;
    }

    .rvdt-menupc-mega-direct-link:hover,
    .rvdt-menupc-mega-direct-link:focus,
    .rvdt-menupc-mega-direct-link.active {
        padding-left: 40px;
    }

    .rvdt-menupc-mega-direct-link::before {
        left: 17px;
    }

    .rvdt-menupc-mega-direct-link:hover::before,
    .rvdt-menupc-mega-direct-link:focus::before,
    .rvdt-menupc-mega-direct-link.active::before {
        left: 20px;
    }
}

@media (min-width: 1200px) {
    .rvdt-menupc-main-menu-link {
        padding-right: 16px;
        padding-left: 16px;
    }

    .rvdt-menupc-mega-column {
        padding-right: 32px;
        padding-left: 32px;
    }

    /*
     * Cột trực tiếp cần padding nhỏ hơn do mỗi link
     * đã có khoảng đệm riêng.
     */

    .rvdt-menupc-mega-direct-column {
        padding-right: 24px;
        padding-left: 24px;
    }
}