/* Navigation overview - Điện nhẹ nhà xưởng */
.menkar-light-overview-nav {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    overflow: hidden;
    margin-top: -52px;
    border: 1px solid #e8eaf0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(34, 58, 117, 0.12);
}

.menkar-light-overview-nav > br {
    display: none !important;
}

.menkar-light-overview-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 92px;
    padding: 12px 8px 10px;
    color: #223a75;
    text-align: center;
    text-decoration: none !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.menkar-light-overview-item:hover {
    color: #f8b020;
    background: rgba(248, 176, 32, 0.05);
}

.menkar-light-overview-item.is-active {
    color: #f8b020;
    background: linear-gradient(180deg, rgba(248, 176, 32, 0.05), rgba(248, 176, 32, 0.015));
}

.menkar-light-overview-item.is-active::after {
    content: "";
    position: absolute;
    right: 12px;
    bottom: 0;
    left: 12px;
    height: 2px;
    background: #f8b020;
}

.menkar-light-overview-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-bottom: 7px;
    color: currentColor;
}

.menkar-light-overview-icon svg {
    display: block;
    width: 28px;
    height: 28px;
}

.menkar-light-overview-text {
    color: currentColor;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    text-transform: uppercase;
    white-space: nowrap;
}

@media (max-width: 849px) {
    .menkar-light-overview-nav {
        grid-template-columns: repeat(7, 145px);
        overflow-x: auto;
        margin-top: 0;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
    }

    .menkar-light-overview-item {
        scroll-snap-align: start;
    }
}

/* Light installation benefits */
.menkar-light-benefits {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    margin-top: 25px;
}

.menkar-light-benefit-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 180px;
    padding: 24px 14px 19px;
    border: 1px solid #e5e8ee;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(34, 58, 117, 0.06);
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.menkar-light-benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 9px 24px rgba(34, 58, 117, 0.13);
}

.menkar-light-benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    color: #223a75;
}

.menkar-light-benefit-icon svg {
    display: block;
    width: 42px;
    height: 42px;
}

.menkar-light-benefit-title {
    width: 100%;
    min-height: 38px;
    margin: 0 0 8px;
    color: #223a75;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
    text-align: center !important;
    text-transform: uppercase;
}

.menkar-light-benefit-description {
    width: 100%;
    margin: 0;
    color: #000;
    font-size: 12.5px;
    line-height: 1.5;
    text-align: center !important;
}

@media (max-width: 849px) {
    .menkar-light-benefits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .menkar-light-benefits {
        grid-template-columns: 1fr;
    }
}

/* Light solutions for each need */
.menkar-light-solution-card .box-image img {
    width: 100%;
    height: 170px;
    object-fit: cover;
}

.menkar-light-solution-card .box-text {
    position: relative;
    padding-top: 34px !important;
}

.menkar-light-solution-icon {
    position: absolute;
    z-index: 3;
    top: -28px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    color: #fff;
    border: 4px solid #fff;
    border-radius: 50%;
    background: #223a75;
    box-shadow: 0 3px 9px rgba(34, 58, 117, 0.22);
}

.menkar-light-solution-icon svg {
    display: block;
    width: 25px;
    height: 25px;
}

@media (max-width: 549px) {
    .menkar-light-solution-card .box-image img {
        height: 220px;
    }
}

/* Light service overview content */
.menkar-light-summary {
    color: #111;
    font-size: 14.5px;
    line-height: 1.75;
}

.menkar-light-summary__intro {
    margin: 0 0 18px;
    color: #111;
    text-align: left;
}

.menkar-light-summary__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menkar-light-summary__list li {
    position: relative;
    margin: 0 0 8px;
    padding-left: 27px;
    color: #111;
    line-height: 1.55;
    text-align: left;
}

.menkar-light-summary__list li::before {
    content: "\2713";
    position: absolute;
    top: 0;
    left: 0;
    color: #f8b020;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.3;
}

/* Professional Light installation process */
.menkar-light-process {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    width: 100%;
    padding: 22px 14px 28px;
    color: #fff;
}

