@import url('reset.css') layer(reset);

:root {
	--bv-jw-ff: 'Oswald', sans-serif;
	--bv-jw-primary-color: rgb(0, 66, 80);
	--bv-jw-accent-color: #00a9b7;
	--bv-jw-secondary-color: #a3b260;
	--bv-jw-primary-color-spectral: 0, 66, 80;

	--fixed-header-height: 60px;

	/* Line height */
	--lh-xs: 1.2;
	--lh-sm: 1.4;
	--lh-base: 1.5;
	--lh-md: 1.6;

	/* Letter spacing */
	--ls-sm: 0.5px;
	--ls-base: 0.5px;
	--ls-md: 0.5px;
	--ls-lg: calc(2% * 38px);

	/* Font-size */
	--fs-sm: clamp(0.8rem, 0.34vi + 0.72rem, 0.94rem);
	--fs-upper-sm: clamp(0.9rem, 0.48vi + 0.86rem, 1.25rem);
	--fs-base: clamp(1rem, 0.63vi + 0.86rem, 1.25rem);
	--fs-upper-base: clamp(1.125rem, 0.84vi + 0.91rem, 1.33rem);
	--fs-md: clamp(1.25rem, 1.04vi + 1.02rem, 1.67rem);
	--fs-lg: clamp(1.56rem, 1.65vi + 1.19rem, 2.22rem);
	--fs-xl: clamp(1.95rem, 2.52vi + 1.39rem, 2.96rem);
	--fs-xxl: clamp(2.44rem, 3.76vi + 1.59rem, 3.95rem);
	--fs-xxxl: clamp(3.05rem, 5.52vi + 1.81rem, 5.26rem);
}

body {
	font-family: 'Roboto', sans-serif;
	font-size: var(--fs-base);
}

p,
figure,
blockquote,
dl,
ddp {
	font-size: var(--fs-base);
}

figcaption {
	line-height: var(--lh-sm);
}

/* HEADER */
.sp-sticky-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	max-height: var(--fixed-header-height);
	background: rgba(var(--bv-jw-primary-color-spectral), 0.7);
	text-align: center;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
}
.title-header {
	float: left;
	margin: 0;
	list-style-type: none;
	overflow: hidden;
	padding: 16px 10px 16px 30px;
	font-weight: 600;
	letter-spacing: -1px;
	color: var(--bv-jw-primary-color);
	font-size: var(--fs-base);
}

.title-header > span:first-child {
	font-size: 20px;
}

.logo-header {
	display: block;
}

.vr {
	background-color: white;
	width: 2px;
	max-height: 80px;
}

.fluid-wrapper {
	max-width: 100%;
	padding-inline: 20px;
	padding-top: calc(var(--fixed-header-height) + 8px);
	padding-bottom: 8px;
}

.inner-section {
	padding-top: 8px !important;
}

.container-bv-jw {
	max-width: 1024px;
	margin-inline: auto;
}

.description-block {
	font-size: var(--fs-md);
	line-height: var(--lh-base);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	color: var(--bv-jw-primary-color);
}

.text-title {
	font-size: var(--fs-lg);
	font-weight: 600;
	line-height: var(--lh-sm);
	letter-spacing: var(--ls-lg);
	font-family: Oswald, sans-serif;

	margin-inline: auto;
}

.primary-link {
	color: var(--bv-jw-primary-color);
}

.primary-link:hover {
	color: var(--bv-jw-secondary-color);
}

.text-title:not(.subtitle) {
	width: max-content;
}

.text-description {
	font-size: var(--fs-md);
	line-height: var(--lh-base);
}

/* Sections */
.inner-section figure > figcaption.text-fluid {
	max-width: fit-content;
}

.inner-section figure > figcaption p {
	font-size: 9px;
	line-height: var(--lh-sm);
	margin-bottom: 8px;
	width: max-content;
	margin-inline: auto;
}

.inner-section figure > figcaption[data-style='large'] p {
	font-size: var(--fs-sm);
}

.section-one__images figure {
	min-height: unset;
}

.section-one__images figure > .image-wrapper {
	max-height: 400px;
	overflow: hidden;
}

.section-one__images .image-wrapper > img {
	object-fit: cover;
}

:is(.inner-section, .section-one__images) figure > figcaption {
	max-width: 40ch;
	margin-inline: auto;
}

.section-one__images figure > figcaption {
	max-width: revert;
	width: max-content;
}

.logo-header img {
	max-height: 40px;
}

#section-two .row,
#section-two p {
	font-size: var(--fs-upper-sm);
}

#section-three .row.revert {
	flex-direction: row-reverse;
}

#section-four .halft-image-certificate img {
	max-height: 610px;
}

#section-seven .card-title {
	font-weight: 600;
	font-size: 16px;
}

#section-seven .card-text {
	font-size: var(--fs-base);
}

.footer_section {
	background: var(--bv-jw-primary-color) !important;
	color: white;
	padding: 20px 30px !important;
}

.footer_section a {
	text-decoration: none;
	color: white;
}

.footer_section a:hover {
	text-decoration: underline;
}

/* Utilities classes */
.bg-bv-jw-primary {
	background-color: var(--bv-jw-primary-color);
}

.text-bv-jw-primary {
	color: var(--bv-jw-primary-color);
}

.zalo-chat-widget {
	--bs-zalo-widget-right: 14px;
	right: var(--bs-zalo-widget-right) !important;
}

.benhvien_info_summary {
	background-color: var(--bv-jw-accent-color);
}

.benhvien_info_summary .card-header {
	background-color: var(--bv-jw-primary-color);
	color: white;
	font-weight: 600;
	font-size: var(--fs-md);
}

.benhvien_info_summary .card-text {
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	color: var(--bv-jw-primary-color);
}

@media (min-width: 576px) {
	.text-title {
		width: fit-content;
	}

	.section-one__images figure > figcaption {
		width: revert;
	}

	.section-one__images .image-wrapper > img {
		object-fit: fill;
		object-position: center;
		height: 100%;
	}

	.zalo-chat-widget {
		--bs-zalo-widget-right: 52px;
	}

	.inner-section figure > figcaption[data-style='large'] p {
		font-size: var(--fs-upper-sm);
	}

	.section-one__images figure {
		min-height: 480px;
	}
}

@media (min-width: 768px) {
	.fluid-wrapper {
		padding-inline: 30px;
		padding-top: calc(var(--fixed-header-height) + 40px);
		padding-bottom: 30px;
	}

	.logo-header img {
		max-height: revert;
	}

	.description-block {
		gap: 36px;
	}
	.inner-section {
		padding-top: 30px !important;
	}

	.inner-section figure > figcaption p {
		font-size: var(--fs-sm);
	}

	.inner-section figure > figcaption[data-style='large'] p {
		font-size: var(--fs-upper-sm);
	}

	#section-two .row img {
		min-height: 745px;
	}
	#section-seven .card-title {
		font-size: var(--fs-md);
	}

	/* #section-two .row,
  #section-two p {
    font-size: 1.25rem;
  } */
}