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

/* --- KHAI BÁO FONT TỪ THƯ MỤC UPLOADS/FONTS --- */

/* 1. Font Thường (Regular) */
@font-face {
    font-family: 'SF Pro Display';
    src: url('https://innolabs.vn/wp-content/uploads/fonts/SF-Pro-Display-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* 2. Font Vừa (Medium) */
@font-face {
    font-family: 'SF Pro Display';
    src: url('https://innolabs.vn/wp-content/uploads/fonts/SF-Pro-Display-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* 3. Font Đậm (Bold) */
@font-face {
    font-family: 'SF Pro Display';
    src: url('https://innolabs.vn/wp-content/uploads/fonts/SF-Pro-Display-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* --- ÁP DỤNG FONT (Code cũ vẫn giữ nguyên) --- */
body, p, span, div, li, .box-text {
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 400; 
}

h1, h2, h3, h4, h5, h6, .section-title b, strong {
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 700; 
}

.nav > li > a, .button, input[type="submit"], .header-nav-main {
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 500; 
}

/* --- FIX LỖI ICON TRÊN ADMIN BAR --- */
#wpadminbar .ab-icon, 
#wpadminbar .ab-item:before, 
#wpadminbar .dashicons,
.dashicons {
    font-family: 'dashicons' !important;
}

/* Đảm bảo chữ trên thanh Admin vẫn dùng SF Pro cho đẹp (tùy chọn) */
#wpadminbar * {
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
}

/*************** ADD CUSTOM CSS HERE.   ***************/
/**
 * ======= Header Section =======
 */
.header-button .button {
  background: #1d72dc;
  color: #fff;
  border-radius: 999px !important;
  /* ghi đè inline style="border-radius:99px" */
  padding: 5px 26px;
  font-weight: 500;
}

/* Hover: nền trắng, viền + chữ xanh giống KMS */
.header-button .button:hover {
  background: white !important;
  color: #54bbed !important;
  border: 2px solid #1d59c8;
}

.header-button .button span::after {
  content: "\f061";
  /* icon arrow-right */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-left: 8px;
  font-size: 12px;
}

#header .header-main .container {
	max-width: 95%	
}

#header .header-main .container .nav {
	justify-content: center;
}

#header .header-main .container .nav > li {
	margin: 0 20px;
}

/**
 * ======= Banner Section =======
 */

/* Nền xanh cho hero */
.home .home-banner-container .banner-bg {
  background-color: #fff;
}


/**
 * ======= SECTION: Value Section (UPDATED) =======
 */

/* 2. Heading chính */
.value-heading {
  font-size: 42px;
  line-height: 1.3;
  font-weight: 600;
  color: #1c2733;
  margin: 0 0 24px;
}

/* Chữ highlight xanh */
.value-heading-highlight {
  color: #54bbed !important;
  font-weight: 700;
}

/* 3. Card hotline - SETUP CHUNG */
.value-hotline {
  background-color: #54bbed;
  color: #fff;
  padding: 24px 40px;
  border-radius: 24px 0 80px 24px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  font-size: 18px;
  z-index: 10; /* Đảm bảo nổi lên trên */
}

/* Dòng số điện thoại */
.value-hotline .phone {
  margin-top: 8px;
  margin-right: 5px;
}

/* Đường kẻ dài (Line) */
.value-hotline::after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 600px;
  height: 2px;
  background-color: #54bbed;
  display: block; /* Mặc định hiện */
}

/* Đoạn mô tả bên dưới */
.value-hotline + p {
  font-size: 16px;
  line-height: 1.7;
  color: #555;
  max-width: 540px;
}


/* =============================================
   4. LOGIC RIÊNG CHO DESKTOP (> 850px)
   ============================================= */
@media (min-width: 850px) {
  .value-hotline {
    position: absolute; /* Bay tự do */
    top: 230px;
    left: -250px;       /* Đè sang cột bên trái */
    width: auto;        /* Kích thước tự nhiên */
  }
	.innolabs-theme-top-week-top-button-right .text-center{
		text-align:end;
	}
  .innolabs-theme-showcase-text-left .text-center {
    text-align: start ;
}
  /* Đảm bảo cột chứa text có position relative để làm mốc tọa độ */
  .home .section .col-inner {
    position: relative; 
  }
	.innolabs-theme-top-week .section-title{justify-content: start;}

}

/* =============================================
   5. LOGIC RIÊNG CHO MOBILE & TABLET (< 850px)
   ============================================= */
@media (max-width: 849px) {
  
  /* Xử lý thứ tự hiển thị: Ảnh -> Hotline -> Heading -> Text */
  /* Bước 1: Biến cột chứa Text thành Flex container dọc */
  .home .section .col-inner {
    display: flex;
    flex-direction: column;
  }

  /* Bước 2: Đẩy Hotline lên đầu cột (ngay dưới ảnh của cột trước) */
  /* Hoặc nếu bạn muốn Hotline nằm dưới Heading thì xóa dòng order: -1 này đi */
  /* Tuy nhiên bạn yêu cầu "kế bên dưới là cho ô xanh hotline" nên ta dùng order */
  .value-hotline {
    position: relative; /* Trả về vị trí thực */
    top: auto;
    left: auto;
    width: 100%;       /* Full chiều ngang màn hình */
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 15px; /* Bo góc nhỏ hơn cho mobile */
    order: -1; /* -> Nếu muốn nó nằm TRÊN chữ "Chúng tôi mang..." thì uncomment dòng này */
  }

  /* Bước 3: Ẩn cái đường kẻ dài đi vì mobile không đủ chỗ */
  .value-hotline::after {
    display: none; 
  }

  /* Chỉnh lại heading text mobile cho gọn */
  .value-heading {
    font-size: 32px; /* Giảm size chữ tiêu đề */
    text-align: center; /* Căn giữa cho đẹp */
  }

  /* Căn giữa text mô tả */
  .value-hotline + p {
    text-align: justify;
    padding: 0 10px;
  }
  
  /* Căn giữa nội dung trong Hotline */
  .value-hotline .tt-hot,
  .value-hotline .phone {
      text-align: center;
  }
}
/**
 * ======= Service Section =======
 */

.services-heading {
  font-size: 40px;
  line-height: 1.3;
  font-weight: 700;
  color: #111;        /* màu đen cho dòng dưới */
  margin: 0;
}

.services-heading-highlight {
  display: inline-block;
  color: #1ca4ff;     /* xanh cho chữ “Dịch vụ” */
  margin-bottom: 4px; /* tí khoảng cách với dòng dưới */
}

/* Custom nút "Tất cả dịch vụ" màu xanh riêng */
.btn-service-blue {
    /* Màu chữ và viền mặc định */
    color: #1d72dc !important;
    border: 2px solid #1ca4ff !important; /* Viền dày 2px cho cứng cáp */
}

/* Fix màu cho icon mũi tên bên trong */
.btn-service-blue i {
    color: #1ca4ff !important;
}

/* Hiệu ứng khi di chuột (Hover) */
.btn-service-blue:hover {
    background-color: #1ca4ff !important; /* Nền xanh */
    color: #ffffff !important;            /* Chữ trắng */
    border-color: #1ca4ff !important;
    box-shadow: 0 4px 15px rgba(28, 164, 255, 0.4); /* Đổ bóng xanh cho đẹp */
}

/* Fix màu icon khi hover thành trắng */
.btn-service-blue:hover i {
    color: #ffffff !important;
}

/* =========================================
   PARTNER LOGO SCROLL (PHIÊN BẢN UX BUILDER)
   ========================================= */

/* 1. Xử lý khung cuộn (Áp dụng vào Cột chứa Gallery) */
.partner-scroll-column > .col-inner {
    max-height: 420px; /* Chiều cao tối đa, vượt quá sẽ cuộn */
    overflow-y: auto;  /* Tạo thanh cuộn dọc */
    overflow-x: hidden;
    padding: 15px !important; /* Chừa lề để bóng đổ không bị cắt */
    background-color: transparent;
}

/* 2. Biến các ô Gallery thành dạng Card (App Icon) */
.partner-scroll-column .gallery-item {
    padding-bottom: 10px !important; /* Khoảng cách dọc giữa các ô */
    padding-left: 5px !important;
    padding-right: 5px !important;
}

/* Can thiệp sâu vào div chứa ảnh của Flatsome */
.partner-scroll-column .gallery-item .col-inner {
    background-color: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 16px; /* Bo góc tròn như icon app */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* Đổ bóng nhẹ */
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    aspect-ratio: 1/1; /* Ép buộc thành hình vuông */
    padding: 12px;     /* Khoảng cách từ ảnh đến viền */
    transition: all 0.3s ease;
}

/* Hiệu ứng khi di chuột vào ô */
.partner-scroll-column .gallery-item .col-inner:hover {
    transform: translateY(-5px); /* Bay lên */
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
    border-color: #1ca4ff; /* Viền xanh */
    z-index: 2;
}

/* 3. Xử lý ảnh logo bên trong */
.partner-scroll-column .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: contain !important; /* Ảnh nằm gọn, không bị cắt */
    margin: 0 !important;
}

/* 4. Trang trí Thanh Cuộn (Custom Scrollbar) */
.partner-scroll-column > .col-inner::-webkit-scrollbar {
    width: 6px;
}

.partner-scroll-column > .col-inner::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
    margin: 10px 0;
}

.partner-scroll-column > .col-inner::-webkit-scrollbar-thumb {
    background-color: #3da9f4; /* Màu xanh */
    border-radius: 10px;
}

/* RESPONSIVE MOBILE */
@media (max-width: 550px) {
    /* Trên mobile chỉnh lại chiều cao khung cuộn cho vừa mắt */
    .partner-scroll-column > .col-inner {
        max-height: 350px;
    }
}

/* --- HIỆU ỨNG LỚP PHỦ NÂNG CẤP --- */

/* 1. Trạng thái mặc định: Làm mờ nội dung bên trong item */
.partner-scroll-column .gallery-item .col-inner {
    filter: grayscale(100%); 
    opacity: 0.5; /* Độ mờ mặc định */
    transition: all 0.4s ease !important;
}

