/* =========================
   MEGA MENU COLUMN ALIGNMENT
   ========================= */

.mega-menu-links .ux-menu-title,
.mega-menu-links .ux-menu-title__text,
.mega-menu-links .menu-title {
    margin: 0 0 16px !important;
    padding: 0 !important;

    color: var(--vw-color-action-primary) !important;

    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 700 !important;

    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
}


/* Reset toàn bộ spacing của menu wrapper */
.mega-menu-links,
.mega-menu-links ul,
.mega-menu-links li,
.mega-menu-links .ux-menu-link {
    margin: 0 !important;
    padding: 0 !important;
}


/* Link */
.mega-menu-links a,
.mega-menu-links .ux-menu-link__link {
    width: 100%;

    height: 44px;
    min-height: 44px;

    display: flex !important;
    align-items: center !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;

    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 400 !important;

    color: var(--vw-color-text-primary) !important;
    text-decoration: none !important;
}


/* Text */
.mega-menu-links a span,
.mega-menu-links .ux-menu-link__text {
    margin: 0 !important;
    padding: 0 !important;

    order: 1;
}


/* Icon */
.mega-menu-links a i,
.mega-menu-links .ux-menu-link__icon {
    order: 2;

    margin-left: auto !important;
    margin-right: 0 !important;

    padding: 0 !important;

    flex: 0 0 auto;

    font-size: 16px;
    color: var(--vw-color-text-primary);
}


/* Hover */
.mega-menu-links a:hover,
.mega-menu-links .ux-menu-link__link:hover {
    color: var(--vw-color-action-primary) !important;
}

.mega-menu-links a:hover i,
.mega-menu-links a:hover .ux-menu-link__icon {
    color: var(--vw-color-action-primary) !important;
}

/* =========================================================
   MEGA MENU PROMO - FLATSOME
   Class đặt trên Banner: mega-promo
   ========================================================= */

.mega-promo {
    height: 200px;
    overflow: hidden;
    border-radius: var(--vw-component-card-radius);
    cursor: pointer;

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


/* =========================================================
   BACKGROUND IMAGE
   ========================================================= */

.mega-promo .bg {
    background-size: cover !important;
    background-position: center !important;

    transition: transform 0.35s ease;
}


/* =========================================================
   GRADIENT

   ĐẶT TRÊN .bg thay vì trên .mega-promo
   => luôn nằm dưới Text Box của Flatsome
   ========================================================= */

.mega-promo .bg::after {
    content: "";

    position: absolute;
    inset: 0;

background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--vw-color-neutral-white) 82%, transparent) 0%,
    color-mix(in srgb, var(--vw-color-neutral-white) 70%, transparent) 30%,
    color-mix(in srgb, var(--vw-color-neutral-white) 42%, transparent) 55%,
    color-mix(in srgb, var(--vw-color-neutral-white) 10%, transparent) 78%,
    transparent 100%
);

    pointer-events: none;
}


/* =========================================================
   TEXT BOX POSITION

   Design của bạn là TOP LEFT.
   Override position Flatsome đang để center.
   ========================================================= */

.mega-promo .text-box {
    left: 0 !important;
    top: 0 !important;

    transform: none !important;

    width: 72% !important;
    max-width: 72% !important;

    text-align: left !important;
}


/* Không dùng background mặc định của Text Box */
.mega-promo .text-box-content {
    background: transparent !important;
}


/* =========================================================
   CONTENT PADDING
   ========================================================= */

.mega-promo .text-inner {
    padding: 18px 16px !important;

    text-align: left !important;
    text-shadow: none !important;

    color: var(--vw-color-text-primary) !important;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.mega-promo .promo-eyebrow {
    margin: 0 0 12px;
    padding: 0;

    color: var(--vw-color-action-primary);

    font-size: 12px;
    line-height: 16px;
    font-weight: 700;

    letter-spacing: 1.2px;
    text-transform: uppercase;
}


/* =========================================================
   TITLE
   ========================================================= */

.mega-promo .promo-title {
    margin: 0 0 12px;
    padding: 0;

    color: var(--vw-color-text-primary);

    font-size: 14px;
    line-height: 22px;
    font-weight: 500;

    letter-spacing: 0;
}


/* =========================================================
   META ROW
   ========================================================= */

.mega-promo .promo-meta {
    display: flex;
    align-items: center;

    flex-wrap: nowrap;

    gap: 14px;

    margin: 0 0 12px;
    padding: 0;

    color: var(--vw-color-text-primary);
}


.mega-promo .promo-meta-item {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    margin: 0;
    padding: 0;

    color: var(--vw-color-text-primary);

    font-size: 12px;
    line-height: 18px;
    font-weight: 400;

    white-space: nowrap;
}


/* Lucide icon */
.mega-promo .promo-meta-item svg {
    width: 14px;
    height: 14px;

    flex: 0 0 14px;

    stroke: currentColor;
    stroke-width: 1.8;

    color: var(--vw-color-text-primary);
}


/* =========================================================
   CTA LINK
   ========================================================= */

.mega-promo .promo-link {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    margin: 0;
    padding: 0;

    color: var(--vw-color-action-primary);

    font-size: 12px;
    line-height: 18px;
    font-weight: 500;

    text-decoration: none;

    transition:
        color 0.15s ease,
        gap 0.15s ease;
}


.mega-promo .promo-link svg {
    width: 14px;
    height: 14px;

    flex: 0 0 14px;

    stroke: currentColor;
}


.mega-promo .promo-link:hover {
    color: var(--vw-color-action-primary-hover);
    gap: 8px;
}


/* =========================================================
   DESCRIPTION - dùng cho card Destination / CTA
   ========================================================= */

.mega-promo .promo-description {
    margin: 0 0 12px;
    padding: 0;

    color: var(--vw-color-text-secondary);

    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
}


/* =========================================================
   CTA BUTTON - card thứ 3
   ========================================================= */

.mega-promo .promo-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;

    padding: 0 20px;

    border: 0;
    border-radius: var(--vw-component-button-radius);

    background: var(--vw-color-action-primary);
    color: var(--vw-color-neutral-white);

    font-size: 12px;
    line-height: 18px;
    font-weight: 600;

    text-decoration: none;
}


.mega-promo .promo-button:hover {
    background: var(--vw-color-action-primary-hover);
    color: var(--vw-color-neutral-white);
}


/* =========================================================
   RESET FLATSOME TEXT STYLES
   Chỉ reset các element bên trong content của chúng ta
   ========================================================= */

.mega-promo .promo-eyebrow *,
.mega-promo .promo-title *,
.mega-promo .promo-description *,
.mega-promo .promo-meta *,
.mega-promo .promo-link * {
    text-shadow: none !important;
}


/* =========================================================
   HOVER
   ========================================================= */

.mega-promo:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 24px color-mix(in srgb, var(--vw-color-text-primary) 10%, transparent);
}


.mega-promo:hover .bg {
    transform: scale(1.02);
}

.mega-menu-links .mega-menu-link-all,
.mega-menu-links .mega-menu-link-all .ux-menu-link__link,
.mega-menu-links .mega-menu-link-all a {
    color: var(--vw-color-action-primary) !important;
}

.mega-menu-links .mega-menu-link-all i,
.mega-menu-links .mega-menu-link-all .ux-menu-link__icon {
    color: var(--vw-color-action-primary) !important;
}