/*
 * Theme Name: Khoa Tran Theme
 * Description: My custom theme
 * Version: 1.0
 * Author: Khoa Tran
 * Author URI: http://khoa-tr.com
 * Text Domain: khoatrantheme
 * License: No
 * License URI: No
 * Language Folder: /language
*/
html{
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
body{
	font-size: 100%;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}


@font-face {
  font-family: 'Moderat Black';
  src: url('assets/fonts/Moderat/Moderat-Black.ttf');
}
@font-face {
  font-family: 'Moderat Bold';
  src: url('assets/fonts/Moderat/Moderat-Bold.ttf');
}
@font-face {
  font-family: 'Moderat Medium';
  src: url('assets/fonts/Moderat/Moderat-Medium.ttf');
}
@font-face {
  font-family: 'Moderat Regular';
  src: url('assets/fonts/Moderat/Moderat-Regular.ttf');
}

@font-face {
	font-family: "Moderat Mono Regular";
	src: url("assets/fonts/Moderat/Moderat-Mono-Regular.ttf");
}
@font-face {
	font-family: "Moderat Mono Medium";
	src: url("assets/fonts/Moderat/Moderat-Mono-Medium.ttf");
}
@font-face {
	font-family: "Moderat Mono Bold";
	src: url("assets/fonts/Moderat/Moderat-Mono-Bold.ttf");
}
@font-face {
	font-family: "Moderat Mono Black";
	src: url("assets/fonts/Moderat/Moderat-Mono-Black.ttf");
}

/*-----------*/

@font-face {
  font-family: "Source Serif Pro Black";
  src: url("assets/fonts/Source_Serif_Pro/SourceSerifPro-Black.ttf");
}
@font-face {
  font-family: "Source Serif Pro Black Italic";
  src: url("assets/fonts/Source_Serif_Pro/SourceSerifPro-BlackItalic.ttf");
}
@font-face {
  font-family: "Source Serif Pro Bold";
  src: url("assets/fonts/Source_Serif_Pro/SourceSerifPro-Bold.ttf");
}
@font-face {
  font-family: "Source Serif Pro Bold Italic";
  src: url("assets/fonts/Source_Serif_Pro/SourceSerifPro-BoldItalic.ttf");
}
@font-face {
  font-family: "Source Serif Pro Extra Light";
  src: url("assets/fonts/Source_Serif_Pro/SourceSerifPro-ExtraLight.ttf");
}
@font-face {
  font-family: "Source Serif Pro Extra Light Italic";
  src: url("assets/fonts/Source_Serif_Pro/SourceSerifPro-ExtraLightItalic.ttf");
}
@font-face {
  font-family: "Source Serif Pro Italic";
  src: url("assets/fonts/Source_Serif_Pro/SourceSerifPro-Italic.ttf");
}
@font-face {
  font-family: "Source Serif Pro Light";
  src: url("assets/fonts/Source_Serif_Pro/SourceSerifPro-Light.ttf");
}
@font-face {
  font-family: "Source Serif Pro Light Italic";
  src: url("assets/fonts/Source_Serif_Pro/SourceSerifPro-LightItalic.ttf");
}
@font-face {
  font-family: 'Source Serif Pro Regular';
  src: url("assets/fonts/Source_Serif_Pro/SourceSerifPro-Regular.ttf");
}
@font-face {
  font-family: "Source Serif Pro Semi Bold";
  src: url("assets/fonts/Source_Serif_Pro/SourceSerifPro-SemiBold.ttf");
}
@font-face {
  font-family: "Source Serif Pro Semi Bold Italic";
  src: url("assets/fonts/Source_Serif_Pro/SourceSerifPro-SemiBoldItalic.ttf");
}

@font-face {
  font-family: "Simplon Norm Regular";
  src: url("assets/fonts/Simplon Norm/SimplonNorm-Regular.otf");
}
@font-face {
  font-family: "Simplon Norm Medium";
  src: url("assets/fonts/Simplon Norm/SimplonNorm-Medium.otf");
}
@font-face {
  font-family: "Simplon Norm Bold";
  src: url("assets/fonts/Simplon Norm/SimplonNorm-Bold.otf");
}







.typo-display-xl-regular{
	font-family: 'Moderat Regular', sans-serif;
	font-size: 5rem;
	line-height: 1.125em;
	color: #111111;
}
.typo-display-xl-medium{
	font-family: 'Moderat Medium', sans-serif;
	font-size: 5rem;
	line-height: 1.125em;
	color: #111111;
}
.typo-display-xl-bold{
	font-family: 'Moderat Bold', sans-serif;
	font-size: 5rem;
	line-height: 1.125em;
	color: #111111;
}
.typo-display-xl-black{
	font-family: 'Moderat Black', sans-serif;
	font-size: 5rem;
	line-height: 1.125em;
	color: #111111;
}



.typo-display-l-regular{
	font-family: 'Moderat Regular', sans-serif;
	font-size: 3.5rem;
	line-height: .9375em;
	color: #111111;
}
.typo-display-l-medium{
	font-family: 'Moderat Medium', sans-serif;
	font-size: 3.5rem;
	line-height: .9375em;
	color: #111111;
}
.typo-display-l-bold{
	font-family: 'Moderat Bold', sans-serif;
	font-size: 3.5rem;
	line-height: .9375em;
	color: #111111;
}
.typo-display-l-black{
	font-family: 'Moderat Black', sans-serif;
	font-size: 3.5rem;
	line-height: .9375em;
	color: #111111;
}


.typo-display-m-regular{
	font-family: 'Moderat Regular', sans-serif;
	font-size: 2rem;
	line-height: 1.2em;
	color: #111111;
}
.typo-display-m-medium{
	font-family: 'Moderat Medium', sans-serif;
	font-size: 2rem;
	line-height: 1.2em;
	color: #111111;
}
.typo-display-m-bold{
	font-family: 'Moderat Bold', sans-serif;
	font-size: 2rem;
	line-height: 1.2em;
	color: #111111;
}
.typo-display-m-black{
	font-family: 'Moderat Black', sans-serif;
	font-size: 2rem;
	line-height: 1.2em;
	color: #111111;
}


.typo-description{
	font-family: 'Moderat Bold', sans-serif;
	font-size: 1.125rem;
	color: #111111;
	line-height: 1.25em;
}


/*===== SECTION HEADER  =====*/
.section-header{
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}
.section-header-eyebrow{
	font-family: 'Moderat Mono Bold', monospace;
	font-size: 1.25rem;
	color: #f55e07;
	margin-bottom: 1rem;
	text-transform: uppercase;

	width: 600px;
	max-width: 100%;
}
.section-header-headline{
	width: 600px;
	max-width: 100%;
	line-height: .9375em;
	margin-bottom: 3rem;
}
.section-header-headline span{
	color: blue;
}
.section-header-copy{
	width: 600px;
	max-width: 100%;
}

/*=====  SPACERS  =====*/
.spacer-20{
	width: 100%;
	height: 20px;
}
.spacer-40{
	width: 100%;
	height: 40px;
}
.spacer-60{
	width: 100%;
	height: 60px;
}
.spacer-80{
	width: 100%;
	height: 80px;
}
.spacer-100{
	width: 100%;
	height: 100px;
}
.spacer-120{
	width: 100%;
	height: 120px;
}
.spacer-140{
	width: 100%;
	height: 140px;
}
.spacer-160{
	width: 100%;
	height: 160px;
}
.spacer-200{
	width: 100%;
	height: 200px;
}

/*=====  DIVIDER  =====*/
.divider{
	width: 100%;
	height: 1px;
	background-color: rgba(0, 0, 255, .1);
	margin: 60px 0 60px 0;
}












.container.full-width{
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}



@media (min-width: 1920px){
	.container.wide{
		max-width: 1720px;
	}
}
@media (max-width: 1919px) {
    .container.wide{
    	max-width: 100%;
      padding-left: 45px;
      padding-right: 45px;
    }
}

@media (max-width: 1440px) {
    .container.wide{
    	max-width: 100%;
      padding-left: 45px;
      padding-right: 45px;
    }
}
@media (max-width: 1024px){
	.container.wide{
		padding-left: 45px;
		padding-right: 45px;
	}
}
@media (max-width: 768px){
	.container.wide{
		padding-left: 30px;
		padding-right: 30px;
	}
}
@media (max-width: 425px){
	.container.wide{
		padding-left: 20px;
		padding-right: 20px;
	}
}


::-moz-selection { color: #111; background-color: #e6e6e6}
::selection { color: #111; background-color: #e6e6e6}


a.hovering-effect{
	position: relative;
	cursor: pointer;
}
a.hovering-effect:before{
	content: "";
	position: absolute;
	width: 0;
	height: 1px;
	bottom: -2px;
	left: 0;
	background-color: blue;
	visibility: hidden;
	-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
a.hovering-effect:hover:before{
	visibility: visible;
	width: 100%;
	right: 0;
	left: initial;
}
a.hovering-effect:hover{
	text-decoration: none;
	color: #111;
}




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

header{
	padding-top: 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;

	position: relative;
	z-index: 99;
}

header .nav-left a{
	display: flex;
	align-items: center;
	gap: .5rem;
}
header .nav-left i{
	color: #111;
	font-size: 0.9rem;

  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
header .nav-left .nav-left-title{
	color: #111;
	font-family: 'Moderat Bold', sans-serif;
  font-size: 1.2rem;

    -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

header .nav-left a:hover{
	text-decoration: none;
}
header .nav-back a:hover i{
	margin-left: -8px;
}
header .nav-back a:hover .nav-left-title{
	margin-left: 8px;
}



header .nav-home img{
	width: 40px;
}

header .nav-right{
	display: flex;
	gap: 1rem;
}
header .nav-right i{
	font-size: 1.2rem;
	color: #111111;
}
header .nav-right i.fa-linkedin:hover{
	color: #0C66C2;
}
header .nav-right i.fa-envelope:hover{
	color: blue;
}



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

footer{
	margin-bottom: 20px;
}

footer .back{
	display: inline-block;
	cursor: pointer;
}
footer .back i{
	color: #111;
	font-size: 0.9rem;
	position: absolute;
	margin-top: 8px;
	-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
footer .back div{
	color: #111;
	font-family: 'Moderat Bold', sans-serif;
	font-size: 1.2rem;
	display: inline;
	margin-left: 22px;
}
footer .back:hover i{
	margin-left: -8px;
}

footer .up{
	display: inline-block;
	float: right;
	cursor: pointer;
}
footer .up i{
	color: #111;
	font-size: 0.9rem;
	position: absolute;
	margin-top: 8px;
	-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
footer .up div{
	color: #111;
	font-family: 'Moderat Bold', sans-serif;
  font-size: 1.2rem;
  display: inline;
  margin-left: 22px;
}
footer .up:hover i{
	margin-top: 0px;
}


/*============== POST ===============*/
/*============== POST ===============*/
/*============== POST ===============*/

p{
	font-family: 'Source Serif Pro Regular', serif;
	font-size: 1.1rem;
	color: #111111;
	margin-bottom: 1.5rem;
}
b, strong{
	font-family: 'Source Serif Pro Bold', serif;
	font-size: 1.1rem;
	color: #111111;
}

h1, h2, h3, h4, h5, h6{
	font-family: 'Source Serif Pro Bold', serif;
	color: #111111;
}
h4{
	margin-bottom: 1rem;
	margin-top: 3rem;
}
.post-component[data-type="content"] figure.wp-block-image,
.post-component[data-type="content"] figure.wp-block-gallery{
	margin-top: 2rem;
	margin-bottom: 2rem;
}
article{
	margin-bottom: 48px;
}
.mybtn-link{
	font-family: 'Source Serif Pro Bold', serif;
	font-size: 1.1rem;
	color: #111;
	text-decoration: none;
}

.mybtn-link:before{
	background-color: #111!important;
}
.mybtn-link i{
	color: #111;
	font-size: 1rem;
	-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.mybtn-link i.fa-arrow-right{
	position: absolute;
	margin-left: 8px;
	margin-top: 4px;
	transform: rotate(-45deg);
}
.mybtn-link:hover i.fa-arrow-right{
	margin-left: 12px;
	margin-top: 0px;
}
.download-stores{
	margin-bottom: 2.5rem;
}
.download-stores ul{
	padding-inline-start: 0px!important;
}
.download-stores ul li{
	display: inline;
	margin-right: 4px;
}
.download-stores ul li a:before{
	height: 0px;
}
.download-stores img{
	height: 32px;
}

/*.wp-block-image .aligncenter,.wp-block-image .alignleft,.wp-block-image .alignright,.wp-block-image.aligncenter,.wp-block-image.alignleft,.wp-block-image.alignright {
     display:block; 
}*/


/*-----------Format:  Standard----------*/
.format-standard .post-component[data-type="intro"]{
	margin-top: 5rem;
	margin-bottom: 2rem;
	width: 700px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.format-standard .post-component[data-type="intro"] .sub-title{
	font-family: 'Moderat Bold', sans-serif;
	font-size: 0.875rem;
	text-transform: uppercase;
	color: white;
	background-color: #111;
	padding:  10px 10px 10px 10px;
	display: inline;
}
.format-standard .post-component[data-type="intro"] .title{
	font-family: 'Moderat Bold', sans-serif;
	font-size: 2.7rem;
	line-height: 1.2em;
	color: #111111;
	margin-top: 1rem;
	margin-bottom: 2rem;
}
.format-standard .post-component[data-type="intro"] .excerpt{
	font-family: 'Source Serif Pro Semi Bold', serif;
	font-size: 1.125rem;
	color: #111;
}

/*----------Format:  Gallery---------*/
.format-gallery .post-component[data-type="intro"]{
	margin-top: -67px;
	margin-bottom: 3rem;
	width: 100%;
	padding-top: 45vh;
	padding-bottom: 4vh;
	text-align: center;

	background-size: cover!important;
	background-position: center!important;
}
.format-gallery .post-component[data-type="intro"] .sub-title{
	font-family: 'Moderat Bold', sans-serif;
	font-size: 1rem;
	text-transform: uppercase;
	color: #ffffff;
	margin-bottom: 0.75rem;
	width: 700px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.format-gallery .post-component[data-type="intro"] .title{
	font-family: 'Moderat Bold', sans-serif;
	font-size: 2.7rem;
	line-height: 1.2em;
	color: #ffffff;
	margin-bottom: 0.5em;
	width: 700px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.format-gallery .post-component[data-type="intro"] .excerpt{
	font-family: 'Moderat Regular', sans-serif;
	font-size: 1.2rem;
	line-height: 1.5rem;
	color: #ffffff;
	width: 700px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.single-format-gallery header .back,
.single-format-gallery header .social{
	opacity: 75%;
	-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.single-format-gallery header .back:hover{
	opacity: 100%;
}
.single-format-gallery header .social:hover{
	opacity: 100%;

}
.single-format-gallery header .back a i,
.single-format-gallery header .back a div,
.single-format-gallery header .social i{
	color: #ffffff;
}
.single-format-gallery header a:before{
	background-color: #ffffff;
}
.single-format-gallery header .social i:hover{
	color: #ffffff;
}


.post-component[data-type="content"] h1,
.post-component[data-type="content"] h2,
.post-component[data-type="content"] h3,
.post-component[data-type="content"] h4,
.post-component[data-type="content"] h5,
.post-component[data-type="content"] h6,
.post-component[data-type="content"] a,
.post-component[data-type="content"] p,
.post-component[data-type="content"] b,
.post-component[data-type="content"] ul{
	width: 700px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.post-component[data-type="content"] figure{
	text-align: center;
}
.post-component[data-type="content"] figure img{
	max-width: 100%;
}
.post-component[data-type="content"] figure figcaption{
	font-family: 'Source Serif Pro Regular', sans-serif;
	color: #555555;
	font-size: 0.875rem;
	margin-left: 20px;
	margin-right: 20px;
	display: block;
}

.post-component[data-type="content"] ul{
	font-family: 'Source Serif Pro Regular', serif;
	font-size: 1.1rem;
	padding-inline-start: 15px;
}
.post-component[data-type="content"] ul li{
	margin-bottom: 0.5rem;
	margin-top: 0.5rem;
}

/*.post-component[data-type="content"] figure.wp-block-image,
.post-component[data-type="content"] figure.wp-block-gallery,
.wp-block-nextend-smartslider3{
	margin-top: 2.5rem;
	margin-bottom: 2.5em;
}*/

.post-component[data-type="content"] .wp-block-columns{
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.post-component[data-type="content"] .column-custom-size-1024{
	width: 1024px;
	margin-left: auto;
	margin-right: auto;
}
.post-component[data-type="content"] .column-custom-size-700{
	width: 700px;
	margin-left: auto;
	margin-right: auto;
}


@media (max-width: 425px){
	.post-component[data-type="content"] figure.wp-block-image,
	.post-component[data-type="content"] figure.wp-block-gallery,
	.wp-block-nextend-smartslider3{
/*		margin-top: 1.5rem;
		margin-bottom: 3em;*/
		width: 100vw;
		margin-left: -20px;
	}
}



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

section.page-header,
section.page-body{
	width: 690px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}
section.page-body p{
	font-size: 1rem;
}
section.page-body a{
	font-family: 'Source Serif Pro Semi Bold';
	color: #111;
}
section.page-body a.hovering-effect:before{
	background-color: #111;
	bottom: 0;
}

section.page-header{
	margin-top: 5rem;
	margin-bottom: 2rem;
	margin-bottom: 3.75rem;
}
section.page-header .page-component[data-type="intro"] .sub-title{
	font-family: 'Moderat Bold';
	font-size: 1.25rem;
	color: #111111;
}

section.page-header .page-component[data-type="intro"] .sub-title i{
	margin-left: 0.625rem;
	cursor: pointer;
}
section.page-header .page-component[data-type="intro"] .sub-title i:hover{
	color: blue;
}

section.page-header .page-component[data-type="intro"] .profile-image img{
	width: 250px;
	margin-top: 1.25rem;
}

section.page-body .page-component[data-type="content"] hr.wp-block-separator{
	margin-top: 2.5rem;
	margin-bottom: 2.5rem;
	border-top: 2px solid;
}

section.page-body .page-component[data-type="contact"]{
	background-color: #D8D8D8;
	width: 100%;
	text-align: center;
	padding-top: 1.2rem;
	padding-bottom: 1.2rem;
}

section.page-body .page-component[data-type="contact"] .email,
section.page-body .page-component[data-type="contact"] .linkedin,
section.page-body .page-component[data-type="contact"] .dribbble{
	display: inline-block;
	margin-left: 2rem;
	margin-right: 2rem;
}

section.page-body .page-component[data-type="contact"] .email div,
section.page-body .page-component[data-type="contact"] .linkedin div,
section.page-body .page-component[data-type="contact"] .dribbble div{
	display: inline;
	font-family: 'Moderat Medium';
	font-size: 0.9375rem;
	color: #111111;
	padding-left: 0.125rem;
}
section.page-body .page-component[data-type="contact"] .email i,
section.page-body .page-component[data-type="contact"] .linkedin i,
section.page-body .page-component[data-type="contact"] .dribbble i{
	color: #111;
}

section.page-body .page-component[data-type="contact"] i{
	font-size: 1.125rem;
}

section.page-body{
	margin-bottom: 5rem;
}

@media (max-width: 425px){
	section.page-body .page-component[data-type="contact"] .email,
	section.page-body .page-component[data-type="contact"] .linkedin,
	section.page-body .page-component[data-type="contact"] .dribbble{
		margin-left: 0.6rem;
		margin-right: 0.6rem;
	}
}





/*============== INDEX ===============*/
/*============== INDEX ===============*/
/*============== INDEX ===============*/



section#intro{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: -80px;
	height: 100vh;
	background-image: linear-gradient(rgba(0, 0, 255, .2), white);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	position: relative;
	z-index: 1;
	margin-bottom: 0;

	--after-height: 0;
	/*--after-opacity: 0;*/
	--after-bottom: 0;
}
section#intro #intro-text{
	text-align: center;
}
section#intro #intro-text span{
	color: #A9ACFF;
	text-shadow: rgba(0, 0, 0, .9) .05em .05em;
}
section#intro::after{
	content: '';
	background-color: blue;
	position: absolute;
	left: 0;
	bottom: var(--after-bottom);
	width: 100%;
	height: var(--after-height);
	/*opacity: var(--after-opacity);*/
	-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}



/************  DESIGN SYSTEM  ************/
section#design-systems{
	background:
		left top / 16px 16px linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
		left top / 16px 16px linear-gradient(to right, rgba(0, 0, 0, .03) 1px, transparent 1px),

		left top / 100% 16px no-repeat linear-gradient(transparent 15px, rgba(0, 0, 255, 1) 1px),
		left bottom / 100% 16px no-repeat linear-gradient(rgba(0, 0, 255, 1) 1px, transparent 1px),
		left top / 16px 100% no-repeat linear-gradient(to right, transparent 15px, rgba(0, 0, 255, 1) 1px),
		right top / 16px 100% no-repeat linear-gradient(to right, rgba(0, 0, 255, 1) 1px, transparent 1px);

	padding: 60px 40px;

	position: relative;

	-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
section#design-systems .ds-bg-corner{
	width: 8px;
	height: 8px;
	border: 1px solid blue;
	background-color: white;
	position: absolute;
}
section#design-systems #ds-bg-corner-1{
	top: 12px;
	left: 12px;
}
section#design-systems #ds-bg-corner-2{
	top: 12px;
	right: 12px;
}
section#design-systems #ds-bg-corner-3{
	bottom: 12px;
	right: 12px;
}section#design-systems #ds-bg-corner-4{
	bottom: 12px;
	left: 12px;
}


section#design-systems #ds-ani{
	display: flex;
	flex-direction: row; /*default css value*/
	gap: 1rem;
	align-items: center;
	box-sizing: border-box; /*ensures any padding or borders added to the columns do not increase their overall width, maintaining the equal-width layout. */
  width: 100%;

  padding-left: 5%;
}
section#design-systems #ds-ani-col-1{
	flex: 1;
}
section#design-systems #ds-ani-col-2{
	flex: 1;

	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "color component" "icon icon";
	gap: 1rem;
}
section#design-systems #ds-ani-typo-wrapper{
	background-color: blue;

	box-sizing: border-box; /* Includes border and padding in the total width/height */
  border-top: 12px solid blue;
  border-right: 12px solid blue;
  border-left: 12px solid blue;

	aspect-ratio: 1 / 1;

	overflow: hidden;
	text-align: center;
	container-type: inline-size; /*for calculating child's font-size*/
	position: relative;
}
section#design-systems #ds-ani-typo{
	font-family: 'Raleway', sans-serif;
	font-optical-sizing: auto;
	font-weight: 900;
	font-style: normal;

	color: white;
	font-size: 125cqw;
	margin-top: calc((-1) * 34cqw);
	text-shadow: 6px -6px 0 rgba(255, 255, 255, .4), 12px -12px 0 rgba(255, 255, 255, .4), 18px -18px 0 rgba(255, 255, 255, .4);

	-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);

	/*animation: typo 4s infinite;*/
}

@keyframes typo{
	0%{
		font-size: 125cqw;
		margin-top: calc((-1) * 34cqw);
		text-shadow: 6px -6px 0 rgba(255, 255, 255, .4), 12px -12px 0 rgba(255, 255, 255, .4), 18px -18px 0 rgba(255, 255, 255, .4);
	}
	14.3%{
		text-shadow: none;
	}
	28.6%{
		font-size: 220cqw;
		margin-top: calc((-1) * 152cqw);
	}
	42.9%{
		font-weight: 400;
	}
	57.1%{
		font-size: 125cqw;
		margin-top: calc((-1) * 30cqw);
	}
	71.4%{
		font-weight: 500;
	}
	85.7%{
		font-weight: 900;
	}
	100%{
		margin-top: calc((-1) * 34cqw);
		text-shadow: 6px -6px 0 rgba(255, 255, 255, .4), 12px -12px 0 rgba(255, 255, 255, .4), 18px -18px 0 rgba(255, 255, 255, .4);
	}
}





/****** ICON ******/
section#design-systems #ds-ani-icon-wrapper{
	grid-area: icon;
	overflow: hidden;
}
section#design-systems #ds-ani-icon{
	height: 80px;
	max-height: 100%;
	transition: all 15s linear;
}

