/* ADD FONT */

/* bengali */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Noto Sans", sans-serif;
}

/* END FONT */

:root {
	--colorPrimary: #0a1426;
	--colorWhite: #fff;
	--colorWhite2: #cacbce;
	--colorWhite3: #f3f3f3;
	--grey: #84888f;
	--grey2: #aeb2ba;
	--grey3: #5e646d;
	/* text post content */
	--green: #026d07;
	--green2: #ffcf01;
	--green3: #67c624;
	--green4: #1e9c74;
	--green4: #ffdc46;
	/* --blue: #151e61; */
	--blue: #26292d;
	--blue2: #101a2c;
	--blue3: #eff6f8;
	--blue4: #0e1650;
	--black: #000000;
	--black2: #2a3952;
	--silver: #dae1e3;
	--red: #ed1414;
}

html {
	scroll-behavior: smooth;
}

a {
	text-decoration: none;
}

ul {
	list-style: none;
}

.app {
	width: 100%;
	position: relative;
}

#app.arabic * {
	direction: rtl !important;
}

article img.cta {
	width: auto;
	height: auto;
	margin: auto;
	display: block;
}

article img:not(.cta) {
	max-width: 1280 !important;
	width: 95% !important;
	height: auto !important;
	display: block !important;
	margin: auto !important;
}

.container {
	max-width: 1540px;
	width: 85vw !important;
	margin: 0 auto;
}

img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: relative;
}

.color-white {
	color: var(--colorWhite);
}

.color-black {
	color: var(--black) !important;
}

body {
	background-color: white;
}

.mb-10 {
	margin-bottom: 10px;
}

.d-mobile {
	display: none;
}

@media screen and (max-width: 768px) {
	.d-desktop {
		display: none;
	}

	.d-mobile {
		display: block !important;
	}
}

/*---------------------------------
LOADMORE BUTTON - DAM
---------------------------------*/

.loadmore {
	width: 120px;
	height: 40px;
	line-height: 40px;
	background: var(--green2);
	border-radius: 5px;
	margin-top: 23px;
}

.loadmore a {
	color: var(--colorWhite);
}

.text-center {
	text-align: center;
}

/*------------- DUCANH CUSTOMS ---------------*/

.menu-desktop {
	width: 85vw;
	margin: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1540px;
	/* margin-top: 15px; */
}

.logo-img {
	/*  filter: hue-rotate(-30deg); */
}

.menu-desktop .toggles-wrapper {
	display: flex;
	height: 100%;
	align-items: center;
}

.menu-desktop .toggles-wrapper label i:hover {
	color: var(--green2);
}

.menu-desktop .toggles-wrapper .menu-link,
.wrap_item_header_center .menu-link {
	font-size: 16px !important;
}

.wrap_item_header_center .menu-link.active {
	color: var(--green2);
}

.menu-desktop .toggles-wrapper .menu-link:hover,
.wrap_item_header_center .menu-link:hover {
	color: var(--green2);
}

.menu-desktop .toggles-wrapper .btnRegister {
	text-align: center;
	height: 2.5rem;
	color: black;
	font-size: 16px;
	display: flex;
	align-items: center;
	padding: 22px;
	cursor: pointer;
	font-weight: bold;
	background: var(--green2);
	border-radius: 5px;
	-webkit-animation: heartbeat 1.5s ease-in-out infinite both;
	animation: heartbeat 1.5s ease-in-out infinite both;
}

@media screen and (max-width: 600px) {
	.menu-desktop .toggles-wrapper .btnRegister {
		font-size: 14px !important;
		padding: 5px 6px;
	}
}

@-webkit-keyframes heartbeat {
	from {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-transform-origin: center center;
		transform-origin: center center;
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}

	10% {
		-webkit-transform: scale(0.91);
		transform: scale(0.91);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}

	17% {
		-webkit-transform: scale(0.98);
		transform: scale(0.98);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}

	33% {
		-webkit-transform: scale(0.87);
		transform: scale(0.87);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}

	45% {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
}

@keyframes heartbeat {
	from {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-transform-origin: center center;
		transform-origin: center center;
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}

	10% {
		-webkit-transform: scale(0.91);
		transform: scale(0.91);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}

	17% {
		-webkit-transform: scale(0.98);
		transform: scale(0.98);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}

	33% {
		-webkit-transform: scale(0.87);
		transform: scale(0.87);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}

	45% {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
}

@media screen and (max-width: 530px) {

	.menu-desktop .toggles-wrapper .menu-link,
	.wrap_item_header_center .menu-link {
		font-size: 16px !important;
	}
}

@media screen and (min-width: 991px) {
	.d-lg-none {
		display: none;
	}

	.wrap_menu_mobile_new {
		display: none !important;
	}
}

/*
MENU MOBILE
*/
.wrap_menu_mobile_new {
	width: 70vw;
	height: 100vh;
	position: fixed;
	z-index: 901;
	top: 0;
	right: -70vw;
	background-color: var(--black);
	transition: all 0.5s;
	display: block;
}

.overlay_menu_mobile {
	position: fixed;
	z-index: 900;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5);
	top: 0;
	left: 0;
	display: none;
}

input[id="openMenuMobile"]:checked~.wrap_menu_mobile_new {
	display: block !important;
	transform: translateX(-100%);
	transition: all 0.5s;
}

input[id="openMenuMobile"]:checked~.overlay_menu_mobile {
	display: block !important;
}

.wrap_menu_mobile_new .menu_mobile_new {
	position: relative;
	width: 100%;
	height: 100%;
}

.wrap_menu_mobile_new .menu_mobile_new .close_menu_mobile {
	font-size: 1.8rem;
	color: var(--green2);
	position: absolute;
	top: 20px;
	right: 30px;
}

.wrap_menu_mobile_new .menu_mobile_new .content_menu_mobile {
	width: 100%;
	height: 100%;
	padding-top: 2rem;
	display: flex;
	flex-direction: column;
	align-content:center
}

.wrap_menu_mobile_new .menu_mobile_new .content_menu_mobile .menu-link {
	padding-left: 20px;
	margin-bottom: 30px;
	border-bottom: 1px solid var(--green2);
	padding-bottom: 10px;
	font-size: 1rem;
}
#menu-menu-2 li a{
	color:white;
}
/*---------------------------------------------*/

/*============================================
    SELECT LANGUAGE
=============================================*/

.wrap-change-language {
	position: fixed;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	z-index: 1000;
}

.wrap-change-language .change-language .language-item {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	margin: 10px 0;
	cursor: pointer;
	border: 1px solid var(--grey);
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
}

.wrap-change-language .change-language .language-item.active,
.wrap-change-language .change-language .language-item:hover {
	background-color: var(--blue4);
	border: none;
}

.wrap-change-language .change-language .language-item .wrap-avt-language {
	width: 25px;
}

.wrap-change-language .change-language .btn-choose-language {
	display: none;
}

@media screen and (max-width: 768px) {
	.wrap-change-language {
		position: fixed;
		right: 0px;
		transform: translate(100%, -50%);
		-webkit-transform: translate(100%, -50%);
		-moz-transform: translate(100%, -50%);
		-ms-transform: translate(100%, -50%);
		-o-transform: translate(100%, -50%);
		transition: all 0.4s;
		-webkit-transition: all 0.4s;
		-moz-transition: all 0.4s;
		-ms-transition: all 0.4s;
		-o-transition: all 0.4s;
	}

	.wrap-change-language .change-language .btn-choose-language {
		position: absolute;
		top: 0;
		width: 100%;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		left: -100%;
		border-radius: 5px 0px 0px 5px;
		-moz-border-radius: 5px 0px 0px 5px;
		-webkit-border-radius: 5px 0px 0px 5px;
		-ms-border-radius: 5px 0px 0px 5px;
		-o-border-radius: 5px 0px 0px 5px;
		font-size: 18x;
		color: var(--blue3);
		background-color: var(--grey);
		border: 1px solid var(--grey);
		cursor: pointer;
	}

	.wrap-change-language .change-language .language-item {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 40px;
		height: 40px;
		cursor: pointer;
		border: none;
		border-radius: 0;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		-ms-border-radius: 0;
		-o-border-radius: 0;
		background-color: white;
		margin: 0;
	}

	.wrap-change-language .change-language .language-item:not(:first-child) {
		margin-bottom: 5px;
	}

	.wrap-change-language .change-language .language-item:not(:last-child) {
		border-bottom: 1px solid var(--blue3);
	}

	.wrap-change-language .change-language .language-item .wrap-avt-language {
		width: 20px;
	}

	.wrap-change-language .change-language .language-item:hover {
		background-color: var(--grey);
	}

	input[id="open-choose-language"]:checked~div.wrap-change-language {
		transform: translate(0%, -50%);
		-webkit-transform: translate(0%, -50%);
		-moz-transform: translate(0%, -50%);
		-ms-transform: translate(0%, -50%);
		-o-transform: translate(0%, -50%);
		transition: all 0.4s;
		-webkit-transition: all 0.4s;
		-moz-transition: all 0.4s;
		-ms-transition: all 0.4s;
		-o-transition: all 0.4s;
	}
}

/*====================================
SCROLL TO TOP
===================================*/

.scrollToTop {
	position: fixed;
	z-index: 998;
	bottom: 50px;
	right: 2vw;
	background-color: var(--green2);
	width: 45px;
	height: 45px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--colorWhite);
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	font-size: 16px;
}

/*============================================
OVERLAY PAGE
============================================*/

.overlay-page {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.02);
	z-index: 999;
	display: none;
}

input[id="open-choose-language"]:checked~label.overlay-page {
	display: block;
}

/*==============================================
HOME
==============================================*/
/* ========
SLIDER HEADER
======== */
.wrap_slider-container {
	overflow: hidden;
	width: 100%;
	position: relative;
	height: 100%;
}

.slider-container {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: inline-flex;
	overflow: hidden;
	transform: translateX(0);
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	-o-transform: translateX(0);
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
}

.slider-container .wrap_control {
	position: absolute;
	z-index: 2;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
}

.slider-container .wrap_control .control {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--colorWhite2);
	color: var(--black);
}

.slider-container .wrap_control.wrap_control-left {
	left: 10px;
}

.slider-container .wrap_control.wrap_control-right {
	right: 10px;
}

.slider-container .slide {
	position: relative;
	z-index: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	display: none;
	transition: all 2s;
}

.slider-container .slide.active {
	display: flex;
	-webkit-animation: fade-in-fwd 1s cubic-bezier(0.39, 0.575, 0.565, 1) both;
	animation: fade-in-fwd 1s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@-webkit-keyframes fade-in-fwd {
	0% {
		-webkit-transform: translateZ(-80px);
		transform: translateZ(-80px);
		opacity: 0.5;
	}

	100% {
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		opacity: 1;
	}
}

@keyframes fade-in-fwd {
	0% {
		-webkit-transform: translateZ(-80px);
		transform: translateZ(-80px);
		opacity: 0.5;
	}

	100% {
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		opacity: 1;
	}
}

/* ===== END SLIDER HEADER =====*/

header {
	width: 100%;
	background-color: var(--black);
	height: auto;
	display: flex;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
}

header .logo-img {
	width: 100px;
}

@media screen and (max-width: 530px) {
	header .logo-img {
		width: 100px;
	}
}

.wrap-noti-header {
	width: 100%;
	padding: 25px 0;
	background-color: var(--colorPrimary);
}

.wrap-noti-header .wrap-noti-item {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
}

@media screen and (max-width: 768px) {
	.wrap-noti-header .wrap-noti-item {
		grid-template-columns: repeat(2, 1fr);
		grid-column-gap: 10px;
		grid-row-gap: 20px;
	}
}

.wrap-noti-header .wrap-noti-item .noti-item {
	width: 100%;
	padding: 0px 20px;
	cursor: default;
}

.wrap-noti-header .wrap-noti-item .noti-item:not(:last-child) {
	border-right: 1px solid var(--grey);
}

@media screen and (max-width: 768px) {
	.wrap-noti-header .wrap-noti-item .noti-item:not(:last-child) {
		border-right: none;
	}
}

.wrap-noti-header .wrap-noti-item .noti-item .noti-name {
	color: var(--colorWhite);
	font: 13px;
}

.wrap-noti-header .wrap-noti-item .noti-item .noti-content {
	margin-top: 3px;
	color: var(--grey);
	font-size: 11px;
}

.wrap-noti-header .wrap-noti-item .noti-item .noti-content .noti-status {
	padding-left: 18px;
	position: relative;
}

.wrap-noti-header .wrap-noti-item .noti-item .noti-content .noti-status.up {
	color: var(--green);
}

.wrap-noti-header .wrap-noti-item .noti-item .noti-content .noti-status.down {
	color: var(--grey);
}

.wrap-noti-header .wrap-noti-item .noti-item .noti-content .noti-status.up::before {
	position: absolute;
	content: "";
	width: 15px;
	height: 15px;
	left: 0px;
	background-image: url("../images/icon/arrow_up.svg");
	background-size: 9px 15px;
	background-position: center;
	background-repeat: no-repeat;
}

.wrap-noti-header .wrap-noti-item .noti-item .noti-content .noti-status.down::before {
	position: absolute;
	content: "";
	width: 15px;
	height: 15px;
	left: 0px;
	background-image: url("../images/icon/arrow_down.svg");
	background-size: 9px 15px;
	background-position: center;
	background-repeat: no-repeat;
}

/*===========
MENU
===========*/

header .logo h3 {
	text-align: center;
	font-size: 30px;
	color: var(--green2);
	padding: 20px 0;
}

header>.logo h3 {
	padding: 30px 0 0 0;
}

.wrap-main-menu {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 120px;
}

.wrap-main-menu .logo {
	color: var(--blue);
	display: none;
}

.wrap-main-menu .logo h3 {
	font-size: 25px;
}

.wrap-main-menu .menu-content {
	width: 100%;
	display: flex;
	padding: 10px 0;
}

@media screen and (max-width: 991px) {
	header>.logo h3 {
		display: none;
	}

	.wrap-main-menu .logo {
		display: block;
	}

	.wrap-main-menu .menu-content {
		display: none;
	}
}

.wrap-main-menu .menu-content .menu-item {
	padding: 0px 10px;
	text-align: center;
}

.wrap-main-menu .menu-content .menu-item .menu-link {
	color: var(--blue2);
	font-weight: bold;
	font-size: 16px;
}

.wrap-main-menu .menu-content .menu-item .menu-link.active {
	color: var(--green2);
}

.wrap-main-menu .menu-content .menu-item .menu-link:hover {
	color: var(--green2);
}

.wrap-main-menu .wrap-button-nav .menu-content {
	display: flex;
}

.wrap-main-menu .wrap-button-nav .menu-content .menu-item .menu-link {
	font-size: 20px;
}

/*=====================
MENU CONTENT RESPONSIVE
======================*/

.wrap-menu-content-responsive {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--black);
	z-index: 10001;
	flex-direction: column;
	align-items: center;
	overflow: scroll;
	display: flex;
	height: 0;
	transition: all 0.4s;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-o-transition: all 0.4s;
}

