@import url("reset.css");
@import url("utils.css");
@import url("flex.css");
@import url("typography.css");

header {
	padding: calc(16px * var(--ratio)) 0;
}
header .logo {
	width: calc(200px * var(--ratio));
}
header .main-menu li {
	padding: 0 calc(16px * var(--ratio));
	font-family: "1FTV VIP Inflammable Age";
	font-size: calc(20px * var(--ratio));
}
footer {
	position: relative;
}
footer .heading {
	font-weight: 600;
}
.footer-col {
	width: calc(320px * var(--ratio));
}
footer .footer-col ul {
	margin-left: calc(24px * var(--ratio));
}
footer .social-row {
	display: flex;
	width: calc(302px * var(--ratio));
	gap: calc(16px * var(--ratio));
	padding: calc(24px * var(--ratio)) 0;
	justify-content: center;
}
footer .social-row a {
	width: calc(60px * var(--ratio));
}
footer .footer-bottom {
	position: absolute;
	z-index: 5;
	background-image: url(../images/footer-bottom.svg);
	background-size: cover;
	bottom: 0;
	width: 100%;
	height: calc(40px * var(--ratio));
}
.title-area {
	width: calc(960px * var(--ratio));
	margin: 0 auto;
}
.title-area.area2 {
	width: calc(640px * var(--ratio));
	margin: 0 auto;
}
.title-area .decor {
	width: calc(100px * var(--ratio));
}
h2.title {
	font-family: "UTM Davida";
	font-size: calc(50px * var(--ratio));
	line-height: calc(60px * var(--ratio));
}
.title-area .subtitle {
	width: 80%;
	margin: 0 auto;
	padding-top: calc(16px * var(--ratio));
	text-align: center;
}

.btn-contact {
	background-size: cover; /* Điều chỉnh kích thước hình cho phù hợp với nút */
	background-position: center; /* Đặt hình ở giữa nút */
	border: none; /* Bỏ đường viền nút */
	color: var(--color-red); /* Màu chữ */
	padding: calc(22px * var(--ratio)) calc(32px * var(--ratio))
		calc(10px * var(--ratio));
	text-align: center;
	text-decoration: none;
	display: block;
	font-size: calc(24px * var(--ratio));
	cursor: pointer;

	width: calc(260px * var(--ratio));
	margin: 0 auto;
}

#section-2 .p {
	width: calc(90px * var(--ratio));
}

#section-2 .c {
	width: calc(120px * var(--ratio));
	margin: calc(16px * var(--ratio)) auto;
}

h1 {
	font-family: "UTM Davida";
	font-size: calc(100px * var(--ratio));
	line-height: calc(120px * var(--ratio));
}

#hero.page-title {
	height: calc(960px * var(--ratio));
}

#hero.page-title .content {
	height: 100%;
	position: relative;
	background-size: contain;
}

#hero.page-title .content .page-title-bottom {
	position: absolute;
	z-index: 5;
	background-image: url(../images/page-title-bottom.svg);
	background-size: cover;
	bottom: 0;
	width: 100%;
	height: calc(160px * var(--ratio));
}
#hero.page-title .text {
	padding-top: calc(160px * var(--ratio));
	width: 50%;
}

#hero.page-title .subtitle {
	font-family: "UTM Davida";
	font-size: calc(50px * var(--ratio));
	line-height: calc(60px * var(--ratio));
}

#contact .contact-info .heading {
	font-family: "1FTV VIP Inflammable Age";
	font-size: calc(32px * var(--ratio));
	line-height: calc(46px * var(--ratio));
	color: var(--color-orange);
}

#contact .contact-info ul {
	margin-left: calc(32px * var(--ratio));
	margin-bottom: calc(32px * var(--ratio));
}

#contact .map .img {
	width: calc(600px * var(--ratio));
}

#culture-2 .card {
	position: relative;
	background-color: var(--color-red);
	margin: 0 calc(64px * var(--ratio));
	padding: calc(48px * var(--ratio)) calc(48px * var(--ratio));
}

#culture-2 .card .box-decor {
	position: absolute;
	z-index: 5;
	background-image: url(../images/decor-box.svg);
	background-size: cover;
	bottom: 0;
	left: 0;
	width: 100%;
	height: calc(60px * var(--ratio));
}

#culture-2 .card .title {
	color: var(--color-yellow);
	font-family: "UTM Davida";
	font-size: calc(32px * var(--ratio));
	line-height: calc(40px * var(--ratio));
	text-align: center;
	text-transform: uppercase;
}

#culture-2 .card .description {
	color: white;
	padding: calc(32px * var(--ratio)) 0;
}
#grow-2 .content {
	width: calc(960px * var(--ratio));
	margin: 0 auto;
	text-align: center;
	font-size: calc(20px * var(--ratio));
	line-height: calc(30px * var(--ratio));
}

