/* =========================================================
   Root
========================================================= */

:root{
    --bg-body:#121417;
    --bg-card:#1a1d20;

    --white:#ffffff;

    --border-soft:rgba(255,255,255,.06);
    --border-hover:rgba(255,255,255,.14);

    --text-soft:rgba(255,255,255,.58);
    --text-light:rgba(255,255,255,.82);
    --text-fade:rgba(255,255,255,.45);

    --blue:#56b8ff;
    --blue-hover:#7bcaff;

    --red:#ff6767;
    --red-hover:#ff8c8c;

    --shadow-card:0 18px 36px rgba(0,0,0,.3);
    --shadow-big:0 20px 50px rgba(0,0,0,.38);
}


/* =========================================================
   Base
========================================================= */

body{
    background:var(--bg-body);
}


/* =========================================================
   Layout
========================================================= */

.ViewArea,
.GoodsArea,
.StuffArea,
.SectionStuffArea,
.VideoArea,
.TopImgArea{
    position:relative;

    background:
    linear-gradient(
        to bottom,
        #171a1e 0%,
        #101214 100%
    );
}

.GoodsArea,
.StuffArea{
    padding:70px 0;
}


/* =========================================================
   Common Card
========================================================= */

.main_goods_box,
.stuffBox{
    position:relative;

    width:100%;
    height:100%;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    border-radius:24px;

    background:var(--bg-card);

    border:1px solid var(--border-soft);

    transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.main_goods_box:hover,
.stuffBox:hover{
    transform:translateY(-5px);

    border-color:var(--border-hover);

    box-shadow:var(--shadow-card);
}


/* =========================================================
   Exhibition Card
========================================================= */

.ExhibitionCard{
    position:relative;

    aspect-ratio:1 / 1.05;

    min-height:320px;

    overflow:hidden;

    border-radius:28px;

    border:1px solid var(--border-soft);

    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;

    transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    background-size .5s ease;
}

.ExhibitionCard::before{
    content:'';

    position:absolute;
    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.72) 0%,
        rgba(0,0,0,.28) 45%,
        rgba(0,0,0,.08) 100%
    );

    z-index:1;
}

.ExhibitionCard > .position-relative{
    position:relative;
    z-index:2;
}

.ExhibitionCard:hover{
    transform:translateY(-6px);

    background-size:106%;

    border-color:rgba(255,255,255,.16);

    box-shadow:var(--shadow-big);
}

.ExhibitionCard .stretched-link{
    position:absolute;
    inset:0;

    z-index:5;
}


/* =========================================================
   Hero
========================================================= */

.MainImgArea{
    position:relative;

    min-height:42vh;

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

    overflow:hidden;

    padding:60px 0;

    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
}

.MainImgArea::before{
    content:'';

    position:absolute;
    inset:0;

    background:
    linear-gradient(
        to bottom,
        rgba(0,0,0,.08),
        rgba(0,0,0,.5)
    );

    z-index:1;
}

.MainImgArea::after{
    content:'';

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:120px;

    background:
    linear-gradient(
        to bottom,
        rgba(0,0,0,0),
        var(--bg-body)
    );

    z-index:1;
}

.MainImgArea > .container{
    position:relative;
    z-index:2;
}

.MainImg{
    margin-bottom:20px;
}

.PointImg{
    width:100%;
    max-width:240px;

    object-fit:contain;

    filter:
    drop-shadow(
        0 14px 30px rgba(0,0,0,.42)
    );

    transition:transform .3s ease;
}

.MainImgArea:hover .PointImg{
    transform:scale(1.03);
}


/* =========================================================
   Typography
========================================================= */

.BigPointText{
    color:var(--white);

    font-size:clamp(20px, 2vw, 34px);
    font-weight:900;

    line-height:1.2;
    letter-spacing:-0.5px;

    text-shadow:
    0 4px 14px rgba(0,0,0,.35);
}

.SmallPointText{
    margin-top:12px;

    color:var(--text-light);

    font-size:clamp(13px, 1vw, 18px);

    line-height:1.6;

    text-shadow:
    0 4px 12px rgba(0,0,0,.3);
}


