*{
	margin:0 ;
	padding: 0;
	color: black
	
}

html{
	scroll-behavior: smooth;
    
}

html,body {
	display: flex;
    flex-direction: column;
	
}
html{
	overflow-x: hidden
}

@font-face{
	font-family: General-regular;
	src:url( "font/GeneralSans-Regular.otf");
	font-weight: normal;
	font-style: normal
}

@font-face{
	font-family: General-Medium;
	src:url( "font/GeneralSans-Medium.otf");
	font-weight: normal;
	font-style: normal
}

@font-face{
	font-family: General-Semibold;
	src:url( "font/GeneralSans-Semibold.otf");
	font-weight: normal;
	font-style: normal
}

@font-face{
	font-family: General-Bold;
	src:url("font/GeneralSans-Bold.otf");
	font-weight: normal;
	font-style: normal
}


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

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

.breadcrumb{
	  padding: 20px 20px 0 20px;
/*    letter-spacing: -0.02em;*/
    text-align: left;
	background: rgba(255, 255, 255, 0);
	font-family: General-regular;
	
}
.breadcrumb .breadcrumb-item a{
	font-size: 14px
}
.breadcrumb .active a {
	font-family: General-Medium;
	color: black;
	text-decoration: none
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
/*  font-size: 16px;*/
/*  border: none;*/
  outline: none;
  background-color: white;
  color: white;
  cursor: pointer;
  padding: 15px;
background: white;
  border: 1px solid black;
  border-radius: 50%;
  height: 4em;
  width: 4em;

}

#myBtn:hover {
  background-color: #E9FF47;
	border: none
}

/* PAGINATION */

 .pagination  {
   width: 100%;
	display: flex;
    justify-content: center;
    align-items: center;
	padding-top: 44px;
	/* background-color: #E9FF47; */
}
.pagination li a{
	color: black;
	font-size: 14px;
	font-family: General-regular;
	padding: 10px 18px;
}
.pagination .active a{
	background-color: White;
	border: 1px solid black;
	color: black
}
.pagination ..disabled a{
	background-color:#6B6B6B;
	border: none
}
/*TOPMENU DESKTOP*/

.navbar-nav.navbar-center {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
	
}

.navbar-nav.navbar-center li{
	margin-right: 0px;
	font-size: 16px;
	font-family: General-regular;
	
}
.top-bar{
	border-bottom:solid 1px;
	position: sticky;
    top: 0;
	background: white;
	z-index: 100
}

.navbar-default{
    background: white;
	height: 72px;
	
	
}
.navbar-default .navbar-nav{
    height: 76px; 
    padding: 18px 0px 15px; 
 
}

.nav .navbar-brand img{
    margin-top: 14px;
	width: 90%
/*	margin-left: -10px*/
	
}
.btn a{
	color: black;
	text-decoration: none;
/*	font-family: General-Semibold;*/
}
.btn-menutop a:hover .icon-arrow {
  transform: translateX(6px);
}
.btn-menutop .btn{
	width: 140px;
	height: 48px;
	font-family: General-Semibold;
	font-size: 16px;
	background-color: #E9FF47;
	color: Black;
	margin-top: 14px;
	border:none;
	margin-right: auto;
	
}

.btn-menutop .btn:hover {
  background-color: #D2EE00;   
  color: #E9FF47;         
  cursor:pointer;          
}
.navbar-nav.navbar-center li a .active{
	font-family: General-Semibold;
	font-size: 16px;
	color: black
	
}
.nav-link .active a {
    color: var(--color-secondary);
    font-weight: 600;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: black;
    background-color: transparent;
	font-family: General-semibold
}
.navbar-nav .nav-link  a:active .active{
	font-family: General-semibold;
	color: red
}
.nav > li > a {
    padding: 10px 28px;
}
/*----------*/

/*FOOTER DESKTOP*/


.footer{
	
	width: 100%;
	height: 100%;
	background: white;
  justify-content: center;
	margin-top: 140px;
	border-top: solid 1px;
	text-align: center;
}
.title-footer{
	width: 100%;
	line-height: 0.9;
	font-size: 16vw;
	padding-top:4vw;
	font-family: General-semibold;
	/* background-color: red */
}

.copyright{
	width: 100%;
	height: 100%;
	 float: right;
	text-align: left;
	font-size: 16px;
	font-family: General-regular;
	
}
.link-social{
	width: 100%;
	height: 100%;
	 float: left;
	text-align: right;
}

.box-bottom-footer{
	display: flex;
	width: 100%;
	padding-left: 4vw;
	padding-right: 4vw;
	padding-bottom: 4vw;
	/* background: red; */
}
.link1{
	float: right;
	/* background: rgb(255, 208, 208); */
	
}

.link1 span{
	margin-right: 20px;
	font-size: vw;
	font-family: General-regular;
}
.link2 span{
	margin-right: 0px
}

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

/*MOBILE TOP MENU*/

.navbar-default .navbar-toggle:hover{
	background-color: white;
}


.navbar-header button{
	border: none;
	margin-top: 24px;
	
	
}

.navbar-default .navbar-toggle .icon-bar {
	background-color: black;

}


	.btn-menutop button:hover {
    color: black;
    background-color:  #E9FF47;
}
	.btn-menutop .btn-primary:active {
    color: black;
    background-color: #E9FF47;
	shadow: 0px
}


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


/*MAIN*/

/*BANNR*/

.banner-text{
	width: 100%;
	height: 500px;
	background:white;
	margin-top: 60px
}
.text-hi{
	width: 70%;
	height: 120px;
/*	background: red;*/
	font-size: 8em;
	font-family: General-Bold;
	float: right;
}
 .text-welcome{
	width: 95%;
	height: 120px;
/*	background: pink;*/
	font-size: 8em;
	font-family: General-Bold;
	float: right;
}


.cricle-Scroll{
	background: #E9FF47;
  border-radius: 50%;
  height: 8em;
  width: 8em;
   display: flex;
  align-items: center;
  justify-content: center;
	text-align:center;
	margin-left: 10%;
	margin-top:3%
	
}
.cricle-Scroll p{
	font-size: 12px;
	font-family: General-Bold;
	margin-top: 10px
}

.text-porfolio{
	width: 80%;
	height: 200px;
/*	background: pink;*/
	font-size: 120px;
	font-family: General-Bold;
	float: right;
}

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

/*ABOUT ME*/

.about-me{
	width: 100%;
	height: 180px;
	margin-top: -40px;
	/* background: pink; */
	
}

.about-title{
	font-size: 40px;
	font-family: General-semibold;
	margin-top: -20px
	
}
.about-content{
	font-size: 16px;
	font-family: General-regular;
}

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

/*IMG PERSONAL*/

.img-personal img{
	margin-top: 60px;
	width: 100%;
	height: 100%
}


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

/*SKILL*/

.service-wrapper {
  position: relative;
  max-width: 100%;
  margin: auto;
  padding: 0 20px;
  padding-top: 140px
}

.service-item {
  position: relative; /* để .hover-image bám theo item này */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 40px 0;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}


.service-item:hover .hover-image {
  opacity: 1;
  transform: translateY(0);
}

.service-item:hover {
  background-color: #FDFFF1;
}

h3{
	margin-top: 0px
}

.service-item .index {
  flex-basis: 10%;
  font-size: 16px;
  opacity: 0.6;
  font-family: General-regular;
  
}

.service-item .title {
  flex-basis: 40%;
  font-size: 32px;
  font-weight: bold;
    color: black;
  font-family: General-Semibold;
}
.service-item:hover .title {
  text-decoration: underline;
}
.service-item .desc {
  flex-basis: 40%;
  font-size: 16px;
  line-height: 1.5;
  color: black;
  font-family: General-regular;
}

.hover-image {
  position: absolute;
  left: 38%;
  width: 240px;
  height: 240px;
  background-color: transparent; /* 💡 đảm bảo không có nền */
  background-size: contain;      /* 💡 giữ tỉ lệ hình tốt hơn */
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(0);
  z-index: 10;
  pointer-events: none;
  
}

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

/*SECTION UXUII*/



#group {
    display: flex;
} 
#group #blockA {
/*    background-color: red;*/
    order: 2;
}

#group #blockB {
/*    background-color: green;*/
    order: 1;
}

.uxui-left{
	text-align: center
}


.uxui-left b{
	font-size: 44px;
	font-family: General-semibold;
	
}
.uxui-left p{
	font-size: 20px;
	font-family: General-regular;
	color: #6B6B6B;
	margin-top: 24px
	
}

.uxui-left .uxui-span-width span{
	font-size: 16px;
	font-family: General-regular;
	
}
.uxui-span-width {
	width: 80%;
	display: inline-block;
    vertical-align: middle
}


.uxui{
	margin-top: 140px;
	 
}

.uxui-left{
	padding-top: 20%
}
.img-uxui img{
	width: 100%
}


.btn-uxui button{
	width: 140px;
	height: 48px;
	font-family: General-Semibold;
	font-size: 16px;
	Background-color: #E9FF47;
	color: Black;
	margin-top: 14px;
	border:none;
	margin-right: auto;
	
}

.btn-uxui a:hover .icon-arrow {
  transform: translateX(6px);
}
.btn-uxui{
	 display: inline-block;
     vertical-align: middle;
	margin-top: 24px
}

.btn-uxui .btn-primary:focus {
	color: black;
    background-color:#E9FF47 ;

}
.btn-uxui .btn-primary:hover {
	color: black;
    background-color:#D2EE00 ;

}

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

/*SECTION ITBA*/



.ITBA-right{
	text-align: center
}


.ITBA-right b{
	font-size: 44px;
	font-family: General-Semibold;
	
}
.ITBA-right p{
	font-size: 20px;
	font-family: General-regular;
	color: #6B6B6B;
	margin-top: 24px
	
}

.ITBA-right .uxui-span-width span{
	font-size: 16px;
	font-family: General-regular;
	
}
.uxui-span-width {
	width: 80%;
	display: inline-block;
    vertical-align: middle\	
}


.ITBA {
	margin-top: 60px;
	 
}

.ITBA-right{
	padding-top: 10%
}
.img-ITBA img{
	width: 100%
}


.btn-ITBA button{
	width: 140px;
	height: 48px;
	font-family: General-Semibold;
	font-size: 16px;
	Background-color: #E9FF47;
	color: Black;
	margin-top: 14px;
	border:none;
	margin-right: auto;
	
}

.btn-ITBA{
	 display: inline-block;
     vertical-align: middle;
	margin-top: 24px
}
.btn-ITBA a:hover .icon-arrow {
  transform: translateX(6px);
}

.btn-ITBA .btn-primary:focus {
	color: black;
    background-color:#E9FF47 ;

}
.btn-ITBA .btn-primary:hover {
	color: black;
    background-color:#D2EE00 ;

}
/*-------------*/


/*SECTION PROJECT */

	.btn-project button:hover {
    color: black;
    background-color:  white;
}
	.btn-project .btn-primary:active {
    color: black;
    background-color: white;
}

.heading-section {
  font-size: 52px;
  font-weight: 400;
  line-height: 1.2;
  font-family: General Sans;
  /* background-color: red */
}

.margin-project{
	padding-top: 140px;
	padding-bottom: 40px
}

.content-project p {
  font-size: 16px;
  color: #333;
  width: 100%;
  /* max-width: 400px; */
  float: right;
}

.btn-project .btn {
  background: none;
  border: none;
  font-weight: 00;
  padding: 0;
  font-size: 16px;
}

.btn-project a {
  color: inherit;
  text-decoration: none;
}

.icon-arrow {
  width: 24px;
  vertical-align: middle;
  transition: transform 0.2s ease;
}

.btn-project a:hover .icon-arrow {
  transform: translateX(6px);
}