#posts-1 .card {
	background-color: var(--color-red);
	position: relative;
	padding-bottom: calc(60px * var(--ratio));
}
#posts-1 .card .title {
	color: var(--color-yellow);
	font-size: calc(24px * var(--ratio));
	line-height: calc(30px * var(--ratio));
	text-align: center;
	text-transform: uppercase;
	padding: calc(16px * var(--ratio));
}

#posts-1 .card a,
#posts-1 .card a:visited {
	color: var(--color-yellow);
}

#posts-1 .card .description {
	padding: 0 calc(24px * var(--ratio)) calc(16px * var(--ratio));
}
#posts-1 .card .decor {
	position: absolute;
	z-index: 5;
	background-image: url(../images/decor-box.svg);
	background-size: cover;
	bottom: 0;
	left: 0;
	width: 100%;
	height: calc(60px * var(--ratio));
}

#posts #sidebar h3 {
	color: var(--color-yellow);
	font-family: "UTM Davida";
	font-size: calc(24px * var(--ratio));
	line-height: calc(30px * var(--ratio));
	text-align: center;
	text-transform: uppercase;
	margin-bottom: calc(24px * var(--ratio));
}
#posts #sidebar .box {
	background-color: var(--color-red);
	padding: calc(16px * var(--ratio));
	margin-bottom: calc(24px * var(--ratio));
}
#posts #sidebar .box a,
#posts #sidebar .box a:visited {
	color: var(--color-yellow);
}
#posts #sidebar .categories li {
	padding: 0 calc(16px * var(--ratio));
	color: var(--color-yellow);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-bottom: calc(16px * var(--ratio));
}

#posts .card-2 {
	display: flex;
	align-items: center;
	margin-bottom: calc(16px * var(--ratio));
}
#posts .card-2 .img {
	flex-shrink: 0;
	width: calc(120px * var(--ratio));
	margin-right: calc(16px * var(--ratio));
}

article#post-content h1 {
	font-size: calc(50px * var(--ratio));
	line-height: calc(60px * var(--ratio));
	margin-bottom: calc(32px * var(--ratio));
}
article#post-content p {
	padding: 8px 0;
}
article#post-content img {
	width: 80%;
	margin: 0 auto;
}

article#post-content figure {
	width: 80%;
	margin: 0 auto;
	padding: 8px 0;
}

article#post-content figure img {
	width: 100%;
}

article#post-content figure figcaption {
	font-style: italic;
	text-align: center;
	width: 90%;
	margin: 0 auto;
}

#posts-2 .card {
	background-color: var(--color-red);
	position: relative;
	padding-bottom: calc(60px * var(--ratio));
	border: 1px solid var(--color-yellow);
}
#posts-2 .card .title {
	color: var(--color-yellow);
	font-size: calc(24px * var(--ratio));
	line-height: calc(30px * var(--ratio));
	text-align: center;
	text-transform: uppercase;
	padding: calc(16px * var(--ratio));
}

#posts-2 .card a,
#posts-2 .card a:visited {
	color: var(--color-yellow);
}

#posts-2 .card .description {
	padding: 0 calc(24px * var(--ratio)) calc(16px * var(--ratio));
}
#posts-2 .card .decor {
	position: absolute;
	z-index: 5;
	background-image: url(../images/decor-box.svg);
	background-size: cover;
	bottom: 0;
	left: 0;
	width: 100%;
	height: calc(60px * var(--ratio));
}

.course-area .card {
	background-color: var(--color-red);
	position: relative;
	padding-bottom: calc(60px * var(--ratio));
	border: 1px solid var(--color-yellow);
	color: var(--color-yellow);
}

.course-area .card .title {
	color: var(--color-yellow);
	font-family: "UTM Davida";
	font-size: calc(24px * var(--ratio));
	line-height: calc(32px * var(--ratio));
	padding: calc(48px * var(--ratio)) calc(24px * var(--ratio));
	text-align: center;
	width: 80%;
	margin: 0 auto;
}
.course-area .card .title a,
.course-area .card .title:visited {
	color: var(--color-yellow);
}

.course-area .card .description {
	padding: 0 calc(24px * var(--ratio)) calc(16px * var(--ratio));
	width: 80%;
	margin: 0 auto;
}
.course-area .card .decor {
	position: absolute;
	z-index: 5;
	background-image: url(../images/decor-box.svg);
	background-size: cover;
	bottom: 0;
	left: 0;
	width: 100%;
	height: calc(60px * var(--ratio));
}
.course-area .card.bg-green {
	background-color: var(--color-green);
}