/** << ======================================^^^=================================== >> */
/**                                         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;}

h1.title{font-size: 3rem;}
.body{min-height: calc(100vh - 126px);}
/** << ======================================^^^=================================== >> */
/**                                        HEADER                                      */
/** << ======================================***=================================== >> */

#Bar{
	width: 72px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	height: 100vh;
	border-right: 1px solid #dedede;
	background: #fff;
}
#BarCont {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	height: 100vh;
	gap: 1.5rem;
}
#BarTop, #BarBtn {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

#Bar .item a{
	display: inline-block;
	padding: 0.5rem;
	color: #333;
}
#Bar .item a:hover{
	background: #ededed;
	border-radius: 6px;
}
#Bar .item i{font-size: 24px;}

#Main{
	margin-left: 82px;
	margin-right: 10px;
	min-height: 100vh;
	position: relative;
}

#MainSearch{
	background: #fff;
	display: flex;
	z-index: 1040;
}

.search-box{
	padding: 1rem;
	width: 820px;
	max-width: 100%;
	margin: 0 auto;
	border-radius: 0 0 12px 12px; 
}

.search-box.active{
	box-shadow: 0 0 8px rgba(138, 43, 226, 0.6);
	margin-bottom: 1rem;
}

.suggest-box{margin-top: 1rem; display: none;}
.search-box.active .suggest-box{display: block;}


.search-container {
	position: relative;
	width: 800px;
	max-width: 100%;
	margin: 0 auto;
}

.search-container input {
	width: 100%;
	padding: 12px 12px 12px 36px;
	border: 2px solid #6c757d;
	border-radius: 36px;
	outline: none;
}

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

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

#MainBody{
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
}

#MainBody.body-nm{
	max-width: 960px!important;
}

#MainBody.body-sm{
	max-width: 760px!important;
}

#MainTab a{
	color: #666;
	font-weight: bold;
	margin: 0.5rem;
	position: relative;
	text-decoration: none;
	padding: 0.25rem 0;
}

#MainTab a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background: #333;
	transition: width 0.3s ease;
}

#MainTab a.active{
	color: #333;
}
#MainTab a:hover::after, #MainTab a.active::after {
	width: 100%;
}


header{box-shadow: 0 1px 4px 0 rgba(0,0,0,.05); position: relative; z-index: 1041; background: #fff; border-bottom: 1px solid #eee; padding: .5rem 0;}
header.sticky-top{z-index: 1054;}
header .nav-link{
	color: #666;
}
header .nav-link:hover{
	color: #333;
}

#menu{
	position: relative;
}
#menu a{
	padding: .75rem .5rem;
	font-size: 16px;
}
#menu a:hover{
	color: #666;
	text-decoration: underline;
}
.navbar{
	padding: 0;
}
header .dropdown-menu{
	max-width: 360px;
	min-width: 280px;
}
header .dropdown-menu .dropdown-item{
	overflow: hidden;
	text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0.75rem 1.5rem;
    font-weight: bold;
}
header .dropdown-menu a i{font-size: 18px;}
.head-logo{display: inline-block; margin: .375rem 0;}
.head-logo img{max-height: 40px;}

#headsearch input{outline: none;}
#headsearch{border-radius: .375rem; max-width: 600px; min-width: 400px;}
#headsearch .btn{
	background: #fff;
	border: 1px solid #dee2e6;
}
#headsearch .form-control:focus {
  border-color: #ced4da;
  -webkit-box-shadow: none;
  box-shadow: none;
}
#headsearch:hover {
    box-shadow: 0 1px 3px rgba(0,0,0,.15)!important;
}

.busi-avatar{
	height: 108px;
	width: auto;
	max-width: 100%;
	background: #f2f2f2;
}

.avatar-sm{
	width: 24px;
	display: inline-table;
	border: 1px solid #eee;
	border-radius: 50%;
	overflow: hidden;
}
.avatar-sm img{width: 100%;}

#page-menu{
	border: 1px solid #ddd;
	background: #fff;
}
#page-menu ul{
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: justify;
}
#page-menu li{
	display: inline-block;
}
#page-menu li a{
	display: block;
	line-height: 3.6em;
	padding: 0 1rem;
	font-weight: bold;
	color: #000;
	font-size: 18px;
	text-decoration: none;
}
#page-menu li a:hover{
	color: #3f51b5;
}
.page-item{
	padding: 1.5rem 1.25rem;
}
.page-item h3{
	font-size: 20px;
	font-weight: bold;
}
#mb-btn{font-size: 20px; color: #333;padding-left: 0px; padding-right: 5px;}
#menu_mobi{position: fixed; top: 0; bottom: 0; left:0; z-index: 9999; background: #000; width: 100%; display: none;}
#menu_mobi .list-group-item{background: #000; color: #fff;}
/** << ======================================^^^=================================== >> */
/**                                         MAIN                                       */
/** << ======================================***=================================== >> */