.btn-project button{
	/* width: 160px; */
	/* height: 48px; */
	font-family: General-Semibold;
	font-size: 16px;
	background-color: white;
	color: Black;
/*	margin-top: -70px;*/
	border:none;
	
	
}

.project-box {
	width: 100%;
  display: flex;
  flex-direction: column;
  align-items:flex-start;
  gap: 24px; 
  /* background-color: red; */
}
	
.product-card-main{
	margin-left: 24px
}

.feature_product--inner{
	margin-top: 28px
}

.product-info-main .product-tags-main{
	font-size: 16px;
	font-family: General-Regular;
	color: #6B6B6B;
	margin-top: -6px
}
.product-info-main .product-title-main a p{
	font-size: 28px;
	font-family: General-Semibold;
	margin-top: 16px
}
.flickity-prev-next-button {
	opacity: 0;
}
.flickity-page-dot {
	width: 140px;
	height: 2px;
	margin: 0px;
	border-radius: 0px;
}
.flickity-page-dots {
    bottom: -40px;
}
/*-------------*/

/*Soft skills*/

.section-sort-skill{
	margin-top: 80px;
	background-color: #FDFFF1;
	padding-top: 48px;
	padding-bottom: 48px;
	height: 100%

}

.soft-skill-title p{
	font-size: 44px;
	font-family: General-semibold
}
.soft-subtitle p{
	font-size: 20px;
	font-family: General-semibold
}
.soft-subtitle span{
	font-size: 16px;
	font-family: General-regular;
	color: #6B6B6B
	
}
.spacing-soft-skill{
	margin-top: 24px
}

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

/*TOOLS SKILL*/

.section-tools-skill{
	margin-top: 140px;
}


.tools-skill-title p{
	font-size: 44px;
	font-family: General-Semibold;
	text-align: center
	
}

.tools-skill-title span{
	font-size: 16px;
	font-family: General-regular;
	 display: flex;
  justify-content: center;
	
}

.logo-tools{
	width: 100%;
	height: 100vh;
	display:flex;
	align-items: center;
	justify-content: center;
	padding: 0 60px
}

/* -------Marquee slider------ */

.section-brands {
	margin-top: 48px;
/*	margin-bottom: 133px;*/
}
.slider-marquee {
	overflow: hidden;
	max-width: 100%;
}
.marquee__wrapper {
	display: inline-flex;
	white-space: nowrap;
}
.marquee__wrapper:hover .marquee__item-scroll {
	animation-play-state: paused;
}
.marquee__item-scroll {
	display: flex;
	min-width: max-content;
	animation: SlideLeft 20s infinite linear;
}
.marquee__item img{
	width: 25%;
	filter: grayscale(100%) brightness(100%);
}
.marquee__item {
	display: inline-block;
	min-height: 16px;
	width: 257px;
}
@keyframes SlideLeft {
	0% {
		transform: translate3d(0, 0, 0);
	}
	100% {
		transform: translate3d(-100%, 0, 0);
	}
}

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

/*CONTACT ME*/

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.circle-logo {
  width: 140px;
  height: 140px;
  animation: spin 10s linear infinite; /* 10s xoay 1 vòng */
}


    .top-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      margin-bottom: 100px;
	  gap: 24px;
	  margin-top: 80px
    }

    .main-title {
      font-size: 135px;
      font-weight: bold;
      line-height: 1;
      flex: 1;
    }
.contact-info p {
	padding: 0px
}
    .description {
      flex: 1;
      max-width: 400px;
      font-size: 16px;
      line-height: 1.6;
       display: flex;
  align-items: center; 
  justify-content: center; 
  height: 200px; 

    }

    /* Bottom Row */
    .bottom-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      margin-top: 40px;
    }

    .left-side {
      display: flex;
      align-items: flex-start;
      flex: 1;
    }

    .profile-img {
      width: 280px;
      height: auto;
      object-fit: cover;
    }

    .contact-info {
      /* display: flex; */
      flex-direction: column;
      justify-content: flex-start;
      font-size: 16px;
      line-height: 1.6;
    }

    .contact-info .label {
      font-size: 14px;
      color: #6B6B6B;
      margin-top: 8px;
	  font-family: General-regular;
    }

    .contact-info a {
      color: black;
      text-decoration: none;
    }

    .contact-info a:hover {
      text-decoration: underline;
    }

    .right-side {
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      flex: 1;
    }

   
	.bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end; /* ⬅️ canh theo đáy */
  gap: 40px;
}

.left-side {
  display: flex;
  gap: 24px;
  align-items: flex-end; 
}

.profile-img {
  width: 280px;
  height: auto;
  object-fit: cover;

}

.contact-info {
  font-size: 16px;
  line-height: 1.6;
}
.contact-info p {
	margin-bottom: 0px;
	 font-family: General-regular;
}
.contact-info .pacing-text{
	padding-bottom: 8px
}
.circle-logo {
  width: 140px;
  height: 140px;
}


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

/*PROJECT PAGE*/

.page__title{
	font-size: 60px;
	font-family: General-Bold;
	margin-top: 28px
}


.tab__nav {
    
    border-bottom: 1px solid #DEDEDE;
}

.tab__nav--current .tab:before {
    background-color: Black;
}

.nav-tabs{
	display: flex;
	justify-content: center;
	gap: 40px
}

.tab:before {
    content: "";
    position: absolute;
    height: 2px;
    width: 100%;
    bottom: -2px;
    left: 0;
    background-color: transparent;
    border-radius: 10px;
}

.tab{
	font-size: 16px;
	font-family: General-regular;
	padding-bottom: 12px;
	position: relative;
	outline: none;
	border: 0;
/*	line-height: 10px;*/
	background-color: transparent
}



.card__grid {
    padding-right: var(--gap);
    padding-left: var(--gap);
	
}

.product-image img {
    width: 95%;
}

.product-title{
	padding-top: 12px
}

.product-title a{
	font-size: 20px;
	color: black;
	font-family: General-Semibold;
	
	
}


.product-tags .tag-organce{
	font-size: 14px;
	color: #6B6B6B;
	font-family: General-regular;

}


.product-info .product-tags {
    font-size: 16px;
    font-family: General-Regular;
    color: rgb(107, 107, 107);
    margin-top: 4px;
	height: 48px
}

.project-spacing{
	margin-top: 28px;
/*	background: red;*/
/*	height: 400px;*/
}
a {
    color: #6B6B6B;
    text-decoration: none;
	font-size: 16px;
/*	font-family: General-Regular*/
}
.nav-tabs > li.active > a {
    color: black;
	font-size: 16px;
	font-family: General-Semibold;
    cursor: default;
	border: none;
    background-color: none;
    
}
.nav-tabs > li.active > a:hover {
border: none
}
.nav-tabs > li.active > a:focus {
border: none
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
     color: black; 
    cursor: default;
    background-color: none;
     border-bottom: 2px solid black;	
}


a, a:focus {
	background: none
}

a:hover, a:focus {
     color: black; 
	background: none
}

.nav-tabs li a:hover{
	background: none
}

.nav-tabs li a {
     border: none;
	font-size: 16px;
	font-family: General-regular;
	position: relative;
    display: block;
    padding: 12px 0px;
	
}

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

/*PROOJECT DETAIL - UXUI DESIGN */

.title-project-detail{
	font-size: 60px;
	font-family: General-bold;
	padding-top: 60px;
	line-height: 70px
}

.content-project-detail{
	padding-top: 70px
}

.catagory-tab p{
	font-size: 16px;
	font-family: General-regular;
	color: #6B6B6B
}

.catagory-tab .tab-2{
	font-size: 16px;
	font-family: General-Semibold;
	color: black;
	
}

.tab-2{
	margin-top: -6px
}
.spacing-catagoty{
	margin-top: 24px
}

.banner-project-detail img{
	width: 100%;
}

.banner-project-detail {
	margin-top: 80px
}
.infor-detail img{
	width: 100%;
	margin-top: 60px
}
.infor-detail-scroll img{
	width: 100%;
}
.infor-detail {
	margin-top: 60px
}

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

/*PROJECT DETAIL - UXUI DESIGN - OHREY*/
/*

#landing-ohrey{
  width: 100%;
	height: 600px;
  aspect-ratio: 3/1;
  margin: auto;
  border: solid #8A8A8A 1px;
  overflow-x: hidden;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}
*/



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




@media screen and (max-width: 1200px){
	
	.btn-menutop .btn {
    width: 140px;
    height: 48px;
    font-family: General-Semibold;
    font-size: 16px;
    background-color: #E9FF47;
    color: Black;
    margin-top: 14px;
    border: none;
/*    margin-right: auto;*/
		margin-right: 20px
		
}
	

/*BANNR*/

.banner-text{
	width: 100%;
	height: 500px;
	background:white;
	margin-top: 60px
}
.text-hi{
	width: 70%;
	height: 130px;
/*	background: red;*/
	font-size: 110px;
	font-family: General-Bold;
	float: right;
}
 .text-welcome{
	width: 95%;
	height: 130px;
/*	background: pink;*/
	font-size: 110px;
	font-family: General-Bold;
	float: right;
}

.cricle-Scroll{
	background: #E9FF47;
  border-radius: 50%;
  height: 8em;
  width: 8em;
   display: flex;
  align-items: center;
  justify-content: center;
	text-align:center;
	margin-left: 6%;
	margin-top:3%
	
}
.cricle-Scroll p{
	font-size: 12px;
	font-family: General-Bold;
	margin-top: 10px;
	
}

.text-porfolio{
	width: 80%;
	height: 60px;
/*	background: pink;*/
	font-size: 100px;
	font-family: General-Bold;
	float: right;
}
	
	
		.banner-text {
    width: 100%;
    height: 500px;
    background: white;
    margin-top: 52px;
}
	/*-------------*/
	
	
}