/****** COLOR ******/
section#design-systems #ds-ani-color-wrapper{
	grid-area: color;
	overflow: hidden;
	aspect-ratio: 1 / 1;

	position: relative;
}
section#design-systems #ds-ani-color-wrapper canvas{
	width: 100%;
	height: 100%;

	position: relative;
}


section#design-systems #ds-ani-tdsotm{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;

	display: flex;
  align-items: center;   /* Centers content vertically */
  justify-content: center;
}
section#design-systems #ds-ani-tdsotm svg#ds-ani-shape-outer{
	width: 100%;
	height: 100%;

	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
section#design-systems #ds-ani-tdsotm svg#ds-ani-shape-inner{
	width: calc(100% - 10px);
	height: calc(100% - 10px);

	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
section#design-systems #ds-ani-tdsotm svg#ds-ani-shape-album{
	width: 100%;
	height: 100%;

	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);

	-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}


section#design-systems #ds-ani-path-outer,
section#design-systems #ds-ani-path-inner,
section#design-systems #ds-ani-path-white-ray,
section#design-systems #ds-ani-path-rainbow {
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}


section#design-systems #ds-ani-path-outer{
	fill-opacity: .3;

	stroke: white;
	stroke-width: 1;
	stroke-opacity: 0.5;
}
section#design-systems #ds-ani-path-inner{
	fill-opacity: .3;
}
section#design-systems #ds-ani-path-white-ray{
	stroke: #ffffff;
	stroke-opacity: .7;
	stroke-width: 2;
	opacity: 0;
}
section#design-systems #ds-ani-path-rainbow{
	opacity: 0;
}




