/* ===============================
   MÊ TRUYỆN AUDIO HOME V2
================================ */

.mta-home{
    width:100%;
    overflow-x:hidden;
    position:relative;
    isolation:isolate;
    background:var(--bg-main);
    color:var(--text-white);
    padding-bottom:150px;

}
.mta-home::before{
    content:"";
    position:absolute;
    inset:0;

    z-index:0;

    pointer-events:none;

    background:

        radial-gradient(
            circle at 12% 18%,
            rgba(139,92,246,.12),
            transparent 28%
        ),

        radial-gradient(
            circle at 88% 12%,
            rgba(245,158,11,.08),
            transparent 24%
        ),

        radial-gradient(
            circle at 50% 72%,
            rgba(139,92,246,.06),
            transparent 34%
        );
}

.mta-shell{
    width:min(100% - 32px, 1280px);
    margin-inline:auto;
    position:relative;
    z-index:2;
}

/* ===============================
   HERO
================================ */

.mta-hero{
    position:relative;
    min-height:620px;
    overflow:hidden;
    display:flex;
    align-items:flex-end;
    background:var(--bg-main);
    isolation:isolate;
}

.mta-hero-bg{
    position:absolute;
    inset:0;
}

.mta-hero-bg img{
    width:100%;
    height:100%;

    object-fit:cover;

    transform:scale(1.04);

    filter:
        saturate(1.08)
        contrast(1.04)
        brightness(.82);

    transition:
        transform 2.4s ease,
        filter .8s ease;
}
.mta-hero-bg::after{
    content:"";
    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at center,
            transparent 42%,
            rgba(0,0,0,.38) 100%
        );

    pointer-events:none;
}

.mta-hero::after{
    content:"";
    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at 18% 42%,
            rgba(139,92,246,.34),
            transparent 34%
        ),

        radial-gradient(
            circle at 82% 18%,
            rgba(245,158,11,.16),
            transparent 28%
        ),

linear-gradient(
    to top,
    var(--bg-main) 0%,
    rgba(11,17,32,.96) 28%,
    rgba(11,17,32,.68) 58%,
    rgba(11,17,32,.2) 100%
);

    pointer-events:none;
}

.mta-hero .mta-shell{
    position:relative;
    z-index:2;
}

.mta-hero-content{
    max-width:680px;

    padding:28px 28px 76px;

    border-radius:28px;

    background:
        linear-gradient(
            180deg,
            rgba(11,17,32,.34),
            rgba(11,17,32,.18)
        );

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(10px);

    box-shadow:
        0 24px 48px rgba(0,0,0,.22);
    position:relative;
    overflow:hidden;
}
.mta-hero-content::before{
    content:"";
    position:absolute;
    inset:-1px;

    background:
        radial-gradient(
            circle at 16% 12%,
            rgba(139,92,246,.24),
            transparent 34%
        );

    pointer-events:none;
}
.mta-hero-content > *{
    position:relative;
    z-index:2;
}
.mta-kicker,
.mta-section-kicker{
    color:var(--accent);
    font-size:11px;
    font-weight:900;
    letter-spacing:1px;
    text-transform:uppercase;
}

.mta-hero h1{
    margin:12px 0 12px;
    font-size:64px;
    line-height:1.02;
    letter-spacing:-1.4px;
    font-weight:900;
    text-shadow:
        0 4px 18px rgba(0,0,0,.34);
}

.mta-meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:18px;
}

.mta-meta span{
    padding:7px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.09);
    border:1px solid rgba(255,255,255,.1);
    color:rgba(255,255,255,.86);
    font-size:12px;
    font-weight:800;
}

.mta-hero p{
    max-width:560px;
    margin:0 0 24px;
    color:rgba(255,255,255,.72);
    font-size:17px;
    line-height:1.7;
}

.mta-hero-actions{
    display:flex;
    gap:12px;
}

.mta-btn{
    min-height:46px;
    padding:0 20px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    font-weight:900;
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        background .22s ease;
}
.mta-btn:hover{
    transform:translateY(-2px);
}