.option{
	flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.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;
    background: #a7d8f3;
}

.option-label {color: #333;}

.option-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.option:hover .option-label{font-weight: bold;}

.title-main{font-size: 2.75rem!important; padding-right: 100px;}
.title-meta{font-size: 1.5rem!important;}
.text-desc{font-size: 1rem;}

.h-full{min-height: calc(100vh - 120px)!important;}

#banner{
	position: relative;
}
#aboutpage{
	background: #fff;
	position: relative;
	border-radius: 10px;
	padding: 3rem;
}
.bg-banner{
	background: #1996bc;
	color: #fff;
}
#main{
	min-height: 80vh;
	padding: 18px 0;
	position: relative;
}

#page{
	margin-top: -38px;
	position: relative;
	z-index: 999;
}

.home-item a{display: block; line-height: 1.3; font-size: .9rem;}

#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;}

.news-cat{overflow-x: auto; white-space: nowrap; scrollbar-width: none;}
.news-cat:hover {
  scrollbar-width: thin;
}
.news-cat-box{display: flex; gap: 7px;}
.news-cat-item{
	background: #fff;
	padding: .25rem .5rem;
	color: #333;
	border-radius: 3px;
}
.news-cat-item.active{background: #0d6efd; color: #fff;}

#src .item img{
  filter: grayscale(70%);
  transition: filter 0.8s ease;
}

/* Hiệu ứng khi hover vào ảnh */
#src .item:hover img {
  filter: grayscale(0%);
}

#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: flex;
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5));
}
.theme .handle .btn {
	width: 42px;
	height: 42px;
	text-align: center;
	padding-left: 0;
	padding-right: 0;
	font-size: 125%;
}
.theme .handle .price{font-size: 20px;}
.theme .handle img {
	height: 42px;
	background: #fff;
}

#idnav>li>.nav-link{font-size: 22px; font-weight: bold; padding:.5rem .75rem;}
.btn-avatar:hover img{box-shadow: 0 0px 8px 0 #ddd;}
.btn-avatar img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid #eee;
}
#idnav .dropdown-toggle::after{
	display: none;
}

