@media only screen and (max-width: 48em) {
.mep-banner-content {
  width: 100% !important;
}
}


@media screen and (min-width: 850px) {
  .nam .large-2{
    flex-basis: 19.667% !important;
    max-width: 19.667% !important;
  }
}

/* --- CẤU TRÚC CHUNG CỦA BANNER (ĐÃ FIX EQUAL HEIGHT) --- */
.digibiz-mep-banner {
    position: relative !important;
    border-radius: 12px !important;
    padding: 45px 40px !important;
    
    /* FIX LỖI CHIỀU CAO: Ép banner luôn chiếm 100% chiều cao của cột Row Flatsome */
    height: 100% !important;    
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important; /* Đẩy nội dung và nút bấm xa nhau để cân bằng đáy */
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center bottom !important; 
    background-repeat: no-repeat !important;
    box-sizing: border-box !important;
}

.mep-banner-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    transition: background 0.3s ease;
}

/* Biến khối nội dung thành flex-container để tự động dãn */
.mep-banner-content {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 60%;
    height: 100% !important;
    flex-grow: 1 !important; /* Chiếm trọn không gian trống */
}

.mep-banner-header {
    display: flex !important;
    align-items: flex-start !important;
    gap: 15px !important;
    margin-bottom: 20px !important;
}

