/* text */
.tx-ct{font-size:16px;font-weight:300;line-height:1.4;}
.tx-ft{font-size:12px;font-weight:300;line-height:1.2;}
.tx-center{text-align:center !important;}
.tx-left{text-align:left !important;}
.tx-right{text-align:right !important;}
.upercase{text-transform:uppercase;}
.indent{text-indent:5vw}
.tx-i{font-style: italic;}

.tx-black{color:#000}
.tx-white{color:#fff}

.topic-xxx{font-size:40px;font-size:clamp(46px, 4vw, 66px);}
.topic-xx{font-size:28px;font-size:clamp(30px, 3vw, 50px);}
.topic-xl{font-size:25px;font-size:clamp(26px, 3vw, 46px);}
.topic-x{font-size:22px;font-size:clamp(22px, 2vw, 34px);}
.topic-m{font-size:18px;font-size:clamp(16px, 1.2vw, 24px);}
.topic-s{font-size:16px;font-size:clamp(16px, 1.1vw, 18px);}

/* button color */
.btn-blue{background:var(--blue1) !important;}
.btn-green{background:var(--green1) !important;}
.btn-red{background:var(--red1) !important;}
.btn-yellow{background:var(--yellow1) !important;}
.btn-blue:hover,.btn-green:hover,.btn-red:hover,.btn-yellow:hover{background:var(--white1)!important;}

/* button */
.btn-1{display: flex;align-items: center;width: auto;padding:5px 1rem;color:var(--tem4);background:var(--tem8);border-radius:4px;font-size:16px;line-height: 1;font-weight:400;}
.btn-1:hover{color:var(--white1);background:var(--tem1);}

.btn-addline{width: auto;padding:.25rem .75rem;color:var(--white1);background:var(--bgline);border-radius:6px;font-size:1rem;line-height: 1;font-weight:400;border:1px solid var(--bgline);}
.btn-addline:hover{background:var(--bglineup);}

.btn-line{padding:.25rem .5rem;color:var(--white1);background:var(--bgline);border-radius:4px;font-size:.75rem;line-height: 1;font-weight:500;border:1px solid var(--bgline);}
.btn-line:hover{background:var(--bglineup);color:#1bc208;}
.btn-line2{padding:.5rem 1rem;color:var(--white1);background:var(--bgline);border-radius:4px;font-size:1.2rem;line-height: 1;font-weight:500;border:1px solid var(--bgline);text-align:center;}
.btn-line2:hover{background:var(--bglineup);color:#1bc208;}

.btn-fb{width: auto;padding:.25rem .75rem;color:var(--white1);background:var(--bgfb);border-radius:6px;font-size:1rem;line-height: 1;font-weight:400;border:1px solid var(--bgfb);}
.btn-fb:hover{background:var(--bgfbup);}

.btn-close{position:absolute;top:0;right:0;}
.btn-close:after{content:"X";display:flex;justify-content:center;align-items:center;width:24px;height:24px;text-align:center;line-height:16px;font-size:14px;background:#000;color:#fff;}

.btn-top-link{width: auto;padding:.25rem .75rem;color:var(--white1);background:var(--tem1);border-radius:2rem;font-size:1.1rem;line-height: 1;font-weight:400;}
.btn-top-link:hover{background:var(--tem5);color:var(--tem1);}

.btn-tag{display: flex;align-items: center;width: auto;padding:5px 1rem;color:var(--tem4);background:var(--tem8);border-radius:4px;font-size:16px;line-height: 1;font-weight:400;}
.btn-tag:hover{background:var(--bglineup);color:#1bc208;}


/* Search */
.search-box {
			width:100%;
            display: flex;
            align-items: center;max-width:800px;margin:auto;
        }

        .search-input {
            flex-grow: 1;
            padding: 6px 40px 6px 16px;
            outline: none;
			background: #080808;
			    color:#d3d3d3;
				border: 1px solid #3d3d3d;
				border-radius: 4px;
        }

        .search-button {
			display: flex;align-items: center;
			position:absolute;right:0;
            background-color: transparent;
            padding: 6px;
            cursor: pointer;
			height: 100%;
			border-left: 1px solid #3d3d3d;
        }

        .search-icon {
            width: 20px;
            height: 20px;
            fill: #fff;
        }
		.search-button:hover .search-icon{fill: #eab308;}
		.search-input:focus{
            border: 1px solid #fff;
        }
		


/* section*/
.main-page{width:100%;max-width:100%;display:grid;grid-template-columns:1fr;padding:2rem;grid-gap:1rem;}
.maxcol{max-width:var(--maxcol);margin: auto;}

.main-top-tx{width:100%;display:grid;margin:auto;padding:0 1rem;text-align:center;}
.main-top-tx p{font-size:14px;font-size:clamp(13px, .85vw, 16px);line-height:1.2;font-weight:400;color:#000;}
.sec1{width:100%;display:grid;}
.sec-topic{width:100%;display:grid;margin:0 auto 2rem;padding:0;justify-content: center;}
.sec-topic h1{text-align: center;padding:0;font-size:18px;font-size:clamp(14px, 1.4vw, 20px);}

.sec-topic span{color:#000;font-weight:600;text-align: center; font-size: 30px;}
.sec-topic:after{content:" ";display:grid;margin: auto;justify-items:center;width:15vw;height:4px;background:var(--tem1);}
.video-area{width:100%;display:grid;grid-template-columns:repeat(6,1fr);grid-gap:1rem;}
.video-list{width:100%;}
.video-list-in{width:100%;display:grid;grid-gap:4px;grid-gap:.25rem;}
.vl-cover{width:100%;display:grid;align-content:center;background:#222;overflow:hidden;border-radius:12px;aspect-ratio:1.78 / 1;}
.vl-cover img{object-position: center;object-fit: cover;}
.vl-cover:hover.vl-cover img{height:105%;}
.vl-cover-info{width:100%;height:100%;display:grid;position: absolute;}
.vl-time{position:absolute;bottom:4px;left:4px;color:white;font-size:11px;font-weight:400;padding:3px 6px;line-height:1;border-radius:4px;background:rgb(0 0 0 / 30%);}
.vl-view{position:absolute;top:8px;right:8px;color:var(--black1);font-size:11px;font-weight:600;padding:3px 6px;line-height:1;border-radius:0;background:var(--tem1);}
.vl-view:before{content:"ดู";padding-right:4px;font-size:1em;font-weight:400;}
.vl-info{width:100%;display:grid;padding:4px 6px;grid-gap:.5rem;background:var(--tem4);overflow: hidden;border-radius:8px;}
.vl-info-r1{width:100%;display:flex;justify-content:space-between;overflow: hidden;}
	.vl-name-tx{font-size:14px;font-size:clamp(13px, 1vw, 18px);font-weight:600;color:#000;display: -webkit-box;-webkit-line-clamp:1;-webkit-box-orient: vertical;overflow: hidden;text-align:center;}
.vl-info-r2{width:100%;display:flex;margin:4px auto;gap:6px;}
	.vl-tag-tx{color:gray;font-size:12px;font-weight:300;line-height:1.1;}
.sec-recommend{width:100%;display:grid;margin:auto;padding:2rem;justify-content: center;}
.video-area-recommend{width:100%;display:grid;grid-template-columns:repeat(4,1fr);grid-gap:1rem;}
.video-area-recommend .vl-info{background: #eb2d2d;}
.video-area-recommend .vl-name-tx{color:#fff;}

/* play page */
.play-area{width:100%;display:grid;padding:16px calc(16px + 10vw);margin:0 auto 1rem;grid-template-columns:1fr;grid-gap:8px;}
.play-video-area{width:100%;display:grid;}
.play-box{width:100%;display:grid;}
.play-box-in{width:100%;display:grid;}
.video-fullsize{width:100%;display:grid;background:var(--black2);aspect-ratio: 16 / 9;}
.video-info{width:100%;display:grid;padding:0;justify-content:center;text-align:center;}
.topic-play{display:flex;justify-content:center;padding: 6px 12px 12px;font-weight:600;line-height: 1;align-items: center;font-size:16px;font-size:clamp(16px, 1.5vw, 26px);color:#000;}
.topic-play:after{content:"";width:300px;height:4px;background:var(--tem1);display:grid;position:absolute;bottom:0;left:50%;transform:translateX(-50%);}
.sec-play{width:100%;display:grid;background:#000;}
.sec-play-ft{width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;padding:1rem;}
.sec-related{width:100%;display:grid;padding:2rem;border:1px solid #181818;}


/* tag */
.sec-tag{width:100%;display:grid;}
.tx-tag-ct{width:100%;display:grid;padding:1rem;text-align:center;font-size:14px;font-size:clamp(13px, .85vw, 16px);line-height:1.2;font-weight:400;color:#000;}
.tag-area-play{width:100%;display:flex;flex-wrap:wrap;list-style: none;padding: 0;margin: 0;align-items: baseline;justify-content:center;gap:8px;padding:1rem;}
.tag-area-play span{display:flex;flex-wrap:wrap;}
.tag-area-play li{display:grid;}
.tag-play{font-size:16px;font-size:clamp(12px, 1vw, 16px);text-decoration: none;padding:6px 8px;line-height:1;background:var(--tem1);color:#000;}
.tag-play:hover{background:var(--black1);color:var(--tem1);}


/* page content */
.page-blog{width:100%;display:grid;margin:auto;padding:0;max-width:1080px;justify-content:center;}
.sec-blog{width:100%;display:grid;padding:2rem 8vw;border-radius:16px;background:#fff;box-shadow:0 -3px 20px rgb(0 0 0 / 7%);}
.ct-box{width:100%;display:grid;}
.area-text{width:100%;display:grid;padding:1rem;grid-gap:1rem;}
.sec-blog .breadcrumb-container{width:100%;max-width: -webkit-fill-available;}

/* pagination */
.pagination-area{display:grid;width:100%;padding:1rem;margin:1rem auto;}
.pagination {width:100%;display: flex;flex-wrap: wrap;gap: 8px;	justify-content:center;}
.pagination a {min-width:36px;min-height:36px;display:flex;align-items: center;justify-content:center;text-decoration: none;font-size:.9em;line-height:1;color: black;background-color:transparent;font-weight: 600;padding: 4px 8px;transition: all 0.3s ease;border-radius:4px;}
.pagination a:hover {background-color:#3f3f46;color: white;}
.pagination a.active {background-color:#0a0a0a;color:#ffd100;}
.pagination a.prev,.pagination a.next {font-weight: bold;background-color:transparent;color:#black;}
.pagination a.prev:hover,.pagination a.next:hover{background-color:#ffdf07;color:#000;}


/* breadcrumb */
.breadcrumb-box{width:100%;display:grid;}
.breadcrumb-container{width: 100%;max-width:max-content;margin:auto;display: flex;flex-wrap:wrap;justify-content:center;padding: 8px 16px;background:#000;overflow:hidden;border-radius:8px;}
.breadcrumb{list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;align-items: baseline;}
.breadcrumb li{color: white;font-size: 0.9em;}
.breadcrumb li a{color: white;text-decoration: none;}
.breadcrumb li a:hover{color:#ffc900;}
.breadcrumb li.current{color: #ffc900;}
.breadcrumb li.current a{color: #ffc900;}
.breadcrumb li:not(:last-child)::after {content: "\00BB";color: white;padding: 0 10px;font-size: 1.2em;bottom: -3px;}



/* Video JS */
.video-js.vjs-1-1:not(.vjs-audio-only-mode), .video-js.vjs-16-9:not(.vjs-audio-only-mode), .video-js.vjs-4-3:not(.vjs-audio-only-mode), .video-js.vjs-9-16:not(.vjs-audio-only-mode), .video-js.vjs-fluid:not(.vjs-audio-only-mode){height:100% !important;}
.my-video-dimensions.vjs-fluid:not(.vjs-audio-only-mode){padding:0 !important;}
.video-js .vjs-tech {position: relative !important;top: auto !important;left: auto !important;width: 100% !important;height: auto !important;aspect-ratio: 16 / 9;}

.video-js .vjs-big-play-button .vjs-icon-placeholder:before, .video-js .vjs-modal-dialog, .vjs-button>.vjs-icon-placeholder:before, .vjs-modal-dialog .vjs-modal-dialog-content{position:relative !important;}

.video-js .vjs-big-play-button .vjs-icon-placeholder:before, .video-js .vjs-play-control .vjs-icon-placeholder, .vjs-icon-play,
.video-js .vjs-picture-in-picture-control .vjs-icon-placeholder, .vjs-icon-picture-in-picture-enter,
.video-js .vjs-fullscreen-control .vjs-icon-placeholder, .vjs-icon-fullscreen-enter,
.video-js .vjs-mute-control .vjs-icon-placeholder, .vjs-icon-volume-high
{font-family: VideoJS !important;}



/* add fix */
.fixspot-left{z-index:801;height:calc(100%-80px);max-width:160px;position:fixed;left:0;top:50%;display:grid;align-items:center;overflow:hidden;transform: translateY(-50%);}
.fixspot-right{z-index:802;height:calc(100%-80px);max-width:160px;position:fixed;right:0;top:50%;display:grid;align-items:center;overflow:hidden;transform: translateY(-50%);}
.fixspot-left img,.fixspot-right img{width:100%;max-width:100%;display:grid;object-position: center;object-fit:scale-down;}

.fixspot-bottom{z-index:803;width:100vw;max-height:90px;max-width:728px;position:fixed;left:50%;bottom:0;display:grid;justify-items:center;overflow:hidden;transform: translateX(-50%);}
.fixspot-bottom img{width:100%;max-width:100%;display:grid;object-position:top;object-fit:scale-down;}

.fixspot-top{z-index:998;width:100vw;max-height:90px;max-width:728px;position:fixed;left:50%;top:0;display:grid;justify-items:center;overflow:hidden;transform: translateX(-50%);}
.fixspot-top img{width:100%;max-width:100%;display:grid;object-position:top;object-fit:scale-down;}


.fixspot-in{display:block;width:100%;}
.fixspot-left,.fixspot-right,.fixspot-bottom,.fixspot-top{display:none !important;}




/* head */
.main-head{z-index:997;width:100%;padding:0;margin:0 auto;display:grid;grid-template-columns:1fr;-webkit-transition:all .5s ease-in;transition:all .5s ease-in;position:sticky;top:0;}
.head-r1{width:100%;display:flex;justify-content:space-between;align-items: center;padding:16px 1rem 24px;grid-gap:0;background:var(--black1);}
.head-r2{width:100%;display:grid;grid-template-columns:1fr auto;align-items: center;padding:1rem;background:var(--black1);}
.head-r3{width:100%;display:flex;justify-content:space-between;align-items: center;padding:12px 1rem;grid-gap:1rem;background: #ffcd17;}

.head-r1-left{width:100%;max-width: 100%;display:flex;justify-content:center;gap:1rem;}
.head-r1-right{width:100%;max-width: max-content;display:flex;justify-content:flex-end;gap:1rem;position: absolute;right:0;}
.head-r1-search{display:flex;width:100%;max-width: 540px;}

.h-logo{display:grid;justify-content:center;}
.h-name{margin:auto;display:flex;justify-content:center;padding:0;align-items:center;}
.h-name span{margin:auto;font-size:24px;font-size:clamp(20px, 2vw, 28px);font-weight:600;line-height:1;color:var(--tem1);letter-spacing:0;}
.h-name b{color:var(--white1);font-weight:600;}
.main-logo{width:100%;max-width:180px;padding:4px;display:flex;align-items:center;justify-items:center;bottom:-2px;}
.main-logo img{width:100%;object-position: center;object-fit: cover;}


/* top menu */
.top-menu{width:100%;display:flex;justify-content:center;}
.menu-container {width:100%;display:flex;justify-content:center;}
.menu {list-style: none;padding: 0;margin: 0;display: flex;flex-wrap:wrap;justify-content:center;}
.menu li a {text-decoration: none;color:#b9b9b9;font-size: 14px;font-weight:300;padding: 4px 12px;display: flex;align-items: center;gap:4px;transition: all 0.3s ease-in-out;}
.menu li a:hover {background: #373b45;color: white;}
.menu > li {position: relative;}
.dropdown-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 15px;
        text-decoration: none;
        color: #333;
        cursor: pointer;
    }
.dropdown-trigger:hover {background-color:#eee;}
.arrow-icon {
        width: 24px;
        height: 24px;
        fill: #777;
        transition: transform 0.3s ease-in-out;
    }
.dropdown-menu {
        list-style: none;
        padding: 0;
        margin: 0;
        position: absolute;
        top: 100%; /* ให้ dropdown เริ่มจากด้านล่างของเมนูหลัก */
        left: 0;
        width: 100%;
        background-color:#1e1e22;
        border-top: none;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px); /* เริ่มต้นด้วยการเลื่อนขึ้นเล็กน้อย */
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out;
        z-index: 1; /* ให้ dropdown อยู่เหนือองค์ประกอบอื่น */
    }

    .dropdown-menu li a {
        display: block;
        padding: 6px;
        text-decoration: none;
        color: #ffffff;
    font-size: 13px;
    line-height: 1;
    border-top: 1px solid #000;
    }

    .dropdown-menu li a:hover {
        background-color: #49505c;
    }

    /* CSS สำหรับแสดง dropdown เมื่อ hover */
    .dropdown:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .dropdown:hover .dropdown-trigger .arrow-icon {
        transform: rotate(180deg);
    }


/* h link */
.h-link{display:flex;gap:8px;justify-content: flex-end;}
.live-button {display: inline-flex;align-items: center;color:#fff;padding:4px 8px;border-radius:0.375rem;text-decoration: none;font-size: 16px;font-weight: 400;transition: background-color 0.3s;}
.live-button-2 {display: inline-flex;align-items: center;color:#0c0c0c;background:var(--tem1);padding:4px 8px;border-radius:0.375rem;text-decoration: none;font-size: 16px;font-weight: 400;transition: background-color 0.3s;}
.live-button svg,.live-button-2 svg {margin-right: 10px;}
.live-button:hover{background:var(--black3);color:#fff !important;}
.live-button-2:hover{background:#c81324;color:#fff !important;}


/* menu mobile*/
.mobile-menu{display: grid;align-items: center;justify-content: end;}
.side-box{z-index:998;position:fixed;right:-200%;top:0;width:100%;max-width:220px;height:100vh;padding:40px 0;overflow-x:auto;box-sizing:border-box;text-align:center;align-items:center;align-content:center;-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;opacity: 0;background:rgb(0 0 0 / 98%);}
#toggle{position:fixed;appearance:none;cursor:pointer;left:-1000px;top:0;}
#toggle + label{z-index:9999;display:none;cursor:pointer;padding:0;margin:0;-webkit-font-smoothing:antialiased;color:#fff;width:40px;height:40px;background:#000;border-radius:50%;cursor:pointer;justify-content:center;align-items:center;}
#toggle + label:hover{color:var(--tem1) !important;}
#toggle + label:after{content:"☰";padding:6px;line-height:1em;font-size:1.8em;text-align:center;}
.container{transition:margin 0.5s cubic-bezier(0.17, 0.04, 0.03, 0.94);padding:0 1%;}
#toggle:checked ~ .side-box{right:0;opacity:1;}
#toggle:checked ~ .container{margin-left:0px;}
#toggle:checked + label{background:none;}
#toggle:checked + label:after{content:"X";}


.side-btn{background:transparent;}
.side-btn:hover{opacity:0.8;}

.menu-side{width:100%;display: grid;grid-template-columns:1fr;grid-gap:1rem;height: 100%;align-content: center;padding:2rem 0;}
.menu-side a{background:transparent;padding:1rem;}
.menu-side a:hover{background:var(--tem1) !important;}

.sub-list{width:100%;position:relative;padding:10px 0;margin:0 auto;display:flex;display:-webkit-flex;-webkit-justify-content:center;justify-content:center;justify-items:center;align-items:center;justify-items:center;flex-wrap:wrap;}
.li-menu-ss{width:100%;position:relative;display:grid;grid-template-columns:1fr;align-content:start;}
.li-menu-ss a:link,.sub-list li a:visited,.sub-list li a:active{width:100%;font-size:.9rem;line-height:1;padding:.5rem 1rem;margin:0 auto;color:white;background:transparent;}
.li-menu-ss a:hover{color:var(--black1) !important;text-shadow:0 2px 3px rgb(0 0 0 / 32%);background:var(--tem2);}


/* footer */
.ft-tx{width:100%;display:block;margin:auto;padding:1rem 3rem;text-align:center;background:#000;}
.fix-bottom{z-index:996;width:100%;position:sticky;bottom:0;padding:0;margin:auto;justify-items:center;display:flex;justify-content:center;gap:.5rem;align-items:flex-end;overflow: hidden;background:var(--white1);box-shadow: 0 -2px 60px 20px rgb(0 0 0 / 6%);}
.fix-bt{padding:.5rem 0;display:grid;}
.area-ft{width:100%;display:block;margin:auto;padding:1rem;text-align:center;background:#000;}
.tx-ft{font-size: 14px;font-weight: 300;line-height: 1.4;color:var(--tem8);}
.tx-ft2{font-size: 13px;font-weight: 400;line-height: 1.2;color:var(--white1);}
.copyright{width:100%;display:grid;padding:1rem 5vw;color:var(--black3);}
.copyright span{font-size:14px;font-size:clamp(12px, .8vw, 14px);}


/* ft area tag */
.category-area{width:100%;display:grid;padding:1rem;}
.tag-area-ft{width:100%;display:flex;margin:auto;padding:6px;gap:6px;justify-content:center;flex-wrap: wrap;}
.btn-tag-ft{display:flex;padding:4px;background:#fff;border-radius:2px;text-align: center;border:1px solid #dcdcdc;color:#000;font-size:13px;line-height:1;font-weight:300;}
.btn-tag-ft:hover{background:var(--tem1);color:#000;box-shadow: inset 0px -1px 2px rgb(255 255 255 / 10%);}
.btn-tag-ft2{display:flex;padding:6px;background:var(--gar3);border-radius:2px;text-align: center;border:1px solid #000;color:#fff;font-size:15px;line-height:1;font-weight:400;}
.btn-tag-ft2:hover{background:var(--tem1);color:#000;border:1px solid #ffdc0a;box-shadow: inset 0px -1px 2px rgb(255 255 255 / 10%);}


.catagory-area-ft{width:100%;display:flex;margin:0 auto 1rem;padding:0;}
.catagory-full{width: 100%;
    -webkit-column-count: 5;
    -moz-column-count: 5;
    column-count: 5;
    -webkit-column-width: 120px;
    -moz-column-width: 120px;
    column-width: 120px;}
.category-list{width:100%;display:grid;}
.anchor-link{display:flex;width: max-content;}
.category-title{display:flex;font-size:14px;color:white;border-radius:16px;padding:3px 12px;line-height:1;}
.anchor-link:hover .category-title{text-decoration: underline;}


/* lazy */
img.yall-loaded img.yall-error{opacity: 1;}
img.slowloading,img.yall_lazy {visibility: hidden !important;opacity: 0;-webkit-transition: all .5s ease-in-out;transition: all .5s ease-in-out;}
img.yall_loaded {visibility: visible !important;opacity: 1;}


/* to top */
#button-to-top {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: rgb(0 0 0 / 80%);
            color: white;
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
            opacity: 0;
			pointer-events: none;
            transition: opacity 0.3s ease;
        }
#button-to-top:hover{background-color:var(--tem5);}
        #button-to-top.show {
            opacity: 1;
            pointer-events: auto;
        }


/* drop link */


/* responsive */
@media only screen and (max-width:1200px){
.video-area{grid-template-columns:repeat(4,1fr);}
}

@media (max-width:1080px){
.video-area{grid-template-columns:repeat(3,1fr);}
.video-area-recommend{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:960px){
.main-page{padding:1rem;}
.play-area{padding:1rem 8vw;}

}

@media (max-width:840px){
.play-area{padding:1rem;}
}

@media (max-width:720px){
.head-r2{display:none;}
#toggle + label{display:grid;}
.video-area{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:520px){
.main-head{z-index: 997;position: sticky;top: 0;background:#09090b;}
.catagory-full{padding:0;}
.live-button svg, .live-button-2 svg{display:none;}
.head-r1-left{grid-gap:0;}
.live-button,.live-button-2{padding:4px;font-size:12px;}
}

@media (max-width:450px){
.head-r1{padding: 12px 6px;grid-gap: 8px;}
}