.mta-btn-primary:hover{
    box-shadow:0 16px 30px rgba(139,92,246,.32);
}

.mta-btn:active{
    transform:scale(.97);
}

.mta-btn-primary{
    background:linear-gradient(135deg,var(--primary),var(--primary-hover));
    color:#fff;
    box-shadow:
        0 10px 26px rgba(139,92,246,.24);
}

.mta-btn-ghost{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
}

/* PILLS */
.mta-shell::before{
    content:"";
    position:absolute;

    top:-90px;
    left:0;
    right:0;

    height:90px;

    pointer-events:none;

    background:
        linear-gradient(
            to bottom,
            rgba(11,17,32,0),
            var(--bg-main)
        );
}
.mta-pills{
    display:flex;
    gap:10px;
    overflow-x:auto;
    padding:26px 0 6px;
    scrollbar-width:none;
}

.mta-pills::-webkit-scrollbar{
    display:none;
}

.mta-pills a{
    flex:0 0 auto;
    min-height:42px;
    padding:0 16px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    color:var(--text-main);
    font-size:13px;
    font-weight:800;
    transition:
        background .25s ease,
        transform .25s ease,
        color .25s ease;
}
.mta-pills a:hover{
    background:rgba(255,255,255,.1);
    color:#fff;
    transform:translateY(-2px);
}

.mta-pills a:active{
    transform:scale(.96);
}

/* ===============================
   CONTINUE LISTENING
================================ */

.mta-continue-wrap #za-continue-section{
    margin:28px 0 12px;
    padding:22px 18px;
    position:relative;
    overflow:hidden;
    border-radius:28px;
    background:linear-gradient(180deg,rgba(19,28,49,.96),rgba(11,17,32,.98));
    border:1px solid rgba(255,255,255,.06);
    box-shadow:0 24px 48px rgba(0,0,0,.24);
}
.mta-continue-wrap #za-continue-section::before{
    content:"";
    position:absolute;
    inset:0;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(139,92,246,.16),
            transparent 34%
        );
}
.mta-continue-wrap #za-continue-section > *{
    position:relative;
    z-index:2;
}
.mta-continue-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;

    margin-bottom:16px;
}

.mta-continue-head .za-continue-title{
    margin:0;
}

.mta-continue-nav{
    display:flex;
    gap:8px;
}

.mta-continue-nav button{
    width:38px;
    height:38px;

    border:0;
    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(255,255,255,.08);
    color:#fff;

    font-size:26px;
    line-height:1;

    cursor:pointer;

    transition:
        background .25s ease,
        transform .25s ease;
}

.mta-continue-nav button:hover{
    background:rgba(255,255,255,.14);
    transform:translateY(-2px);
}

/* ===============================
   PREMIUM CONTINUE LISTENING
================================ */

.mta-continue-wrap #za-continue-container{
    display:flex;
    gap:18px;

    overflow-x:auto;

    padding-bottom:10px;
    position:relative;
    scroll-snap-type:x mandatory;

    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;

    scroll-padding-left:2px;
}

.mta-continue-wrap #za-continue-container::-webkit-scrollbar{
    display:none;
}

.mta-continue-wrap .za-continue-card{
    position:relative;

    width:420px;
    flex:0 0 420px;

    overflow:hidden;

    border-radius:28px;

    background:
        linear-gradient(
            180deg,
            rgba(19,28,49,.98),
            rgba(11,17,32,.98)
        );

    border:1px solid rgba(255,255,255,.06);

    box-shadow:
        0 24px 52px rgba(0,0,0,.28);

    scroll-snap-align:start;

    transition:
        transform .28s ease,
        box-shadow .28s ease;
}

.mta-continue-wrap .za-thumb-wrap{
    position:relative;
    isolation:isolate;
}

.mta-continue-wrap .za-thumb-wrap::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.82),
            transparent 54%
        );
}