@media screen and (max-width: 991px){
	

	/*PROOJECT DETAIL - UXUI DESIGN */

.title-project-detail{
	font-size: 48px;
	font-family: General-bold;
	padding-top: 80px;
	line-height: 52px
}

.content-project-detail{
	padding-top: 80px
}

.catagory-tab p{
	font-size: 16px;
	font-family: General-regular;
	color: #6B6B6B
}

.catagory-tab .tab-2{
	font-size: 16px;
	font-family: General-Semibold;
	color: black;
	
}

.tab-2{
	margin-top: -6px
}
.spacing-catagoty{
	margin-top: 16px
}

.banner-project-detail img{
	width: 100%;
}

.banner-project-detail {
	margin-top: 60px
}
.infor-detail img{
	width: 100%;
	margin-top: 60px
}



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

	/*CONTACT ME*/
	



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

	

/*BANNR*/

.banner-text{
	width: 100%;
	height: 500px;
	background:white;
	margin-top: 52px
}
.text-hi{
	width: 70%;
	height: 90px;
/*	background: red;*/
	font-size: 80px;
	font-family: General-Bold;
	float: right;
}
 .text-welcome{
	width: 95%;
	height: 100px;
/*	background: pink;*/
	font-size: 80px;
	font-family: General-Bold;
	float: right;
}


.cricle-Scroll{
	background: #E9FF47;
  border-radius: 50%;
  height: 7em;
  width: 7em;
   display: flex;
  align-items: center;
  justify-content: center;
	text-align:center;
	margin-left: 6%;
	margin-top:1%
	
}
.cricle-Scroll p{
	font-size: 12px;
	font-family: General-Bold;
	margin-top: 10px
}

.text-porfolio{
	width: 80%;
	height: 60px;
/*	background: pink;*/
	font-size: 80px;
	font-family: General-Bold;
	float: right;
}
	.banner-text {
    width: 100%;
    height: 380px;
    background: white;
    margin-top: 52px;
}
	
	/*-------------*/
	
	
	/*ABOUT ME*/

.about-me{
	width: 100%;
	height: 280px;
	margin-top: -40px;
	/* background: pink; */
	
}

.about-title{
	font-size: 40px;
	font-family: General-semibold;
	margin-top: -20px
	
}
.about-content{
	font-size: 16px;
	font-family: General-regular;
}
/*-------------*/
	
	
	/*SECTION UXUII*/

.uxui-left{
	text-align: center
}


.uxui-left b{
	font-size: 40px;
	font-family: General-semibold;
	
}
.uxui-left p{
	font-size: 16px;
	font-family: General-regular;
	color: #6B6B6B;
	margin-top: 12px
	
}

.uxui-left .uxui-span-width span{
	font-size: 14px;
	font-family: General-regular;
	
}
.uxui-span-width {
	width: 90%;
	display: inline-block;
    vertical-align: middle\	
}


.uxui{
	margin-top: 140px;
	 
}

.uxui-left{
	padding-top: 4%
}
.img-uxui img{
	width: 100%
}


.btn-uxui button{
	width: 140px;
	height: 48px;
	font-family: General-Semibold;
	font-size: 16px;
	Background-color: #E9FF47;
	color: Black;
	margin-top: 14px;
	border:none;
	margin-right: auto;
	
}

.btn-uxui{
	 display: inline-block;
     vertical-align: middle;
	margin-top: 16px
}
.btn-uxui .btn-primary:focus {
	color: black;
    background-color:#E9FF47 ;

}
.btn-uxui .btn-primary:hover {
	color: black;
    background-color:#E9FF47 ;

}


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

/*SECTION ITBA*/



.ITBA-right{
	text-align: center
}


.ITBA-right b{
	font-size: 40px;
	font-family: General-semibold;
	
}
.ITBA-right p{
	font-size: 16px;
	font-family: General-regular;
	color: #6B6B6B;
	margin-top: 10px
	
}

.ITBA-right .uxui-span-width span{
	font-size: 14px;
	font-family: General-regular;
	
}
.uxui-span-width {
	width: 90%;
	display: inline-block;
    vertical-align: middle\	
}


.ITBA {
	margin-top: 60px;
	 
}

.ITBA-right{
	padding-top: 4%
}
.img-ITBA img{
	width: 100%
}


.btn-ITBA button{
	width: 140px;
	height: 48px;
	font-family: General-Semibold;
	font-size: 16px;
	Background-color: #E9FF47;
	color: Black;
	margin-top: 14px;
	border:none;
	margin-right: auto;
	
}

.btn-ITBA{
	 display: inline-block;
     vertical-align: middle;
	margin-top: 24px
}
.btn-ITBA .btn-primary:focus {
	color: black;
    background-color:#E9FF47 ;

}
	
.btn-ITBA .btn-primary:hover {
	color: black;
    background-color:#E9FF47 ;

}
/*-------------*/
	
	/*SECTION PROJECT */
	

.product-card-main{
	margin-left: 24px
}

.feature_product--inner{
	margin-top: 40px
}

.product-info-main .product-tags-main{
	font-size: 16px;
	font-family: General-Regular;
	color: #6B6B6B;
	/* padding-top: 16px */
}
.product-info-main .product-title-main a p{
	font-size: 28px;
	font-family: General-Semibold;
	margin-top: 16px
}
.flickity-prev-next-button {
	opacity: 0
		;
}
/*-------------*/

	/*Soft skills*/

.section-sort-skill{
	margin-top: 140px;
	background-color: #FDFFF1;
	padding-top: 48px;
	padding-bottom: 48px;
	height: 100%

}

.soft-skill-title p{
	font-size: 40px;
	font-family: General-semibold
}
.soft-subtitle p{
	font-size: 20px;
	font-family: General-semibold
}
.soft-subtitle span{
	font-size: 16px;
	font-family: General-regular;
	color: #6B6B6B
	
}
.spacing-soft-skill{
	margin-top: 24px
}


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

	
/*PROJECT PAGE*/

.page__title{
	font-size: 60px;
	font-family: General-Bold;
	margin-top: 80px
}


.tab__nav {
    
    border-bottom: 1px solid #DEDEDE;
}

.tab__nav--current .tab:before {
    background-color: Black;
}

.nav-tabs{
	display: flex;
	justify-content: center;
	gap: 28px
}

.tab:before {
    content: "";
    position: absolute;
    height: 2px;
    width: 100%;
    bottom: -2px;
    left: 0;
    background-color: transparent;
    border-radius: 10px;
}

.tab{
	font-size: 16px;
	font-family: General-regular;
	padding-bottom: 12px;
	position: relative;
	outline: none;
	border: 0;
/*	line-height: 10px;*/
	background-color: transparent
}



.card__grid {
    padding-right: var(--gap);
    padding-left: var(--gap);
	
}

.product-image img {
    width: 95%;
}

.product-title{
	padding-top: 12px
}

.product-title a{
	font-size: 20px;
	color: black;
	font-family: General-Semibold;
	
	
}


.product-tags .tag-organce{
	font-size: 14px;
	color: #6B6B6B;
	font-family: General-regular
	
}


.product-info .product-tags {
    font-size: 16px;
    font-family: General-Regular;
    color: rgb(107, 107, 107);
    margin-top: 4px;
	height: 48px
}

.project-spacing{
	margin-top: 28px;
/*	background: red;*/
/*	height: 400px;*/
}
a {
    color: #6B6B6B;
    text-decoration: none;
	font-size: 16px;
/*	font-family: General-Regular*/
}
.nav-tabs > li.active > a {
    color: black;
	font-size: 16px;
	font-family: General-Semibold;
    cursor: default;
	border: none;
    background-color: none;
    
}
.nav-tabs > li.active > a:hover {
border: none
}
.nav-tabs > li.active > a:focus {
border: none
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
     color: black; 
    cursor: default;
    background-color: none;
     border-bottom: 2px solid black;	
}


a, a:focus {
	background: none
}

a:hover, a:focus {
     color: black; 
	background: none
}

.nav-tabs li a:hover{
	background: none
}

.nav-tabs li a {
     border: none;
	font-size: 16px;
	font-family: General-regular;
	position: relative;
    display: block;
    padding: 12px 0px;
	
}

/*-------------*/
	
}


@media screen and (max-width: 767px){
	
	html, body {
    max-width: 100%;
    /* overflow-x: hidden; */
	display: flex;
    flex-direction: column;

}

body{
	overflow-x: hidden;
}

.top-bar{
	position:sticky;
	top: 0;
	
}
	#myBtn{
		display: none !important
	}

	.breadcrumb{
		display: none
	}
	
	.navbar-header a {
		margin-left: 15px;
	}

	main {
		margin-left: 15px;
		margin-right: 15px;
	}

	
	.tab-left-spacing{
		padding-left: 0px
	}
	
	
		/*CONTACT ME*/
	
	
.contact-section{
	padding-right: 15px;
	padding-left: 15px
}

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

	
	/*PROOJECT DETAIL - UXUI DESIGN */

.title-project-detail{
	font-size: 44px;
	font-family: General-bold;
	padding-top: 60px;
	line-height: 50px
}

.content-project-detail{
	padding-top: 32px
}

.catagory-tab p{
	font-size: 16px;
	font-family: General-regular;
	color: #6B6B6B
}

.catagory-tab .tab-2{
	font-size: 16px;
	font-family: General-Semibold;
	color: black;
	
}

.tab-2{
	margin-top: -6px
}
.spacing-catagoty{
	margin-top: 16px
}

.banner-project-detail img{
	width: 100%;
}

.banner-project-detail {
	margin-top: 60px
}
.infor-detail img{
	width: 100%;
	margin-top: 60px
}



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

.banner-project-detail img {
    width: 100%;
}
	/* .container-fluid {
	margin-right: auto;
    margin-left: auto;
   
} */
	
	
/*	MENU DROPDOWN*/
	

	/* .container{
		padding-left: 15px;
		padding-right: 0px
	} */

.top-bar .navbar-collapse{
		/* border-top:solid 0px; */
		margin-top: 16px;
	}
	.navbar-toggle {
		padding: 9px 12px;
		margin-top: -80px;
		border: none;
	}
	

.top-bar .navbar-collapse .nav {
	width: 100%;
	z-index:100
	/* height: 200px; */
}
.navbar-collapse .navbar-nav .nav-link {
    left: 50%;
    text-align: center;
    transform: translatex(-50%);
	padding: 20px 0px 24px 0px;
	background-color: white;
}

.navbar-nav {
	/* margin: 0px; */
	width:100%;
	height: 50vh;
	
}
.navbar-collapse .navbar-nav.navbar-center .nav-link {
	/* border-top: solid 1px black; */
	/* margin-top: 0px; */
	/* background-color: black; */
}



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

	/*ABOUT ME*/

.about-me{
	width: 100%;
	height: 40%;
	margin-top: -90px;
/*	background: pink;*/
	
}

.about-title{
	font-size: 40px;
	font-family: General-semibold;
	margin-top: 20px
	
}
.about-content{
	font-size: 16px;
	font-family: General-regular;
}

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

/*IMG PERSONAL*/

.img-personal img{
	margin-top: 40px;
	width: 100%;
	height: 100%;
}


/*-------------*/
	
	/*BANNR*/

.banner-text{
	width: 100%;
	height: 350px;
	background:white;
	margin-top: 52px
}
.text-hi{
	width: 70%;
	height: 70px;
/*	background: red;*/
	font-size: 66px;
	font-family: General-Bold;
	float: right;
}
 .text-welcome{
	width: 95%;
	height: 110px;
/*	background: pink;*/
	font-size: 66px;
	font-family: General-Bold;
	float: right;
}

.cricle-Scroll{
	background: #E9FF47;
  border-radius: 50%;
  height: 7em;
  width: 7em;
   display: flex;
  align-items: center;
  justify-content: center;
	text-align:center;
	margin-left: 14%;
	top: -10px
	
}
.cricle-Scroll p{
	font-size: 12px;
	font-family: General-Bold;
	margin-top: 10px
}
	

.text-porfolio{
	width: 70%;
	height: 60px;
/*	background: pink;*/
	font-size: 66px;
	font-family: General-Bold;
	float: right;
	margin-top: -110px;
	line-height: 68px
}
	.banner-text {
    width: 100%;
    height: 380px;
    background: white;
    margin-top: 52px;
}
	
	/*-------------*/
	
	
	.btn-menutop{
		float: right;
		
	}
	
	.grid .row {
    margin-right: calc(var(--gap)* -1);
    margin-left: calc(var(--gap)* -1);
}
	
	html, body{
		width: 100%;
		/* height: 100%; */
		margin: 0px;
		padding: 0px;}
	
.btn-menutop .btn{
	width: 120px;
	height: 40px;
	font-family: General-Semibold;
	font-size: 14px;
	Background-color: #E9FF47;
	margin-top: -44px;
	border:none;
	float: right;
	margin-right: 64px
	
}
	.navbar-nav.navbar-center li{
/*    position: absolute;*/
    left: 50%;
	text-align:center;
    transform: translatex(-50%);
	padding-top: 30%;
		
}

	 #menu{
		width: 100%;
		height: 33vh;
		background: white;
		z-index: 1000
	} 
	
	
.product-image img {
    width: 96%;

}
	
	
/*SKILL*/



		
	
	/*SECTION UXUII*/

	    #group {
        flex-direction: column-reverse;
    }
	
.uxui-left{
	text-align: justify
}


.uxui-left b{
	font-size: 36px;
	font-family: General-bold;
	
}
.uxui-left p{
	font-size: 16px;
	font-family: General-regular;
	color: #6B6B6B;
	margin-top: 12px;
	
}