/****** COMPONENT ******/
section#design-systems #ds-ani-comp-wrapper{
	grid-area: component;
	background-color: #eee;
	aspect-ratio: 1 / 1;

	display: flex;
	flex-direction: column;
	align-items: center;

	position: relative;

	overflow: hidden;

	padding-left: 12px;
	padding-right: 12px;
	padding-top: 28px;

	-webkit-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

section#design-systems #ds-ani-comp-code-snippet {
	width: 100%;
}

input#ds-ani-comp-switch {
	font: 3cqw sans-serif;
	transform: scaleX(-1);
	flex-shrink: 0;
	margin-bottom: -1rem;
}


input#ds-ani-comp-switch[type=checkbox] {
	--off: #255ff4;
	--mid: #829ad6;
	--on:  #c7cad1;
	--transDur: 0.5s;
	--timing: cubic-bezier(0.6,0,0.4,1);
	animation: bgOff var(--transDur) var(--timing);
	background-color: var(--off);
	border-radius: 0.67em / 0.5em;
	box-shadow:
		0 0.05em 0.1em #00000007 inset,
		0 -0.25em 0.25em #0001 inset,     /**/
		0 -0.5em 0 #00000045 inset,
		0 0.1em 0.1em rgba(0, 0, 0, .15);
	cursor: pointer;
	position: relative;
	width: 2.25em;
	height: 1.5em;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}
