/* ==========================================================================
   THUMBNAIL RESPONSIVE
   Chuẩn hoá ảnh thumbnail cho các module: Construction, News, ConcreteInnovate,
   Fields, DesignCraft, Reference, RenovationRevive, BuildMaster.

   Vấn đề cũ:
   - main.css ép ảnh theo pixel cứng (height:225px!important, max-width:400px)
     và trên mobile là max-width:165px / max-height:92px -> ảnh vừa bị bóp
     (co giãn) vừa bị cắt mất phần lớn nội dung.
   - design.css ép .box-image xuống height:100px trên mobile -> ảnh bị che.
   - .info-item-service cao cố định 50px trong khi tiêu đề clamp 3 dòng -> chữ bị che.

   Cách xử lý: mỗi ảnh nằm trong 1 khung có tỉ lệ cố định (padding-top), ảnh
   position:absolute phủ kín khung với object-fit:cover -> không bao giờ méo,
   và tỉ lệ giữ nguyên ở mọi kích thước màn hình.

   File này được nạp sau cùng trong _Layout nên override được
   main.css / design.css / news.css / styles.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Khung ảnh dùng chung
   -------------------------------------------------------------------------- */
.thumb-media {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-top: 62.5%; /* 16:10 - mặc định (ảnh nguồn 800x500) */
    overflow: hidden;
    background-color: #fff;
}

.thumb-media--16x9 {
    padding-top: 56.25%;
}

.thumb-media--3x2 {
    padding-top: 66.6667%;
}

.thumb-media--4x3 {
    padding-top: 75%;
}

/* --------------------------------------------------------------------------
   1b. .thumb-img - dùng cho ảnh trong các ViewComponent (widget)
       Widget có markup rất khác nhau (có cái không hề có thẻ bọc), nên thay vì
       dựng khung, ta đặt tỉ lệ thẳng lên chính thẻ <img> bằng aspect-ratio.
       Kết quả giống hệt .thumb-media: đúng tỉ lệ, hiện full ảnh, không cắt.
       Các !important ở đây để thắng những luật ép chiều cao cứng, ví dụ
       main.css: .section-service-home .item-service-home img{height:90px}
   -------------------------------------------------------------------------- */
.thumb-img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    aspect-ratio: 16 / 10;
    object-fit: contain !important;
    object-position: center center !important;
    background-color: #fff;
}

.thumb-img--16x9 {
    aspect-ratio: 16 / 9;
}

.thumb-img--4x3 {
    aspect-ratio: 4 / 3;
}

.thumb-img--1x1 {
    aspect-ratio: 1 / 1;
}

/* Nếu ảnh đã nằm trong một khung tỉ lệ có sẵn (.thumb-media hoặc .image-cover
   của flatsome dùng padding-top), thì KHUNG quyết định tỉ lệ - bỏ aspect-ratio
   trên chính thẻ ảnh để hai cơ chế không đánh nhau gây hở khoảng trắng. */
.thumb-media .thumb-img,
.image-cover .thumb-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
}

/* Các lớp bọc trung gian giữa khung và ảnh phủ kín khung để vùng bấm không lệch.
   Dùng selector con cháu (không phải con trực tiếp) để bắt được cả markup lồng
   sâu như DesignWidget: .box-image > .img > a > .img-inner > img */
.thumb-media a,
.thumb-media .img,
.thumb-media .img-inner,
.thumb-media .image-cover,
.thumb-media picture {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.thumb-media img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    /* contain = hiện FULL ảnh, không cắt, không bóp méo. Phần dư trong khung để
       trắng. Khi nào ảnh nguồn đã được crop đúng tỉ lệ thì đổi 2 dòng dưới sang
       `cover` để ảnh phủ kín khung. */
    object-fit: contain !important;
    object-position: center center !important;
    font-family: "object-fit: contain; object-position: center center;"; /* polyfill IE/Edge cũ */
}

/* --------------------------------------------------------------------------
   2. Construction - .item-project > .image-project
   -------------------------------------------------------------------------- */
.item-project .image-project img,
.item-project-design .image-project img,
#project-related .item-project .image-project img {
    max-width: none !important;
    max-height: none !important;
    height: 100% !important;
}

.item-project .info-project > h3 > a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: auto !important;
    min-height: 44px;
}

/* Hộp thông tin cao theo nội dung. main.css ép height:130px (mobile) khiến flex
   bóp các thẻ <p> lại, mà <p> có overflow:hidden nên chữ bị cắt giữa dòng. */