.mta-continue-wrap .za-thumb-img{
    width:100%;
    aspect-ratio:16/9;

    object-fit:cover;

    transition:transform .4s ease;
}

.mta-continue-wrap .za-thumb-info{
    position:absolute;
    left:20px;
    right:84px;
    bottom:18px;
    z-index:3;
}

.mta-continue-wrap .za-thumb-title{
    font-size:22px;
    line-height:1.16;
    font-weight:900;

    color:#fff;

    margin-bottom:14px;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

    overflow:hidden;
}

.mta-continue-wrap .za-progress-bar{
    height:7px;

    background:rgba(255,255,255,.14);

    border-radius:999px;

    overflow:hidden;
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,.24);
}

.mta-continue-wrap .za-progress-inner{
    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--primary-hover)
        );
    box-shadow:
        0 0 18px rgba(139,92,246,.42);
}

.mta-continue-wrap .za-play-center{
    width:56px;
    height:56px;
    position:absolute;
    z-index:4;

    right:18px;
    bottom:18px;

    font-size:16px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-hover)
        );

    box-shadow:
        0 18px 32px rgba(139,92,246,.32);
}

.mta-continue-wrap .za-continue-card:hover{
    transform:translateY(-6px);

    box-shadow:
        0 36px 58px rgba(0,0,0,.32);
}

.mta-continue-wrap .za-continue-card:hover .za-thumb-img{
    transform:scale(1.06);
}
/* SECTIONS */
.mta-section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;

    margin-bottom:22px;
}
.mta-section-actions{
    display:flex;
    align-items:center;
    gap:10px;
}

.mta-slider-nav{
    display:flex;
    gap:8px;
}

.mta-slider-nav button{
    width:38px;
    height:38px;

    border:0;
    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(255,255,255,.08);
    color:#fff;

    font-size:26px;
    line-height:1;

    cursor:pointer;

    transition:
        background .25s ease,
        transform .25s ease;
}

.mta-slider-nav button:hover{
    background:rgba(255,255,255,.14);
    transform:translateY(-2px);
}
.mta-section-link{
    flex:0 0 auto;

    min-height:38px;

    padding:0 14px;

    border-radius:999px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

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

    font-size:13px;
    font-weight:800;

    transition:
        background .25s ease,
        transform .25s ease;
}

.mta-section-link:hover{
    background:rgba(255,255,255,.09);

    transform:translateY(-2px);
}

.mta-section{
    position:relative;
    isolation:isolate;
    padding:52px 0 18px;
}
.mta-section::before{
    content:"";
    position:absolute;

    top:0;
    left:0;
    right:0;

    height:1px;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(255,255,255,.06),
            transparent
        );

    opacity:.5;
}
.mta-featured-section::before{
    display:none;
}

.mta-section h2{
    margin:6px 0 0;
    font-size:28px;
    line-height:1.1;
    font-weight:900;
    letter-spacing:-.8px;
}
/* ===============================
   FEATURED ROW
================================ */

.mta-featured-section{
    padding-top:40px;
    z-index:2;
}

.mta-featured-row{
    display:flex;
    gap:22px;

    overflow-x:auto;

    padding-bottom:12px;
    position:relative;
    scroll-snap-type:x mandatory;

    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;

    scroll-padding-left:2px;
}

.mta-featured-row::-webkit-scrollbar{
    display:none;
}

.mta-featured-card{
    flex:0 0 420px;

    color:#fff;
    transition:
        transform .32s ease;
    scroll-snap-align:start;
    -webkit-tap-highlight-color:transparent;
}

.mta-featured-thumb{
    position:relative;

    overflow:hidden;

    border-radius:32px;

    isolation:isolate;
    transition:
        transform .32s ease,
        box-shadow .32s ease;
    min-height:520px;

    background:var(--bg-card);

    box-shadow:
        0 34px 70px rgba(0,0,0,.34);
}

.mta-featured-thumb img{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .6s ease;
}

