/* On screens that are  */

@media screen and (min-width: 600px) and (max-width: 768px) {
	* {
		margin: 0px;
		font-family: "inter", sans-serif;
		box-sizing: border-box;
	}
	.bg-grey {
		background-color: #f7f7f7;
	}
	/* section>.container {
        width: 1170px;
        margin: auto;
        display: block;
    } */
	/*Padding cho các tiêu đề*/
	.section-title {
		padding: 10px;
	}

	/*định vị hình ảnh background-banner*/
	.bg-image {		
		background-repeat: no-repeat;
	}

	/* Chữ chèn lên hình banner */
	#name{	
		/* vị trí tuyệt đối */
		position: absolute; 
		color: white;
		text-align: center;
		/* vị trí từ top xuống 30%, !important: tránh ảnh hưởng của bootstrap */
		margin-top:-30% !important;
		align-items: center;
		align-self: center;
		align-content: center;
		width: 100%;
	}
	/* di chuột qua đổi thành màu aqua */
	#name:hover {
		color: aqua;
	}
	/*thiết đặt thanh điều hướng*/
	.container1 {
		display: flex;
		justify-content: center;
	}
	/*căn giữa chữ ở thanh điều hướng*/
	#nav-bar {
		text-align: center;
	}
	#nav-bar a {
		text-decoration: none;
	}
	/*loại bỏ gạch chân đường link*/
	a {
		text-decoration: none;
	}
	/* Font chữ cho các mục ở Navigation bar */
	.nav1,
	.nav2,
	.nav3,
	.nav4,
	.nav5 {
	/* chuyển chữ thường thành chữ HOA */
		text-transform: uppercase;
		text-decoration: none;
		background: white;
		/* đường viền màu, 1pixel */
		border: 1px solid #e2e2e2;
		margin-top: 0px;
		padding: 10px;
		/* font loại lớn, chữ in đậm */
		font-size: large;
		font-weight: bolder;
	}
	/*Vị trí thứ tự, độ rộng các mục thanh điều hướng*/
	.nav1 {
		order: 1;
		width: 180px;
	}
	.nav2 {
		order: 2;
		width: 180px;
	}
	.nav3 {
		order: 4;
		width: 180px;
	}
	.nav4 {
		order: 5;
		width: 180px;
	}
	.nav5 {
		order: 3;
		width: 10px;
		border: 1px solid #e2e2e2;
	}
	/*Hiệu ứng di chuột đổi màu các mục thanh điều hướng*/
	.nav1:hover,
	.nav2:hover,
	.nav3:hover,
	.nav4:hover,
	.nav5:hover {
		color: white;
		background-color: blue;
	}
	/* hiệu ứng di chuột đổi màu viền avatar, rộng 5px */
	.avatar img:hover {
		border: 5px solid blue;
	}
	/*thiết đặt avatar tròn trên thanh điều hướng*/
	.avatar img {
		/* kích thước hình */
		width: 150px;
		height: 150px;
		/* viền bo tròn */
		border-radius: 50%;
		border: 5px solid white;
		/* vị trí cố định */
		position: absolute;
		margin-top: -120px;
		margin-left: -80px;
		display: none;
	}
	/********************************************/
	/*mục giới thiệu-thông tin cá nhân*/
	.container2 {
		/* hiển thị dạng lưới, chia làm 2 cột bằng nhau */
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	/* kích thước, màu nền khối*/
	#target {
		width: 100%;
		background-color: #e3e3e3;
		padding-right: 15px;
	}
	/* kích thước, màu nền khối*/
	#personal-info {
		padding-right: 15px;
		background-color: #e9e9e9;
	}
	/* căn khoảng cách cho nội dung chữ */
	#target-content,
	#login,
	#hideInfor {
		padding-left: 15px;
	}
	/* kích thước icon ở mục hideInfo */
	#hideInfor .icons {
		font-size: x-large;
		padding-top: 10px;
	}
	/* tô màu đen cho chữ tên website */
	#web{
		color: black !important;
	}
	/* hiệu ứng di chuột qua chữ tên website */
	#web:hover{
		color: blue !important;
	}