/* 2. Khi hover vào CHÍNH NÓ: Hiện rõ 100%, có màu, giữ nguyên khung trắng */
.partner-scroll-column .gallery-item:hover .col-inner {
    filter: grayscale(0%);
    opacity: 1 !important;
    border-color: #1ca4ff; /* Giữ lại viền xanh của bạn */
    transform: translateY(-8px) scale(1.05); /* Bay lên và to ra một chút */
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

/* 3. Hiệu ứng cộng hưởng: Khi rê chuột vào vùng Gallery, 
   những thằng KHÔNG được hover sẽ bị mờ hẳn đi */
.partner-scroll-column:hover .gallery-item:not(:hover) .col-inner {
    opacity: 0.2;
    filter: grayscale(100%) blur(0.5px);
    transform: scale(0.95); /* Thu nhỏ nhẹ những cái xung quanh */
}

/**
 * ======= Class custom-animate Section =======
 */
.custom-animate {
    opacity: 0;
    will-change: transform, opacity;
    transition: all 0s;
}

.custom-animate.fade-up {
    transform: translateY(50px);
}

.custom-animate.fade-left {
    transform: translateX(-50px);
}

.custom-animate.fade-right {
    transform: translateX(50px);
}

.custom-animate.zoom-in {
    transform: scale(0.8);
}

.custom-animate.start {
    opacity: 1;
    transform: translate(0, 0) !important;
    transition: all 1s ease-out;
}

/**
 * ======= About Us Contact Section =======
 */
.banner-mask {
    background-color: #245DB3;
    -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTA3NyIgaGVpZ2h0PSIyMjUiIHZpZXdCb3g9IjAgMCAxMDc3IDIyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwNTcgMEMxMDY4LjA1IDEuMzM2ODNlLTA1IDEwNzcgOC45NTQzMSAxMDc3IDIwVjIwNUMxMDc3IDIxNi4wNDYgMTA2OC4wNSAyMjUgMTA1NyAyMjVIMjBDOC45NTQzMiAyMjUgMi42MTc0N2UtMDcgMjE2LjA0NiAwIDIwNVY3OEMwIDY2Ljk1NDMgOC45NTQzMSA1OCAyMCA1OEgzMC4xNzc3QzQxLjIyMzIgNTcuOTk5NyA1MC4xNzc3IDQ5LjA0NTUgNTAuMTc3NyAzOFYyMEM1MC4xNzc3IDguOTU0MyA1OS4xMzIgMCA3MC4xNzc3IDBIMTA1N1oiIGZpbGw9IiMyNDVEQjMiLz4KPC9zdmc+Cg==');
    mask-image: url('data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTA3NyIgaGVpZ2h0PSIyMjUiIHZpZXdCb3g9IjAgMCAxMDc3IDIyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwNTcgMEMxMDY4LjA1IDEuMzM2ODNlLTA1IDEwNzcgOC45NTQzMSAxMDc3IDIwVjIwNUMxMDc3IDIxNi4wNDYgMTA2OC4wNSAyMjUgMTA1NyAyMjVIMjBDOC45NTQzMiAyMjUgMi42MTc0N2UtMDcgMjE2LjA0NiAwIDIwNVY3OEMwIDY2Ljk1NDMgOC45NTQzMSA1OCAyMCA1OEgzMC4xNzc3QzQxLjIyMzIgNTcuOTk5NyA1MC4xNzc3IDQ5LjA0NTUgNTAuMTc3NyAzOFYyMEM1MC4xNzc3IDguOTU0MyA1OS4xMzIgMCA3MC4xNzc3IDBIMTA1N1oiIGZpbGw9IiMyNDVEQjMiLz4KPC9zdmc+Cg==');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    padding: 50px 60px;
    color: #000000;
}

.banner-mask .col-inner {
    background: transparent !important;
}

@media (max-width: 767px) {
    .banner-mask {
        padding: 30px 20px;
    }
}

/**
===== Our Services Page ====
**/
/* 1. Container cha: Để sau này dễ chỉnh khoảng cách chung nếu cần */
.action-nav {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* 2. Các item con (Action Items) */
.action-nav__item {
    position: relative;
    padding: 10px 0; /* Padding rộng rãi cho dễ bấm */
    cursor: pointer;
    border-bottom: 1px solid rgba(0,0,0,0.08); /* Viền xám siêu mờ cho tinh tế */
    transition: all 0.3s ease;
}

/* 3. Title bên trong item */
.action-nav__title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: black !important;
    transition: color 0.3s ease;
}

/* 4. Tạo đường line cam (Pseudo-element) */
.action-nav__item::after {
    content: '';
    position: absolute;
    bottom: -1px; /* Đè lên border-bottom cũ */
    left: 0;
    width: 0%; 
    height: 3px; 
    background-color: #e04f47;
    transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Hiệu ứng chạy mượt hơn linear */
}

/* --- TRẠNG THÁI HOVER VÀ ACTIVE --- */
.action-nav__item:hover::after,
.action-nav__item.active::after {
    width: 100%;
}

.action-nav__item:hover .action-nav__title,
.action-nav__item.active .action-nav__title {
    color: #e04f47 !important;
}

/* =============================================
   HERO IMAGE STACK (FIXED PIXEL VERSION)
   ============================================= */

/* 1. KHUNG CHỨA CHUNG */
.hero-stack-container {
    position: relative !important;
    display: block;
    margin-top: 60px; 
    /* Set chiều cao cứng luôn để đảm bảo khung không bị lùn */
    min-height: 700px; 
}

/* 2. SETUP CƠ BẢN */
.hero-layer {
    position: absolute !important;
    margin: 0 !important;
    max-width: none !important;
    transition: all 0.3s ease;
}

.hero-layer .img-inner, 
.hero-layer img {
    width: 100%;
    height: auto;
    display: block;
}

/* =============================================
   ĐỊNH VỊ PIXEL CỨNG (DESKTOP > 1200px)
   ============================================= */

/* LAYER 1: HÌNH CHÍNH (Dashboard) */
.layer-main {
    z-index: 5;
    
    /* ÉP CỨNG KÍCH THƯỚC TO */
    width: 750px !important; 
    
    /* Căn giữa: Dùng calc để trừ đi một nửa kích thước cứng */
    top: 0px !important; 
    left: 50%;
    margin-left: -375px !important; /* -1/2 của 750px */
    transform: none !important; /* Bỏ transform để dùng margin cho chuẩn px */
}

/* LAYER 2: HÌNH NỀN XOAY TO */
.layer-bg-rotate-1 {
    z-index: 1;
    width: 600px !important;
    top: -50px !important; 
    right: -100px; /* Đẩy sang phải 100px */
    opacity: 0.6;
    animation: spin-right 60s linear infinite; 
}

/* LAYER 3: HÌNH NỀN XOAY NHỎ */
.layer-bg-rotate-2 {
    z-index: 2;
    width: 400px !important;
    top: 350px !important; 
    left: -50px;
    opacity: 0.5;
    animation: spin-left 50s linear infinite;
}

/* LAYER 4: CARD STATUS (Góc trái trên) */
.layer-card-status {
    z-index: 10;
    
    /* Set kích thước cứng cho to hẳn ra */
    width: 800px !important; 
    
    /* Đặt vị trí px cụ thể */
    top: 100px !important; 
    left: -80px !important; /* Bay ra ngoài mép trái 80px */
    
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15));
}

/* LAYER 5: CARD WATCH (Góc trái dưới) */
.layer-card-watch {
    z-index: 11;
    
    /* Set kích thước cứng */
    width: 500px !important;
    
    /* Đặt vị trí px cụ thể */
    top: 200px !important; 
    left: -40px !important; /* Bay ra ngoài mép trái 40px */
    
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15));
}

/* =============================================
   ANIMATIONS
   ============================================= */
@keyframes spin-right { 100% { transform: rotate(360deg); } }
@keyframes spin-left { 100% { transform: rotate(-360deg); } }
.floating-anim { animation: float-vertical 4s ease-in-out infinite; }
@keyframes float-vertical {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

/* =============================================
   RESPONSIVE (MEDIA QUERIES)
   Bắt buộc phải có vì ta đang set px cứng
   ============================================= */

/* Màn hình Laptop nhỏ (1024px - 1366px) */
@media (max-width: 1366px) {
    .hero-stack-container { min-height: 600px; }
    
    /* Thu nhỏ đồng loạt các thông số px khoảng 20% */
    .layer-main {
        width: 600px !important;
        margin-left: -300px !important;
    }
    .layer-card-status {
        width: 240px !important;
        top: 80px !important;
        left: -40px !important;
    }
    .layer-card-watch {
        width: 210px !important;
        top: 320px !important;
        left: -20px !important;
    }
    .layer-bg-rotate-1 { width: 500px !important; right: -50px; }
    .layer-bg-rotate-2 { width: 350px !important; }
}

/* Tablet dọc & Mobile (Dưới 768px) */
@media (max-width: 768px) {
    .hero-stack-container { 
        min-height: 400px; 
        margin-top: 40px;
    }
    
    /* Trên mobile thì nên cho về width 100% hoặc px nhỏ */
    .layer-main {
        width: 100% !important; /* Mobile thì cho full màn hình */
        margin-left: 0 !important;
        left: 0 !important;
    }
    
    .layer-bg-rotate-1, .layer-bg-rotate-2 { display: none !important; }
    
    .layer-card-status {
        width: 200px !important;
        top: 20px !important;
        left: -10px !important;
    }
    
    .layer-card-watch {
        width: 180px !important;
        top: 250px !important;
        left: 0px !important;
    }
	    
	.homepage-slider-bullet .flickity-viewport{
  height:300px !important;
}

.homepage-slider-bullet .row{
  min-height:300px;
}
	
}

/* =========================================
   SECTION: PAYMENT GATEWAYS
   ========================================= */

/* 1. CSS CHO PHẦN LIST BÊN PHẢI */
.payment-benefits-list {
    list-style: none !important; /* Bỏ dấu chấm tròn mặc định */
    
    /* QUAN TRỌNG: Dùng !important để ép nó về 0, thắng CSS mặc định của theme */
    padding-left: 0 !important; 
    margin-left: 0 !important; 
    margin-bottom: 0;
}

.payment-benefits-list li {
    position: relative;
    /* Giữ nguyên khoảng cách 35px để chừa chỗ cho icon check */
    padding-left: 35px; 
    margin-bottom: 15px;
    margin-left: 0 !important;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    line-height: 1.4; /* Thêm dòng này để icon căn giữa dòng đẹp hơn */
}

/* Phần tạo icon check giữ nguyên */
.payment-benefits-list li::before {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    /* Icon sẽ nằm sát mép trái (0px), tức là thẳng hàng với đoạn văn bên trên */
    left: 0; 
    width: 24px;
    height: 24px;
    background-color: #e04f47;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    /* Tinh chỉnh vị trí icon theo chiều dọc một chút nếu thấy lệch */
    top: 0px; 
}


/* 2. CSS CHO PHẦN ẢNH XẾP LỚP BÊN TRÁI */

/* Khung chứa chung */
.payment-stack-container {
    position: relative !important;
    /* Đặt chiều cao tối thiểu để chứa đủ ảnh */
    min-height: 500px; 
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Thiết lập chung cho các layer ảnh */
.payment-layer {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    /* Căn giữa tuyệt đối */
    transform: translate(-50%, -50%); 
    margin: 0 !important;
}

/* Tinh chỉnh riêng cho layer Logo (Layer trên) */
.layer-logos {
    z-index: 5; /* Nổi lên trên */
    /* Nếu muốn nó lệch một chút so với tâm, bạn có thể chỉnh margin ở đây.
       Ví dụ: margin-top: -20px; */
}

/* Tinh chỉnh riêng cho layer Solar (Layer nền) */
.layer-solar {
    z-index: 1; /* Nằm bên dưới */
    opacity: 0.8; /* Làm mờ nhẹ một chút nếu cần */
}


/* =========================================
   HIỆU ỨNG ANIMATION
   ========================================= */

/* Hiệu ứng Xoay tròn (Spin) */
.spin-anim {
    /* Xoay 1 vòng hết 60 giây, lặp vô tận, tốc độ đều */
    animation: spin-rotate 60s linear infinite; 
}

@keyframes spin-rotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Lưu ý: Phải giữ lại translate(-50%, -50%) trong keyframes để nó vẫn giữ vị trí căn giữa khi xoay */


/* Hiệu ứng Trôi nổi chậm (Floating Slow) */
.float-anim-slow {
    animation: float-vertical-slow 5s ease-in-out infinite !important;
}

@keyframes float-vertical-slow {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-20px); } /* Chỉ bay lên xuống, bỏ cái translate(-50%, -50%) đi */
    100% { transform: translateY(0px); }
}

/* 1. Tạo hiệu ứng bay lên bay xuống cho text box(Float) */
@keyframes custom-float-up-down {
    0%   { transform: translateY(0px); }      /* Ở giữa */
    25%  { transform: translateY(-15px); }    /* LÊN cao */
    75%  { transform: translateY(15px); }     /* XUỐNG thấp (xuống dưới mức 0) */
    100% { transform: translateY(0px); }      /* Về giữa */
}

/* Áp dụng vào class .text-inner nằm bên trong */
/* Lý do: Class .my-infinite-float nằm ở vỏ ngoài (đang bận làm bounceInDown) */
/* Nên ta phải target vào thằng con .text-inner để nó tự do bay nhảy */

.my-infinite-float .text-inner {
    animation: custom-float-up-down 4s ease-in-out infinite;
    will-change: transform; /* Giúp mượt hơn */
}

/* (Tùy chọn) Nếu muốn khi di chuột vào thì nó dừng lại cho dễ đọc */
.my-infinite-float:hover .text-inner {
    animation-play-state: paused;
}