.uxui-left .uxui-span-width span{
	font-size: 14px;
	font-family: General-regular;
	
}
.uxui-span-width {
	width: 90%;
	display: inline-block;
    vertical-align: middle
}


.uxui{
	margin-top: 140px;
	 
}

.uxui-left{
	padding-top: 2%
}
.img-uxui img{
	width: 100%
}


.btn-uxui button{
	width: 140px;
	height: 48px;
	font-family: General-Semibold;
	font-size: 16px;
	Background-color: #E9FF47;
	color: Black;
	margin-top: 14px;
	border:none;
	margin-right: auto;
	
}

.btn-uxui{
	 display: inline-block;
     vertical-align: middle;
	margin-top: 16px
}
.btn-uxui .btn-primary:focus {
	color: black;
    background-color:#E9FF47 ;

}
.btn-uxui .btn-primary:hover {
	color: black;
    background-color:#E9FF47 ;

}


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

/*SECTION ITBA*/


	
.ITBA-right{
	text-align: justify
}


.ITBA-right b{
	font-size: 36px;
	font-family: General-bold;
	
}
.ITBA-right p{
	font-size: 16px;
	font-family: General-regular;
	color: #6B6B6B;
	margin-top: 10px
	
}

.ITBA-right .uxui-span-width span{
	font-size: 14px;
	font-family: General-regular;
	
}
.uxui-span-width {
	width: 100%;
	display: inline-block;
    vertical-align: middle
}


.ITBA {
	margin-top: 120px;
	 
}

.ITBA-right{
	padding-top: 2%
}
.img-ITBA img{
	width: 100%
}


.btn-ITBA button{
	width: 140px;
	height: 48px;
	font-family: General-Semibold;
	font-size: 16px;
	Background-color: #E9FF47;
	color: Black;
	margin-top: 14px;
	border:none;
	margin-right: auto;
	
}

.btn-ITBA{
	 display: inline-block;
     vertical-align: middle;
	margin-top: 24px
}
	
.btn-ITBA .btn-primary:focus {
	color: black;
    background-color:#E9FF47 ;

}
.btn-uxui .btn-primary:hover {
	color: black;
    background-color:#E9FF47 ;

}

/*-------------*/
	
	
	/*SECTION PROJECT */
	
.btn-project button:hover {
    color: black;
    background-color:  white;
}
	.btn-project .btn-primary:active {
    color: black;
    background-color: white;
}

.heading-section {
  font-size: 50px;
  font-weight: 400;
  line-height: 1.2;
  font-family: General Sans;
  /* background-color: red */
}

.margin-project{
	padding-top: 140px;
	padding-bottom: 40px
}

.content-project p {
  font-size: 16px;
  color: #333;
  width: 100%;
  /* max-width: 400px; */
  float: right;
}

.btn-project .btn {
  background: none;
  border: none;
  font-weight: 00;
  padding: 0;
  font-size: 16px;
}

.btn-project a {
  color: inherit;
  text-decoration: none;
}

.icon-arrow {
  width: 24px;
  vertical-align: middle;
  transition: transform 0.2s ease;
}

.btn-project a:hover .icon-arrow {
  transform: translateX(4px);
}


.btn-project button{
	/* width: 160px; */
	/* height: 48px; */
	font-family: General-Semibold;
	font-size: 16px;
	background-color: white;
	color: Black;
/*	margin-top: -70px;*/
	border:none;
	
	
}

.project-box {
	width: 100%;
  display: flex;
  flex-direction: column;
  align-items:flex-start;
  gap: 24px; 
  /* background-color: red; */
}

	
}
.product-card-main{
	margin-left: 24px;
}
	
.product-card-main .product-image-main img{
	width: 99%
}

.feature_product--inner{
	margin-top: 28px
}

.product-info-main .product-tags-main{
	font-size: 16px;
	font-family: General-Regular;
	color: #6B6B6B;
	/* padding-top: 16px */
}
.product-info-main .product-title-main a p{
	font-size: 24px;
	font-family: General-Semibold;
	margin-top: 16px
}
.flickity-prev-next-button {
	opacity: 0
		;
}
/*-------------*/
	
	/*Soft skills*/

.section-sort-skill{
	margin-top: 140px;
	background-color: #FDFFF1;
	padding-top: 80px;
	padding-bottom: 80px;
	height: 100%

}
.soft-skills{
	margin-left: 15px;
	margin-right: 15px
}

.soft-skill-title p{
	font-size: 36px;
	font-family: General-semibold
}
.soft-subtitle p{
	font-size: 20px;
	font-family: General-semibold;
	margin-top: 28px
}
.soft-subtitle span{
	font-size: 16px;
	font-family: General-regular;
	color: #6B6B6B;
	
}
.spacing-soft-skill{
	margin-top: 44px
}


/*-------------*/
	
	
	
	/*TOOLS SKILL*/

.section-tools-skill{
	margin-top: 120px
}

.tools-skill-title p{
	font-size: 36px;
	font-family: General-Semibold;
	text-align: center
	
}

.tools-skill-title span{
	font-size: 16px;
	font-family: General-regular;
	 display: flex;
  justify-content: center;
	
}
.section-brands{
	/* background: red; */
	margin-left: -15px;
    margin-right:  -15px;
}
.logo-tools{
	width: 100%;
	height: 100vh;
	display:flex;
	align-items: center;
	justify-content: center;
	padding: 0 60px
}
	

/*-------------*/
	
	
	/*PROJECT PAGE*/

.page__title{
	font-size: 60px;
	font-family: General-Bold;
	margin-top: 80px
}


.tab__nav {
    
    border-bottom: 1px solid #DEDEDE;
}

.tab__nav--current .tab:before {
    background-color: Black;
}

.nav-tabs{
	display: flex;
	justify-content: center;
	gap: 20px
}

.tab:before {
    content: "";
    position: absolute;
    height: 2px;
    width: 100%;
    bottom: -2px;
    left: 0;
    background-color: transparent;
    border-radius: 10px;
}

.tab{
	font-size: 16px;
	font-family: General-regular;
	padding-bottom: 12px;
	position: relative;
	outline: none;
	border: 0;
/*	line-height: 10px;*/
	background-color: transparent
}



.card__grid {
    padding-right: var(--gap);
    padding-left: var(--gap);
	
}

.product-image img {
    width: 95%;
}

.product-title{
	padding-top: 12px
}

.product-title a{
	font-size: 20px;
	color: black;
	font-family: General-Semibold;
	
	
}


.product-tags .tag-organce{
	font-size: 14px;
	color: #6B6B6B;
	font-family: General-regular
	
}


.product-info .product-tags {
    font-size: 16px;
    font-family: General-Regular;
    color: rgb(107, 107, 107);
    margin-top: 4px;
	height: 48px
}

.project-spacing{
	margin-left: 16px;
	margin-top: 28px;
/*	background: red;*/
/*	height: 400px;*/
}
a {
    color: #6B6B6B;
    text-decoration: none;
	font-size: 16px;
/*	font-family: General-Regular*/
}
.nav-tabs > li.active > a {
    color: black;
	font-size: 16px;
	font-family: General-Semibold;
    cursor: default;
	border: none;
    background-color: none;
    
}
.nav-tabs > li.active > a:hover {
border: none
}
.nav-tabs > li.active > a:focus {
border: none
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
     color: black; 
    cursor: default;
    background-color: none;
     border-bottom: 2px solid black;	
}


a, a:focus {
	background: none
}

a:hover, a:focus {
     color: black; 
	background: none
}

.nav-tabs li a:hover{
	background: none
}

.nav-tabs li a {
     border: none;
	font-size: 16px;
	font-family: General-regular;
	position: relative;
    display: block;
	padding: 12px 0px;

}

	/*-------------*/
	
	
/*PROJECT PAGE*/

.page__title{
	font-size: 60px;
	font-family: General-Bold;
	margin-top: 80px
}


.tab__nav {
    
    border-bottom: 1px solid #DEDEDE;
}

.tab__nav--current .tab:before {
    background-color: Black;
}

.nav-tabs{
	display: flex;
	justify-content: center;
	gap: 32px
}

.tab:before {
    content: "";
    position: absolute;
    height: 2px;
    width: 100%;
    bottom: -2px;
    left: 0;
    background-color: transparent;
    border-radius: 10px;
}

.tab{
	font-size: 16px;
	font-family: General-regular;
	padding-bottom: 12px;
	position: relative;
	outline: none;
	border: 0;
/*	line-height: 10px;*/
	background-color: transparent
}



.card__grid {
    padding-right: var(--gap);
    padding-left: var(--gap);
	
}

.product-image img {
    width: 95%;
}

.product-title{
	padding-top: 12px
}

.product-title a{
	font-size: 20px;
	color: black;
	font-family: General-Semibold;
	
	
}


.product-tags .tag-organce{
	font-size: 14px;
	color: #6B6B6B;
	font-family: General-regular
	
}


.product-info .product-tags {
    font-size: 16px;
    font-family: General-Regular;
    color: rgb(107, 107, 107);
    margin-top: 4px;
	height: 48px
}

.project-spacing{
	margin-top: 28px;
/*	background: red;*/
/*	height: 400px;*/
}
a {
    color: #6B6B6B;
    text-decoration: none;
	font-size: 16px;
/*	font-family: General-Regular*/
}
.nav-tabs > li.active > a {
    color: black;
	font-size: 16px;
	font-family: General-Semibold;
    cursor: default;
	border: none;
    background-color: none;
    
}
.nav-tabs > li.active > a:hover {
border: none
}
.nav-tabs > li.active > a:focus {
border: none
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
     color: black; 
    cursor: default;
    background-color: none;
     border-bottom: 2px solid black;	
}


a, a:focus {
	background: none
}

a:hover, a:focus {
     color: black; 
	background: none
}

.nav-tabs li a:hover{
	background: none
}

.nav-tabs li a {
     border: none;
	font-size: 16px;
	font-family: General-regular;
	position: relative;
    display: block;
    padding: 12px 0px;
	
}

/* FOOTER */



	



@media screen and (max-width: 640px){
	
		.flickity-page-dot {
	width: 70px;
	height: 2px;
	margin: 0px;
	border-radius: 0px;
}
.section-sort-skill{
	margin-top: 140px;
	background-color: #FDFFF1;
	padding-top: 48px;
	padding-bottom: 48px;
	height: 100%

}

	
	.product-title a{
	font-size: 16px;
	color: black;
	font-family: General-Semibold;
	line-height: 10px;
}


.product-tags .tag-organce{
	font-size: 12px;
	color: #6B6B6B;
	font-family: General-regular
	
	
}
.bg-empty:first-child{
	width: 100%;
	/* height: 60px */
}
	
	
	
		/*CONTACT ME*/
	



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

	
		/*BANNR*/

.banner-text{
	width: 100%;
	height: 350px;
	background:white;
	margin-top: 52px
}
.text-hi{
	width: 70%;
	height: 70px;
/*	background: red;*/
	font-size: 60px;
	font-family: General-Bold;
	float: right;
}
 .text-welcome{
	width: 95%;
	height: 85px;
/*	background: pink;*/
	font-size: 60px;
	font-family: General-Bold;
	float: right;
}

.cricle-Scroll {
	background: #E9FF47;
  border-radius: 50%;
  height: 7em;
  width: 7em;
   display: flex;
  align-items: center;
  justify-content: center;
	text-align:center;
	margin-left: 3%;
	top: 1px
	
}
.cricle-Scroll p{
	font-size: 12px;
	font-family: General-Bold;
	margin-top: 10px
}
	

.text-porfolio{
	width: 80%;
/*	height: 60px;*/
/*	background: pink;*/
	font-size: 60px;
	font-family: General-Bold;
	float: right;
	margin-top: -96px;
	line-height: 70px
}
	.banner-text {
    width: 100%;
    height: 380px;
    background: white;
    margin-top: 52px;
}
	
	/*-------------*/
	
	
	/*ABOUT ME*/

.about-me{
	width: 100%;
	height: 40%;
/*	margin-top: 10px;*/
/*	background: pink;*/
	
}
.about-me .about-title{
	font-size: 36px;
	font-family: General-semibold;
	margin-top: 24px
	
}
.about-content{
	font-size: 16px;
	font-family: General-regular;
}

/*-------------*/
	
			
	
	/*SECTION UXUII*/

	    #group {
        flex-direction: column-reverse;
    }
	