.mep-badge-number {
    font-size: 16px !important;
    font-weight: bold !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.mep-banner-title {
    font-size: 24px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    font-weight: 700 !important;
}

.mep-banner-desc {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 25px !important;
    
    /* FIX CÂN BẰNG: Tự động dãn khoảng trống bên dưới văn bản để ép nút xuống đáy */
    flex-grow: 1 !important; 
}

/* Khối bọc nút bấm */
.mep-banner-content > div:last-child {
    margin-top: auto !important; /* Đảm bảo nút luôn nằm sát đáy dù chữ ở trên ngắn hay dài */
}

.mep-banner-btn {
    display: inline-flex !important;
    align-items: center !important;
    padding: 12px 26px !important;
    font-size: 13px !important;
    font-weight: bold !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.mep-btn-arrow {
    margin-left: 8px !important;
    font-size: 15px !important;
    transition: transform 0.2s ease !important;
}

.mep-banner-btn:hover .mep-btn-arrow {
    transform: translateX(4px) !important;
}


/* --- PHÂN TÁCH BIẾN THỂ MÀU SẮC --- */

/* 1. LỰA CHỌN NỀN TỐI (STYLE DARK) */
.digibiz-mep-banner.style-dark .mep-banner-overlay {
    background: linear-gradient(90deg, rgba(0, 43, 102, 0.93) 0%, rgba(0, 43, 102, 0.6) 100%) !important;
}
.digibiz-mep-banner.style-dark .mep-banner-content { color: #ffffff !important; }
.digibiz-mep-banner.style-dark .mep-badge-number { border: 2px solid rgba(255, 255, 255, 0.8) !important; color: #ffffff !important; }
.digibiz-mep-banner.style-dark .mep-banner-title { color: #ffffff !important; }
.digibiz-mep-banner.style-dark .mep-banner-desc { color: rgba(255, 255, 255, 0.9) !important; }
.digibiz-mep-banner.style-dark .mep-banner-btn { border: 1px solid #ffffff !important; color: #ffffff !important; }
.digibiz-mep-banner.style-dark .mep-banner-btn:hover { background-color: #ffffff !important; color: #002b66 !important; }

/* 2. LỰA CHỌN NỀN SÁNG (STYLE LIGHT) */
.digibiz-mep-banner.style-light .mep-banner-overlay {
    background: linear-gradient(90deg, rgba(244, 248, 255, 0.95) 0%, rgba(244, 248, 255, 0.65) 100%) !important;
}
.digibiz-mep-banner.style-light .mep-banner-content { color: #333333 !important; }
.digibiz-mep-banner.style-light .mep-badge-number { border: 2px solid #002b66 !important; color: #002b66 !important; }
.digibiz-mep-banner.style-light .mep-banner-title { color: #002b66 !important; }
.digibiz-mep-banner.style-light .mep-banner-desc { color: #555555 !important; }
.digibiz-mep-banner.style-light .mep-banner-btn { border: 1px solid #002b66 !important; color: #002b66 !important; background-color: transparent !important; }
.digibiz-mep-banner.style-light .mep-banner-btn:hover { background-color: #002b66 !important; color: #ffffff !important; }



/* ==========================================================================
   TÙY BIẾN BOX DỰ ÁN DẠNG ĐÓNG KHUNG TRẮNG (DỰ ÁN TIÊU BIỂU)
   ========================================================================== */

/* 1. Thiết lập khung màu trắng, đổ bóng và bo góc cho item */
.portfolio-element-wrapper .portfolio-box.box {
    background-color: #ffffff !important;
    border-radius: 12px !important; /* Bo góc mịn cho khung */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important; /* Đổ bóng nhẹ sang trọng */
    overflow: hidden !important; /* Đảm bảo ảnh hoặc nền không bị tràn góc bo */
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    border: 1px solid #eef2f5 !important; /* Viền mờ bao quanh khung */
    height: 100% !important;
}

/* Hiệu ứng nổi lên nhẹ khi di chuột vào khung (Hover) */
.portfolio-element-wrapper .portfolio-box.box:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
}

/* 2. Cấu hình lại phần chứa ảnh phía trên */
.portfolio-element-wrapper .box-image {
    border-radius: 0 !important; /* Ảnh vuông khớp góc phía trên */
    overflow: hidden !important;
}

/* 3. Cấu hình lại phần text nội dung phía dưới */
.portfolio-element-wrapper .box-text {
    background-color: #ffffff !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 20px !important;
    padding-top: 5px !important;
}

/* 4. Định dạng tiêu đề dự án */
.portfolio-element-wrapper .portfolio-box-title a {
    color: #0f294d !important; /* Màu xanh đen sang trọng */
    transition: color 0.2s ease !important;
}

.portfolio-element-wrapper .portfolio-box-title a:hover {
    color: #0056b3 !important; /* Đổi màu xanh chủ đạo khi hover */
}

/* 5. Định dạng icon và text phần Địa chỉ / Giải pháp */
.portfolio-element-wrapper .portfolio-box-location i,
.portfolio-element-wrapper .portfolio-box-solution i {
    font-size: 14px !important;
    width: 16px !important;
    display: inline-block !important;
}

.portfolio-element-wrapper .portfolio-box-location span,
.portfolio-element-wrapper .portfolio-box-solution {
    color: #4a5568 !important; /* Màu chữ xám dễ đọc */
}

/* 6. Định dạng nút Xem chi tiết giống ảnh mẫu */
.portfolio-element-wrapper .view-details-link {
    margin-top: 5px !important;
    border-bottom: 1px solid transparent !important;
    transition: all 0.2s ease !important;
}

.portfolio-element-wrapper .view-details-link:hover {
    color: #003d82 !important;
    padding-left: 4px !important; /* Dịch nhẹ mũi tên khi hover */
}


.box {
  background-color: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  border: 1px solid #eef2f5 !important;
  height: 100% !important;
  padding-top: 20px;
}

.box .col{
  border-right: 1px solid #eef2f5 !important;
}

.company-info p {
  margin-bottom: 0.3em;
  font-size: 90%;
}

.company-info i[class^="icon-"]
{
  color: #0066cc;
}

/* ==========================================================================
   GHI ĐÈ ICON MŨI TÊN FLATSOME SANG MŨI TÊN THUỒN (→ VÀ ←)
   ========================================================================== */

/* 1. Mũi tên bên phải (Right Arrow) */
.icon-angle-right:before {
    content: "→" !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; /* Đổi font để tránh bị lỗi font icon Flatsome */
    font-weight: normal !important;
}

/* 2. Mũi tên bên trái (Left Arrow - Ngược lại) */
.icon-angle-left:before {
    content: "←" !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-weight: normal !important;
}

/* 3. Tùy chỉnh bổ trợ (Nếu icon bị lệch dòng hoặc quá nhỏ) */
.icon-angle-right, 
.icon-angle-left {
    font-style: normal !important;
    display: inline-block !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}


.gt_container-bqblzj .gt_switcher {
  width: 119px !important;
}

a.glink img {
  margin: 0 3px !important;
}