/*
Theme Name: PHONGNV Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.1.28
*/


#header{
/*     display: none !important; */
}
#main,
#wrapper{
     	background: transparent !important; 
}
/* Body Background - từ thiết kế Screen-1 */
body {
/*      background: #FFFFFF url("/wp-content/uploads/2026/06/image-26.png") no-repeat left top !important; 
     background-size: cover !important; 
     background-attachment: fixed !important;  */

    /*background: transparent !important;*/
    min-height: 100vh;
    font-family: 'Fahkwang', sans-serif !important;
}
/* Đảm bảo body hoặc wrap chính của theme trong suốt để thấy được nền */

#main .entry-header {
    display: none !important;
}
 .icon-inner:has(.fa-circle){
    padding-top: 3px;
}

/* Tab pill design - match Screen-1 */
.row-tab-group .tab-group-custom .nav-line{
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    border-radius: 100px;
    padding: 6px;
    display: inline-flex;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
    /*overflow-x: auto;*/
    overflow: hidden;
    flex-wrap: nowrap;
    gap: 16px;
    height: 60px;
    align-items: center;
}
.row-tab-group .tab-group-custom .nav-line-bottom>li>a:before, 
.row-tab-group .tab-group-custom .nav-line-grow>li>a:before, 
.row-tab-group .tab-group-custom .nav-line>li>a:before{
    display: none !important;
}
.row-tab-group .tab-group-custom .nav-line .tab {
    width: auto;
    flex-shrink: 0;
    white-space: nowrap;
}
.row-tab-group .tab-group-custom .nav-line .tab a {
    width: auto;
    border-radius: 100px;
    padding: 12px 24px;
    color: #FFF;
    font-family: 'Fahkwang', sans-serif;
    font-size: 14px;
    font-weight: 400;
    transition: all 0.3s ease;
}
.row-tab-group .tab-group-custom .nav-line .tab.active a {
    background: #FFF;
    color: #1C274C;
    transition: all 0.3s ease;
}

/* Section title underline */
.page-homepage .section-title-line {
    border: none;
    height: 0;
    border-bottom: 3px solid var(--primary-color);
}

/* Contact list items */
.page-homepage .contact-item {
    padding: 12px;
    gap: 16px;
}

/* featured_box icon color */
.page-homepage .featured-box .icon-box-img svg,
.page-homepage .featured-box .icon-box-img i {
    color: var(--primary-color) !important;
}

/* Tab icon SVG alignment */
@media (max-width: 991px) {
    .tab-group-custom {
        text-align: left;
    }
    .row-tab-group .tab-group-custom .nav-line {
        justify-content: flex-start;
        /*overflow: hidden;*/
    }
    /*.row-tab-group .tab-group-custom{
        overflow: hidden;
    }*/
}
.row-tab-group .tab-group-custom .tab a svg {
    vertical-align: middle;
    margin-right: 6px;
}
.page-wrapper, 
.entry-content{
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
#content{
    padding: 48px 0 0 0 !important;
}
@media (min-width:992px) {
    #content{
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }
}
.featured-box{
	.icon-box-text{
		display: flex;
    	align-items: center;
	}
	.icon-box-left .icon-box-img+.icon-box-text{
		
	}
}
.tab-group-custom{
	.tab-panels{
		padding-top: 2rem;
	}
}
@media (min-width: 992px) {
    .row-tab-group .tab-group-custom .nav-line .tab a {
        font-size: 16px;
    }
    #content{
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }
    
    /* Missing desktop responsive helper classes */
    .p-lg-12:not(.col), .p-lg-12 > .col-inner { padding: calc(var(--bs-spacer) * 3.0) !important; }
    .pt-lg-12:not(.col), .pt-lg-12 > .col-inner { padding-top: calc(var(--bs-spacer) * 3.0) !important; }
    .pb-lg-12:not(.col), .pb-lg-12 > .col-inner { padding-bottom: calc(var(--bs-spacer) * 3.0) !important; }
    .p-lg-8:not(.col), .p-lg-8 > .col-inner { padding: calc(var(--bs-spacer) * 2.0) !important; }

    .mb-lg-12:not(.col), .mb-lg-12 > .col-inner { margin-bottom: calc(var(--bs-spacer) * 3.0) !important; }
    .mt-lg-12:not(.col), .mt-lg-12 > .col-inner { margin-top: calc(var(--bs-spacer) * 3.0) !important; }

    .rounded-lg-6:not(.col), .rounded-lg-6 > .col-inner { border-radius: calc(var(--bs-spacer) * 1.5) !important; }
}
/* Khóa container nền cố định dưới cùng toàn trang */
.mesh-gradient-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -9999; /* Đẩy lùi hẳn về sau cùng làm nền */
    background-color: #0055ff;
    overflow: hidden;
    filter: blur(80px);
    opacity: 0.85;
    pointer-events: none; /* Tránh cản trở việc click chuột vào menu/nút trên web */
}

