/*
 * Bù cho việc bản gốc phục vụ ảnh qua /thumbs/{W}x{H}x{mode}/ (đã cắt sẵn ở server),
 * còn bản này dùng ảnh gốc nguyên tỉ lệ nên lưới bị so le.
 *
 * Đặt aspect-ratio THẲNG LÊN THẺ <img>, không đặt lên khung bọc:
 * các khối này có chuỗi bọc .khung > a > span > img, mà height:100% không phân giải
 * được khi cha lấy chiều cao từ aspect-ratio -> ảnh không lấp đầy, để hở khoảng trắng.
 * Tỉ lệ lấy đúng theo kích thước thumb mà từng khối của bản gốc yêu cầu.
 */

.img_dv img { aspect-ratio: 375 / 280; }      /* danh sách dịch vụ */
.img_tt img { aspect-ratio: 285 / 290; }      /* blog trang chủ */
.card-image img { aspect-ratio: 380 / 325; }  /* bài viết liên quan */
.pic-product img { aspect-ratio: 1 / 1; }     /* sản phẩm — gốc 290x290 */
.album-image img { aspect-ratio: 375 / 405; } /* album */
.box_ab .scale-img img { aspect-ratio: 375 / 405; } /* gallery trang chủ */
.new_img_dt img { aspect-ratio: 390 / 290; }  /* danh sách tin tức */

.img_dv img,
.img_tt img,
.card-image img,
.pic-product img,
.album-image img,
.box_ab .scale-img img,
.new_img_dt img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Khung bọc chỉ cần cắt phần thừa, chiều cao để ảnh tự quyết */
.img_dv,
.img_tt,
.card-image,
.pic-product,
.album-image,
.new_img_dt {
    display: block;
    overflow: hidden;
}

/* Thẻ trong lưới cao bằng nhau để hàng không so le */
.grid_news > a,
.grid_news .box_dv,
.service .box_dv,
.newsevents .box_tt {
    height: 100%;
}

.grid_news,
.grid-product,
.grid-album {
    align-items: stretch;
}

/*
 * Hiệu ứng cuộn: animate.css ở đây là v4 (dùng .animate__animated), nhưng WOW.js
 * gắn class 'animated' của v3 nên hiệu ứng không bao giờ chạy (bản gốc cũng vậy).
 * Cho .animated mượn đúng thuộc tính của v4 để hiệu ứng hoạt động.
 */
.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}