input[id="openMenu"]:checked~div.wrap-menu-content-responsive {
	height: 100vh;
	transition: all 0.4s;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-o-transition: all 0.4s;
}

.wrap-menu-content-responsive .logo {
	color: var(--green2);
	font-size: 30px;
	margin-top: 80px;
	font-weight: bold;
}

.wrap-menu-content-responsive .menu-content-respon {
	width: 100%;
	display: grid;
	grid-row-gap: 15px;
	margin-top: 70px;
}

.wrap-menu-content-responsive .menu-content-respon .menu-link-respon {
	width: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
}

.wrap-menu-content-responsive .menu-content-respon .menu-link-respon:hover {
	color: var(--green2);
}

.wrap-menu-content-responsive .search-respon {
	width: 100%;
	position: relative;
	margin-top: 70px;
}

.wrap-menu-content-responsive .search-txt-respon {
	width: 100%;
	position: relative;
	z-index: 1;
	height: 40px;
	background-color: transparent;
	border: none;
	outline: none;
	border-bottom: 2px solid var(--green2);
	color: var(--colorWhite);
	padding-left: 10px;
	font-size: 20px;
}

.wrap-menu-content-responsive .search-txt-respon::placeholder {
	font-size: 20px;
}

.wrap-menu-content-responsive .btn-search-respon {
	position: absolute;
	right: 0;
	z-index: 2;
	color: var(--colorWhite);
	font-size: 20px;
}

.wrap-menu-content-responsive .social-respon {
	margin-top: 30px;
}

.wrap-menu-content-responsive .social-respon .social-item {
	color: var(--colorWhite);
	padding: 5px 10px;
}

.wrap-menu-content-responsive .social-respon .social-item:hover {
	color: var(--green2);
}

.wrap-menu-content-responsive .btn-close-menu-respon {
	background-color: transparent;
	border: none;
	outline: none;
	position: absolute;
	color: var(--colorWhite);
	font-size: 35px;
	right: 5vw;
	top: 20px;
	cursor: pointer;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
}

.wrap-menu-content-responsive .btn-close-menu-respon:hover {
	color: var(--green2);
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
}

/*========
SEARCH
========*/

.wrap-search {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(16, 26, 44, 0.9);
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 1001;
}

input[id="openSearch"]:checked~div.wrap-search {
	display: flex;
}

/* ================
LOGIN
================ */
input[id="openLogin"]:checked~div.wrap-login {
	display: flex;
}

input[id="openLogin"]:checked~.overlay-login {
	display: block;
}

input[name="login_tab"][id="tab_login"]:checked~.wrap-login .wrap_btn_login label[for="tab_login"],
input[name="login_tab"][id="tab_register"]:checked~.wrap-login .wrap_btn_login label[for="tab_register"] {
	color: var(--black);
	font-weight: bold;
}

input[name="login_tab"][id="tab_login"]:checked~.wrap-login .wrap_btn_login label[for="tab_login"]::after,
input[name="login_tab"][id="tab_register"]:checked~.wrap-login .wrap_btn_login label[for="tab_register"]::after {
	transform: translateX(0%);
	transition: all 0.5s;
}

input[name="login_tab"][id="tab_login"]:checked~.wrap-login .wrap_container_login .tab_login,
input[name="login_tab"][id="tab_register"]:checked~.wrap-login .wrap_container_login .tab_register {
	display: block;
}

.overlay-login {
	position: fixed;
	width: 100vw;
	height: 100vh;
	display: none;
	background-color: rgba(0, 0, 0, 0.5);
	top: 0;
	left: 0;
	z-index: 1000;
	/* cursor: pointer; */
}

.wrap-login {
	width: 80vw;
	max-width: 500px;
	top: 50%;
	left: 50%;
	position: fixed;
	display: none;
	z-index: 1001;
	justify-content: center;
	align-items: center;
	transform: translate(-50%, -50%);
	background-color: var(--black);
	border-radius: 5px;
}

.wrap-login .login {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 2rem;
	padding-top: 3rem;
}

.wrap-login .login .wrap_btn_login {
	width: 100%;
	display: flex;
	justify-content: space-between;
	border-bottom: 3px solid var(--green2);
	border-radius: 5px;
	overflow: hidden;
}

.wrap-login .login .wrap_btn_login label {
	color: var(--colorWhite);
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	height: 40px;
	font-size: 16px;
	position: relative;
	overflow: hidden;
}

.wrap-login .login .wrap_btn_login label[for="tab_login"]::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: var(--green2);
	top: 0;
	left: 0;
	z-index: -1;
	transform: translateX(100%);
	transition: all 0.5s;
}

.wrap-login .login .wrap_btn_login label[for="tab_register"]::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: var(--green2);
	top: 0;
	left: 0;
	z-index: -1;
	transform: translateX(-100%);
	transition: all 0.5s;
}

.wrap-login .login .wrap_container_login {
	position: relative;
	height: 100%;
}

.wrap-login .login .wrap_container_login form {
	height: 100%;
}

.wrap-login .login .wrap_container_login .wrap_container_login-item {
	display: none;
	color: white;
	height: 100%;
}

.wrap_container_login-item .form_login {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 20px;
}

.wrap_container_login-item .form_login .row_form_login {
	width: 100%;
}

.wrap_container_login-item .form_login .row_form_login .title-row {
	font-size: 14px;
	color: var(--colorWhite2);
}

.wrap_container_login-item .form_login .row_form_login .txt_input {
	width: 100%;
	border: none;
	outline: none;
	height: 35px;
	background-color: var(--colorWhite3);
	border-radius: 5px;
	padding: 5px 10px;
	color: var(--black);
	font-size: 14px;
	margin-top: 5px;
}

.wrap_container_login-item .form_login .row_form_login .txt_input::placeholder {
	font-size: 12px;
}

.wrap_container_login-item .form_login .row_form_login.wrapBtnSubmitLogin {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 30px;
}

.wrap_container_login-item .form_login .row_form_login.wrapBtnSubmitLogin .btnSubmitFrom {
	height: 2.5rem;
	color: black;
	font-size: 14px;
	background: var(--green2);
	display: flex;
	align-items: center;
	padding: 10px;
	cursor: pointer;
	font-weight: bold;
	border-radius: 5px;
	border: none;
	outline: none;
}

/*
* END LOGIN
*/

.wrap-search .search-respon {
	position: relative;
	width: 500px;
}

@media screen and (max-width: 991px) {
	.wrap-search .search-respon {
		position: relative;
		width: 80%;
	}
}

.wrap-search .search-respon .btn-search-respon {
	position: absolute;
	z-index: 2;
	color: var(--colorWhite);
	font-size: 23px;
}

.wrap-search .search-respon .search-txt-respon {
	position: relative;
	z-index: 1;
	width: 100%;
	border: none;
	outline: none;
	background-color: transparent;
	border-bottom: 2px solid var(--green2);
	padding-left: 40px;
	height: 40px;
	font-size: 20px;
	color: var(--colorWhite);
}

.wrap-search .search-respon .search-txt-respon::placeholder {
	font-size: 20px;
}

.wrap-search .search-respon .close-search {
	position: absolute;
	z-index: 3;
	background-color: transparent;
	top: -100%;
	right: 0;
	color: var(--colorWhite);
	font-size: 27px;
	cursor: pointer;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
}

.wrap-search .search-respon .close-search:hover {
	color: var(--green2);
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
}

/*==================
MAIN
==================*/

main {
	/* margin-top: 8rem; */
	width: 100%;
	position: relative;
	z-index: 1;
}

@media screen and (max-width: 530px) {}

.header-trending {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-column-gap: 30px;
	position: relative;
	padding-bottom: 60px;
	z-index: 2;
}

@media screen and (max-width: 990px) {
	.d-sm-none {
		display: none;
	}

	.d-sm-block {
		display: block !important;
	}

	.header-trending {
		grid-template-columns: 1fr;
		grid-row-gap: 30px;
	}
}

@media screen and (max-width: 768px) {
	.header-trending {
		padding-bottom: 60px;
	}
}

.header-trending .header-trending-left {
	height: 480px;
}

@media screen and (max-width: 1200px) {
	.header-trending .header-trending-left {
		height: 420px;
	}
}

@media screen and (max-width: 990px) {
	.header-trending .header-trending-left {
		height: 460px;
	}
}

@media screen and (max-width: 768px) {
	.header-trending .header-trending-left {
		height: 290px;
	}
}

@media screen and (max-width: 480px) {
	.header-trending .header-trending-left {
		height: 190px;
	}
}

.post-trending {
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
}

.post-trending:hover img {
	transform: scale(1.05);
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-ms-transform: scale(1.05);
	-o-transform: scale(1.05);
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
}

.post-trending .wrap-post {
	position: relative;
	width: 100%;
	height: 100%;
}

.post-trending .wrap-post .thumbnail-post {
	position: relative;
	width: 100%;
}

.post-trending .wrap-post .thumbnail-post .wrap-thumbnail {
	width: 100%;
	height: 100%;
	position: relative;
}

.post-trending .wrap-post .thumbnail-post .wrap-thumbnail .overlay {
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	z-index: 1;
	cursor: pointer;
}

.post-trending .wrap-post .thumbnail-post .wrap-thumbnail .overlay>* {
	position: absolute;
	top: 50%;
	opacity: 0.7;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 50px;
	color: white;
	transition: 0.2s ease;
}

.post-trending:hover .wrap-post .thumbnail-post .wrap-thumbnail .overlay>* {
	transform: translate(-50%, -50%) rotate(120deg) scale(1.2);
	opacity: 1;
}

.post-trending .wrap-post .thumbnail-post .wrap-thumbnail img {
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
}

.post-trending .wrap-post .post-content {
	position: absolute;
	width: 100%;
	bottom: 0;
	padding: 30px;
	z-index: 2;
}

@media screen and (max-width: 1200px) {
	.post-trending .wrap-post .post-content {
		padding: 20px 30px;
	}
}

@media screen and (max-width: 480px) {
	.post-trending .wrap-post .post-content {
		padding: 15px;
	}
}

.post-trending .wrap-post .post-content .tag-post {
	color: var(--colorWhite);
	background-color: var(--green2);
	font-weight: bold;
	font-size: 13px;
	padding: 4px 11px 3px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
}

@media screen and (max-width: 1200px) {
	.post-trending .wrap-post .post-content .tag-post {
		font-size: 12px;
	}
}

@media screen and (max-width: 480px) {
	.post-trending .wrap-post .post-content .tag-post {
		font-size: 10px;
	}
}

.post-trending .wrap-post .post-content .title-post h2 {
	color: var(--colorWhite);
	font-size: 30px;
	font-weight: bold;
	line-height: 40px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	margin-top: 10px;
}

@media screen and (max-width: 1200px) {
	.post-trending .wrap-post .post-content .title-post h2 {
		font-size: 26px;
		line-height: 35px;
		margin-top: 8px;
	}
}