.mta-featured-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.92),
            rgba(0,0,0,.18) 46%,
            rgba(0,0,0,.04)
        );

    transition:
        opacity .32s ease;

    z-index:1;
}
.mta-featured-card:hover .mta-featured-overlay{
    opacity:.92;
}

.mta-featured-content{
    position:absolute;

    left:24px;
    right:24px;
    bottom:24px;

    z-index:3;
}

.mta-featured-badge{
    display:inline-flex;

    min-height:30px;

    padding:0 12px;

    border-radius:999px;

    align-items:center;
    justify-content:center;

    margin-bottom:14px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-hover)
        );

    font-size:11px;
    font-weight:900;
    letter-spacing:1px;
}

.mta-featured-content strong{
    display:block;

    font-size:32px;
    line-height:1.08;
    font-weight:900;

    letter-spacing:-1px;

    margin-bottom:14px;
}

.mta-featured-content em{
    font-style:normal;

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

    font-size:14px;
    font-weight:700;
}

.mta-featured-card:hover{
    transform:translateY(-8px);
}

.mta-featured-card:hover .mta-featured-thumb{
    transform:translateY(-2px);

    box-shadow:
        0 42px 80px rgba(0,0,0,.42);
}

.mta-featured-card:hover img{
    transform:scale(1.08);
}
.mta-featured-card:active{
    transform:scale(.98);
}
/* ===============================
   BREAK BANNER
================================ */

.mta-break-banner{
    margin:34px 0 8px;
    padding:28px;

    border-radius:30px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    background:
        radial-gradient(
            circle at 14% 18%,
            rgba(139,92,246,.28),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            rgba(19,28,49,.98),
            rgba(11,17,32,.98)
        );

    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 24px 52px rgba(0,0,0,.24);
}

.mta-break-banner span{
    display:block;

    margin-bottom:8px;

    color:var(--accent);

    font-size:11px;
    font-weight:900;
    letter-spacing:1px;
    text-transform:uppercase;
}

.mta-break-banner strong{
    display:block;

    max-width:640px;

    color:#fff;

    font-size:28px;
    line-height:1.18;
    font-weight:900;
    letter-spacing:-.7px;
}

.mta-break-banner a{
    min-height:44px;

    padding:0 18px;

    border-radius:999px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    background:linear-gradient(135deg,var(--primary),var(--primary-hover));

    color:#fff;

    font-size:13px;
    font-weight:900;

    flex:0 0 auto;

    box-shadow:
        0 14px 28px rgba(139,92,246,.28);
}
/* ===============================
   CATEGORY SECTION
================================ */

.mta-category-section{
    padding-top:34px;
    opacity:.92;
}

.mta-category-section .mta-section-kicker{
    color:rgba(245,158,11,.78);
}

.mta-category-section .mta-card{
    flex-basis:172px;
}

.mta-category-section .mta-card-thumb{
    border-radius:18px;
}

.mta-category-section .mta-card strong{
    font-size:14px;
    min-height:40px;
}
.mta-category-section .mta-card-thumb span{
    width:36px;
    height:36px;
    font-size:12px;
}

/* EDGE FADE */

.mta-row::before,
.mta-row::after,
.mta-featured-row::before,
.mta-featured-row::after,
.mta-continue-wrap #za-continue-container::before,
.mta-continue-wrap #za-continue-container::after{
    content:"";
    position:sticky;

    top:0;

    width:38px;

    flex:0 0 38px;

    z-index:4;

    pointer-events:none;
}

.mta-row::before,
.mta-featured-row::before,
.mta-continue-wrap #za-continue-container::before{
    left:0;

    margin-right:-38px;

    background:
        linear-gradient(
            to right,
            var(--bg-main),
            rgba(11,17,32,0)
        );
}

.mta-row::after,
.mta-featured-row::after,
.mta-continue-wrap #za-continue-container::after{
    right:0;

    margin-left:-38px;

    background:
        linear-gradient(
            to left,
            var(--bg-main),
            rgba(11,17,32,0)
        );
}
/* ===============================
   ROW + CARD
================================ */