input#ds-ani-comp-switch[type=checkbox]:before {
	animation: handleOff var(--transDur) var(--timing);
	background-attachment: fixed;
	background-position: 50% calc(50% - 0.1875em);
	border-radius: 0.5em / 0.375em;
	box-shadow:
		0 0.175em 0.175em 0 #0001 inset,
		0 0.375em 0 #00000045 inset,
		0 0.375em 0 var(--off) inset,
		0 0.475em 0.1em #0001 inset;
	content: "";
	display: block;
	position: absolute;
	top: 0.125em;
	left: 0.125em;
	width: 1em;
	height: 0.75em;
}
input#ds-ani-comp-switch[type=checkbox]:checked {
	animation: bgOn var(--transDur) var(--timing) forwards;
}
input#ds-ani-comp-switch[type=checkbox]:checked:before {
	animation: handleOn var(--transDur) var(--timing) forwards;
}
input#ds-ani-comp-switch[type=checkbox]:focus {
	outline: none;
}
input#ds-ani-comp-switch[type=checkbox].pristine, input#ds-ani-comp-switch[type=checkbox].pristine:before {
	animation: none;
}

/* Animations */
@keyframes bgOff {
	from {
		background-color: var(--on);
	}
	50% {
		background-color: var(--mid);
	}
	to {
		background-color: var(--off);
	}
}
@keyframes bgOn {
	from {
		background-color: var(--off);
	}
	50% {
		background-color: var(--mid);
	}
	to {
		background-color: var(--on);
	}
}
@keyframes handleOff {
	from {
		box-shadow:
			0 0.175em 0.175em 0 #0001 inset,
			0 0.375em 0 #0002 inset,
			0 0.375em 0 var(--on) inset,
			0 0.475em 0.1em #0001 inset;
		left: 1.125em;
		width: 1em;
	}
	50% {
		box-shadow:
			0 0.175em 0.175em 0 #0001 inset,
			0 0.375em 0 #0002 inset,
			0 0.375em 0 var(--mid) inset,
			0 0.475em 0.1em #0001 inset;
		left: 0.125em;
		width: 2em;
	}
	to {
		box-shadow:
			0 0.175em 0.175em 0 #0001 inset,
			0 0.375em 0 #0002 inset,
			0 0.375em 0 var(--off) inset,
			0 0.475em 0.1em #0001 inset;
		left: 0.125em;
		width: 1em;
	}
}
@keyframes handleOn {
	from {
		box-shadow:
			0 0.175em 0.175em 0 #0001 inset,
			0 0.375em 0 #0002 inset,
			0 0.375em 0 var(--off) inset,
			0 0.475em 0.1em #0001 inset;
		left: 0.125em;
		width: 1em;
	}
	50% {
		box-shadow:
			0 0.175em 0.175em 0 #0001 inset,
			0 0.375em 0 #0002 inset,
			0 0.375em 0 var(--mid) inset,
			0 0.475em 0.1em #0001 inset;
		left: 0.125em;
		width: 2em;
	}
	to {
		box-shadow:
			0 0.175em 0.175em 0 #0001 inset,
			0 0.375em 0 #0002 inset,
			0 0.375em 0 var(--on) inset,
			0 0.475em 0.1em #0001 inset;
		left: 1.125em;
		width: 1em;
	}
}

