/*
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  ***************/


}

/* 1. Ép hàng chứa 2 cột phải có độ cao bằng nhau */
.row.row-divided {
    display: flex !important;
    flex-wrap: wrap;
}

/* 2. Ép các cột (col) giãn ra hết cỡ theo chiều dọc */
.row.row-divided > .col {
    display: flex;
    flex-direction: column;
}

/* 3. Làm cho khối màu trắng bên trong (border) tự động lấp đầy chiều cao của cột */
#post-list, 
.post-sidebar.col {
    flex-grow: 1; /* Đây là lệnh quan trọng nhất để kéo dài cột ngắn bằng cột dài */
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    padding: 20px;
    margin-bottom: 30px; /* Khoảng cách dưới cho đẹp */
}

/* Đảm bảo nội dung bên trong không bị dính sát đáy nếu cột được kéo dài */
#post-list > div, 
.post-sidebar.col > aside {
    flex-grow: 1;
}








/* Làm đẹp khung tiêu đề Dịch vụ */
.phuongnam {
    background-color: #1a9a5a; /* Màu xanh khớp với logo của bạn */
    padding: 10px 15px;
    border-radius: 5px 20px 5px 20px; /* Bo góc kiểu cách */
    margin-bottom: 15px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
}

/* Hiệu ứng tia sáng lướt qua khi nhìn vào (tạo điểm nhấn) */
.phuongnam::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: 0.5s;
}

.phuongnam:hover::before {
    left: 100%;
}

/* Tùy chỉnh chữ và icon bên trong */
.phuongnamweb {
    color: #ffffff !important;
    font-weight: bold;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    font-size: 1.1em;
    letter-spacing: 1px;
}

/* Làm đẹp cái icon menu */
.phuongnamweb i {
    margin-right: 10px;
    background: #ffffff;
    color: #1a9a5a;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
}

/* 1. Ép tiêu đề luôn cao bằng 2 dòng */
.blog-post-inner .post-title {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Chỉ cho hiện tối đa 2 dòng */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Cố định chiều cao để bài 1 dòng hay 2 dòng đều cao bằng nhau */
    height: 2.8em; 
    line-height: 1.4em;
    margin-top: 10px;
}

/* 2. Ép đoạn trích dẫn luôn cao bằng 2 dòng */
.blog-post-inner .from_the_blog_excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Chỉ cho hiện tối đa 2 dòng */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Cố định chiều cao cho mô tả */
    height: 3.2em;
    line-height: 1.6em;
    margin-top: 5px;
}

/* 3. Căn giữa lại divider (dấu gạch ngang) cho cân đối */
.blog-post-inner .is-divider {
    margin: 10px auto !important;
}

/* Bo góc cho ảnh có class imgradius */
.imgradius img {
    border-radius: 10px !important;
    overflow: hidden; /* Đảm bảo ảnh không bị tràn ra ngoài góc đã bo */
}

.quote-box {
    position: relative;
    padding: 30px 50px; /* Tạo khoảng trống cho dấu ngoặc */
    text-align: center;
}

/* Dấu ngoặc mở */
.quote-box::before {
    content: "\201C"; /* Mã Unicode dấu ngoặc kép mở */
    position: absolute;
    top: -10px;
    left: 0;
    font-size: 80px;
    color: #f1c40f; /* Màu vàng đồng bộ với gạch chân trong ảnh */
    font-family: Georgia, serif;
    opacity: 0.8;
}

/* Dấu ngoặc đóng */
.quote-box::after {
    content: "\201D"; /* Mã Unicode dấu ngoặc kép đóng */
    position: absolute;
    bottom: -40px;
    right: 0;
    font-size: 80px;
    color: #f1c40f;
    font-family: Georgia, serif;
    opacity: 0.8;
}