.mta-row{
    display:flex;
    gap:18px;
    overflow-x:auto;
    padding-bottom:16px;
    position:relative;
    scroll-snap-type:x mandatory;

    -webkit-overflow-scrolling:touch;

    scroll-padding-left:2px;

    scrollbar-width:none;
}

.mta-row::-webkit-scrollbar{
    display:none;
}

.mta-card{
    flex:0 0 210px;
    scroll-snap-align:start;
    color:var(--text-white);
    position:relative;

    transition:
        transform .28s ease,
        opacity .28s ease;
    -webkit-tap-highlight-color:transparent;
}

.mta-card-thumb{
    isolation:isolate;
    position:relative;
    overflow:hidden;
    border-radius:20px;
    background:var(--bg-card);
    box-shadow:0 12px 26px rgba(0,0,0,.18);
    transition:
       transform .28s ease,
       box-shadow .28s ease;
}
.mta-card-thumb::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.72),
            transparent 48%
        );

    opacity:.88;

    transition:opacity .3s ease;
}

.mta-card-thumb img{
    display:block;
    width:100%;
    aspect-ratio:2/3;
    object-fit:cover;
    transition:transform .35s ease;
}

.mta-card-thumb span{
    position:absolute;
    right:12px;
    bottom:12px;
    z-index:3;

    width:42px;
    height:42px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-hover)
        );

    color:#fff;

    font-size:14px;
    font-weight:900;

    box-shadow:
        0 12px 24px rgba(139,92,246,.32);

    backdrop-filter:blur(8px);
}

.mta-card strong{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

    overflow:hidden;

    margin-top:12px;
    min-height:42px;

    color:var(--text-white);

    font-size:15px;
    font-weight:800;
    line-height:1.42;
    letter-spacing:-0.15px;

    transition:color .25s ease;
}
.mta-card-stats{
    display:flex;
    flex-wrap:wrap;
    gap:6px;

    margin-top:7px;
}

.mta-card-stats span{
    min-height:24px;
    padding:0 8px;

    display:inline-flex;
    align-items:center;

    border-radius:999px;

    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.07);

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

    font-size:11px;
    font-weight:800;
}
.mta-badge-new{
    background:rgba(255,145,0,.14) !important;
    border-color:rgba(255,145,0,.28) !important;
    color:#ffb84d !important;
}
/* FULL */

.mta-badge-full{
    background:rgba(16,185,129,.14) !important;
    border-color:rgba(16,185,129,.28) !important;
    color:#34d399 !important;
}

/* CONTINUE */

.mta-badge-continue{
    background:rgba(59,130,246,.14) !important;
    border-color:rgba(59,130,246,.28) !important;
    color:#60a5fa !important;
}
.mta-card:hover{
    transform:translateY(-6px);
}

.mta-card:hover .mta-card-thumb{
    box-shadow:
        0 24px 42px rgba(0,0,0,.34);
}

.mta-card:hover img{
    transform:scale(1.08);
}

.mta-card:hover .mta-card-thumb::after{
    opacity:1;
}

.mta-card:hover strong{
    color:#fff;
}
.mta-card:active{
    transform:scale(.97);
}
.mta-row:hover .mta-card{
    opacity:.85;
}

.mta-row .mta-card:hover{
    opacity:1;
}

.mta-hero:hover .mta-hero-bg img{
    transform:
        scale(1.08)
        translateY(-6px);
}
.mta-recommend-reason{
    display:inline-flex;
    margin-top:10px;
    min-height:24px;
    padding:0 9px;
    align-items:center;
    border-radius:999px;
    background:rgba(139,92,246,.14);
    border:1px solid rgba(139,92,246,.28);
    color:#c4b5fd;
    font-size:11px;
    font-weight:900;
    font-style:normal;
}
.mta-favorites-section{
    margin-top:10px;
}