/********  Multi-platform apps ********/
section#multi-platform-apps{
	padding: 0 40px;
}

section#multi-platform-apps #mpa-ani{
	padding-left: 5%;
}

section#multi-platform-apps #mpa-ani-container{
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: rgba(204, 222, 115, .3);

	container-type: inline-size;
}
section#multi-platform-apps #mpa-ani-viewport{
	position: relative;
	margin: auto;
	width: 100%;
	padding: 0 15px;
	height: 100%;
	max-height: 100%;
	border-left: 1px solid blue;
	border-right: 1px solid blue;

	
	background-image:
	  linear-gradient(to right, #FDE496, #FDE496),
	  linear-gradient(135deg, #d6d6ff 10%, #f0f6d6 10%, #f0f6d6 50%, #d6d6ff 50%, #d6d6ff 60%, #f0f6d6 60%, #f0f6d6 100%);

	background-size: 100% 100%, 7.07px 7.07px;
	background-clip: content-box, padding-box;

	-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

section#multi-platform-apps #mpa-ani-header{
	width: 100%;
	height: 3.9cqw;
	margin-left: auto;
	margin-right: auto;
	
	background-color: #111;

	position: relative;
	z-index: 2;

	-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
section#multi-platform-apps #mpa-ani-header img{
	width: 6.3cqw;
	margin-top: .6cqw;
	margin-left: 2.4cqw;
}

section#multi-platform-apps #mpa-ani-breakpoint-container{
	width: calc(100% - 30px);
	margin-bottom: 4px;
	margin-left: auto;
	margin-right: auto;
}
section#multi-platform-apps .mpa-ani-breakpoint{
	height: 12px;
	border-left: 1px solid blue;
	border-right: 1px solid blue;
	margin: auto;

	font-family: 'Moderat Mono Medium', monospace;
	font-size: .625rem;
	padding-left: 2px;
	line-height: 1em;
}
section#multi-platform-apps #mpa-ani-320{
	/*background-color: rgba(253, 228, 150, 1);*/
	background-color: rgba(204, 222, 115, 1);
	margin-top: -12px;
}
section#multi-platform-apps #mpa-ani-768{
	/*background-color: rgba(253, 228, 150, .5);*/
	background-color: rgba(204, 222, 115, .5);
	margin-top: -12px;
}
section#multi-platform-apps #mpa-ani-1024{
	/*background-color: rgba(253, 228, 150, .3);*/
	background-color: rgba(204, 222, 115, .3);
}




section#multi-platform-apps #mpa-ani-image-container{
	position: absolute;
	left: 50%;
	top: 0;
	width: 45%;
	height: 100%;
	padding: 32px 0 0 0;

	display: flex;
	justify-content: center;
	align-items: center;

	z-index: 1;

	/*background-color: rgba(173, 255, 47, .8);*/
	/*border: 1px solid blue;*/

	-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

section#multi-platform-apps #mpa-ani-text{
	position: absolute;
	width: calc(50% - 15px);
	height: max-content;
	top: 50%;
	transform: translateY(-50%);
	padding: 0 0 0 5%;

	display: flex;
	flex-direction: column;
	gap: 3.9cqw;
	justify-content: center;
	
	-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

section#multi-platform-apps #mpa-ani-title{
	font-family: 'Moderat Mono Black', monospace;
	/*font-size: 2.5rem;*/
	font-size: 4.5cqw;
	/*line-height: 3.8cqw;*/
	color: #01462b;
}
section#multi-platform-apps #mpa-ani-rating{
	/*width: 96px;*/
	width: 11.6cqw;
	/*margin-top: -1.75rem;*/
	margin-top: -3.4cqw;
}
section#multi-platform-apps #mpa-ani-des{
	font-family: 'Moderat Mono Medium', monospace;
	/*font-size: .875rem;*/
	font-size: 1.7cqw;
	color: #01462b;
}
section#multi-platform-apps #mpa-ani-button{
	background-color: #01462b;
	font-family: 'Moderat Mono Black', monospace;
	/*font-size: 1rem;*/
	font-size: 1.9cqw;
	color: #FEF1C5;
	padding: 4px 8px;
	width: max-content;
}