.quote-text {
    line-height: 1.6;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #ffffff; /* Giữ màu trắng nổi bật trên nền xanh */
}
.radius {
    border-radius: 25px 0px 25px 0px;
}
.greenhome {
    background: linear-gradient(135deg, #0A9349 0%, #0A9349 40%, #10b981 100%);
    color: #f0fdf4;
    padding: 12px;
    border-radius: 20px;
    box-shadow: 0 10px 25px -5px rgba(6, 95, 70, 0.4);
    }
.greenhome2 {
    background: linear-gradient(135deg, #0A9349 0%, #0A9349 40%, #10b981 100%);
   
    }

/*logo chay */
/* Container bao ngoài */
.new {
    overflow: hidden; /* Cắt bỏ phần dư thừa */
    width: 100%;
    padding: 20px 0;
    box-sizing: border-box;
}

/* Thẻ ul dải chạy */
.newul {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    width: max-content; /* Cho phép ul rộng vô tận chứa các logo nhân bản */
    
    /* Chỉnh tốc độ ở đây, 12s là tốc độ khá mượt cho 1 vòng */
    animation: scroll_perfect 12s linear infinite; 
}

/* Từng ô logo */
.newli {
    width: 180px; 
    height: 100px;
    margin-right: 30px; /* Khoảng cách nối nhau */
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    padding: 10px;
    box-sizing: border-box;
}

/* Ảnh bên trong */
.newli img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

/* HIỆU ỨNG CHẠY VÔ HẠN (Không bị giật) */
@keyframes scroll_perfect {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Trượt đúng bằng chiều rộng của 1 bộ logo gốc (20% của 5 bộ) */
        transform: translateX(-20%);
    }
}

/*end logo chay*/




/* 1. Phần tạo thanh gạch chân bên dưới */
.product-small.box:after, 
.mh-col-shadow > .col-inner:after, 
.post-item > .col-inner:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    transform-origin: right;
    transition: transform .5s ease-in-out;
    transform: scaleX(0);
    /* Đã sửa từ màu primary sang màu của bạn */
    background: #FFD500 !important; 
}

/* 2. Hiệu ứng khi di chuột (hover) vào: Thanh gạch chạy từ trái sang */
.product-small.box:hover:after, 
.mh-col-shadow:hover > .col-inner:after, 
.post-item:hover > .col-inner:after {
    transform-origin: left;
    transform: scaleX(1);
}

/* 3. Hiệu ứng Shine (Ánh sáng quét qua ảnh) - Giữ nguyên như cũ */
.box-image:hover::before, 
.post-item:hover .box-image::before, 
.img:hover .img-inner::before {
    -webkit-animation: shine .75s;
    animation: shine .75s;
}

@-webkit-keyframes shine {
    100% { left: 125%; }
}

@keyframes shine {
    100% { left: 125%; }
}

.box-image::before, 
.img .img-inner::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0, rgba(255,255,255,.3) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0, rgba(255,255,255,.3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
}


/* gellery  */
.gallerydttp .col-inner,
.gallerydttp .box-image,
.gallerydttp .image-cover {
    border-radius: 15px !important; /* Bạn có thể tăng giảm số 15px này để độ cong ưng ý nhất */
    overflow: hidden !important;
    border: none !important;
}
/* end bo goc */




/* 1. TẮT TÍNH NĂNG XẾP ẢNH BẰNG JAVASCRIPT CỦA FLATSOME */
.gallerydttp.row {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 15px !important;
    height: auto !important; /* Xóa chiều cao ảo do JS tính toán */
}

/* Ép các cột bỏ tọa độ absolute, quay về xếp theo Grid */
.gallerydttp .gallery-col {
    position: relative !important; 
    left: auto !important; 
    top: auto !important;
    width: 100% !important; 
    max-width: 100% !important;
    padding: 0 !important; /* Bỏ khoảng cách mặc định để dùng gap của grid */
    margin: 0 !important;
}

/* 2. CHIA TỶ LỆ CỘT LỆCH NHAU (VÒNG LẶP VÔ HẠN CHO MỌI SỐ LƯỢNG ẢNH) */
/* Cứ mỗi chu kỳ 6 ảnh sẽ lặp lại tỷ lệ này */