@media screen and (max-width: 990px) {
	.post-trending .wrap-post .post-content .title-post h2 {
		font-size: 28px;
		line-height: 38px;
	}
}

@media screen and (max-width: 768px) {
	.post-trending .wrap-post .post-content .title-post h2 {
		font-size: 25px;
		line-height: 32px;
	}
}

@media screen and (max-width: 480px) {
	.post-trending .wrap-post .post-content .title-post h2 {
		font-size: 18px;
		line-height: 20px;
		-webkit-line-clamp: 2;
	}
}

.post-trending .wrap-post .post-content .date-post {
	margin-top: 10px;
	color: var(--colorWhite);
	font-weight: 500;
	font-size: 14px;
}

@media screen and (max-width: 1200px) {
	.post-trending .wrap-post .post-content .date-post {
		margin-top: 8px;
		font-size: 12px;
	}
}

@media screen and (max-width: 480px) {
	.post-trending .wrap-post .post-content .date-post {
		margin-top: 8px;
		font-size: 10px;
	}
}

.post-trending .wrap-post .post-content .date-post .comment-post {
	margin-left: 15px;
	color: var(--colorWhite);
}

.post-trending .wrap-post .post-content .date-post .comment-post i {
	margin-right: 5px;
}

/*============
TAB HEADER
============*/

.header-trending-right .wrap-header-hot-post {
	height: 100%;
	display: flex;
	flex-direction: column;
}

@media screen and (max-width: 990px) {
	/* .header-trending-right .wrap-header-hot-post {
		height: 460px;
	} */
}

.header-trending-right .wrap-header-hot-post .title-list-post {
	display: flex;
	width: 100%;
	height: 50px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	overflow: hidden;
}

@media screen and (max-width: 990px) {
	.header-trending-right .wrap-header-hot-post .title-list-post {
		height: 60px;
	}
}

.header-trending-right .wrap-header-hot-post .title-list-post label {
	background-color: var(--blue3);
	cursor: pointer;
	color: var(--black2);
	font-weight: 500;
	font-size: 16px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
}

.header-trending-right .wrap-header-hot-post .title-list-post label.active {
	color: var(--colorWhite);
	background-color: var(--blue);
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
}

.header-trending-right .wrap-header-hot-post .wrap-content-list-post {
	position: relative;
	width: 100%;
	height: 100%;
	margin-top: 30px;
}

.header-trending-right .wrap-header-hot-post .wrap-content-list-post .item-list-post {
	position: relative;
	width: 100%;
	height: auto;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-bottom: 20px;
}

input[name="tab-post-header"]#tab-content-left:checked~div.item-list-post.left {
	z-index: 2;
}

input[name="tab-post-header"]#tab-content-right:checked~div.item-list-post.right {
	z-index: 2;
}

/*===============================================================
COMPONENT POST FULL ROW SMALL
===============================================================*/

.post-full-row-small {
	display: flex;
	background-color: var(--colorWhite);
	border-radius: 5px;
}

.post-full-row-small:hover img {
	transform: scale(1.05);
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-ms-transform: scale(1.05);
	-o-transform: scale(1.05);
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
}

.post-full-row-small:hover .title-post h2 {
	color: var(--grey) !important;
}

.post-full-row-small .wrap-thumbnail {
	width: 120px;
	height: 120px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	overflow: hidden;
	margin-right: 15px;
}

@media screen and (max-width: 1200px) {
	.post-full-row-small .wrap-thumbnail {
		width: 105px;
		height: 105px;
		margin-right: 10px;
	}
}

.post-full-row-small .wrap-thumbnail img {
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
}

.post-full-row-small .post-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#app.arabic .post-full-row-small .post-content {
	padding-right: 15px;
}