section#multi-platform-apps #mpa-ani-image{
	width: 90%;
	height: auto;
	margin-top: 5rem;
}




/****************** Principles  ********************/

section#principles{
	background-image: linear-gradient(
		rgba(0, 0, 0, .7) 0%,
		rgba(0, 0, 0, .7) 2.5rem,
		rgba(0, 0, 0, .8) 2.5rem,
		rgba(0, 0, 0, .8) 5rem,
		rgba(0, 0, 0, .9) 5rem,
		rgba(0, 0, 0, .9) 7.5rem,
		rgba(0, 0, 0, 1.0) 7.5rem,
		rgba(0, 0, 0, 1.0) 100%);
}

section#principles .section-header{
	padding-left: 40px;
	padding-top: calc(80px + 7.5rem);
	padding-bottom: 80px;
}

section#principles .section-header-headline{
	color: white;
	margin-bottom: 0;
}

section#principles .pri-block{
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	padding: 40px 55px;
	border-top: 1px solid #4e4e4e;
	border-bottom: 1px solid #4e4e4e;
}
section#principles .pri-block:nth-child(2){
	border-left: 1px solid #4e4e4e;
	border-right: 1px solid #4e4e4e;
}
section#principles .pri-block-title{
	color: white;
	margin-bottom: 3rem;
	width: 600px;
	max-width: 100%;
}
section#principles .pri-block-title span{
	/*background-color: blue;*/
}
section#principles .pri-block-description{
	color: #9e9e9e;
	width: 600px;
	max-width: 100%;
}



/****************  Next section *****************/

section.next-section .ns-container{
	display: flex;
	justify-content: space-between;

	padding-bottom: 0rem;
	border-bottom: 2px solid #111;
}
section.next-section .ns-text{
	text-transform: uppercase;
	font-family: 'Moderat Black';
	font-size: 1.5rem;
	color: #111;
}
section.next-section .ns-arrow{
	width: 1.5rem;
	height: 1.5rem;
	margin-top: auto;
	margin-bottom: auto;
}


/****************  Latest work  *****************/

section#latest-work .lw-text{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;

	gap: 1.5rem;
	padding-right: 40px;
}
section#latest-work .lw-text mark{
	padding: 0 0 6px 0;
}

section#latest-work .lw-text-headline a:hover{
	text-decoration: none;
}
section#latest-work .lw-text-copy{
	color: #555;
}

section#latest-work .lw-text-btn a{
	font-family: 'Moderat Bold', sans-serif;
	font-size: 1.125rem;
	color: blue;
}

section#latest-work .lw-ani{
	position: relative;
	width: 100%;
	/*padding: 0;*/
	container-type: inline-size; /*for calculating child's font-size*/
	/*--after-background-image: url('data:image/svg+xml,<svg id="noice" viewBox="0 0 760 420" xmlns="http://www.w3.org/2000/svg"><filter id="noise-filter"><feTurbulence type="fractalNoise" baseFrequency="0.86" numOctaves="4" stitchTiles="stitch"></feTurbulence><feColorMatrix type="saturate" values="0"></feColorMatrix><feComponentTransfer><feFuncR type="linear" slope="0.46"></feFuncR><feFuncG type="linear" slope="0.46"></feFuncG><feFuncB type="linear" slope="0.46"></feFuncB><feFuncA type="linear" slope="0.3"></feFuncA></feComponentTransfer><feComponentTransfer><feFuncR type="linear" slope="1.47" intercept="-0.23"/><feFuncG type="linear" slope="1.47" intercept="-0.23"/><feFuncB type="linear" slope="1.47" intercept="-0.23"/></feComponentTransfer></filter><rect width="100%" height="100%" filter="url(%23noise-filter)"></rect></svg>');*/
	/*--after-background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 700 700" width="700" height="700"><defs><filter id="nnnoise-filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB"><feTurbulence type="fractalNoise" baseFrequency="0.102" numOctaves="4" seed="15" stitchTiles="stitch" x="0%" y="0%" width="100%" height="100%" result="turbulence"></feTurbulence><feSpecularLighting surfaceScale="15" specularConstant="0.75" specularExponent="20" lighting-color="%230a00ff" x="0%" y="0%" width="100%" height="100%" in="turbulence" result="specularLighting"><feDistantLight azimuth="3" elevation="100"></feDistantLight></feSpecularLighting></filter></defs><rect width="700" height="700" fill="transparent"></rect><rect width="700" height="700" fill="%230a00ff" filter="url(%23nnnoise-filter)"></rect></svg>');	*/
	
	--after-background-image: url('/wp-content/themes/khoatrantheme/assets/img/home/mynoise.png');

	background-clip: content-box;
}
section#latest-work .lw-ani::after{
	content: '';
	position: absolute;
	left: 15px;
	top: 0;
	width: calc(100% - 30px);
	height: 100%;
	background-image: var(--after-background-image);
	mix-blend-mode: multiply;
	background-size: 300px 300px;
	background-repeat: repeat;
}



section#latest-work .project-name{
	padding: 4cqw;
}
section#latest-work .project-types{
	padding: 1cqw 4cqw 4cqw 4cqw;
	font-family: 'Moderat Medium';
	font-size: 1rem;
	color: #111;
}


/*==========AIS===========*/

section#latest-work #ais .lw-text mark{
	background-color: rgba(184, 244, 22, .7);
}


section#latest-work #ais .lw-ani{
	aspect-ratio: 2 / 1;
	background-image: url('https://khoa-tr.com/wp-content/uploads/Group-1000007624.png');
	/*background-image: url('data:image/svg+xml,<svg id="noice" viewBox="0 0 760 420" xmlns="http://www.w3.org/2000/svg"><filter id="noise-filter"><feTurbulence type="fractalNoise" baseFrequency="0.86" numOctaves="4" stitchTiles="stitch"></feTurbulence><feColorMatrix type="saturate" values="0"></feColorMatrix><feComponentTransfer><feFuncR type="linear" slope="0.46"></feFuncR><feFuncG type="linear" slope="0.46"></feFuncG><feFuncB type="linear" slope="0.46"></feFuncB><feFuncA type="linear" slope="0.3"></feFuncA></feComponentTransfer><feComponentTransfer><feFuncR type="linear" slope="1.47" intercept="-0.23"/><feFuncG type="linear" slope="1.47" intercept="-0.23"/><feFuncB type="linear" slope="1.47" intercept="-0.23"/></feComponentTransfer></filter><rect width="100%" height="100%" filter="url(%23noise-filter)"></rect></svg>');*/
	background-size: cover;

	display: flex;
	justify-content: center;
	align-items: flex-start;
}

