/* ------------------------------------------------- */
/* CSS RESET */
/* ------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ------------------------------------------------- */
/* GLOBAL SETTINGS */
/* ------------------------------------------------- */
body {
	background: #171717;
	color: white;
	font-size: 16px;
	font-family: "Roboto", sans-serif;
	overflow-x: hidden;
}
div {
	cursor: default;
}

@font-face { /* for non-IE */
    font-family: "Bebas";
    font-style:  normal;
    font-weight: 700;
    src: url(http://:/) format("No-IE-404"), url('../fonts/UTMBebas.ttf') format("truetype");
}
@font-face { /* for non-IE */
    font-family: "Androgyne";
    font-style:  normal;
    font-weight: 100;
    src: url(http://:/) format("No-IE-404"), url('../fonts/UTMAndrogyne.ttf') format("truetype");
}
.roboto-thin {
	font-family: "Roboto", sans-serif;
	font-weight: 100;
	font-style: normal;
}

.roboto-light {
	font-family: "Roboto", sans-serif;
	font-weight: 300;
	font-style: normal;
}

.roboto-regular {
	font-family: "Roboto", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.roboto-medium {
	font-family: "Roboto", sans-serif;
	font-weight: 500;
	font-style: normal;
}

.roboto-bold {
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	font-style: normal;
}

.roboto-black {
	font-family: "Roboto", sans-serif;
	font-weight: 900;
	font-style: normal;
}

.roboto-thin-italic {
	font-family: "Roboto", sans-serif;
	font-weight: 100;
	font-style: italic;
}

.roboto-light-italic {
	font-family: "Roboto", sans-serif;
	font-weight: 300;
	font-style: italic;
}

.roboto-regular-italic {
	font-family: "Roboto", sans-serif;
	font-weight: 400;
	font-style: italic;
}

.roboto-medium-italic {
	font-family: "Roboto", sans-serif;
	font-weight: 500;
	font-style: italic;
}

.roboto-bold-italic {
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	font-style: italic;
}

.roboto-black-italic {
	font-family: "Roboto", sans-serif;
	font-weight: 900;
	font-style: italic;
}

h1 {
	width: calc(100% - 48px);
	display: block;
	font-family: "Bebas", sans-serif;
	font-size: 3em;
	line-height: 1em;
	text-align: center;
	padding: 40px 24px 24px 24px;
	margin: 0;
	clear: both;
	z-index: 10;
}
h1.black {
	color: #000;
}
h4 {
	width: calc(100% - 144px);
	text-align: center;
	padding: 0 72px 36px 72px;
	line-height: 1.2em;
	font-size: .9em;
	font-weight: normal;
	clear: both;
}
@media screen and (max-width: 640px) {
	h4 {
		width: calc(100% - 72px);
		padding: 0 36px 36px 36px;
	}
}
a {
	color: white;
	text-decoration: none;
	transition: color 0.5s;
}
a:hover {
	color: #AAA;
}

a:active {
	color: lightblue;
}
* {
	transition: all .3s;
}

.wrapper {
	width: 100%;
	visibility: visible;
	overflow: hidden;
}
.fixed {
	width: 980px;
	margin: 0 auto 0 auto;
	position: relative;
}
@media screen and (max-width: 1024px) {
	.fixed {
		width: 100% !important;
	}
}
@media screen and (max-width: 860px) {
	.fixed {
		width: 100% !important;
	}
}
.settings {
	position: fixed;
	z-index: 9999999;
	bottom: 0;
	background: rgba(10,10,10, 0.5);
	font-family: "Roboto", sans-serif;
	font-weight: normal;
	font-size: 20px;
}

.settings {
	right: 0;
	padding: 10px 20px;
	border-radius: 10px 0 0 0;
}

.settings a {
	border: none;
}

.header {
	background: #171717;
	width: 100%;
	padding: 0;
	height: 80px;
	position: fixed;
	top: 0;
	z-index: 9999;
}
#loading-bar {
	position: fixed;
	top: 0;
	left: 0;
	width: 0;
	height: 3px;
	background-color: #EF4036;
	z-index: 99999;
	transition: width 0.4s ease;
}

/* ------------------------------------------------- */
/* MENU CHÍNH */
/* ------------------------------------------------- */
nav {
	width: 980px;
	height: 80px;
	margin: 0 auto 0 auto;
	position: relative;
	transition: none;
	z-index: 98;
}
@media screen and (max-width: 1024px) {
	nav {
		width: 100%;
	}
}
#navigator-mobile {
	display: none;
}
.menu {
	background: #EF4036;
	color: #171717;
	width: 40px;
	height: 30px;
	border-radius: 8px;
	position: absolute;
	top: 14px;
	right: 24px;
	display: none;
	text-align: center;
	padding: 8px 0 0 0;
	overflow: hidden;
	cursor: pointer;
	z-index: 99;
}
.menu:hover {
	background: #000;
	color: #EF4036;
}
nav .logo {
	position: absolute;
	top: 0;
	left: 0;
	background: url('../images/logo.png') no-repeat;
	background-size: 100%;
	width: 100px;
	height: 53px;
	text-indent: -500px;
	overflow: hidden;
	font-size: 0;
	margin: 16px 24px 0 0;
}
nav .logo:hover {
	background-position: 0 -60px;
	opacity: .7;
	-webkit-opacity: .7;
	-moz-opacity: .7;
	-o-opacity: .7;
}
nav .logo a {
	display: block;
	width: 140px;
	height: 60px;
}
nav li {
	float: left;
	height: 60px;
	line-height: 55px;
	margin: 10px 30px 0 0;
	position: relative;
	cursor: pointer;
}

nav a {
	display: inline-block;
	height: 30px;
	font-size: .95em;
	color: #939393;
	float: left;
}
nav a:hover {
	color: #ef4036;
}
nav li a:after {
	content: '';
	width: 0;
	height: 1px;
	position: absolute;
	bottom: calc(50% - 8px);
	left: 0;
	background: #EF4036;
	transition: 300ms;
}
nav li a:hover:after {
	width: 100%;
}
nav li a:not(:hover):after {
	right: 0;
	left: auto;
}
nav ul {
	position: absolute;
	top: 0;
	left: 120px;
	padding: 0 0 0 24px;
}
nav li:last-child {
	width: 180px;
	float: right;
	margin: 5px 0 0 0;
	display: none;
}
nav li:last-child a {
	text-transform: none;
	margin: 5px 10px 0 5px;
	float: right;
	font-size: .75em;
}
nav div.blog {
	line-height: 130%;
	font-size: .7em;
	text-align: center;
	width: auto;
	height: 16px;
	background: #333;
	color: #ccc;
	padding: 3px 8px 0 6px;
	border-radius: 24px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-o-border-radius: 8px;
	position: absolute;
	top: 12px;
	right: -98%;
	cursor: pointer;
}
nav li:hover div.blog,
nav div.blog:hover {
	background: #ef4036;
	color: #fff;
}
@media screen and (max-width: 980px) {
	.header {
		height: 64px;
	}
	#navigator {
		display: none;
	}
	#navigator-mobile {
		display: inline-block;
	}
	nav ul {
		position: absolute;
		top: 64px;
		right: 0;
		height: 64px;
		border: 0;
		margin: 0;
		padding: 0;
	}
	.menu {
		display: inline-block;
	}
	nav li {
		width: calc(100% - 24px);
		float: none;
		background: #000;
		border: 0;
		margin: 0;
		padding: 0 0 0 24px;
		position: relative;
	}
	nav div.blog {
		right: 24px;
	}
	nav li:last-child {
		float: none;
		width: 100%;
		margin: 0;
	}
	nav li:last-child a {
		float: left;
	}
	nav a {
		width: auto;
		float: none;
	}
	nav .logo {
		display: block;
		background-size: 100%;
		width: 70px;
		height: 37px;
		margin: 14px 24px 0 16px;
		border: 0;
	}
	nav .logo a {
		width: 70px;
		height: 37px;
	}
	nav .logo:hover {
		background-position: 0 -37px;
		opacity: .7;
		-webkit-opacity: .7;
		-moz-opacity: .7;
		-o-opacity: .7;
	}
}
/* ------------------------------------------------- */
/* Kết thúc MENU CHÍNH */
/* ------------------------------------------------- */

