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

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


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


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

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


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
}
/* Full width không bị lệch */
.category-projects  {
    width: 80vw !important; 
}
/* Ẩn hoàn toàn cột Sidebar trong danh mục dự án */
.is-project-fullwidth .post-sidebar.large-3 {
    display: none !important;
}
/* TỐI ƯU MOBILE CHO LAYOUT  */
@media (max-width: 767px) {
    /* 1. Dãn khung trên mobile để không bị quá hẹp */
    .category-projects, .is-project-fullwidth {
        width: 100% !important;
    }
    /* 2. Tối ưu dải đen thông tin dự án */
    .intercons-project-strip {
        padding: 20px 10px !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* Chia 2 cột cực đẹp trên mobile */
        gap: 20px 0 !important;
        border-radius: 0 !important; /* Mobile nên để phẳng hoàn toàn */
    }
    /* 3. Chỉnh lại các item bên trong */
    .intercons-item {
        border-right: none !important;
        padding: 5px 10px !important;
        border-bottom: 1px solid rgba(255,255,255,0.05); /* Thêm gạch ngang nhẹ */
    }
    /* Vạch ngăn dọc chỉ hiện cho cột bên trái */
    .intercons-item:nth-child(odd) {
        border-right: 1px solid rgba(255,255,255,0.1) !important;
    }
    /* Xóa gạch ngang cho 2 item cuối */
    .intercons-item:nth-last-child(-n+2) {
        border-bottom: none !important;
    }
    /* Hạ size chữ một chút cho tinh tế */
    .intercons-label {
        font-size: 14px !important;
    }
    .intercons-value {
        font-size: 13px !important;
    }
    /* 4. Đảm bảo content bài viết luôn 100% trên mobile */
    .large-9.col {
        width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}
/* Container dải đen Intercons */
.intercons-project-strip {
    background-color: #202020;
    display: flex;
    flex-wrap: wrap;
    padding: 30px 20px;
    border-radius: 12px;
    margin-bottom: 35px;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.05); /* Viền cực mảnh cho sang */
}

/* Từng cột thông tin */
.intercons-item {
    flex: 1;
    text-align: center;
    position: relative;
    padding: 0 15px;
}

/* Vạch ngăn cách */
.intercons-item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 15%;
    height: 70%;
    width: 1px;
    background: rgba(255, 255, 255, 0.15);
}

/* Label & Value */
.intercons-label {
    display: block;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    text-transform: none; /* Giữ nguyên chữ hoa thường như mẫu */
}

.intercons-value {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    font-weight: 400;
}

/* Responsive cho Mobile */
@media (max-width: 767px) {
    .intercons-project-strip {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 25px 0;
        padding: 25px 15px;
    }
    
    .intercons-item:not(:last-child)::after {
        display: none;
    }
    
    .intercons-item:nth-child(odd) {
        border-right: 1px solid rgba(255, 255, 255, 0.1);
    }
}
/* Box Container */
.project-info-box {
    background: #fcfcfc;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

/* Mô tả ngắn */
.p-desc {
    font-size: 0.95em;
    color: #555;
    line-height: 1.6;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
}

/* Grid layout */
.p-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

/* Từng item thông tin */
.p-item {
    flex: 1;
    min-width: 140px;
    border-left: 3px solid #446084; /* Màu xanh đặc trưng của Flatsome */
    padding-left: 12px;
}

.p-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    color: #999;
    font-weight: 600;
    margin-bottom: 2px;
}

.p-value {
    display: block;
    font-size: 15px;
    color: #111;
    font-weight: 700;
}