section#latest-work #ais #phone-mockup{
	width: 27cqw;
	rotate: 45deg;
	margin-top: 2rem;

	background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Safari */
  border-radius: 13.88% / 6.66667%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 6px;
  filter: drop-shadow(2px 4px 12px rgba(0, 0, 0, .15));

  overflow: hidden;

  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

section#latest-work #ais #phone-mockup::after{
	border-radius: 13.88% / 6.66667%;
	content: '';
	width: 100%;
	height: 100%;
	padding: 7.5px;
	position: absolute;
	left: 0;
	top: 0;
	/*background-image: url('data:image/svg+xml,<svg id="noice" viewBox="0 0 760 420" xmlns="http://www.w3.org/2000/svg"><filter id="noise-filter"><feTurbulence type="fractalNoise" baseFrequency="0.86" numOctaves="4" stitchTiles="stitch"></feTurbulence><feColorMatrix type="saturate" values="0"></feColorMatrix><feComponentTransfer><feFuncR type="linear" slope="0.46"></feFuncR><feFuncG type="linear" slope="0.46"></feFuncG><feFuncB type="linear" slope="0.46"></feFuncB><feFuncA type="linear" slope="0.3"></feFuncA></feComponentTransfer><feComponentTransfer><feFuncR type="linear" slope="1.47" intercept="-0.23"/><feFuncG type="linear" slope="1.47" intercept="-0.23"/><feFuncB type="linear" slope="1.47" intercept="-0.23"/></feComponentTransfer></filter><rect width="100%" height="100%" filter="url(%23noise-filter)"></rect></svg>');*/
	background-image: url('https://khoa-tr.com/wp-content/uploads/mynoise.png');
	mix-blend-mode: multiply;
	background-size: 300px 300px;
	background-clip: content-box;
}
section#latest-work #ais #phone-mockup img{
	width: 100%
}



/****************  MDC  ******************/
section#latest-work #mdc .lw-text mark{
	background-color: rgba(38, 114, 251, .7);
}

section#latest-work #mdc #mdc-bottom{
	width: 100%;
	padding: 4cqw;
	background-color: #F1F5FF;	
}

section#latest-work #mdc .project-types{
	position: relative;
	left: unset;
	bottom: unset;
}


/*==========Charts==========*/

section#latest-work #chart-wrapper{
	border-radius: .5rem;
	width: 100%;
	padding: 1rem;
	filter: drop-shadow(2px 4px 12px rgba(0, 0, 0, .15));
	background-color: white;	
}
section#latest-work #chart-wrapper #chart-illustrations{
	display: flex;
	overflow: hidden;
}
section#latest-work #chart-wrapper #chart-illustrations #chart-1{
	width: 100%;
}

section#latest-work #chart-wrapper #chart-elm-title{
	font-family: 'Simplon Norm Medium';
	font-size: .8125rem;
	color: #707EA4;
	margin-bottom: 4px;
}
section#latest-work #chart-wrapper #chart-elm-numbers{
	display: flex;
	align-items: baseline;
	margin-bottom: 3rem;
}
section#latest-work #chart-wrapper #chart-elm-number-primary{
	font-family: 'Simplon Norm Medium';
	font-size: 1.5rem;
	color: #3D4A68;
	margin-right: 20px;
}
section#latest-work #chart-wrapper #chart-elm-arrow{
	color: #707EA4;
	font-size: 0.7rem;
	margin-right: 6px;
}
section#latest-work #chart-wrapper #chart-elm-number-secondary{
	font-family: 'Simplon Norm Medium';
	font-size: .8125rem;
	color: #707EA4;
}
section#latest-work #chart-wrapper #chart-elm-blocks{
	display: flex;
	align-items: flex-end;
	width: 100%;
	height: 100px;
	border-bottom: 1px solid #111;
	-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
section#latest-work #chart-wrapper #chart-elm-blocks div{
	-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
section#latest-work #chart-wrapper .chart-elm-blocks-items:nth-child(1){
	background-color: white;
}
section#latest-work #chart-wrapper .chart-elm-blocks-items:nth-child(2){
	background-color: #D8DBE1;
}
section#latest-work #chart-wrapper .chart-elm-blocks-items:nth-child(3){
	background-color: #F5F6F7;
}
section#latest-work #chart-wrapper .chart-elm-blocks-items:nth-child(4){
	background-color: #F5F6F7;
}
section#latest-work #chart-wrapper .chart-elm-blocks-items:nth-child(5){
	background-color: #E2E4E9;
}
section#latest-work #chart-wrapper .chart-elm-blocks-items:nth-child(6){
	background-color: #D8DBE1;
}
section#latest-work #chart-wrapper .chart-elm-blocks-items:nth-child(7){
	background-color: #B1B7C3;
}

section#latest-work #chart-wrapper .chart-elm-blocks-items:nth-child(11){
	background-color: #B1B7C3;
}
section#latest-work #chart-wrapper .chart-elm-blocks-items:nth-child(12){
	background-color: #C4C8D1;
}
section#latest-work #chart-wrapper .chart-elm-blocks-items:nth-child(13){
	background-color: #E2E4E9;
}
section#latest-work #chart-wrapper .chart-elm-blocks-items:nth-child(14){
	background-color: #EBECEF;
}
section#latest-work #chart-wrapper .chart-elm-blocks-items:nth-child(15){
	background-color: white;
}

section#latest-work #chart-wrapper .chart-elm-blocks-items:nth-child(8){
	width: 5%;
	background-color: #C4E6F9;
}
section#latest-work #chart-wrapper .chart-elm-blocks-items:nth-child(9){
	width: 20%;
	background-color: #99C2F3;
}
section#latest-work #chart-wrapper .chart-elm-blocks-items:nth-child(10){
	width: 75%;
	background-color: #566CBC;
}

section#latest-work #chart-wrapper #chart-elm-time-marks{
	/*display: flex;*/
	justify-content: center;
	gap: 19.6%;
	width: 100%;
	height: 4px;
	margin-bottom: 8px;
	display: none;
	margin-left: -3%;
}
section#latest-work #chart-wrapper #chart-elm-time-marks div{
	width: 1px;
	height: 4px;
	background-color: #111;
}
section#latest-work #chart-wrapper #chart-elm-time-numbers{
	/*display: flex;*/
	justify-content: center;
	gap: 10.4%;
	font-family: 'Simplon Norm Regular';
	font-size: .75rem;
	color: #3D4A68;
	display: none;
	margin-left: -5%;
}
section#latest-work #chart-wrapper #chart-elm-time-numbers div{
	width: 30px;
	text-align: center;
}