.post-full-row-small .post-content .title-post h2,
.post-full-row-small .post-content .title-post .txt_post {
	color: var(--black2);
	font-size: 14px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.post-full-row-small .post-content .date-post {
	margin-top: 5px;
	font-size: 12px;
	font-weight: 500;
	color: var(--grey);
}

.post-full-row-small .post-content .date-post .comment-post {
	margin-left: 10px;
	color: var(--grey);
}

.post-full-row-small .post-content .date-post .comment-post i {
	margin-right: 5px;
}

/*==============================
NOTI POINT HEADER
==============================*/

.wrap-noti-point {
	position: absolute;
	display: grid;
	width: 100%;
	grid-template-columns: repeat(4, 1fr);
	grid-column-gap: 30px;
	bottom: 0;
	transform: translateY(50%);
	-webkit-transform: translateY(50%);
	-moz-transform: translateY(50%);
	-ms-transform: translateY(50%);
	-o-transform: translateY(50%);
}

@media screen and (max-width: 768px) {
	.wrap-noti-point {
		position: relative;
		grid-template-columns: repeat(1, 1fr);
		grid-column-gap: 0px;
		grid-row-gap: 10px;
		transform: translateY(0%);
		-webkit-transform: translateY(0%);
		-moz-transform: translateY(0%);
		-ms-transform: translateY(0%);
		-o-transform: translateY(0%);
	}
}

.wrap-noti-point .noti-item {
	width: 100%;
	height: 90px;
	box-shadow: 0px 0px 49px 0px rgba(0, 0, 0, 0.1);
	padding: 9%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	background-color: var(--colorWhite);
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
}

.wrap-noti-point .noti-item:hover {
	transform: translateY(-10px);
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	-ms-transform: translateY(-10px);
	-o-transform: translateY(-10px);
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
}

@media screen and (max-width: 768px) {
	.wrap-noti-point .noti-item:hover {
		transform: none;
		-webkit-transform: none;
		-moz-transform: none;
		-ms-transform: none;
		-o-transform: none;
	}
}

.wrap-noti-point .noti-item .noti-name {
	font-size: 18px;
	font-weight: bold;
	color: var(--black);
}

.wrap-noti-point .noti-item .noti-content {
	font-size: 13px;
	font-weight: 500;
	position: relative;
}

.wrap-noti-point .noti-item .noti-content .noti-status {
	padding-left: 18px;
	position: relative;
	color: var(--black) !important;
}

.wrap-noti-point .noti-item .noti-content .noti-status.up {
	color: var(--green) !important;
}

.wrap-noti-point .noti-item .noti-content .noti-status.down {
	color: var(--grey);
}

.wrap-noti-point .noti-item .noti-content .noti-status.up::before {
	position: absolute;
	content: "";
	width: 15px;
	height: 15px;
	top: 1px;
	left: 0px;
	background-image: url("../images/icon/arrow_up.svg");
	background-size: 9px 15px;
	background-position: center;
	background-repeat: no-repeat;
}

.wrap-noti-point .noti-item .noti-content .noti-status.down::before {
	position: absolute;
	content: "";
	width: 15px;
	height: 15px;
	top: 1px;
	left: 0px;
	background-image: url("../images/icon/arrow_down.svg");
	background-size: 9px 15px;
	background-position: center;
	background-repeat: no-repeat;
}

/*=====================================
MAIN PAGE
=====================================*/

.wrap-main-page {
	position: relative;
	width: 100%;
	background-color: var(--colorWhite);
	padding: 50px 0 60px;
	padding-top: 40px;
}

@media screen and (max-width: 768px) {
	.wrap-main-page {
		padding: 60px 0 60px;
		padding-top: 20px;
	}
}

.wrap-main-page .main-page {
	display: grid;
	grid-template-columns: 3fr 1.2fr;
	grid-column-gap: 50px;
}

@media screen and (max-width: 1200px) {
	.wrap-main-page .main-page {
		grid-template-columns: 1fr;
	}
}

.wrap-main-page .main-page .wrap-page-content .list-post-trending-main {
	width: 100%;
	height: 600px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 30px;
}

.wrap-main-page .main-page .wrap-page-content .list-post-trending-main .post-trending:nth-child(1) {
	grid-column: 1/2;
	grid-row: 1/3;
}

.wrap-main-page .main-page .wrap-page-content .list-post-trending-main .post-trending:nth-child(2) {
	grid-column: 2/3;
	grid-row: 1/2;
}

.wrap-main-page .main-page .wrap-page-content .list-post-trending-main .post-trending:nth-child(3) {
	grid-column: 2/3;
	grid-row: 2/3;
}

@media screen and (max-width: 768px) {
	.wrap-main-page .main-page .wrap-page-content .list-post-trending-main {
		height: auto;
		grid-template-columns: repeat(1, 1fr);
		grid-gap: 20px;
	}

	.wrap-main-page .main-page .wrap-page-content .list-post-trending-main .post-trending:nth-child(1) {
		grid-column: 1/2;
		grid-row: 1/2;
	}

	.wrap-main-page .main-page .wrap-page-content .list-post-trending-main .post-trending:nth-child(2) {
		grid-column: 1/2;
		grid-row: 2/3;
	}

	.wrap-main-page .main-page .wrap-page-content .list-post-trending-main .post-trending:nth-child(3) {
		grid-column: 1/2;
		grid-row: 3/4;
	}
}

.wrap-main-page .main-page .wrap-page-content .list-post-trending-main .post-trending .post-content {
	padding: 10px;
}

.wrap-main-page .main-page .wrap-page-content .list-post-trending-main .post-trending .title-post h2 {
	font-size: 24px;
	line-height: 30px;
}

.wrap-main-page .main-page .wrap-page-content .list-post-trending-main .post-trending .tag-post {
	background: none;
	color: var(--green2);
}

.wrap-main-page .main-page .wrap-page-content .list-post-trending-main .post-trending .date-post {
	font-size: 14px;
}

/*============================
    CONTENT MAIN POST
============================*/

.wrap-main-page .main-page .wrap-page-content .wrap-post-main {
	margin-top: 50px;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(1, 1fr);
}

.wrap-main-page .main-page .wrap-page-content .wrap-post-main .title-box {
	font-size: 32px;
	position: relative;
}

.wrap-main-page .main-page .wrap-page-content .wrap-post-main .wrap-sidebar-mobile,
.wrap-main-page .main-page .wrap-page-content .wrap-post-main .wrap-sidebar-mobile .wrap-page-sidebar {
	display: none;
}

@media screen and (max-width: 1200px) {
	.wrap-main-page .main-page .wrap-page-content .wrap-post-main {
		grid-template-columns: repeat(2, 1fr);
		grid-column-gap: 30px;
	}

	.wrap-main-page .main-page .wrap-page-content .wrap-post-main .wrap-sidebar-mobile,
	.wrap-main-page .main-page .wrap-page-content .wrap-post-main .wrap-sidebar-mobile .wrap-page-sidebar {
		display: block;
	}
}

@media screen and (max-width: 768px) {
	.wrap-main-page .main-page .wrap-page-content .wrap-post-main {
		grid-template-columns: repeat(1, 1fr);
	}
}

@media screen and (max-width: 480px) {

	.wrap-main-page .main-page .wrap-page-content .wrap-post-main .wrap-sidebar-mobile,
	.wrap-main-page .main-page .wrap-page-content .wrap-post-main .wrap-sidebar-mobile .wrap-page-sidebar {
		display: none;
	}
}

.wrap-main-page .main-page .wrap-page-content .wrap-post-main .wrap-list-post-content {
	width: 100%;
}

.wrap-main-page .main-page .wrap-page-content .wrap-post-main .wrap-list-post-content .box-main-content-1 {
	width: 100%;
}

.wrap-main-page .main-page .wrap-page-content .wrap-post-main .wrap-list-post-content .box-main-content-1 .content-box-item {
	margin-top: 35px;
	display: grid;
	width: 100%;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 30px;
}

@media screen and (max-width: 1200px) {
	.wrap-main-page .main-page .wrap-page-content .wrap-post-main .wrap-list-post-content .box-main-content-1 .content-box-item {
		grid-template-columns: repeat(1, 1fr);
		grid-row-gap: 30px;
	}
}

.wrap-main-page .main-page .wrap-page-content .wrap-post-main .wrap-list-post-content .box-main-content-1 .content-box-item .wrap-list-post-full-row .content-list-post {
	width: 100%;
	background-color: var(--colorWhite);
	padding: 30px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	box-shadow: 0px 0px 49px 0px rgba(0, 0, 0, 0.1);
}

.wrap-main-page .main-page .wrap-page-content .wrap-post-main .wrap-list-post-content .box-main-content-1 .content-box-item .wrap-list-post-full-row .post-full-row-small .wrap-thumbnail {
	width: 95px;
	height: 95px;
}

.wrap-main-page .main-page .wrap-page-content .wrap-post-main .wrap-list-post-content .box-main-content-1 .content-box-item .wrap-list-post-full-row .post-full-row-small:not(:last-child) {
	padding-bottom: 13px;
	border-bottom: 1px solid var(--grey);
}

.wrap-main-page .main-page .wrap-page-content .wrap-post-main .wrap-list-post-content .box-main-content-1 .content-box-item .wrap-list-post-full-row .post-full-row-small:not(:first-child) {
	padding-top: 13px;
}

.wrap-main-page .main-page .wrap-page-content .wrap-post-main .wrap-list-post-content .box-main-content-1 .content-box-item .wrap-2-post {
	width: 100%;
}

.wrap-main-page .main-page .wrap-page-content .wrap-post-main .wrap-list-post-content .box-main-content-1 .content-box-item .wrap-list-post-full-row .post-full-row-small .title-post h2,
.wrap-main-page .main-page .wrap-page-content .wrap-post-main .wrap-list-post-content .box-main-content-1 .content-box-item .wrap-list-post-full-row .post-full-row-small .title-post .txt_post {
	font-weight: 500;
}

@media screen and (max-width: 920px) {
	.wrap-main-page .main-page .wrap-page-content .wrap-post-main .wrap-list-post-content .box-main-content-1 .content-box-item .wrap-list-post-full-row .post-full-row-small .post-content {
		justify-content: flex-start;
	}

	.wrap-main-page .main-page .wrap-page-content .wrap-post-main .wrap-list-post-content .box-main-content-1 .content-box-item .wrap-list-post-full-row .post-full-row-small .title-post h2 {
		font-size: 14px;
	}

	.wrap-main-page .main-page .wrap-page-content .wrap-post-main .wrap-list-post-content .box-main-content-1 .content-box-item .wrap-list-post-full-row .post-full-row-small .post-content .date-post {
		font-size: 11px;
	}
}

@media screen and (max-width: 920px) {
	.wrap-main-page .main-page .wrap-page-content .wrap-post-main .wrap-list-post-content .box-main-content-1 .content-box-item .wrap-list-post-full-row .post-full-row-small .wrap-thumbnail {
		width: 90px;
		height: 90px;
	}

	.wrap-main-page .main-page .wrap-page-content .wrap-post-main .wrap-list-post-content .box-main-content-1 .content-box-item .wrap-list-post-full-row .post-full-row-small .title-post h2 {
		font-size: 16px;
	}

	.wrap-main-page .main-page .wrap-page-content .wrap-post-main .wrap-list-post-content .box-main-content-1 .content-box-item .wrap-list-post-full-row .post-full-row-small .post-content .date-post {
		font-size: 12px;
	}
}

/*=================================================
POST THUMBNAIL COMPONENT
=================================================*/

.post-thumbnail {
	width: 100%;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	overflow: hidden;
	background-color: var(--colorWhite);
	box-shadow: 0px 0px 49px 0px rgba(0, 0, 0, 0.1);
}

.post-thumbnail:hover .overlay {
	display: block !important;
}

.post-thumbnail:hover img {
	transform: scale(1.05);
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-ms-transform: scale(1.05);
	-o-transform: scale(1.05);
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
}

.post-thumbnail img {
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
}

.post-thumbnail .wrap-thumbnail {
	width: 100%;
	height: 250px;
	position: relative;
	overflow: hidden;
}

.post-thumbnail .wrap-thumbnail .overlay {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	position: absolute;
	background-color: rgba(24, 24, 24, 0.2);
	display: none;
}

.post-thumbnail .post-content {
	padding: 26px;
}

.post-thumbnail .post-content .post-info {
	font-size: 12px;
	line-height: 19px;
}

.post-thumbnail .post-content .post-info .tag-post {
	font-weight: bold;
	color: var(--green2);
	margin-right: 16px;
}

.post-thumbnail .post-content .post-info .date-post {
	font-weight: 500;
	color: var(--grey);
	margin-right: 16px;
}

.post-thumbnail .post-content .post-info .comment-post {
	color: var(--grey);
}

.post-thumbnail .post-content .post-info .comment-post i {
	margin-right: 5px;
}

.post-thumbnail .post-content .title-post h2,
.post-thumbnail .post-content .title-post .txt_post {
	font-size: 24px;
	line-height: 30px;
	color: var(--black);
	margin-top: 10px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.post-thumbnail .post-content .title-post h2:hover {
	color: var(--grey);
}

/*=========== END COMPONENT ================*/

.wrap-main-page .main-page .wrap-page-content .wrap-post-main .wrap-list-post-content .box-main-content-1 .content-box-item .wrap-2-post .post-thumbnail:not(:first-child) {
	margin-top: 30px;
}

.wrap-main-page .main-page .wrap-page-content .wrap-post-main .wrap-list-post-content .box-main-content-2,
.wrap-main-page .main-page .wrap-page-content .wrap-post-main .wrap-list-post-content .box-main-content-2 .content-box-item {
	margin-top: 30px;
}

/*==================================================
POST FULL ROW BIG
==================================================*/

.post-full-row-big {
	width: 100%;
	display: flex;
	/* background-color: var(--colorWhite); */
	background-color: #f7f7f8;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	overflow: hidden;

	/* box-shadow: 0px 0px 49px 0px rgba(0, 0, 0, 0.1); */
}

.post-full-row-big .wrap-thumbnail {
	width: 250px;
	height: 100%;
	position: relative;
	overflow: hidden;
}

.post-full-row-big .content-post {
	padding: 30px 20px;
}

.post-full-row-big .content-post .post-info {
	font-size: 13px;
}

.post-full-row-big .content-post .post-info .tag-post {
	color: var(--green2);
	font-weight: bold;
	margin-right: 15px;
}

.post-full-row-big .content-post .post-info .date-post {
	color: var(--grey);
	margin-right: 15px;
	font-weight: 500;
}

.post-full-row-big .content-post .post-info .comment-post {
	color: var(--grey);
}

.post-full-row-big .content-post .post-info .comment-post i {
	margin-right: 5px;
}

.post-full-row-big .content-post .title-post h2,
.post-full-row-big .content-post .title-post .txt_post {
	font-size: 24px;
	color: var(--black);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	line-height: 29px;
	margin-top: 15px;
}

.post-full-row-big .content-post .title-post h2:hover {
	color: var(--grey);
}

.post-full-row-big .content-post .description-post {
	font-size: 16px;
	color: var(--grey);
	margin-top: 15px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.post-full-row-big .thumbnail-post:hover .overlay {
	display: block !important;
}

.post-full-row-big:hover img {
	transform: scale(1.05);
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-ms-transform: scale(1.05);
	-o-transform: scale(1.05);
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
}

.post-full-row-big img {
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
}

.post-full-row-big .wrap-thumbnail .overlay {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	position: absolute;
	background-color: rgba(0, 0, 0, 0.2);
	display: none;
}

/*=========== END COMPONENT ================*/

.wrap-main-page .main-page .wrap-page-content .wrap-post-main .wrap-list-post-content .box-main-content-2 .content-box-item .post-full-row-big:not(:first-child) {
	margin-top: 30px;
}

@media screen and (max-width: 1200px) {
	.wrap-main-page .main-page .wrap-page-content .wrap-post-main .wrap-list-post-content .box-main-content-2 .content-box-item .post-full-row-big .wrap-thumbnail {
		width: 150px;
		height: 100%;
	}

	.wrap-main-page .main-page .wrap-page-content .wrap-post-main .wrap-list-post-content .box-main-content-2 .content-box-item .post-full-row-big .content-post {
		padding: 15px 20px;
	}

	.wrap-main-page .main-page .wrap-page-content .wrap-post-main .wrap-list-post-content .box-main-content-2 .content-box-item .post-full-row-big .content-post .post-info {
		font-size: 11px;
	}

	.wrap-main-page .main-page .wrap-page-content .wrap-post-main .wrap-list-post-content .box-main-content-2 .content-box-item .post-full-row-big .content-post .title-post .txt_post {
		font-size: 18px;
		-webkit-line-clamp: 2;
		line-height: 23px;
		margin-top: 5px;
	}

	.wrap-main-page .main-page .wrap-page-content .wrap-post-main .wrap-list-post-content .box-main-content-2 .content-box-item .post-full-row-big .content-post .description-post {
		font-size: 14px;
		margin-top: 10px;
		-webkit-line-clamp: 3;
	}
}

@media screen and (max-width: 480px) {
	.wrap-main-page .main-page .wrap-page-content .wrap-post-main .wrap-list-post-content .box-main-content-2 .content-box-item .post-full-row-big .wrap-thumbnail {
		width: 120px;
		height: 100%;
	}

	.wrap-main-page .main-page .wrap-page-content .wrap-post-main .wrap-list-post-content .box-main-content-2 .content-box-item .post-full-row-big .content-post {
		padding: 15px 10px;
	}

	.wrap-main-page .main-page .wrap-page-content .wrap-post-main .wrap-list-post-content .box-main-content-2 .content-box-item .post-full-row-big .content-post .post-info {
		font-size: 10px;
	}

	.post-full-row-big .content-post .post-info .tag-post {
		margin-right: 8px;
	}

	.post-full-row-big .content-post .post-info .date-post {
		margin-right: 8px;
	}

	.post-full-row-big .content-post .post-info .comment-post i {
		margin-right: 3px;
	}

	.wrap-main-page .main-page .wrap-page-content .wrap-post-main .wrap-list-post-content .box-main-content-2 .content-box-item .post-full-row-big .content-post .title-post .txt_post {
		font-size: 16px;
		-webkit-line-clamp: 2;
		line-height: 21px;
		margin-top: 5px;
	}

	.wrap-main-page .main-page .wrap-page-content .wrap-post-main .wrap-list-post-content .box-main-content-2 .content-box-item .post-full-row-big .content-post .description-post {
		font-size: 12px;
		margin-top: 7px;
		-webkit-line-clamp: 2;
	}
}

/*===================
SIDE BAR
===================*/

.wrap-page-sidebar {
	width: 100%;
}

@media screen and (max-width: 1200px) {
	.wrap-page-sidebar {
		margin-top: 60px;
	}
}

@media screen and (max-width: 480px) {
	.wrap-page-sidebar {
		display: block;
	}
}

.wrap-page-sidebar .sidebar-graph {
	width: 100%;
	/*  height           : 550px; */
	/*  background-color : var(--blue2);
    border-radius        : 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius   : 5px;
    -ms-border-radius    : 5px;
    -o-border-radius     : 5px; */
}

.wrap-page-sidebar .sidebar-trending-news {
	width: 100%;
	height: auto;
	padding: 50px 30px;
	margin-top: 30px;
	background-color: var(--colorWhite);
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	box-shadow: 0px 0px 49px 0px rgba(0, 0, 0, 0.1);
}

.wrap-page-sidebar .sidebar-trending-news .sidebar-news-item {
	padding: 20px 0;
}

.wrap-page-sidebar .sidebar-trending-news .sidebar-news-item:not(:last-child) {
	border-bottom: 1px solid var(--grey);
}

.wrap-page-sidebar .sidebar-trending-news .title-trending {
	font-size: 24px;
	margin-bottom: 25px;
}

.wrap-page-sidebar .sidebar-trending-news .content-trending {
	width: 100%;
	display: grid;
	grid-template-columns: 35px auto;
	grid-column-gap: 10px;
}

.wrap-page-sidebar .sidebar-trending-news .content-trending .countPost {
	border: 1px solid var(--grey);
	width: 35px;
	height: 35px;
	font-size: 16px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
}

.wrap-page-sidebar .sidebar-trending-news .content-trending .wrap-info .name a {
	color: var(--black);
	font-weight: 500;
	font-size: 16px;
	line-height: 20px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}

.wrap-page-sidebar .sidebar-trending-news .content-trending .wrap-info .name a:hover {
	color: var(--grey);
}

.wrap-page-sidebar .sidebar-trending-news .content-trending .wrap-info .wrap-date {
	margin-top: 8px;
}

.wrap-page-sidebar .sidebar-trending-news .content-trending .wrap-info .wrap-date .date,
.wrap-page-sidebar .sidebar-trending-news .content-trending .wrap-info .wrap-date .comment {
	color: var(--grey);
	font-size: 14px;
}

.wrap-page-sidebar .sidebar-trending-news .content-trending .wrap-info .wrap-date .comment {
	margin-left: 15px;
}

.wrap-page-sidebar .sidebar-trending-news .content-trending .wrap-info .wrap-date .comment i {
	margin-right: 5px;
}

.wrap-page-sidebar .sidebar-tab-noti {
	margin-top: 30px;
	width: 100%;
	background-color: var(--blue);
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 20px 30px 50px;
}

.wrap-page-sidebar .sidebar-tab-noti .sidebar-tab-noti-title {
	color: var(--colorWhite);
	text-align: center;
}

.wrap-page-sidebar .sidebar-tab-noti .sidebar-tab-noti-title .logo {
	font-size: 45px;
}

.wrap-page-sidebar .sidebar-tab-noti .sidebar-tab-noti-title .name {
	font-size: 22px;
	margin-top: 10px;
}

.wrap-page-sidebar .sidebar-tab-noti .sidebar-tab-noti-content {
	margin-top: 30px;
	width: 100%;
	border-left: 1px solid var(--black2);
	border-right: 1px solid var(--black2);
}

.wrap-page-sidebar .sidebar-tab-noti .sidebar-tab-noti-content .tab-noti-title {
	display: flex;
	width: 100%;
}

.wrap-page-sidebar .sidebar-tab-noti .sidebar-tab-noti-content .tab-noti-title label {
	width: 100%;
	text-align: center;
	cursor: pointer;
	color: var(--colorWhite);
	font-size: 13px;
	background-color: var(--blue4);
	padding: 5px;
	border-bottom: 1px solid var(--black2);
}

.wrap-page-sidebar .sidebar-tab-noti .sidebar-tab-noti-content .tab-noti-title label:not(:last-child) {
	border-right: 1px solid var(--black2);
}

.wrap-page-sidebar .sidebar-tab-noti .sidebar-tab-noti-content .tab-noti-title label.active {
	font-weight: bold;
	background-color: var(--blue);
	border-bottom: none;
}

.wrap-page-sidebar .sidebar-tab-noti .sidebar-tab-noti-content .wrap-tab-noti {
	width: 100%;
	height: auto;
	position: relative;
}

.wrap-page-sidebar .sidebar-tab-noti .sidebar-tab-noti-content .wrap-tab-noti .tab-noti-item {
	position: absolute;
	opacity: 0;
	top: 0;
}

input[id="tab-noti-1"]:checked~div.tab-noti-1,
input[id="tab-noti-2"]:checked~div.tab-noti-2,
input[id="tab-noti-3"]:checked~div.tab-noti-3,
input[id="tab-noti-4"]:checked~div.tab-noti-4,
input[id="tab-noti-5"]:checked~div.tab-noti-5 {
	position: relative !important;
	opacity: 1 !important;
	width: 100%;
}

input[id="tab-noti-1-mobile"]:checked~div.tab-noti-1-mobile,
input[id="tab-noti-2-mobile"]:checked~div.tab-noti-2-mobile,
input[id="tab-noti-3-mobile"]:checked~div.tab-noti-3-mobile,
input[id="tab-noti-4-mobile"]:checked~div.tab-noti-4-mobile,
input[id="tab-noti-5-mobile"]:checked~div.tab-noti-5-mobile {
	position: relative !important;
	opacity: 1 !important;
	width: 100%;
}

.wrap-page-sidebar .sidebar-tab-noti .sidebar-tab-noti-content .wrap-tab-noti .item {
	padding: 20px 10px;
	border-bottom: 1px solid var(--black2);
}

.wrap-page-sidebar .sidebar-tab-noti .sidebar-tab-noti-content .wrap-tab-noti .item .wrap-header-item {
	display: flex;
	width: 100%;
	align-items: center;
}

.wrap-page-sidebar .sidebar-tab-noti .sidebar-tab-noti-content .wrap-tab-noti .item .wrap-header-item .logo-item {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	margin-right: 5px;
}

.wrap-page-sidebar .sidebar-tab-noti .sidebar-tab-noti-content .wrap-tab-noti .item .wrap-header-item .logo-item img {
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
}

.wrap-page-sidebar .sidebar-tab-noti .sidebar-tab-noti-content .wrap-tab-noti .item .wrap-header-item .name-item {
	color: var(--colorWhite);
	font-size: 13px;
}

.wrap-page-sidebar .sidebar-tab-noti .sidebar-tab-noti-content .wrap-tab-noti .item .wrap-body-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 10px;
	color: var(--colorWhite);
}

.wrap-page-sidebar .sidebar-tab-noti .sidebar-tab-noti-content .wrap-tab-noti .item .wrap-body-item .value {
	font-size: 16px;
	font-weight: bold;
}

.wrap-page-sidebar .sidebar-tab-noti .sidebar-tab-noti-content .wrap-tab-noti .item .wrap-body-item .status {
	font-size: 13px;
}

.wrap-page-sidebar .sidebar-tab-noti .sidebar-tab-noti-content .wrap-tab-noti .item .wrap-body-item .status i {
	margin-right: 5px;
}

.wrap-page-sidebar .sidebar-tab-noti .sidebar-tab-noti-content .wrap-tab-noti .item .wrap-body-item .status.up {
	color: var(--green3);
}

.wrap-page-sidebar .sidebar-tab-noti .sidebar-tab-noti-content .wrap-tab-noti .item .wrap-body-item .status.down {
	color: var(--red);
}

.wrap-page-sidebar .sidebar-tab-noti .sidebar-tab-noti-content .wrap-tab-noti .item .wrap-body-item .status.down i {
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
}

.wrap-page-sidebar .sidebar-ads {
	margin-top: 30px;
	width: 100%;
	height: 300px;
	background-color: var(--colorWhite);
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
}

.wrap-page-sidebar .sidebar-ads .thumbnail-ads {
	width: 100%;
	height: 100%;
	box-shadow: 0px 0px 49px 0px rgba(0, 0, 0, 0.1);
}

.wrap-page-sidebar .sidebar-qrCode {
	margin-top: 30px;
	width: 100%;
	background-color: var(--colorWhite);
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	padding: 50px 30px 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-shadow: 0px 0px 49px 0px rgba(0, 0, 0, 0.1);
}

.wrap-page-sidebar .sidebar-qrCode p {
	width: 100%;
	text-align: center;
}

.wrap-page-sidebar .sidebar-qrCode .code {
	word-wrap: break-word;
	word-break: break-word;
	font-size: 15px;
	color: var(--black2);
	font-weight: 500;
}

.wrap-page-sidebar .sidebar-qrCode .qr {
	margin-top: 20px;
	width: 160px;
	height: 160px;
	box-shadow: 0px 0px 49px 0px rgba(0, 0, 0, 0.1);
}

.wrap-page-sidebar .sidebar-qrCode .name-qr {
	margin-top: 30px;
	color: var(--black);
	font-size: 22px;
	font-weight: 500;
}

.wrap-page-sidebar .sidebar-qrCode .description-qr {
	margin-top: 15px;
	color: var(--black2);
	font-size: 15px;
}

.wrap-page-sidebar .sidebar-qrCode .logo-qr {
	width: 30px;
	height: 30px;
	margin: 21px auto 15px;
}

/*==========
PAGINATION
===========*/

.wrap-main-page .wrap-page-content .wrap-post-main .wrap-list-post-content .box-main-content-2 .wrap-pagination {
	margin-top: 2.5rem;
}

.wrap-pagination {
	position: relative;
	display: flex;
	width: 100%;
	justify-content: center;
}

.wrap-pagination .pre,
.wrap-pagination .next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	color: var(--black);
}

.wrap-pagination .pre:hover,
.wrap-pagination .next:hover {
	color: var(--green2);
}

.wrap-pagination .pre {
	left: 0;
}

.wrap-pagination .next {
	right: 0;
}

.wrap-pagination .pagination {
	display: flex;
}

.wrap-pagination .pagination .pagination-item {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	margin: 0 5px;
}

.wrap-pagination .pagination .pagination-item .pagination-link {
	font-size: 15px;
	font-weight: bold;
	color: var(--black);
}

.wrap-pagination .pagination .pagination-item.active {
	background-color: var(--green2);
	color: var(--colorWhite);
}

.wrap-pagination .pagination .pagination-item.active .pagination-link {
	color: var(--colorWhite);
}

.wrap-pagination .pagination .pagination-item:hover {
	background-color: var(--colorWhite);
}

.wrap-pagination .pagination .pagination-item.active:hover {
	background-color: var(--green2);
}

/*===================================================
FOOTER
===================================================*/

footer {
	background-color: var(--black);
	padding: 60px 0 60px;
}

@media screen and (max-width: 1100px) {
	footer {
		padding: 80px 0 40px;
	}
}

@media screen and (max-width: 480px) {
	footer {
		padding: 60px 0 30px;
	}
}

footer .footer-content {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 30px;
}

@media screen and (max-width: 1100px) {
	footer .footer-content {
		grid-template-columns: repeat(1, 1fr);
		grid-row-gap: 40px;
	}
}

footer .title-footer {
	margin-top: 15px;
	/** Vì font size của logo lớn hơn font size của title*/
	color: var(--colorWhite);
	text-transform: uppercase;
	font-size: 20px;
	font-weight: 500;
}

footer .footer-content .wrap-intro .intro,
footer .footer-content .wrap-category .category,
footer .footer-content .wrap-contact .contact,
footer .footer-content .wrap-newsletter .description-newslstter {
	margin-top: 30px;
}

@media screen and (max-width: 1100px) {
	footer .footer-content .wrap-intro .intro {
		margin-top: 30px;
	}

	footer .footer-content .wrap-category .category,
	footer .footer-content .wrap-contact .contact,
	footer .footer-content .wrap-newsletter .description-newslstter {
		margin-top: 20px;
	}
}

@media screen and (max-width: 480px) {
	footer .footer-content .wrap-intro .intro {
		margin-top: 20px;
	}
}

/*=======
COLUMN 1
========*/

footer .footer-content .wrap-intro .logo {
	font-size: 30px;
	color: var(--green2);
	font-weight: bold;
}

@media screen and (max-width: 480px) {
	footer .footer-content .wrap-intro .logo {
		font-size: 26px;
	}
}

footer .footer-content .wrap-intro .intro {
	color: var(--grey2);
	font-size: 14px;
	line-height: 25px;
}

footer .footer-content .wrap-social .social {
	display: flex;
}

footer .footer-content .wrap-social .social .social-item {
	margin-top: 20px;
}

footer .footer-content .wrap-social .social .social-item:not(:last-child) {
	margin-right: 20px;
}

footer .footer-content .wrap-social .social .social-item .social-link {
	color: var(--colorWhite);
	font-size: 24px;
}

footer .footer-content .wrap-social .social .social-item .social-link:hover {
	color: var(--green2);
}

footer .footer-content .wrap-dmca {
	margin-top: 20px;
	width: 120px;
}

/*=======
COLUMN 2
========*/

footer .footer-content .wrap-category .category {
	display: flex;
	flex-direction: column;
}

footer .footer-content .wrap-category .category .category-item:not(:first-child) {
	padding-top: 20px;
}

footer .footer-content .wrap-category .category .category-item:not(:last-child) {
	padding-bottom: 20px;
	border-bottom: 0.5px solid var(--grey);
}

footer .footer-content .wrap-category .category .category-item {
	color: var(--grey2);
}

footer .footer-content .wrap-category .category .category-item:hover {
	color: var(--green2);
}

footer .footer-content .wrap-category .category .category-item .wrap-category-tem-content {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 500;
}

/*========
COLUMN 3
=========*/

footer .footer-content .wrap-contact .contact .contact-item {
	color: var(--grey2);
	font-size: 14px;
	line-height: 25px;
}

footer .footer-content .wrap-contact .contact .contact-item:not(:first-child) {
	margin-top: 15px;
}

footer .footer-content .wrap-contact .contact .contact-item i {
	margin-right: 10px;
}

/*==========
COLUMN 4
==========*/

footer .footer-content .wrap-newsletter .description-newsletter {
	color: var(--grey2);
	font-size: 14px;
	line-height: 25px;
}

footer .footer-content .wrap-newsletter .newsletter {
	margin-top: 20px;
}

footer .footer-content .wrap-newsletter .newsletter .txt_newsletter {
	border: none;
	outline: none;
	width: 100%;
	height: 40px;
	padding: 0 10px;
	font-size: 16px;
	color: var(--colorWhite);
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	background-color: transparent;
	border: 2px solid var(--colorWhite2);
}

footer .footer-content .wrap-newsletter .newsletter .txt_newsletter::placeholder {
	font-size: 14px;
}

footer .footer-content .wrap-newsletter .submit_form_newsletter {
	margin-top: 20px;
	border: none;
	outline: none;
	width: 60%;
	max-width: 140px;
	height: 40px;
	font-size: 14px;
	cursor: pointer;
	text-transform: uppercase;
	color: var(--colorWhite2);
	border: 2px solid var(--colorWhite2);
	font-weight: 500;
	background-color: transparent;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
}

footer .footer-content .wrap-newsletter .submit_form_newsletter:hover {
	background-color: var(--green2);
	border: 2px solid var(--green2);
	color: var(--colorWhite);
}

/*=========
NOTE FOOTER
=========*/

footer .footer-more-info {
	margin-top: 20px;
}

@media screen and (max-width: 480px) {
	footer .footer-more-info {
		margin-top: 30px;
	}
}

footer .footer-more-info hr {
	border: none;
	width: 100%;
	height: 1px;
	background-color: var(--grey);
}

footer .footer-more-info .wrap-more-info {
	margin-top: 20px;
}

footer .footer-more-info .wrap-more-info .note-footer {
	font-size: 14px;
	color: var(--grey2);
	line-height: 25px;
}

/*=====================================================
PAGE DETAILS
=====================================================*/

#main .wrap-main-page {
	padding: 3rem 0 60px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

@media screen and (max-width: 480px) {
	#main .wrap-main-page {
		padding: 5rem 0 60px;
	}
}

