@media screen and (min-width: 768px) {
	* {
		margin: 0px;
		font-family: "inter", sans-serif;
		box-sizing: border-box;
	}
	.bg-grey {
		background: #f7f7f7;
	}
	
	section>.container {
		width: 1170px;
		margin: auto;
		display: block;
	}
	/*Padding cho các tiêu đề*/
	.section-title {
		padding: 20px;
	}
	
	/*đặt thanh điều hướng*/
	.container1 {
		display: flex;
		justify-content: center;
	}
	/*loại bỏ gạch chân đường link*/
	a {
		text-decoration: none;
	}
	/*đị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;
		width: 100%;
	}
	/* di chuột qua đổi thành màu aqua */
	#name:hover {
		color: aqua;
	}
	/*căn giữa chữ ở thanh điều hướng*/
	#nav-bar {
		text-align: center;
	}
	/* 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: 300px;
	}
	.nav2 {
		order: 2;
		width: 300px;
	}
	.nav3 {
		order: 4;
		width: 300px;
	}
	.nav4 {
		order: 5;
		width: 300px;
	}
	.nav5 {
		order: 3;
		width: 150px;
		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;
	
	}
	/*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: -75px;
	}
	/***********************************/
	/*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: 30px;
		padding-top: 15px;
	}
	/* kích thước, màu nền khối*/
	#personal-info {
		background-color: #e9e9e9;
		padding-right: 30px;
		padding-top: 15px;		
	}
	/* căn khoảng cách cho nội dung chữ */
	#target-content, #login, #hideInfor{
		padding-left: 30px;
	}
	/* kích thước icon */
	#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 6 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: 28vw;
		
	}
	/* 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 {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		text-align: center;
		margin-left: 5px;
		margin-right: 5px;
		justify-content: center;
	}
	/* kích thước, màu icon, căn giữa */
	.ic-megaphone, 
	.ic-strategy, 
	.ic-hotairballoon, 
	.ic-basket {
		font-size: xx-large;
		text-align: center;
		color: blue;
		padding: 2px;
	}
	/* 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: 15px;
		border: 1px solid rgb(0, 217, 255);
		border-radius: 50%;
		padding: 15px;
		border-style: dashed;
		align-self: center;
	}
	/*Dòng chữ chú thích kèm dưới icon*/
	.music-text, 
	.game-text, 
	.tour-text, 
	.cook-text {
		margin-top: 5px;
		text-align: center;
		align-self: center;
	}
	/**********************************************/
	/*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: 30px;
		margin-right: 30px;
	}
	/* 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: 30px;
	}
	
	#cert2 {
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 1;
		border-left: solid 1px orange;
		margin-bottom: 30px;
		padding-left: 30px;
	}
	
	#cert3 {
		grid-column-start: 1;
		grid-row-start: 2;
		grid-row-end: 3;
		padding-top: 30px;
		padding-right: 30px;
		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;
		grid-column-gap: 30px; 
		grid-row-gap: auto;
		margin-left: 30px;
		margin-right: 30px;
	}
	/* độ 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 */
	.proj-title {
		border-top: 1px solid #e2e2e2;
		border-bottom: 1px solid #e2e2e2;
		padding: 10px;
	}
	/* tên Section: Dự án */
	#proj-text {
		margin-left: 5px;
	
	}
	/* chia 3 cột nhỏ trong mỗi cột */
	.proj-col {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;	
	}
	.proj-col1, .proj-col2, .proj-col3 {
		padding-top: 7px;
	}
	/*đặ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;
		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: 3px;
	}
	/* 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;
		font-size: xx-large;
	}
	.social-network {
		width: auto;
		padding: 10px;
		font-size: larger;
	}
	#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: 2fr 1fr 1fr;

	}
	/* Đường khung viền bao quanh */
	/* vị trí, kích thước mục goals */
	#goals{
		grid-column-start: 1;
		grid-column-end: 2;
		border-top: solid blue 15px;
		border-left: solid blue 15px;
		border-right: solid blue 10px;
		border-bottom: solid blue 10px;
		padding-bottom: 30px;
	}
	/* vị trí, kích thước mục timeline */
	#timeline{
		grid-column-start: 3;
		grid-row-start: 1;
		grid-row-end: 3;
		border-bottom: solid blue 15px;
		border-right: solid blue 15px;
		border-left: solid blue 10px;
		border-top: solid blue 15px;
		padding-bottom: 30px;
		}
	/* vị trí, kích thước mục team */
	#team{
		grid-column-start: 2;
		grid-row-start: 1;
		border-bottom: solid blue 10px;
		border-top: solid blue 15px;
		padding-bottom: 30px;
		}
	/* vị trí, kích thước mục scopes */	
	#scopes{
		grid-row-start: 2;
		grid-row-end: 3;
		border-bottom: solid blue 15px;
		border-right: solid blue 10px;
		border-left: solid blue 15px;
		padding-bottom: 30px;
		}
	/* vị trí, kích thước mục primary */
	#primary{
		grid-row-start: 2;
		grid-row-end: 3;
		border-bottom: solid blue 15px;
		padding-bottom: 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;
	}

	/* 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);
		padding:10px;
		border-radius: 50%;
		margin-right: 15px;
		align-self: center;
	}
	/* thanh ngang hr màu tuyến tính */
	.hrbar1{
		margin-left:10%; 
		margin-right:10%;
		margin-bottom: 30px;
		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:10%; 
		margin-right:10%;
		margin-top: 15px;
		margin-bottom: 15px;
	}
	/* vị trí, kích thước các icon trong digital-cv */
	#digi-cv i{
		grid-column-start: 1;
		grid-column-end: 2;
		font-size: xx-large;
		margin-right: 30px;	
	}
	/* chia dạng lưới tỉ lệ 1:6, căn lề */
	.goal1, 
	.goal2, 
	.goal3, 
	.member1, 
	.member2, 
	.member3, 
	.member4, 
	.primary1, 
	.primary2, 
	.project-start, 
	.project-date{
		display: grid;
		grid-template-columns: 1fr 6fr;
		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 1fr;
		margin-left: 30px;
		margin-right: 30px;
		column-gap: 50px;
	}
	
}
	/*Hết*/
	/******************************************/