section#latest-work #chart-wrapper #chart-elm-annotation{
	display: flex;
	justify-content: center;
	font-family: 'Simplon Norm Regular';
	font-size: .75rem;
	margin-top: 12px;
}
section#latest-work #chart-wrapper .chart-elm-annotation-items{
	margin-left: 10px;
	margin-right: 10px;
	display: flex;
	align-items: center;
	color: #3D4A68;
}
section#latest-work #chart-wrapper .chart-elm-annotation-squares{
	width: 12px;
	height: 12px;
	margin-right: 4px;
}
section#latest-work #chart-wrapper #chart-elm-annotation-square-1{
	background-color: #C4E6F9;
}
section#latest-work #chart-wrapper #chart-elm-annotation-square-2{
	background-color: #99C2F3;
}
section#latest-work #chart-wrapper #chart-elm-annotation-square-3{
	background-color: #566CBC;
}

/*time range filter*/
section#latest-work #mdc #chart-wrapper #chart-elm-timerange{
	display: flex;
	gap: .5rem;
	font-family: 'Simplon Norm Medium';
	font-size: .75rem;
	position: absolute;
	right: 1rem;
	top: 1rem;
}
section#latest-work #chart-wrapper #chart-elm-timerange div{
	border: 1px solid rgba(0, 0, 255, .1);
	padding: 2px 0;
	text-align: center;
	width: 2rem;
	align-items: center;
	-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
section#latest-work #chart-wrapper #chart-elm-24h{
	background-color: #2672FB;
	color: white;
}
section#latest-work #chart-wrapper #chart-elm-timerange-indicator{
	width: 8px;
	height: 8px;
	border-radius: 100%;
	background-color: #2672FB;
	border: 1px solid rgba(0, 0, 255, .1);
	position: absolute;
	top: 2.7rem;
	right: calc(9rem + 4px);
	-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/*=========chart 2=========*/

section#latest-work #chart-wrapper #chart-illustrations #chart-2{
	width: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
}
section#latest-work #chart-wrapper #chart-illustrations #chart-2 #chart-pie{
	width: 100px;
  height: 100px;
  opacity: 0;
  margin-bottom: 12px;
	-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
section#latest-work #chart-wrapper #chart-illustrations #chart-2 #chart-pie-outer{
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: conic-gradient(#111F42 0% 15%, #2F3963 15% 25%, #3E4E88 25% 35%, #566CBC 35% 45%, #6E89EC 45% 50%, #83A5EE 50% 55%, #99C2F3 55% 59%, #B2DEF8 59% 63%, #C4E6F9 63% 69%, #D7EEFB 69% 72%, #E9ECF2 72% 100%);
}

section#latest-work #chart-wrapper #chart-illustrations #chart-2 #chart-pie-inner{
	width: 60px;
  height: 60px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  margin-top: -80px;
  margin-left: 20px;
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
section#latest-work #chart-wrapper #chart-illustrations #chart-2 #chart-elm-filetypes{
	font-family: 'Simplon Norm Regular';
	font-size: .75rem;
	color: #3D4A68;
	height: 18px;
}


/***************  OPSWAT Client  *****************/
section#latest-work #osc .lw-text mark{
	background-color: rgba(39, 52, 84, .5);
}

section#latest-work #osc #osc-ani{
	width: 100%;
	aspect-ratio: 16 / 9;

	position: relative;
	overflow: hidden;

	background-color: #273454;
	filter: drop-shadow(2px 4px 12px rgba(0, 0, 0, .15));

	container-type: inline-size; /*for calculating child's size in cqw */
}

section#latest-work #osc #osc-ani #osc-controls{
	position: absolute;
	top: 8px;
	right: 12px;
	color: white;
	display: flex;
	gap: 4cqw;
}
section#latest-work #osc #osc-ani #osc-controls img{
	width: 2.7cqw;
}

section#latest-work #osc .project-name{
	z-index: 2;
	position: relative;
}
section#latest-work #osc .project-types{
	z-index: 2;
	position: relative;
}

section#latest-work #osc #osc-spreading{
	width: 100%;
	aspect-ratio: 1 / 1;

	position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -39%);
}

section#latest-work #osc #osc-spreading .osc-spreading-lines{
	width: 10%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;

  background: linear-gradient(#273454 0%, #273454 0%) padding-box, linear-gradient(to bottom, #273454 1%, #2672fb 100%) border-box;
  border: 2px solid transparent; /* Set a transparent border the width you want the gradient to be */

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;

  -webkit-transition: all 2s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: all 2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

section#latest-work #osc #osc-circle{
	width: 60%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;

	box-shadow: inset 0 0 10px #0A3D9A; 
	background-image: linear-gradient(0deg, #0A3D9A 5%, #2672fb 100%);

	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 16px;
	padding-bottom: 18%;

	color: white;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -30%);

}

section#latest-work #osc #osc-circle #osc-circle-laptop{
	width: 21cqw;
	 -webkit-transition: all .7s ease-in-out;
	transition: all .7s ease-in-out;
}
section#latest-work #osc #osc-circle #osc-circle-percentage{
	font-family: 'Simplon Norm Medium';
	/*font-size: 2rem;*/
	font-size: 4.4cqw;
	display: flex;
	align-items: flex-start;
	gap: 4px;
}
section#latest-work #osc #osc-circle #osc-circle-percentage span{
	font-family: 'Simplon Norm Regular';
	/*font-size: .75rem;*/
	font-size: 1.6cqw;
	padding-top: 6px;
}
section#latest-work #osc #osc-circle #osc-circle-checking{
	font-family: 'Simplon Norm Regular';
	/*font-size: .75rem;*/
	font-size: 1.6cqw;
}
section#latest-work #osc #osc-circle #osc-circle-cancel{
	font-family: 'Simplon Norm Medium';
	/*font-size: .75rem;*/
	font-size: 1.6cqw;
}


/* ALLEY 154 */
section#latest-work #a154 .lw-text mark{
	background-color: rgba(0, 0, 0, .1);
}
section#latest-work #a154 .lw-ani{
		background-image: url('https://khoa-tr.com/wp-content/uploads/alley-1-1.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: 50% 100%;

		width: 100%;
		aspect-ratio: 54 / 35;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
}


/*============== Get to know me  ===============*/
section#get-to-know-me #gtkm-wrapper{
	display: flex;
	width: 100%;
}
section#get-to-know-me #gtkm-wrapper a{
	background-color: blue;
	box-shadow: 10px 10px black;
	width: 50%;
	max-width: 100%;
	aspect-ratio: 1 / 1;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding-top: 3.6%;
	padding-bottom: 3.6%;
	margin-left: auto;

	-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
section#get-to-know-me #gtkm-wrapper a:hover{
	box-shadow: none;
	text-decoration: none;
}
section#get-to-know-me #gtkm-wrapper a:hover #gtkm-arrow path{
	filter: drop-shadow(10px 10px 0px rgba(0, 0, 0, 1.0));
}

section#get-to-know-me #gtkm-arrow{
	width: 60%;
}
section#get-to-know-me #gtkm-arrow path{
		-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

section#get-to-know-me #gtkm-text{
	color: white;
}


/*=====  IN VIEW ANIMATION  =====*/
.in-view-animation-init{
	margin-top: -3rem;
	opacity: 0;
	-webkit-transition: all 2s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: all 2s cubic-bezier(0.165, 0.84, 0.44, 1);
}