/* 2. Tạo hiệu ứng xoay tròn cho text box	*/
@keyframes custom-float-loop {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.my-infinite-rotate .text-inner {
	animation: custom-float-loop 4s linear infinite;
	will-change: transform;
}


/* RESPONSIVE MOBILE */
@media (max-width: 767px) {
    .payment-stack-container {
        min-height: 350px; /* Giảm chiều cao trên mobile */
    }
    /* Trên mobile có thể giảm kích thước ảnh xuống */
    .layer-solar .img-inner { width: 80% !important; margin: 0 auto; }
    .layer-logos .img-inner { width: 70% !important; margin: 0 auto; }
}

/* =========================================
   AWARDS GRID SECTION
   ========================================= */

/* 1. Xử lý Layout 5 Cột (Desktop) */
@media (min-width: 850px) {
    .awards-grid .award-col {
        flex-basis: 20% !important; /* Ép chia 5 đều nhau */
        max-width: 20% !important;
    }
}

/* 2. Style cơ bản cho từng ô */
.award-item {
    position: relative;
    height: 250px; /* Chiều cao cố định của ô */
    border: 1px solid #eee; /* Viền mỏng */
    border-right: none; /* Bỏ viền phải để các ô ghép nhau không bị viền đôi */
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Ẩn phần nội dung trượt lên */
    transition: all 0.4s ease;
    cursor: pointer;
}

/* Kẻ lại viền phải cho ô cuối cùng */
.awards-grid .award-col:last-child .award-item {
    border-right: 1px solid #eee;
}

/* 3. Phần Logo và Tên (Luôn hiện) */
.award-logo {
    text-align: center;
    transition: all 0.4s ease;
    padding: 20px;
}
.award-logo .logo-name {
    margin-top: 15px;
    font-size: 16px;
    font-weight: 700;
    color: #333;
}

/* 4. Phần Thông tin ẩn (Slide Up) */
.award-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff; /* Nền trắng đè lên */
    padding: 20px;
    text-align: center;
    
    /* Ban đầu đẩy nó xuống đáy (ẩn đi) */
    transform: translateY(100%); 
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.award-info p { margin-bottom: 5px; font-weight: 600; color: #333; }
.award-info span { font-size: 13px; color: #54bbed; font-weight: bold; }


/* =========================================
   HIỆU ỨNG TƯƠNG TÁC (HOVER)
   ========================================= */

/* A. Hiệu ứng "Làm mờ người khác" */
/* Khi hover vào container cha (.awards-grid), làm mờ TẤT CẢ các item con */
.awards-grid:hover .award-item {
    opacity: 0.4; 
    filter: blur(2px); /* Làm mờ nhẹ cho nghệ */
    transform: scale(0.98); /* Thu nhỏ xíu */
}

/* Nhưng KHÔI PHỤC lại item chính chủ đang được hover */
.awards-grid .award-item:hover {
    opacity: 1;
    filter: blur(0);
    transform: scale(1); /* Trở về bình thường */
    z-index: 2; /* Nổi lên trên */
    box-shadow: 0 10px 40px rgba(0,0,0,0.1); /* Đổ bóng cho đẹp */
    border-color: transparent; /* Ẩn viền để bóng đổ đẹp hơn */
}

/* B. Hiệu ứng "Slide Up" */
/* Khi hover vào item, đẩy phần logo lên trên một chút */
.award-item:hover .award-logo {
    transform: translateY(-30px); /* Dịch logo lên nhường chỗ */
}

/* Khi hover vào item, trượt phần info từ dưới lên */
.award-item:hover .award-info {
    transform: translateY(0); /* Trở về vị trí gốc */
    opacity: 1;
}

/* =========================================
   APP DESIGN CARD (CORRECTED)
   ========================================= */

/* 1. Thiết lập Thẻ Card chính */
.app-design-card {
    position: relative; /* Làm mốc tọa độ */
    width: 100%;
    height: 550px; /* Chiều cao cố định của thẻ */
    border-radius: 24px; /* Bo góc thẻ */
    overflow: hidden; /* Cắt mọi thứ tràn ra ngoài thẻ */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); /* Đổ bóng nhẹ cho nổi */
}

/* 2. Background SVG */
.app-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.app-card-bg svg {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Đảm bảo SVG phủ kín thẻ */
    display: block;
}

/* 3. Tiêu đề (Nằm giữa thẻ) */
.app-card-title {
    position: relative;
    z-index: 2;
    font-size: 72px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1;
    text-align: center;
}

/* 4. Các phần tử trôi nổi (Định vị so với .app-design-card) */
.card-floater {
    position: absolute;
    z-index: 5;
}

/* --- Avatar (Góc phải trên) --- */
.float-avatar {
    top: 15%;
    right: 15%;
    animation: float-card 4s ease-in-out infinite;
}
.avatar-img img {
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.2);
}

/* --- Text mô tả (Góc trái dưới) --- */
.float-text {
    bottom: 40px;
    left: 40px;
    max-width: 350px; /* Giới hạn chiều rộng chữ */
    color: rgba(255,255,255,0.9);
    font-size: 15px;
    line-height: 1.5;
    text-align: left;
}

/* --- Button (Góc phải dưới) --- */
.float-btn {
    bottom: 40px;
    right: 40px;
}

.btn-app-talk {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 50px;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    background: rgba(255,255,255,0.1);
    transition: all 0.3s ease;
}

.btn-app-talk:hover {
    background: #fff;
    color: #5F014E; /* Màu chữ khi hover */
    border-color: #fff;
}
.btn-app-talk svg {
    transform: rotate(270deg); /* Mũi tên hướng xuống */
}

/* Animation nhẹ nhàng */
@keyframes float-card {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* RESPONSIVE */
@media (max-width: 767px) {
    .app-design-card { height: 450px; }
    .app-card-title { font-size: 42px; }
    
    .float-text {
        left: 20px; bottom: 80px; width: 90%; font-size: 13px;
    }
    .float-btn {
        right: 20px; bottom: 20px;
    }
    .float-avatar {
        top: 20px; right: 20px;
    }
}

/* =========================================
   TRUSTED BY SECTION (FLATSOME NATIVE)
   ========================================= */

/* 1. Biến cái Row thành cái hộp màu xanh */
.trusted-row-box {
    background-color: #f0f9ff; 
    border: 1px solid #bae6fd;
    border-radius: 12px; 
    padding: 20px 30px !important; /* Khoảng cách bên trong */
    
    /* Đảm bảo chiều cao các cột bên trong cân bằng */
    display: flex; 
    align-items: center;
}

/* 2. Chỉnh chữ "Trusted by" */
.trusted-label {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    display: block;
    white-space: nowrap;
}

/* 3. Tinh chỉnh Slider */
/* Đẩy slider sát vào lề để tận dụng không gian */
.trusted-row-box .col-inner {
    padding: 0 !important; 
}

/* Chỉnh logo mờ đi chút cho đẹp, hover vào thì rõ */
.trusted-row-box .ux-logo {
    opacity: 0.6;
    transition: opacity 0.3s;
    margin-bottom: 0 !important; /* Xóa margin thừa của Flatsome */
}

.trusted-row-box .ux-logo:hover {
    opacity: 1;
}

/* RESPONSIVE MOBILE */
@media (max-width: 768px) {
    .trusted-row-box {
        flex-direction: column; /* Xếp dọc */
        gap: 15px;
        padding: 20px;
        text-align: center;
    }
    
    /* Căn giữa chữ trên mobile */
    .trusted-row-box .col-inner {
        text-align: center !important;
        width: 100% !important;
        flex-basis: auto !important;
        max-width: 100% !important;
    }
}

/* --- SECTION & CARD STYLING --- */

/* 1. Xử lý khung Slider (Quan trọng nhất để không bị cắt đầu) */
.sv-final-slider .flickity-viewport {
    overflow: visible !important;
    padding-top: 50px !important; /* Chừa chỗ cho card bay lên */
    padding-bottom: 50px !important; /* Chừa chỗ cho dấu chấm */
    margin-bottom: 0 !important;
}

/* 2. Cấu trúc Card */
.sv-final-card {
    background: #fff;
    border: 1px solid #eef2f6;
    border-radius: 16px;
    padding: 30px 25px;
    height: 100%;
    /* Tạo khoảng cách giữa các ô bằng margin thay vì padding cột */
    margin: 0 15px; 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
}

/* 3. Hiệu ứng Hover (Bay lên + Đổi màu) */
.sv-final-card:hover {
    transform: translateY(-15px); /* Bay lên */
    background-color: #00cdc1; /* Màu xanh */
    border-color: #00cdc1;
    box-shadow: 0 20px 40px rgba(0, 205, 193, 0.3);
    z-index: 10;
}

/* Đổi màu nội dung khi hover */
.sv-final-card:hover h3,
.sv-final-card:hover p {
    color: #ffffff !important;
}

.sv-final-card:hover .icon-inner {
    background-color: #ffffff;
    transform: scale(1.1);
}

/* 4. Style nội dung bên trong */
.sv-final-card h3 {
    font-size: 19px;
    font-weight: 700;
    margin-top: 15px;
    margin-bottom: 10px;
    color: #1e293b;
    transition: color 0.3s;
}

.sv-final-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #64748b;
    margin-bottom: 0;
    transition: color 0.3s;
}

/* Icon box */
.icon-inner {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    background: transparent;
}

.business-column {
	height: 100% !important
}

/*		Inno Labs Footer		*/
/* 1. Cấu trúc Flexbox để xếp ngang */
.haravan-inline-form {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px; /* Khoảng cách giữa ô nhập và nút */
  max-width: 600px;
  margin: 0 auto;
}

/* 2. Chỉnh style ô nhập liệu (Màu xám) */
.haravan-inline-form .hf-input {
  flex-grow: 1; /* Tự giãn đầy khoảng trống */
	margin-top: 10px;
}

.haravan-inline-form input[type="text"] {
  background-color: rgba(255, 255, 255, 0.2); /* Màu nền xám/trong suốt */
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50px; /* Bo tròn viên thuốc */
  height: 50px;
  color: #fff; /* Chữ gõ vào màu trắng */
  margin-bottom: 0; /* Xóa margin mặc định của CF7 */
  padding-left: 20px;
}
/* Style cho placeholder (chữ gợi ý) */
.haravan-inline-form input::placeholder {
  color: #e0e0e0;
}

/* Nếu design gốc là ô xám đặc, chữ đen (như ảnh bác gửi) thì dùng đoạn này thay thế đoạn trên: */
.haravan-inline-form input[type="text"] {
    background-color: #ffff;
    color: #333;
    border: none;
    border-radius: 8px; /* Bo nhẹ hoặc 50px nếu thích tròn hẳn */
    height: 50px;
    margin-bottom: 0;
}
.haravan-inline-form input::placeholder {
  color: #555;
}


/* 3. Chỉnh style nút bấm (Màu trắng, icon xanh) */
.haravan-inline-form .hf-submit-btn {
  background-color: #fff;
  color: #333;
  border: none;
  border-radius: 50px;
  height: 50px;
  padding: 0 25px 0 5px; /* Padding lệch để chứa icon */
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 0px !important;
}

/* Icon tròn màu xanh bên trong nút */
.haravan-inline-form .hf-icon {
  background-color: #1852f3; /* Xanh Haravan */
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 0;
}

/* Thêm đoạn này để SVG luôn chuẩn size */
.haravan-inline-form .hf-icon svg {
  width: 18px; 
  height: 18px;
  stroke-width: 2.5px; /* Độ đậm của mũi tên, chỉnh số này nếu muốn đậm hơn */
}

.haravan-inline-form .hf-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* 4. Responsive cho Mobile (Xếp dọc lại cho dễ bấm) */
@media (max-width: 550px) {
  .haravan-inline-form {
    flex-direction: column;
    width: 80%;
  }
  .haravan-inline-form .hf-input, 
  .haravan-inline-form .hf-submit-btn {
    width: 100%;
  }
  .haravan-inline-form .hf-submit-btn {
    justify-content: space-between; /* Ra giữa */	  
    padding: 0 10px;
	padding-right: 25px;
  }
}

/* Table of Contents */

.ez-toc-widget-container ul li a:hover {
    color: blue !important; /* đổi màu chữ cho dễ đọc */
}

/* Career page */
/* Container chính cho các box bên phải */
.stats-container {
  position: relative;
  min-height: 400px; /* Đảm bảo đủ chiều cao để chứa các box */
  width: 100%;
  max-width: 500px; /* Giới hạn chiều rộng để không bị loãng */
}

/* Style chung cho các Box */
.stat-box {
  background: #fff;
  border-radius: 12px;
  padding: 20px 30px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* Đổ bóng nhẹ */
  position: absolute; /* Để có thể di chuyển tự do */
  z-index: 2;
  transition: transform 0.3s ease;
  min-width: 200px;
}

.stat-box:hover {
  transform: translateY(-5px); /* Hiệu ứng bay lên khi hover */
}

.stat-box h3 {
  margin: 0;
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.2;
}

.stat-box p {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: #555;
}

/* --- Tinh chỉnh từng Box --- */

/* 1. Box Pink (30%) - Nằm giữa, lệch trái đè lên ảnh */
.box-pink {
  border: 2px solid #e91e63; /* Màu hồng */
  color: #e91e63;
  top: 50% !important;
  left: -80px !important; /* Kéo sang trái để đè lên ảnh */
  transform: translateY(-50%); /* Căn giữa theo chiều dọc */
}
/* Fix lại hover cho box pink vì nó có transform gốc */
.box-pink:hover {
   transform: translateY(-50%) translateY(-5px);
}

/* 2. Box Purple (2x) - Nằm trên cùng bên phải */
.box-purple {
  border: 2px solid #673ab7; /* Màu tím */
  color: #673ab7;
  top: 30px;
  right: 50px;
}

/* 3. Box Blue (2M) - Nằm dưới cùng bên phải, nền xanh */
.box-blue {
  background: #007bff; /* Màu xanh dương */
  color: #fff;
  bottom: 30px;
  right: 80px;
  border: none;
}
.box-blue p {
  color: rgba(255,255,255,0.9);
}

/* --- Responsive Mobile (Dưới 850px) --- */
/* Trên mobile thì không nên để bay lung tung, nên xếp chồng lên nhau */
@media (max-width: 849px) {
  .stats-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-height: auto;
    padding: 20px;
  }

  .stat-box {
    position: relative; /* Bỏ absolute để nó nằm theo dòng */
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100%;
  }
}

/* Contact Us Page */
.contact-banner .banner-layers container {
	max-width: 1200px;
}

/*		Inno Labs Contact Form Detail		*/
/* --- 1. Reset Box-Sizing (QUAN TRỌNG NHẤT) --- */
/* Đảm bảo Padding không làm phình kích thước Input */
.custom-flat-form, 
.custom-flat-form * {
    box-sizing: border-box;
}

.custom-flat-form {
    background: #fff;
    padding: 20px;
    max-width: 100%;
	border-radius:25px;
}

/* --- 2. Hệ thống Grid bằng Flexbox (Chuẩn Bootstrap) --- */
.custom-flat-form .form-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;  /* Kéo lùi ra ngoài để triệt tiêu padding cột */
    margin-right: -10px; 
    margin-bottom: 20px;
}