/* Hàng lẻ (Ảnh 1, 2, 3 - Ảnh 7, 8, 9...): Tỷ lệ 5 - 4 - 3 */
.gallerydttp .gallery-col:nth-child(6n + 1) { grid-column: span 5; }
.gallerydttp .gallery-col:nth-child(6n + 2) { grid-column: span 4; }
.gallerydttp .gallery-col:nth-child(6n + 3) { grid-column: span 3; }

/* Hàng chẵn (Ảnh 4, 5, 6 - Ảnh 10, 11, 12...): Tỷ lệ 3 - 4 - 5 */
.gallerydttp .gallery-col:nth-child(6n + 4) { grid-column: span 3; }
.gallerydttp .gallery-col:nth-child(6n + 5) { grid-column: span 4; }
.gallerydttp .gallery-col:nth-child(6n + 6) { grid-column: span 5; }

/* 3. XÓA TỶ LỆ GỐC CỦA FLATSOME, ÉP CHIỀU CAO VÀ BO GÓC */
.gallerydttp .col-inner,
.gallerydttp .box-image {
    padding-top: 0 !important; /* Xóa cái padding-top: 60% gây thò thụt */
    height: 250px !important; /* Chiều cao cố định cho tất cả ảnh */
    border-radius: 15px !important;
    overflow: hidden !important;
}

/* Chống méo ảnh */
.gallerydttp img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; 
}







/* Ép khối Grid phải ẩn hoàn toàn trên Mobile (Sửa lỗi xung đột Flatsome) */
@media (max-width: 767px) {
    .gallerydttp,
    .gallerydttp.row,
    .gallerydttp .row {
        display: none !important;
    }
}

/* Ép khối Grid ẩn hoàn toàn trên Mobile và khi xoay ngang (Tablet) */
@media (max-width: 849px) {
    .gallerydttp,
    .gallerydttp.row,
    .gallerydttp .row {
        display: none !important;
    }
}






/* het gellery */


.hotline-box{
    background:#f4f4ed;
    border-radius:28px;
    padding:15px 15px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
}

.hotline-left{
    display:flex;
    align-items:center;
    gap:18px;
}

.hotline-icon{
    width:58px;
    height:58px;
    min-width:58px;
    border-radius:50%;
    background:#f1d500;
    display:flex;
    align-items:center;
    justify-content:center;
}

.hotline-icon img{
    width:26px;
    height:26px;
    object-fit:contain;
}

.hotline-info span{
    display:block;
    font-size:16px;
    color:#666;
    margin-bottom:4px;
}

.hotline-info h3{
    margin:0;
    font-size:25px;
    font-weight:700;
    line-height:1;
   
}

.hotline-btn{
    display:inline-block;
    background:#39b54a;
    color:#fff;
    padding:15px 15px;
    border-radius:40px;
    font-size:16px;
    font-weight:600;
    text-decoration:none;
    transition:0.3s ease;
}

.hotline-btn:hover{
    background:#2c9a3a;
    color:#fff;
}

@media(max-width:767px){
    .hotline-box{
        padding:24px;
    }

    .hotline-info h3{
        font-size:28px;
    }

    .hotline-right{
        width:100%;
    }

    .hotline-btn{
        width:100%;
        text-align:center;
    }
}




.col-inner ul li {
    margin-left: 0.3em;
}
.gioithieutrangchu p{
    margin-bottom:12px;
}

.gioithieutrangchu ul{
    list-style:none;
    padding:0;
    margin:0;
}

.gioithieutrangchu ul li{
    position:relative;
    padding-left:24px;
    margin-bottom:10px;
    font-size:14px;
    font-weight:500;
    color:#111;
    line-height:1.6;
}

.gioithieutrangchu ul li:before{
    content:"✔";
    position:absolute;
    left:0;
    top:3px;
    width:17px;
    height:17px;
    line-height:17px;
    text-align:center;
    border-radius:50%;
    background:#39b54a;
    color:#fff;
    font-size:12px;
    font-weight:700;
}