.mta-favorite-card .mta-card-thumb{
    display:flex;
    align-items:center;
    justify-content:center;

    min-height:210px;

    background:linear-gradient(
        135deg,
        rgba(236,72,153,.22),
        rgba(139,92,246,.18)
    );
}

.mta-favorite-placeholder{
    width:64px;
    height:64px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.12);

    font-size:30px;

    box-shadow:0 14px 32px rgba(236,72,153,.22);
}
.mta-favorite-remove{
    position:absolute;
    top:10px;
    right:10px;
    z-index:5;

    width:34px;
    height:34px;

    border:0;
    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(0,0,0,.52);
    color:#fff;

    font-size:22px;
    font-weight:900;

    cursor:pointer;

    backdrop-filter:blur(8px);

    transition:
        background .25s ease,
        transform .25s ease;
}

.mta-favorite-remove:hover{
    background:rgba(244,63,94,.9);
    transform:scale(1.06);
}

.mta-favorite-remove:active{
    transform:scale(.92);
}
/* =========================
   RANKING
========================= */

.mta-ranking-section{
    padding-top:40px;
}

.mta-ranking-card{
    flex:0 0 190px;
}

.mta-ranking-card .mta-card-thumb{
    border-radius:22px;
}

.mta-ranking-badge{
    position:absolute;
    left:12px;
    top:12px;
    z-index:4;

    min-width:42px;
    height:34px;
    padding:0 10px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:999px;

    background:rgba(0,0,0,.56);
    border:1px solid rgba(255,255,255,.14);

    color:#fff;
    font-size:18px;
    font-weight:900;

    backdrop-filter:blur(10px);
}

.mta-ranking-count{
    display:block;
    margin-top:6px;

    color:rgba(255,255,255,.66);
    font-size:12px;
    font-style:normal;
    font-weight:800;
}
/* ALL GENRES CTA */

.mta-all-genres{
    padding:28px 0 46px;
}

.mta-all-genres-card{
    min-height:120px;
    padding:24px;
    border-radius:28px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;

    background:
        radial-gradient(
            circle at 12% 20%,
            rgba(139,92,246,.32),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            rgba(19,28,49,.98),
            rgba(11,17,32,.98)
        );

    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 24px 48px rgba(0,0,0,.22);

    color:#fff;
}

.mta-all-genres-card span{
    display:block;
    margin-bottom:8px;

    color:var(--accent);
    font-size:11px;
    font-weight:900;
    letter-spacing:1px;
    text-transform:uppercase;
}

.mta-all-genres-card strong{
    font-size:26px;
    line-height:1.15;
    font-weight:900;
    letter-spacing:-.6px;
}

.mta-all-genres-card em{
    width:48px;
    height:48px;
    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:linear-gradient(135deg,var(--primary),var(--primary-hover));

    font-style:normal;
    font-size:24px;
    font-weight:900;

    flex:0 0 auto;
}
/* ===============================
   MOBILE OVERRIDES
================================ */

@media(max-width:768px){
/* HERO MOBILE */
    .mta-shell{
        width:min(100% - 24px, 1280px);
    }

    .mta-hero{
        min-height:560px;
        align-items:flex-end;
    }
.mta-shell::before{
    top:-60px;
    height:60px;
}
.mta-hero-content{
    padding:110px 18px 26px;

    border-radius:28px;

    background:
        linear-gradient(
            180deg,
            rgba(11,17,32,.38),
            rgba(11,17,32,.24)
        );

    backdrop-filter:blur(8px);
}
/* ROW MOBILE */
.mta-row{
    gap:14px;
    padding-bottom:10px;
}
    .mta-card-thumb span{
    width:38px;
    height:38px;
    }
    .mta-hero h1{
        margin:10px 0 14px;

        font-size:42px;
        line-height:1.02;

        letter-spacing:-1px;

        font-weight:900;
    }

    .mta-hero p{
        font-size:13px;
        line-height:1.55;
    }

.mta-hero-actions{
    gap:10px;
}

.mta-btn{
    min-height:44px;
    padding:0 16px;

    font-size:13px;

    border-radius:16px;
}

.mta-section{
    padding:38px 0 10px;
}

    .mta-section h2{
        font-size:20px;
        letter-spacing:-.45px;
    }

    .mta-card{
        flex:0 0 158px;
    }

    .mta-continue-wrap #za-continue-section{
        margin:24px 0 8px;
        padding:18px 14px;
        border-radius:24px;
    }
    .mta-row:hover .mta-card{
        opacity:1;
    }

    .mta-card:hover{
        transform:none;
    }
.mta-continue-wrap .za-continue-card{
    width:86%;
    flex:0 0 86%;

    border-radius:24px;
}

.mta-continue-wrap .za-thumb-info{
    left:16px;
    right:72px;
    bottom:16px;
}

.mta-continue-wrap .za-thumb-title{
    font-size:16px;
    margin-bottom:10px;
}

.mta-continue-wrap .za-play-center{
    width:48px;
    height:48px;

    right:14px;
    bottom:14px;
}

.mta-continue-wrap .za-continue-card:hover{
    transform:none;
}
.mta-hero-bg img{
    transform:scale(1.08);
    transition:none;

    filter:
        saturate(1.04)
        contrast(1.02)
        brightness(.72);
}
.mta-all-genres{
    padding:22px 0 34px;
}

.mta-all-genres-card{
    min-height:104px;
    padding:20px;
    border-radius:24px;
}

.mta-all-genres-card strong{
    font-size:21px;
}

.mta-all-genres-card em{
    width:42px;
    height:42px;
    font-size:21px;
}
.mta-featured-row{
    gap:16px;
}

.mta-featured-card{
    flex-basis:86%;
}

.mta-featured-thumb{
    min-height:360px;
    border-radius:24px;
}

.mta-featured-content{
    left:18px;
    right:18px;
    bottom:18px;
}

.mta-featured-content strong{
    font-size:24px;
    line-height:1.12;
}
.mta-section-head{
    align-items:center;
}

.mta-section-link{
    min-height:34px;

    padding:0 12px;

    font-size:12px;
}
.mta-btn:hover,
.mta-section-link:hover,
.mta-featured-card:hover img{
    transform:none;
}
.mta-featured-card:hover{
    transform:none;
}

.mta-featured-card:hover .mta-featured-thumb{
    transform:none;
}
.mta-card:active,
.mta-featured-card:active,
.mta-btn:active{
    transform:scale(.98);
}
.mta-break-banner{
    margin:26px 0 4px;
    padding:22px;

    border-radius:24px;

    flex-direction:column;
    align-items:flex-start;
}

.mta-break-banner strong{
    font-size:22px;
    line-height:1.18;
}

.mta-break-banner a{
    min-height:42px;
    padding:0 16px;
    font-size:13px;
}
.mta-category-section{
    padding-top:28px;
}

.mta-category-section .mta-card{
    flex:0 0 128px;
}

.mta-category-section .mta-card strong{
    font-size:13px;
    min-height:38px;
}
.mta-category-section .mta-card-thumb span{
    width:32px;
    height:32px;
    font-size:11px;
}
.mta-meta{
    gap:8px;
    margin-bottom:14px;
}

.mta-meta span{
    min-height:30px;

    padding:0 12px;

    font-size:11px;
}
.mta-section::before{
    opacity:.32;
}
.mta-pills{
    padding:20px 0 4px;
}

.mta-pills a{
    min-height:38px;
    padding:0 14px;
    font-size:12px;
}

.mta-pills a:hover{
    transform:none;
}
.mta-row::before,
.mta-row::after,
.mta-featured-row::before,
.mta-featured-row::after,
.mta-continue-wrap #za-continue-container::before,
.mta-continue-wrap #za-continue-container::after{
    width:22px;
    flex-basis:22px;
}
.mta-continue-nav,
.mta-slider-nav{
    display:none;
}
}