.uxui-left{
	text-align: justify
}


.uxui-left b{
	font-size: 36px;
	font-family: General-semibold;
	
}
.uxui-left p{
	font-size: 16px;
	font-family: General-regular;
	color: #6B6B6B;
	margin-top: 12px;
	
}

.uxui-left .uxui-span-width span{
	font-size: 14px;
	font-family: General-regular;
	
}
.uxui-span-width {
	width: 100%;
	display: inline-block;
    vertical-align: middle
}


.uxui{
	margin-top: 80px;
	 
}

.uxui-left{
	padding-top: 2%
}
.img-uxui img{
	width: 100%
}


.btn-uxui button{
	width: 140px;
	height: 48px;
	font-family: General-Semibold;
	font-size: 16px;
	Background-color: #E9FF47;
	color: Black;
	margin-top: 14px;
	border:none;
	margin-right: auto;
	
}

.btn-uxui{
	 display: inline-block;
     vertical-align: middle;
	margin-top: 16px
}
.btn-uxui .btn-primary:focus {
	color: black;
    background-color:#E9FF47 ;

}
.btn-uxui .btn-primary:hover {
	color: black;
    background-color:#E9FF47 ;

}

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

/*SECTION ITBA*/


	
.ITBA-right{
	text-align: justify
}


.ITBA-right b{
	font-size: 36px;
	font-family: General-bold;
	
}
.ITBA-right p{
	font-size: 16px;
	font-family: General-regular;
	color: #6B6B6B;
	margin-top: 10px
	
}

.ITBA-right .uxui-span-width span{
	font-size: 14px;
	font-family: General-regular;
	
}
.uxui-span-width {
	width: 100%;
	display: inline-block;
    vertical-align: middle
}


.ITBA {
	margin-top: 80px;
	 
}

.ITBA-right{
	padding-top: 2%
}
.img-ITBA img{
	width: 100%
}


.btn-ITBA button{
	width: 140px;
	height: 48px;
	font-family: General-Semibold;
	font-size: 16px;
	Background-color: #E9FF47;
	color: Black;
	margin-top: 14px;
	border:none;
	margin-right: auto;
	
}

.btn-ITBA{
	 display: inline-block;
     vertical-align: middle;
	margin-top: 24px
}
.btn-ITBA .btn-primary:focus {
	color: black;
    background-color:#E9FF47 ;

}
.btn-uxui .btn-primary:hover {
	color: black;
    background-color:#E9FF47 ;

}
/*-------------*/
	
	
	/*SECTION PROJECT */

.btn-project button:hover {
    color: black;
    background-color:  white;
}
	.btn-project .btn-primary:active {
    color: black;
    background-color: white;
}

.heading-section {
  font-size: 50px;
  font-weight: 400;
  line-height: 1.2;
  font-family: General Sans;
  /* background-color: red */
}

.margin-project{
	padding-top: 140px;
	padding-bottom: 40px
}

.content-project p {
  font-size: 16px;
  color: #333;
  width: 100%;
  /* max-width: 400px; */
  float: right;
}

.btn-project .btn {
  background: none;
  border: none;
  font-weight: 00;
  padding: 0;
  font-size: 16px;
}

.btn-project a {
  color: inherit;
  text-decoration: none;
}

.icon-arrow {
  width: 24px;
  vertical-align: middle;
  transition: transform 0.2s ease;
}

.btn-project a:hover .icon-arrow {
  transform: translateX(4px);
}


.btn-project button{
	/* width: 160px; */
	/* height: 48px; */
	font-family: General-Semibold;
	font-size: 16px;
	background-color: white;
	color: Black;
/*	margin-top: -70px;*/
	border:none;
	
	
}

.project-box {
	width: 100%;
  display: flex;
  flex-direction: column;
  align-items:flex-start;
  gap: 24px; 
  /* background-color: red; */
}
	
}
.product-card-main{
	margin-left: 24px;
}
	
	.product-card-main .product-image-main img{
		width: 99%
	}

.feature_product--inner{
	margin-top: 28px
}

.product-info-main .product-tags-main{
	font-size: 16px;
	font-family: General-Regular;
	color: #6B6B6B;
	/* padding-top: 16px */
}
.product-info-main .product-title-main a p{
	font-size: 24px;
	font-family: General-Semibold;
	margin-top: 16px
}
.flickity-prev-next-button {
	opacity: 0
		;
}
/*-------------*/
	
		
	/*PROJECT PAGE*/

.page__title{
	font-size: 60px;
	font-family: General-Bold;
	margin-top: 80px
}


.tab__nav {
    
    border-bottom: 1px solid #DEDEDE;
}

.tab__nav--current .tab:before {
    background-color: Black;
}

.nav-tabs{
	display: flex;
	justify-content: center;
	gap: 20px
}

.tab:before {
    content: "";
    position: absolute;
    height: 2px;
    width: 100%;
    bottom: -2px;
    left: 0;
    background-color: transparent;
    border-radius: 10px;
}

.tab{
	font-size: 16px;
	font-family: General-regular;
	padding-bottom: 12px;
	position: relative;
	outline: none;
	border: 0;
/*	line-height: 10px;*/
	background-color: transparent
}



.card__grid {
    padding-right: var(--gap);
    padding-left: var(--gap);
	
}

.product-image img {
    width: 95%;
}

.product-title{
	padding-top: 12px
}

.product-title a{
	font-size: 20px;
	color: black;
	font-family: General-Semibold;
	
	
}


.product-tags .tag-organce{
	font-size: 14px;
	color: #6B6B6B;
	font-family: General-regular
	
}


.product-info .product-tags {
    font-size: 16px;
    font-family: General-Regular;
    color: rgb(107, 107, 107);
    margin-top: 4px;
	height: 48px
}

.project-spacing{
	margin-top: 28px;
/*	background: red;*/
/*	height: 400px;*/
}
a {
    color: #6B6B6B;
    text-decoration: none;
	font-size: 16px;
/*	font-family: General-Regular*/
}
.nav-tabs > li.active > a {
    color: black;
	font-size: 16px;
	font-family: General-Semibold;
    cursor: default;
	border: none;
    background-color: none;
    
}
.nav-tabs > li.active > a:hover {
border: none
}
.nav-tabs > li.active > a:focus {
border: none
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
     color: black; 
    cursor: default;
    background-color: none;
     border-bottom: 2px solid black;	
}
	

a, a:focus {
	background: none
}

a:hover, a:focus {
     color: black; 
	background: none
}

.nav-tabs li a:hover{
	background: none
}

.nav-tabs li a {
     border: none;
	font-size: 16px;
	font-family: General-regular;
	position: relative;
    display: block;
	padding: 12px 0px;
	
}

/* FOOTER */