.mesh-ball {
    position: absolute;
    border-radius: 50%;
    mix-blend-mode: screen;
}

.mesh-ball-1 {
    width: 45vw;
    height: 45vw;
    background: radial-gradient(circle, #00f2fe 0%, rgba(0,242,254,0) 70%);
    top: -10%;
    left: 10%;
/*     animation: meshMove1 12s infinite alternate ease-in-out; */
	animation: meshMove1 4s infinite alternate ease-in-out;
}

.mesh-ball-2 {
    width: 50vw;
    height: 50vw;
    background: radial-gradient(circle, #0022aa 0%, rgba(0,34,170,0) 70%);
    bottom: -20%;
    right: 10%;
/*     animation: meshMove2 15s infinite alternate ease-in-out; */
	animation: meshMove2 5s infinite alternate ease-in-out;
}

.mesh-ball-3 {
    width: 35vw;
    height: 35vw;
    background: radial-gradient(circle, #00c6ff 0%, rgba(0,198,255,0) 70%);
    bottom: 10%;
    left: -10%;
/*     animation: meshMove3 10s infinite alternate ease-in-out; */
	animation: meshMove3 3.5s infinite alternate ease-in-out;
}

.mesh-ball-4 {
    width: 35vw;
    height: 35vw;
    background: radial-gradient(circle, #081250 0%, rgba(8,18,80,0) 70%);
    top: 20%;
    right: -10%;
/*     animation: meshMove4 14s infinite alternate ease-in-out; */
	animation: meshMove4 4.5s infinite alternate ease-in-out;
}

@keyframes meshMove1 {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(5vw, 5vh) scale(1.2); }
    100% { transform: translate(-3vw, 10vh) scale(0.9); }
}
@keyframes meshMove2 {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-5vw, -5vh) scale(0.8); }
    100% { transform: translate(4vw, -2vh) scale(1.1); }
}
@keyframes meshMove3 {
    0% { transform: translate(0, 0); }
    50% { transform: translate(7vw, -4vh); }
    100% { transform: translate(2vw, 2vh); }
}
@keyframes meshMove4 {
    0% { transform: translate(0, 0); }
    50% { transform: translate(-4vw, 5vh); }
    100% { transform: translate(-8vw, -2vh); }
}


.blurred-border > .col-inner{
    box-shadow: inset 0px 0px 4px 0px rgba(255, 255, 255, 0.5);
}
.title-working-experiences .icon-box-text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 0.75rem !important;
}
/* --- Group 2636 --- */
.star-container {
  position: relative;
  width: 22px;
  height: 22px;
  margin-right: 12px; /* Khoảng cách đến chữ */
  flex-shrink: 0;     /* Ép ngôi sao không bị bóp méo khi text dài */
  
  /* Inside auto layout */
  flex: none;
  order: 0;
  flex-grow: 0;
}

/* --- Ellipse 59 (Vòng hào quang màu xanh) --- */
.star-glow-ambient {
  position: absolute;
  width: 22px;
  height: 22px;
  left: 0; /* Đưa về 0 để không làm phình khung container gây rớt dòng */
  top: 0;
  background: #00E337;
  border-radius: 50%;
  filter: blur(3.2px);
  
  animation: figmaPulseGlow 2s infinite ease-in-out;
  transform-origin: center;
}

/* --- Ellipse 58 (Tâm sáng hình tròn màu trắng) --- */
.star-glow-core {
  position: absolute;
  width: 11px;
  height: 11px;
  /* Định vị chính xác vào GIỮA TÂM của vòng xanh mà không bị lệch pixel nào */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  
  background: #DFFFE7;
  border-radius: 50%;
  
  animation: figmaPulseCore 2s infinite ease-in-out;
  transform-origin: center;
}

/* --- KEYFRAMES HOẠT HỌA MƯỢT MÀ --- */
@keyframes figmaPulseGlow {
  0%, 100% {
    opacity: 0.4;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1.25);
  }
}

@keyframes figmaPulseCore {
  0%, 100% {
    opacity: 0.6;
    /* Giữ nguyên vị trí giữa tâm khi nhấp nháy */
    transform: translate(-50%, -50%) scale(0.9); 
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

/* Project card gap: override Flatsome row-small from ~20px to 16px */
.row-small > .col,
.row-small > .flickity-viewport > .flickity-slider > .col {
  padding-left: 8px;
  padding-right: 8px;
}

/* Hide default Magnific Popup close button for our inline lightboxes */
.mfp-container.mfp-inline-holder + .mfp-close {
  display: none !important;
}

/* Custom close button inside lightbox */
.lightbox-by-id {
  position: relative !important;
}
.lightbox-close-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  font-family: 'Fahkwang', sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 21px !important;
  color: #fff !important;
  z-index: 1;
}
.mfp-container{
    padding: 16px !important;
}