.custom-flat-form .form-col {
    padding-left: 10px;  /* Tạo rãnh giữa các cột */
    padding-right: 10px;
    width: 50%;          /* Mặc định desktop chiếm 50% */
}

/* Cột full-width (Textarea) */
.custom-flat-form .form-col.full-width {
    width: 100%;
}

/* --- 3. Style Input & Textarea --- */
.custom-flat-form label {
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
    font-size: 14px;
    color: #222;
}

.custom-flat-form .required {
    color: #d93025;
}

.custom-flat-form input[type="text"],
.custom-flat-form input[type="email"],
.custom-flat-form input[type="tel"],
.custom-flat-form textarea {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 12px 15px;
    font-size: 15px;
    outline: none;
    color: #333;
    transition: border-color 0.2s;
    
    /* FIX YÊU CẦU CỦA BẠN: Chỉ cho phép kéo giãn theo chiều dọc */
    resize: vertical; 
    min-height: 50px; /* Chiều cao tối thiểu để không bị kéo quá bé */
}

.custom-flat-form input:focus,
.custom-flat-form textarea:focus {
    border-color: #2058bb;
    box-shadow: 0 0 0 3px rgba(32, 88, 187, 0.1);
}

/* --- 4. Style Nút Submit --- */
.custom-flat-form .form-submit-row {
    text-align: center; /* Căn giữa nút */
    width: 100%;
}

.custom-flat-form input[type="submit"] {
    background-color: #2058bb !important;
    color: white !important;
/*     border: 2px solid #2058bb; */
    border-radius: 50px;
/*     padding: 1px 50px !important; */
	padding:4px 0px;
	width:100%!important;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 10px;
/*     width: auto; /* Desktop nút gọn */ */
}

.custom-flat-form input[type="submit"]:hover {
    background-color: #2058bb !important;
    color: #fff !important;
}

/* --- 5. Responsive Mobile --- */
@media (max-width: 768px) {
	
	
    .custom-flat-form .form-col {
        width: 100%; /* Mobile về 1 cột 100% */		
    }
    
    .custom-flat-form .form-row {
        margin-bottom: 10px; /* Giảm khoảng cách hàng trên mobile */
    }

    .custom-flat-form input[type="submit"] {
        width: 100%; /* Mobile nút full */
    }
}

/*		Job Sidebar Block		*/
.job-sidebar-btn {
	background-color: #54bbed !important;
}

/*		Inno Labs Apply Job		*/
/* 1. Style Tiêu đề có gạch xanh */
.job-form-title {
    border-left: 5px solid #3498db; /* Màu xanh dương */
    padding-left: 15px;
    font-weight: bold;
    margin-bottom: 25px;
    color: #000;
}

/* 2. Layout chia 2 cột (Flexbox) */
.job-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* Khoảng cách giữa 2 cột */
}

.job-col-left, .job-col-right {
    flex: 1; /* Chia đều 50-50 */
    min-width: 300px; /* Đảm bảo ko bị co quá nhỏ trên mobile */
}

/* 3. Style cho các ô Input */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
    border: 1px solid #ddd;
    border-radius: 10px;
    height: 45px;
    margin-bottom: 15px;
}

/* 4. Hack giao diện nút Upload (Khó nhất) */
.upload-box-wrapper {
    position: relative;
    border: 2px dashed #ccc;
    border-radius: 6px;
    padding: 30px 20px;
    text-align: center;
    background: #fafafa;
    margin-bottom: 10px;
    cursor: pointer;
}

.upload-box-wrapper:hover {
    border-color: #3498db;
    background: #f0f8ff;
}

/* Làm trong suốt nút chọn file mặc định và phủ lên toàn bộ khung */
.custom-file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 10;
    cursor: pointer;
}

.upload-text-hint {
    color: #555;
    font-weight: 500;
}

.file-note {
    font-size: 12px;
    color: #888;
    margin-top: 5px;
}

/* Nút Submit màu xám bo tròn như hình */
input.wpcf7-submit {
    border-radius: 50px !important;
    background-color: #e0e0e0 !important; /* Màu xám */
    color: #333 !important;
    font-weight: bold;
    border: none;
    margin-top: 15px;
}
input.wpcf7-submit:hover {
    background-color: #d6d6d6 !important;
}

/*		Job Application Form		*/
/* Container chính */
.upload-box-wrapper {
    position: relative;
    border: 2px dashed #ccc;
    background: #fafafa;
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.3s;
    cursor: pointer; /* Hiển thị ngón tay để biết click được */
}

/* Ẩn input file gốc của CF7 đi */
.upload-box-wrapper input[type="file"] {
    display: none; 
}

/* Hiệu ứng khi rê chuột hoặc khi đang kéo file vào */
.upload-box-wrapper:hover, 
.upload-box-wrapper.drag-over {
    border-color: #446084;
    background: #f0f6fa;
}

/* Style nội dung bên trong */
.upload-box-wrapper .icon-upload {
    font-size: 30px;
    display: block;
    color: #999;
    margin-top: 10px;
}

.upload-box-wrapper .upload-hint {
    font-weight: 600;
    color: #333;
    display: block;
}

/* Class này sẽ được JS thêm vào khi đã chọn file thành công */
.upload-box-wrapper.has-file {
    border-style: solid;
    border-color: #4caf50; /* Màu xanh lá báo thành công */
    background: #e8f5e9;
}

/*		Job Detail Page		*/
/* Chỉnh lại icon Share của Flatsome cho giống design */
.job-header .social-icons {
    font-size: 16px; /* Kích thước icon */
}

.job-header .social-icons a {
    color: #0077b5; /* Màu xanh của icon (LinkedIn style) */
    background: transparent !important;
    border: none !important;
    margin-left: 5px;
}

/* Ẩn dấu gạch đứng mặc định của breadcrumb Flatsome nếu có */
.job-breadcrumbs a {
    color: #333;
    font-weight: 500;
}
.job-breadcrumbs {
    opacity: 0.8;
}

/* Mobile responsive cho Header */
@media (max-width: 550px) {
    .job-meta-row {
        flex-direction: column;
        align-items: flex-start !important;
    }
    .job-header {
        padding: 30px 0 !important;
    }
    .entry-title {
        font-size: 26px !important;
    }
}

body.page-template-template-job .page-title {
    display: none !important;
}

/* 2. Xóa khoảng trắng thừa (nếu có) do Flatsome đẩy nội dung xuống */
body.page-template-template-job #content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 3. Fix màu header menu (Nếu menu của bạn bị trong suốt đè lên chữ) */
/* Nếu menu đẹp rồi thì bỏ qua đoạn này */
body.page-template-template-job #header {
    background-color: #fff; /* Hoặc màu chủ đạo của web */
}

/*	Logo Bay	*/
/* 1. Tạo hiệu ứng bay */
.logo-bay .img-inner {
    /* animation: tên-hiệu-ứng thời-gian kiểu-chạy lặp-lại */
    animation: bay-tu-phai-qua-trai 15s linear infinite;
    
    /* Đảm bảo logo nằm gọn, không bị kéo dãn */
    width: fit-content; 
    display: block;
}

/* 2. Định nghĩa đường bay */
@keyframes bay-tu-phai-qua-trai {
    0% {
        /* Bắt đầu từ mép phải màn hình (100% chiều rộng màn hình) */
        transform: translateX(100vw); 
    }
    100% {
        /* Kết thúc khi nó đi hết chiều rộng của chính nó về phía trái */
        transform: translateX(-100%); 
    }
}

/* 3. QUAN TRỌNG: Ẩn thanh cuộn ngang */
/* Code này giúp khi logo chạy ra mép phải, web không bị hiện thanh scroll ngang xấu xí */
body {
    overflow-x: hidden;
}

/*		Logo Floating		*/
/* Khung bao ngoài: Giới hạn chiều rộng và ẩn phần thừa */
.marquee-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    padding: 10px 0; /* Khoảng cách trên dưới */
}

/* Phần tử chạy (Gồm Logo + Chữ) */
.marquee-item {
    display: inline-flex; /* Để logo và chữ nằm ngang hàng */
    align-items: center;  /* Căn giữa theo chiều dọc */
    gap: 15px;            /* Khoảng cách giữa Logo và Chữ */
    
    /* Animation bay từ phải qua trái */
    animation: bay-mot-mach 20s linear infinite;
    
    /* Mặc định nằm ngoài màn hình bên phải */
    position: absolute; 
    left: 100%; 
}

/* CSS cho ảnh Logo */
.marquee-logo {
    height: 40px; /* Chiều cao logo */
    width: auto;
    margin-bottom: 0; /* Fix lỗi margin mặc định của flatsome */
}

/* CSS cho dòng Chữ */
.marquee-text {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    /* Có thể thêm font-family tùy ý */
}

/* Định nghĩa đường bay */
@keyframes bay-mot-mach {
    0% {
        /* Bắt đầu từ mép phải (100% màn hình) */
        left: 100%;
        transform: translateX(0%);
    }
    100% {
        /* Kết thúc khi nó đi hết sang mép trái */
        /* left: 0 và translate -100% nghĩa là đuôi của nó vừa chạm mép trái */
        left: 0; 
        transform: translateX(-100vw); 
    }
}

/*		Contact Email Apply		*/
/* --- 1. Style Nút bấm Let's Talk --- */
.btn-contact-custom {
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    padding: 10px 25px; 
    background-color: transparent;
    border: 1px solid #ffffff; 
    border-radius: 99px;
    color: #ffffff !important; /* Luôn màu trắng khi chưa hover */
    font-size: 15px; 
    font-weight: 600;
    text-decoration: none; 
    transition: all 0.3s ease; 
    cursor: pointer;
}

.btn-contact-custom .btn-text { 
    margin-right: 10px; 
}