/* =========================================================
   Admin
========================================================= */

.ExhibitionAdminBtn{
    background:rgba(255,255,255,.04);

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

    border-radius:20px;

    transition:
    background-color .25s ease,
    border-color .25s ease,
    transform .25s ease;
}

.ExhibitionAdminBtn:hover{
    background:rgba(255,255,255,.07);

    border-color:var(--border-hover);

    transform:translateY(-2px);
}

.AdminIconBox{
    width:52px;
    height:52px;

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

    border-radius:16px;

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

    color:var(--white);

    font-size:1.3rem;
}


/* =========================================================
   Admin Hit
========================================================= */

.AdminHitBox{
    margin-top:20px;
}

.AdminHitItem{
    min-height:86px;

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

    padding:12px;

    border-radius:16px;

    text-align:center;

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

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

    backdrop-filter:blur(8px);
}

.AdminHitLabel{
    margin-bottom:6px;

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

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

    font-size:12px;
}

.AdminHitValue{
    color:var(--white);

    font-size:20px;
    font-weight:800;
}


/* =========================================================
   Section
========================================================= */

.SectionTopArea{
    position:relative;
    overflow:hidden;
    /*padding:70px 0 40px;*/
}

.SectionStuffArea{
    padding:20px 0 80px;
}

.SectionBgImg{
    min-height:340px;

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

    overflow:hidden;

    border-radius:28px;

    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
}

.SectionPointImg{
    max-width:72%;
}

.MenuTitle{
    position:relative;

    margin-bottom:24px;

    padding-left:18px;
}

.MenuTitle::before{
    content:'';

    position:absolute;

    top:4px;
    left:0;

    width:6px;
    height:26px;

    border-radius:999px;

    background:#2ea8ff;
}

.MenuTitle h3{
    color:var(--white);

    font-size:30px;
    font-weight:800;
}


/* =========================================================
   Remote
========================================================= */

