/** << ======================================^^^=================================== >> */
/**                                         GLOBAL                                     */
/** << ======================================***=================================== >> */
*{font-family: Arial, cursive, sans-serif;}
/* @media (min-width: 1260px){
	.container{max-width: 1248px;}
} */
h1{font-size: 2rem;}
h2{font-size: 1.75rem;}
h3{font-size: 1.5rem;}

.font_b {font-weight: bold;}
.a_black a, .a_black{color: #333; text-decoration: none;}
.a_black a:hover, .a_black:hover{color: #920707;}

.bg-banner{background: linear-gradient(270deg, #70efd1 0, #1bc1c1 100%); color: #fff;}
.bgg-blue{background: linear-gradient(270deg, #70efd1 0, #1bc1c1 100%); color: #fff;}
.bgg-pink{background: linear-gradient(270deg, #e099ec 0, #e34def 100%); color: #fff;}
.bgg-orange{background: linear-gradient(270deg, #ecbe99 0, #eb7f15 100%); color: #fff;}
.bgg-red{background: linear-gradient(270deg, #de95a1 0, #ef4d53 100%); color: #fff;}
.bgg-green{background: linear-gradient(270deg, #92ef70 0, #259d05 100%); color: #fff;}
.bgg-violet{background: linear-gradient(270deg, #ac76e1 0, #5f07af 100%); color: #fff;}
.bgg-black{background: linear-gradient(270deg, #6a6a6a 0, #000000 100%); color: #fff;}
.bgg-gray{background: linear-gradient(270deg, #eeeeee 0, #a2c7ed 100%); color: #fff;}

.btn-df{background: #1dc2c1; color: #fff !important; border-radius: 0.75rem;}
.btn-df:hover{background: #04a7a6;}

/** << ======================================^^^=================================== >> */
/**                                        HEADER                                      */
/** << ======================================***=================================== >> */


.py-home{padding-top: 7rem; padding-bottom: 7rem;}
h1.home{font-size: 6rem;}
h1.home span{
	background: linear-gradient(to right, #00b4d8, #ef4d53, #7b2ff7);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
h2.home{font-size: 4rem;}
h3.home{font-size: 3rem;}
p.home{font-size: 1.25rem;}


.item:hover{box-shadow: 0 4px 8px 0 #ccc;}

header{position: relative; z-index: 1001; padding: 1rem 0;}
header .nav-link{
	color: #000;
	font-weight: 500;
}

#menu{
	position: relative;
}
#menu a:hover{
	background: #f2f2f2;
	color: #222;
	border-radius: 10px;
}
.navbar{
	padding: 0;
}
header .dropdown-menu{
	max-width: 300px;
	min-width: 200px;
}
header .dropdown-menu a{
	overflow: hidden;
	text-overflow: ellipsis;
    white-space: nowrap;
}
#head-logo{
	display: inline-block;
	color: #021038;
	font-size: 1.5rem;
	font-weight: bold;
	text-decoration: none;
}
#head-logo{
	background: linear-gradient(to right, #00b4d8, #ef4d53, #7b2ff7);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
#head-logo:hover{color: #eb601e;}
.avatar-sm{
	width: 24px;
	display: inline-table;
	border: 1px solid #eee;
	border-radius: 50%;
	overflow: hidden;
}
.avatar-sm img{width: 100%;}

/** << ======================================^^^=================================== >> */
/**                                         MAIN                                       */
/** << ======================================***=================================== >> */

#yScreen{
	background: linear-gradient(to bottom, #e5fdfd 0, #f8fffd 100%); 
	position: relative; 
	display: flex;
}
#yBar{
	position: fixed;
	top: 0;
	left: 0;
	height: calc(0px + 100dvh);
	width: 336px;
	display: flex;
	z-index: 10;
}
#yMenu{
	width: 72px;
	height: 100%;
	border-right: 1px solid #dedede;
	text-align: center;
}
#yMenu a{color: #3b3426;}
#yMenu a span.icon{font-size: 1.5rem; padding: 2px 6px 1px; display: inline-block; border-radius: 6px;}
#yMenu a span.title{font-size: 12px; display: block;}
#yMenu a:hover span.title, #yMenu a.active span.title{color: #96919d;}
#yMenu a:hover span.icon, #yMenu a.active span.icon{background: #dedede; color: #c24192;}

#yBarCT{width: 264px; height: 100%;}

.bar-item{color: #666; font-size: 13px; font-weight: 600;}
.bar-item:hover{background: #ededed; border-radius: 6px;}
.bar-item:hover .d-none{display: block!important;}


#yMain{
	width: 100%;
	padding: 12px 8px; 
	margin-left: 336px;
	position: relative;
}
#yMainCT {
	min-height: calc(-8px + 100dvh);
}

#partner{background: linear-gradient(to bottom, #1bc1c1 0, #70efd1 100%); color: #fff;}

.search-container {
	position: relative;
	width: 600px;
	max-width: 100%;
}

.search-container input {
	width: 100%;
	padding: 16px 16px 16px 36px;
	border: 2px solid #8a2be2;
	border-radius: 16px;
	outline: none;
}

.search-container input:focus {
  border-color: #6a0dad; /* tím đậm hơn */
  box-shadow: 0 0 8px rgba(138, 43, 226, 0.6); /* shadow tím */
}

.search-container .search-icon {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 16px;
	color: #8a2be2;
}

.option-group {
  display: flex;
  gap: 20px;
  justify-content: center;
  overflow-x: auto;   /* Cho cuộn ngang */
  padding: 10px;
  scrollbar-width: thin; /* Firefox */
}

.option-group::-webkit-scrollbar {
  height: 8px;
}

.option-group::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}


.option {
	flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.option input[type="radio"] {
  display: none;
}

.option label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.option-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.option input[type="radio"]:checked + label .option-icon {
  transform: scale(1.1);
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.option input[type="radio"]:checked + label .option-text {
	color: #dc3545;
	font-weight: bold;
}

.option-text {
  font-size: 14px;
}

#filter select{text-align: center;}
#filter option{padding:0; text-align: center;}
#main{
	min-height: 80vh;
	padding: 18px 0;
	position: relative;
}

#page{
	margin-top: -38px;
	position: relative;
	z-index: 999;
}
#featured .card a{text-decoration: none;}
#featured .card b{
	font-size: 18px;
	font-weight: bold;
	color: #ed5050;
}
#featured small{color: #888;}
#featured .card:hover{box-shadow: 0 0 6px #0000005d;}
#featured .card:hover h3{color: #3f51b5;}
.btn-theme{
	border-radius: 50rem!important; 
	padding-left: 3rem!important; 
	padding-right: 3rem!important; 
	padding-bottom: 1rem!important;
	padding-top: 1rem!important;
}
#featured img{width: 50%; margin-bottom: 1rem;}
#newsfeed .col-btn{text-align: right;}
#newsfeed h3{font-size: 20px; font-weight: bold;}
#newsfeed h2{font-size: 24px;}

#SearchList .item{margin-bottom: 1.5rem;}
#SearchList .img{border: 1px solid #eee;}
#SearchList h3{font-size: 18px;}
#SearchList h5{font-size: 16px;}
#SearchList h3 a{color: #1a0dab;}
#SearchList p{margin-bottom: .25rem;}
#SearchList .item .link a{color: #006621;}
#SearchList .item .link-more a{color: #1a0dab;}
#mypages h5 a{color: #666; text-transform: uppercase; text-decoration: none;}
#mypages h5 a:hover{color: #a5460f;}
#user-bar h2{font-size: 24px;}

.img-thumb {
    position: relative;
    display: inline-block;
    max-height: 380px;
    overflow: hidden;
    border-radius: 2px;
    -webkit-box-shadow: 0 1px 37px rgba(12, 31, 41, 0.21);
    box-shadow: 0 1px 37px rgba(12, 31, 41, 0.21);
}
.img-thumb img{
	width: 100%;
}
.demo-img {
    -webkit-transition: 0.8s;
    -o-transition: 0.8s;
    transition: 0.8s;
    /* -webkit-transform: translate3d(0,0,0); */
}
.demo-img:hover {
    -webkit-transform: translate3d(0, -36%, 0);
    transform: translate3d(0, -36%, 0);
}
.text-center .pagination{
	margin: 0;
	display: inline-flex;
}

.theme{
	border-radius: .75rem;
	overflow: hidden;
}
.theme .handle {
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	text-align: justify;
	display: none;
	padding: 35px 20px 25px;
	z-index: 1000;
	color: #fff;
}
.theme:hover .handle {
    display: block;
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5));
}
.theme .handle .btn {
	text-align: center;
	padding-left: 0;
	padding-right: 0;
}
.theme .handle .price{font-size: 16px;}
.theme .handle img {
	height: 36px;
	background: #fff;
}

.modal-nm{max-width: 430px;}

#idnav>li>.nav-link{font-size: 20px; font-weight: bold;}
.btn-avatar:hover img{box-shadow: 0 0px 8px 0 #ddd;}
.btn-avatar img {
	width: 28px;
	height: 28px;
	border-radius: 50%;
}
.dropdown-toggle.btn-avatar::after{
	display: none;
}

#Content img{max-width: 100%;}

#form h1{font-size: 32px; line-height: 1;}
#form_item{min-height: 100vh; background: #333; color: #eee;}
#form_item #FrmPage{width: 100%; max-width: 550px; padding: 2rem;}
#form_item #FrmPage .form-control{border-radius: 30px; background: #111; border-color: #222; color: #888;}
#form_item #FrmPage .btn{border-radius: 30px;}

.item-center{ display: flex; -webkit-box-align: center; align-items: center; }
.fea_item h3{font-size: 36px; font-weight: bold; margin-bottom: 1.5rem;}
.fea_item p{font-size: 18px;}

#account{position: relative;}
#account .bar{width: 300px; height:calc(100vh - 75px); background: #333; float: left;}
#account .bar{position: fixed; padding: 2rem 1.5rem;}
#account .bar ul{list-style: none; margin: 0; padding: 0;}
#account .bar li{display: block;}
#account .bar li i{font-size: 24px; margin-right: .5rem;}
#account .bar li a{color: #fff; line-height: 3em; display: block; font-size: 18px; font-weight: bold;}
#account .bar li a:hover{color: #ccc; text-decoration: none;}
#account .main{padding: 2rem; margin-left: 300px; max-width: 1000px;}

.page-lg .pagination{box-shadow: 0 2px 16px 0 #ccc; border-radius: 2.5rem;}
.page-lg a{font-weight: bold; font-size: 1.25rem; padding: 1rem 1.5rem;}
.page-lg li:first-child a{border-radius: 2.5rem 0 0 2.5rem;}
.page-lg li:last-child a{border-radius: 0 2.5rem 2.5rem 0;}

#Support{position: relative;}
#spbar{position: absolute; width: 230px; top: 0; left: 0;}
#spbar a{color: #333;}
#spmain{width: 100%; max-width: 680px; margin-left: 260px;}
#spmain a{color:#007185;}
#spmain a:hover, #spbar a:hover{color: #e47911;}

.line-end::after {
    content: "";
    clear: both;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1px;
    background: #ccc;
}

#feature i{font-size: 80px;}
#feature .card:hover i{color: #d6dce7;}
#feature .card:hover{background: #d6dce7;}
.card.shadow-sm:hover{box-shadow: 0 .25rem .75rem rgba(0,0,0,.175)!important;}

#home-banner{position: relative;}
#home-banner .text-item{position: relative; z-index: 101; font-size: 3rem;}
#home-banner-bg{position: absolute; top:0; z-index: 100; width: 100%; height: 80%; background: linear-gradient(270deg, #70efd1 0, #1bc1c1 100%); z-index: 100; border-radius: 1rem}
#home-banner img{position: relative; z-index: 101;}

#Service{position: relative;}
#ServiceLeft{
	width: 63.6896046852%;
    position: relative;
    -webkit-transform: translateX(-22.9885057471%);
    transform: translateX(-22.9885057471%);
    padding: 300px 15%;
    z-index: 2;
    color: #fff;
}
#ServiceLeft:before {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(270deg, #70efd1 0, #1bc1c1 100%);
    border-radius: 140px;
    transform: rotate(8deg);
    z-index: -1;
}
#ServiceRight{
	width: 62.2254758419%;
    position: absolute;
    right: 0;
    top: 55%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 3;
}

#Service .card-img-overlay{opacity: 0;}
#Service .card-img-overlay:hover{opacity: 1; background: #000000d1; transition: opacity 0.8s ease; color: #fff;}

.scroll-text {
	opacity: 0;
	transform: translateY(50px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-text.active {
	opacity: 1;
	transform: translateY(0);
}

.scroll-effect-left {
	opacity: 0;
	transform: translateX(-100px); /* Move to the left initially */
	transition: opacity 0.9s ease, transform 0.9s ease;
}

.scroll-effect-right {
	opacity: 0;
	transform: translateX(100px); /* Move to the left initially */
	transition: opacity 0.9s ease, transform 0.9s ease;
}

.scroll-effect-left.active, .scroll-effect-right.active {
	opacity: 1;
	transform: translateX(0); /* Move to original position */
}

/** << ======================================^^^=================================== >> */
/**                                        FOOTER                                      */
/** << ======================================***=================================== >> */
footer{
	border-top: 1px solid #e3e7ee;
	position: relative;
	background: #f2f2f2;
}
footer p{margin-bottom: .75rem!important;}
#footer-main{background: #666;}
#footer-main, #footer-main a{color: #888;}
#footer-btm{background: #000; color: #999;}
.icon-social{font-size: 24px;}
.icon-social a{font-size: 24px; color: #666!important; display: inline-block; margin-right: .5rem;}
.icon-social a:hover{color: #000!important;}

.line-end::after {
    content: "";
    clear: both;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1px;
    background: rgba(0,0,0,.1);
}

@media (max-width: 768px){
	
	#yBar{display: none;}
	#yMain{margin-left: 0px;}
	
	.py-home{padding-top: 2rem; padding-bottom: 2rem;}
	h1.home{font-size: 3rem;}
	h2.home{font-size: 2.5rem;}
	h3.home{font-size: 2rem;}
	p.home{font-size: 1.25rem;}
	
	#headlogo img{max-height: 32px;}
	#aboutpage{padding: 1rem;}
	#aboutpage h1{font-size: 24px; font-weight: bold;}
	.mb-btn{color: #fff; display: inline-block;font-size: 20px;}
	#featured .card-body{padding: 0.5rem;}
	#featured img{width: 80%}
	#featured h3{font-size: 20px;}
	#featured p{display: none;}
	#newsfeed .col-btn{text-align: center;}
	#newsfeed h2{font-size: 20px;}
	#newsfeed h3{font-size: 18px;}
	.btn-theme{
		border-radius: 10rem!important; 
		padding-left: 1.5rem!important; 
		padding-right: 1.5rem!important; 
		padding-bottom: 1rem!important;
		padding-top: 1rem!important;
		line-height: 1.2;
	}
	#idnav>li>.nav-link{padding-right: 0;}
	
	.bg-banner h1{font-size: 24px;}
	.bg-banner h3{font-size: 18px;}
	.fea_item h3{font-size: 20px; margin-bottom: 1rem;}
	.fea_item p{font-size: 16px; margin-bottom: .5rem;}
	#account .bar{display: none;}
	#account .main {margin-left: 0; padding: 1rem;}
	#spbar{display: none;}
	#spmain{margin-left: 0;}
	h2{font-size: 24px;}
	.bg-banner a b.text-lg{font-size: 20px;}
	.title-main {
	    font-size: 1.75rem!important;
	    padding-right: 0;
	}	
	.img-thumb {max-height: 240px;}
	.theme .handle {padding: 25px 7px 12px;}
	#support.card{border: none!important;}
	#support.shadow-sm{box-shadow: none!important;}
	#support .card-body{padding: 0!important;}
	
	#ServiceLeft{
	width: 100%;
    position: relative;
    transform: initial;
    padding: 30px 1rem;
	}
	#ServiceLeft:before {
	    position: absolute;
	    left: 0;
	    top: 0;
	    content: "";
	    width: 100%;
	    height: 100%;
	    background: linear-gradient(270deg, #70efd1 0, #1bc1c1 100%);
	    border-radius: 0px;
	    transform: rotate(0deg);
	    z-index: -1;
	}
	#ServiceRight{
		width: 100%;
	    position: relative;
	    transform: initial;
	    padding: 1rem;
	    margin: 0 auto;
	}
	#home-banner .text-item{font-size: 2rem;}
}