.menkar-light-process > br {
    display: none !important;
}

.menkar-light-process-step {
    position: relative;
    min-width: 0;
    padding: 0 14px;
    text-align: center;
}

.menkar-light-process-step:not(:last-of-type)::after {
    content: "\2192";
    position: absolute;
    z-index: 4;
    top: 12px;
    right: -9px;
    color: #f8b020;
    font-size: 25px;
    font-weight: 700;
    line-height: 1;
}

.menkar-light-process-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    color: #223a75;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.menkar-light-process-icon svg {
    display: block;
    width: 29px;
    height: 29px;
}

.menkar-light-process-number {
    margin: 9px 0 7px;
    color: #f8b020;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
}

.menkar-light-process-content {
    min-height: 100px;
    padding: 0 8px;
}

.menkar-light-process-step + .menkar-light-process-step .menkar-light-process-content {
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.menkar-light-process-title {
    width: 100%;
    min-height: 38px;
    margin: 0 0 7px;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
    text-align: center !important;
    text-transform: uppercase;
}

.menkar-light-process-description {
    width: 100%;
    margin: 0;
    color: #fff;
    font-size: 12.5px;
    line-height: 1.5;
    text-align: center !important;
}

@media (max-width: 849px) {
    .menkar-light-process {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 34px 0;
    }

    .menkar-light-process-step::after {
        display: none;
    }

    .menkar-light-process-step:nth-of-type(odd) .menkar-light-process-content {
        border-left: 0;
    }
}

@media (max-width: 420px) {
    .menkar-light-process {
        grid-template-columns: 1fr;
    }

    .menkar-light-process-content {
        border-left: 0 !important;
    }
}

/* Fallback icons rendered by CSS because WordPress strips inline SVG in HTML */
.menkar-light-solution-icon::before,
.menkar-light-benefit-icon::before,
.menkar-light-process-icon::before {
    content: "";
    display: block;
    background: currentColor;
    -webkit-mask: var(--menkar-light-css-icon) center / contain no-repeat;
    mask: var(--menkar-light-css-icon) center / contain no-repeat;
}

.menkar-light-solution-icon::before {
    width: 25px;
    height: 25px;
    --menkar-light-css-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22h8v6H4zM20 4h8v6h-8zM20 22h8v6h-8zM12 25h8M16 25V7h4'/%3E%3C/svg%3E");
}

.menkar-light-benefit-icon::before {
    width: 42px;
    height: 42px;
    --menkar-light-css-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 3l13 6v10c0 8-5 15-13 18C12 34 7 27 7 19V9l13-6z'/%3E%3Cpath d='M14 20l4 4 8-10'/%3E%3C/svg%3E");
}

.menkar-light-process-icon::before {
    width: 29px;
    height: 29px;
    --menkar-light-css-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3h18l5 5v25H8zM26 3v7h5M13 14h12M13 19h9M13 24h7'/%3E%3Cpath d='M22 29l3 3 7-8'/%3E%3C/svg%3E");
}

.menkar-light-benefit-card:nth-of-type(1) .menkar-light-benefit-icon::before {
    --menkar-light-css-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 30V14l9 5v-7l8 6v-6l11 7v11zM10 25h4M18 25h4M26 25h4'/%3E%3C/svg%3E");
}

.menkar-light-benefit-card:nth-of-type(3) .menkar-light-benefit-icon::before {
    --menkar-light-css-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 8h24v24H8zM14 14h12M14 20h12M14 26h6M4 14h4M4 26h4M32 14h4M32 26h4'/%3E%3C/svg%3E");
}

.menkar-light-benefit-card:nth-of-type(4) .menkar-light-benefit-icon::before {
    --menkar-light-css-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 31h24M10 27l7-15 6 9 4-6 5 12'/%3E%3Ccircle cx='14' cy='10' r='4'/%3E%3C/svg%3E");
}

.menkar-light-benefit-card:nth-of-type(6) .menkar-light-benefit-icon::before {
    --menkar-light-css-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22v-4C6 10 12 5 20 5s14 5 14 13v4M6 22h6v10H9a3 3 0 01-3-3zM34 22h-6v10h3a3 3 0 003-3zM28 32c-2 2-5 3-9 3M16 35h3'/%3E%3C/svg%3E");
}

/* Per-item icons */
.menkar-light-icon-network::before {
    --menkar-light-css-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3Ccircle cx='24' cy='8' r='3'/%3E%3Ccircle cx='16' cy='24' r='3'/%3E%3Cpath d='M11 9h10M9.5 11l4.8 10M22.5 11l-4.8 10'/%3E%3C/svg%3E");
}

.menkar-light-icon-camera::before {
    --menkar-light-css-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M20 13l8-4v13l-8-4M10 25h6M13 21v4'/%3E%3C/svg%3E");
}

.menkar-light-icon-phone::before {
    --menkar-light-css-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4h12v24H10zM14 8h4M14 24h4'/%3E%3Cpath d='M24 10c3 2 4 4 4 6s-1 4-4 6M8 10c-3 2-4 4-4 6s1 4 4 6'/%3E%3C/svg%3E");
}

.menkar-light-icon-access::before {
    --menkar-light-css-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3l11 5v9c0 7-5 12-11 15C10 29 5 24 5 17V8l11-5z'/%3E%3Cpath d='M12 16l3 3 6-7'/%3E%3C/svg%3E");
}

.menkar-light-icon-cable::before {
    --menkar-light-css-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 27V12l8 4v-5l7 5v-5l5 3v13zM9 21h3M15 21h3M21 21h3'/%3E%3Cpath d='M8 7h16M12 4v6M20 4v6'/%3E%3C/svg%3E");
}

.menkar-light-icon-audio::before {
    --menkar-light-css-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18h5l7 6V8l-7 6H6zM22 12c2 2 2 6 0 8M25 9c4 4 4 10 0 14'/%3E%3C/svg%3E");
}

.menkar-light-icon-factory::before {
    --menkar-light-css-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 31V15l9 5v-7l8 6v-6l11 7v11zM10 26h4M18 26h4M26 26h4'/%3E%3C/svg%3E");
}

.menkar-light-icon-safe::before {
    --menkar-light-css-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 3l13 6v10c0 8-5 15-13 18C12 34 7 27 7 19V9l13-6zM14 20l4 4 8-10'/%3E%3C/svg%3E");
}

.menkar-light-icon-expand::before {
    --menkar-light-css-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='22' height='22' rx='2'/%3E%3Cpath d='M14 14h6M14 20h12M14 26h6M4 14h5M4 26h5M31 14h5M31 26h5'/%3E%3C/svg%3E");
}

.menkar-light-icon-cost::before {
    --menkar-light-css-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='20' cy='20' r='14'/%3E%3Cpath d='M24 14h-6a4 4 0 000 8h4a4 4 0 010 8h-7M20 10v4M20 30v4'/%3E%3C/svg%3E");
}

.menkar-light-icon-checklist::before {
    --menkar-light-css-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 5h20v30H10zM15 13h10M15 20h10M15 27h6'/%3E%3Cpath d='M25 31l3 3 6-8'/%3E%3C/svg%3E");
}

.menkar-light-icon-support::before {
    --menkar-light-css-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22v-4C6 10 12 5 20 5s14 5 14 13v4M6 22h6v10H9a3 3 0 01-3-3zM34 22h-6v10h3a3 3 0 003-3zM28 32c-2 2-5 3-9 3M16 35h3'/%3E%3C/svg%3E");
}

.menkar-light-icon-request::before {
    --menkar-light-css-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 3l12 5v9c0 7-5 13-12 16C11 30 6 24 6 17V8l12-5zM12 18l4 4 8-10'/%3E%3C/svg%3E");
}

.menkar-light-icon-survey::before {
    --menkar-light-css-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 28V11l9 5v-6l8 6v-6l5 4v14zM11 23h4M19 23h4M9 9h20'/%3E%3C/svg%3E");
}

.menkar-light-icon-design::before {
    --menkar-light-css-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3h18l5 5v25H8zM26 3v7h5M13 14h12M13 19h9M13 24h7'/%3E%3Cpath d='M22 29l3 3 7-8'/%3E%3C/svg%3E");
}

.menkar-light-icon-install::before {
    --menkar-light-css-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 27h24M10 27V12h16v15M14 16h8M14 21h8M18 5v7M14 8h8'/%3E%3C/svg%3E");
}

.menkar-light-icon-handover::before {
    --menkar-light-css-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='14' r='9'/%3E%3Cpath d='M12 14l4 4 8-9M12 25l-2 8 8-4 8 4-2-8'/%3E%3C/svg%3E");
}

/* Stable text icons: kept visible even when WordPress strips inline SVG */
.menkar-light-solution-icon,
.menkar-light-benefit-icon,
.menkar-light-process-icon {
    font-size: 0;
}

.menkar-light-solution-icon::before,
.menkar-light-benefit-icon::before,
.menkar-light-process-icon::before {
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    -webkit-mask: none !important;
    mask: none !important;
    color: currentColor;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
    line-height: 1;
}

.menkar-light-solution-icon::before {
    font-size: 22px;
}

.menkar-light-benefit-icon::before {
    font-size: 34px;
}

.menkar-light-process-icon::before {
    font-size: 25px;
}

.menkar-light-icon-network::before { content: "⌘"; }
.menkar-light-icon-camera::before { content: "▣"; }
.menkar-light-icon-phone::before { content: "☎"; }
.menkar-light-icon-access::before { content: "✓"; }
.menkar-light-icon-cable::before { content: "⚡"; }
.menkar-light-icon-audio::before { content: "◉"; }
.menkar-light-icon-factory::before { content: "▥"; }
.menkar-light-icon-safe::before { content: "◇"; }
.menkar-light-icon-expand::before { content: "↗"; }
.menkar-light-icon-cost::before { content: "$"; }
.menkar-light-icon-checklist::before { content: "☑"; }
.menkar-light-icon-support::before { content: "☏"; }
.menkar-light-icon-request::before { content: "◇"; }
.menkar-light-icon-survey::before { content: "⌖"; }
.menkar-light-icon-design::before { content: "▤"; }
.menkar-light-icon-install::before { content: "⚙"; }
.menkar-light-icon-handover::before { content: "★"; }

/* Hero light-current feature icons */
.menkar-light-hero-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    max-width: 650px;
    margin-top: 28px;
}