.RemoteControlRowArea{
    overflow-x:auto;

    padding:10px 0;

    z-index:99999;

    scrollbar-width:none;

    backdrop-filter:blur(12px);

    background:rgba(15,15,15,.75);

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

.RemoteControlRowArea::-webkit-scrollbar{
    display:none;
}

.RemoteControlBtn{
    display:inline-block;

    padding:10px 18px;

    border-radius:999px;

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

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

    color:var(--white) !important;

    text-decoration:none;

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

    line-height:1.2;

    white-space:nowrap;

    transition:
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease;
}

.RemoteControlBtn:hover{
    background:rgba(57,169,255,.14);

    border-color:rgba(57,169,255,.28);

    color:#8ed2ff !important;

    text-decoration:none;
}


/* =========================================================
   Common Image
========================================================= */

.goods_img,
.stuffImgBox{
    width:100%;

    background-repeat:no-repeat;
    background-position:center center;

    background-size:82%;

    background-color:#ffffff;

    transition:
    transform .35s ease,
    background-size .35s ease,
    filter .35s ease;
}

.goods_img{
    aspect-ratio:1 / .8;
}

.stuffImgBox{
    aspect-ratio:1 / .9;
}

.main_goods_box:hover .goods_img,
.stuffBox:hover .stuffImgBox{
    background-size:86%;
}


/* =========================================================
   Goods
========================================================= */

.GoodsBox{
    margin-bottom:24px;
}

.GoodsSimbolArea{
    position:absolute;

    top:12px;
    left:12px;

    z-index:10;
}

.GoodsSimbolImg{
    width:38px;
    height:38px;

    object-fit:contain;

    border-radius:50%;

    background:#ffffff;

    padding:4px;

    box-shadow:
    0 4px 12px rgba(0,0,0,.2);

    transition:transform .25s ease;
}

.main_goods_box:hover .GoodsSimbolImg{
    transform:scale(1.05);
}

.GoodsLink{
    display:block;

    text-decoration:none;
}

.goods_footer,
.stuffTextBox{
    flex:1;

    display:flex;
    flex-direction:column;

    padding:14px;
}

.goods_name,
.stuff_name{
    margin-bottom:8px;

    color:var(--white);

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

    line-height:1.4;

    text-align:center;

    display:-webkit-box;

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

    overflow:hidden;
}

.goods_name{
    letter-spacing:0;
}

.goods_name i{
    color:rgba(255,255,255,.45);
}

.goods_infor{
    width:100%;

    margin-bottom:10px;

    color:var(--text-soft);

    font-size:12px;

    line-height:1.5;

    text-align:center;

    word-break:keep-all;

    overflow-wrap:anywhere;

    white-space:normal;

    overflow:hidden;

    display:-webkit-box;

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

.goods_hit,
.stuff_hit{
    font-size:12px;
    font-weight:500;

    text-align:center;
}

.goods_hit{
    color:var(--text-fade);
}

.stuff_hit{
    color:#7f8b96;
}

.GoodsPriceArea{
    margin-top:auto;

    padding-top:12px;
}

.goods_card_pay,
.stuff_cart_pay{
    margin-bottom:6px;

    color:var(--blue);

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

    text-align:center;
}

.goods_pay,
.stuff_pay{
    color:var(--red);

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

    line-height:1.3;

    text-align:center;

    word-break:keep-all;
}

.main_goods_box:hover .goods_card_pay,
.stuffBox:hover .stuff_cart_pay{
    color:var(--blue-hover);
}

.main_goods_box:hover .goods_pay,
.stuffBox:hover .stuff_pay{
    color:var(--red-hover);
}


/* =========================================================
   Stuff
========================================================= */

.stuff_situ{
    min-height:24px;

    margin-bottom:8px;

    text-align:center;
}

.CardAddBtnArea{
    margin-top:auto;

    padding:0 14px 14px;
}


/* =========================================================
   Video
========================================================= */

.YouTube,
.Topimg{
    border-radius:24px;

    box-shadow:
    0 20px 50px rgba(0,0,0,.4);
}

.ClipImg{
    aspect-ratio:16 / 9;

    border-radius:18px;

    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;

    transition:
    transform .3s ease,
    opacity .3s ease;
}

.VideoSelect:hover .ClipImg{
    transform:translateY(-4px);

    opacity:.9;
}


/* =========================================================
   Goods Admin
========================================================= */

.GoodsAdminArea{
    margin-top:10px;

    padding-top:10px;

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

    text-align:center;
}

.GoodsAdminAlert{
    margin-top:6px;

    font-size:12px;
    font-weight:600;
}

.GoodsAdminBtnArea{
    margin-top:10px;
}


/* =========================================================
   Responsive
========================================================= */

@media (max-width:991px){

    .GoodsArea,
    .StuffArea{
        padding:60px 0;
    }

    .SectionStuffArea{
        padding-bottom:60px;
    }

    .MainImgArea{
        min-height:46vh;
    }

    .PointImg{
        max-width:190px;
    }

    .MenuTitle h3{
        font-size:26px;
    }

    .SectionBgImg{
        min-height:260px;
    }

}


@media (max-width:576px){

    .MainImgArea{
        min-height:40vh;

        padding:50px 0;
    }

    .BigPointText{
        font-size:clamp(20px, 6vw, 28px);

        line-height:1.25;
    }

    .goods_footer,
    .stuffTextBox{
        padding:12px;
    }

    .goods_name,
    .stuff_name{
        font-size:13px;
    }

    .goods_infor{
        font-size:11px;
    }

    .goods_pay,
    .stuff_pay{
        font-size:15px;
    }

    .goods_card_pay,
    .stuff_cart_pay{
        font-size:12px;
    }

    .SectionTopArea{
        padding:50px 0 30px;
    }

}


.ExhibitionUpdBtn{
    backdrop-filter: blur(10px);
    background: rgba(0,0,0,0.75);
    border: 1px solid rgba(255,255,255,0.15);
    transition: all .2s ease;    
}

.ExhibitionUpdBtn:hover{
    transform: translateY(-2px);
    background: rgba(20,20,20,0.95);
}


.TopSideMenuInCategory{
    margin-top:54px;
}