.archive-project .item-project .info-project,
.item-project .info-project {
    height: auto !important;
    max-height: none !important;
}

/* Không cho các dòng thông tin bị co lại khi tổng chiều cao vượt khung */
.item-project .info-project > h3,
.item-project .info-project > p {
    flex-shrink: 0 !important;
}

/* --------------------------------------------------------------------------
   2b. Card "dự án tiêu biểu" / widget bài viết
       (.item-project-design > .col-inner) dùng bởi ConstructionItemFeatured,
       ConcreteWidget, NewsItemWidget, RenovationWidget
   -------------------------------------------------------------------------- */

/* main.css: .project__content .item-project-design img {height:225px} mà không có
   object-fit -> ảnh bị kéo méo. .thumb-media img đã ép object-fit:cover. */

/* #project-tab .info-item-project {height:150px} / styles.css {height:160px}
   và .info-item-project .title-project {height:25px} -> chữ bị che */
.item-project-design .info-item-project,
#project-tab .info-item-project {
    height: auto !important;
    max-height: none !important;
}

.info-item-project .title-project {
    height: auto !important;
    max-height: none !important;
    min-height: 44px;
}

.info-item-project > a,
.info-item-project > h3,
.info-item-project > p {
    flex-shrink: 0 !important;
}

/* Các card trong cùng một hàng cao bằng nhau để viền dưới thẳng hàng */
.archive-project .row > .col.item-project-design,
.project__content .row > .col.item-project-design {
    display: flex;
}

.archive-project .row > .col.item-project-design > .item-project,
.project__content .row > .col.item-project-design > .item-project,
.archive-project .row > .col.item-project-design > .col-inner,
.project__content .row > .col.item-project-design > .col-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.archive-project .item-project .info-project,
.item-project-design > .col-inner > .info-item-project {
    flex: 1 1 auto;
}

/* --------------------------------------------------------------------------
   3. Card dịch vụ - RenovationRevive / ConcreteInnovate / DesignCraft /
      BuildMaster (.item__service > .col-inner > a > .box-image)
   -------------------------------------------------------------------------- */
.service__content .col.item__service .box-image,
.item__service .box-image {
    height: auto !important;
    max-height: none !important;
}

.service__content .col.item__service .box-image img,
.item__service .box-image img,
.item__service img {
    object-position: center center !important;
}

/* Bo góc trên của khung ảnh thay vì bo trên chính thẻ img (img đã bị overflow cắt) */
.service__content .col.item__service .box-image {
    border-radius: 10px 10px 0 0;
}

/* Hộp tiêu đề: cao theo nội dung để tiêu đề 2-3 dòng không bị che */
.item__service .info-item-service {
    height: auto !important;
    min-height: 50px;
    padding: 8px 10px !important;
}

.item__service .title-service {
    width: 100%;
}

/* --------------------------------------------------------------------------
   4. News - .post-item .box-image .image-cover
   -------------------------------------------------------------------------- */
.post-item .box-image .thumb-media {
    padding-top: 56.25%;
}

.post-item .box-text .post-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   5. Fields - li > .pad > .images
   -------------------------------------------------------------------------- */
.pad > .images.thumb-media {
    margin-bottom: 10px;
}

.pad > .info > h3 > a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   6. Reference - .recent_box > a > .image_s.item-image
   -------------------------------------------------------------------------- */
.recent_box .item-image.thumb-media {
    margin-bottom: 8px;
}

.recent_box .recent_text h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   7. Mobile - gỡ toàn bộ crop cứng theo pixel
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
    /* design.css: .service__content .col.item__service .box-image {height:100px} */
    .service__content .col.item__service .box-image,
    .item__service .box-image {
        height: auto !important;
        max-height: none !important;
    }

    /* main.css: .project__content .item-project-design .box-image {height:92px} */
    .project__content .item-project-design .box-image {
        height: auto !important;
        max-height: none !important;
    }

    /* main.css: .image-project img {max-width:165px;max-height:92px}
                 .item-project-design .image-project img {max-height:92px!important} */
    .item-project .image-project img,
    .item-project-design .image-project img,
    .project__content .item-project-design img {
        max-width: none !important;
        max-height: none !important;
        height: 100% !important;
    }

    /* main.css: .archive-project .item-project .info-project {height:130px} */
    .archive-project .item-project .info-project {
        height: auto !important;
        min-height: 130px;
    }

    .item-project .info-project > h3 > a {
        min-height: 40px;
    }

    .item__service .info-item-service {
        min-height: 46px;
        padding: 6px 8px !important;
    }
}