@media screen and (max-width: 540px){
	
	/* .container {
    padding-left: 10px;
  
} */
	
	.flickity-page-dot {
	width: 70px;
	height: 2px;
	margin: 0px;
	border-radius: 0px;
}

	.bg-empty{
	width: 100%;
	/* height: 60px */
	}
	
	/*CONTACT ME*/
	

.description {
    flex: 1;
    max-width: 100%;
    font-size: 16px;
    line-height: 1.6;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
  

.top-row {
    display: flex
;
flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 60px;
    gap: 16px;
	margin-top: 60px
}


  .main-title {
    font-size: 80px; 
  }
 

  .bottom-row {
    /* flex-direction: column; */
    gap: 40px;
  }

  .left-side {
    flex-direction: column;     /* ✅ chuyển từ row sang column */
    align-items: flex-start;
    gap: 20px;
  }

  .right-side {
    justify-content: center;
  }

  .circle-logo {
    width: 100px;
    height: 100px;
  }

  .profile-img {
    width: 100%;
    max-width: 100%;
  }


/*-------------*/
	
	/*PROOJECT DETAIL - UXUI DESIGN */

.title-project-detail{
	font-size: 44px;
	font-family: General-bold;
	padding-top: 44px;
	line-height: 52px
}

.content-project-detail{
	padding-top: 28px
}

.catagory-tab p{
	font-size: 16px;
	font-family: General-regular;
	color: #6B6B6B
}

.catagory-tab .tab-2{
	font-size: 16px;
	font-family: General-Semibold;
	color: black;
	
}

.tab-2{
	margin-top: -6px
}
.spacing-catagoty{
	margin-top: 16px
}

.banner-project-detail img{
	width: 100%;
}

.banner-project-detail {
	margin-top: 60px
}
.infor-detail img{
	width: 100%;
	margin-top: 60px
}



/*-------------*/
	
		/*BANNR*/

.banner-text{
	width: 100%;
	height: 350px;
	background:white;
	margin-top: 52px
}
.text-hi{
	width: 64%;
	height: 70px;
/*	background: red;*/
	font-size: 60px;
	font-family: General-Bold;
	float: right;
}
 .text-welcome{
	width: 95%;
	height: 80px;
/*	background: pink;*/
	font-size: 60px;
	font-family: General-Bold;
	float: right;
}

.cricle-Scroll {
	background: #E9FF47;
  border-radius: 50%;
  height: 7em;
  width: 7em;
   display: flex;
  align-items: center;
  justify-content: center;
	text-align:center;
	margin-left: 14%;
	top: 5%
	
}
.cricle-Scroll p{
	font-size: 12px;
	font-family: General-Bold;
	margin-top: 10px
}
	

.text-porfolio{
	width: 66%;
/*	height: 60px;*/
/*	background: pink;*/
	font-size: 60px;
	font-family: General-Bold;
	float: right;
	margin-top: -100px;
	line-height: 70px
}
	.banner-text {
    width: 100%;
    height: 380px;
    background: white;
    margin-top: 52px;
}
	
	/*-------------*/
	
	
	
		/*ABOUT ME*/

.about-me{
	width: 100%;
	height: 40%;
/*	background: pink;*/
	
}

.about-me .about-title{
	font-size: 28px;
	font-family: General-semibold;
	margin-top: 48px
	
}
.about-content{
	font-size: 16px;
	font-family: General-regular;
	margin-top: 10px;
	text-align: justify
}

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

		
/*SKILL*/

.service-wrapper {
  position: relative;
  max-width: 100%;
  margin: 60px auto;
  padding: 0 20px;
}

.service-item {
  position: relative; /* để .hover-image bám theo item này */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 40px 0;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}


.service-item:hover .hover-image {
  opacity: 1;
  transform: translateY(0);
}

.service-item:hover {
  background-color: white;
}

h3{
	margin-top: 0px
}

.service-item .index {
  flex-basis: 10%;
  font-size: 16px;
  opacity: 0.6;
  font-family: General-regular;
  
}

.service-item .title {
  flex-basis: 40%;
  font-size: 32px;
  font-weight: bold;
  font-family: General-Semibold;
}

.service-item .desc {
  flex-basis: 40%;
  font-size: 16px;
  line-height: 1.5;
  color: black;
  font-family: General-regular;
}

.hover-image {
  position: absolute;
  left: 38%;
  width:0px;
  height: 0px;
  background-color: transparent; /* 💡 đảm bảo không có nền */
  background-size: contain;      /* 💡 giữ tỉ lệ hình tốt hơn */
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(0);
  z-index: 10;
  pointer-events: none;
}
	
	/*SECTION UXUII*/

	    #group {
        flex-direction: column-reverse;
    }
	
.uxui-left{
	text-align: justify
}


.uxui-left b{
	font-size: 28px;
	font-family: General-semibold;
	
}
.uxui-left p{
	font-size: 16px;
	font-family: General-regular;
	color: #6B6B6B;
	margin-top: 6px;
	
}

.uxui-left .uxui-span-width span{
	font-size: 14px;
	font-family: General-regular;
	
}
.uxui-span-width {
	width: 90%;
	display: inline-block;
    vertical-align: middle
}


.uxui{
	margin-top: 80px;
	 
}

.uxui-left{
	padding-top: 2%
}
.img-uxui img{
	width: 100%
}


.btn-uxui button{
	width: 140px;
	height: 48px;
	font-family: General-Semibold;
	font-size: 16px;
	Background-color: #E9FF47;
	color: Black;
	margin-top: 14px;
	border:none;
	margin-right: auto;
	
}

.btn-uxui{
	 display: inline-block;
     vertical-align: middle;
	margin-top: 16px
}
.btn-uxui .btn-primary:focus {
	color: black;
    background-color:#E9FF47 ;

}
.btn-uxui .btn-primary:hover {
	color: black;
    background-color:#E9FF47 ;

}

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

/*SECTION ITBA*/


	
.ITBA-right{
	text-align: justify
}


.ITBA-right b{
	font-size: 28px;
	font-family: General-semibold;
	
}
.ITBA-right p{
	font-size: 16px;
	font-family: General-regular;
	color: #6B6B6B;
	margin-top: 6px
	
}

.ITBA-right .uxui-span-width span{
	font-size: 14px;
	font-family: General-regular;
	
}
.uxui-span-width {
	width: 90%;
	display: inline-block;
    vertical-align: middle
}


.ITBA {
	margin-top: 80px;
	 
}

.ITBA-right{
	padding-top: 2%
}
.img-ITBA img{
	width: 100%
}


.btn-ITBA button{
	width: 140px;
	height: 48px;
	font-family: General-Semibold;
	font-size: 16px;
	Background-color: #E9FF47;
	color: Black;
	margin-top: 14px;
	border:none;
	margin-right: auto;
	
}

.btn-ITBA{
	 display: inline-block;
     vertical-align: middle;
	margin-top: 24px
}
.btn-ITBA .btn-primary:focus {
	color: black;
    background-color:#E9FF47 ;

}
.btn-uxui .btn-primary:hover {
	color: black;
    background-color:#E9FF47 ;

}
/*-------------*/
	
	
	/*SECTION PROJECT */
	.btn-project button:hover {
    color: black;
    background-color:  white;
}
	.btn-project .btn-primary:active {
    color: black;
    background-color: white;
}

.heading-section {
  font-size: 50px;
  font-weight: 400;
  line-height: 1.2;
  font-family: General Sans;
  /* background-color: red */
}

.margin-project{
	padding-top: 140px;
	padding-bottom: 40px
}

.content-project p {
  font-size: 16px;
  color: #333;
  width: 100%;
  /* max-width: 400px; */
  float: right;
}

.btn-project .btn {
  background: none;
  border: none;
  font-weight: 00;
  padding: 0;
  font-size: 16px;
}

.btn-project a {
  color: inherit;
  text-decoration: none;
}

.icon-arrow {
  width: 24px;
  vertical-align: middle;
  transition: transform 0.2s ease;
}

.btn-project a:hover .icon-arrow {
  transform: translateX(4px);
}


.btn-project button{
	/* width: 160px; */
	/* height: 48px; */
	font-family: General-Semibold;
	font-size: 16px;
	background-color: white;
	color: Black;
/*	margin-top: -70px;*/
	border:none;
	
	
}

.project-box {
	width: 100%;
  display: flex;
  flex-direction: column;
  align-items:flex-start;
  gap: 24px; 
  /* background-color: red; */
}
.product-card-main{
	margin-left: 24px;
}
	
	.product-card-main .product-image-main img{
		width: 99%
	}

.feature_product--inner{
	margin-top: 28px
}

.product-info-main .product-tags-main{
	font-size: 16px;
	font-family: General-Regular;
	color: #6B6B6B;
	/* padding-top: 16px */
}
.product-info-main .product-title-main a p{
	font-size: 24px;
	font-family: General-Semibold;
	margin-top: 16px
}
.flickity-prev-next-button {
	opacity: 0
		;
}
/*-------------*/
	
		/*Soft skills*/

.section-sort-skill{
	margin-top: 140px;
	background-color: #FDFFF1;
	padding-top: 48px;
	padding-bottom: 48px;
	height: 100%

}

.soft-skill-title p{
	font-size: 28px;
	font-family: General-semibold
}
.soft-subtitle p{
	font-size: 18px;
	font-family: General-semibold;
	margin-top: 20px
}
.soft-subtitle span{
	font-size: 16px;
	font-family: General-regular;
	color: #6B6B6B;
	
}
.spacing-soft-skill{
	margin-top: 24px
}


/*-------------*/
	/*TOOLS SKILL*/

.section-tools-skill{
	margin-top: 80px
}

.tools-skill-title p{
	font-size: 28px;
	font-family: General-Semibold;
	text-align: center;	
}

.tools-skill-title span{
	font-size: 16px;
	font-family: General-regular;
	 display: flex;
  justify-content: center;
	text-align: center;
	
}

.logo-tools{
	width: 100%;
	height: 100vh;
	display:flex;
	align-items: center;
	justify-content: center;
	padding: 0 28px
}
	
.marquee__item {
    display: inline-block;
    min-height: 26px;
    width: 110px;
}
	.marquee__item img{
		width: 40%
	}
/*-------------*/
	
	
/*FOOTER MOBILE*/


.footer{
	
	width: 100%;
	height: 100%;
	background: white;
  justify-content: center;
	margin-top: 80px;
	border-top: solid 1px;
	text-align: center;
}
.title-footer{
	width: 100%;
	line-height: 0.9;
	font-size: 16vw;
	padding-top:4vw;
	font-family: General-semibold;
	/* background-color: red */
}

.copyright{
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 16px;
	font-family: General-regular;
	padding-top: 12px
	/* background-color: red; */	
	
}
.link-social{
	width: 100%;
	height: 100%;
	/* background-color: #E9FF47; */
	display: flex;
  justify-content: center;
  align-items: center;
  
	
}

.box-bottom-footer .link-social {
  order: 1;
}

.box-bottom-footer .copyright {
  order: 2;
}

.box-bottom-footer{
	 display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
	width: 100%;
	padding-left: 4vw;
	padding-right: 4vw;
	padding-bottom: 5vw;
	padding-top: 8px
	/* background: red; */
}

.link1 span{
	font-size: 16px;
}
.link2 span{
	margin-right: 16px
}





/*----------*/
	
	/*PROJECT PAGE*/

.page__title{
	font-size: 44px;
	font-family: General-bold;
	margin-top: 60px
}


.tab__nav {
    
    border-bottom: 1px solid #DEDEDE;
}

.tab__nav--current .tab:before {
    background-color: Black;
}

.nav-tabs{
	display: flex;
	justify-content: center;
/*	gap: 28px*/
}

.tab:before {
    content: "";
    position: absolute;
    height: 2px;
    width: 100%;
    bottom: -2px;
    left: 0;
    background-color: transparent;
    border-radius: 10px;
}

.tab{
	font-size: 16px;
	font-family: General-regular;
	padding-bottom: 12px;
	position: relative;
	outline: none;
	border: 0;
/*	line-height: 10px;*/
	background-color: transparent
}



.card__grid {
    padding-right: var(--gap);
    padding-left: var(--gap);
	
}

.product-image img {
    width: 95%;
}

.product-title{
	padding-top: 12px
}

.product-title a{
	font-size: 20px;
	color: black;
	font-family: General-Semibold;
	
	
}


.product-tags .tag-organce{
	font-size: 14px;
	color: #6B6B6B;
	font-family: General-regular;
	
}


.product-info .product-tags {
    font-size: 16px;
    font-family: General-Regular;
    color: rgb(107, 107, 107);
    margin-top: 4px;
	height: 48px
}

.project-spacing{
	margin-top: 28px;
/*	background: red;*/
/*	height: 400px;*/
}
a {
    color: #6B6B6B;
    text-decoration: none;
	font-size: 16px;
/*	font-family: General-Regular*/
}
.nav-tabs > li.active > a {
    color: black;
	font-size: 16px;
	font-family: General-Semibold;
    cursor: default;
	border: none;
    background-color: none;
    
}
.nav-tabs > li.active > a:hover {
border: none
}
.nav-tabs > li.active > a:focus {
border: none
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
     color: black; 
    cursor: default;
    background-color: none;
     border-bottom: 2px solid black;	
}
	

a, a:focus {
	background: none
}

a:hover, a:focus {
     color: black; 
	background: none
}

.nav-tabs li a:hover{
	background: none
}

.nav-tabs li a {
     border: none;
	font-size: 16px;
	font-family: General-regular;
	position: relative;
    display: block;
	padding: 12px 0px;
	
}

	
	.nav-tabs {
/*  background-color: red;*/
  white-space: nowrap;
	justify-content: start;
overflow-x: scroll;
/*		overflow-y: hidden;*/
    gap: 24px;
}
	.nav-tabs::-webkit-scrollbar{
		display: none;
		
	}
.nav-tabs li {
  display: inline-block;
  color: white;
  text-align: center;
  text-decoration: none;
}



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

}



@media screen and (max-width: 414px){
	
	.flickity-page-dot:first-child {
	width: 40px;
	height: 2px;
	margin: 0px;
	border-radius: 0px;
}

	.bg-empty:first-child{
	width: 100%;
	/* height: 48px */
	}
	
	/*CONTACT ME*/



/*-------------*/
	
	/*PROOJECT DETAIL - UXUI DESIGN */

.title-project-detail{
	font-size: 32px;
	font-family: General-bold;
	padding-top: 40px;
	line-height: 40px
}

.content-project-detail{
	padding-top: 16px
}

.catagory-tab p{
	font-size: 16px;
	font-family: General-regular;
	color: #6B6B6B
}

.catagory-tab .tab-2{
	font-size: 16px;
	font-family: General-Semibold;
	color: black;
	
}

.tab-2{
	margin-top: -6px
}
.spacing-catagoty{
	margin-top: 16px
}

.banner-project-detail img{
	width: 100%;
}

.banner-project-detail {
	margin-top: 40px
}
.infor-detail img{
	width: 100%;
	margin-top: 40px
}



/*-------------*/
	
		/*BANNR*/

.banner-text{
	width: 100%;
	height: 350px;
	background:white;
	margin-top: 52px
}
.text-hi:first-child{
	width: 80%;
	height: 70px;
/*	background: red;*/
	font-size: 60px;
	font-family: General-Bold;
	float: right
}
 .text-welcome{
	width: 95%;
	height: 85px;
/*	background: pink;*/
	font-size: 60px;
	font-family: General-Bold;
	float: right;
}

.cricle-Scroll {
	background: #E9FF47;
  border-radius: 50%;
  height: 7em;
  width: 7em;
   display: flex;
  align-items: center;
  justify-content: center;
	text-align:center;
	margin-left: 14%;
	top: 5%
	
}
.cricle-Scroll p{
	font-size: 12px;
	font-family: General-Bold;
	margin-top: 10px
}
	

.text-porfolio{
	width: 66%;
/*	height: 60px;*/
/*	background: pink;*/
	font-size: 64px;
	font-family: General-Bold;
	float: right;
	margin-top: -100px;
	line-height: 70px
}
	.banner-text {
    width: 100%;
    height: 380px;
    background: white;
    margin-top: 52px;
}


/*-------------*/
		/*ABOUT ME*/

.about-me{
	width: 100%;
	height: 40%;
	/* background: pink; */
	
}

.about-me .about-title{
	font-size: 24px;
	font-family: General-semibold;
	margin-top: 40px
	
}
.about-content{
	font-size: 16px;
	font-family: General-regular;
	margin-top: 10px;
	text-align: justify
}

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

		
/*SKILL*/

.service-wrapper {
  position: relative;
  max-width: 100%;
  margin: 60px auto;
  padding: 0 20px;
}

.service-item {
  position: relative; /* để .hover-image bám theo item này */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 40px 0;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}


.service-item:hover .hover-image {
  opacity: 1;
  transform: translateY(0);
}

.service-item:hover {
  background-color: white;
}

h3{
	margin-top: 0px
}

.service-item .index {
  flex-basis: 10%;
  font-size: 16px;
  opacity: 0.6;
  font-family: General-regular;
  
}

.service-item .title {
  flex-basis: 30%;
  font-size: 28px;
  font-weight: bold;
  font-family: General-Semibold;
}

.service-item .desc {
  flex-basis: 50%;
  font-size: 16px;
  line-height: 1.5;
  color: black;
  font-family: General-regular;
}

	
	/*SECTION UXUII*/

	    #group {
        flex-direction: column-reverse;
    }
	