/* Quan trọng: Ép màu chữ sang Xanh khi Hover */
.btn-contact-custom:hover {
    background-color: #ffffff !important; /* Nền trắng */
    color: #245DB3 !important; /* Chữ xanh (Dùng !important để ép theme phải nghe theo) */
    transform: translateY(-2px); 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Xử lý riêng cho icon SVG để nó đổi màu theo chữ */
.btn-contact-custom svg { 
    display: block; 
    fill: currentColor; /* Tự động ăn theo màu chữ */
}

/* Đảm bảo khi hover icon cũng đổi màu */
.btn-contact-custom:hover svg {
    fill: #245DB3 !important;
}

/* --- 2. Style Form Popup (Chia cột) --- */
/* Cấu trúc Grid */
.custom-flat-form .form-row {
    display: flex; flex-wrap: wrap; margin: 0 -10px 15px -10px;
}
.custom-flat-form .form-col {
    flex: 1; padding: 0 10px; min-width: 250px;
}
.custom-flat-form .form-col.full-width {
    flex: 0 0 100%; max-width: 100%;
	padding: 0px 10px !important;
}

/* Style Input/Textarea */
.custom-flat-form label {
    font-size: 14px; font-weight: 700; color: #333; margin-bottom: 5px; display: block;
}
.custom-flat-form .required { color: red; }

.custom-flat-form input[type="text"],
.custom-flat-form input[type="email"],
.custom-flat-form input[type="tel"],
.custom-flat-form textarea {
    width: 100%; height: 45px;
    border: 1px solid #ccc; border-radius: 6px;
    padding: 10px 15px; font-size: 15px;
    background: #fff; box-shadow: none; outline: none; transition: border 0.3s;
}
.custom-flat-form textarea { height: 120px; }
.custom-flat-form input:focus, .custom-flat-form textarea:focus {
    border-color: #245DB3;
}

/* Checkbox */
.form-row.checkbox-row { margin-top: 10px; }
.checkbox-label { font-weight: normal !important; display: inline !important; }

/* Nút Submit Form */
.form-submit-row { text-align: center;}
/* .custom-flat-form input[type="submit"] {
    background-color: #ffffff; color: #245DB3;
    border: 2px solid #245DB3; border-radius: 50px;
    padding: 1px 60px !important; font-size: 18px; font-weight: bold;
    cursor: pointer; transition: all 0.3s; text-transform: uppercase;
} */
.custom-flat-form input[type="submit"]:hover {
    background-color: #245DB3; color: #fff;
}

.custom-flat-form .wpcf7-spinner {
	display: none !important;
}

/* Disclaimer text */
.form-disclaimer p { font-size: 12px; color: #666; line-height: 1.4; margin-top: 15px; }

/* Header của Popup */
.inno-popup-wrapper h3 { text-align: center; font-weight: bold; margin-bottom: 0; font-size: 32px; }
.inno-popup-wrapper p.subtitle { text-align: center; color: #245DB3; font-weight: bold; letter-spacing: 2px; margin-top: 5px; margin-bottom: 20px; text-transform: uppercase; }

/*		Bo tròn góc form		*/
#popup-inno-form {
	border-radius: 20px !important;
}

/*		Advise Section		*/
.custom-column-height .col-inner {
    height: 20rem;
    transition: all 0.3s ease; /* Hiệu ứng chuyển màu mượt mà */
    border-radius: 10px; /* Nên đặt bo góc ở đây để khung luôn bo tròn */
}

/* --- CẤU HÌNH KHI HOVER (CHUNG) --- */
.custom-column-height .col-inner:hover {
    color: white !important;
    /* Xóa dòng background-color chung ở đây đi */
}

/* --- MÀU SẮC RIÊNG CHO TỪNG CỘT KHI HOVER --- */

/* Cột số 1 - Màu Tím (#6A26F1) */
.custom-column-height .col:nth-child(1) .col-inner:hover {
    background-color: #1d72dc !important;
}

/* Cột số 2 - Màu Hồng (#FE006A) */
.custom-column-height .col:nth-child(2) .col-inner:hover {
    background-color: #1d72dc !important;
}

/* Cột số 3 - Màu Xanh Teal (#02CCB3) */
.custom-column-height .col:nth-child(3) .col-inner:hover {
    background-color: #1d72dc !important;
}

/* Cột số 4 - Màu Xanh Dương (#006AFE) */
.custom-column-height .col:nth-child(4) .col-inner:hover {
    background-color: #1d72dc !important;
}

/* --- XỬ LÝ TEXT HEADING (H4) --- */
.custom-column-height .col-inner:hover h4 {
    color: white !important;
}

/* --- XỬ LÝ ICON SVG --- */
.custom-column-height .col-inner:hover .icon-box-img img,
.custom-column-height .col-inner:hover .icon-box-img svg {
    filter: brightness(0) invert(1) !important;
    transition: all 0.3s ease;
}

/* --- MOBILE --- */
@media (max-width: 550px) {
    .custom-column-height .col-inner {
        height: 20rem;
    }
}

/*		FAQ Section		*/
.faq-title .section-title {
	justify-content: left !important;
}

.faq-title .section-title-normal {
	border-bottom: none !important;
}

/*		Case Study Tabs		*/
.case-study-tabs .nav li > a:focus {
	background-color: #1d72dc;
	color: white;
}


/*		Custom Faq Box		*/
.faq-column .accordion_title {
	font-size: 30px;
	background: #1d72dc;
    padding-left: 15px;
    padding-top: 15px;
    color: white;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.custom-faq-box .accordion-item {
	color: black;
}

.custom-faq-box .accordion-item .accordion-title:hover {
	color: #1d72dc !important;
}

/*		Homepage Services Button		*/
body .white.is-outline:hover {
	background-color: #1d72dc !important;
	color: white !important;	
}
@media (max-width: 550px) {
    .homepage-services-btn {
		width: 100% !important;
		font-size:13px;
	}
	
}

/*		Inno Labs info Grid		*/
.innolabs-info-grid .col-inner {
	padding:0 30px;
	height: 8rem;
}

/*		Custom element Follow Icons		*/
/* 1. Xóa icon Twitter mặc định */
.follow-icons a.twitter i::before {
    display: none !important;
}

/* 2. Thiết lập icon Zalo - Tự thích nghi */
.follow-icons a.twitter i {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/9/91/Icon_of_Zalo.svg') !important;
    background-size: contain !important; /* Tự co giãn theo khung */
    background-repeat: no-repeat !important;
    background-position: center !important;
    display: inline-block !important;
    /* Dùng em để tự scale theo size chữ của Sidebar */
    width: 1.2em !important; 
    height: 1.2em !important;
    vertical-align: middle;
    content: "" !important;
}

/* 3. Fix riêng cho trường hợp nằm trong Sidebar (Mobile) */
.off-canvas .follow-icons a.twitter i {
    width: 20px !important;
    height: 20px !important;
    margin-top: -3px; /* Cân chỉnh nhẹ trục Y cho thẳng hàng chữ */
}

/* 4. Giữ màu Zalo khi hover */
.follow-icons a.twitter:hover {
    background-color: #0068ff !important;
    border-color: #0068ff !important;
}

/* 1. Xóa icon Instagram mặc định */
.follow-icons a.instagram i::before {
    display: none !important;
}

/* 2. Thiết lập icon WhatsApp */
.follow-icons a.instagram i {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    display: inline-block !important;
    width: 1.2em !important; 
    height: 1.2em !important;
    vertical-align: middle !important;
    content: "" !important;
}

/* 3. Căn chỉnh cho Desktop (trong vòng tròn) */
.follow-icons a.button.instagram i {
    width: 20px !important;
    height: 20px !important;
}

/* 4. Đổi màu nền sang màu xanh WhatsApp khi hover */
.follow-icons a.instagram:hover {
    background-color: #25D366 !important;
    border-color: #25D366 !important;
}

/*		Counter		*/
/* Container chứa số */
.counter-wrapper {
    display: flex;
    align-items: baseline;
    font-family: sans-serif; /* Bạn có thể đổi font dày hơn ở đây */
    line-height: 1;
}

/* Style cho con số */
.custom-number {
    font-size: 180px; /* Độ to của số */
    font-weight: 800; /* Độ dày */
    color: #1d72dc; /* Màu đỏ đúng mẫu */
    letter-spacing: -8px; /* Làm các con số sát nhau lại */
}

/* Style cho dấu cộng */
.plus-sign {
    font-size: 80px;
    font-weight: 700;
    color: #1d72dc;
    margin-left: 10px;
}

/* Responsive cho điện thoại không bị tràn màn hình */
@media (max-width: 550px) {
    .custom-number { font-size: 80px; letter-spacing: -2px; }
    .plus-sign { font-size: 40px; }
}

/*			Footer		*/
/* 1. Ép thanh Absolute Footer màu xanh và căn giữa nội dung */
#footer .absolute-footer {
    background-color: #1d72dc !important; /* Màu xanh chuẩn */
    padding: 2px 0 !important;           /* Giảm chiều cao tối đa */
    min-height: auto !important;
}

/* 2. Căn giữa container bên trong */
#footer .absolute-footer .container {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 3. QUAN TRỌNG: Ẩn hoàn toàn các menu hoặc mục thừa đang hiện ở Footer */
#footer .absolute-footer .footer-nav, 
#footer .absolute-footer ul {
    display: none !important;
}

/* 4. Xóa bỏ gạch chân và style mặc định của Flatsome ở khu vực này */
#footer .absolute-footer * {
    text-decoration: none !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/*		Custom bo góc	*/
.custom-radius-top .col-inner {
    border-radius: 30px 30px 0 0 !important;
}

/*		Why choose Innolabs section		*/
.why-choose-innolabs-title p {
	margin: 0px !important;
}

/*		Innolabs Gallery Custom	*/
/* 1. Trạng thái mặc định */
.innolabs-gallery-custom .gallery-col .box-image {
    border-radius: 20px;    /* Bo góc khung */
    overflow: hidden;       /* Giữ ảnh không tràn khi scale */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Hiệu ứng nảy nhẹ (back out) cho sinh động */
    transform: scale(1);
}

/* 2. Ép ảnh luôn rõ nét và lấp đầy khung */
.innolabs-gallery-custom .gallery-col .box-image img {
    filter: grayscale(0%) !important;
    opacity: 1 !important;
    width: 100%;
    height: auto;
    display: block;
}

/* 3. Trạng thái khi Hover: Cả khối hình vuông scale lên */
/* Dùng .box:hover để khi rê chuột vào vùng lân cận khối vẫn nhận diện tốt */
.innolabs-gallery-custom .gallery-col .box:hover .box-image {
    transform: scale(1.1); /* Phóng to cả khung và ảnh bên trong 110% */
    z-index: 9;            /* Đưa khối đang hover lên trên các khối khác để không bị bóng đổ đè */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Tăng độ đậm bóng đổ khi hover cho cảm giác nổi hẳn lên */
}


/*		Custom Grid Case Study		*/
/* 1. Xóa bỏ các thiết lập khung to trước đó */
.quarter-circle-box {
    background: transparent !important; /* Không có nền to */
    width: auto !important;
    height: auto !important;
    padding: 0 !important; /* Bỏ padding của khung */
    margin: 0 !important;
    
    /* Đặt vị trí */
    position: absolute !important;
    bottom: 20px !important; /* Cách đáy một chút cho đẹp */
    left: 20px !important;   /* Cách trái một chút */
    transform: none !important;
    
    /* Căn lề trái */
    display: flex !important;
    flex-direction: column;
    align-items: flex-start; /* Canh trái toàn bộ nội dung */
}

/* 2. Xử lý Icon: Nền tròn mờ riêng biệt */
.quarter-circle-box .icon-wrapper {
    width: 40px;
    height: 40px;
    
    /* Tạo nền mờ cho riêng icon */
    background-color: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(5px);
    
    border: 1px solid #333;
    border-radius: 50%;
    
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px; /* Khoảng cách giữa icon và chữ */
}

/* 3. Xử lý Chữ: Hiệu ứng Highlight (như bút dạ) */
.quarter-circle-box h4,
.quarter-circle-box h6 {
    /* Màu nền highlight ôm sát chữ */
    background-color: rgba(255, 255, 255, 0.7); 
    backdrop-filter: blur(5px);
    
    /* Chỉnh padding để nền rộng hơn chữ một chút cho dễ thở */
    padding: 5px 12px !important; 
    border-radius: 6px; /* Bo góc nhẹ cho nền chữ */
    
    /* Quan trọng: Để nền chỉ bao quanh chữ chứ không kéo dài hết hàng */
    display: inline-block !important; 
    width: fit-content !important;
    
    color: #000 !important;
    font-weight: bold;
    margin: 0 !important;
    line-height: 1.4;
    
    /* Tạo hiệu ứng bóng nhẹ để chữ nổi lên khỏi ảnh */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.quarter-circle-box .text-inner > div:first-child {
	/* Màu nền highlight ôm sát chữ */
    background-color: rgba(255, 255, 255, 0.7); 
    backdrop-filter: blur(5px);             
    
    color: #000 !important;
    font-weight: bold;    
    line-height: 1.4;
    
    /* Tạo hiệu ứng bóng nhẹ để chữ nổi lên khỏi ảnh */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/*		Custom Language Widget		*/
/* Tùy chỉnh Dropdown ngôn ngữ mới với size 1.2rem */
.custom-lang-dropdown > a {
    font-weight: 700;
    font-size: 1rem !important; /* Tăng size theo ý bạn */
    letter-spacing: 0.5px;
    padding: 0 15px 0 10px; /* Chỉnh khoảng cách xung quanh */
    display: flex;
    align-items: center;
    color: #333;
    line-height: 1;
}

/* Style cho icon cờ */
.lang-flag-icon {
    display: inline-block;
    vertical-align: middle;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Chỉnh mũi tên đi kèm cho cân với chữ 1.2rem */
.custom-lang-dropdown .icon-angle-down {
    font-size: 0.8rem !important; /* Mũi tên nhỏ hơn chữ một chút cho tinh tế */
    margin-left: 5px !important;
    opacity: 0.6;
    margin-top: 2px; /* Đẩy xuống một xíu để căn giữa dòng chữ */
}

/* Chỉnh chữ bên trong danh sách xổ xuống (Dropdown) */
.custom-lang-dropdown .nav-dropdown li a {
	display: flex !important;      /* Kích hoạt flexbox để xếp hàng ngang */
    flex-direction: row !important; /* Ép buộc nằm theo hàng ngang */
    align-items: center !important; /* Căn giữa icon và chữ theo chiều dọc */
    justify-content: center !important; /* Căn giữa cả cụm ra giữa dropdown */    
    font-weight: 600;
    font-size: 1rem !important; /* Nhỏ hơn bên ngoài 1 xíu để phân cấp thị giác */
    padding: 10px 15px;
    display: block;
    text-align: center;
}

/* Hover effect */
.custom-lang-dropdown .nav-dropdown li a:hover {
    background-color: transparent;
    color: #0066cc;
}

/* Đảm bảo dropdown hiện ra đúng vị trí */
.custom-lang-dropdown .nav-dropdown {
    min-width: 80px; 
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/*		Custom theme selection section		*/

.theme-list-section .panel .row {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* 1. Setup icon tab */
.nav-tabs li.tab a[href="#tab-test"]::before {
    content: "" !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 99 !important;
}

.nav-tabs li.tab a[href="#tab-test"]::before {
	background: url('https://innolabs.vn/wp-content/uploads/2026/01/svgviewer-output-1.svg') !important;
}

.nav-tabs li.tab.active a[href="#tab-test"]::before {
    filter: brightness(0) invert(1) !important;
}

.nav-tabs li.tab.active a[href="#tab-test"] {
	color: white;
	background: #1d72dc;
}

/* 3. Vô hiệu hóa hiệu ứng làm mờ mặc định của Flatsome khi hover tab khác */
.nav-tabs li.tab:not(.active) a {
    opacity: 1 !important;
}

/*		InnoLabs Jobs List		*/

/* Styling cho khung Job Card */
.job-card-wrapper {
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
    background: #fff;
    height: 100%; /* Giúp các card bằng nhau */
}

.job-card-wrapper:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    border-color: #d1d1d1;
}

/* Phần Header và Content có padding */
.job-card-header, .job-content {
    padding: 20px 25px;
}

/* Typography Tiêu đề */
h3.job-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.3;
    color: #000;
}

/* Meta time */
.job-meta {
    font-size: 13px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Dải màu hồng (Tags) */
.job-tags {
    background-color: #fff0f0; /* Màu hồng nhạt giống ảnh */
    padding: 12px 25px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 13px;
    color: #e53935; /* Màu chữ đỏ */
    font-weight: 500;
    border-top: 1px solid #fce4ec;
    border-bottom: 1px solid #fce4ec;
}

.job-tags span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.job-tags i {
    font-size: 14px;
}

/* Phần mô tả */
.job-content p {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Giới hạn 3 dòng */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Nút View Detail */
.view-detail-btn {
    display: block;
    text-align: right;
    color: #ff4545; /* Màu đỏ cam */
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
    transition: padding-right 0.3s;
}

.view-detail-btn:hover {
    padding-right: 5px; /* Hiệu ứng đẩy mũi tên */
    color: #d32f2f;
}

/**/
/* --- 1. XỬ LÝ ĐỘ RỘNG 10/12 --- */
.cjs-outer-container {
    width: 100%;
    max-width: 83.33333%; /* Tương đương 10/12 cột */
    margin: 0 auto; /* Căn giữa */
}
/* Mobile thì cho full màn hình */
@media (max-width: 849px) {
    .cjs-outer-container { max-width: 89.3333333333% !important; padding: 0 15px; }
}

.cjs-wrapper {
    position: relative;
    font-family: sans-serif;
    width: 100%;
}

/* --- HEADER --- */
.cjs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 25px;
    flex-wrap: nowrap; /* Cấm rớt dòng cả header */
}

.cjs-header h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    color: #000;
    /* Nếu tiêu đề dài quá thì cho nó co lại, nhường chỗ cho nút */
    flex: 1; 
    min-width: 0;
    padding-right: 20px; /* Tạo khoảng cách an toàn với nút */
}

/* Track chứa Card */
.cjs-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 10px 2px 20px 2px;
    -ms-overflow-style: none; scrollbar-width: none;
}
.cjs-track::-webkit-scrollbar { display: none; }

/* Card Design */
.cjs-card {
    flex: 0 0 calc(33.333% - 14px); /* Desktop 3 cột */
    background: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform 0.3s, box-shadow 0.3s;
}

.cjs-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    border-color: #ddd;
}

/* Nội dung card */
.cjs-card-body { padding: 0; display: flex; flex-direction: column; height: 100%;}
.cjs-top { padding: 20px 20px 10px 20px; }
.cjs-top h3 { font-size: 20px; font-weight: 700; color: #000; margin-bottom: 8px; min-height: 44px; line-height: 1.3; }
.cjs-meta { font-size: 13px; color: #888; display: flex; align-items: center; gap: 5px; }

/* Tags background hồng */
.cjs-tags {
    background: #e3f6ff;
    padding: 10px 20px;
    border-top: 1px solid #ffebee;
    border-bottom: 1px solid #ffebee;
    display: flex; flex-wrap: wrap; gap: 15px; /* Tăng khoảng cách giữa 2 thẻ span ra chút */
    min-height: 45px; align-items: center;
}

.cjs-tags span { 
    font-size: 12px; 
    font-weight: 600; 
    color: #1d72dc; 
    display: flex; 
    align-items: center; 
    gap: 6px; /* Khoảng cách giữa Icon và Chữ */
}

/* Xóa dấu chấm cũ nếu còn sót lại */
.cjs-tags span::before { content: none !important; } 

/* Style cho Icon mới thêm vào */
.cjs-tags span svg {
    width: 14px;
    height: 14px;
    stroke: #1d72dc; /* Màu đỏ trùng màu chữ */
    position: relative;
    top: -1px; /* Cân chỉnh cho icon thẳng hàng với chữ */
}

.cjs-desc { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }
.cjs-desc p { font-size: 14px; line-height: 1.6; color: #444; margin-bottom: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.cjs-footer-link { text-align: right; color: #1d72dc; font-weight: 700; font-size: 13px; cursor: pointer; transition: 0.2s; }
.cjs-footer-link:hover { padding-right: 5px; }

/* --- PHẦN ĐIỀU KHIỂN (FIX LẠI CHO ĐÚNG MẪU) --- */
.cjs-controls {
    display: flex;
    align-items: center; /* Căn giữa theo chiều dọc */
    margin-top: 10px;
    width: 100%;
}

/* Thanh kẻ ngang: Chiếm hết khoảng trống còn lại */
.cjs-progress-line {
    flex-grow: 1; 
    height: 2px;
    background: #e0e0e0;
    margin-right: 15px; /* Khoảng cách tới nút */
    border-radius: 2px;
}

/* Cụm nút: Nằm sát nhau */
.cjs-buttons {
    display: flex;
    gap: 10px; /* Khoảng cách giữa 2 nút */
}

/* Style nút bấm */
.cjs-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #ddd;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    margin: 0;
}

/* Fix lỗi hiển thị icon mũi tên */
.cjs-btn svg {
    width: 20px;
    height: 20px;
    display: block; /* Đảm bảo ko bị lỗi layout */
}

.cjs-btn:hover {
    border-color: #1d72dc;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.cjs-btn:hover svg { stroke: #1d72dc; }

/* Responsive */
@media (max-width: 1024px) {
    .cjs-card { flex: 0 0 calc(50% - 10px); }
}
@media (max-width: 600px) {
    .cjs-card { flex: 0 0 100%; }
    .cjs-progress-line { display: none; } /* Mobile ẩn thanh kẻ cho gọn */
    .cjs-controls { justify-content: center; } /* Mobile căn giữa nút */
}

/*		Icon Box CSS		*/
.icon-box-css .col-inner {	
	height: 6rem;
	border-radius: 10px;
}

.icon-box-css .icon-box {
	height: 100%;
	align-items: center;
	padding-left: 10px;
	padding-right: 10px;
	box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.08);
	border-radius: 10px;
}

.icon-box-css .icon-box:hover {
	color: white;
}


.icon-box-css .icon-box .icon-box-text h1,
.icon-box-css .icon-box .icon-box-text h2,
.icon-box-css .icon-box .icon-box-text h3,
.icon-box-css .icon-box .icon-box-text h4,
.icon-box-css .icon-box .icon-box-text h5,
.icon-box-css .icon-box .icon-box-text h6,
.icon-box-css .icon-box .icon-box-text p {
	margin-bottom: unset;
	margin-top: unset;
}

.icon-box-css:hover .icon-box-text h1,
.icon-box-css:hover .icon-box-text h2,
.icon-box-css:hover .icon-box-text h3,
.icon-box-css:hover .icon-box-text h4,
.icon-box-css:hover .icon-box-text h5,
.icon-box-css:hover .icon-box-text h6,
.icon-box-css:hover .icon-box-text p {
    color: white !important;
    transition: color 0.3s ease;
}

.icon-box-css .icon-box .icon-box-img .icon {
	overflow: unset;
}

.icon-box-css .icon-box .icon-box-img .icon .icon-inner {
	top: -50%;
	background: #efe6ff;	
}

.icon-box-css:hover .icon-box .icon-box-img .icon .icon-inner {
	background: #efe6ff;
}

/* Tạo hiệu ứng chuyển màu mượt */
.col-inner {
    transition: background-color 0.3s ease;
}

/* Logic chính: Khi hover vào col có class này -> đổi màu inner thành màu đã chọn */
.hover-color-opt:hover > .col-inner {
    background-color: var(--gem-hover-bg) !important;
}

/*	Custom filter theme	*/
/* Kế thừa logic hover cũ của bạn cho trạng thái active */
.hover-color-opt.active-filter > .col-inner {
    background-color: var(--gem-hover-bg) !important;
    /* Nếu bạn muốn thêm hiệu ứng khác để biết đang active thì thêm vào đây */
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.1); /* Ví dụ thêm viền nhẹ */
}

/* Biến con trỏ chuột thành dạng click */
.js-cat-filter {
    cursor: pointer;
}
.cjs-card {
	border-radius:10px;
}
/*		Loại bỏ viền trái cùng của row		*/
.custom-main-row > .col:first-child::before {
    border-left-style: none !important;
}
.custom-main-row .row-collapse .col:first-child::before {
    border-left-style: none !important;
}

/*		Custom Banner width	*/
.custom-banner-width .banner-layers.container {
	padding: 0 9.8px 19.6px !important;
}

@media screen and (min-width: 850px) {
    .custom-banner-width .banner-layers.container {
        max-width: 78.3333333333% !important;
    }
}
.delete-distance{
	padding-bottom: 0 !important;
}

/*		Css custom Grid trang Dự án thực tế		*/
.custom-grid-wrapper .banner-grid-wrapper {
	padding-left: 20px !important;
}
.service-section {
	padding-bottom:0px;
}
@media screen and (max-width: 850px) {
	.custom-grid-wrapper .banner-grid-wrapper {
		padding-left: 40px !important;
		padding-right: 20px !important;
	}
	.section-evident .row,
	.section-services .row,
	.section-about-us .row{
		display:block;
	}
		.section-evident .medium-10,
	.section-evident .medium-6,

	.section-services .medium-10,
	.section-services .medium-6,
	.section-about-us .medium-10,
	.section-about-us .medium-6{
		max-width:100%;
	}
		.section-contact .medium-10,
	.section-contact .small-10{
		flex-basis:auto;
		max-width:100%;
	}

}
.section-evident .row-small>.col, .row-small>.flickity-viewport>.flickity-slider>.col,
.section-foundation .row-small>.col, .row-small>.flickity-viewport>.flickity-slider>.col,
	.section-partner .row-small>.col, .row-small>.flickity-viewport>.flickity-slider>.col,
	.section-services .row-small>.col, .row-small>.flickity-viewport>.flickity-slider>.col,
	.service-section .row-small>.col, .row-small>.flickity-viewport>.flickity-slider>.col{
		padding:0 9.8px 0;
	}
/*		Custom banner contact	*/
.custom-banner-contact .banner-bg.fill {
	border-radius: 0px 20px 30px 30px !important;
}
.theme-section .container .row:not(.row-collapse), .lightbox-content .row:not(.row-collapse), .row .gallery, .row .row:not(.row-collapse){
	margin-right:0px !important;
	margin-left:0px !important;
}
@media screen and (max-width: 850px) {
	.custom-scroll-tabs .nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
		scrollbar-width: none;
    }
	.custom-scroll-tabs .nav li {
        flex: 0 0 auto !important; /* Ép tab giữ nguyên độ rộng tự nhiên */
        width: auto !important;
        white-space: nowrap !important; /* Không cho chữ xuống dòng */
    }
}

.theme-row.row-full-width{
	max-width: none!important;
}

@media (min-width: 768px) {
  .theme-row.row-full-width {
    max-width: 100%;
  }
}
@media (max-width: 768px) {

	.hero-scroll-banner h2 {
		font-size:35px !important;
	}
	
}
@media (max-width: 1000px) {

  .mobile-scroll {
    display: flex !important;
    flex-wrap: wrap !important; /* cho phép xuống dòng */
  }

  .mobile-scroll > .col {
    flex: 0 0 50% !important;   /* 2 box mỗi hàng */
    max-width: 50% !important;
  }
	#header .nav-top-link{
	    flex-wrap: nowrap;
}
#header .medium-logo-center .flex-right,
#header .medium-logo-center .flex-left{
	flex:0!important;
}

}
@media screen and (max-width: 768px) and (min-width: 550px) {
	.section-about-us{
		margin-top:100px;
	}

	.section-foundation-box {
   display: flex;
    flex-wrap: wrap; /* Bắt buộc phải có để box nhảy xuống hàng mới */
}
	.section-foundation-box .medium-3 {
    flex: 0 0 100% !important; /* Viết tắt của flex-grow, flex-shrink, flex-basis */
    max-width: 100% !important;
    width: 100% !important;
}
	.homepage-slider-bullet{
	height:300px;
		padding-bottom:10px;
}

}
@media screen and (max-width: 1300px) and (min-width: 550px) {
	.section-foundation-box .medium-3{
		flex-basis: 50% !important;
        max-width: 50% !important;
        width: 50% !important;
	}
		.section-foundation-box .row-full-width{
		row-gap:20px!important;
	}
}
/* Media query cho khoảng màn hình máy tính bảng/laptop nhỏ */
@media screen and (max-width: 1000px) and (min-width: 550px) {
	
	/* Nhắm vào hàng chứa các dịch vụ bên trong service-section-box */
    .service-section-box .row-collapse.align-center {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Ép mỗi cột (box) chiếm 50% chiều rộng */
    .service-section-box .row-collapse.align-center > .col {
        max-width: 50% !important;
        flex-basis: 50% !important;
    }
.service-section-box .row-collapse > .col:last-child {
        margin-top: 25px !important; /* Đẩy item cuối xuống */
        border-left: 0 !important;   /* Xóa border trực tiếp trên col */
    }

    /* 4. Xóa đường kẻ :before của item cuối */
    .service-section-box .row-collapse > .col:last-child:before {
        display: none !important;
        content: none !important;
        border: 0 !important;
    }
	.serivce-banner {
		margin-top:150px!important;
	}
	.contact-banner {
        padding-top: 0 !important;
        height: auto !important;
        min-height: 1200px; 
        display: flex !important;
        flex-direction: column !important;
    }

    /* 2. Ép các lớp (Layers) phải xếp hàng dọc, không được đè lên nhau */
    .contact-banner .banner-layers {
        position: relative !important;
        height: auto !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        display: block !important;
        padding: 50px 20px 0 !important;
    }

    /* Đưa các Text Box về luồng hiển thị tự nhiên */
    .contact-banner .text-box {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        transform: none !important;
    }

    /* 3. Chỉnh hàng 3 cột (Hỗ trợ, Đối tác...) xếp dọc cho thoáng */
    .contact-banner .row-collapse {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px;
    }

    .contact-banner .row-collapse .col {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 4. Tách lớp Ảnh và các Box liên hệ (Messenger, Hotline) */
    .contact-banner .banner-layer.y100 .row-small {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Cột chứa ảnh minh họa */
    .contact-banner .banner-layer.y100 .col.medium-6:first-child {
        width: 90% !important;
        margin-bottom: 30px;
    }

    /* Cột chứa 3 ô liên hệ trắng */
    .contact-banner .banner-layer.y100 .col.medium-6:last-child {
        width: 100% !important;
    }

    /* 5. Làm đẹp các ô liên hệ (Card Style) */
    .contact-banner .col-inner[style*="background-color:rgb(255,255,255)"] {
        background-color: #ffffff !important;
        border-radius: 16px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
        margin-bottom: 15px !important;
        padding: 20px !important;
    }

    /* Xử lý lỗi tiêu đề bị to quá mức */
    .contact-banner h2 {
        font-size: 2.5rem !important;
        text-align: center;
        line-height: 1.1;
    }
	.contact-banner.banner {
        min-height: 0 !important; /* Xóa min-height cũ */
        height: auto !important;   /* Cho phép co giãn theo nội dung */
        padding-top: 20px !important; /* Thay thế tỷ lệ % của Flatsome bằng padding thực */
    }

    /* 2. Fix lỗi background không bao phủ hết khi nội dung dài ra */
    .contact-banner .banner-bg.fill {
        height: 100% !important;
        position: absolute !important;
        top: 0;
        left: 0;
    }

    /* 3. Đảm bảo các lớp bên trong không bị overflow */
    .contact-banner .banner-inner.fill {
        position: relative !important;
        height: auto !important;
        display: block !important;
    }
	#header .medium-logo-center .flex-right, #header .medium-logo-center .flex-left{
		flex:auto!important
	}
	.banner h2 {
		font-size:50px !important;
	}
	.theme-row.row-small .icon-box-css {
        flex-basis: 33.333% !important;
        max-width: 33.333% !important;
    }
	.theme-row.row-small .icon-box-css {
        flex-basis: 33.333% !important;
        max-width: 33.333% !important;
    }
/* 	 */
	.contact-section-connect .row{
		display:block;
	}
	.contact-section-connect-left {
		text-align:center;
	}
	.contact-section-connect-right .col-inner{
		width:90%;
	}
	.theme-section-row .col.post-item {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    /* Container chứa các cột */
	
    #footer .row-top-column {
        display: flex !important;
        flex-wrap: wrap !important;
    }
	
	.introduce-section-value .row{
		display:block;
	}
	
	.section-contact h3{
		font-size:25px !important;
	}
	
	.contact-section-connect .medium-4,
	.contact-section-connect .small-10,
	.introduce-section-value .large-10,
	.introduce-section-value .medium-10,
	.introduce-section-value .small-11,
	.introduce-section-value .medium-7{
		max-width:100%;
	}
	.introduce-section-value-right .col-inner {
    display: flex;
    flex-wrap: wrap; /* Cho phép rớt dòng */
    justify-content: space-between; /* Khoảng cách đều giữa 2 cột */
}
	.introduce-section-value-right .col-inner .icon-box {
        /* Mỗi item chiếm khoảng 48% để nằm vừa 2 cột trên 1 hàng */
        flex: 0 0 48% !important; 
        margin-bottom: 20px;
    }
	.innolabs-info-grid > .col {
        /* Ép mỗi cột chiếm đúng 50% chiều rộng */
        max-width: 50% !important;
        flex-basis: 50% !important;
    }
	
    /* Ép các cột chiếm 50% chiều rộng để tạo thành 2 hàng */
	#footer .col.medium-5, 
    #footer .col.medium-2 {
        flex-basis: 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    /* Căn chỉnh lại padding để nội dung không dính sát lề */
    #footer .custom-radius-top .col-inner {
        padding: 10px 20px !important;
        text-align: left !important;
    }
	


	.service-section .row{
		flex-flow: column;
	}
	.service-section .row .col{
		max-width: 100% !important;
    flex-basis: 100% !important;
    width: 100% !important;
	}
	.service-section .service-right .row{
		flex-direction: row;
	}
	.service-section>.text-left>.col{
		padding:0px;
	}
	.hero-scroll-banner .text-box {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;            /* Đảm bảo hộp văn bản chiếm hết chiều ngang để căn giữa chữ */
    margin: 10px !important      /* Khoảng cách nhỏ giữa các khối */
}
}
@media screen and (min-width: 1200px) {
    .theme-row.row-small .icon-box-css {
        flex-basis: 20% !important;
        max-width: 20% !important;
    }
	#header .header-main .container {
	max-width: 85%!important;
}
}
@media screen and (max-width: 450px) {
	.section-contact .banner{
		height:200px;
	}
	    .custom-banner-contact .text-box-content h3{
		margin-left:70px;
			margin-top:50px;
			font-size:17px;
    }
	.custom-banner-contact .text-box-content .text p{
				margin-left:120px;
			margin-top:40px;
		font-size:14px;
	}
	.section-contact .banner-bg img{
		object-position:3% 0% !important;
	}
	.section-contact .banner-layers > .banner-layer{
		width:100% !important;
	}
	.section-contact .banner-layers{
		overflow:hidden;
	}
}
@media screen and (max-width: 768px) {

	.theme-row .js-cat-filter{
    display:none;
}
	.slider-nav-reveal .flickity-prev-next-button.previous,
	.slider-nav-reveal .flickity-prev-next-button.next,
	.service-section .slider-nav-reveal .flickity-prev-next-button.previous,
	.service-section .slider-nav-reveal .flickity-prev-next-button.next,
	.innolabs-theme-product-new .slider-nav-push:not(.slider-nav-reveal) .flickity-prev-next-button {
	display:none;
}

.theme-row .js-cat-filter:nth-child(-n+2){
    display:block;
}
	.post-item.hidden-mobile{
display:none!important;
}
	.service-right .post-item{
		padding:0px!important;
	}

    #footer .col {
        flex-basis: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        text-align: center !important; /* Mobile thường căn giữa sẽ đẹp hơn */
    }
	.contact-banner h2{
		font-size:35px!important;
	}


    #footer .custom-radius-top .col-inner {
        padding: 10px 15px !important;
        
    }