#main .wrap-main-page .wrap-post-info {
	display: flex;
	flex-direction: column;
	margin-bottom: 30px;
}

#main .wrap-main-page .wrap-post-info .title-post {
	color: var(--colorPrimary);
	font-size: 35px;
}

@media screen and (max-width: 1200px) {
	#main .wrap-main-page .wrap-post-info .title-post {
		font-size: 32px;
	}
}

@media screen and (max-width: 480px) {
	#main .wrap-main-page .wrap-post-info .title-post {
		font-size: 28px;
		line-height: 35px;
	}
}

#main .wrap-main-page .wrap-post-info .wrap-address-post {
	margin-top: 10px;
}

#main .wrap-main-page .wrap-post-info .wrap-address-post .address-post {
	display: flex;
	flex-wrap: wrap;
}

#main .wrap-main-page .wrap-post-info .wrap-address-post .address-post .address-post-item:not(:last-child)::after {
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	content: "\f054";
	margin: 0 10px;
	font-size: 12px;
	color: var(--green2);
}

#main .wrap-main-page .wrap-post-info .wrap-address-post .address-post .address-post-item .address-post-link {
	color: var(--grey);
	font-weight: 500;
	font-size: 14px;
}

@media screen and (max-width: 480px) {
	#main .wrap-main-page .wrap-post-info .wrap-address-post .address-post .address-post-item .address-post-link {
		font-size: 12px;
	}
}

