/*
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  ***************/
/*    Gioi thieu*/
    @font-face {
        font-family: 'SVN-Gilroy';
        src: url('http://localhost/thprint.local/wp-content/themes/flatsome-child/fonts/Font-Gilroy-VH-Full/SVN-Gilroy Regular.otf') format('otf'),
        url('http://localhost/your-local-site/wp-content/themes/flatsome-child/fonts/Font-Gilroy-VH-Full/SVN-Gilroy-Regular.woff') format('otf');
        font-weight: normal;
        font-style: normal;

    }

    /*@font-face {*/
    /*    font-family: 'SVN-Gilroy';*/
    /*    src: url('http://localhost/your-local-site/wp-content/themes/your-theme/fonts/SVN-Gilroy-Bold.woff2') format('woff2'),*/
    /*    url('http://localhost/your-local-site/wp-content/themes/your-theme/fonts/SVN-Gilroy-Bold.woff') format('woff');*/
    /*    font-weight: bold;*/
    /*    font-style: normal;*/
    /*}*/

}
body {
    font-family: 'SVN-Gilroy' !important;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'SVN-Gilroy' !important;
}
/*    Gioi thieu*/
.gioithieu {
    width: fit-content;
    border-bottom: 3px solid #f15a24;
}
/*button lienhe*/
.lienhebutton {
    background-color: transparent;
    color: #f15a24;
    border: 3px solid #f15a24;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 10px;
}

.lienhebutton:hover {
    background-color: #f15a24;
    color: #fff;
}
/*!*dichvuinan*!*/
/*display: flex;*/
/*flex-direction: column;*/
/*align-items: center;*/
/*justify-content: center;*/
/*background-color: #fff;*/
/*border-radius: 8px;*/
/*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
/*padding: 30px;*/
/*width: 90%;*/
/*max-width: 700px;*/
/*}*/

.banner1 img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 20px;
}

.title1 {
    font-size: 24px;
    font-weight: bold;
    color: #f7911f;
    margin-bottom: 10px;
}

.description1 {
    font-size: 16px;
    color: #333;
    margin-bottom: 20px;
}

.cta-button1 {
    /*padding: 15px 30px;*/
    background-color: #f7911f;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-transform: uppercase;
   
}

.cta-button1:hover {
    background-color: #e6b800;
}
/*logo đối tác*/
.partner-section {
    background-color: #fff;
    padding: 40px 20px;
    text-align: center;
}

.partner-section h2 {
    color: #555;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 30px;
}

.logo-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.logo-grid img {
    max-width: 120px;
    height: auto;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.logo-grid img:hover {
    filter: grayscale(0%);
}

@media (max-width: 768px) {
    .logo-grid {
        gap: 20px;
    }

    .logo-grid img {
        max-width: 80px;
    }
}
/*box gui mail*/
.newsletter-section {
    background-color: #0d4a4a; /* màu nền xanh đậm */
    color: #fefde8; /* màu chữ kem nhạt */
    padding: 40px 20px;
    text-align: center;
}

.newsletter-section h2 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 25px;
    color: #fff;
}

.newsletter-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.newsletter-form input[type="email"] {
    padding: 15px 20px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    outline: none;
    width: 250px;
}

.newsletter-form button {
    padding: 1px 2px;
    font-size: 16px;
    font-weight: 600;
    background-color: transparent;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s;
    height:40px;
}

.newsletter-form button:hover {
    background-color: #ffffff;
    color: #0d4a4a;
}
.mission-zigzag {
    max-width: 1000px;
    margin: 0 auto;
    padding: 50px 20px;
}

.mission-zigzag h2 {
    text-align: center;
    margin-bottom: 50px;
    text-transform: uppercase;
    font-size: 26px;
    color: #222;
}

.mission-item {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    gap: 30px;
}

.mission-item.left {
    flex-direction: row;
}

.mission-item.right {
    flex-direction: row-reverse;
}

.mission-icon i {
    font-size: 40px;
    background: #f7911f;
    color: white;
    padding: 20px;
    border-radius: 50%;
    display: inline-block;
    min-width: 80px;
    text-align: center;
}

.mission-content h4 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #111;
}

.mission-content p {
    font-size: 15px;
    line-height: 1.7;
    color: #444;
}

/*footer*/
/*.th-footer {*/
/*    background: #f7911f;*/
/*    color: #fff;*/
/*    padding: 40px 20px;*/
/*    font-family: 'Arial', sans-serif;*/
/*}*/

/*.footer-container {*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    flex-wrap: wrap;*/
/*    max-width: 1200px;*/
/*    margin: auto;*/
/*    gap: 20px;*/
/*}*/

/*.footer-col {*/
/*    flex: 1 1 220px;*/
/*}*/