.menkar-light-hero-features > br {
    display: none !important;
}

.menkar-light-hero-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    color: #fff;
    text-align: center;
}

.menkar-light-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 8px;
    color: #fff;
    font-size: 0 !important;
    font-weight: 800;
    line-height: 1;
}

.menkar-light-hero-icon::before {
    content: attr(data-icon);
    display: inline-block;
    color: currentColor;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px !important;
    font-weight: 800;
    line-height: 1;
}

.menkar-light-hero-label {
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.35;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

@media (max-width: 849px) {
    .menkar-light-hero-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 100%;
        gap: 18px;
    }
}

/* Stable overview nav icons */
.menkar-light-overview-icon {
    font-size: 0 !important;
}

.menkar-light-overview-icon::before {
    content: attr(data-icon);
    display: inline-block;
    color: currentColor;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 27px !important;
    font-weight: 800;
    line-height: 1;
}






/* White cable infrastructure icon */

.menkar-light-icon-cable::before {

    content: "" !important;

    display: block !important;

    width: 23px !important;

    height: 23px !important;

    background: #fff !important;

    color: #fff !important;

    font-size: 0 !important;

    font-family: inherit !important;

    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 27V12l8 4v-5l7 5v-5l5 3v13zM9 21h3M15 21h3M21 21h3'/%3E%3Cpath d='M8 7h16M12 4v6M20 4v6'/%3E%3C/svg%3E") center / contain no-repeat !important;

    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 27V12l8 4v-5l7 5v-5l5 3v13zM9 21h3M15 21h3M21 21h3'/%3E%3Cpath d='M8 7h16M12 4v6M20 4v6'/%3E%3C/svg%3E") center / contain no-repeat !important;

}