#main .wrap-main-page .wrap-post-info .wrap-address-post .address-post .address-post-item:last-child .address-post-link {
	color: var(--black);
}

#main .wrap-main-page .main-page .wrap-page-content .avatar-post-details {
	position: relative;
	width: 100%;
	height: 450px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	overflow: hidden;
}

@media screen and (max-width: 1200px) {
	#main .wrap-main-page .main-page {
		grid-template-columns: 2fr 1fr;
	}

	#main .wrap-main-page .main-page .wrap-page-content .avatar-post-details {
		height: 350px;
	}

	#main .wrap-main-page .main-page .wrap-page-sidebar {
		display: block;
		margin-top: 0;
	}
}

@media screen and (max-width: 1024px) {
	#main .wrap-main-page .main-page {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	#main .wrap-main-page .main-page .wrap-page-content .avatar-post-details {
		height: 440px;
	}

	#main .wrap-main-page .main-page .wrap-page-sidebar {
		margin-top: 50px;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 30px;
	}

	#main .wrap-main-page .main-page .wrap-page-sidebar>div {
		margin-top: 0;
	}
}

@media screen and (max-width: 768px) {
	#main .wrap-main-page .main-page .wrap-page-content .avatar-post-details {
		height: 350px;
	}
}

@media screen and (max-width: 600px) {
	#main .wrap-main-page .main-page .wrap-page-sidebar {
		grid-template-columns: repeat(1, 1fr);
	}
}

@media screen and (max-width: 480px) {
	#main .wrap-main-page .main-page .wrap-page-content .avatar-post-details {
		height: 250px;
	}

	#main .wrap-main-page .main-page .wrap-page-sidebar {
		margin-top: 30px;
	}
}

#main .wrap-main-page .main-page .wrap-page-content .wrap-date-and-comment,
#main .wrap-main-page .main-page .wrap-page-content .wrap-date-and-comment .comment {
	/* margin-top: 30px; */
	font-size: 18px;
	color: var(--grey);
	margin-bottom: 20px;
}

#main .wrap-main-page .main-page .wrap-page-content .wrap-date-and-comment .date {
	margin-right: 15px;
}

#main .wrap-main-page .main-page .wrap-page-content .wrap-date-and-comment .comment i {
	margin-right: 5px;
}

#main .wrap-main-page .main-page .wrap-page-content .avatar-post-details .tag-post-detail {
	position: absolute;
	z-index: 2;
	background-color: var(--green2);
	text-transform: uppercase;
	color: var(--colorWhite);
	font-weight: bold;
	padding: 7px 15px 8px;
	top: 30px;
	left: 30px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	font-size: 13px;
}

@media screen and (max-width: 768px) {
	#main .wrap-main-page .main-page .wrap-page-content .avatar-post-details .tag-post-detail {
		padding: 5px 13px 6px;
		top: 20px;
		left: 20px;
		font-size: 12px;
	}
}

@media screen and (max-width: 480px) {
	#main .wrap-main-page .main-page .wrap-page-content .avatar-post-details .tag-post-detail {
		padding: 5px 13px 6px;
		top: 15px;
		left: 15px;
		font-size: 10px;
	}
}

#main .wrap-main-page .main-page .wrap-page-content .avatar-post-details .tag-post-detail:hover {
	background-color: var(--green4);
}

#main .wrap-main-page .main-page .wrap-page-content article table {
	display: block;
	max-width: 100%;
	overflow-x: scroll;
}

#main .wrap-main-page .main-page .wrap-page-content article p {
	text-align: justify;
	color: var(--grey3);
	font-size: 16px;
	line-height: 25px;
	margin-bottom: 13px;
}

#main .wrap-main-page .main-page .wrap-page-content article p {
	text-align: justify;
	color: var(--grey3);
	font-size: 16px;
	line-height: 25px;
	margin-bottom: 13px;
}

#main .wrap-main-page .main-page .wrap-page-content .wrap-share-post-social {
	margin-top: 30px;
	display: flex;
	justify-content: flex-end;
}

#main .wrap-main-page .main-page .wrap-page-content .wrap-share-post-social .share-social .share-post-item {
	color: var(--green2);
	font-size: 16px;
}

#main .wrap-main-page .main-page .wrap-page-content .wrap-share-post-social .share-social .share-post-item:hover {
	color: var(--green4);
}

#main .wrap-main-page .main-page .wrap-page-content .wrap-share-post-social .share-social .share-post-item:not(:first-child) {
	margin-left: 15px;
}

#main .wrap-main-page .main-page .wrap-page-content .wrap-author {
	width: 100%;
	margin-top: 60px;
}

@media screen and (max-width: 480px) {
	#main .wrap-main-page .main-page .wrap-page-content .wrap-author {
		margin-top: 40px;
	}
}

#main .wrap-main-page .main-page .wrap-page-content .wrap-author .author {
	width: 100%;
	display: flex;
	background-color: var(--colorWhite);
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	overflow: hidden;
	padding: 35px;
}

@media screen and (max-width: 480px) {
	#main .wrap-main-page .main-page .wrap-page-content .wrap-author .author {
		flex-direction: column;
		padding: 30px 25px 35px;
		align-items: center;
	}
}

#main .wrap-main-page .main-page .wrap-page-content .wrap-author .author .author-avatar {
	width: 124px;
	height: 124px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	overflow: hidden;
	margin-right: 30px;
}

#app.arabic #main .wrap-main-page .main-page .wrap-page-content .wrap-author .author .author-avatar {
	margin-right: 0px;
	margin-left: 30px;
}

@media screen and (max-width: 480px) {
	#main .wrap-main-page .main-page .wrap-page-content .wrap-author .author .author-avatar {
		width: 80px;
		height: 80px;
		margin-right: 0px;
	}

	#app.arabic #main .wrap-main-page .main-page .wrap-page-content .wrap-author .author .author-avatar {
		margin-left: 0px;
	}
}

#main .wrap-main-page .main-page .wrap-page-content .wrap-author .author .author-info {
	width: 100%;
}

#main .wrap-main-page .main-page .wrap-page-content .wrap-author .author .author-info .author-name {
	font-size: 20px;
	color: var(--black);
	cursor: default;
}

@media screen and (max-width: 480px) {
	#main .wrap-main-page .main-page .wrap-page-content .wrap-author .author .author-info .author-name {
		font-size: 18px;
		text-align: center;
		margin-top: 15px;
	}
}

#main .wrap-main-page .main-page .wrap-page-content .wrap-author .author .author-info .author-introduce {
	margin: 20px 0;
	font-size: 15px;
	color: var(--grey);
	cursor: default;
}

@media screen and (max-width: 480px) {
	#main .wrap-main-page .main-page .wrap-page-content .wrap-author .author .author-info .author-introduce {
		margin: 10px 0;
		font-size: 12px;
		text-align: center;
	}
}

#main .wrap-main-page .main-page .wrap-page-content .wrap-author .author .author-info .author-link {
	color: var(--colorPrimary);
	font-weight: 500;
	font-size: 16px;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
}

@media screen and (max-width: 480px) {
	#main .wrap-main-page .main-page .wrap-page-content .wrap-author .author .author-info .author-link {
		font-size: 14px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

#main .wrap-main-page .main-page .wrap-page-content .wrap-author .author .author-info .author-link:hover {
	color: var(--green2);
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
}

#main .wrap-main-page .main-page .wrap-page-content .wrap-author .author .author-info .author-link i {
	margin-left: 20px;
}

@media screen and (max-width: 480px) {
	#main .wrap-main-page .main-page .wrap-page-content .wrap-author .author .author-info .author-link i {
		margin-top: 2px;
		margin-left: 10px;
	}
}

#main .wrap-main-page .main-page .wrap-page-content .wrap-recent-post {
	margin-top: 50px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 30px;
}

#main .wrap-main-page .main-page .wrap-page-content .wrap-recent-post .post-recent-item {
	display: flex;
	align-items: center;
}

#main .wrap-main-page .main-page .wrap-page-content .wrap-recent-post .post-recent-item:first-child .icon {
	margin-right: 20px;
}

#main .wrap-main-page .main-page .wrap-page-content .wrap-recent-post .post-recent-item:last-child {
	flex-direction: row-reverse;
}

#main .wrap-main-page .main-page .wrap-page-content .wrap-recent-post .post-recent-item:last-child .icon {
	margin-left: 20px;
}

#main .wrap-main-page .main-page .wrap-page-content .wrap-recent-post .post-recent-item:last-child .post-recent-content {
	text-align: end;
}

#main .wrap-main-page .main-page .wrap-page-content .wrap-recent-post .post-recent-item {
	color: var(--black);
	font-size: 16px;
}

@media screen and (max-width: 480px) {
	#main .wrap-main-page .main-page .wrap-page-content .wrap-recent-post .post-recent-item {
		display: flex;
		flex-direction: column !important;
		font-size: 14px;
		align-items: flex-start;
	}

	#main .wrap-main-page .main-page .wrap-page-content .wrap-recent-post .post-recent-item:last-child {
		align-items: flex-end;
	}

	#main .wrap-main-page .main-page .wrap-page-content .wrap-recent-post .post-recent-item .post-recent-content {
		margin-top: 3px;
	}
}

#main .wrap-main-page .main-page .wrap-page-content .wrap-recent-post .post-recent-item .post-recent-content .title {
	font-weight: 500;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
}

#main .wrap-main-page .main-page .wrap-page-content .wrap-recent-post .post-recent-item .post-recent-content .date {
	color: var(--grey);
	margin-top: 5px;
	font-size: 14px;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
}

@media screen and (max-width: 480px) {
	#main .wrap-main-page .main-page .wrap-page-content .wrap-recent-post .post-recent-item .post-recent-content .date {
		margin-top: 10px;
		font-size: 12px;
	}
}

#main .wrap-main-page .main-page .wrap-page-content .wrap-recent-post .post-recent-item:hover .title {
	color: var(--green2);
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
}

#main .wrap-main-page .main-page .wrap-page-content .wrap-recent-post .post-recent-item:hover .date {
	color: var(--black);
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
}

#main .wrap-main-page .main-page .wrap-page-content>.line {
	border: none;
	width: 100%;
	height: 1px;
	background-color: var(--grey2);
	margin-top: 30px;
}

@media screen and (max-width: 480px) {
	#main .wrap-main-page .main-page .wrap-page-content>.line {
		margin-top: 40px;
	}
}

#main .wrap-main-page .main-page .wrap-page-content .wrap-related-post,
#main .wrap-main-page .main-page .wrap-page-content .wrap-comment {
	margin-top: 60px;
}

@media screen and (max-width: 768px) {

	#main .wrap-main-page .main-page .wrap-page-content .wrap-related-post,
	#main .wrap-main-page .main-page .wrap-page-content .wrap-comment {
		margin-top: 40px;
	}
}

#main .wrap-main-page .main-page .wrap-page-content .wrap-related-post .title,
#main .wrap-main-page .main-page .wrap-page-content .wrap-comment .title {
	font-size: 30px;
}

@media screen and (max-width: 480px) {

	#main .wrap-main-page .main-page .wrap-page-content .wrap-related-post .title,
	#main .wrap-main-page .main-page .wrap-page-content .wrap-comment .title {
		font-size: 26px;
	}
}

#main .wrap-main-page .main-page .wrap-page-content .wrap-related-post .wrap-list-post {
	margin-top: 30px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 30px;
	padding-bottom: 20px;
}

@media screen and (max-width: 1200px) {
	#main .wrap-main-page .main-page .wrap-page-content .wrap-related-post .wrap-list-post .post-item .post-thumbnail .wrap-thumbnail {
		height: 200px;
	}

	#main .wrap-main-page .main-page .wrap-page-content .wrap-related-post .wrap-list-post .post-item .post-thumbnail .title-post h2 {
		font-size: 20px;
		line-height: 26px;
	}
}