/* Khóa vị trí các hộp văn bản để nó luôn nằm trong luồng căn giữa */

    /* Logo căn giữa trên mobile */
    #footer .img-inner {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
/* Căn giữa toàn bộ nội dung trong banner */
.hero-scroll-banner .banner-inner {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Căn giữa theo chiều dọc */
    align-items: center !important;     /* Căn giữa theo chiều ngang */
    height: 100% !important;
    text-align: center !important;      /* Căn giữa chữ bên trong */
}



/* Đảm bảo banner có không gian để hiển thị */
.hero-scroll-banner {
    min-height: 450px !important; 
}
/* Xử lý các thẻ br bị thừa trong code cũ của bạn */
#footer style + br, 
#footer style + p + br {
    display: none !important;
}
/* Áp dụng cho Banner Contact */
.custom-banner-contact {
    background-color: #fff !important;
}
@media screen and (min-width: 850px) and (max-width: 1300px) {
    .theme-section-row .col.post-item {
        flex: 0 0 33.3333% !important;
        max-width: 33.3333% !important;
    }
	.theme-row.row-small .icon-box-css {
        flex-basis: 25% !important;
        max-width: 25% !important;
    }
	.homepage-slider-bullet .flickity-viewport{
  height:330px !important;
}

.homepage-slider-bullet .row{
  min-height:330px;
}
}