/* Responsive cho Mobile */
@media (max-width: 600px) {
    .p-item {
        flex: 0 0 calc(50% - 15px); /* Chia 2 cột trên điện thoại */
    }
}
/* CSS Form Subscribe */
.subscribe-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  background: #2a2a2a !important;
  border: 1px solid #555 !important;
  border-radius: 50px !important;
  padding: 5px 5px 5px 22px !important;
  gap: 10px !important;
  height: 52px !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.subscribe-row .wpcf7-form-control-wrap {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

.subscribe-row input[type="email"] {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: 15px !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 100% !important;
  line-height: 1 !important;
}

.subscribe-row input[type="email"]::placeholder {
  color: #999 !important;
}

.subscribe-row input[type="submit"] {
  background: #b11f64 !important;
  border: none !important;
  border-radius: 50px !important;
  color: #fff !important;
  padding: 0 22px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  height: 42px !important;
  position: absolute !important;
  right: -10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.subscribe-row input[type="submit"]:hover {
  background: #fff !important;
}
/* Font chữ */
h1, h2, h3 {
  font-family: 'Playfair Display', serif !important;
}
/* 1. Bo góc phần khung ảnh của Image Box và giấu phần thừa */
.service-card-box .box-image {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    margin-bottom: 20px; /* Tạo khoảng cách giữa ảnh và chữ bên dưới */
}

/* 2. Hiệu ứng zoom ảnh khi rê chuột vào Card */
.service-card-box .box-image img {
    transition: transform 0.6s ease !important; /* Thêm !important để ghi đè mặc định của theme */
}
.service-card-box:hover .box-image img {
    transform: scale(1.05) !important; 
}

/* 3. Tạo nút "+" nổi lên ở góc phải bên dưới của ảnh (Đã sửa lỗi căn giữa) */
.service-card-box .box-image::after {
    content: '+';
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 44px;
    height: 44px;
    background-color: #ffffff;
    color: #b11f64;
    font-size: 28px;
    font-weight: 300;
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 3px; 
}

/* 4. Hiệu ứng đổi màu và xoay nút "+" khi hover vào Card */
.service-card-box:hover .box-image::after {
    background-color: #b11f64;
    color: #ffffff;
    transform: rotate(90deg);
}

/* --- CSS CHO KHỐI ĐÁNH GIÁ --- */
.testimonial-card {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Đổ bóng nhẹ để khối nổi lên khỏi nền */
    margin-bottom: 20px;
}

/* Ép ảnh bên phải luôn phủ kín cột dù nội dung bên trái dài hay ngắn */
.testimonial-card .col:last-child .img-inner {
    height: 100%;
}
.testimonial-card .col:last-child img {
    height: 100%;
    object-fit: cover;
}
/* 1. Đưa mũi tên nhô lên phía trên khối Slider */
.testimonial-slider-custom .flickity-prev-next-button {
    top: -65px; 
    transform: translateY(0) !important;
    width: 44px; 
    height: 44px;
    background-color: transparent !important; 
    border: 1px solid #b11f64 !important; 
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: 10;
    opacity: 1 !important; 
    visibility: visible !important;
}

/* 2. Đổi màu biểu tượng mũi tên bên trong thành màu cam */
.testimonial-slider-custom .flickity-prev-next-button svg {
    fill: #b11f64;
}

/* 3. Canh vị trí Nút Next (Trượt sang phải) - Đẩy vào 15px để vừa khít lề phải */
.testimonial-slider-custom .flickity-prev-next-button.next {
    right: 15px !important; 
}

/* 4. Canh vị trí Nút Previous (Trượt sang trái) - Nằm cạnh nút Next */
.testimonial-slider-custom .flickity-prev-next-button.previous {
    left: auto !important; 
    right: 69px !important; /* Đã tính toán: 15px (lề Next) + 44px (nút Next) + 10px (khoảng cách 2 nút) = 69px */
}

/* 5. Hiệu ứng Hover: Nền chuyển cam, mũi tên chuyển trắng */
.testimonial-slider-custom .flickity-prev-next-button:hover {
    background-color: #b11f64 !important;
}
.testimonial-slider-custom .flickity-prev-next-button:hover svg {
    fill: #ffffff;
}

/* 6. Tối ưu Mobile: Trả mũi tên về lại vị trí giữa ảnh cho dễ bấm */
@media (max-width: 768px) {
    .testimonial-slider-custom .flickity-prev-next-button {
        top: 50%;
        transform: translateY(-50%) !important;
        width: 36px;
        height: 36px;
    }
    .testimonial-slider-custom .flickity-prev-next-button.previous {
        left: 10px !important;
        right: auto !important;
    }
    .testimonial-slider-custom .flickity-prev-next-button.next {
        right: 10px !important;
    }
}

/* =========================================
   CSS CHO THẺ DỰ ÁN (OVERLAY HOVER CHỨA 3 CỘT THÔNG SỐ)
========================================= */

/* 1. Thiết lập khung tổng: Bo góc và giới hạn hiển thị */
.project-overlay-box {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 15px; /* Thêm khoảng cách để không bị dính vào Tên dự án ở dưới */
}

/* 2. Xóa khoảng cách thừa mặc định của Image Box */
.project-overlay-box .box-image {
    margin-bottom: 0 !important;
}

/* 3. Hiệu ứng zoom ảnh khi hover */
.project-overlay-box .box-image img {
    transition: transform 0.6s ease !important;
}
.project-overlay-box:hover .box-image img {
    transform: scale(1.05) !important; 
}

/* 4. Biến phần Text thành lớp Overlay đen mờ 60% */
.project-overlay-box .box-text {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(17, 17, 17, 0.6); /* Nền đen, trong suốt 60% để thấy rõ ảnh */
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    opacity: 0; /* Ẩn mặc định */
    transition: all 0.4s ease;
    z-index: 10;
    pointer-events: none; /* Tránh cản trở việc click vào link */
    padding: 0; /* Bỏ padding mặc định */
}
.project-overlay-box:hover .box-text {
    opacity: 1; /* Hiện ra khi hover */
}

/* =========================================
   5. CSS CHO 3 CỘT THÔNG SỐ (Hạng mục | Quy mô | Địa điểm)
========================================= */

/* Khung chứa 3 thông số */
.project-overlay-box .info-stats {
    display: flex;
    align-items: center;
    transform: translateY(20px); /* Kéo chữ tụt xuống 20px */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.project-overlay-box:hover .info-stats {
    transform: translateY(0); /* Trượt lên giữa ảnh khi hover */
}

/* Từng cột thông số: Tạo vách ngăn trắng mờ */
.project-overlay-box .stat-col {
    padding: 0 15px;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.4); 
}
.project-overlay-box .stat-col:last-child {
    border-right: none; /* Xóa vách ngăn ở cột cuối */
}

/* Chữ tiêu đề nhỏ (Hạng mục, Quy mô) */
.project-overlay-box .stat-label {
    display: block; color: #dddddd; font-size: 0.85em; margin-bottom: 4px;
}
/* Chữ giá trị (Fit-out, 1500m2...) */
.project-overlay-box .stat-value {
    display: block; color: #ffffff; font-size: 1.1em; font-weight: 600;
}

/* =========================================
   6. TỐI ƯU CHO MOBILE
========================================= */
@media (max-width: 768px) {
    .project-overlay-box .box-text {
        opacity: 1; /* Luôn hiện trên mobile */
        background-color: rgba(17, 17, 17, 0.5); 
    }
    .project-overlay-box .info-stats {
        transform: translateY(0); /* Tắt hiệu ứng trượt */
        flex-wrap: wrap; /* Tự rớt dòng nếu màn hình điện thoại quá hẹp */
        justify-content: center;
    }
    .project-overlay-box .stat-col {
        padding: 0 10px;
    }
}
/* =========================================
   CSS CHO SECTION BLOG (CẢM HỨNG THIẾT KẾ) - BẢN HOÀN THIỆN
========================================= */

/* 1. Header Section: Tiêu đề và nút Xem tất cả ngang hàng */
.io-blog-header {
    display: flex;
    justify-content: space-between;
    align-items: center; 
    margin-bottom: 30px;
    width: 100%;
    /* ĐÃ XÓA border-bottom và padding-bottom thừa */
}

/* "Diệt" khoảng trắng thừa của WordPress */
.io-blog-header p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1;
}

.io-blog-header .blog-heading {
    margin: 0 !important;
    color: #ffffff;
    font-size: 36px;
    line-height: 1;
}

/* Tùy chỉnh nút Xem tất cả (Chống rớt dòng) */
.io-blog-header .view-all-link {
    color: #ffffff;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.3s ease;
    display: inline-flex !important;
    align-items: center;
    gap: 5px; 
    white-space: nowrap !important; 
}
.io-blog-header .view-all-link:hover {
    color: #ff9900; /* Vẫn giữ chữ màu cam cho riêng nút Xem tất cả để khách dễ bấm */
}

/* 2. Căn chỉnh khoảng cách các bài viết */
.io-blog-grid .box-text {
    padding: 20px 0 0 0 !important; 
}

/* 3. Hiệu ứng Hình ảnh bài viết */
.io-blog-grid .box-image {
    overflow: hidden;
}
.io-blog-grid .box-image img {
    transition: transform 0.6s ease;
}
.io-blog-grid .post-item:hover .box-image img {
    transform: scale(1.05); 
}


/* 5. Tiêu đề bài viết - CĂN BẰNG ĐÁY CHUẨN XÁC & BỎ HOVER CAM */
.io-blog-grid .post-title {
    font-size: 1.3em;
    line-height: 1.4;
    color: #ffffff;
    margin-bottom: 10px; 
    height: 4.2em; 
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 6. Trích dẫn (Excerpt) */
.io-blog-grid .from_the_blog_excerpt {
    color: #888888;
    font-size: 1em;
    line-height: 1.4;
    margin-bottom: 0;
    
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 7. Giấu triệt để các phần thừa */
.io-blog-grid .post-date, 
.io-blog-grid .is-divider {
    display: none !important;
}

/* 8. Tối ưu Header cho Mobile */
@media (max-width: 768px) {
    .io-blog-header {
        align-items: center;
        margin-bottom: 20px;
    }
    .io-blog-header .blog-heading {
        font-size: 26px;
    }
}


/* =========================================
   CSS CHO SECTION CTA (CALL TO ACTION)
========================================= */

/* 1. Căn giữa cột chữ theo chiều dọc (Chỉ áp dụng trên máy tính) */
@media (min-width: 850px) {
    .io-cta-text-col {
        display: flex;
        flex-direction: column;
        justify-content: center; /* Đẩy chữ vào ngay giữa cột */
        padding-right: 40px; /* Cách xa hình ảnh một chút cho thoáng */
    }
    
    /* 2. Đẩy cột ảnh bên phải xuống 60px để tạo hiệu ứng so le (Masonry) */
    .io-stagger-col {
        margin-top: 60px;
    }
}

/* 3. Bo góc và tạo hiệu ứng Hover cho toàn bộ 4 bức ảnh */
.io-cta-image {
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 20px; /* Khoảng cách giữa ảnh trên và ảnh dưới */
}

/* Chống bể layout ảnh */
.io-cta-image img {
    width: 100%;
    display: block;
    transition: transform 0.6s ease !important;
}

/* Hover zoom ảnh */
.io-cta-image:hover img {
    transform: scale(1.05) !important;
}

/* 4. Tối ưu Mobile (Giao diện chuẩn App) */
@media (max-width: 768px) {
    .io-cta-text-col {
        margin-bottom: 30px; 
        text-align: center; /* Căn giữa chữ trên mobile cho đẹp */
    }
	

/* Hover button */
.button-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.button-hover:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.button-hover:active {
  transform: scale(0.98);
}


/* =========================================
   CSS SECTION BÁO CHÍ (DÙNG IMAGE UX BUILDER)
========================================= */

/* 1. Khoảng cách cột */
.io-press-col {
    margin-bottom: 30px;
}

/* 2. Ép ảnh Image mặc định của UX Builder Zoom khi hover cột */
.io-press-col .img-inner {
    overflow: hidden !important; /* Giữ ảnh không bị trào ra ngoài khung khi zoom */
}
.io-press-col .img-inner img {
    transition: transform 0.6s ease !important;
}
.io-press-col:hover .img-inner img {
    transform: scale(1.05) !important; /* Zoom ảnh 5% */
}

/* 3. Khoảng cách phần Text cho khớp với Blog */
.io-press-box-text {
    padding: 20px 0 0 0;
}

/* 4. Xử lý Logo báo chí */
.io-press-box-text .press-logo {
    height: 20px; /* Nhỏ nhắn cho tinh tế */
    width: auto;
    margin-bottom: 12px;
    display: block;
    
    /* Mặc định là xám mờ */
    filter: grayscale(100%) brightness(150%) opacity(70%);
    transition: all 0.4s ease;
}
/* Hover cả cột thì Logo hiện màu gốc */
.io-press-col:hover .press-logo {
    filter: grayscale(0%) brightness(100%) opacity(100%);
}

/* 5. Tiêu đề bài báo (Cắt ở dòng 3) */
.io-press-box-text .post-title {
    font-size: 1.25em;
    line-height: 1.4;
    color: #ffffff;
    margin-bottom: 10px;
    margin-top: 0;
    transition: color 0.3s ease;
    
    /* Ép hiển thị tối đa 3 dòng */
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.io-press-box-text .post-title a {
    color: inherit;
    text-decoration: none;
}

/* 6. Trích dẫn (Excerpt) - Giới hạn 3 dòng */
.io-press-box-text .from_the_blog_excerpt {
    color: #888888;
    font-size: 0.9em;
    line-height: 1.6;
    margin-bottom: 0;
    
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tối ưu Mobile */
@media (max-width: 768px) {
    .io-press-box-text .press-logo {
        filter: grayscale(0%) brightness(100%) opacity(100%); /* Mobile luôn hiện màu Logo */
    }
}
/* CSS CHO GIÁ TRỊ CỐT LÕI */
/* Đường kẻ mỏng phía trên số */
.io-value-item::before {
    content: "";
    display: block;
    width: 40px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.3);
    margin-bottom: 20px;
}

/* Số thứ tự 01, 02... */
.value-num {
    display: block;
    color: #888888;
    font-size: 1.2em;
    margin-bottom: 15px;
}

@media (min-width: 768px) {
    .row-reverse-pc {
        display: flex !important;
        flex-direction: row-reverse !important; /* Đảo Ảnh sang trái, Chữ sang phải */
    }
    
  
@media (max-width: 768px) {
    .io-value-item {
        padding: 40px 20px 20px 20px; /* Thu nhỏ khoảng cách */
    }
}