.recruiter {
	background: #252525;
	width: 420px;
	font-size: .8em;
	position: fixed;
	bottom: 24px;
	left: calc(50% - 210px);
	z-index: 1000;
	border-radius: 8px;
	padding: 0;
	cursor: pointer;
	margin: 0 auto 0 auto;
}
@media screen and (max-width: 640px) {
	.recruiter {
		left: 0;
		border-radius: 0;
		width: 100%;
		bottom: 0;
	}
}
.recruiter .toggle {
	display: block;
	cursor: pointer;
	position: absolute;
	bottom: 16px;
	right: 16px;
	z-index: 1003;
	transition: none;
}
.recruiter .toggle:hover {
	color: #ef4036;
}
.recruiter .toggle_off {
	width: 24px;
	background: #252525;
	padding: 4px 16px 4px 16px;
	border-radius: 8px 8px 0 0;
	bottom: unset;
	right: 32px;
	top: -32px;
}
.recruiter .text {
	color: #999;
	padding: 16px 0 16px 48px;
	width: calc(100% - 48px);
	display: block;
	clear: right;
	z-index: 1001;
}
.recruiter .text span,
.recruiter .text span:hover {
	color: #999;
	position: absolute;
	bottom: 24px;
	left: 16px;
	z-index: 1002;
}
.recruiter .text b {
	color: #fff;
	font-weight: normal;
	display: block;
	font-size: 1.1em;
	clear: both;
	margin: 0 0 4px 0;
}
.recruiter a {
	color: #999;
	font-size: 1em;
	padding: 48px 8px 4px 16px;
	width: 56px;
	text-align: center;
	display: inline-block;
	vertical-align: top;
	white-space: nowrap;
	transition: none;
	position: relative;
}
@media screen and (max-width: 412px) {
	.recruiter a {
		width: 46px;
	}
}
@media screen and (max-width: 390px) {
	.recruiter a {
		width: 48px;
	}
}
@media screen and (max-width: 360px) {
	.recruiter a {
		width: 40px;
	}
}
.recruiter a span {
	position: absolute;
	top: 16px;
	left: 32px;
}
.recruiter a#role_technology.active,
.recruiter a#role_technology:hover {
	color: #ef4036;
}
.recruiter a#role_marketing.active,
.recruiter a#role_marketing:hover {
	color: #dd3c75;
}
.recruiter a#role_product.active,
.recruiter a#role_product:hover {
	color: #7da144;
}
.recruiter a#role_design.active,
.recruiter a#role_design:hover {
	color: #7953cf;
}
.recruiter a#role_culture.active,
.recruiter a#role_culture:hover {
	color: #05c6c3;
}
.recruiter a#role_technology.active:after,
.recruiter a#role_technology:hover:after,
.recruiter a#role_marketing.active:after,
.recruiter a#role_marketing:hover:after,
.recruiter a#role_product.active:after,
.recruiter a#role_product:hover:after,
.recruiter a#role_design.active:after,
.recruiter a#role_design:hover:after,
.recruiter a#role_culture.active:after,
.recruiter a#role_culture:hover:after {
	content: '';
	width: 0;
	height: 0;
	border-radius: 6px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid #fff;
	position: absolute;
	top: 6px;
	left: 39px;
}
.recruiter a#role_technology.active:after,
.recruiter a#role_technology:hover:after {
	border-bottom: 5px solid #ef4036;
}
.recruiter a#role_marketing.active:after,
.recruiter a#role_marketing:hover:after {
	border-bottom: 5px solid #dd3c75;
}
.recruiter a#role_product.active:after,
.recruiter a#role_product:hover:after {
	border-bottom: 5px solid #7da144;
}
.recruiter a#role_design.active:after,
.recruiter a#role_design:hover:after {
	border-bottom: 5px solid #7953cf;
}
.recruiter a#role_culture.active:after,
.recruiter a#role_culture:hover:after {
	border-bottom: 5px solid #05c6c3;
}

