@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
:root {
	--body-bg: #101218;
	--text-base: #ffffffdb;
	--primary-color: #FFD875;
	--border-color: #1f2127;
}
html{ margin: 0; padding: 0; position: relative;}
body{ background-color: var(--body-bg); font-family: "Raleway", sans-serif; font-size: 16px; line-height: 1.7; font-weight: 400; color: var(--text-base); margin: 0px; padding: 0px; -webkit-text-size-adjust: none; position: relative;}
h1, h2, h3, h4, h5, h6{ font-weight: 500;}
a{ color: #fff; text-decoration: none !important; outline: none; -moz-outline: none;}
a:hover{ color: var(--primary-color); text-decoration: none;}
a:active, a:focus{ outline: none;}
p{line-height: 1.7;}
.block{ display: block;}
.highlight, .text-primary{ color: var(--primary-color) !important;}
strong{ font-weight: 600;}
.primary-color{ color: var(--primary-color) !important;}
.ulclear{ list-style: none; margin: 0; padding: 0;}
.badge{font-weight:500;}
.transition, .btn, .cate-image img, .provider .flex-link .button-play{ transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s;}
.no-select, #menu, .grid-item li .thumb{ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.text-base{line-height: 1.4em;}
.heading-xl{font-size: 3em; font-weight: 600; line-height: 1.5; margin-bottom: 2.5rem; color: #fff;}
.heading-lg{font-size: 2em; font-weight: 600; line-height: 1.5; margin-bottom: 2.5rem; color: #fff;}
.heading-sm{font-size: 1.3em; font-weight: 600; line-height: 1.5; margin-bottom: 1rem; color: #fff;}
.heading-xs{font-size: 1.15em; font-weight: 600; line-height: 1.5; margin-bottom: 1.5rem; color: #fff;}
.heading-md{font-size: 1.6em; font-weight: 600; line-height: 1.5; margin-bottom: 1.5rem; color: #fff;}
.container{width: 1400px; max-width: 100%;}
.line-flex{ display: inline-flex; align-items: center; gap: .5rem;}
/* button */
.btn{ border: none; box-shadow: none !important}
.btn:active, .btn:focus{ box-shadow: none !important;}
.btn-primary{color: #000 !important; background-color: var(--primary-color) !important;}
.btn-secondary{ background-color: #4e5266 !important; color: #fff !important;}
.btn-gradient{ background: rgb(254,207,89); background: linear-gradient(39deg, rgba(254,207,89,1) 0%, rgba(255,241,204,1) 100%); color: #000 !important; box-shadow: 0 5px 10px 5px rgba(255, 216, 117, 0.17) !important;}
.btn-gradient:hover{ box-shadow: 0 10px 10px 5px rgba(255, 216, 117, 0.17) !important;}
.btn-radius{ border-radius: 80px; padding-left: 30px; padding-right: 30px;}
.btn{ font-size: 16px; font-weight: 600; padding: .85rem 1.2rem; border-radius: .6rem; display: inline-flex; gap: 1rem; align-items: center; justify-content: center;}
.btn i{ font-weight: inherit !important;}
.btn-tele{ color: #fff; background-color: #2f8eeb !important;}
.btn-sm{ font-size: 13px; padding: .6rem .9rem; border-radius: .4rem;}
.btn-lg{ font-size: 20px; font-weight: 600; padding: 1rem 1.6rem;}
.btn-xl{ font-size: 24px; font-weight: 600; padding: 1.3rem 2rem; border-radius: 1rem;}
.btn-outline{ border: 1px solid #fff3 !important; color: #fff !important;}
.btn-outline.btn-light{ border: 1px solid #fff !important;}
.btn-lg .icon-btn{ width: 24px; height: 24px;}
.btn-xl .icon-btn{ width: 32px; height: 32px;}
.btn-lg.btn-radius{ padding-left: 2rem; padding-right: 2rem;}
.btn-xl.btn-radius{ padding-left: 2.4rem; padding-right: 2.4rem;}
.btn-radius{ border-radius: 3rem;}
.btn i{font-weight: normal;}
.icon-16{ font-size: 16px;}
.icon-20{ font-size: 20px;}
.img-tiny{ width: 24px; height: 24px; border-radius: 4px;}
.icon-inline{ vertical-align: bottom; margin: 0 4px;}
.flat-icon{ width: 20px; height: 20px;}
.flat-icon svg{ width: 100%; height: 100%;}
/* layout */
.bg-marquee{ background-image: url(/bg-grid.webp); background-repeat: repeat; background-position: center center; animation: marquee 150s infinite linear; position: absolute; top: 0; left: 0; right: 0; height: 80vh; mask-image: linear-gradient(to top, transparent 0, black 100%);}
#logo{ display: inline-block;}
#logo img{ width: auto; height: 50px;}

#fullwide{ position: relative; width: 100%; overflow-x: hidden; min-height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 3rem; padding-top: 20vh;}
#fly_center{ position: relative; z-index: 3; width: 100%; max-width: 920px; margin: 0 auto; background-color: #064487;border-radius: 1.4rem; display: flex; flex-direction: column;}
.on_top{ padding: 2rem 2.5rem; display: flex; flex-direction: column; gap: 1.5rem;}
.on_bottom{ background-color: #0006; padding: 2rem 2.5rem; font-size: .9em; display: flex; flex-direction: row-reverse; gap: 2rem; align-items: flex-start; border-radius: 0 0 1.4rem 1.4rem;}
.browser{ display: flex; align-items: stretch; justify-content: space-between; gap: .6rem; padding: .6rem; border: 1px solid #fff1; background-color: #fff1; border-radius: 1rem;}
.browser .br_input{ flex-grow: 1; height: 60px; padding: 0 1.2rem; background-color: #fff; border-radius: .5rem; font-size: 1.4em; font-weight: 600; display: flex; align-items: center; letter-spacing: 1px;}
.browser .br_input a{ color: #000;}
.browser .br_submit{ height: 60px; min-width: 80px; padding: 0 1.5rem; display: flex; align-items: center; justify-content: center; font-size: 1.3em; background-color: var(--primary-color); color: #000; border-radius: .5rem;}
.browser .br_submit span{ display: block; margin-right: .6rem; font-weight: 600; font-size: .9em;}
.status{ font-size: .9em; color: #ffffffdb; display: flex; align-items: center; justify-content: space-between;}
.redirect .form-switch{ padding: 0;}
.redirect .form-switch .form-check-input{ transform: scale(1.2); transform-origin: left center; margin: 0;}
.redirect .form-check{ margin: 0; min-height: auto;}
.time_update .text-green{ color: greenyellow;}
.notice{ color: #fff; flex-grow: 1; display: flex; align-items: flex-start; flex-direction: column; gap: 1rem;}
.notice .social-list{ flex-shrink: 0; display: flex; align-items: center; gap: .3rem;}
.notice .social-list .item{ font-size: 16px !important; flex-shrink: 0; line-height: 1; padding: .6rem; border-radius: .5rem; min-width: 40px; text-align: center;}
.notice .social-list .item span{ font-size: 14px;}
.notice .text{ flex-grow: 1;}
.kol{ flex-shrink: 0; color: #fff; display: flex; border: 1px solid var(--primary-color); border-radius: .6rem; padding: .5rem .9rem;}
.fa-telegram{ color: #3184de !important;}
#about{ position: relative; z-index: 3; font-size: 1em; line-height: 1.7; color: #cfcfcf; padding: 0 2.5rem 50px; max-width: 920px;}
#about a{ color: #fff;}
#about a:hover{ color: var(--primary-text);}
#about p{ line-height: 1.7; margin-bottom: 1rem;}
#about b{ font-weight: 600;}
#about ul{ padding-left: 1rem;}
#about .heading-xs{ margin-bottom: .5rem; font-size: 1.1em; color: var(--primary-color);}
#news{ max-width: 920px; margin: 0 auto; padding: 2rem 2.5rem; background-color: #214b2f; border-radius: 1.2rem; position: relative; z-index: 3;}
#news .news-heading{ margin-bottom: 1rem; display: flex; align-items: center; gap: 1rem;}
.news-list{ display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; position: relative;}
.news-list .item{ display: flex; flex-direction: column; gap: .75rem; font-size: 14px; color: #fff8;}
.news-list .item .news-thumb{ position: relative; width: 100%; padding-bottom: 56%; height: 0; display: block; border-radius: .6rem; overflow: hidden; border: 1px solid #fff4; box-shadow: 0 10px 10px #0002;}
.news-list .item .news-thumb:hover{ border-color: var(--primary-color);}
.news-list .item .news-thumb img{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover;}
.news-list .item .news-title{ font-size: 1.1em; line-height: 1.65; font-weight: 500; margin-bottom: .5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal !important;}
#news .item-more{ font-size: 13px;}

@keyframes marquee {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 0 -1675px;
	}
}