:root {
	--mau-naudam: #aa6a09;
	--mau-naunhat: #f2c98d;
}

.navbar {
	background: var(--mau-naunhat);
	font-size: 25px;
}

/* Thiết lập mặc định cho nav-link */
.navbar-nav .nav-link {
	color: black !important;
	/* Màu mặc định khi chưa active */
	font-weight: normal;
	background-color: transparent;
	transition: all 0.3s ease;
}

/* Khi active */
.navbar-nav .nav-link.active {
	color: white !important;
	/* ✅ Bắt buộc !important để ghi đè Bootstrap */
	font-weight: bold;
	background-color: var(--mau-naudam);
	border-radius: 5px;
	padding: 5px 10px;
}

/* Khi hover (kể cả active hay không) */
.navbar-nav .nav-link:hover {
	color: white !important;
	/* ✅ trắng khi hover */
	background-color: var(--mau-naudam) !important;
	font-weight: bold;
}

/*Footer*/
footer {
	margin: 10px;
}


h1 {
	text-align: center;
	font-size: 100px;
	font-weight: 800;
	font-family: 'Lavishly Yours', cursive;
	letter-spacing: 10px;
}

h1 a {
	text-decoration: none;
	color: var(--mau-naudam);
}

h3 {
	font-family: 'Lavishly Yours', cursive;
	font-size: 50px;
}

h4 {
	padding: 20px;
	text-align: center;
	font-size: 40px;
	background: var(--mau-naunhat);
	font-family: 'Caveat', cursive !important;
}

/* hover card trang chủ */
.hover-card {
	cursor: pointer;
	transition: all 0.3s ease;
}

.hover-card .icon-title,
.hover-card .icon-desc {
	transition: color 0.3s ease;
}

.hover-card:hover .icon-title,
.hover-card:hover .icon-desc {
	color: var(--mau-naudam);
}

/*Ảnh vuông*/

.square-img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/*Đưa bài viết chi tiết vào giữa và căn để 2 bên nội dung*/
.text-justify {
    text-align: justify;
}

.main-blog {
    width: 90%;
    max-width: none;
    margin: auto;
}

#formSearch .btn {
	color: var(--mau-naudam)
}

img {
	max-width: 100%;
}

.main-banner {
	width: 100%;
	height: 50vh;
	background: url("../img/welcome.jpg") center;
	background-size: 100%;
}

.main-blog-card {
	width: 90%;
}

.category-aside {
	width: 100%;
}

.aside-main {
	width: 30%;
}

.w-450 {
	width: 450px;
}

.vh-100 {
	min-height: 100vh;
}

/*admin*/
.section-1 {
	width: 100%;
	padding: 15px;
}

.main-table {
	width: 90%;
	max-width: 700px;
}

.react-btns i {
	font-size: 24px;
	color: #222;
	cursor: pointer;
}

.react-btns a {
	text-decoration: none;
	color: #222;
	cursor: pointer;
}

.react-btns a:hover {
	opacity: .8;
}

.react-btns .like:hover {
	color: #0088FF;
}

.react-btns .liked {
	color: #0088FF;
}

.comments .comment span {
	color: #0088FF;
}

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

	/* For mobile phones: */
	.aside-main {
		display: none;
	}

	.main-blog {
		width: 100%;
	}

	.main-blog-card {
		width: 100%;
	}
}