/*.footer-col h3 {*/
/*    margin-bottom: 15px;*/
/*    font-size: 18px;*/
/*    color: #ffcc00;*/
/*}*/

/*.footer-col p, .footer-col li {*/
/*    font-size: 14px;*/
/*    line-height: 1.6;*/
/*    margin-bottom: 10px;*/
/*}*/

/*.footer-col ul {*/
/*    list-style: none;*/
/*    padding: 0;*/
/*}*/
/*footer2*/
.thprint-footer {
    background: #f7911f;
    padding: 30px 20px;
    font-family: 'SVN-Gilroy';
    color: #333;
}
.newsletter-form button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;              /* chiếm toàn bộ chiều ngang form */
    max-width: 400px;         /* hoặc điều chỉnh chiều rộng tối đa */
    padding: 14px 24px;       /* tăng kích thước nút */
    font-size: 18px;          /* chữ to hơn */
    font-weight: 600;
    background-color: #ffffff; /* màu xanh (có thể đổi theo thương hiệu) */
    color: black;
    border: none;
    border-radius: 8px;       /* bo góc mềm mại */
    cursor: pointer;
    transition: background 0.3s ease;
    margin: 0 auto;           /* căn giữa nếu form nhỏ hơn 100% */
}

.newsletter-form button:hover {
    /*background-color: #0056b3; !* màu khi hover *!*/
}


.feature-box {
    display: flex;
    align-items: flex-start;
    flex: 1;
    border-right: 1px solid #ccc;
    padding: 0 10px;
}

.feature-box:last-child {
    border-right: none;
}

.feature-box img {
    width: 34px;
    height: 34px;
    margin-right: 10px;
    opacity: 0.6;
}

.feature-box h4 {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
}

.feature-box p {
    margin: 5px 0 0;
    font-size: 14px;
    color: #555;
}

.footer-company-info {
    display: flex;
    flex-wrap: wrap;
    gap: 140px;
    padding: 20px 0;
    border-top: 2px solid #ccc;
    padding-top: 30px;

}

.footer-company-info .info-column {
    flex: 1;
    min-width: 300px;
}

.footer-company-info h4 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    text-transform: uppercase;
    color: #ffffff;
}

.footer-company-info p {
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 1.6;
    color: rgb(85, 85, 85);
}

.footer-company-info i {
    margin-right: 6px;
    color: #fefefe	; /* cam nhẹ */
    width: 18px;
}
.footer-social {
    text-align: center;
    margin: 20px 0 5px;
}

.footer-social a {
    color: white;
    font-size: 20px;
    margin: 0 10px;
    opacity: 0.85;
    transition: all 0.3s ease;
}

.footer-social a:hover {
    opacity: 1;
    transform: scale(1.1);
}

.footer-copyright {
    text-align: center;
    font-size: 15px;
    margin-top: 15px;
    color: #fff;
    opacity: 0.85;
}
@media (max-width: 768px) {
    .footer-company-info {
        flex-direction: column;
        gap: 30px;
    }
    .footer-company-info .info-column {
        width: 100%;
    }
}
@media (max-width: 768px) {
    .thprint-feature-row {
        flex-direction: column;
        gap: 20px;
    }
    .feature-box {
        border-right: none;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255,255,255,0.2);
    }
    .feature-box:last-child {
        border-bottom: none;
    }
}
@media (max-width: 768px) {
    .footer-social, .footer-copyright, .footer-tagline {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
}

/*//*/
.thprint-why7{
    max-width:1200px; margin:40px auto; padding:0 15px; color:#fff;
}
.thprint-why7 h2{
    text-align:center; margin-bottom:30px; font-size:34px; font-weight:700; color:#fff;
}
.thprint-why7 h2 span{
    color:#ffe066; font-size:48px; font-weight:800; margin-right:6px;
}
.why-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.why-item {
    position: relative;
    padding: 22px 18px 18px 18px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    min-height: 160px;
    background: #fff; /* mặc định màu */
    color: #333;
}

/* Mục số 7 chiếm cả hàng */
.why-item.c7 {
    grid-column: span 2;
}
.why-item .num{
    position:absolute; top:-14px; left:-14px; width:36px; height:36px; border-radius:50%;
    background:#fff; color:#333; font-weight:700; display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.why-item h4{ margin:8px 0 8px; font-size:18px; font-weight:700; }
.why-item p{ margin:0; font-size:15px; line-height:1.55; }


.c1{ background:#ff9f1c; }
.c2{ background:#2ec4b6; }
.c3{ background:#e71d36; }
.c4{ background:#118ab2; }
.c5{ background:#9b5de5; }
.c6{ background:#06d6a0; }
.c7{ background:#f8961e; }

/* Responsive */
@media (max-width: 768px) {
    .why-grid {
        grid-template-columns: 1fr;
    }

    .why-item.c7 {
        grid-column: span 1; /* quay lại bình thường trên mobile */
    }
}





/* Đảm bảo các mục menu nằm trên cùng một dòng */
.header-nav .menu-item {
    display: inline-block; /* Đảm bảo các mục menu nằm trên cùng một dòng */
    position: relative; /* Để menu con có thể xuất hiện khi hover */
}

/*!* Đảm bảo các mục menu con (dropdown) phủ toàn bộ chiều rộng *!*/
/*.header-nav .menu-item .sub-menu {*/
/*    position: absolute;*/
/*    top: 100%; !* Đặt menu con dưới mục menu chính *!*/
/*    left: 0;*/
/*    width: 100%; !* Bao phủ chiều rộng đầy đủ của menu *!*/
/*    background-color: #FF6600; !* Màu nền cam cho menu con *!*/
/*    display: none; !* Ẩn menu con khi không hover *!*/
/*    padding: 10px 0; !* Thêm khoảng cách cho menu con *!*/
/*}*/

/*!* Hiển thị menu con khi hover *!*/
/*.header-nav .menu-item:hover .sub-menu {*/
/*    display: block; !* Hiển thị khi hover *!*/
/*}*/

/* Màu chữ và nền khi hover trên các mục menu chính */
.header-nav .menu-item a {
    font-family: 'SVN-Gilroy' !important;
    color: #222; /* Màu chữ mặc định */
    background-color: transparent; /* Nền trong suốt */
    padding: 10px 20px; /* Khoảng cách giữa các mục menu */
    text-decoration: none;

}

/* Nền cam và chữ trắng khi hover trên menu chính */
.header-nav .menu-item a:hover {
    background-color: #FF6600; /* Nền cam */
    color: white; /* Chữ trắng */
    border-radius: 5px;
}

/*!* Màu nền cho các mục menu con (dropdown) khi hover *!*/
.header-nav .menu-item .sub-menu li a {
    font-family: 'SVN-Gilroy' !important;
}

/* Đổi màu nền khi hover trên menu con */
.header-nav .menu-item .sub-menu li a:hover {
    background-color: #FF6600; /* Nền cam khi hover trên menu con */
}

.wpforms-form input[type="email"] {
    padding: 12px 20px;
    border-radius: 25px;
    border: none;
    width: 300px;
    max-width: 100%;
    margin: 10px 0;
}

.wpforms-submit {
    background-color: #f7911f;
    color: white;
    padding: 12px 24px;
    border-radius: 25px;
    border: none;
    margin-left: 10px;
}
/* Thay đổi màu nền nút khi hover hoặc trạng thái bình thường */
/* Áp dụng màu nền cho nút với class button primary .btn-banner */
/* Đảm bảo CSS của bạn có độ ưu tiên cao hơn */
/* CSS cho nút "LIÊN HỆ NGAY" */
.button.primary.btn-banner {
    background-color: #f7911f !important; /* Màu nền cam */
    color: white !important; /* Màu chữ trắng */
    padding: 12px 25px !important; /* Điều chỉnh khoảng cách bên trong nút */
    text-decoration: none !important; /* Bỏ gạch chân */
    border-radius: 5px !important; /* Viền bo tròn */
    display: inline-block !important; /* Đảm bảo nút hiển thị ngang hàng */
}

/* Hiệu ứng hover */
.button.primary.btn-banner:hover {
    background-color: #e87e1a !important; /* Màu cam đậm khi hover */
}
/* Container cho gallery */
/* Container cho gallery */
/*.row.anhnoibat {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(4, 1fr); !* 4 cột trên mỗi hàng *!*/
/*    gap: 15px; !* Khoảng cách giữa các ảnh *!*/
/*    grid-template-rows: auto auto; !* Hai hàng *!*/
/*    margin-top: 15px;*/
/*}*/

/*!* Cột trong gallery *!*/
/*.gallery-col {*/
/*    display: flex; !* Dùng Flexbox để căn chỉnh các ảnh bên trong *!*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*}*/

/*!* Các ảnh *!*/
.anhnoibat {
    border-radius: 8px;

    .box-image img {
        width: 100%; /* Đảm bảo ảnh chiếm hết chiều rộng của container */
        height: 260px; /* Chiều cao cố định cho ảnh */
        /*object-fit: cover; !* Đảm bảo ảnh không bị méo mà vẫn giữ được tỷ lệ *!*/
    }
}


/* Đảm bảo các ảnh không bị lệch nhau trong mọi kích thước màn hình */
/*@media (max-width: 1200px) {*/
/*    .row.anhnoibat {*/
/*        grid-template-columns: repeat(3, 1fr); !* 3 cột khi màn hình nhỏ *!*/
/*    }*/
/*}*/

/*@media (max-width: 768px) {*/
/*    .row.anhnoibat {*/
/*        grid-template-columns: repeat(2, 1fr); !* 2 cột khi màn hình rất nhỏ *!*/
/*    }*/
/*}*/
/*TRANGLOGO*/
.category-image-logo
{
    .box-image img {
        width: 100%;
        height: 160px;
    }
}
.timeline-custom {
    position: relative;
    padding: 240px 20px;
    font-family: 'SVN-Gilroy';
    color: white;
    overflow: hidden;
}

.timeline-title {
    text-align: center;
    font-size: 30px;
    margin-bottom: 70px;
}

.timeline-line {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 4px;
    background: white;
    z-index: 2;
}



.timeline-row {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: auto;
    position: relative;
    z-index: 2;
    flex-wrap: wrap;
}

.timeline-item {
    width: 22%;
    min-width: 200px;
    position: relative;
    text-align: center;
}

.timeline-item .content {
    background: white;
    color: #333;
    padding: 18px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    position: relative;
}
.timeline-item .content h4 {
    color: #F7911F;
}

/* Các box nằm ngoài timeline */
.timeline-item.top .content {
    height:230px;
    transform: translateY(-140px);
}

.timeline-item.bottom .content {
    height:230px;
    transform: translateY(145px);
}

/* Dot tròn giữa timeline */
.dot {
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 51%;
    transform: translate(-50%, -50%);
    z-index: 3; /* đảm bảo nằm TRÊN timeline */
    border: 4px solid #f7911f; /* tạo đường viền trùng màu nền */
}

/* Mũi nhọn tam giác DƯỚI (box TRÊN) */
.timeline-item.top .content::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 10px;
    background: white;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
}

/* Mũi nhọn tam giác TRÊN (box DƯỚI) */
.timeline-item.bottom .content::after {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 10px;
    background: white;
    clip-path: polygon(0 100%, 100% 100%, 50% 0);
}



@media screen and (max-width: 768px) {
    .timeline-row {
        flex-direction: column;
        align-items: center;
    }

    .timeline-item {
        width: 90%;
        margin-bottom: 80px;
    }

    .timeline-item.top .content,
    .timeline-item.bottom .content {
        transform: none;
    }

    .timeline-line {
        top: auto;
        bottom: 0;
        height: 4px;
    }

    .dot {
        top: auto;
        bottom: -30px;
    }

    .timeline-item.top .content::after,
    .timeline-item.bottom .content::after {
        top: auto;
        bottom: -10px;
        clip-path: polygon(50% 100%, 0 0, 100% 0);
    }
}
/*TRANG CATALOGUE*/
.button.primary.btn-banner1 {
    background-color: #ffffff !important; /* Màu nền cam */
    color: #f7911f !important; /* Màu chữ trắng */
    margin: 0 auto !important;        /* căn giữa */
    display: block !important;
    /*padding: 12px 25px !important; !* Điều chỉnh khoảng cách bên trong nút *!*/
    text-decoration: none !important; /* Bỏ gạch chân */
    border-radius: 5px !important; /* Viền bo tròn */
    /*display: inline-block !important; !* Đảm bảo nút hiển thị ngang hàng *!*/
}
.timeline-logo {
    background-color: #f7911f;
    padding: 60px 20px;
    text-align: center;
    color: white;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.timeline-logo h2 {
    font-size: 28px;
    margin-bottom: 50px;
    color: #fff;
}

.timeline-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    position: relative;
    flex-wrap: wrap;
    align-items: stretch;
}

.timeline-container::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    height: 4px;
    width: 100%;
    background: white;
    z-index: 1;
}

.timeline-step {
    /*height: 230px;*/
    background: #fff;
    color: #333;
    border-radius: 10px;
    padding: 18px;
    width: calc(100% / 6 - 15px); /* 6 ô chia đều + trừ gap */
    min-width: 160px; /* giảm min để không vỡ hàng sớm */
    max-width: 100%;
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;


}

.timeline-step h4 {
    font-size: 16px;
    color: #f7911f;
    margin-bottom: 8px;
}
@media (max-width: 991px) {
    .timeline-step {
        width: 45%;
    }
}

@media (max-width: 600px) {
    .timeline-step {
        width: 100%;
    }
    .timeline-container::before {
        display: none;
    }
}
/* Hiệu ứng hover */
/*.button.primary.btn-banner1:hover {*/
/*    background-color: #e87e1a !important; !* Màu cam đậm khi hover *!*/
/*}*/