.dropdown.mng .dropdown-menu{min-width: 360px;}
.dropdown.mng .dropdown-item{white-space: normal!important; font-weight: normal;}
.dropdown.mng .dropdown-item i{
	font-size: 28px!important;
	margin-top: .375rem;
	color: #555;
}
.dropdown.mng .dropdown-item small{line-height: 1.1; display: block; color: #888;}

#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{top: 80px;}
#account #bar a{margin-bottom: .5rem; border-radius: 2rem; color: #6f777c; font-size: .875rem; font-weight: bold;}
#account #bar a{padding-top: 10px; padding-bottom: 10px;}
#account #bar a i{margin-right: .75rem; font-size: 20px;}
#account #bar a.active{background: #e8f0fe; color: #1967d2;}


.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: 100px; color: #999;}
#feature .card:hover i{color: #05285e;}
.card.shadow-sm:hover{box-shadow: 0 .125rem .5rem rgba(0,0,0,.175)!important;}

.h100{min-height: calc(100vh - 110px);}

#Filter{min-height: calc(100vh - 110px);}
#Filter h1{font-size: 1.75rem; font-weight: bold;}
.f-header .item-rt{color: #666;}

#page-bar{
	position: fixed;
	left: 72px;
	top: 0;
	height: 100vh;
	width: 264px;
	border-right: 1px solid #dedede;
}
#page-bar #name{font-size: 22px; font-weight: bold; line-height: 1.2; margin-bottom: .5rem;}
#FpMain{margin-left: 336px; min-height: 100vh;}
#FpCont{width: 100%; max-width: 960px; margin: 0 auto;}


.nav-insite{color: #000; display: inline-block; background: #f2f2f2; padding: .5rem 1rem; margin: .25rem; border-radius: .5rem;}
.nav-insite.active{background: #666; color: #fff;}

#fpad-bar{height: 100vh; width: 288px; position: fixed; left: 72px; top: 0; border-right: 1px solid #dedede; overflow: hidden;}
#fpad-bar:hover{overflow-y: auto;}
#fpad-bar .link{color: #666; font-weight:bold; display: block; padding: .5rem; border-radius: 3px;}
#fpad-bar .link.active{background: #ebf5ff; color: #222222!important; }

#fpad-main{max-width: 920px; margin: 0 auto;}
#fpad-main.page-sm{max-width: 680px!important;}

#ProdSearch.swiper{padding: 20px 0!important;}
#ProdSearch.swiper-backface-hidden .swiper-slide{transform: none;}
.prod-box{position: relative; min-height: 250px;}
.prod-item{position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: .5rem; z-index: 1;}
.prod-item:hover{top: -20px; bottom: -20px; left: 0; right: -40px; padding: 7px; background: #dedede; z-index: 9}

.mb-0 .pagination{margin-bottom: 0!important;}

/** << ======================================^^^=================================== >> */
/**                                        FOOTER                                      */
/** << ======================================***=================================== >> */
footer{
	border-top: 1px solid #e3e7ee;
	position: relative;
	background: #f5f5f5;
}
footer p{margin-bottom: .75rem!important;}
#footer-main, #footer-main a{color: #000;}
#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);
}

.saleoff{background: #df7d0a; display: inline-block; color: #fff; font-size: 14px; padding: 0 .5rem; line-height: 28px; position: relative;}
.saleoff{border-radius: 3px 0 0 3px;}
.saleoff::after{
	content: '';
    width: 0;
    height: 0;
    border-right: 10px solid transparent;
    border-top: 28px solid;
    color: #df7d0a;
    position: absolute;
    top: 0;
    right: -10px;
}

.hottip{background: #232F3E; display: inline-block; color: #fff; font-size: 12px; padding: 0 .25rem; line-height: 22px; position: relative;}
.hottip{border-radius: 3px 0 0 3px;}
.hottip .text-col{color: #F69931;}
.hottip::after{
	content: '';
    width: 0;
    height: 0;
    border-right: 11px solid transparent;
    border-top: 22px solid;
    color: #232F3E;
    position: absolute;
    top: 0;
    right: -10px;
}

.statitem{
	border: 1px dashed #ccc;
	padding: 0.25rem 0.75rem;
	border-radius: 0.5rem;
	text-align: center;
}
.statitem:hover{
	border: 1px solid #ccc;
	background: #f5f5f5;
	cursor: pointer;
}

#Theme .card-body{position: absolute; width: 100%; bottom: 0px;}
#Theme .card-body a{display: none;}
#Theme .card:hover .card-body a{display: block;}
#Theme .card:hover .card-body{background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));}

#About .t1{font-size: 2rem;}
#About .t2{font-size: 3rem; line-height: 1.2}
#About .desc{font-size: 1.5rem; line-height: 1.3}


@media (max-width: 768px){
	
	#Bar{width: 100%; height: 56px; bottom: 0; z-index: 1040; top: auto;}
	#BarCont{flex-direction: row; gap: 1rem; align-items: unset;}
	#BarTop, #BarBtn {flex-direction: row; gap: 1rem;}
	.item-logo{display: none;}
	#Bar .item i {font-size: 20px;}
	#Main, #FpMain{
		margin-left: 1rem;
		margin-right: 1rem;
		padding-bottom: 62px!important;
	}
	
	header{padding: .375rem 0;}
	h1.title{font-size: 2rem;}
	#headsearch{min-width: auto;}
	#headsearch .btn {background: #ffffff; border: 1px solid #ddd; border-left: none;}
	.head-logo{margin: 0.75rem 0;}
	.head-logo img{max-height: 34px;}
	#aboutpage{padding: 1rem;}
	#aboutpage h1{font-size: 24px; font-weight: bold;}
	header .dropdown-menu{width: 100%;}
	
	#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;}
	
	#fpad-bar{width: 100%; min-height: auto; padding-bottom: .75rem; left: 0; position: relative; height: auto;}
	.mb-btn{color: #fff; display: inline-block;font-size: 20px;}
	.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;}
	
	#About .t1{font-size: 1.5rem;}
	#About .t2{font-size: 2rem;}
	#About .desc{font-size: 1.3rem;}

	h2{font-size: 24px;}
	
	#head-id .btn{font-size: 18px;}
	
	.bg-banner a b.text-lg{font-size: 20px;}
	
	.title-main {font-size: 1.75rem!important; padding-right: 0;}
	.line-e::after {display: none;}
	
	#page-bar{
		border: 1px solid #0000002d; 
		border-radius: .375rem; 
		padding: 1rem; 
		box-shadow: 0 0.125rem 0.25rem rgba(var(--bs-body-color-rgb),.075)!important;
		position: unset;
		width: auto;
		height: auto;
		margin: 1rem;
	}
	#page-bar #name{font-size: 20px;}
	.busi-avatar{height: 68px;}
}