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

/*************** ADD CUSTOM CSS HERE.   ***************/

/* Scroll Top - BEM */
.xc-scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: -15px;
  z-index: 99999;
  background-color: #065cc2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: all 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.xc-scroll-top svg {
  color: #ffffff;
  width: 24px;
  height: 24px;
  fill: #ffffff;
}

.xc-scroll-top:hover {
  background-color: rgba(6, 92, 194, 0.85);
  /* Slightly transparent accent color */
  transform: translateY(-3px);
}

.xc-scroll-top--active {
  visibility: visible;
  opacity: 1;
  bottom: 15px;
}

/* Hero Section - BEM Style */
.xc-hero {
  padding-top: 120px !important;
  padding-bottom: 120px !important;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex !important;
  align-items: center;
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: #314862;
}

/* Background pseudo-element */
.xc-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("/wp-content/themes/flatsome-child/assets/img/bg/abstract-bg-1.webp") no-repeat center center;
  background-size: cover;
  opacity: 0.08;
  z-index: 0;
  pointer-events: none;
}

.xc-hero__content {
  position: relative;
  width: 100%;
}

.xc-hero__title {
  font-family: "Quicksand", sans-serif;
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  line-height: 1.2;
  color: #13447f;
}

/* Typed Effect Styles */
.typed-cursor {
  opacity: 1;
  color: #065cc2;
}

.typed-cursor.typed-cursor--blink {
  animation: typedjsBlink 0.7s infinite;
  -webkit-animation: typedjsBlink 0.7s infinite;
}

@keyframes typedjsBlink {
  50% {
    opacity: 0.0;
  }
}

@-webkit-keyframes typedjsBlink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.0;
  }

  100% {
    opacity: 1;
  }
}

.xc-hero__highlight {
  color: #065cc2;
  position: relative;
}

.xc-hero__lead {
  font-size: 1.2rem;
  color: rgba(49, 72, 98, 0.8);
  margin-bottom: 3rem;
  line-height: 1.6;
}

.xc-hero__stats {
  display: flex;
  gap: 2rem;
  margin-bottom: 3rem;
}

.xc-hero__stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.xc-hero__stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: #065cc2;
  line-height: 1;
}

.xc-hero__stat-number .count-up {
  color: #065cc2;
}

.xc-hero__stat-label {
  font-size: 0.9rem;
  color: rgba(49, 72, 98, 0.6);
  margin-top: 0.25rem;
}

.xc-hero__actions {
  display: flex;
  gap: 1rem;
  margin-bottom: 3rem;
}

.xc-hero__btn {
  padding: 12px 30px;
  font-weight: 600;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
  cursor: pointer;
  border: 2px solid transparent;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
}

.xc-hero__btn--primary {
  background-color: #065cc2;
  color: #ffffff;
  border-color: #065cc2;
}

.xc-hero__btn--primary:hover {
  background-color: transparent !important;
  color: #065cc2 !important;
  border-color: #065cc2;
}

.xc-hero__btn--outline {
  background-color: transparent;
  color: #314862;
  border-color: rgba(49, 72, 98, 0.3);
}

.xc-hero__btn--outline:hover {
  background-color: #065cc2 !important;
  color: #ffffff !important;
  border-color: #065cc2;
}

/* Social Links Override for Hero Section */
.xc-hero__social-links .social-icons {
  display: flex;
  gap: 1rem;
}

.xc-hero__social-links .icon {
  width: 45px !important;
  height: 45px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background-color: #ffffff !important;
  color: #314862 !important;
  text-decoration: none;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 10px rgba(49, 72, 98, 0.1) !important;
  border: none !important;
  margin: 0 !important;
}

.xc-hero__social-links .icon i {
  font-size: 1.2rem !important;
}

.xc-hero__social-links .icon:hover {
  background-color: #065cc2 !important;
  color: #ffffff !important;
  transform: translateY(-3px);
}