@media screen and (min-width: 850px) and (max-width: 900px) {
    
	.homepage-slider-bullet .flickity-viewport{
  height:400px !important;
}

.homepage-slider-bullet .row{
  min-height:400px;
}
	
}
@media screen and (min-width: 900px) and (max-width: 1000px) {
    
	.homepage-slider-bullet .flickity-viewport{
  height:350px !important;
}

.homepage-slider-bullet .row{
  min-height:350px;
}
	
}
.theme-section .row .row-small:not(.row-collapse),
.theme-section .row .row:not(.row-collapse){
	margin-left: 0px !important;
     margin-right: 0px !important;
}

/* Căn chỉnh khối chữ trên Mobile */
@media (max-width: 549px) {
    .custom-banner-contact {
        padding-top: 320px !important; /* Tạo không gian cho background */
    }
	.hero-scroll-banner {
		padding-top:130%!important;
	}
    /* Khối chứa văn bản */
    .custom-banner-contact .text-box.res-text:first-of-type {
        width: 90% !important;
        left: 50% !important;
        top: 30% !important;
        transform: translate(-50%, -50%) !important;
    }

    /* Khối chứa nút bấm */
    .custom-banner-contact .text-box.res-text:last-of-type {
        width: 70% !important;
        left: 50% !important;
        top: 75% !important;
        transform: translate(-50%, -50%) !important;
    }

    /* Căn giữa toàn bộ nội dung chữ bên trong */
    .custom-banner-contact .text-inner {
		margin-top:30px;
        text-align: center !important;
    }
	.custom-banner-contact .text-inner h2{
		font-size:18px;
	}
	.section-contact .small-10{
		flex-basis:auto;
		max-width:88%;
	}
	.custom-banner-contact .text-inner p {
		margin-top:20px;
		font-size:16px;
	}
	.custom-column-height{
		gap:15px!important;
	}

    /* Tùy chỉnh nút bấm cho dễ chạm trên điện thoại */

}

/*		Css Post item trong list Theme		*/
/* --- 1. XỬ LÝ TIÊU ĐỀ (Giới hạn 1 dòng và làm mờ đoạn cuối) --- */
.post-item .post-title {
    position: relative !important;
    white-space: nowrap;
    overflow: hidden !important;
    display: block !important;    
}

.post-item .post-title::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 90%);
    pointer-events: none;
}

/* Bo tròn góc post item */
.post-item .col-inner,
.post-item .col-inner .box {
    border-radius: 10px !important;
}

/* --- 2. XỬ LÝ ICON TRANG TRÍ (Hiện khi KHÔNG hover) --- */
.blog-post-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Tạo Icon tam giác xuống ở vị trí nút */
/* .blog-post-inner::before {
    content: "\f0d7";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 18px;
    color: #d1d1d1; 
    transition: all 0.3s ease;
    opacity: 1;
    visibility: visible;
    position: absolute;
    bottom: 5px;
}
 */
/* Ẩn icon khi hover vào card */
/* .post-item:hover .blog-post-inner::before {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.5); 
} */

/* --- 3. XỬ LÝ NÚT XEM CHI TIẾT (Ẩn/Hiện khi Hover) --- */
.post-item .button {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    background-color: transparent !important;
    border: none !important;
    color: #446084 !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center;
    text-decoration: none;
    text-transform: none;
    font-weight: bold;
    font-size: 15px !important;
    position: relative;
    z-index: 2;
}

/* Hiện nút khi hover */
.post-item:hover .button {
    opacity: 1;
    visibility: visible;
    transform: translateY(-2px);
}

/* Icon mũi tên cho nút */
.post-item .button::after {
    content: "\f061" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    margin-left: 8px;
    font-size: 13px;
    display: inline-block !important;
    transition: transform 0.2s ease;
}

.post-item .button:hover::after {
    transform: translateX(5px);
}

/* Loại bỏ gạch chân của link */
.post-item .post-title a {
    text-decoration: none !important;
    color: inherit;
}
@media (max-width:450px){
	.hero-scroll-banner{
		padding-top:150%!important;
	}
		.homepage-slider-bullet .flickity-viewport{
  height:330px !important;
}

.homepage-slider-bullet .row{
  min-height:330px;
}
}
@media (max-width:400px){
	.hero-scroll-banner{
		padding-top:175%!important;
	}
			.homepage-slider-bullet .flickity-viewport{
  height:350px !important;
}
	.action-nav__title{
		font-size:14px!important;
	}

.homepage-slider-bullet .row{
  min-height:350px;
}
		.service-right .flickity-viewport{
		height:260px!important;
		margin-top:10px;
	}
}
/* Tablet và Desktop giữ nguyên layout ngang */
@media (min-width: 550px) {
    .custom-banner-contact .text-inner {
        text-align: left !important;
    }
}