/**************************************************/
	/*6 cột "kinh nghiệm-kỹ năng..."*/
	.container3 {
		/* hiển thị dạng flex */
		display: flex;
		/* loại hàng ngang */
		flex-direction: row;
		/* xuống dòng nếu kích thước không đủ */
		flex-wrap: wrap;
		/* căn giữa chữ, độ rộng */
		justify-content: center;
		width: 100%;
				
	}
	/* dùng chung cho nhiều cột */
	.job-info-column {
		/* đường viền */
		border: 1px solid rgb(215, 216, 215);
		height: auto;
		padding: 5px;
		/* bo góc */
		border-radius: 15px 15px;
		/* độ rộng mỗi cột  */
		width: 40vw;		
	}
	/* căn khoảng cách giữa các cột trái, phải trên, dưới */
	#experience-column{
		margin-left: 15px;
		margin-right: 15px;
		margin-top: 10px;
        margin-bottom: 15px;		
	}

	#skill-column{
		margin-left: 15px;
		margin-right: 15px;
		margin-top: 10px;
        margin-bottom: 15px;
        
    }

	#language-column{
		margin-left: 15px;
		margin-right: 15px;
		margin-top: 10px;
        margin-bottom: 15px;
	}

	#activity-column{
		margin-left: 15px;
		margin-right: 15px;
        margin-bottom: 30px;

	}
	#study-column{
		margin-left: 15px;
		margin-right: 15px;
        margin-bottom: 30px;
	}
	#hobby-column{
		margin-left: 15px;
		margin-right: 15px;
        margin-bottom: 30px;
	}

	/*thanh skill màu ở mục kỹ năng, ngôn ngữ*/
	.full-skill {
		/* hiển thị cùng 1 dòng */
		display: inline-block;
		width: 50px;
		height: 4px;
		background-color: rgb(0, 166, 255);
	}
	.empty-skill {
		/* hiển thị cùng 1 dòng */
		display: inline-block;
		width: 50px;
		height: 4px;
		background-color: grey;
	}
	/*padding, tô màu nền cho chữ "hiện tại"*/
	.now-bground {
		padding: 2px;
		background-color: aqua;
		/* góc bo tròn */
		border-radius: 1em;
	}
	/*Đặt các icon theo hàng, xuống dòng, căn chữ ở giữa*/
	.hobby-icons {
		margin-left: 5px;
		margin-right: 5px;
		overflow: hidden;
		display: inline-block;
		justify-content: center;
	}
	/* kích thước, màu icon, căn giữa */
	.ic-megaphone,
	.ic-strategy,
	.ic-hotairballoon,
	.ic-basket {
		margin: 2px;
		text-align: center;
		color: blue;
		font-size: large;
	}
	/* kích thước, màu, góc bo đường viền dạng nét đứt */
	.music-border,
	.game-border,
	.tour-border,
	.cook-border {
		margin-left: 5px;
		margin-right: 5px;
		border: 1px solid rgb(0, 217, 255);
		border-radius: 50%;
		padding: 15px;
		display: inline-block;
		border-style: dashed;
	}
	/*Dòng chữ chú thích kèm dưới icon*/
	.music-text,
	.game-text,
	.tour-text,
	.cook-text {
		margin-top: 5px;
		margin-left: 5px;
		margin-right: 5px;
		display: inline-block;
	}
	/**********************************************/
	/*Mục "chứng chỉ, giải thưởng"*/
	#cert {
		/* dạng lưới, 2 hàng, 2 cột, căn cách trái phải */
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		margin-left: 10px;
		margin-right: 10px;
	}
	/* vị trí, khoảng cách các cột */
	#cert1 {
		grid-column-start: 1;
		grid-column-end: 2;
		grid-row-start: 1;
		margin-bottom: 30px;
		padding-right: 10px;
	}
	#cert2 {
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 1;
		border-left: solid 1px orange;
		margin-bottom: 30px;
		padding-left: 10px;
	}
	#cert3 {
		grid-column-start: 1;
		grid-row-start: 2;
		grid-row-end: 3;
		padding-top: 30px;
		padding-right: 10px;
		border-top: solid 1px orange;
	}
	#cert4 {
		grid-column-start: 2;
		grid-row-start: 2;
		grid-row-end: 3;
		border-top: solid 1px orange;
	}
	/*độ rộng hình minh hoạ mục chứng chỉ */
	#cert img {
		width: 100%;
	}
	/* kích thước chữ */
	.cert-text {
		margin-left: 10px;
	}
	/*****************************************/
	/*thiết đặt mục "dự án"*/
	.container5 {
		/*dạng lưới, 3 cột bằng nhau*/
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto;
		/* -gap khoảng cách giữa các cột, hàng */
		grid-column-gap: 5px;
		grid-row-gap: auto;
		margin-left: 10px;
		margin-right: 10px;
	}
	/* độ rộng hình ở trong mục dự án */
	#project img {
		width: 100%;
	}
	/* 3 cột dự án hiển thị dang khối */
	.proj1,
	.proj2,
	.proj3 {
		display: block;
		justify-content: center;
		border: 1px solid #e2e2e2;
	}
	/* Tên dự án mỗi cột */
	.proj-title {
		border-top: 1px solid #e2e2e2;
		border-bottom: 1px solid #e2e2e2;
		padding: 10px;
	}
	/* tiêu đề Section: "Dự án" */
	.proj-text {
		margin-left: 5px;
	}
	/* chia 2 cột nhỏ tỉ lệ 0.7:1 trong mỗi cột */
	.proj-col {
		display: grid;
		grid-template-columns: 0.7fr 1fr;
		padding-top: 5px;
		padding-bottom: 5px;
	}
	/* vị trí của 3 cột */
	.proj-col1 {
		grid-column-start: 1;
		grid-column-end: 2;
	}
	.proj-col2 {
		grid-column-start: 2;
		grid-column-end: 3;
	}
	.proj-col3 {
		grid-row-start: 2;
		grid-column-start: 2;
		grid-column-end: 3;
	}
	/*đặt màu cho chữ "2021"*/
	.proj-text-deco {
		background-color: aqua;
		border-radius: 1em;
		width: 50px;
		text-align: center;
		margin-left: 10px;
	}
	/* chia 2 cột nhỏ tỉ lệ 1 và 2.5 trong cột lớn */
	/* mô tả */
	.proj-description {
		display: grid;
		grid-template-columns: 1fr 2.5fr;
		border-top: 1px solid #e2e2e2;
		border-bottom: 1px solid #e2e2e2;
		padding-left: 3px;
	}
	/*nhiệm vụ*/
	.proj-task {
		display: grid;
		grid-template-columns: 1fr 2.5fr;
		border-top: 1px solid #e2e2e2;
		border-bottom: 1px solid #e2e2e2;
		padding-left: 3px;
	}
	/* công nghệ */
	.proj-tech {
		display: grid;
		grid-template-columns: 1fr 2.5fr;
		padding-left: 5px;
	}
	/* loại bỏ hiệu ứng gạch chân link */
	#project a {
		text-decoration: none;
	}
	/*********************************************/
	/*Phần footer*/
	.container6 {
		display: flex;
		justify-content: center;
		padding-left: 5%;
		padding-right: 5%;
		background-color: darkgrey;
	}
	#footer {
		margin-top: 2%;
	}
	/*đặt màu, kích cỡ icons footer*/
	#footer .icons {
		color: rgb(0, 72, 255);
		margin: 0px;
	}
	.social-network {
		width: auto;
		padding: 10px;
	}
	/* loại bỏ hiệu ứng gạch chân link facebôk\ok, twitter, github */
	#footer a {
		text-decoration: none;
	}
	/* Nút nhấn viewmore/viewless */
	#myBtn1,
	#myBtn2,
	#myBtn3,
	#myBtn4,
	#myBtn5,
	#myBtn6 {
		background-color: yellow;
		border-radius: 0.7em;
		border: solid 1px;
		font-size: small;
	}
	/*****************************************/
	/* digital-cv */
	#digi-cv {
		/* dạng lưới, 3 cột tỉ lệ 2/1/1 */
		display: grid;
		grid-template-columns: 1fr;
	}
	/* Đường khung viền bao quanh */
	/* vị trí, kích thước mục goals */
	#goals {
		grid-template-columns: 1fr;
		padding-bottom: 30px;
		border-top: solid blue 15px;
		border-left: solid blue 15px;
		border-right: solid blue 15px;
	}
	/* canh lề trái nội dung */
	.goal1,
	.goal2,
    .goal3,
    .goal4 {
		margin-left: 30px;
		margin-right: 30px;
	}
	/* vị trí, kích thước mục timeline */
	#timeline {
		display: flex;
		flex-direction: column;
        justify-content: space-between;
		border-top: solid blue 10px;
		border-left: solid blue 15px;
		border-right: solid blue 15px;
		border-bottom: solid blue 15px;
		padding-bottom: 30px;
	}
	/* viền hình tròn bao quanh chữ số ở mục timeline */
	.circle-num{
		background-color: aqua;
		text-align: center;
		font-size: 30px;
		font-weight: bolder;
		border: solid 2px rgb(218, 29, 29);
		width: 50px;
		height: 50px;
		padding-top: 7px;
		border-radius: 50%;		
	  }

	/* vị trí, kích thước mục team */
	#team {
		grid-row-start: 3;
		grid-row-end: 4;
		padding-bottom: 30px;
		border-top: solid blue 10px;
		border-left: solid blue 15px;
		border-right: solid blue 15px;
	}
	/* canh lề trái nội dung */
	.member1,
	.member2,
    .member3,
    .member4 {
		margin-left: 30px;
		margin-right: 30px;
	}
	/* vị trí, kích thước mục scopes */	
	#scopes {
		grid-row-start: 2;
		grid-row-end: 3;
		padding-bottom: 30px;
		border-top: solid blue 10px;
		border-left: solid blue 15px;
		border-right: solid blue 15px;
	}
	/* vị trí, kích thước mục primary */
	#primary {
		grid-row-start: 4;
		grid-row-end: 5;
		padding-bottom: 30px;
		border-top: solid blue 10px;
		border-left: solid blue 15px;
		border-right: solid blue 15px;
	}
	/* canh lề nội dung primary */
	.primary1,
	.primary2{
		margin-left: 30px;
		margin-right: 30px;
	}
	/* font chữ title */
	.goals-title,
	.scope-title,
	.team-title,
	.primary-title,
	.timeline-title {
		display: block;
		color: blue;
		padding-left: 15px;
		padding-top: 15px;
		padding-bottom: 15px;
		font-weight: bolder;
	}
	/* thanh ngang hr màu tuyến tính */
	.hrbar1 {
		margin-left: 10%;
		margin-right: 10%;
		margin-bottom: 20px;
		border: 0;
		height: 2px;
		background-image: linear-gradient(to right, #f0f0f0, #00b9ff, #59d941, #f0f0f0);
	}
	/* thanh ngang hr màu đơn sắc, nét đứt */
	.hrbar2 {
		border-top: 2px dashed #38cc6c;
		margin-left: 5%;
		margin-right: 5%;
		margin-top: 15px;
		margin-bottom: 15px;
	}
	/* vị trí, kích thước các icon trong digital-cv */
	#digi-cv i {
		font-size: xx-large;
		margin-right: 50%;
		margin-left: 50%;
		align-self: center;
		margin-bottom: 10px;
	}
	/* trong phần timeline chia làm 1 cột */
	.project-start,
	.project-date {
		display: grid;
		grid-template-columns: 1fr;
		margin-right: 20px;
		margin-left: 30px;
	}
	/* chia 2 cột bằng nhau trong mục scopes */
	.scope-in-out {
		display: grid;
		grid-template-columns: 1fr;
		margin-left: 30px;
		margin-right: 30px;
		row-gap: 50px;
	}

}
/*Hết*/
/******************************************/