/* Main Image */
.xc-hero__main-image .img-inner {
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(49, 72, 98, 0.15);
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.xc-hero__image-wrapper {
  position: relative;
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
}

.xc-hero__image-overlay {
  position: absolute;
  top: 20px;
  left: 20px;
  right: -20px;
  bottom: -20px;
  background: linear-gradient(45deg, #065cc2, rgba(6, 92, 194, 0.7));
  border-radius: 20px;
  z-index: 1;
}

.xc-hero__floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
}

.xc-hero__floating-card {
  position: absolute;
  background-color: #ffffff;
  padding: 15px 20px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(49, 72, 98, 0.1);
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  animation: xc-hero-float 6s ease-in-out infinite;
}

.xc-hero__floating-card i {
  font-size: 1.5rem;
  color: #065cc2;
}

.xc-hero__floating-card span {
  font-weight: 600;
  color: #314862;
}

.xc-hero__floating-card--1 {
  top: 10%;
  left: -10%;
  animation-delay: 0s;
}

.xc-hero__floating-card--2 {
  top: 60%;
  right: -15%;
  animation-delay: 2s;
}

.xc-hero__floating-card--3 {
  bottom: 15%;
  left: -5%;
  animation-delay: 4s;
}

@keyframes xc-hero-float {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .xc-hero {
    padding: 60px 0 !important;
    min-height: auto;
  }

  .xc-hero__content {
    margin-bottom: 3rem;
    text-align: center;
  }

  /* Center items on mobile */
  .xc-hero__stats,
  .xc-hero__actions,
  .xc-hero__social-links {
    justify-content: center;
  }

  .xc-hero__image-wrapper {
    padding: 0 20px;
  }
}

@media (max-width: 768px) {
  .xc-hero__title {
    font-size: 2.8rem;
  }

  .xc-hero__floating-card--1 {
    top: 5%;
    left: -5%;
  }

  .xc-hero__floating-card--2 {
    top: 70%;
    right: -5%;
  }

  .xc-hero__floating-card--3 {
    bottom: 10%;
    left: 0%;
  }

  .xc-hero__floating-card {
    padding: 10px 15px;
    font-size: 0.9rem;
  }

  .xc-hero__floating-card i {
    font-size: 1.2rem;
  }
}

@media (max-width: 576px) {
  .xc-hero__title {
    font-size: 2.2rem;
  }

  .xc-hero__stats,
  .xc-hero__actions {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }

  .xc-hero__floating-card--1 {
    left: 0;
  }

  .xc-hero__floating-card--2 {
    right: 0;
  }
}

@media only screen and (max-width: 48em) {
  /*************** ADD MOBILE ONLY CSS HERE  ***************/

}

/* About Section - BEM Style & Override */
.xc-about {
  background-color: #ffffff;
  padding: 60px 0;
}

.xc-section-title-wrapper {
  padding-bottom: 60px;
  position: relative;
  text-align: left !important;
}

.xc-section-title-wrapper h2 {
  font-size: 36px;
  font-weight: 700;
  padding: 0;
  line-height: 1px;
  margin: 0;
  letter-spacing: 0.5px;
  position: relative;
  text-transform: none;
  /* override flatsome potentially */
  color: #13447f;
}

.xc-section-title-wrapper h2::after {
  content: "";
  width: 120px;
  height: 1px;
  display: inline-block;
  background: #065cc2;
  margin: 10px 10px;
}

.xc-section-title-wrapper p {
  color: rgba(49, 72, 98, 0.6);
  margin: 5px 0 0 0;
  font-size: 16px;
  font-weight: 500;
  font-family: inherit;
}

/* =============== FONT BI ICON =============== */
@font-face {
  font-display: block;
  font-family: "bootstrap-icons";
  src: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/fonts/bootstrap-icons.woff2?856008caa5eb66df1d59c71d50117827") format("woff2"),
    url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/fonts/bootstrap-icons.woff?856008caa5eb66df1d59c71d50117827") format("woff");
}

.bi::before,
[class*=" bi-"]::before {
  display: inline-block;
  font-family: "bootstrap-icons" !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.bi-camera::before {
  content: "\f220";
}

.bi-code-slash::before {
  content: "\f2c6";
}

.bi-palette::before {
  content: "\f4b1";
}

.bi-cloud::before {
  content: "\f2c1";
}

.bi-diagram-3::before {
  content: "\f2ee";
}

.bi-people::before {
  content: "\f4d0";
}

.bi-server::before {
  content: "\f52c";
}

.bi-trophy::before {
  content: "\f5e7";
}

.bi-briefcase::before {
  content: "\f1cc";
}

.bi-mortarboard::before {
  content: "\f6fe";
}

.bi-arrow-right::before {
  content: "\f138";
}

.bi-cloud-arrow-up::before {
  content: "\f297";
}

.bi-cpu::before {
  content: "\f2d6";
}

.bi-gear::before {
  content: "\f3e5";
}

.bi-graph-up::before {
  content: "\f3f2";
}

.bi-shield-check::before {
  content: "\f52f";
}

.bi-stack::before {
  content: "\f585";
}

.bi-star-fill::before {
  content: "\f586";
}

.bi-star-half::before {
  content: "\f587";
}

.bi-grid-3x3::before {
  content: "\f3fa";
}

.bi-arrows-angle-expand::before {
  content: "\f14a";
}

.bi-calendar-check::before {
  content: "\f1e2";
}

.bi-buildings::before {
  content: "\f87d";
}

.bi-link-45deg::before {
  content: "\f470";
}

.bi-clipboard-data::before {
  content: "\f28c";
}

.bi-exclamation-diamond::before {
  content: "\f335";
}

.bi-award::before {
  content: "\f154";
}

.bi-stars::before {
  content: "\f589";
}

.bi-check2-circle::before {
  content: "\f270";
}

.bi-chevron-right::before {
  content: "\f285";
}

.bi-geo-alt::before {
  content: "\f3e8";
}

.bi-telephone::before {
  content: "\f5c1";
}

.bi-envelope::before {
  content: "\f32f";
}

/* =============== CỘT TRÁI: ẢNH VÀ CHỮ KÝ =============== */

/* Định dạng Avatar thông qua class image của Flatsome */
.xc-about__img-about {
  width: 280px !important;
  height: 280px !important;
  margin: 0 auto 40px auto !important;
  border-radius: 50% !important;
  border: 5px solid #065cc2 !important;
  box-shadow: 0 10px 30px rgba(6, 92, 194, 0.2) !important;
}

.xc-about__img-about .img-inner {
  border-radius: 50% !important;
  overflow: hidden !important;
  height: 100% !important;
}

.xc-about__img-about img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Định dạng Chữ ký */
.xc-about__img-sign {
  max-width: 200px !important;
  margin: 0 auto 15px auto !important;
  transition: opacity 0.3s ease;
}

.xc-about__img-sign:hover {
  opacity: 0.8;
}

/* Đoạn chữ giới thiệu mờ mờ ở dưới */
.xc-about_sign-text {
  font-style: italic;
  color: rgba(49, 72, 98, 0.7);
  font-size: 14px;
  margin: 0 auto;
  max-width: 250px;
  text-align: center;
}

@media (max-width: 992px) {
  .xc-about__img-about {
    margin-bottom: 40px !important;
  }
}

@media (max-width: 768px) {
  .xc-about__img-about {
    width: 200px !important;
    height: 200px !important;
  }
}

/* =============== CỘT PHẢI: GIỚI THIỆU & SKILLS =============== */
.xc-about__intro {
  margin-bottom: 40px;
}

.xc-about__intro h3 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  font-weight: 700;
  color: #13447f;
}

.xc-about__intro p {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(49, 72, 98, 0.8);
}

@media (max-width: 768px) {

  .xc-about__intro h3,
  .xc-about__intro p {
    text-align: center;
  }
}

.xc-about__skills-grid {
  margin-bottom: 40px;
}

.xc-about__skill-item {
  text-align: center;
  padding: 20px;
  border-radius: 10px;
  background: rgba(6, 92, 194, 0.06);
  border: 1px solid rgba(6, 92, 194, 0.15);
  transition: all 0.3s ease;
  height: 100%;
}

.xc-about__skill-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(6, 92, 194, 0.15);
}

.xc-about__skill-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #065cc2;
  border-radius: 50%;
  color: #ffffff;
  font-size: 24px;
}

.xc-about__skill-item h4 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #13447f;
  font-weight: 600;
}

.xc-about__skill-item p {
  font-size: 14px;
  color: rgba(49, 72, 98, 0.7);
  margin: 0;
}

/* =============== TIMELINE =============== */
.xc-about__journey-timeline {
  margin-bottom: 40px;
}

.xc-about__timeline-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px;
  border-left: 3px solid #065cc2;
  background: #f8f9fa;
  border-radius: 0 8px 8px 0;
  transition: all 0.3s ease;
}

.xc-about__timeline-item:hover {
  background: rgba(6, 92, 194, 0.05);
  border-left-color: rgba(6, 92, 194, 0.9);
}

.xc-about__timeline-item:last-child {
  margin-bottom: 0;
}

.xc-about__year {
  font-weight: 700;
  color: #065cc2;
  font-size: 18px;
  min-width: 80px;
  margin-right: 20px;
}

.xc-about__description {
  color: rgba(49, 72, 98, 0.8);
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 576px) {
  .xc-about__timeline-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .xc-about__year {
    margin-right: 0;
    margin-bottom: 8px;
  }
}

/* =============== CTA FUN FACT =============== */
.xc-about__fun-fact {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  padding: 15px 25px;
  background: rgba(6, 92, 194, 0.06);
  border-radius: 50px;
  border: 1px solid rgba(6, 92, 194, 0.15);
}

.xc-about__emoji {
  font-size: 20px;
  margin-right: 10px;
  display: flex;
  align-items: center;
}

.xc-about__emoji img {
  margin: 0 !important;
  vertical-align: middle !important;
}

.xc-about__text {
  color: rgba(49, 72, 98, 0.8);
  font-size: 14px;
  font-weight: 500;
}

@media (max-width: 768px) {
  .xc-about__fun-fact {
    justify-content: center;
    text-align: center;
  }
}

/* =============== OVERRIDE BUTTONS & ROW =============== */
/* Ghi đè cấu trúc Grid Row/Col của Flatsome để 2 nút sát nhau */
.row.xc-about-btn {
  display: flex !important;
  justify-content: center !important;
  gap: 15px !important;
  max-width: 100% !important;
}