/* button */
/* Hiệu ứng chung cho tất cả button Buttonizer */
.buttonizer-button{
    position: relative;
    animation: btnShake 2s infinite, btnPulse 2s infinite;
}

/* rung nhẹ */
@keyframes btnShake{
    0%{transform: translateY(0);}
    10%{transform: translateY(-3px);}
    20%{transform: translateY(3px);}
    30%{transform: translateY(-3px);}
    40%{transform: translateY(3px);}
    50%{transform: translateY(0);}
    100%{transform: translateY(0);}
}

/* hiệu ứng pulse */
@keyframes btnPulse{
    0%{box-shadow:0 0 0 0 rgba(0,0,0,0.4);}
    70%{box-shadow:0 0 0 15px rgba(0,0,0,0);}
    100%{box-shadow:0 0 0 0 rgba(0,0,0,0);}
}

/* sóng lan */
.buttonizer-button::after{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    border-radius:50%;
    top:0;
    left:0;
    background:rgba(0,0,0,0.15);
    animation:btnWave 2s infinite;
    z-index:-1;
}

@keyframes btnWave{
    0%{
        transform:scale(1);
        opacity:0.7;
    }
    100%{
        transform:scale(1.8);
        opacity:0;
    }
}

/* ===== COMMON PRODUCT CARD ===== */

.product-small{
    background:#fff;
    border-radius:16px;
    overflow:hidden;
	padding:0 0 15px!important;
    transition:all .3s ease;
			box-shadow:0 3px 6px -4px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);

}
.related-products-wrapper .product,
.category-page-row .product{
		box-shadow:0 3px 6px -4px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);
	transform:scale(.9);
}
.related-products-wrapper .product:hover,
.category-page-row .product:hover,
.product-small:hover{
    transform:translateY(-6px);
}

/* ===== COMMON PRODUCT CONTENT ===== */

.box-text{
    padding:18px;
}

.name{
    font-size:18px;
    font-weight:600;
    margin-bottom:6px;
}

.price{
    font-size:14px;
    font-weight:700;
    color:#222;
}

del{
    font-size:14px;
    color:#9a9a9a;
    margin-left:6px;
}

/* sale badge */

.onsale{
    background:red;
    color:#fff;
    font-weight:700;
    border-radius:50%;
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* ===== IMAGE ===== */

.box-image img{
    border-radius:16px 16px 0 0;
}

/* ===================================================== */
/* ===== INNOLABS THEME SHOWCASE ===== */
/* ===================================================== */

.innolabs-theme-showcase{
    padding:60px 0;
}

.innolabs-theme-showcase .row-small>.col{
    padding-bottom:25px;
}

/* ===================================================== */
/* ===== INNOLABS TOP WEEK SECTION ===== */
/* ===================================================== */

.innolabs-theme-top-week{
    padding:70px 0;
    background:linear-gradient(120deg,#6a11cb,#d4145a,#f7971e);
    border-radius:20px;
    color:#fff;
}

/* title */

.innolabs-theme-top-week .section-title{
    font-size:36px;
    font-weight:700;
    margin-bottom:10px;
    color:#fff;
}

/* description */

.innolabs-theme-top-week .section-desc{
    font-size:16px;
    opacity:0.9;
    max-width:600px;
}

/* button */

.innolabs-theme-top-week .btn-view-all{
    background:#2f6df6;
    padding:12px 26px;
    color:#fff;
    font-weight:600;
    border-radius:40px;
}

.innolabs-theme-top-week .btn-view-all:hover{
    background:#1d56d8;
}
.woocommerce-loop-product__title{
display: block;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size:15px;
	 position: relative;
    padding-bottom: 10px;
}
.woocommerce-loop-product__title:after {
    content: "";
    width: 50px;
    height: 2px;
    background: #000;
    display: block;
    margin: 8px auto 0;
}
/* product card */


.innolabs-theme-top-week .price{
    color:#222;
}

/* slider arrows */

.innolabs-theme-top-week .flickity-prev-next-button{
    background:#fff;
    border-radius:50%;
    width:42px;
    height:42px;
}

.innolabs-theme-top-week .flickity-prev-next-button svg{
    fill:#333;
}

/* slider dots */

.innolabs-theme-top-week .flickity-page-dots .dot{
    background:#fff;
    opacity:.5;
}

.innolabs-theme-top-week .flickity-page-dots .dot.is-selected{
    opacity:1;
}

/* ===================================================== */
/* ===== INNOLABS PRODUCT NEW SLIDER ===== */
/* ===================================================== */

.innolabs-theme-product-new{
    padding:70px 0;
}


.category-page-row .product .onsale,
.innolabs-theme-product-new .onsale{
    right:15px;
    bottom:15px;
    top:auto;
    left:auto;
}

/* slider arrows */

.innolabs-theme-product-new .flickity-prev-next-button{
    background:#fff;
    width:44px;
    height:44px;
    border-radius:50%;
    box-shadow:0 5px 15px rgba(0,0,0,0.15);
}

.innolabs-theme-product-new .flickity-prev-next-button svg{
    fill:#333;
}

/* slider dots */

.innolabs-theme-top-week .flickity-page-dots .dot,
.innolabs-theme-product-new .flickity-page-dots .dot{
    background:#ccc;
    height:4px !important;
    width:18px !important;
    border-radius:0 !important;
}
.innolabs-theme-top-week .flickity-page-dots .dot.is-selected,
.innolabs-theme-product-new .flickity-page-dots .dot.is-selected{
    background:#2f6df6;
}

/* arrow position fix */

.innolabs-theme-product-new 
.slider-nav-push:not(.slider-nav-reveal) 
.flickity-prev-next-button{
    margin-top:0 !important;
    opacity:1 !important;
}
.image-tools .quick-view{
display:none !important;
}

.related-products-wrapper .product .box-image,
.category-page-row .product .box-image,
.product-small .box-image{
position:relative;
overflow:hidden;
}

.related-products-wrapper .product .box-image:before,
.category-page-row .product .box-image:before,
.product-small .box-image:before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.35);
opacity:0;
	pointer-events:none;
transition:0.3s;
}

.related-products-wrapper .product .box-image:after,
.category-page-row .product .box-image:after,
.product-small .box-image:after{
content:"Xem chi tiết";
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background:#e31e24;
color:#fff;
padding:10px 22px;
border-radius:30px;
font-size:14px;
opacity:0;
	pointer-events:none;
transition:0.3s;
}

.related-products-wrapper .product:hover .box-image:before,
.related-products-wrapper .product:hover .box-image:after,
.category-page-row .product:hover .box-image:before,
.category-page-row .product:hover .box-image:after,
.product-small:hover .box-image:before,
.product-small:hover .box-image:after{
opacity:1;
}
.related-products-wrapper .row-small>.col,
.category-page-row .row-small>.col{
	padding:0 0 19px!important;
}
.related-products-wrapper .price-wrapper,
.category-page-row .price-wrapper{
	text-align:center;
}
.related-products-wrapper .product .badge-container,
.category-page-row .product .badge-container,
.innolabs-list-theme .badge-container{
	left:auto!important;
	right:10px !important;
}


.woocommerce-tabs ul.tabs {
    display: none !important;
}

.woocommerce-Tabs-panel--description h2 {
    display: none;
}
.woocommerce-tabs ul.tabs li:not(.description_tab) {
    display: none !important;
}
.shop-page-title h1 {
	display:none!important;
}
.single_add_to_cart_button{
	background:#1d72dc!important;
}
.related-products-wrapper .product .title-wrapper,
.category-page-row .product .title-wrapper
{
	text-align:center;
}
.widget_price_filter{
display:block !important;
}
.innolab-product-categories .product-small {
    all: unset;
}
.innolab-product-categories .product{
    text-align:center;
transform:scale(0.9);
    box-shadow:0 5px 15px rgba(0,0,0,0.15);
    transition:all 0.3s ease;
}
.innolab-product-categories .product:hover{
    transform:scale(0.9) translateY(-8px);

}

.innolabs-theme-top-week .slider-nav-push:not(.slider-nav-reveal) .flickity-prev-next-button {
	display:none;
}
/* Thiết lập cho màn hình từ 1700px trở lên */
@media screen and (min-width: 1700px) {
    .partner-scroll-column > .col-inner {
        max-height: none !important; /* Loại bỏ giới hạn chiều cao */
        overflow-y: visible !important; /* Hiển thị toàn bộ, không tạo thanh cuộn */
    }
	.innolabs-gallery-custom .gallery-col .box-image{
		width:80px;
	}
	.service-banner {
		margin-bottom:8rem!important;
	}
	.section-evident{
		padding:1rem 0 !important;
	}
	.service-banner-mobile-app{
		margin-bottom:2rem;
	}
.homepage-slider-bullet .flickity-viewport{
  height:270px !important;
}

.homepage-slider-bullet .row{
  min-height:270px;
}
}
	/* 1. Loại bỏ khoảng cách của thẻ p */
.innolabs-info-grid .text p, 
.innolabs-info-grid p {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.innolabs-info-grid .col .col-inner{
	    display: flex;
    justify-content: center;
    align-items: center;
	text-align:center;
}

/* 2. Loại bỏ khoảng cách mặc định của khối text trong Flatsome */
.innolabs-info-grid .text {
    margin-bottom: 0 !important;
}

/* 3. Nếu các ô vẫn còn khoảng trống bên dưới, đó là do padding của col-inner */
.innolabs-info-grid .col-inner {
    padding-bottom: 0 !important;
}
.introduce-section-value-right h3{
	margin-bottom:.2rem !important
}
.introduce-section-value-right p{
	margin-bottom:1rem !important
}
.custom-job-section,
.introduce-section-value-right{
	padding-bottom:0px!important;
}
.contact-banner{
	height:900px
}

/*  */
/* ===== Tabs ===== */
.case-study-tabs .nav-tabs{
  border-bottom: none;
  gap: 10px;
	margin-bottom:1rem;
}

.case-study-tabs .nav-tabs li a{
  background: #f3f4f6;
  padding: 10px 20px;
  border-radius: 30px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.case-study-tabs .nav-tabs li.active a{
  background: #2563eb;
  color: #fff;
}

.case-study-tabs .nav-tabs li a:hover{
  background: #2563eb;
  color: #fff;
}

/* ===== Card bài viết ===== */
.case-study-tabs .post-item{
  padding: 10px;
}

.case-study-tabs .box-blog-post{
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 5px 15px rgba(0,0,0,0.15);
  transition: all 0.35s ease;
}

.case-study-tabs .box-blog-post:hover{
  transform: translateY(-8px);
}

/* ===== Image zoom ===== */
.case-study-tabs .box-image img{
  transition: transform 0.4s ease;
}

.case-study-tabs .box-blog-post:hover img{
  transform: scale(1.08);
}

/* ===== Title ===== */
.case-study-tabs .post-title a{
  font-size: 18px;
  font-weight: 600;
  color: #111;
}

.case-study-tabs .post-title a:hover{
  color: #2563eb;
}

/* ===== Button ===== */
.case-study-tabs .button{
  border-radius: 25px;
  padding: 8px 18px;
  border: 2px solid #2563eb;
  color: #2563eb;
  transition: all 0.3s ease;
}

.case-study-tabs .button:hover{
  background: #2563eb;
  color: #fff;
}
.case-study-tabs .nav-tabs+.tab-panels{
	border:none!important;
	padding:0!important;
}
/* ===== Slider arrows ===== */
.flickity-prev-next-button{
  background: #2563eb;
  width: 40px;
  height: 40px;
}
.innolabs-blog-page-category-right,
.innolabs-blog-page-category-left {
	padding:15px 0;
}
.innolabs-blog-page-category-left .category-parent{
	padding:7px 15px 7px;
}
.innolabs-blog-page-category-right .category-child{
	padding:5px 10px;
}

.flickity-prev-next-button .arrow{
  fill: #fff;
}
.innolabs-mega-menu{
	padding:0!important;
}
.innolabs-mega-menu .icon-inner{
	width: 15px !important;
    height: 15px !important;

}
.innolabs-mega-menu .icon-box-img{
	margin-top:10px !important;
}
.innolabs-mega-menu .col-inner>.img:not(:last-child){
	margin-bottom:0rem
}
.innolabs-mega-menu .icon-box-text h4{
	margin-top:.5em!important;
}
.quick-view{
	display:none!important;
	opacity:0!important;
}
.image-tools {
    display: none !important;
		opacity:0!important;

}
.innolabs-design-web-pricing .col-inner ul{
	margin-top:1rem;
}
.innolabs-design-web-pricing .col-inner ul li{
	margin-left:0px !important;
	
}