@media screen and (max-width: 768px) {
	#main .wrap-main-page .main-page .wrap-page-content .wrap-related-post .wrap-list-post .post-item .post-thumbnail .wrap-thumbnail {
		height: 170px;
	}
}

@media screen and (max-width: 650px) {
	#main .wrap-main-page .main-page .wrap-page-content .wrap-related-post .wrap-list-post .post-item .post-thumbnail .wrap-thumbnail {
		height: 140px;
	}

	#main .wrap-main-page .main-page .wrap-page-content .wrap-related-post .wrap-list-post .post-item .post-thumbnail .post-content {
		padding: 15px 15px 20px;
	}

	#main .wrap-main-page .main-page .wrap-page-content .wrap-related-post .wrap-list-post .post-item .post-thumbnail .title-post h2 {
		font-size: 18px;
		line-height: 22px;
	}
}

@media screen and (max-width: 480px) {
	#main .wrap-main-page .main-page .wrap-page-content .wrap-related-post .wrap-list-post {
		grid-template-columns: repeat(1, 1fr);
		grid-row-gap: 30px;
	}

	#main .wrap-main-page .main-page .wrap-page-content .wrap-related-post .wrap-list-post .post-item .post-thumbnail .wrap-thumbnail {
		height: 170px;
	}
}

#main .wrap-main-page .main-page .wrap-page-content .wrap-comment .comment {
	margin-top: 30px;
}

#main .wrap-main-page .main-page .wrap-page-content .wrap-comment .comment form,
#main .wrap-main-page .main-page .wrap-page-content .wrap-comment .comment form .row {
	width: 100%;
}

#main .wrap-main-page .main-page .wrap-page-content .wrap-comment .comment form .row:first-child {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 15px;
	margin-bottom: 15px;
}

@media screen and (max-width: 480px) {
	#main .wrap-main-page .main-page .wrap-page-content .wrap-comment .comment form .row:first-child {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		grid-row-gap: 10px;
		margin-bottom: 10px;
	}
}

#main .wrap-main-page .main-page .wrap-page-content .wrap-comment .comment form .row textarea,
#main .wrap-main-page .main-page .wrap-page-content .wrap-comment .comment form .row input {
	width: 100%;
	border: none;
	outline: none;
	box-shadow: 0px 0px 49px 0px rgba(0, 0, 0, 0.1);
	padding: 15px 15px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	background-color: var(--colorWhite);
	font-size: 16px;
}

#main .wrap-main-page .main-page .wrap-page-content .wrap-comment .comment form .row textarea {
	height: 200px;
	resize: none;
}

#main .wrap-main-page .main-page .wrap-page-content .wrap-comment .comment form .btn-send-comment {
	margin-top: 30px;
	width: 200px;
	height: 50px;
	cursor: pointer;
	border: none;
	outline: none;
	background-color: var(--grey);
	color: var(--colorWhite);
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
}

@media screen and (max-width: 768px) {
	#main .wrap-main-page .main-page .wrap-page-content .wrap-comment .comment form .btn-send-comment {
		margin-top: 20px;
	}
}

@media screen and (max-width: 480px) {
	#main .wrap-main-page .main-page .wrap-page-content .wrap-comment .comment form .btn-send-comment {
		width: 150px;
		height: 40px;
		font-size: 14px;
	}
}

#main .wrap-main-page .main-page .wrap-page-content .wrap-comment .comment form .btn-send-comment:hover {
	background-color: var(--green2);
	color: var(--black);
	font-weight: bold;
}

/*=====================================================
PAGE CATEGORY
=====================================================*/

#main.category .wrap-main-page .main-page .wrap-page-content .wrap-list-post {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 30px;
}

#main.category .wrap-main-page .main-page .wrap-page-content .post-thumbnail.have-description .description-post {
	font-size: 16px;
	color: var(--grey);
	margin-top: 15px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}

@media screen and (max-width: 1200px) {
	#main.category .wrap-main-page .main-page .wrap-page-content .post-thumbnail.have-description .post-content {
		padding: 20px 20px 30px;
	}

	#main.category .wrap-main-page .main-page .wrap-page-content .post-thumbnail.have-description .wrap-thumbnail {
		height: 200px;
	}

	#main.category .wrap-main-page .main-page .wrap-page-content .post-thumbnail.have-description .title-post h2 {
		font-size: 22px;
		line-height: 27px;
		-webkit-line-clamp: 4;
	}

	#main.category .wrap-main-page .main-page .wrap-page-content .post-thumbnail.have-description .description-post {
		font-size: 14px;
		margin-top: 10px;
	}
}

@media screen and (max-width: 600px) {
	#main.category .wrap-main-page .main-page .wrap-page-content .wrap-list-post {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		grid-gap: 30px;
	}
}

#main.category .wrap-main-page .main-page .wrap-page-content .wrap-pagination {
	margin-top: 80px;
}

@media screen and (max-width: 600px) {
	#main.category .wrap-main-page .main-page .wrap-page-content .wrap-pagination {
		margin-top: 50px;
	}
}

/*=================================== CSS BỔ SUNG =====================================*/

/*==========================
UI COMMENT POST DETAILS
===========================*/

#main .wrap-main-page.page-details .wrap-list-comment .title {
	margin-top: 50px;
}

#main .wrap-main-page.page-details .wrap-list-comment .list-comment .comment-item .comment-user {
	display: flex;
	flex-direction: column;
	margin-top: 25px;
}

#main .wrap-main-page.page-details .wrap-list-comment .list-comment>.comment-item:not(:first-child) {
	margin-top: 30px;
}

#main .wrap-main-page.page-details .wrap-list-comment .list-comment .comment-item .name-user {
	font-weight: bold;
	font-size: 18px;
}

#main .wrap-main-page.page-details .wrap-list-comment .list-comment .comment-item .date-comment {
	font-size: 12px;
	color: var(--grey);
}

#main .wrap-main-page.page-details .wrap-list-comment .list-comment .comment-item .content-comment {
	margin-top: 10px;
	margin-bottom: 10px;
}

#main .wrap-main-page.page-details .wrap-list-comment .list-comment .comment-item .btn-rep-comment {
	background-color: var(--green2);
	color: var(--colorWhite);
	font-size: 14px;
	padding: 3px 8px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	cursor: pointer;
}

#main .wrap-main-page.page-details .wrap-list-comment .list-comment .comment-item .sub-comment {
	margin-left: 40px;
	margin-top: 15x;
}

#main .wrap-main-page.page-details .wrap-list-comment .list-comment .comment-item .sub-comment .info-comment {
	margin-top: 15px;
}

@media screen and (min-width: 1024px) {
	#main.page-result-search .wrap-main-page .main-page {
		grid-template-columns: 1fr;
	}

	#main.category.page-result-search .wrap-main-page .main-page .wrap-page-content .wrap-list-post {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ============================================
MENU DROP DOWN
============================================= */

.wrap-main-menu .menu-content .menu-item {
	position: relative;
}

.wrap-main-menu .menu-content .menu-item .wrap-sub-menu {
	position: absolute;
	bottom: 0;
	transform: translateY(100%);
	-webkit-transform: translateY(100%);
	-moz-transform: translateY(100%);
	-ms-transform: translateY(100%);
	-o-transform: translateY(100%);
	min-width: 200px;
	left: 0;
	z-index: 1000;
	display: none;
}

.wrap-main-menu .menu-content .menu-item:hover>.wrap-sub-menu {
	display: block !important;
}

.wrap-main-menu .menu-content .wrap-sub-menu .menu-item {
	height: 40px;
	display: flex;
	align-items: center;
	background-color: floralwhite;
	/* border-left  : 1px solid var(--green2);
    border-right    : 1px solid var(--green2);
    border-bottom   : 1px solid var(--green2); */
}

.wrap-main-menu .menu-content .wrap-sub-menu .menu-item:not(:first-child) {
	/* border: 1px solid var(--green2); */
	border-top: none;
}

.wrap-main-menu .menu-content .menu-item .wrap-sub-menu .sub-menu-link {
	color: var(--black);
	font-size: 16px;
	font-weight: bold;
}

.wrap-main-menu .menu-content .menu-item .wrap-sub-menu .sub-menu-link:hover {
	color: var(--green2);
}

.tag-author-card {
	color: black;
}

.wrap-main-menu .menu-content .menu-item .wrap-sub-menu .menu-item .wrap-sub-menu {
	transform: translateX(100%);
	-webkit-transform: translateX(100%);
	-moz-transform: translateX(100%);
	-ms-transform: translateX(100%);
	-o-transform: translateX(100%);
	top: 0;
}

/* MENU RESPONSIVE */

.wrap-menu-content-responsive .menu-content-respon .menu-link-respon .link-respon {
	color: var(--colorWhite);
	width: 100%;
	font-size: 18px;
	display: flex;
	justify-content: space-between;
}

.wrap-menu-content-responsive .menu-link-respon {
	width: 100%;
	position: relative;
}

.wrap-menu-content-responsive .menu-link-respon a {
	color: var(--colorWhite);
	/* border: 1px solid red; */
}

.wrap-menu-content-responsive .menu-link-respon a:hover {
	color: var(--green4);
}

.wrap-menu-content-responsive .menu-link-respon label {
	border: 1px solid var(--colorWhite);
	width: 50px;
	text-align: right;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 25px;
}

.wrap-menu-content-responsive .menu-link-respon label:hover {
	border: 1px solid var(--green4);
}

.wrap-menu-content-responsive .menu-link-respon label i {
	font-size: 14px;
}

.wrap-menu-content-responsive .menu-link-respon label:hover i {
	color: var(--green4);
}

.wrap-menu-content-responsive .menu-link-respon .wrap-sub-menu-respon {
	position: absolute;
	display: none;
	padding-left: 5%;
}

.wrap-menu-content-responsive .menu-link-respon .wrap-sub-menu-respon .menu-link-respon .link-respon {
	height: 40px;
	align-items: center;
}

/* tam */

.menu-content-respon .menu-link-respon input[name="open_sub_menu"]:checked~.wrap-sub-menu-respon {
	display: block !important;
	position: relative !important;
}

/* AUTHOR CARD */

.brkv-author-card {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	transition: 0.3s;
	width: 100%;
	position: relative;
	margin: 20px auto;
	margin-top: 0;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	background-color: white;
	border-radius: 7px;
}

.brkv-author-card:hover {
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.brkv-author-card .image-container {
	padding: 2px 16px;
	overflow: hidden;
}

.brkv-author-card img {
	border-top-left-radius: 7px;
	width: 100%;
	border-top-right-radius: 7px;
}

.brkv-author-card .tag-container {
	position: absolute;
	top: 30px;
	right: 0;
}

.brkv-author-card .tag-container .tag {
	font-size: 16px;
	background-color: white;
	height: 30px;
	margin-bottom: 7px;
	border-radius: 5px;
	transform: translateX(10px);
	position: relative;
	display: flex;
	z-index: 1;
	-webkit-box-shadow: -3px 3px 6px 0px rgba(0, 0, 0, 0.75);
	-moz-box-shadow: -3px 3px 6px 0px rgba(0, 0, 0, 0.75);
	box-shadow: -3px 3px 6px 0px rgba(0, 0, 0, 0.75);
	border-top-left-radius: 7px;
	border-bottom-left-radius: 7px;
}

.brkv-author-card .tag-container .tag:after {
	width: 10px;
	height: 10px;
	background-color: rgb(61, 61, 61);
	transform: rotate(45deg);
	bottom: -6px;
	right: 5px;
	z-index: -10;
	display: block;
	position: absolute;
	content: "";
}

.brkv-author-card .tag-container .title {
	width: 100%;
	height: 100%;
	background-color: white;
	font-size: 16px;
	position: relative;
	display: block;
	line-height: 30px;
	padding: 0 12px;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}

.brkv-author-card .author-name {
	font-size: 25px;
	font-weight: 600;
	margin: 5px 0;
	display: block;
	text-transform: uppercase;
}

.brkv-author-card .position {
	margin-bottom: 20px;
}

/* ------------ TOP SAN FOREX ----------*/

.brokers-table-wrapper .brokers-table-content-wrapper .brokers-table-content .table-row img {
	width: 77px;
	height: auto;
}

.brokers-table-wrapper {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	display: block;
	position: sticky;
	position: --webkit-sticky;
	margin-top: 20px;
	top: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	width: 100%;
	border-radius: 7px;
	background: rgb(216, 216, 216);
	box-sizing: border-box;
	padding-bottom: 17px;
}

.brokers-table-wrapper .brokers-table-title-wrapper {
	width: 90%;
	margin: auto;
	border-bottom: 1px solid var(--grey3);
	height: 57px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	text-transform: uppercase;
}

.brokers-table-wrapper .brokers-table-content-wrapper {
	width: 90%;
	margin: auto;
	margin-top: 20px;
}

.brokers-table-wrapper .brokers-table-content-wrapper .brokers-table-content {
	width: 100%;
	display: block;
	position: relative;
	margin-bottom: 7px;
}

.brokers-table-wrapper .brokers-table-content-wrapper .brokers-table-content .table-row {
	display: grid;
	grid-template-columns: 90px 1fr;
	grid-template-rows: 30.5px 30.5px;
	gap: 0px 13px;
}

.brokers-table-wrapper .brokers-table-content-wrapper .brokers-table-content .table-row a {
	text-decoration: none;
	color: inherit;
}

.brokers-table-wrapper .brokers-table-content-wrapper .brokers-table-content .table-row .img-wrapper {
	border: 2px dashed red;
	grid-area: 1 / 1 / 3 / 2;
	display: flex;
	justify-content: center;
	align-items: center;
}

.brokers-table-wrapper .brokers-table-content-wrapper .brokers-table-content .table-row .buttons-wrapper {
	justify-content: flex-start;
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	grid-area: 2 / 2 / 3 / 3;
	max-width: 170px;
}

.brokers-table-wrapper .brokers-table-content-wrapper .brokers-table-content .table-row .buttons-wrapper .btn {
	width: 80px;
	height: 90%;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 3px;
	font-size: 0.9em;
}

.brokers-table-wrapper .brokers-table-content-wrapper .brokers-table-content .table-row .buttons-wrapper .btn:hover {
	transition: all 0.1s linear;
	transform-origin: center;
	transform: scale(0.95);
	filter: brightness(1.2);
}

.brokers-table-wrapper .brokers-table-content-wrapper .brokers-table-content .table-row .buttons-wrapper .btn.btn-review {
	background-color: whitesmoke;
}

.brokers-table-wrapper .brokers-table-content-wrapper .brokers-table-content .table-row .buttons-wrapper .btn.btn-website {
	background-color: var(--green);
	color: white;
	position: relative;
}

.brokers-table-wrapper .brokers-table-content-wrapper .brokers-table-content .table-row .buttons-wrapper .btn.btn-website:before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: -1;
	padding: 2px;
	border-radius: 3px;
	border: dashed 2px red;
}

