@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: #229ED9;
	--border-color: #1f2127;
}
html{ margin: 0; padding: 0; position: relative;}
body{ background-color: var(--body-bg); background-image: url(../images/bg.webp); background-repeat: repeat; background-position: center center; animation: marquee 100s infinite linear; 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;  background-color: #000;}
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: 1em; 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; 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%;}
.gcse-searchresults {
    font-size: 16px; /* Kích thước font của kết quả tìm kiếm */
    line-height: 1.5; /* Khoảng cách giữa các dòng */
}

.gcse-searchresults .gsc-webResult {
    width: 40%; /* Chiều rộng của kết quả tìm kiếm */
    margin: 0 auto; /* Căn giữa các kết quả */
}
/* layout */
#logo{ display: inline-block;}
#logo img{ width: auto; height: 101px;}

#fullwide{ position: relative; width: 100%; overflow-x: hidden; min-height: 100vh; display: flex; justify-content: center; align-items: center;}
#fly_center{ position: relative; z-index: 3; width: 96%; max-width: 760px; margin: 3rem auto; background-color: #121212;border-radius: 1.4rem; display: flex; flex-direction: column;}
.on_top{ padding: 2.5rem 2.5rem 2rem; 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;}
.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.2rem; 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;  background: #fff; color: #222;}
.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;}


@keyframes marquee {
	0% {
	  background-position: 0 0;
	}
  
	100% {
	  background-position: 0 -1675px;
	}
  }
  @media screen and (max-width: 1199px){
	
}
@media screen and (max-width: 800px){
	body{ font-size: 15px;}
	.on_bottom{ flex-direction: column; gap: 1.5rem; justify-content: center; align-items: center;}
	.notice{ flex-direction: column; align-items: center; gap: 1.2rem;}
	.notice .text{ text-align: center;}
	.redirect{ display: none;}
	.on_top{ padding: 2rem}
}
@media screen and (max-width: 560px){
	#logo img{ height: 90px;}
	#fly_center{ border-radius: 1rem; margin: 2rem auto;}
	.browser{ flex-direction: column;}
	.browser .br_input{ justify-content: center; font-size: 1.2em;}
	.heading-md{ font-size: 1.5em;}
}
@media screen and (max-width: 479px){
	.on_bottom{ padding: 1.2rem;}
	.notice .social-list .item{ font-size: 14px; padding: .4rem; min-width: 30px;}
}
@media screen and (max-width: 360px){
}
@media screen and (max-width: 320px){
}
.hide {
	display: none!important;
}
.ogrange {
color: #229ED9; font-weight: bold;
}
.align-center {
	text-align: center;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }