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

/*************** ADD CUSTOM CSS HERE.   ***************/
/* Khung chứa bo tròn màu xám nhạt */
.contact-box-clean {
    display: inline-flex;
    align-items: center;
    background-color: #f7f7f7;
    border-radius: 100px;
    padding: 10px 30px 10px 20px;
    font-family: Arial, sans-serif;
}

/* Khung chứa icon ảnh */
.icon-wrapper {
    width: 35px;
    height: 35px;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* CSS xử lý ảnh gốc: Ép ảnh sang mã màu #1a6b3c */
.custom-phone-img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Khối nội dung text */
.info-wrapper {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Thẻ link từng dòng */
.contact-row {
    text-decoration: none !important;
    color: #1a6b3c !important; /* Màu chữ xanh #1a6b3c */
    font-size: 17px;
    display: flex;
    align-items: center;
    line-height: 1.2;
}

/* Phần số điện thoại in đậm */
.contact-row .phone-num {
    font-weight: 700;
}

/* Phần tên viết thường */
.contact-row .contact-name {
    font-weight: 400;
    margin-left: 5px;
}

/* Hiệu ứng mờ nhẹ khi di chuột vào */
.contact-row:hover {
    opacity: 0.8;
}
.header-bottom-nav > li > a {
	font-size: 12px;
}
.custom-footer a {
	color: #fff;
}
.custom-footer p {
	margin-bottom: 10px;
}
.content-area {
	min-height: 70vh;
}

.imta-reviews-section {
    overflow: hidden;
    padding: 33px 0px 42px;
    background: #2b295b;
}

.imta-reviews-inner {
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
    overflow: visible;
}

.imta-reviews-slider {
    margin: 0;
    min-height: 356px;
}

.imta-reviews-slider .flickity-viewport {
    overflow: hidden;
}

.imta-reviews-slider .flickity-slider {
    will-change: transform;
}

.imta-reviews-slider:not(.flickity-enabled) {
    display: flex;
    overflow: hidden;
}

.imta-review-cell {
    width: var(--imta-review-cell-width, 33.333333%) !important;
    max-width: var(--imta-review-cell-width, 33.333333%) !important;
    margin-right: 32px;
    min-height: 356px;
    box-sizing: border-box;
}

.imta-reviews-cols-1 .imta-review-cell {
    width: 100% !important;
    max-width: 100% !important;
}

.imta-reviews-cols-2 .imta-review-cell {
    width: calc((100% - 32px) / 2) !important;
    max-width: calc((100% - 32px) / 2) !important;
}

.imta-reviews-cols-3 .imta-review-cell {
    width: calc((100% - 64px) / 3) !important;
    max-width: calc((100% - 64px) / 3) !important;
}

.imta-reviews-cols-4 .imta-review-cell {
    width: calc((100% - 96px) / 4) !important;
    max-width: calc((100% - 96px) / 4) !important;
}

.imta-reviews-cols-5 .imta-review-cell {
    width: calc((100% - 128px) / 5) !important;
    max-width: calc((100% - 128px) / 5) !important;
}

.imta-review-card {
    height: 356px;
    min-height: 356px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 8px;
    padding: 31px 32px 32px;
    color: #070b3d;
    overflow: hidden;
    margin-left:10px;
}

.imta-review-quote {
    height: 47px;
    color: #ff6b22;
    font-family: Georgia, serif;
    font-size: 62px;
    line-height: 0.72;
}

.imta-review-content {
    flex: 1 1 auto;
    font-size: 16px;
    line-height: 1.48;
    letter-spacing: 0;
}

.imta-review-content p {
    margin-bottom: 0;
}

.imta-review-author {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-top: 26px;
}

.imta-review-avatar {
    width: 80px;
    height: 80px;
    flex: 0 0 80px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #f0f0f4;
    color: #2b295b;
    font-weight: 700;
    font-size: 20px;
}

.imta-review-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 999px;
}

.imta-review-meta {
    min-width: 0;
    color: #070b3d;
    font-size: 15px;
    line-height: 1.55;
}

.imta-review-meta strong,
.imta-review-meta em {
    display: block;
}

.imta-review-meta strong {
    font-size: 16px;
    font-weight: 700;
}

.imta-review-meta em {
    font-style: italic;
}

.imta-reviews-section .flickity-prev-next-button {
    width: 49px;
    height: 49px;
    color: #ffffff;
    opacity: 1;
    background: transparent;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}
.imta-reviews-section  .flickity-prev-next-button svg{
    border: none !important;
}
.imta-reviews-section .flickity-prev-next-button.previous {
    left: -92px;
}

.imta-reviews-section .flickity-prev-next-button.next {
    right: -92px;
}

.imta-reviews-section .flickity-prev-next-button:hover {
    background: rgba(255, 255, 255, 0.08);
}

.imta-reviews-section .flickity-page-dots {
    bottom: -35px;
    line-height: 10px;
    z-index: 3;
}

.imta-reviews-section .flickity-page-dots .dot {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background: rgba(255, 255, 255, 0.28);
    border: 0;
    opacity: 1;
}

.imta-reviews-section .flickity-page-dots .dot.is-selected {
    width: 40px;
    border-radius: 99px;
    background: #ffffff;
}

@media only screen and (max-width: 1200px) {
    .imta-reviews-section {
        padding-left: 78px;
        padding-right: 78px;
    }

    .imta-reviews-section .flickity-prev-next-button.previous {
        left: -58px;
    }

    .imta-reviews-section .flickity-prev-next-button.next {
        right: -58px;
    }
}

@media only screen and (max-width: 849px) {
    .imta-reviews-section {
        padding: 28px 18px 46px;
    }

    .imta-review-cell {
        width: var(--imta-review-cell-width-sm, 100%) !important;
        max-width: var(--imta-review-cell-width-sm, 100%) !important;
        margin-right: 16px;
    }

    .imta-reviews-cols-sm-1 .imta-review-cell {
        width: 100% !important;
        max-width: 100% !important;
    }

    .imta-reviews-cols-sm-2 .imta-review-cell {
        width: calc((100% - 16px) / 2) !important;
        max-width: calc((100% - 16px) / 2) !important;
    }

    .imta-review-card {
        height: auto;
        min-height: 330px;
        padding: 24px 24px 28px;
    }

    .imta-review-author {
        gap: 18px;
    }

    .imta-reviews-section .flickity-prev-next-button {
        display: none;
    }
}

@media only screen and (min-width: 850px) and (max-width: 1199px) {
    .imta-review-cell {
        width: var(--imta-review-cell-width-md, 50%) !important;
        max-width: var(--imta-review-cell-width-md, 50%) !important;
    }

    .imta-reviews-cols-md-1 .imta-review-cell {
        width: 100% !important;
        max-width: 100% !important;
    }

    .imta-reviews-cols-md-2 .imta-review-cell {
        width: calc((100% - 32px) / 2) !important;
        max-width: calc((100% - 32px) / 2) !important;
    }

    .imta-reviews-cols-md-3 .imta-review-cell {
        width: calc((100% - 64px) / 3) !important;
        max-width: calc((100% - 64px) / 3) !important;
    }
}

/* ==========================================================================
   CUSTOM CONTACT FORM 7 - PHẾ LIỆU MÔI TRƯỜNG MIỀN NAM
   ========================================================================== */

.custom-contact-form {
    background: #ffffff;
    padding: 30px 25px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    max-width: 500px;
    margin: 0 auto;
    border-top: 5px solid #006633; /* Màu xanh lá chủ đạo của web */
}

/* Tiêu đề Form */
.custom-contact-form h3 {
    color: #006633;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 25px;
    letter-spacing: 0.5px;
    position: relative;
}

/* Đường gạch dưới tiêu đề */
.custom-contact-form h3::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: #e67e22; /* Màu cam ton-sur-ton với nút "GỌI NGAY" */
    margin: 8px auto 0;
    border-radius: 2px;
}

/* Khung bọc từng field */
.custom-contact-form .form-group {
    margin-bottom: 18px;
}

/* Label chữ nhỏ, tinh tế phía trên input */
.custom-contact-form .form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #444444;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Định dạng các ô Input, Select, Textarea */
.custom-contact-form input[type="text"],
.custom-contact-form input[type="tel"],
.custom-contact-form select,
.custom-contact-form textarea {
    width: 100% !important;
    max-width: 100% !important;
    background-color: #f9f9f9 !important;
    border: 1px solid #e2e8f0 !important;
    padding: 10px 15px !important;
    font-size: 14px !important;
    color: #333 !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

/* Hiệu ứng khi click vào ô nhập liệu (Focus) */
.custom-contact-form input[type="text"]:focus,
.custom-contact-form input[type="tel"]:focus,
.custom-contact-form select:focus,
.custom-contact-form textarea:focus {
    background-color: #ffffff !important;
    border-color: #006633 !important; /* Đổi sang border xanh khi focus */
    box-shadow: 0 0 0 3px rgba(0, 102, 51, 0.1) !important;
    outline: none !important;
}

/* Fix riêng cho ô Dropdown select */
.custom-contact-form select {
    height: auto !important;
    cursor: pointer;
}

/* Định dạng nút gửi hàng màu cam đồng bộ nút Gọi Ngay */
.custom-contact-form .form-submit {
    margin-top: 25px;
    text-align: center;
}

.custom-contact-form .wpcf7-submit {
    width: 100% !important;
    background-color: #ff9800 !important; /* Màu cam chuẩn phối cảnh */
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 12px 20px !important;
    border: none !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3) !important;
    letter-spacing: 0.5px;
}

/* Hiệu ứng hover nút */
.custom-contact-form .wpcf7-submit:hover {
    background-color: #e65100 !important; /* Cam đậm hơn khi hover */
    box-shadow: 0 6px 15px rgba(230, 81, 0, 0.4) !important;
    transform: translateY(-1px);
}

/* Định dạng thông báo lỗi / thành công của CF7 */
.custom-contact-form .wpcf7-not-valid-tip {
    font-size: 12px !important;
    color: #dc3545 !important;
    margin-top: 4px;
}

.custom-contact-form .wpcf7-response-output {
    margin: 15px 0 0 0 !important;
    padding: 10px !important;
    font-size: 14px !important;
    border-radius: 4px !important;
    text-align: center;
}
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}