.uxui-left{
	text-align: justify
}


.uxui-left b{
	font-size: 24px;
	font-family: General-semibold;
	
}
.uxui-left p{
	font-size: 16px;
	font-family: General-regular;
	color: #6B6B6B;
	margin-top: 2px;
	
}

.uxui-left .uxui-span-width span{
	font-size: 14px;
	font-family: General-regular;
	
}
.uxui-span-width {
	width: 100%;
	display: inline-block;
    vertical-align: middle
}


.uxui{
	margin-top: 60px;
	 
}

.uxui-left{
	padding-top: 2%
}
.img-uxui img{
	width: 100%
}


.btn-uxui button{
	width: 140px;
	height: 44px;
	font-family: General-Semibold;
	font-size: 16px;
	Background-color: #E9FF47;
	color: Black;
	margin-top: 10px;
	border:none;
	margin-right: auto;
	
}

.btn-uxui{
	 display: inline-block;
     vertical-align: middle;
	margin-top: 16px
}


.btn-uxui .btn-primary:focus {
	color: black;
    background-color:#E9FF47 ;

}
	.btn-uxui .btn-primary:hover {
	color: black;
    background-color:#E9FF47 ;

}

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

/*SECTION ITBA*/


	
.ITBA-right{
	text-align: justify
}


.ITBA-right b{
	font-size: 24px;
	font-family: General-semibold;
	
}
.ITBA-right p{
	font-size: 16px;
	font-family: General-regular;
	color: #6B6B6B;
	margin-top: 2px
	
}

.ITBA-right .uxui-span-width span{
	font-size: 14px;
	font-family: General-regular;
	
}
.uxui-span-width {
	width: 100%;
	display: inline-block;
    vertical-align: middle
}


.ITBA {
	margin-top: 60px;
	 
}

.ITBA-right{
	padding-top: 2%
}
.img-ITBA img{
	width: 100%
}


.btn-ITBA button{
	width: 140px;
	height: 44px;
	font-family: General-Semibold;
	font-size: 16px;
	Background-color: #E9FF47;
	color: Black;
	margin-top: 10px;
	border:none;
	margin-right: auto;
	
}

.btn-ITBA{
	 display: inline-block;
     vertical-align: middle;
	margin-top: 16px
}


/*-------------*/
	
	
	/*SECTION PROJECT */
	.btn-project button:hover {
    color: black;
    background-color:  white;
}
	.btn-project .btn-primary:active {
    color: black;
    background-color: white;
}

.heading-section {
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
  font-family: General Sans;
  /* background-color: red */
}

.margin-project{
	padding-top: 140px;
	padding-bottom: 40px
}

.content-project p {
  font-size: 16px;
  color: #333;
  width: 100%;
  /* max-width: 400px; */
  float: right;
}

.btn-project .btn {
  background: none;
  border: none;
  font-weight: 00;
  padding: 0;
  font-size: 16px;
}

.btn-project a {
  color: inherit;
  text-decoration: none;
}

.icon-arrow {
  width: 24px;
  vertical-align: middle;
  transition: transform 0.2s ease;
}

.btn-project a:hover .icon-arrow {
  transform: translateX(4px);
}


.btn-project button{
	/* width: 160px; */
	/* height: 48px; */
	font-family: General-Semibold;
	font-size: 16px;
	background-color: white;
	color: Black;
/*	margin-top: -70px;*/
	border:none;
	
	
}

.project-box {
	width: 100%;
  display: flex;
  flex-direction: column;
  align-items:flex-start;
  gap: 24px; 
  /* background-color: red; */
}
.product-card-main{
	margin-left: 24px;
}
	
	.product-card-main .product-image-main img{
		width: 99%
	}

.feature_product--inner{
	margin-top: 28px
}

.product-info-main .product-tags-main{
	font-size: 16px;
	font-family: General-Regular;
	color: #6B6B6B;
	/* padding-top: 16px */
}
.product-info-main .product-title-main a p{
	font-size: 24px;
	font-family: General-Semibold;
	margin-top: 16px
}
.flickity-prev-next-button {
	opacity: 0
		;
}
/*-------------*/
	
		/*Soft skills*/

.section-sort-skill{
	margin-top: 80px;
	background-color: #FDFFF1;
	padding-top: 48px;
	padding-bottom: 48px;
	height: 100%

}

.soft-skill-title p{
	font-size: 24px;
	font-family: General-semibold;
	margin-top: 12px
}
.soft-subtitle p{
	font-size: 18px;
	font-family: General-semibold;
	margin-top: 20px
}
.soft-subtitle span{
	font-size: 16px;
	font-family: General-regular;
	color: #6B6B6B;
	
}
.spacing-soft-skill{
	margin-top: 6px
}


/*-------------*/
	/*TOOLS SKILL*/

.section-tools-skill{
	margin-top: 60px
}


.tools-skill-title p{
	font-size: 24px;
	font-family: General-Semibold;
	text-align: center
	
}

.tools-skill-title span{
	font-size: 16px;
	font-family: General-regular;
	 display: flex;
  justify-content: center;
	text-align: center;
	
}

.logo-tools{
	width: 100%;
	height: 100vh;
	display:flex;
	align-items: center;
	justify-content: center;
	padding: 0 28px
}
	
	.slider-marquee{
		margin-top: 10px
	}
.marquee__item {
    display: inline-block;
    min-height: 16px;
    width: 140px;
}
	.marquee__item img{
		width: 40%
	}
	
	.section-brands {
	margin-top: 28px;
/*	margin-bottom: 133px;*/
}
/*-------------*/
	
	/*FOOTER MOBILE*/



.footer{
	
	width: 100%;
	height: 100%;
	background: white;
  justify-content: center;
	margin-top: 80px;
	border-top: solid 1px;
	text-align: center;
}
.title-footer{
	width: 100%;
	line-height: 0.9;
	font-size: 16vw;
	padding-top:4vw;
	font-family: General-semibold;
	/* background-color: red */
}

.copyright{
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 16px;
	font-family: General-regular;
	padding-top: 12px
	/* background-color: red; */	
	
}
.link-social{
	width: 100%;
	height: 100%;
	/* background-color: #E9FF47; */
	display: flex;
  justify-content: center;
  align-items: center;
  
	
}

.box-bottom-footer .link-social {
  order: 1;
}

.box-bottom-footer .copyright {
  order: 2;
}

.box-bottom-footer{
	 display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
	width: 100%;
	padding-left: 4vw;
	padding-right: 4vw;
	padding-bottom: 5vw;
	padding-top: 8px
	/* background: red; */
}

.link1 span{
	font-size: 16px;
}
.link2 span{
	margin-right: 16px
}

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


}