.row.xc-about-btn .col {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

.row.xc-about-btn .col-inner {
  margin: 0 !important;
  width: auto !important;
}

@media (max-width: 576px) {
  .row.xc-about-btn {
    flex-direction: column !important;
    align-items: center !important;
  }
}

/* Ghi đè triệt để CSS Button mặc định của Flatsome */
.xc-about__btn-view,
.xc-about__btn-download {
  padding: 12px 30px !important;
  font-weight: 600 !important;
  border-radius: 50px !important;
  transition: all 0.3s ease !important;
  font-size: 15px !important;
  width: auto !important;
  max-width: none !important;
  min-height: auto !important;
  line-height: normal !important;
  margin: 0 !important;
  text-transform: none !important;
  /* Xóa viết hoa mặc định */
  letter-spacing: normal !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Nút Primary */
.xc-about__btn-view {
  background-color: #065cc2 !important;
  color: #ffffff !important;
  border: 2px solid #065cc2 !important;
}

.xc-about__btn-view:hover {
  background-color: #054a9c !important;
  border-color: #054a9c !important;
  transform: translateY(-2px);
}

.xc-about__btn-download {
  background-color: transparent !important;
  color: #065cc2 !important;
  border: 2px solid #065cc2 !important;
}

.xc-about__btn-download:hover {
  background-color: #065cc2 !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}

/* =============== SKILLS SECTION =============== */
.xc-skill__card {
  background: linear-gradient(135deg, #ffffff 0%, rgba(6, 92, 194, 0.05) 100%);
  border-radius: 15px;
  padding: 30px;
  height: 100%;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(6, 92, 194, 0.15);
  transition: all 0.3s ease;
}

.xc-skill__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #065cc2, #13447f);
}

.xc-skill__card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(6, 92, 194, 0.2);
  border-color: rgba(6, 92, 194, 0.4);
}

.xc-skill__header {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  gap: 15px;
}

.xc-skill__header i {
  font-size: 28px;
  color: #065cc2;
  width: 50px;
  height: 50px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(6, 92, 194, 0.1);
  border-radius: 12px;
}

.xc-skill__header h3 {
  font-size: 20px !important;
  margin: 0 !important;
  color: #13447f;
  font-family: inherit;
  font-weight: 700;
}

.xc-skill__item {
  margin-bottom: 20px;
}

.xc-skill__item:last-child {
  margin-bottom: 0;
}

.xc-skill__info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.xc-skill__name {
  font-weight: 600;
  color: #13447f;
  font-size: 15px;
}

.xc-skill__percentage {
  font-size: 14px;
  font-weight: 700;
  color: #065cc2;
}

.xc-skill__progress-bg {
  height: 6px;
  background: rgba(49, 72, 98, 0.08);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.xc-skill__progress-bar {
  height: 100%;
  background: linear-gradient(45deg, #065cc2, #13447f);
  border-radius: 10px;
  transition: width 1.8s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.xc-skill__progress-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: xc-skill-shimmer 2s infinite;
}

/* Skills Summary (Right Col) */
.xc-skill__summary {
  background: #ffffff;
  padding: 40px 30px;
  border-radius: 15px;
  height: fit-content;
  position: sticky;
  top: 20px;
  box-shadow: 0 10px 30px rgba(49, 72, 98, 0.1);
}

.xc-skill__summary h3 {
  color: #13447f;
  margin-bottom: 20px !important;
  font-size: 24px !important;
  font-weight: 700;
}

.xc-skill__summary p {
  color: rgba(49, 72, 98, 0.8);
  margin-bottom: 30px !important;
  line-height: 1.6;
}

.xc-skill__stats {
  margin-bottom: 30px;
}

.xc-skill__stat-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  gap: 15px;
}

.xc-skill__stat-item:last-child {
  margin-bottom: 0;
}

.xc-skill__stat-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #065cc2, #13447f);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.xc-skill__stat-circle i {
  color: #ffffff;
  font-size: 20px;
}

.xc-skill__stat-number {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: #13447f;
  line-height: 1;
}

.xc-skill__stat-label {
  font-size: 14px;
  color: rgba(49, 72, 98, 0.7);
}

.xc-skill__badges h4 {
  color: #13447f;
  margin-bottom: 15px !important;
  font-size: 18px !important;
  font-weight: 700;
}

.xc-skill__badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.xc-skill__badge {
  background: linear-gradient(45deg, #065cc2, #13447f);
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@keyframes xc-skill-shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

@media (max-width: 991px) {
  .xc-skill__summary {
    margin-top: 30px;
    position: relative;
    top: auto;
  }
}

@media (max-width: 767px) {
  .xc-skill__card {
    padding: 25px 20px;
  }

  .xc-skill__header {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  .xc-skill__header h3 {
    font-size: 18px !important;
  }

  .xc-skill__summary {
    padding: 30px 20px;
  }

  .xc-skill__stat-circle {
    width: 45px;
    height: 45px;
  }

  .xc-skill__stat-circle i {
    font-size: 18px;
  }

  .xc-skill__stat-number {
    font-size: 20px;
  }
}

/* =============== RESUME SECTION =============== */
.xc-resume {
  background-color: #ffffff;
  padding: 60px 0;
}

.xc-resume__header {
  margin-bottom: 2.5rem;
}

.xc-resume__header h2 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #13447f;
}

.xc-resume__header h2 i {
  color: #065cc2;
  font-size: 1.5rem;
}

.xc-resume__subtitle {
  color: rgba(49, 72, 98, 0.7);
  font-size: 1rem;
  line-height: 1.6;
}

/* Experience Box */
.xc-resume__experience {
  padding-right: 1.5rem;
}

.xc-resume__card {
  background: #ffffff;
  border: 1px solid rgba(49, 72, 98, 0.1);
  border-radius: 12px;
  padding: 1.8rem;
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.xc-resume__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(135deg, #065cc2, rgba(6, 92, 194, 0.3));
}

.xc-resume__card:hover {
  box-shadow: 0 8px 30px rgba(49, 72, 98, 0.15);
  transform: translateY(-5px);
}

.xc-resume__card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.xc-resume__card-header h3 {
  color: #13447f;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.xc-resume__card-header h4 {
  color: #065cc2;
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
}

.xc-resume__duration {
  background: rgba(6, 92, 194, 0.1);
  color: #065cc2;
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
}

.xc-resume__card-body p {
  color: rgba(49, 72, 98, 0.75);
  margin-bottom: 1rem;
  line-height: 1.6;
}

.xc-resume__achievements {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.xc-resume__achievements li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  color: rgba(49, 72, 98, 0.85);
  font-size: 0.9rem;
}

.xc-resume__achievements li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #065cc2;
  font-weight: bold;
}

.xc-resume__achievements li:last-child {
  margin-bottom: 0;
}

/* Education Timeline */
.xc-resume__education {
  padding-left: 1.5rem;
}

.xc-resume__timeline {
  position: relative;
}

.xc-resume__timeline-track {
  position: absolute;
  left: 1rem;
  top: 2rem;
  bottom: 2rem;
  width: 2px;
  background: linear-gradient(to bottom, #065cc2, rgba(6, 92, 194, 0.3));
}

.xc-resume__timeline-item {
  position: relative;
  padding-left: 3rem;
  margin-bottom: 2.5rem;
}

.xc-resume__timeline-item:last-child {
  margin-bottom: 0;
}

.xc-resume__timeline-marker {
  position: absolute;
  left: 0.5rem;
  top: 1.5rem;
  width: 1rem;
  height: 1rem;
  background: #065cc2;
  border: 3px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(6, 92, 194, 0.15);
}

.xc-resume__timeline-content {
  background: #ffffff;
  border: 1px solid rgba(49, 72, 98, 0.1);
  border-radius: 8px;
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.xc-resume__timeline-content:hover {
  box-shadow: 0 5px 20px rgba(49, 72, 98, 0.1);
}

.xc-resume__degree-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}

.xc-resume__degree-header h3 {
  color: #13447f;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}

.xc-resume__degree-header .xc-resume__year {
  background: #065cc2;
  color: #ffffff;
  padding: 0.3rem 0.7rem;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
}

.xc-resume__institution {
  color: rgba(6, 92, 194, 0.8);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.8rem;
}

.xc-resume__timeline-content p {
  color: rgba(49, 72, 98, 0.7);
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 992px) {

  .xc-resume__experience,
  .xc-resume__education {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 3rem;
  }

  .xc-resume__header h2 {
    font-size: 1.6rem;
  }

  .xc-resume__card-header {
    flex-direction: column;
    gap: 0.8rem;
  }

  .xc-resume__duration {
    align-self: flex-start;
  }

  .xc-resume__degree-header {
    flex-direction: column;
    gap: 0.5rem;
  }

  .xc-resume__degree-header .xc-resume__year {
    align-self: flex-start;
  }
}

@media (max-width: 576px) {
  .xc-resume__header h2 {
    font-size: 1.4rem;
  }

  .xc-resume__header h2 i {
    font-size: 1.2rem;
  }

  .xc-resume__card {
    padding: 1.3rem;
  }

  .xc-resume__timeline-track {
    left: 0.5rem;
  }

  .xc-resume__timeline-item {
    padding-left: 2rem;
  }

  .xc-resume__timeline-marker {
    left: 0;
  }
}

/* =============== SERVICES SECTION =============== */
.xc-services {
  padding: 60px 0;
  background-color: #ffffff;
}

.xc-services__item {
  height: 100%;
  padding: 2rem;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 5px 25px -5px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease-in-out;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(49, 72, 98, 0.05);
  display: flex;
  flex-direction: column;
}

.xc-services__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 0;
  background-color: #065cc2;
  transition: height 0.3s ease-in-out;
}

.xc-services__item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px -5px rgba(0, 0, 0, 0.08);
}

.xc-services__item:hover::before {
  height: 100%;
}

.xc-services__item:hover .xc-services__icon i {
  transform: scale(1.1) rotate(5deg);
  color: #065cc2;
}

.xc-services__item:hover .xc-services__link i {
  transform: translateX(5px);
}

.xc-services__icon {
  margin-bottom: 1.5rem;
}

.xc-services__icon i {
  font-size: 2.5rem;
  color: rgba(6, 92, 194, 0.85);
  transition: all 0.3s ease-in-out;
  display: inline-block;
}

.xc-services__item h3 {
  font-size: 1.5rem !important;
  margin-bottom: 1rem !important;
  font-weight: 600;
  color: #13447f;
}

.xc-services__item p {
  color: rgba(49, 72, 98, 0.75);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem !important;
  flex-grow: 1;
  /* Đẩy link xuống đáy nếu text ngắn dài khác nhau */
}

.xc-services__card-links {
  margin-top: auto;
}

.xc-services__link {
  display: inline-flex;
  align-items: center;
  color: #065cc2;
  font-weight: 500;
  font-size: 0.95rem;
  transition: color 0.3s ease;
  text-decoration: none !important;
}

.xc-services__link i {
  margin-left: 0.5rem;
  font-size: 1.1rem;
  transition: transform 0.3s ease;
}

.xc-services__link:hover {
  color: #054a9c;
}

/* Ẩn tất cả thẻ <br> sinh ra bởi trình soạn thảo wp trong block services */
.xc-services br {
  display: none !important;
}

/* =============== FOOTER SECTION =============== */
.section.xc-footer {
  background-color: #065cc2 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  padding: 40px 0 !important;
  position: relative;
  text-align: center;
}

.xc-footer__copyright {
  margin-bottom: 0 !important;
  color: #ffffff !important;
  font-size: 14px;
}

.xc-footer__follow {
  margin-top: 20px !important;
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 0 !important;
}

.xc-footer__follow a.icon.button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  font-size: 16px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin: 0 5px !important;
  transition: 0.3s !important;
  background-color: transparent !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  line-height: normal !important;
  box-shadow: none !important;
}

.xc-footer__follow a.icon.button:hover {
  color: #afcdf1 !important;
  border-color: #afcdf1 !important;
  background-color: transparent !important;
}

.xc-footer__follow a.icon.button i {
  color: inherit !important;
  margin: 0 !important;
}

.xc-footer__design {
  margin-top: 10px !important;
  font-size: 13px !important;
  text-align: center;
  color: #ffffff !important;
  margin-bottom: 0 !important;
}

.xc-footer__design a {
  color: #afcdf1 !important;
  text-decoration: none !important;
}

.xc-footer__design a:hover {
  color: rgba(175, 205, 241, 0.75) !important;
}

/* Ẩn absolute footer mặc định của Flatsome */
.absolute-footer {
  display: none !important;
}

/* Bỏ padding mặc định của Flatsome cho Content Area */
.entry-content {
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}

/* =============== CONTACT SECTION =============== */
.xc-contact {
  background-color: #f7faff !important;
  /* light background from original */
  padding: 60px 0;
}

/* Info Box */
.xc-contact__info-box {
  background-color: #065cc2;
  color: #ffffff;
  padding: 3rem;
  border-radius: 1rem;
  height: 100%;
}

@media (max-width: 992px) {
  .xc-contact__info-box {
    padding: 1.5rem;
  }
}

.xc-contact__info-box h3 {
  color: #ffffff !important;
  font-size: 2rem !important;
  margin-bottom: 1rem !important;
  font-weight: 700;
}

@media (max-width: 767.98px) {
  .xc-contact__info-box h3 {
    font-size: 1.75rem !important;
  }
}

.xc-contact__info-box>p {
  opacity: 0.8;
  margin-bottom: 2rem !important;
  color: #ffffff !important;
}

.xc-contact__info-item {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.xc-contact__info-item:last-child {
  margin-bottom: 0;
}

.xc-contact__icon-box {
  width: 3.5rem;
  height: 3.5rem;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: 0.3s;
}

.xc-contact__info-item:hover .xc-contact__icon-box {
  background-color: rgba(255, 255, 255, 0.3);
}

.xc-contact__icon-box i {
  font-size: 1.5rem;
  color: #ffffff;
}

.xc-contact__content h4 {
  color: #ffffff !important;
  font-size: 1.25rem !important;
  margin-bottom: 0.5rem !important;
  font-weight: 700;
}

.xc-contact__content p {
  margin-bottom: 0.25rem !important;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9) !important;
}

.xc-contact__content p:last-child {
  margin-bottom: 0 !important;
}

/* Contact Form Box (Gắn trực tiếp vào class của Col của Flatsome) */
.xc-contact-box>.col-inner,
.xc-contact__form-box {
  background-color: #ffffff;
  padding: 3rem;
  border-radius: 1rem;
  height: 100%;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

@media (max-width: 992px) {

  .xc-contact-box>.col-inner,
  .xc-contact__form-box {
    padding: 1.5rem;
  }
}

/* Đảm bảo ép 2 cột cao bằng nhau cho Flatsome, không ảnh hưởng đến Form bên trong */
.xc-contact>.section-content>.row:not(.xc-section-title) {
  align-items: stretch;
}

.xc-contact>.section-content>.row:not(.xc-section-title)>.col {
  display: flex;
}

.xc-contact>.section-content>.row:not(.xc-section-title)>.col>.col-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Reset lại cấu trúc cột cho form bên trong để input không bị co */
.xc-contact-form .col {
  display: block !important;
  width: 100%;
}

.xc-contact__info-box {
  flex-grow: 1;
}

.xc-contact-title h3 {
  font-size: 2rem !important;
  margin-bottom: 1rem !important;
  color: #13447f !important;
  font-weight: 700;
}

@media (max-width: 768px) {
  .xc-contact-title h3 {
    font-size: 1.75rem !important;
  }
}

.xc-contact-title p {
  color: rgba(49, 72, 98, 0.75) !important;
  margin-bottom: 2rem !important;
}

/* WPCF7 Form overrides with custom wrapper */
.xc-contact-form.row {
  margin-bottom: 0 !important;
}

.xc-contact-form .form-control {
  display: block;
  width: 100%;
  padding: 0.875rem 1.25rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #314862;
  background-color: #f7faff;
  background-clip: padding-box;
  border: 1px solid rgba(49, 72, 98, 0.1);
  border-radius: 0.5rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  box-shadow: none !important;
  height: auto !important;
  margin-bottom: 0 !important;
}

.xc-contact-form .form-control:focus {
  border-color: #065cc2 !important;
  outline: 0;
  box-shadow: none !important;
  background-color: #ffffff;
}

.xc-contact-form textarea.form-control {
  min-height: auto !important;
  height: 130px !important;
  /* Ghi đè rows="10" của wpcf7 để giảm chiều cao */
  resize: none;
}

/* Ẩn bộ nhãn `<br>` dư thừa của CF7 nếu có */
.xc-contact-form .wpcf7 br {
  display: none !important;
}

.xc-contact-form .wpcf7 p {
  margin-bottom: 0 !important;
}

/* Submit Button */
.xc-contact-form .btn {
  background-color: #065cc2 !important;
  color: #ffffff !important;
  padding: 1rem 2rem !important;
  border-radius: 2rem !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
  font-size: 1rem !important;
  font-weight: 500 !important;
  border: none !important;
  text-transform: none !important;
  margin: 1.5rem auto 0 auto !important;
}

.xc-contact-form .btn:hover {
  background-color: #054a9c !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* =============== FAQ SECTION =============== */
.xc-faq {
  padding: 60px 0;
  background-color: #ffffff;
}

.xc-accordion .accordion-item {
  background-color: #ffffff !important;
  position: relative !important;
  padding: 20px !important;
  margin-bottom: 15px !important;
  border: 1px solid rgba(49, 72, 98, 0.15) !important;
  border-radius: 5px !important;
  overflow: hidden;
  transition: 0.3s;
}

.xc-accordion .accordion-item:last-child {
  margin-bottom: 0 !important;
}

.xc-accordion .accordion-title {
  border-top: none !important;
  padding: 0 !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  margin: 0 30px 0 0 !important;
  transition: 0.3s !important;
  cursor: pointer !important;
  display: block !important;
  background-color: transparent !important;
  position: static !important;
  /* Để .toggle căn theo .accordion-item */
}

.xc-accordion .accordion-title span {
  color: #13447f !important;
}

.xc-accordion .accordion-title:hover span {
  color: #065cc2 !important;
}

.xc-accordion .accordion-title.active span {
  color: #065cc2 !important;
}

/* Khi accordion mở (có class active), đổi màu nền và viền */
.xc-accordion .accordion-item.active,
.xc-accordion .accordion-item:has(> .accordion-title.active) {
  background-color: rgba(6, 92, 194, 0.03) !important;
  border-color: rgba(6, 92, 194, 0.2) !important;
}

.xc-accordion .accordion-inner {
  padding: 10px 0 0 0 !important;
  border-top: none !important;
  color: rgba(49, 72, 98, 0.75) !important;
  background-color: transparent !important;
  font-size: 15px !important;
}

.xc-accordion .accordion-inner p {
  margin-bottom: 0 !important;
}

/* Căn chỉnh icon toggle / mũi tên */
.xc-accordion .toggle {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  left: auto !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: #13447f !important;
  opacity: 1 !important;
  transition: 0.3s !important;
  transform: none !important;
  /* Xóa xoay mặc định của Flatsome */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Xóa vị trí trôi lệch mặc định của Flatsome cho icon con */
.xc-accordion .toggle i {
  position: static !important;
  top: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: baseline !important;
}

/* Biến mũi tên xổ xuống mặc định thành chevron-right */
.xc-accordion .toggle i::before {
  content: "\f285" !important;
  font-family: "bootstrap-icons" !important;
  font-size: 16px !important;
  display: block !important;
  line-height: 1 !important;
}

.xc-accordion .accordion-title:hover .toggle {
  color: #065cc2 !important;
}

.xc-accordion .accordion-title.active .toggle {
  transform: rotate(90deg) !important;
  color: #065cc2 !important;
}

/* =============== TESTIMONIALS SECTION =============== */
.xc-testimonials {
  padding: 80px 0;
  overflow: hidden;
  background-color: #f7faff;
}

/* 1. Critic Reviews */
.xc-critic-review {
  background-color: #ffffff;
  padding: 30px;
  border-radius: 15px;
  position: relative;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  height: 100%;
  transition: transform 0.3s ease;
}

.xc-critic-review:hover {
  transform: translateY(-10px);
}

.xc-critic-review .review-quote {
  position: absolute;
  top: -20px;
  left: 20px;
  font-size: 80px;
  font-family: Georgia, serif;
  color: #065cc2;
  opacity: 0.2;
  line-height: 1;
}

.xc-critic-review .stars {
  margin-bottom: 15px;
  display: flex !important;
}

.xc-critic-review .stars i {
  color: #FFD700;
  margin-right: 3px;
  font-size: 18px;
  line-height: 1;
}

.xc-critic-review p {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 20px;
  color: rgba(49, 72, 98, 0.75);
  font-style: italic;
}

.xc-critic-review .critic-info .critic-name {
  font-weight: 600;
  color: #13447f;
  font-size: 16px;
}

/* Khử toàn bộ thẻ br tự động sinh khi copy code vào Flatsome */
.xc-testimonials br {
  display: none !important;
}

/* 2. Testimonial Item (Slider) */
.testimonial-item {
  background-color: #ffffff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  height: 100%;
  border-top: 3px solid #065cc2;
}

.testimonial-item .stars {
  margin-bottom: 15px;
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
}

.testimonial-item .stars i {
  color: #FFD700;
  margin-right: 3px;
  font-size: 16px;
  line-height: 1;
}

.testimonial-item>p {
  font-size: 15px;
  font-style: italic;
  margin-bottom: 20px;
  color: rgba(49, 72, 98, 0.75);
  line-height: 1.6;
}

.testimonial-item .testimonial-profile {
  display: flex;
  align-items: center;
}

.testimonial-item .testimonial-profile img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 4px solid rgba(6, 92, 194, 0.2);
  margin-right: 15px;
  object-fit: cover;
}

.testimonial-item .testimonial-profile h3 {
  font-size: 16px !important;
  font-weight: 600 !important;
  margin: 0 0 5px !important;
  color: #13447f !important;
}

.testimonial-item .testimonial-profile h4 {
  font-size: 14px !important;
  color: rgba(49, 72, 98, 0.7) !important;
  margin: 0 !important;
  font-weight: normal !important;
}

/* Ẩn <p> rỗng thừa tự sinh của WordPress Editor trong Testimonial slider */
.testimonial-item p:empty,
.testimonial-profile>p {
  display: none !important;
}

/* 3. Overall Rating */
.xc-overall-rating {
  background-color: #ffffff;
  padding: 40px;
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  display: inline-block;
  text-align: center;
}

.xc-overall-rating .rating-number {
  font-size: 48px;
  font-weight: 700;
  color: #13447f;
  line-height: 1;
  margin-bottom: 10px;
}

.xc-overall-rating .rating-stars {
  margin-bottom: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.xc-overall-rating .rating-stars i {
  color: #FFD700;
  font-size: 22px;
  margin: 0 3px;
}

.xc-overall-rating>p {
  color: rgba(49, 72, 98, 0.75);
  font-size: 15px;
  margin-bottom: 15px;
}

.xc-overall-rating .rating-platforms {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
}

.xc-overall-rating .rating-platforms span {
  font-size: 14px;
  color: #065cc2;
  background-color: rgba(6, 92, 194, 0.1);
  padding: 5px 15px;
  border-radius: 20px;
}

/* Responsive adjustments */
@media (max-width: 992px) {

  .xc-critic-review,
  .testimonial-item {
    margin-bottom: 30px;
  }
}

@media (max-width: 768px) {
  .xc-testimonials {
    padding: 60px 0;
  }

  .xc-overall-rating {
    padding: 30px;
  }

  .xc-overall-rating .rating-number {
    font-size: 36px;
  }

  .xc-overall-rating .rating-stars i {
    font-size: 18px;
  }
}

/* 4. Testimonial Slider Pagination (Dots) */
.xc-testimonials .flickity-page-dots {
  position: relative !important;
  bottom: auto !important;
  margin-top: 15px !important;
  margin-bottom: 40px !important;
  padding: 0 !important;
  text-align: center !important;
  left: 0 !important;
}

.xc-testimonials .flickity-page-dots .dot {
  width: 10px !important;
  height: 10px !important;
  background-color: rgba(6, 92, 194, 0.3) !important;
  border: none !important;
  opacity: 1 !important;
  border-radius: 5px !important;
  margin: 0 4px !important;
  transition: all 0.3s ease !important;
}

.xc-testimonials .flickity-page-dots .dot.is-selected {
  background-color: #065cc2 !important;
  width: 20px !important;
  border-radius: 10px !important;
}

/* =============== PORTFOLIO SECTION =============== */
.xc-portfolio .portfolio-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  padding: 0;
  margin: 0 0 40px;
  list-style: none;
}

.xc-portfolio .portfolio-filters li {
  font-size: 15px;
  font-weight: 500;
  padding: 12px 25px;
  cursor: pointer;
  background: #ffffff;
  color: rgba(49, 72, 98, 0.75);
  border-radius: 30px;
  display: flex !important;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  margin-bottom: 0 !important;
}

.xc-portfolio .portfolio-filters li i {
  font-size: 1.1em;
  transition: transform 0.3s ease;
}

.xc-portfolio .portfolio-filters li:hover {
  color: #065cc2;
  transform: translateY(-2px);
  background: rgba(6, 92, 194, 0.08);
}

.xc-portfolio .portfolio-filters li:hover i {
  transform: scale(1.1);
}

.xc-portfolio .portfolio-filters li.filter-active {
  background: #065cc2;
  color: #ffffff;
}

@media (max-width: 768px) {
  .xc-portfolio .portfolio-filters {
    gap: 10px;
  }

  .xc-portfolio .portfolio-filters li {
    padding: 8px 20px;
    font-size: 14px;
  }
}

.xc-portfolio .portfolio-entry {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
}

.xc-portfolio-container .portfolio-item {
  padding-bottom: 30px !important;
}

.xc-portfolio .portfolio-entry .entry-image {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4/3;
  width: 100%;
}

.xc-portfolio .portfolio-entry .entry-image img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.xc-portfolio .portfolio-entry .entry-image .entry-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
  display: flex;
  align-items: flex-end;
  padding: 30px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.xc-portfolio .portfolio-entry .entry-image .entry-overlay .overlay-content {
  width: 100%;
  transform: translateY(20px);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.xc-portfolio .portfolio-entry .entry-image .entry-overlay .entry-meta {
  color: #065cc2;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.xc-portfolio .portfolio-entry .entry-image .entry-overlay .entry-title {
  color: #ffffff;
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 20px;
}

.xc-portfolio .portfolio-entry .entry-image .entry-overlay .entry-links {
  display: flex;
  gap: 15px;
}

.xc-portfolio .portfolio-entry .entry-image .entry-overlay .entry-links a {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: #065cc2;
  border-radius: 12px;
  font-size: 20px;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(20px);
}

.xc-portfolio .portfolio-entry .entry-image .entry-overlay .entry-links a:hover {
  background: #065cc2;
  color: #ffffff;
  transform: translateY(-2px);
}

.xc-portfolio .portfolio-entry .entry-image .entry-overlay .entry-links a:nth-child(1) {
  transition-delay: 0.1s;
}

.xc-portfolio .portfolio-entry .entry-image .entry-overlay .entry-links a:nth-child(2) {
  transition-delay: 0.2s;
}

.xc-portfolio .portfolio-entry:hover .entry-image img {
  transform: scale(1.05);
}

.xc-portfolio .portfolio-entry:hover .entry-image .entry-overlay {
  opacity: 1;
  transform: translateY(0);
}

.xc-portfolio .portfolio-entry:hover .entry-image .entry-overlay .overlay-content {
  transform: translateY(0);
}

.xc-portfolio .portfolio-entry:hover .entry-image .entry-overlay .entry-links a {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 768px) {
  .xc-portfolio .portfolio-entry .entry-image .entry-overlay {
    padding: 20px;
  }

  .xc-portfolio .portfolio-entry .entry-image .entry-overlay .entry-title {
    font-size: 20px;
    margin-bottom: 15px;
  }

  .xc-portfolio .portfolio-entry .entry-image .entry-overlay .entry-links a {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}

@media (min-width: 1200px) {
  .xc-portfolio .portfolio-item .entry-title {
    font-size: 20px;
  }

  .xc-portfolio .entry-overlay {
    padding: 25px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .xc-portfolio .entry-overlay {
    padding: 20px;
  }
}

@media (max-width: 991px) {
  .xc-portfolio .entry-overlay {
    padding: 20px;
  }
}

/* Fix Flatsome Row Width limit inside Portfolio */
.xc-portfolio-container .row {
  max-width: 100% !important;
  width: auto !important;
}

/* =============== PORTFOLIO SINGLE =============== */
.xc-single-portfolio.light-background {
  --background-color: #f7faff;
  --surface-color: #ffffff;
}

.xc-single-portfolio .page-title {
  color: #13447f;
  background-color: #f7faff;
  padding: 25px 0 25px 0;
  position: relative;
  margin-bottom: 40px;
}

.xc-single-portfolio .page-title h1 {
  font-size: 24px;
  font-weight: 700;
  color: #13447f;
}

.xc-single-portfolio .page-title .breadcrumbs {
  font-size: 14px;
  font-weight: 400;
  display: flex;
  align-items: center;
}

.xc-single-portfolio .page-title .breadcrumbs a {
  color: rgba(49, 72, 98, 0.7);
}

.xc-single-portfolio .page-title .breadcrumbs .current {
  color: #065cc2;
}

.xc-single-portfolio .page-title .breadcrumbs .divider {
  padding: 0 8px;
  color: rgba(49, 72, 98, 0.4);
}

.portfolio-details-media {
  position: relative;
}

.portfolio-details-media .main-image {
  margin-bottom: 1rem;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.portfolio-details-media .thumbnail-grid img {
  height: 80px;
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.portfolio-details-media .thumbnail-grid img:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.portfolio-details-media .tech-stack-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 1.5rem;
}

.portfolio-details-media .tech-stack-badges span {
  display: inline-block;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 20px;
  background-color: rgba(49, 72, 98, 0.15);
  color: #314862;
  transition: all 0.3s ease;
}

.portfolio-details-media .tech-stack-badges span:hover {
  background-color: rgba(49, 72, 98, 0.3);
  transform: translateY(-2px);
}

.portfolio-details-content {
  padding: 0 0 0 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

@media (max-width: 991px) {
  .portfolio-details-content {
    padding: 2rem 0 0 0;
  }
}

.portfolio-details-content .project-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  align-items: center;
}

.portfolio-details-content .project-meta .badge-wrapper .project-badge {
  display: inline-block;
  padding: 8px 16px;
  background-color: rgba(6, 92, 194, 0.1);
  color: #065cc2;
  border-radius: 30px;
  font-weight: 600;
  font-size: 14px;
}

.portfolio-details-content .project-meta .date-client {
  display: flex;
  gap: 1.5rem;
}

.portfolio-details-content .project-meta .date-client .meta-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: rgba(49, 72, 98, 0.7);
}

.portfolio-details-content .project-meta .date-client .meta-item i {
  margin-right: 6px;
  color: #065cc2;
}

.portfolio-details-content .project-title {
  font-size: 2.2rem;
  margin-bottom: 1rem;
  font-weight: 700;
  line-height: 1.2;
  color: #13447f;
}

.portfolio-details-content .project-website {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.portfolio-details-content .project-website i {
  font-size: 22px;
  color: #065cc2;
  margin-right: 8px;
}

.portfolio-details-content .project-website a {
  font-weight: 500;
  transition: all 0.3s;
  color: #065cc2;
}

.portfolio-details-content .project-website a:hover {
  letter-spacing: 0.5px;
}

.portfolio-details-content .project-overview {
  margin-bottom: 2.5rem;
}

.portfolio-details-content .project-overview .lead {
  font-size: 1.1rem;
  line-height: 1.7;
  color: rgba(49, 72, 98, 0.85);
  margin-bottom: 1.5rem;
}

.portfolio-details-content .project-features {
  margin-bottom: 2.5rem;
}

.portfolio-details-content .project-features h3 {
  font-size: 1.25rem;
  margin-bottom: 1.2rem;
  color: #13447f;
  display: flex;
  align-items: center;
}

.portfolio-details-content .project-features h3 i {
  margin-right: 10px;
  color: #065cc2;
  font-size: 1.1em;
}

.portfolio-details-content .project-features .feature-list-wysiwyg ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0px;
}

.portfolio-details-content .project-features .feature-list-wysiwyg ul li {
  display: flex;
  align-items: flex-start;
  padding: 8px 0;
  font-size: 15px;
  color: rgba(49, 72, 98, 0.85);
  margin-left: 0;
  break-inside: avoid;
}

.portfolio-details-content .project-features .feature-list-wysiwyg ul li i {
  display: none !important;
}

/* Tự động thêm icon tick check nếu tạo danh sách ul li thuần trong editor */
.portfolio-details-content .project-features .feature-list-wysiwyg ul li::before {
  content: "\f270";
  font-family: bootstrap-icons !important;
  color: #065cc2;
  margin-right: 10px;
  font-size: 1.1em;
  min-width: 15px;
}

.portfolio-details-content .cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: auto;
}

.portfolio-details-content .cta-buttons .btn-view-project {
  padding: 12px 28px;
  background-color: #065cc2;
  color: #ffffff;
  border-radius: 30px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.portfolio-details-content .cta-buttons .btn-view-project:hover {
  background-color: #044ba0;
  transform: translateY(-3px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.portfolio-details-content .cta-buttons .btn-next-project {
  padding: 12px 28px;
  background-color: rgba(19, 68, 127, 0.1);
  color: #13447f;
  border-radius: 30px;
  font-weight: 500;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.portfolio-details-content .cta-buttons .btn-next-project:hover {
  background-color: rgba(19, 68, 127, 0.2);
}

.portfolio-details-content .cta-buttons .btn-next-project:hover i {
  transform: translateX(3px);
}

/* Customized Accordion within Portfolio details */
.xc-single-portfolio .xc-accordion .accordion-item {
  border: none !important;
  background: none !important;
  margin-bottom: 10px;
}

.xc-single-portfolio .xc-accordion .accordion-title {
  padding: 15px 20px !important;
  font-weight: 600;
  font-size: 1rem;
  color: #13447f;
  background-color: rgba(6, 92, 194, 0.05);
  border-radius: 8px !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
}

.xc-single-portfolio .xc-accordion .accordion-title span {
  display: flex !important;
  align-items: center !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.xc-single-portfolio .xc-accordion .accordion-title span i.bi {
  display: flex !important;
  align-items: center !important;
  line-height: 1 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.xc-single-portfolio .xc-accordion .accordion-title .toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 12px 0 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: 24px !important;
  min-height: 0 !important;
  min-width: 0 !important;
  line-height: 1 !important;
}

.xc-single-portfolio .xc-accordion .accordion-title .toggle i {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  top: 0 !important;
}

.xc-single-portfolio .xc-accordion .accordion-title:hover {
  color: #065cc2;
  background-color: rgba(6, 92, 194, 0.1);
}

.xc-single-portfolio .xc-accordion .accordion-item.active .accordion-title {
  background-color: #ffffff;
  color: #065cc2;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.xc-single-portfolio .xc-accordion .accordion-title i {
  color: #13447f;
  transition: color 0.3s;
}

.xc-single-portfolio .xc-accordion .accordion-item.active .accordion-title i {
  color: #065cc2;
}

.xc-single-portfolio .xc-accordion .accordion-inner {
  padding: 20px;
  background-color: #ffffff;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border: none;
}

.xc-single-portfolio .xc-accordion .accordion-inner p {
  margin-bottom: 0;
  color: rgba(49, 72, 98, 0.75);
  line-height: 1.6;
}

/* =========================================================================
   Mobile Sidebar Menu (BootstrapMade Style) 
   ========================================================================= */

/* Đổi màu nền thanh sidebar mobile */
.off-canvas-right .mfp-content,
.off-canvas-left .mfp-content {
  background-color: #040b14;
  /* Nền tối */
}

/* Bỏ padding mặc định */
.mobile-sidebar {
  padding: 0 !important;
}

/* HTML Custom Profile Div (Bạn phải dán div này vào Header > HTML) */
.xc-mobile-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 20px 0;
}

.xc-mobile-profile .profile-img img {
  margin: 15px auto;
  display: block;
  width: 120px;
  height: 120px;
  object-fit: cover;
  border: 8px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
}

.xc-mobile-profile .logo {
  line-height: 1;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.xc-mobile-profile .logo .sitename {
  font-size: 24px;
  margin: 0;
  font-weight: 700;
  color: #fff;
  text-align: center;
}

/* Flatsome Social Icons trong Menu */
.mobile-sidebar .header-social-icons {
  padding: 0 0 20px 0 !important;
  text-align: center;
}

.mobile-sidebar .social-icons {
  justify-content: center;
}

.mobile-sidebar .social-icons a.icon {
  font-size: 16px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  margin: 0 4px;
  border-radius: 50%;
  width: 40px !important;
  height: 40px !important;
  transition: 0.3s;
  min-width: unset;
  border: none !important;
}

.mobile-sidebar .social-icons a.icon:hover {
  background: #065cc2 !important;
  /* Thay bằng màu chủ đạo */
  color: #fff !important;
}

/* Styling Items Menu */
.mobile-sidebar .nav-sidebar.nav-vertical {
  padding: 10px 0;
  border: none;
}

.mobile-sidebar .nav-sidebar.nav-vertical>li {
  border-top: none !important;
}

.mobile-sidebar .nav-sidebar.nav-vertical li a {
  color: #a8a9b4;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 500;
  text-transform: none;
  /* Trả về chữ thường, ko bắt in hoa */
  transition: 0.3s;
  letter-spacing: normal;
}

.mobile-sidebar .nav-sidebar.nav-vertical li a:hover,
.mobile-sidebar .nav-sidebar.nav-vertical li.current-menu-item>a {
  color: #fff;
}

/* Nút mũi tên sổ Dropdown (Toggle) */
.mobile-sidebar .nav-sidebar.nav-vertical li>.toggle {
  color: #a8a9b4;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1;
  right: 20px;
  position: absolute;
  top: 6px;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  transition: 0.3s;
}

.mobile-sidebar .nav-sidebar.nav-vertical li>.toggle:hover {
  background-color: #065cc2;
  color: #fff;
}

.mobile-sidebar .nav-sidebar.nav-vertical li>.toggle i {
  font-size: 16px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0 !important;
}

/* Submenu / Dropdown */
.mobile-sidebar .nav-sidebar.nav-vertical li ul.children {
  background: rgba(0, 0, 0, 0.2);
  border: none;
  padding: 10px 0;
  margin: 0;
}

.mobile-sidebar .nav-sidebar.nav-vertical li ul.children li a {
  padding-left: 40px;
  font-size: 15px;
}

/* =========================================================================
   Header Customization (BootstrapMade Style: Only Fixed Icon) 
   ========================================================================= */

/* Ẩn hoàn toàn thanh ngang, màu nền, và Logo của Flatsome Header */
#header .logo,
#header .header-bg-container,
#header .header-search,
#header .nav-left,
#header .nav-center,
#header .flex-left,
#header .flex-center,
.header-wrapper .box-shadow {
  display: none !important;
}

/* Xoá sạch mọi kích thước của Header, biến nó thành lớp tàng hình */
.header-wrapper,
#masthead,
.header-main,
#header {
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Bỏ sticky của Header (ngăn nó xuất hiện hiệu ứng trượt cuộn) */
#header.has-sticky {
  position: absolute !important;
}

.header-wrapper.stuck {
  position: absolute !important;
  animation: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Chỉ giữ lại cấu trúc chứa nút Menu bên phải để click được */
#header {
  pointer-events: none;
  /* Cho phép click xuyên qua mảng header rỗng */
  z-index: 9998;
}

#header .flex-right {
  display: block !important;
}

#header .nav-right {
  margin: 0 !important;
}

/* Gắn chết Nút Hamburger Menu (.nav-icon) cố định ra góc màn hình */
#header .nav-icon.has-icon {
  position: fixed;
  top: 20px;
  right: 20px;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: auto;
  /* Kích hoạt lại click cho riêng nút này */
  z-index: 9999;
}

/* Tuỳ biến giao diện Nút Menu Toggle: Không viền, không nền giống bản gốc */
#header .nav-icon.has-icon a.is-small {
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  background-color: transparent !important;
  border: none !important;
  margin: 0 !important;
}

#header .nav-icon.has-icon a i.icon-menu {
  font-size: 32px !important;
  color: var(--nav-color, #45505b) !important;
  /* Dùng màu nav mặc định của BootstrapMade */
  margin: 0 !important;
  line-height: 1 !important;
  transition: 0.3s;
}

#header .nav-icon.has-icon a:hover i.icon-menu {
  color: var(--nav-hover-color, #065cc2) !important;
  /* Dùng màu xanh dương chuẩn theo accent khi hover */
}

/* Biến tấu Nút Tắt (Close Button) của Flatsome dạt ra bên ngoài Sidebar */
.mfp-wrap.off-canvas-right .mfp-close {
  position: fixed !important;
  top: 20px !important;
  right: 310px !important;
  /* Bằng chiều rộng Sidebar (300px) + xíu margin */
  width: 40px !important;
  height: 40px !important;
  color: #fff !important;
  background-color: transparent !important;
  opacity: 1 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}

.mfp-wrap.off-canvas-right .mfp-close:hover {
  color: #065cc2 !important;
}

/* Thay thế nút Xặc mặc định của Flatsome bằng icon to (Tương tự bi-x 36px) */
.mfp-wrap.off-canvas-right .mfp-close svg {
  display: none !important;
}

.mfp-wrap.off-canvas-right .mfp-close::before {
  content: "\f62a";
  /* Mã của bootstrap-icons bi-x */
  font-family: bootstrap-icons !important;
  font-size: 36px !important;
}

@media (max-width: 360px) {
  .mfp-wrap.off-canvas-right .mfp-close {
    right: 250px !important;
    /* Thu nhỏ cho màn mobile cực bé nếu cần */
  }
}