.anchor {
	width: 64px;
	height: 64px;
	border-radius: 32px;
	position: absolute;
	top: -32px;
	left: calc(50% - 32px);
	text-align: center;
	padding: 0;
	overflow: hidden;
	z-index: 9;
}
.anchor:hover {
	transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
}
.anchor span {
	margin: 20px 0 0 0;
}
.intro {
	width: 100%;
	height: 650px;
	background: #ef4036;
	position: relative;
	padding: 180px 0 0 0;
	overflow: hidden;
}
.intro div.title {
	width: 100%;
	text-align: center;
	font-family: "Bebas", sans-serif;
	font-size: 4em;
	font-weight: bold;
	margin: 0 auto 0 auto;
	z-index: 3;
}
@media screen and (max-width: 640px) {
	.intro div.title {
		font-size: 3em;
	}
}
.intro div.desc {
	width: 100%;
	text-align: center;
	font-family: "Bebas", sans-serif;
	font-size: 2em;
	margin: 10px auto 0 auto;
	z-index: 3;
	position: relative;
}
@media screen and (max-width: 640px) {
	.intro div.desc {
		font-size: 1.8em;
	}
}
.intro ul.blog {
	width: 60%;
	text-align: center;
	font-size: .9em;
	margin: 30px auto 0 auto;
	z-index: 3;
	position: relative;
}
.intro ul.blog a { color: #fff }
.intro ul.blog li {
	position: absolute;
	top: 25px;
	width: 100%;
	height: 25px;
	line-height: 1.2em;
	text-align: center;
	opacity: 0;

    -webkit-animation-name: blog_titles;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: blog_titles;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}
.intro ul.blog li:nth-child(2) {
    -webkit-animation-delay: 6.0s;
    -moz-animation-delay: 6.0s;
}
.intro ul.blog li:nth-child(3) {
    -webkit-animation-delay: 12.0s;
    -moz-animation-delay: 12.0s;
}
.intro ul.blog li:nth-child(4) {
    -webkit-animation-delay: 18.0s;
    -moz-animation-delay: 18.0s;
}
@-webkit-keyframes blog_titles {
    0% { top: 25px; opacity: 0 }
    1% { top: 0; opacity: 1 }
    20% { top: 0; opacity: 1 }
    22% { top: 25px; opacity: 0 }
    100% { top: 25px; opacity: 0 }
}
@-moz-keyframes blog_titles {
    0% { top: 25px; opacity: 0 }
    1% { top: 0; opacity: 1 }
    20% { top: 0; opacity: 1 }
    22% { top: 25px; opacity: 0 }
    100% { top: 25px; opacity: 0 }
}

.intro div.guide {
	background: url('../images/intro/guide.png') top center no-repeat;
	background-size: contain;
	width: 200px;
	text-align: center;
	height: 90px;
	margin: 120px auto 0 auto;
	font-size: .8em;
	z-index: 999;
}
.intro div.avatar_transform {
	width: 100%;
	height: 224px;
	text-align: center;
	position: relative;
	margin: 0 0 24px 0;
}
.intro div.avatar_transform div.avatar_2014 div.label,
.intro div.avatar_transform div.avatar_2025 div.label {
	border-radius: 24px;
	padding: 8px 16px 8px 32px;
	width: auto;
	height: auto;
	position: absolute;
	font-weight: bold;
}
.intro div.avatar_transform div.avatar_2014 div.label span,
.intro div.avatar_transform div.avatar_2025 div.label span{
	position: absolute;
	top: 3px;
	left: 6px;
}
.intro div.avatar_transform div.avatar_2014 div.label {
	background: #d03727;
	top: 128px;
	left: -32px;
}
.intro div.avatar_transform div.avatar_2025 div.label {
	background: #f56925;
	top: 64px;
	right: -32px;
}
.intro div.avatar_2014 {
	width: 248px;
	height: 248px;
	opacity: .5;
	margin: 0 auto 0 auto;
	z-index: 3;
	position: absolute;
	top: 0;
	left: calc(50% - 168px);
	animation: avatar_disappear 0.5s ease-out forwards;
	transform-origin: center center;
	cursor: pointer;
}
.intro div.avatar_2014 div.avatar {
	background: url('../images/avatar.jpg') no-repeat;
	width: 224px;
	height: 224px;
	border-radius: 112px;
	-webkit-border-radius: 112px;
	-moz-border-radius: 112px;
	-o-border-radius: 112px;
	cursor: pointer;
}
.intro div.avatar_2025 {
	background: url('../images/avatar_2025.jpg') no-repeat;
	background-size: contain;
	width: 224px;
	height: 224px;
	border-radius: 112px;
	-webkit-border-radius: 112px;
	-moz-border-radius: 112px;
	-o-border-radius: 112px;
	margin: 0 auto 0 auto;
	z-index: 4;
	position: absolute;
	top: 0;
	left: calc(50% - 56px);
}
.intro div.avatar_2025:hover {
	transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	cursor: pointer;
	-webkit-font-smoothing: antialiased;
}
.intro div.avatar_2014:hover {
	animation: avatar_appear 0.5s ease-in-out forwards;
	transform-origin: center center;
	cursor: pointer;
}
@-webkit-keyframes avatar_appear {
	0% { left: calc(50% - 168px) }
	50% { left: calc(50% - 240px) }
	100% { left: calc(50% - 168px) }
}
@-webkit-keyframes avatar_disappear {
	0% { left: calc(50% - 168px) }
	50% { left: calc(50% - 240px) }
	100% { left: calc(50% - 168px) }
}
@-moz-keyframes avatar_appear {

}
.intro div.avatar_2014:hover {
	z-index: 5;
	opacity: 1;
}
.intro div.avatar_2025:hover {
	z-index: 5;
}
.intro div.avatar_2014 a {
	display: block;
}
.intro div.arrow {
	background: url('../images/intro/arrow.png') no-repeat;
	width: 122px;
	height: 134px;
	position: absolute;
	top: 240px;
	left: 20%;
	z-index: 1;
}
.intro div.arrow_left {
	background: url('../images/intro/arrow_left.png') no-repeat;
	width: 475px;
	height: 313px;
	position: absolute;
	top: 430px;
	left: -20px;
	z-index: 1;
}
.intro div.arrow_right {
	background: url('../images/intro/arrow_right.png') no-repeat;
	width: 604px;
	height: 440px;
	position: absolute;
	top: 40px;
	right: -20px;
	z-index: 1;
}
@media screen and (max-width: 1280px) {
	.intro div.arrow {
		top: 128px;
		left: 15%;
	}
	.intro div.arrow_left {
		transform: scale(.5);
		transform-origin: left;
	}
	.intro div.arrow_right {
		transform: scale(.5);
		transform-origin: right;
	}
}
@media screen and (max-width: 720px) {
	.intro div.arrow {
		top: 64px;
		left: 10%
	}
	.intro div.arrow_left {
		transform: scale(.2);
		transform-origin: left;
	}
	.intro div.arrow_right {
		transform: scale(.2);
		transform-origin: right;
	}
}
@media screen and (max-width: 640px) {
	.intro div.arrow {
		top: 24px;
		left: 5%
	}
	.intro div.arrow_left {
		top: 520px;
		transform: scale(.3);
		transform-origin: left;
	}
	.intro div.arrow_right {
		top: -128px;
		transform: scale(.3);
		transform-origin: right;
	}
}
/* ------------------------------------------------- */
/* ABOUT */
/* ------------------------------------------------- */
.contact {
	background: #05c6c3;
	width: 100%;
	cursor: pointer;
}
.contact:hover {
	cursor: pointer;
	background: #00b0ad;
	animation: contact 1s ease-in-out infinite;
}
@-webkit-keyframes contact {
	0% { background: #05c6c3 }
	50% { background: #21f0ed }
	100% { background: #05c6c3 }
}
.contact .fixed {
	min-height: 80px;
	cursor: pointer;
}
.contact .text {
	width: calc(50% - 56px);
	color: #252525;
	float: left;
	padding: 32px 0 0 56px;
	cursor: pointer;
}

.contact .text span {
	position: absolute;
	width: 48px;
	height: 36px;
	border-radius: 24px;
	top: 16px;
	left: 0;
	background: #252525;
	color: #05c6c3;
	padding: 12px 0 0 0;
	text-align: center;
}
@media screen and (max-width: 640px) {
	.contact .text {
		width: calc(60% - 72px);
		padding: 24px 0 0 72px;
	}
	.contact .text span {
		left: 16px;
	}
}
.contact .chat {
	position: relative;
	height: 80px;
	width: 50%;
	float: right;
	text-align: right;
	cursor: pointer;
}
.contact .chat a {
	display: inline-block;
	position: relative;
	background: #252525;
	color: #05c6c3;
	border-radius: 32px;
	margin: 16px 0 0 0;
	padding: 16px 48px 16px 24px;
	cursor: pointer;
}
.contact .chat a span {
	position: absolute;
	top: 12px;
	right: 16px;
	cursor: pointer;
}
@media screen and (max-width: 640px) {
	.contact .chat {
		width: 40%;
	}
	.contact .chat a {
		margin: 16px 24px 0 24px;
	}
}
.contact .chat a:hover {
	background: #05c6c3;
	color: #252525;
}

/* ------------------------------------------------- */
/* ABOUT */
/* ------------------------------------------------- */
.about {
	background: #05c6c3;
	width: 100%;
	height: 140px;
	position: relative;
	font-size: 1.1em;
	color: #000;
	padding: 20px 0 0 0;
}
.about div.name, .about div.nickname {
	font-family: "Bebas", sans-serif;
	font-size: 3em;
}
.about div.name b {
	color: #fff;
	font-weight: normal;
}
.about div.nick-explain {
	position: absolute;
	top: 0;
	left: 430px;
}
.about div.title-nickname {

}
.about div.nickname {

}
.about div.nickname span {
	font-family: "Roboto", sans-serif;
	font-size: .25em;
	position: absolute;
	bottom: -16px;
	left: 0;
	white-space: nowrap;
}
.about div.happy-to-call {
	width: 33.3%;
	min-height: 104px;
	position: absolute;
	top: 0;
	right: 0;
}
.about div.happy-to-call p {
	width: 160px;
}
.about div.nick {
	background: #000;
	color: #05c6c3;
	width: 90px;
	height: 90px;
	border-radius: 45px;
	-webkit-border-radius: 45px;
	-moz-border-radius: 45px;
	-o-border-radius: 45px;
	line-height: 90px;
	text-align: center;
	font-family: "Bebas", sans-serif;
	font-size: 3em;
	position: absolute;
	top: 0;
	right: 80px;
	z-index: 5;
}
.about div.nick a {
	display: block;
	border-left: 16px solid transparent;
	border-right: 16px solid transparent;
	border-top: 24px solid black;
	width: 0;
	height: 0;
	position: absolute;
	top: 25px;
	left: -12px;
}
.about div.fish {
	background: url('../images/about/fish.png') no-repeat;
	width: 40px;
	height: 60px;
	position: absolute;
	bottom: 0;
	right: 16px;
	animation: fish 3s ease-in-out infinite;
	z-index: 5;
}
@-webkit-keyframes fish {
	0% { bottom: 0 }
	50% { bottom: 16px }
	100% { bottom: 0 }
}
.about div.sea {
	height: 50px;
	position: absolute;
	width: 100%;
	top: -16px;
	z-index: 4;
}
.about div.sea .deep {
	width: 100%;
	background: #05c6c3;
	height: 32px;
}
.about div.sea::before{
	content: "";
	position: absolute;
	left: 0;
	top: -10px;
	right: 0;
	background-repeat: repeat;
	height: 10px;
	background-size: 20px 20px;
	background-image: radial-gradient(circle at 10px -5px, transparent 12px, #05c6c3 13px);
}
.about div.sea::after{
	content: "";
	position: absolute;
	left: 0;
	top: -15px;
	right: 0;
	background-repeat: repeat;
	height: 15px;
	background-size: 40px 20px;
	background-image: radial-gradient(circle at 10px 15px, #05c6c3 12px, transparent 13px);
}
.about div.shark {
	background: url('../images/about/shark.png') no-repeat;
	width: 56px;
	height: 32px;
	position: absolute;
	top: -36px;
	right: 350px;
	z-index: 2;
	overflow: hidden;
	transition: none;
	animation: shark 20s ease-in-out infinite;
}
@-webkit-keyframes shark {
	0% { right: 360px; top: -36px; transform: scaleX(1); }
	15% { right: 350px; top: -64px; transform: scaleX(1); }
	45% { right: 50px; top: -64px; transform: scaleX(1); }
	50% { right: 40px; top: -36px; transform: scaleX(1); }
	51% { right: 40px; top: -36px; transform: scaleX(-1); }
	55% { right: 50px; top: -64px; transform: scaleX(-1); }
	85% { right: 350px; top: -64px; transform: scaleX(-1); }
	99% { right: 360px; top: -36px; transform: scaleX(-1); }
	100% { right: 360px; top: -36px; transform: scaleX(1); }
}
@media screen and (max-width: 1024px) {
	.about div.present,
	.about div.name	{
		width: calc(50% - 24px);
		padding: 0 0 0 24px;
	}
	.about div.name,
	.about div.nickname {
		font-size: 2.8em;
	}
	.about div.nick-explain {
		left: 50%;
	}
	.about div.happy-to-call p {
		width: 100%;
	}
	.about div.nick {
		top: 24px;
	}
}
@media screen and (max-width: 640px) {
	.about {
		height: 240px;
	}
	.about div.present,
	.about div.name	{
		width: 100%;
		text-align: center;
		padding: 0;
	}
	.about div.nick-explain {
		margin: 20px 0 0 0;
		width: calc(50% - 24px);
		top: unset;
		left: 10%;
	}
	.about div.happy-to-call {
		width: calc(50% - 24px);
		top: 88px;
		right: 24px;
	}
	.about div.happy-to-call p {
		width: 100%;
	}
	.about div.nick {
		top: 32px;
		left: 32px;
	}
	.about div.nick a {
		border-left: 16px solid transparent;
		border-right: 16px solid transparent;
		border-top: 0;
		border-bottom: 24px solid black;
		left: 28px;
		top: -8px;
	}
}
/* ------------------------------------------------- */
/* Kết thúc ABOUT */
/* ------------------------------------------------- */

.description {
	top: 740px;
	left: 180px;
	width: 440px;
}

.syntax {
	top: 1510px;
	left: 430px;
	width: 400px;
}

.scrollbar {
	top: 1540px;
	left: 1600px;
	width: 400px;
}

.rotations {
	left: 2185px;
	top: 660px;
	width: 460px;
	transform: rotate(-90deg) translateY(2.5em);
}

.rotations .upside-down {
	font-size: 42px;
	text-align: right;
	transform: rotate(180deg) translateY(3em);
}

.source {
	left: 2200px;
	top: -800px;
	width: 400px;
	transform: rotate(90deg) translateX(50px);
}

.follow {
	width: 475px;
	left: 1100px;
	top: -950px;
	transform: rotate(90deg) translateX(50px);
}

.follow .big {
	font-size: 40px;
}

.highlight {
	animation: highlight 0.2s alternate 6 ;
}

/* ------------------------------------------------- */
/* FAMILY */
/* ------------------------------------------------- */
.family {
	background: #005460;
	width: 100%;
	height: 180px;
	color: #05c6c3;
	position: relative;
}
.family .anchor {
	background: #00434c;
}
.family .anchor span {
	color: #05c6c3;
}
@media screen and (max-width: 720px) {
	.family {
		height: 420px;
	}
}
.family div.slogan {
	font-family: "Bebas", sans-serif;
	font-size: 2.5em;
	width: 240px;
	height: 64px;
	position: relative;
	top: 36px;
	padding: 0;
}
.family div.slogan span {
	display: block;
	font-size: .8em;
}
.family ul.family-icons {
	width: 250px;
	position: absolute;
	top: 40px;
	left: 250px;
	z-index: 999;
}
@media screen and (max-width: 720px) {
	.family div.home {
		left: calc(50% - 24px)
	}
	.family div.slogan {
		width: calc(100% - 48px);
		float: none;
		font-size: 2.4em;
		margin: 0;
		padding: 0 24px 0 24px;
		text-align: center;
	}
	.family div.slogan span {
		font-size: .6em;
	}
	.family ul.family-icons {
		width: 220px;
		float: none;
		text-align: center;
		border: 0;
		position: unset;
		top: unset;
		left: unset;
		margin: 48px auto 0 auto;
	}
}
.family ul li {
	background: url('../images/family/family.png') top left no-repeat;
	background-size: 220px auto;
	height: 80px;
	float: left;
	position: relative;
	cursor: pointer;
	transition: opacity;
}
.family li:first-child { width: 33px; background-position: 0 0 }
.family li:nth-child(2) { width: 37px; background-position: -32px 0 }
.family li:nth-child(3) { width: 32px; background-position: -68px 0 }
.family li:nth-child(3) div { left: -13px }
.family li:nth-child(4) { width: 29px; background-position: -112px 0; margin: 0 0 0 10px }
.family li:nth-child(5) { width: 30px; background-position: -144px 0 }
.family li:nth-child(6) { width: 29px; background-position: -173px 0 }
.family li:last-child { width: 20px; background-position: -201px 0 }

.family li:first-child:hover { width: 33px; background-position: 0 -80px }
.family li:nth-child(2):hover { width: 37px; background-position: -32px -80px }
.family li:nth-child(3):hover { width: 32px; background-position: -68px -80px }
.family li:nth-child(3) div { left: -13px }
.family li:nth-child(4):hover { width: 29px; background-position: -112px -80px; margin: 0 0 0 10px }
.family li:nth-child(5):hover { width: 30px; background-position: -144px -80px }
.family li:nth-child(6):hover { width: 29px; background-position: -173px -80px }
.family li:last-child:hover { width: 20px; background-position: -201px -80px }
.family li:nth-child(6) div { left: -16px }
.family li:last-child div { left: -20px }

.family ul li div {
	background: #05c6c3;
	height: 18px;
	line-height: 17px;
	position: absolute;
	bottom: -30px;
	color: #005460;
	font-size: .75em;
	white-space: nowrap;
	padding: 0 10px 0 10px;
	border-radius: 14px;
	-webkit-border-radius: 14px;
	-moz-border-radius: 14px;
	-o-border-radius: 14px;
	visibility: hidden;
	opacity: 0;
}
.family ul li:hover div {
	bottom: -23px;
	visibility: visible;
	opacity: 1;
}
.family ul li div a {
	display: block;
	color: #05c6c3;
	width: 5px;
	height: 3px;
	position: absolute;
	top: -4px;
	left: 45%;
}
.family button:hover {
	transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(360deg);
}
.family div.mobile span,
.family div.mail span,
.family div.messenger span {
	background: #05c6c3;
	width: 48px;
	height: 37px;
	color: #005460;
	border-radius: 32px;
	text-align: center;
	padding: 11px 0 0 0;
	margin: 0 8px 0 0;
}
.family div.mobile a,
.family div.mail a,
.family div.messenger a {
	color: #05c6c3;
}
.family div.mobile {
	width: 270px;
	height: 50px;
	position: absolute;
	top: 24px;
	line-height: 50px;
	right: 170px;
	font-size: 1.5em;
	z-index: 3;
}
.family div.mail {
	width: 270px;
	position: absolute;
	top: 80px;
	line-height: 50px;
	right: 170px;
	font-size: 1em;
}
.family div.messenger {
	border-radius: 32px;
	width: 160px;
	min-height: 32px;
	position: absolute;
	bottom: -32px;
	right: 0;
	text-align: left;
	z-index: 3;
	padding: 8px 0 16px 24px;
	cursor: pointer;
}

@media screen and (max-width: 720px) {
	.family div.mail, .family div.mobile, .family div.messenger {
		top: unset;
		clear: both;
		position: relative;
		right: unset;
		padding: 16px 0 0 24px;
	}
	.family div.messenger {
		bottom: 8px;
	}
}
/* ------------------------------------------------- */
/* Kết thúc FAMILY */
/* ------------------------------------------------- */

/* ------------------------------------------------- */
/* TIMELINE */
/* ------------------------------------------------- */
.timeline {
	background: #f4ee73;
	width: 100%;
	height: auto;
	color: #252525;
	position: relative;
}
.timeline .anchor {
	background: #252525;
}
.timeline .anchor span {
	color: #f4ee73;
}
.timeline div.fixed {
	padding: 16px 0 16px 0;
}
@media screen and (max-width: 640px) {
}
.timeline div.stories {
	width: 250px;
	height: auto;
	padding: 0;
	font-size: 1em;
	font-family: "Bebas", sans-serif;
	line-height: 120%;
	position: absolute;
	top: 32px;
	right: 32px;
	z-index: 1;
}
@media screen and (max-width: 640px) {
	.timeline div.stories {
		width: calc(100% - 96px);
		position: relative;
		top: unset;
		right: unset;
	}
}
.timeline div.avatar {
	background: url('../images/avatar.jpg') no-repeat;
	width: 224px;
	height: 224px;
	border-radius: 112px;
	-webkit-border-radius: 112px;
	-moz-border-radius: 112px;
	-o-border-radius: 112px;
	transform: scale(.65);
	-webkit-transform: scale(.65);
	-moz-transform: scale(.65);
	-o-transform: scale(.65);
	z-index: 2;
}
@media screen and (max-width: 640px) {
	.timeline div.avatar {
		position: relative;
		top: unset;
		right: unset;
	}
}
.timeline div.story {
	background: #252525;
	float: left;
	color: #f4ee73;
	width: 240px;
	height: 80px;
	padding: 24px 32px 24px 32px;
	margin: 0 0 24px 0;
	font-size: 1em;
	font-family: "Bebas", sans-serif;
	line-height: 120%;
	transform: rotate(-2deg);
	-webkit-transform: rotate(-2deg);
	-moz-transform: rotate(-2deg);
	-o-transform: rotate(-2deg);
	z-index: 1;
}
@media screen and (max-width: 720px) {
	.timeline div.story {
		width: calc(100% - 48px);
		position: relative;
		top: unset;
		right: unset;
		margin: 16px 0 0 32px;
	}
}
.timeline div.story b {
	position: absolute;
	top: 20px;
	left: 0;
	font-size: 3em;
	font-weight: normal;
	font-style: italic;
}
.timeline div.story i {
	position: absolute;
	bottom: 5px;
	right: 30px;
	font-size: 3em;
	font-weight: normal;
	font-style: italic;
}
.timeline div.story-computer {
	height: 120px
}
.timeline div.story-fpt {
	transform: rotate(2deg);
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	-o-transform: rotate(2deg);
}
.timeline div.short-story {
	font-family: "Roboto", sans-serif;
	width: 240px;
	margin: 0 0 8px 0;
	padding: 8px 16px 16px 40px;
	float: left;
	font-size: .9em;
	position: relative;
	transform: unset;
	-webkit-transform: unset;
	-moz-transform: unset;
	-o-transform: unset;
}
@media screen and (max-width: 640px) {
	.timeline div.short-story {
		width: calc(100% - 80px);
		padding: 8px 16px 16px 40px;
		margin: 4px 0 8px 24px;
	}
}
.timeline div.short-story span {
	position: absolute;
	top: 0;
	left: 0;
	background: #252525;
	width: 32px;
	height: 28px;
	text-align: center;
	border-radius: 16px;
	color: #f4ee73;
	padding: 4px 0 0 0;
	font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
}
.timeline div.short-story span.married {
	padding: 10px 0 0 0;
	font-size: .98em;
	height: 22px;
}
/* Timeline */
.timeline ul {
	margin: 0 0 24px 0;
}
.timeline li {
	clear: both;
	width: calc(100% - 24px);
	padding: 24px 0 0 24px;
	position: relative;
	min-height: 72px;
	z-index: 2;
}
@media screen and (max-width: 640px) {
	.timeline ul {
		height: auto;
		float: none;
	}
	.timeline li {
		float: none;
	}
}
.timeline ul li:before {
	content: ' ';
	width: 1px;
	min-height: 64px;
	position: absolute;
	top: 72px;
	left: 54px;
	z-index: 1;
}
.timeline li .logo {
	position: absolute;
	top: 24px;
	left: 16px;
	width: 64px;
	height: 64px;
}
.timeline li .time {
	font-family: "Bebas", sans-serif;
	font-size: 1.4em;
	clear: both;
	margin: 0 0 5px 64px;
}
.timeline li .content {
	width: calc(100% - 104px);
	padding: 0;
	clear: both;
	margin: 0 0 0 64px;
}
.timeline .icon {
	background: url('../images/timeline/icons.png') no-repeat;
	background-size: auto 100%;
	width: 60px;
	height: 60px;
	border-radius: 30px;
	border: 0;
	float: left;
	margin: 0 10px 0 0;
	z-index: 2;
}
.timeline button:hover {
	transform: scale(.8);
}
.timeline button.baby { background-position: 0 0 }
.timeline button.school_1 { background-position: -60px 0 }
.timeline button.school_2 { background-position: -120px 0 }
.timeline button.school_3 { background-position: -180px 0 }
.timeline button.computer { background-position: -240px 0 }
.timeline button.teckey { background-position: -300px 0 }
.timeline button.de { background-position: -360px 0 }
.timeline button.fpt-old { background-position: -420px 0 }
.timeline button.fpt { background-position: -480px 0 }
.timeline button.cong { background-position: -540px 0 }
.timeline button.ntq { background-position: -600px 0 }
.timeline button.smolab { background-position: -660px 0 }
.timeline button.brainos { background-position: -720px 0 }
.timeline button.eway { background-position: -780px 0 }
.timeline button.forlife { background-position: -840px 0 }
.timeline button.kyc { background-position: -900px 0 }
.timeline button.nhatnhat { background-position: -960px 0 }
.timeline button.xleaders { background-position: -1020px 0 }

.timeline .content div.title {
	font-family: "Bebas", sans-serif;
	font-size: 1.6em;
	margin: 4px 0 4px 0;
}
.timeline .content div.description {
	width: auto;
	font-size: 1em;
	font-weight: bold;
	border-left: 0;
	padding: 8px 24px 4px 0;
	margin: 0;
}
.timeline p {
	display: block;
	width: calc(100% - 300px);
	font-size: 1em;
	font-weight: normal;
	line-height: 1.3em;
	padding: 4px 24px 0 0;
	margin: 4px 0 4px 0;
}
.timeline p.role {
	font-size: .9em;
	font-weight: normal;
	margin: 4px 0 4px 0;
	padding: 4px 16px 0 8px;
	position: relative;
}
.timeline p.role_technology {
	border-left: 3px solid #ef4036;
}
.timeline p.role_marketing {
	border-left: 3px solid #dd3c75;
}
.timeline p.role_product {
	border-left: 3px solid #7da144;
}
.timeline p.role_design {
	border-left: 3px solid #7953cf;
}
.timeline p.role_culture {
	border-left: 3px solid #05c6c3;
}

.timeline span {
	display: block;
	clear: both;
}
@media screen and (max-width: 640px) {
	.timeline p {
		width: calc(100% - 32px);
		border: 0;
		margin: 16px 0 4px 0;
	}
	.timeline p.description {
		margin: 0 0 4px 0;
	}
}
/* ------------------------------------------------- */
/* Kết thúc TIMELINE */
/* ------------------------------------------------- */
/* ------------------------------------------------- */
/* EXPERIENCE */
/* ------------------------------------------------- */
.experience {
	background: #ef4036;
	width: 100%;
	position: relative;
	clear: both;
}
.experience .anchor {
	background: #252525;
}
.experience .anchor span {
	font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
	color: #d03727;
}
.experience .fixed {
	height: 480px;
}
@media screen and (max-width: 640px) {
	.experience {
		height: unset;
		padding: 0 0 32px 0;
	}
	.experience .fixed {
		height: unset;
	}
}
.experience div.impossible {
	background: #f4ee73;
	color: #252525;
	width: 160px;
	height: 112px;
	position: absolute;
	right: 24px;
	bottom: -16px;
	border-radius: 80px;
	-webkit-border-radius: 80px;
	-moz-border-radius: 80px;
	-o-border-radius: 80px;
	font-family: "Roboto", sans-serif;
	font-size: .9em;
	text-align: center;
	z-index: 99;
	padding: 48px 0 0 0;
}
.experience div.impossible span {
	font-size: 1.2em;
}
.experience div.title {
	width: 100%;
	font-family: "Bebas", sans-serif;
	font-size: 3em;
	text-align: center;
	padding: 20px 0 20px 0;
	position: relative;
}
.experience div.block {
	float: left;
	width: calc(33.3% - 24px);
	height: 430px;
	padding: 24px 24px 0 0;
}
.experience div.left {
	float: left;
	width: 300px;
	height: 430px;
	border-right: 1px solid #00b6e6;
}
.experience div.middle {
	float: none;
	height: 430px;
	width: 320px;
	display: table-cell;
	border-right: 1px solid #00b6e6;
	padding-left: 20px;
}
.experience div.right {
	float: right;
	width: 300px;
}
@media screen and (max-width: 640px) {
	.experience div.block {
		float: none;
		width: calc(100% - 48px);
		padding: 0 24px 0 24px;
		margin: 0;
		height: auto;
	}
	.experience div.left,
	.experience div.middle,
	.experience div.right {
		float: none;
		border: 0;
		margin: 0 0 0 32px;
		clear: both;
	}
	.experience div.middle {
		padding-left: 32px;
	}
}
.experience ul.skills li {
	font-size: .8em;
	line-height: 150%;
	height: 24px;
	white-space: nowrap;
}
.experience ul.skills li.title {
	font-family: "Bebas", sans-serif;
	font-size: 1.7em;
	white-space: nowrap;
	height: 40px;
	margin: 0 0 8px 0;
}
.experience ul.skills li.title span {
	font-size: 64%;
	background: #fff;
	width: 24px;
	height: 20px;
	border-radius: 50%;
	color: #ef4036;
	text-align: center;
	padding: 4px 0 0 0;
}
.experience ul.skills li:first-child {
	font-family: "Bebas", sans-serif;
	font-size: 1.7em;
	white-space: nowrap;
	height: 40px;
}
.experience ul.skills li:first-child button {
	background: url('../images/products/icons.png') no-repeat;
	width: 25px;
	height: 25px;
	border: 0;
	float: left;
	margin: 10px 5px 0 0;
}
.experience ul.skills li:first-child button.coding {}
.experience ul.skills li:first-child button.graphics { background-position: 0 -25px }
.experience ul.skills li:first-child button.camera { background-position: 0 -50px }
.experience ul.skills li:first-child button.softwares { background-position: 0 -75px }
.experience ul.skills li:last-child {
	padding: 0 0 20px 0;
}
@media screen and (max-width: 640px) {
	.experience ul.skills li:first-child,
	.experience ul.skills li:last-child {
		border: 0;
	}
}
.experience ul.skills li.points {
	width: 200px;
	height: 20px;
	float: right;
	position: relative;
}
.experience ul.skills li.points div.point {
	height: 20px;
	width: 30px;
	font-size: .9em;
	float: left;
	line-height: 150%;
	text-align: right;
}
.experience ul.skills li.points div.bar {
	width: 160px;
	height: 5px;
	background: #d2251b;
	margin: 10px 0 0 0;
	float: left;
}
.experience ul.skills li.points div.bar p {
	height: 5px;
	background: #fff;
}
.experience ul.skills li.points div.bar p.point-5 {
	width: 50%;
}
.experience ul.skills li.points div.bar p.point-6 {
	width: 60%;
}
.experience ul.skills li.points div.bar p.point-7 {
	width: 70%;
}
.experience ul.skills li.points div.bar p.point-8 {
	width: 80%;
	background: #f4ee73;
}
.experience ul.skills li.points div.bar p.point-9 {
	width: 90%;
	background: #f4ee73;
}
/* ------------------------------------------------- */
/* Kết thúc EXPERIENCE */
/* ------------------------------------------------- */
/* ------------------------------------------------- */
/* PRODUCTS */
/* ------------------------------------------------- */
.products {
	background: #000;
	display: table;
	width: 100%;
	height: auto;
	position: relative;
	padding: 0;
}
.products h4 {
	font-size: .9em;
	color: #666;
	width: 836px;
	margin: 0 auto 0 auto;
}
.products h4.disclaim {
	width: 980px;
	padding: 32px 0 0 0;
	margin: 64px auto 48px auto;
	font-size: .8em;
}
@media screen and (max-width: 980px) {
	.products h4 {
		width: calc(100% - 48px);
		padding: 0 24px 0 24px;
		font-size: .8em;
	}
	.products h4.disclaim {
		width: calc(100% - 64px);
		font-size: .7em;
		margin: 64px 32px 48px 32px;
	}
}
.products .anchor {
	background: #252525;
}
.products .anchor span {
	color: #d03727;
}
.products h1 {
	color: #ef4036;
}
.products .role {
	clear: both;
	width: 980px;
	margin: 16px auto 24px auto;
	text-align: center;
}
@media screen and (max-width: 1024px) {
	.products .role {
		width: calc(100% - 24px);
	}
}
.products .role .type {
	background: #000000;
	color: #666;
	border-radius: 16px;
	padding: 8px 12px 8px 12px;
	margin: 0;
	display: inline-block;
	cursor: pointer;
}
@media screen and (max-width: 390px) {
	.products .role .type {
		padding: 8px 8px 8px 8px;
	}
}
.products .role .active,
.products .role .type:active,
.products .role .type:hover {
	background: #ef4036;
	color: #fff;
}
.products ul {
	width: 1300px;
	padding: 0;
	position: relative;
	margin: 0 auto 0 auto;
}
@media screen and (max-width: 1300px) {
	.products ul {
		width: 980px;
	}
}
@media screen and (max-width: 980px) {
	.products ul {
		width: 650px;
	}
}
@media screen and (max-width: 390px) {
	.products ul {
		width: 390px;
	}
}
@media screen and (max-width: 375px) {
	.products ul {
		width: 375px;
	}
}
.products ul li {
	display: block;
	float: left;
	width: 325px;
	height: 325px;
	overflow: hidden;
	position: relative;
	cursor: pointer;
	z-index: 1;
}
.products ul li label {
	background: #ef4036;
	color: #fff;
	width: 32px;
	height: 32px;
	border-radius: 16px;
	position: absolute;
	top: 8px;
	right: 16px;
	text-align: center;
	z-index: 1;
}
.products ul li label span {
	margin: 4px 0 0 0;
	color: #fff;
}
.products a {
	display: block;
	position: absolute;
	width: 325px;
	height: 325px;
	top: 0;
	left: 0;
	z-index: 9;
}
@media screen and (max-width: 640px) {
	.products {
		padding: 0;
	}
	.products ul {
		width: 420px;
		margin: 0 auto 0 auto;
	}
	.products ul li {
		width: 210px;
		height: 210px;
		overflow: hidden;
		padding: 0;
		margin: 0 auto 0 auto;
	}
	.products a {
		width: 210px;
		height: 210px;
	}
}
@media screen and (max-width: 390px) {
	.products ul {
		width: 390px;
	}
	.products ul li {
		width: 195px;
		height: 195px;
	}
	.products a {
		width: 195px;
		height: 195px;
	}
}
@media screen and (max-width: 375px) {
	.products ul {
		width: 375px;
	}
	.products ul li {
		width: 187px;
		height: 187px;
	}
	.products a {
		width: 187px;
		height: 187px;
	}
}
.products a:hover {
	box-shadow: inset 0 0 50px #000;
	-webkit-box-shadow: inset 0 0 50px #000;
	-moz-box-shadow: inset 0 0 50px #000;
	-o-box-shadow: inset 0 0 50px #000;
	opacity: .2;
}

.products img {
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
}
.products li:hover img {
	top: -325px;
}
@media screen and (max-width: 640px) {
	.products li:hover img {
		top: -210px;
	}
}
@media screen and (max-width: 390px) {
	.products li:hover img {
		top: -195px;
	}
}
@media screen and (max-width: 375px) {
	.products li:hover img {
		top: -187px;
	}
}
.products li:hover div {
	bottom: 0;
}
.products li div {
	background: #fff;
	height: 60px;
	width: 325px;
	position: absolute;
	bottom: -70px;
	left: 0;
	font-size: 1.2em;
	color: #000;
	padding: 10px 0 0 0;
	line-height: 130%;
	text-align: center;
}
@media screen and (max-width: 640px) {
	.products li div {
		width: 100%;
		font-size: 1em;
	}
}
.products li div span {
	display: block;
	font-size: .8em;
}
@media screen and (max-width: 640px) {
	.products li div span {
		display: block;
		font-size: .75em;
	}
}
/* ------------------------------------------------- */
/* Kết thúc PRODUCTS */
/* ------------------------------------------------- */
/* ------------------------------------------------- */
/* PARTNERS */
/* ------------------------------------------------- */
.partners {
	background: #ef4036;
	width: 100%;
	position: relative;
	z-index: 1;
}
.partners .anchor {
	background: #252525;
}
.partners .anchor span {
	color: #d03727;
}
.partners div.fixed {
	height: 360px
}
.partners div.partners-logos {
	background: url('../images/works/list.png') center center no-repeat;
	background-size: contain;
	width: 100%;
	height: 360px;
	position: absolute;
	top: 0;
	left: 0;
	opacity: .4;
}
@media screen and (max-width: 640px) {
	.partners div.fixed {
		height: 200px;
	}
	.partners div.partners-logos {
		height: 200px;
	}
}
/* ------------------------------------------------- */
/* Kết thúc PARTNERS */
/* ------------------------------------------------- */
.footer {
	background: #171717;
	width: 100%;
	height: 500px;
	position: relative;
	z-index: 2;
}
.footer div.back {
	width: 64px;
	height: 64px;
	position: absolute;
	left: calc(50% - 32px);
	top: -32px;
	overflow: hidden;
}
.footer div.back a {
	background: #252525;
	border-radius: 32px;
	width: 64px;
	height: 64px;
	display: block;
	color: #ef4036;
	text-decoration: none;
	text-align: center;
}
.footer div.back:hover {
	transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
}
.footer div.back:hover a {
	background: #ef4036;
	color: #252525;
}
.footer div.back a span {
	margin: 16px 0 0 0;
}
@media screen and (max-width: 640px) {
	.footer div.back {
		width: 100%;
	}
}
.footer div.logo {
	background: url('../images/logo.png') no-repeat;
	background-size: 100%;
	margin: 100px auto 0 auto;
	width: 100px;
	height: 53px;
}
.footer div.buttons {
	width: auto;
	height: 50px;
	margin: 30px auto 0 auto;
	text-align: center;
}
.footer div.buttons a {
	background: #ef4036;
	width: 50px;
	height: 50px;
	border-radius: 25px;
	display: inline-block;
	border: 0;
	cursor: pointer;
	margin: 0 10px 0 0;
	padding: 0;
	transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
}
@media screen and (max-width: 375px) {
	.footer div.buttons a {
		width: 40px;
		height: 40px;
	}
}
.footer div.buttons a svg {
	width: 24px;
	height: 24px;
	margin: 12px auto 0 auto;
	vertical-align: -0.125em;
}
@media screen and (max-width: 375px) {
	.footer div.buttons a svg {
		margin: 8px auto 0 auto;
	}
}
.footer div.buttons a:hover {
	opacity: .5;
	transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(360deg);
}

.footer div.copyright {
	width: 100%;
	color: #ef4036;
	font-size: .7em;
	text-transform: uppercase;
	text-align: center;
	position: absolute;
	bottom: 80px;
}
.fb-follow {
	width: 100%;
	text-align: center;
	height: 50px;
	padding: 30px;
}
@keyframes point-down {
	from {
		top: 0;
	}
	to {
		top: 5px;
	}
}

@keyframes highlight {
	to {
		background: lightblue;
	}
}

/* ------------------------------------------------- */
/* TRANG BLOG */
/* ------------------------------------------------- */
.page-blog {
	background: #f5f5f5;
	width: 100%;
	min-height: 1000px;
	font-family: "Times New Roman", Times, serif;
	color: #000;
}
.page-blog a {
	color: #000;
}
.page-blog a:hover {
	color: #ef4036;
}
.page-blog div.left {
	float: left;
	width: 150px;
	height: 430px;
}
.page-blog div.middle {
	float: none;
	height: 500px;
	width: 600px;
	display: table-cell;
}
.page-blog div.right {
	float: right;
	width: 210px;
}
.page-blog div.left li:last-child {
	margin: 0 0 10px 0;
}
.page-blog div.left li {
	width: 140px;
	height: 30px;
	line-height: 150%;
}
.page-blog div.left li.tree {
	background: url('../images/blog/tree.png') top right no-repeat;
	width: 140px;
	height: 216px;
	overflow: hidden;
	line-height: 100%;
	margin: 0;
	position: relative;
}
.page-blog div.left li.tree p {
	margin: 50px 0 0 0;
	text-align: right;
}
.page-blog div.left li.tree a {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.page-blog div.left li.title {
	text-transform: uppercase;
	height: 40px;
	line-height: 300%;
	border-top: 1px solid #000;
}
.page-blog div.left li.active {
	background: url('../images/blog/leaf.gif') top right no-repeat;
}
.page-blog div.right li {
	padding: 5px 0 3px 0;
}
.page-blog div.right li.title {
	text-transform: uppercase;
	height: 40px;
	line-height: 300%;
	border-top: 5px solid #ebebeb;
	font-style: normal !important;
}
.page-blog div.right ul.pinned li {
	font-style: italic;
}

.page-blog div.item-blog {
	background: #fff;
	width: 600px;
	min-height: 100px;
	margin: 0 0 20px 0;
	position: relative;
	padding: 15px 0 0 0;
}
.page-blog div.item-blog div.title {
	font-family: "Garamond";
	font-size: 1.5em;
	width: 80%;
	text-align: center;
	text-transform: uppercase;
	margin: 0 auto 0 auto;
	padding: 10px 25px 25px 25px;
}
.page-blog div.item-blog div.lead {
	width: 90%;
	margin: 0 auto 0 auto;
	padding: 0 0 20px 0;
	font-size: 1.1em;
	line-height: 130%;
}
.page-blog div.item-blog p.lead {
	font-weight: bold;
	font-style: italic;
	clear: both;
	padding: 0 0 20px 0;
}
.page-blog div.item-blog p {
	padding: 0 0 10px 0;
	line-height: 150%;
}
.page-blog div.item-blog ul.information {
	border-top: 1px solid #e7e7e7;
	border-bottom: 1px solid #e7e7e7;
	width: 90%;
	height: 40px;
	margin: 0 auto 20px auto;
	color: #5a5a5a;
	font-size: .8em;
	font-style: italic;
	overflow: hidden;
}
.page-blog div.item-blog ul.information li:first-child {
	float: left;
	margin: 13px 0 0 0;
}
.page-blog div.item-blog ul.information li:last-child {
	background: url('../images/blog/view.png') no-repeat;
	margin: 13px 0 0 0;
	padding: 0 0 0 23px;
	float: right;
}
.page-blog div.item-blog img.photo {
	background: #fff;
	vertical-align: middle;
	clear: both;
	margin: 0 auto 20px auto;
	display: block;
	border: 1px solid #f1f1f1;
	padding: 5px;
	max-width: 100%;
}
.page-blog div.item-blog div.type {
	background: url('../images/blog/type.png') no-repeat;
	width: 25px;
	height: 25px;
	overflow: hidden;
	position: absolute;
	top: 23px;
	left: -7px;
}
.page-blog div.item-blog div.type-blog { background-position: 0 0 }
.page-blog div.item-blog div.type-camera { background-position: -25px 0 }
.page-blog div.item-blog div.type-link { background-position: -50px 0 }
.page-blog div.item-blog div.type-status { background-position: -75px 0 }
.page-blog div.item-blog div.type a {
	display: block;
	width: 25px;
	height: 25px;
}
.page-blog div.item-blog div.read-more {
	width: 100%;
	text-align: center;
	padding: 0 0 20px 0;
	margin: 0;
	font-style: italic;
	font-size: .9em;
}
.page-blog div.item-blog div.read-more a {
	color: #454444;
}
.page-blog div.item-blog div.read-more a:hover {
	color: #ef4036;
}
.facebook {
	margin: 0 auto 0 auto;
}

.page-blog div.thinking {
	position: relative;
	padding: 190px 0 0 0;
}
.page-blog div.thinking div.icon-status {
	background: url('../images/blog/type.png') no-repeat;
	background-position: -75px 0;
	width: 25px;
	height: 25px;
	position: absolute;
	top: 150px;
	left: 0;
}
.page-blog div.thinking p.text {
	font-style: italic;
	line-height: 140%;
	font-size: .9em;
}
.page-blog div.thinking p.text:first-letter {
	font-family: "Silk";
	font-size: 2em;
}
.page-blog div.thinking p.update {
	color: #757575;
	font-style: italic;
	font-size: .8em;
	padding: 15px 0 10px 0;
}
.page-blog div.avatar {
	background: url('../images/avatar.jpg') no-repeat;
	width: 224px;
	height: 224px;
	border-radius: 112px;
	-webkit-border-radius: 112px;
	-moz-border-radius: 112px;
	-o-border-radius: 112px;
	transform: scale(.7);
	-webkit-transform: scale(.7);
	-moz-transform: scale(.7);
	-o-transform: scale(.7);
	z-index: 2;
	position: absolute;
	top: -40px;
	right: 0;
}
.page-blog footer {
	background: #ebebeb;
	width: 100%;
	height: 140px;
	clear: both;
	text-transform: uppercase;
	font-size: .7em;
	overflow: hidden;
}
.page-blog footer div.copyright {
	position: absolute;
	top: 60px;
	left: 150px;
	line-height: 120%;
}
.page-blog footer div.top {
	position: absolute;
	top: 60px;
	right: 230px;
	text-align: right;
	line-height: 120%;
}
.page-blog footer div.logo {
	background: url('../images/logo.png') no-repeat;
	background-position: 0 -120px;
	width: 115px;
	height: 60px;
	float: left;
	margin: 45px 0 0 0;
}
.page-blog footer div.tree {
	background: url('../images/blog/tree.png') bottom left no-repeat;
	width: 212px;
	height: 140px;
	float: right;
}
.page-blog div.pager {
	border-top: 8px solid #ebebeb;
	margin: 15px 0 20px 0;
	height: 80px;
	overflow: hidden;
	position: relative;
}
.page-blog div.pager ul {
	display: table;
	margin: 0 0 0 210px;
}
.page-blog div.pager li {
	float: left;
	margin: 20px 0 0 0;
}
.page-blog div.pager li.current {
	background: #eeeeee;
}
.page-blog div.pager li.current a {
	color: #000 !important;
}
.page-blog div.pager li a {
	display: block;
	width: 50px;
	height: 25px;
	text-align: center;
	padding: 15px 0 0 0;
	border-right: 1px solid #dedede;
}
.page-blog div.pager li a:hover {
	background: #eeeeee;
}
.page-blog div.pager li:last-child a {
	border: 0;
}
.page-blog div.pager div.next {
	position: absolute;
	top: 20px;
	right: 220px;
}
.page-blog div.pager div.prev {
	position: absolute;
	top: 20px;
	left: 150px;
}
.page-blog div.pager div.next a,
.page-blog div.pager div.prev a {
	background: url('../images/blog/arrow.png') no-repeat;
	width: 45px;
	height: 45px;
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
}
.page-blog div.pager div.next a { background-position: -45px 0 }
.page-blog div.pager div.prev a:hover { background-position: 0 -45px }
.page-blog div.pager div.next a:hover { background-position: -45px -45px }
.page-blog div.pager div.statistic {
	font-style: italic;
	font-size: .75em;
	line-height: 250%;
	text-align: center;
	width: 220px;
	position: absolute;
	top: 25px;
	right: 0;
}