/* Dùng !important để ép trình duyệt nhận dải màu này */
.homeDTX > .section-bg.fill {
    background: 
        linear-gradient(360deg, #ffffff 26.36%, rgba(255, 255, 255, 0.64) 114.64%), 
        linear-gradient(349.37deg, #dfedf1 37.17%, #d7f6cd 74.52%, #f3f7be 110.34%), 
        #ffffff !important;
    opacity: 1 !important; /* Đảm bảo lớp nền không bị ẩn */
}



#masthead {
    background: linear-gradient(180deg, #f1f8e9 0%, #ffffff 100%) !important;
}
.bannerhome {
    color: #2e7d32; /* Đây là màu chữ (ví dụ màu xanh lá đậm), bạn có thể đổi theo ý muốn */
    font-weight: bold; /* Chữ đậm sẽ giúp viền trông rõ và đẹp hơn */
    
 /* Đẩy viền ra phía sau chữ */
    -webkit-text-stroke: 9px #ffffff; /* Gấp đôi độ dày mong muốn vì nó tỏa cả vào trong */
    paint-order: stroke fill;
    
    /* Đảm bảo hiển thị tốt trên các trình duyệt khác nhau */
    text-shadow: 1px 1px 0 #ffffff, -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff;
}


/* Tác động vào lớp bao ngoài cùng của banner */
.bannerhomedt {
   
    border-radius: 30px !important;       /* Bo góc (tăng lên chút cho khớp với viền dày) */
    overflow: hidden !important;          /* Cắt ảnh thừa ở góc */
    box-sizing: border-box;               /* Đảm bảo viền không làm banner bị to quá khổ */
}

/* Đảm bảo các lớp bên trong cũng bo theo */
.bannerhomedt .banner-bg, 
.bannerhomedt .banner-inner {
    border-radius: 15px !important; /* Bo nhẹ bên trong để khớp với khung ngoài */
}




/* Tác động trực tiếp vào ID banner để ép phê */
#banner-814435633 {
    border: 25px solid #ffffff !important; 
    border-radius: 40px !important;
    overflow: hidden !important; 
    box-sizing: border-box !important;
    background-color: #ffffff !important; /* Tạo nền trắng cho viền */
}

/* Xử lý phần thừa bên trong */
#banner-814435633 .banner-inner, 
#banner-814435633 .banner-bg {
    border-radius: 15px !important; /* Bo góc nhỏ hơn bên trong để khớp với khung ngoài */
    margin: 0 !important;
    height: 100% !important;
}

/* Loại bỏ các khoảng cách lạ của Flatsome */
#banner-814435633 .container {
    max-width: 100% !important;
}





@keyframes shine-cycle {
  0% {
    -webkit-mask-position: 100% 0; 
    mask-position: 100% 0;
    opacity: 0;
  }
  2% {
    opacity: 1; 
  }
  20% {
    -webkit-mask-position: -100% 0; 
    mask-position: -100% 0;
    opacity: 1;
  }
  22% {
    -webkit-mask-position: -100% 0;
    mask-position: -100% 0;
  }
  40% {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    opacity: 1;
  }
  42% {
    opacity: 0; 
  }
  100% {
    -webkit-mask-position: 100% 0; 
    mask-position: 100% 0;
    opacity: 0;
  }
}






#logo {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

#logo img {
  display: block;
  max-width: 100%;
  height: auto;
}

#logo::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('https://dothithanhpho.com/wp-content/uploads/2026/04/logo-DTTPtrang.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  -webkit-mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 30%,
    rgba(0,0,0,1) 50%,
    rgba(0,0,0,0) 70%,
    rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 30%,
    rgba(0,0,0,1) 50%,
    rgba(0,0,0,0) 70%,
    rgba(0,0,0,0) 100%);

  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;

  opacity: 0;
  pointer-events: none;

  animation: shine-cycle 10s linear infinite;
}