.brokers-table-wrapper .brokers-table-content-wrapper .brokers-table-content .table-row .title-wrapper {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	grid-area: 1 / 2 / 2 / 3;
	font-weight: 600;
}

/*--------- VIDEO ---------*/

.video-player-wrapper {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	position: fixed;
	z-index: 2000;
	background-color: rgb(0, 0, 0, 0.5);
	top: 0;
	left: 0;
	display: none;
	justify-content: center;
	align-items: center;
}

.video-player-wrapper.active {
	display: flex;
}

.video-player-wrapper .video-player {
	width: 90%;
	max-width: 860px;
	height: auto;
	display: flex;
	min-height: 400px;
	background-color: white;
	position: relative;
}

.video-player-wrapper .video-player #youtube-video-player {
	width: 100%;
}

@media screen and (max-width: 600px) {
	.video-player-wrapper .video-player {
		min-height: 300px;
	}
}

/* title h4 video */

.post-video .txt_post {
	color: var(--colorWhite);
	font-size: 30px;
	font-weight: bold;
	line-height: 40px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	margin-top: 10px;
}

@media screen and (max-width: 1200px) {
	.post-trending .wrap-post .post-content .title-post h2 {
		font-size: 26px;
		line-height: 35px;
		margin-top: 8px;
	}
}

@media screen and (max-width: 990px) {
	.post-trending .wrap-post .post-content .title-post h2 {
		font-size: 28px;
		line-height: 38px;
	}
}

@media screen and (max-width: 768px) {
	.post-trending .wrap-post .post-content .title-post h2 {
		font-size: 25px;
		line-height: 32px;
	}
}

@media screen and (max-width: 480px) {
	.post-trending .wrap-post .post-content .title-post h2 {
		font-size: 18px;
		line-height: 20px;
		-webkit-line-clamp: 2;
	}
}

/* fix css author card */
.brkv-author-card .txt_author {
	font-size: 16px;
	font-weight: 400;
}

/* fix css article */
article iframe {
	width: 100%;
}

article ul,
article ol {
	margin-left: 10%;
}

article ul {
	list-style: unset;
}

article table {
	margin: 0 auto;
}

@media screen and (max-width: 700px) {
	article table {
		font-size: 3.2vw;
	}
}

article.text_thailand p {
	text-align: unset !important;
}

/* fix author margin top page details */
#main .wrap-main-page.page-details .main-page .wrap-page-sidebar {
	margin-top: 55px;
}

/*
NEW SIDE BAR
*/

.new_sidebar_exness {
	position: sticky;
	top: 5rem;
	margin-top: 20px;
	/* background-color: var(--blue); */
	height: fit-content;
	/* padding: 2rem; */
	/* border-radius: 10px; */
	/* box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); */
}

.new_sidebar_exness .wrap_contentsidebar {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.new_sidebar_exness .title_sidebarNew {
	font-size: 22px;
	font-weight: bold;
	text-align: center;
	color: var(--colorWhite);
}

.new_sidebar_exness .wrap_tab_exness {
	border-bottom: 1px solid #ffcf01;
	display: flex;
	width: 100%;
	margin-top: 1.5rem;
}

.new_sidebar_exness .wrap_tab_exness .tab_exn-item {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	width: 100%;
	background-color: transparent;
	height: 40px;
	text-align: center;
	cursor: pointer;
	color: var(--green2);
	padding: 0 3px;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}

input[name="sidebar_exness"][id="exn_tab-1"]:checked~.wrap_tab_exness label[for="exn_tab-1"],
input[name="sidebar_exness"][id="exn_tab-2"]:checked~.wrap_tab_exness label[for="exn_tab-2"],
input[name="sidebar_exness"][id="exn_tab-3"]:checked~.wrap_tab_exness label[for="exn_tab-3"],
input[name="sidebar_exness"][id="exn_tab-4"]:checked~.wrap_tab_exness label[for="exn_tab-4"],
input[name="sidebar_exness"][id="exn_tab-5"]:checked~.wrap_tab_exness label[for="exn_tab-5"],
input[name="sidebar_exness_mobile"][id="exn_tab_mobile-1"]:checked~.wrap_tab_exness label[for="exn_tab_mobile-1"],
input[name="sidebar_exness_mobile"][id="exn_tab_mobile-2"]:checked~.wrap_tab_exness label[for="exn_tab_mobile-2"],
input[name="sidebar_exness_mobile"][id="exn_tab_mobile-3"]:checked~.wrap_tab_exness label[for="exn_tab_mobile-3"],
input[name="sidebar_exness_mobile"][id="exn_tab_mobile-4"]:checked~.wrap_tab_exness label[for="exn_tab_mobile-4"],
input[name="sidebar_exness_mobile"][id="exn_tab_mobile-5"]:checked~.wrap_tab_exness label[for="exn_tab_mobile-5"] {
	background-color: #ffcf01;
	font-weight: bold;
	color: var(--black);
}

.txt_align_left {
	text-align: left;
}

.txt_align_center {
	text-align: center;
}

.txt_align_right {
	text-align: right;
}

.new_sidebar_exness .wrap_content_tab_exn {
	width: 100%;
	margin-top: 1rem;
}

.new_sidebar_exness .wrap_content_tab_exn .row_content_enx {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: center;
}

.new_sidebar_exness .wrap_content_tab_exn .title_content_enx {
	font-size: 12px;
	font-weight: bold;
	color: var(--colorWhite);
}

.new_sidebar_exness .content_tab_enx {
	margin-top: 0.8rem;
}

.new_sidebar_exness .content_tab_enx .txt_content_item {
	font-size: 14px;
	color: var(--colorWhite);
}

.new_sidebar_exness .content_tab_enx .link_enx {
	display: flex;
	background-color: #ffcf01;
	font-weight: bold;
	width: 100%;
	height: 35px;
	color: #000000;
	text-decoration: none;
	justify-content: center;
	align-items: center;
	font-size: 14px;
	border-radius: 5px;
	text-align: center;
	padding: 5px;
}

.new_sidebar_exness .content_tab_enx .link_enx:hover {
	background-color: #ffde50;
}

.new_sidebar_exness .wrap_content_tab_exn .line_row_enx {
	border: none;
	outline: none;
	width: 100%;
	height: 0.5px;
	background-color: #e8dfdf;
	margin: 10px 0;
}

.new_sidebar_exness .content_tab_enx .content_tab_item_enx {
	display: none;
}

input[name="sidebar_exness"][id="exn_tab-1"]:checked~.wrap_content_tab_exn .content_tab_enx .content_tab_item_enx.content_exn_1,
input[name="sidebar_exness"][id="exn_tab-2"]:checked~.wrap_content_tab_exn .content_tab_enx .content_tab_item_enx.content_exn_2,
input[name="sidebar_exness"][id="exn_tab-3"]:checked~.wrap_content_tab_exn .content_tab_enx .content_tab_item_enx.content_exn_3,
input[name="sidebar_exness"][id="exn_tab-4"]:checked~.wrap_content_tab_exn .content_tab_enx .content_tab_item_enx.content_exn_4,
input[name="sidebar_exness"][id="exn_tab-5"]:checked~.wrap_content_tab_exn .content_tab_enx .content_tab_item_enx.content_exn_5,
input[name="sidebar_exness_mobile"][id="exn_tab_mobile-1"]:checked~.wrap_content_tab_exn .content_tab_enx .content_tab_item_enx.content_exn_1,
input[name="sidebar_exness_mobile"][id="exn_tab_mobile-2"]:checked~.wrap_content_tab_exn .content_tab_enx .content_tab_item_enx.content_exn_2,
input[name="sidebar_exness_mobile"][id="exn_tab_mobile-3"]:checked~.wrap_content_tab_exn .content_tab_enx .content_tab_item_enx.content_exn_3,
input[name="sidebar_exness_mobile"][id="exn_tab_mobile-4"]:checked~.wrap_content_tab_exn .content_tab_enx .content_tab_item_enx.content_exn_4,
input[name="sidebar_exness_mobile"][id="exn_tab_mobile-5"]:checked~.wrap_content_tab_exn .content_tab_enx .content_tab_item_enx.content_exn_5 {
	display: block;
}

@media screen and (max-width: 500px) {
	.new_sidebar_exness {
		/* padding: 1.5rem 1rem; */
	}

	.new_sidebar_exness .title_sidebarNew {
		font-size: 20px;
	}

	.new_sidebar_exness .wrap_tab_exness .tab_exn-item,
	.new_sidebar_exness .wrap_content_tab_exn .title_content_enx {
		font-size: 10px;
	}

	.new_sidebar_exness .content_tab_enx .txt_content_item,
	.new_sidebar_exness .content_tab_enx .link_enx {
		font-size: 12px;
	}
}

/*
* TOC
*/
.wrap_toc ol {
	counter-reset: section;
	list-style-type: none;
	padding-left: 0;
}

/* CSS title */
.wrap_toc ol li:before {
	color: #26292d !important;
	counter-increment: section;
	font-weight: 700;
	content: counters(section, ".") ". ";
}

.wrap_toc ul {
	counter-reset: section;
	list-style-type: lower-alpha;
}

.wrap_toc ul li:before {
	counter-increment: section;
	content: "";
}

.wrap_toc ul li::marker {
	/* CSS abc */
	color: #26292d !important;
	font-weight: bold;
}

article .wrap_toc>ol {
	margin-left: unset;
}

article .wrap_toc>ol li>ol {
	margin-left: 5%;
}

.wrap_toc .tilte_toc {
	color: #26292d;
	font-weight: bold;
}

.wrap_toc .tilte_toc:hover {
	text-decoration: underline;
}

.wrap_toc_article {
	padding: 1rem;
	background-color: #e9e9e9;
	border-radius: 10px;
}

.wrap_toc_article .open_wrap_toc {}

.wrap_toc {
	display: none;
	margin-top: 1rem;
}

.wrap_toc_article .wrap_control_toc {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
}

.wrap_toc_article .wrap_control_toc .overlay_toc {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	height: 100%;
	display: block;
	opacity: 0;
}

.wrap_toc_article .wrap_control_toc .title_post_toc {
	margin-bottom: 0 !important;
	font-weight: bold;
	color: var(--black) !important;
}

.wrap_toc_article .wrap_control_toc label[for="open_wrap_toc"] {
	cursor: pointer;
	font-size: 1.2rem;
	transition: all 0.3s;
}

input[id="open_wrap_toc"]:checked~.wrap_toc {
	display: block;
}

input[id="open_wrap_toc"]:checked~.wrap_control_toc label[for="open_wrap_toc"].arrow_toc {
	transform: rotate(-180deg);
	transition: all 0.3s;
}

#toc {
	/* background-color: var(--blue); */
	background-color: rgba(0, 0, 0, 0.7);
	padding: 2rem;
	border-radius: 10px;
	box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
}

#toc p {
	color: white !important;
}

#toc ol li a {
	color: var(--green2);
}

#toc ol li::marker {
	color: var(--green2);
}

.table-sidebar-wrapper {
	margin-top: 20px;
	background-color: var(--blue);
	height: 590px;
	padding: 2rem;
	border-radius: 10px;
	box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
}