@media screen and (max-width: 430px){
	
	/* .container {
    padding-left: 10px;
  
} */



/* SKILL */

.service-wrapper {
  position: relative;
  max-width: 100%;
  margin: 60px auto;
  padding: 0 20px;
}

.service-item {
  position: relative; /* để .hover-image bám theo item này */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 40px 0;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}


.service-item:hover .hover-image {
  opacity: 1;
  transform: translateY(0);
}

.service-item:hover {
  background-color: white;
}

h3{
	margin-top: 0px
}

.service-item .index {
  flex-basis: 10%;
  font-size: 16px;
  opacity: 0.6;
  font-family: General-regular;
  
}

.service-item .title {
  flex-basis: 30%;
  font-size: 28px;
  font-weight: bold;
  font-family: General-Semibold;
}

.service-item .desc {
  flex-basis: 50%;
  font-size: 16px;
  line-height: 1.5;
  color: black;
  font-family: General-regular;
}

.hover-image {
  position: absolute;
  left: 38%;
  width:0px;
  height: 0px;
  background-color: transparent; /* 💡 đảm bảo không có nền */
  background-size: contain;      /* 💡 giữ tỉ lệ hình tốt hơn */
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(0);
  z-index: 10;
  pointer-events: none;
}

/* SECTION PROJECT */

.btn-project button:hover {
    color: black;
    background-color:  white;
}
	.btn-project .btn-primary:active {
    color: black;
    background-color: white;
}

.heading-section {
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
  font-family: General Sans;
  /* background-color: red */
}

.margin-project{
	padding-top: 140px;
	padding-bottom: 40px
}

.content-project p {
  font-size: 16px;
  color: #333;
  width: 100%;
  /* max-width: 400px; */
  float: right;
}

.btn-project .btn {
  background: none;
  border: none;
  font-weight: 00;
  padding: 0;
  font-size: 16px;
}

.btn-project a {
  color: inherit;
  text-decoration: none;
}

.icon-arrow {
  width: 24px;
  vertical-align: middle;
  transition: transform 0.2s ease;
}

.btn-project a:hover .icon-arrow {
  transform: translateX(4px);
}


.btn-project button{
	/* width: 160px; */
	/* height: 48px; */
	font-family: General-Semibold;
	font-size: 16px;
	background-color: white;
	color: Black;
/*	margin-top: -70px;*/
	border:none;
	
	
}

.project-box {
	width: 100%;
  display: flex;
  flex-direction: column;
  align-items:flex-start;
  gap: 24px; 
  /* background-color: red; */
}
	
		.flickity-page-dot {
	width: 60px;
	height: 2px;
	margin: 0px;
	border-radius: 0px;
}
.product-title a {
    font-size: 18px;
    color: black;
    font-family: General-Semibold;
}
.product-tags .tag-organce {
    font-size: 12px;
    color: #6B6B6B;
    font-family: General-regular;
}
.product-info .product-tags {
    font-size: 16px;
    font-family: General-Regular;
    color: rgb(107, 107, 107);
    margin-top: 0px;
    height: 48px;
}
	/*CONTACT ME*/
	
.description {
    flex: 1;
    /* max-width: 400px; */
    font-size: 16px;
    line-height: 1.6;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
    

.top-row {
    display: flex
;
flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 60px;
    gap: 16px;
	
}


  .main-title {
    font-size: 56px; 
  }
 

  .bottom-row {
    /* flex-direction: column; */
    gap: 40px;
  }

  .left-side {
    flex-direction: column;     /* ✅ chuyển từ row sang column */
    align-items: flex-start;
    gap: 20px;
  }

  .right-side {
    justify-content: center;
  }

  .circle-logo {
    width: 100px;
    height: 100px;
  }

  .profile-img {
    width: 100%;
    max-width: 100%;
  }


/*-------------*/
	
	/*PROOJECT DETAIL - UXUI DESIGN */

.title-project-detail{
	font-size: 32px;
	font-family: General-bold;
	padding-top: 40px;
	line-height: 40px
}

.content-project-detail{
	padding-top: 16px
}

.catagory-tab p{
	font-size: 16px;
	font-family: General-regular;
	color: #6B6B6B
}

.catagory-tab .tab-2{
	font-size: 16px;
	font-family: General-Semibold;
	color: black;
	
}

.tab-2{
	margin-top: -6px
}
.spacing-catagoty{
	margin-top: 16px
}

.banner-project-detail img{
	width: 100%;
}

.banner-project-detail {
	margin-top: 40px
}
.infor-detail img{
	width: 100%;
	margin-top: 40px
}



/*-------------*/
	
	/*BANNR*/

.banner-text{
	width: 100%;
	height: 350px;
	background:white;
	margin-top: 52px
}
.text-hi{
	width: 70%;
	height: 70px;
/*	background: red;*/
	font-size: 60px;
	font-family: General-Bold;
	float: right;
}
 .text-welcome{
	width: 95%;
	height: 86px;
/*	background: pink;*/
	font-size: 60px;
	font-family: General-Bold;
	float: right;
}

.cricle-Scroll {
	background: #E9FF47;
  border-radius: 50%;
  height: 7em;
  width: 7em;
   display: flex;
  align-items: center;
  justify-content: center;
	text-align:center;
	margin-left: 4%;
	top: 2%
	
}
.cricle-Scroll p{
	font-size: 12px;
	font-family: General-Bold;
	margin-top: 10px
}
	

.text-porfolio{
	width: 70%;
/*	height: 60px;*/
/*	background: pink;*/
	font-size: 60px;
	font-family: General-Bold;
	float: right;
	margin-top: -110px;
	line-height: 70px
}
	.banner-text {
    width: 100%;
    height: 380px;
    background: white;
    margin-top: 52px;
}
	
	/*-------------*/
	
			/*Soft skills*/

.section-sort-skill{
	margin-top: 80px;
	background-color: #FDFFF1;
	padding-top: 48px;
	padding-bottom: 48px;
	height: 100%

}

.soft-skill-title p{
	font-size: 24px;
	font-family: General-semibold;
	margin-top: 12px
}
.soft-subtitle p{
	font-size: 18px;
	font-family: General-semibold;
	margin-top: 20px
}
.soft-subtitle span{
	font-size: 16px;
	font-family: General-regular;
	color: #6B6B6B;
	
}
.spacing-soft-skill{
	margin-top: 6px
}

/* FOOTER */

.footer{
	
	width: 100%;
	height: 100%;
	background: white;
  justify-content: center;
	margin-top: 80px;
	border-top: solid 1px;
	text-align: center;
}
.title-footer{
	width: 100%;
	line-height: 0.9;
	font-size: 16vw;
	padding-top:4vw;
	font-family: General-semibold;
	/* background-color: red */
}

.copyright{
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 16px;
	font-family: General-regular;
	padding-top: 12px
	/* background-color: red; */	
	
}
.link-social{
	width: 100%;
	height: 100%;
	/* background-color: #E9FF47; */
	display: flex;
  justify-content: center;
  align-items: center;
  
	
}

.box-bottom-footer .link-social {
  order: 1;
}

.box-bottom-footer .copyright {
  order: 2;
}

.box-bottom-footer{
	 display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
	width: 100%;
	padding-left: 4vw;
	padding-right: 4vw;
	padding-bottom: 5vw;
	padding-top: 8px
	/* background: red; */
}

.link1 span{
	font-size: 16px;
}
.link2 span{
	margin-right: 16px
}

	
}
	
	
@media screen and (max-width: 390px){
	
	/* .container {
    padding-left: 10px;
  
} */
		.flickity-page-dot{
	width: 40px;
	height: 2px;
	margin: 0px;
	border-radius: 0px;
}
	
.btn-project button:hover {
    color: black;
    background-color:  white;
}
	.btn-project .btn-primary:active {
    color: black;
    background-color: white;
}

.heading-section {
  font-size: 36px;
  font-weight: 400;
  line-height: 1.2;
  font-family: General Sans;
  /* background-color: red */
}

.margin-project{
	padding-top: 140px;
	padding-bottom: 40px
}

.content-project p {
  font-size: 16px;
  color: #333;
  width: 100%;
  /* max-width: 400px; */
  float: right;
}

.btn-project .btn {
  background: none;
  border: none;
  font-weight: 00;
  padding: 0;
  font-size: 16px;
}

.btn-project a {
  color: inherit;
  text-decoration: none;
}

.icon-arrow {
  width: 24px;
  vertical-align: middle;
  transition: transform 0.2s ease;
}

.btn-project a:hover .icon-arrow {
  transform: translateX(4px);
}


.btn-project button{
	/* width: 160px; */
	/* height: 48px; */
	font-family: General-Semibold;
	font-size: 16px;
	background-color: white;
	color: Black;
/*	margin-top: -70px;*/
	border:none;
	
	
}

.project-box {
	width: 100%;
  display: flex;
  flex-direction: column;
  align-items:flex-start;
  gap: 24px; 
  /* background-color: red; */
}
	/*CONTACT ME*/
	



/*-------------*/
	
	/*BANNR*/

.banner-text{
	width: 100%;
	height: 350px;
	background:white;
	margin-top: 52px
}
.text-hi{
	width: 80%;
	height: 70px;
/*	background: red;*/
	font-size: 60px;
	font-family: General-Bold;
	float: right;
}
 .text-welcome{
	width: 95%;
	height: 80px;
/*	background: pink;*/
	font-size: 56px;
	font-family: General-Bold;
	float: right;
}

.cricle-Scroll {
	background: #E9FF47;
  border-radius: 50%;
  height: 7em;
  width: 7em;
   display: flex;
  align-items: center;
  justify-content: center;
	text-align:center;
	margin-left: 8%;
	top: 5%
	
}
.cricle-Scroll p{
	font-size: 12px;
	font-family: General-Bold;
	margin-top: 10px
}
	

.text-porfolio{
	width: 66%;
/*	height: 60px;*/
/*	background: pink;*/
	font-size: 56px;
	font-family: General-Bold;
	float: right;
	margin-top: -110px;
	line-height: 70px
}
	.banner-text {
    width: 100%;
    height: 380px;
    background: white;
    margin-top: 52px;
}
	
	/*-------------*/
	
			/*Soft skills*/

.section-sort-skill{
	margin-top: 80px;
	background-color: #FDFFF1;
	padding-top: 48px;
	padding-bottom: 48px;
	height: 100%

}

.soft-skill-title p{
	font-size: 24px;
	font-family: General-semibold;
	margin-top: 12px
}
.soft-subtitle p{
	font-size: 18px;
	font-family: General-semibold;
	margin-top: 20px
}
.soft-subtitle span{
	font-size: 16px;
	font-family: General-regular;
	color: #6B6B6B;
	
}
.spacing-soft-skill{
	margin-top: 6px
}


/*-------------*/
	
	
	
}
	
@media screen and (max-width: 375px){
	
	/* .container {
    padding-left: 10px;
  
} */
	
	/*CONTACT ME*/
	



/*-------------*/
	
	/*BANNR*/

.banner-text{
	width: 100%;
	height: 350px;
	background:white;
	margin-top: 52px
}
.text-hi{
	width: 80%;
	height: 70px;
/*	background: red;*/
	font-size: 60px;
	font-family: General-Bold;
	float: right;
}
 .text-welcome{
	width: 95%;
	height: 80px;
/*	background: pink;*/
	font-size: 56px;
	font-family: General-Bold;
	float: right;
}

.cricle-Scroll {
	background: #E9FF47;
  border-radius: 50%;
  height: 7em;
  width: 7em;
   display: flex;
  align-items: center;
  justify-content: center;
	text-align:center;
	margin-left: 2%;
	top: 2%
	
}
.cricle-Scroll p{
	font-size: 12px;
	font-family: General-Bold;
	margin-top: 10px
}
	

.text-porfolio{
	width: 70%;
/*	height: 60px;*/
/*	background: pink;*/
	font-size: 56px;
	font-family: General-Bold;
	float: right;
	margin-top: -110px;
	line-height: 70px
}
	.banner-text {
    width: 100%;
    height: 380px;
    background: white;
    margin-top: 52px;
}
	
	/*-------------*/
	
			/*Soft skills*/

.section-sort-skill{
	margin-top: 80px;
	background-color: #FDFFF1;
	padding-top: 48px;
	padding-bottom: 48px;
	height: 100%

}

.soft-skill-title p{
	font-size: 24px;
	font-family: General-semibold;
	margin-top: 12px
}
.soft-subtitle p{
	font-size: 18px;
	font-family: General-semibold;
	margin-top: 20px
}
.soft-subtitle span{
	font-size: 16px;
	font-family: General-regular;
	color: #6B6B6B;
	
}
.spacing-soft-skill{
	margin-top: 6px
}


/*-------------*/
	
	/* SKILL */

	.service-wrapper {
  position: relative;
  max-width: 100%;
  margin: 60px auto;
  padding: 0 20px;
}

.service-item {
  position: relative; /* để .hover-image bám theo item này */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 40px 0;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}


.service-item:hover .hover-image {
  opacity: 1;
  transform: translateY(0);
}

.service-item:hover {
  background-color: white;
}

h3{
	margin-top: 0px
}

.service-item .index {
  flex-basis: 10%;
  font-size: 16px;
  opacity: 0.6;
  font-family: General-regular;
  
}

.service-item .title {
  flex-basis: 30%;
  font-size: 24px;
  font-weight: bold;
  font-family: General-Semibold;
}

.service-item .desc {
  flex-basis: 50%;
  font-size: 14px;
  line-height: 1.5;
  color: black;
  font-family: General-regular;
}

.hover-image {
  position: absolute;
  left: 38%;
  width:0px;
  height: 0px;
  background-color: transparent; /* 💡 đảm bảo không có nền */
  background-size: contain;      /* 💡 giữ tỉ lệ hình tốt hơn */
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(0);
  z-index: 10;
  pointer-events: none;
}

	/* SECTION PROJECT */

	.btn-project button:hover {
    color: black;
    background-color:  white;
}
	.btn-project .btn-primary:active {
    color: black;
    background-color: white;
}

.heading-section {
  font-size: 36px;
  font-weight: 400;
  line-height: 1.2;
  font-family: General Sans;
  /* background-color: red */
}

.margin-project{
	padding-top: 140px;
	padding-bottom: 40px
}

.content-project p {
  font-size: 16px;
  color: #333;
  width: 100%;
  /* max-width: 400px; */
  float: right;
}

.btn-project .btn {
  background: none;
  border: none;
  font-weight: 00;
  padding: 0;
  font-size: 16px;
}

.btn-project a {
  color: inherit;
  text-decoration: none;
}

.icon-arrow {
  width: 24px;
  vertical-align: middle;
  transition: transform 0.2s ease;
}

.btn-project a:hover .icon-arrow {
  transform: translateX(4px);
}


.btn-project button{
	/* width: 160px; */
	/* height: 48px; */
	font-family: General-Semibold;
	font-size: 16px;
	background-color: white;
	color: Black;
/*	margin-top: -70px;*/
	border:none;
	
	
}

.project-box {
	width: 100%;
  display: flex;
  flex-direction: column;
  align-items:flex-start;
  gap: 24px; 
  /* background-color: red; */
}

}