/* ============================================================================
   madai-tintuc.css — Thiết kế lại khu "TIN TỨC" (section.news-home)
   Trang chủ bản nháp vantaimadai.com.vn — layout.php của com_frontpage.
   File nạp SAU CÙNG nên chỉ cần CSS đè, KHÔNG đụng HTML/PHP/JS.
   Bộ màu ĐO TỪ LOGO (dùng lại đúng biến --md-* đã khai báo ở madai-2026.css,
   không tự đặt màu khác): --md-xanh #009966 · --md-xanh-dam #00875a ·
   --md-xanh-nhat #e7f7f0 · --md-vien-xanh #b7e6d3 · --md-son #c8392b ·
   --md-cam #e8730f.
   ⚠️ Slider dùng owl-carousel v2, item-width/vị-trí do JS (main.js:slider_item)
   set INLINE trên .owl-item — file này TUYỆT ĐỐI không đụng width/float/
   position/transform của .owl-carousel .owl-stage .owl-item, chỉ thêm
   display:flex lên .owl-item để CON của nó (.item) kéo cao đều nhau.
   ============================================================================ */

/* --------------------------------------------------------------------------
   1) TIÊU ĐỀ KHỐI — vá lệch thẻ: madai-2026.css viết sẵn selector
   ".news-home h2.title-main" nhưng layout.php in ra "<h3 class="title-main">"
   (khác thẻ) nên rule đó KHÔNG BAO GIỜ khớp — khu Tin tức đang thiếu tông
   tiêu đề dùng chung (25px/800/màu than + 2 nhánh kim tuyến). Viết lại đúng
   thẻ thật ở đây để đồng bộ với Dịch vụ/Hướng dẫn đăng ký/Hướng dẫn.
   -------------------------------------------------------------------------- */
.news-home h3.title-main{
  text-align:center !important; font-size:25px !important; font-weight:800 !important;
  color:var(--md-than) !important; margin:0 0 10px !important; background:none !important;
  border:0 !important; text-transform:none !important;
}
.news-home h3.title-main:after{
  content:""; display:block; width:110px; height:2px; margin:10px auto 0;
  background:linear-gradient(90deg,transparent,var(--md-cam),transparent);
}
.news-home .txt-slogan{
  max-width:680px; margin:0 auto !important; text-align:center;
  font-size:14px !important; line-height:1.7 !important; color:var(--md-xam) !important;
}

/* --------------------------------------------------------------------------
   2) KHUNG SECTION — nền trắng dịu, tách khỏi khối "Hướng dẫn" nền xanh đậm
   ngay phía trên bằng khoảng đệm rộng hơn bản gốc (45-60px cũ -> 46-50px có
   viền phân cách mảnh phía trên cho rõ ranh giới 2 khối).
   -------------------------------------------------------------------------- */
.news-home{
  background:#fff !important; padding:46px 0 50px !important;
  border-top:1px solid var(--md-vien) !important;
}
.news-home .t_title{ margin-bottom:28px !important; }

/* --------------------------------------------------------------------------
   3) HÀNG SLIDER — chỉ thêm flex cho CON bên trong .owl-item, không đụng gì
   của chính .owl-item (width/float/position do JS quản, xem cảnh báo ở đầu
   file). Nhờ vậy card cao đều nhau trong cùng 1 hàng dù tiêu đề dài/ngắn.
   -------------------------------------------------------------------------- */
.news-home .t_main.box-news{ overflow:visible !important; }
.news-home .owl-carousel .owl-stage-outer{ overflow:hidden; } /* clip slide thật vẫn ở đây, không đổi */
.news-home .owl-carousel .owl-item{ display:flex !important; height:auto; }

/* --------------------------------------------------------------------------
   4) THẺ TIN — bo góc 16px, viền mảnh xanh nhạt, bóng nhẹ, đồng bộ với thẻ
   dịch vụ (madai-dichvu.css): flex-column để ảnh cố định trên, nội dung co
   giãn dưới, nút "Chi tiết" luôn dính đáy dù text dài ngắn khác nhau.
   -------------------------------------------------------------------------- */
.news-home .item{
  display:flex !important; flex-direction:column !important; width:100% !important;
  height:100% !important; background:#fff !important;
  border:1px solid var(--md-vien-xanh) !important; border-radius:16px !important;
  overflow:hidden !important; position:relative !important;
  box-shadow:0 2px 10px rgba(0,45,35,.06) !important;
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease !important;
  margin:2px 0 !important; /* chừa chỗ cho box-shadow khi hover, khỏi bị owl-stage cắt */
}
.news-home .item:hover{
  box-shadow:0 12px 26px rgba(0,45,35,.12) !important; transform:translateY(-3px) !important;
  border-color:var(--md-xanh) !important;
}

/* --------------------------------------------------------------------------
   5) ẢNH — khung tỉ lệ CỐ ĐỊNH 4:3 (object-fit:cover) nên ảnh nguồn dọc/ngang/
   vuông đều cắt gọn khung, không méo, không lộ khoảng trắng thừa. Zoom nhẹ
   khi hover để có cảm giác "sống", giữ nguyên loading=lazy/thẻ <img> gốc.
   -------------------------------------------------------------------------- */
.news-home .box-thum-news{
  display:block !important; position:relative !important; overflow:hidden !important;
  aspect-ratio:4/3; background:var(--md-xanh-nhat);
}
.news-home .box-thum-news img{
  width:100% !important; height:100% !important; object-fit:cover !important;
  display:block !important; margin:0 !important;
  transition:transform .35s ease !important;
}
.news-home .item:hover .box-thum-news img{ transform:scale(1.06) !important; }

/* --------------------------------------------------------------------------
   6) NỘI DUNG — tiêu đề tối đa 2 dòng (line-clamp), ngày đăng có nhãn dạng
   pill xanh-nhạt/chữ-xanh-đậm (KHÔNG dùng chữ trắng ở đây nên khỏi vướng
   ngưỡng tương phản), mô tả tối đa 2 dòng, nút "Chi tiết" pin đáy thẻ.
   -------------------------------------------------------------------------- */
.news-home .content{
  display:flex !important; flex-direction:column !important; flex:1 1 auto !important;
  padding:16px 18px 18px !important; background:#fff !important;
}
.news-home .item .name{
  font-size:15.5px !important; font-weight:800 !important; color:var(--md-than) !important;
  line-height:1.4 !important; margin:0 0 8px !important; height:auto !important;
  order:2;
  display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden !important;
}
.news-home .item .date{
  order:1; align-self:flex-start;
  display:inline-flex !important; align-items:center !important; gap:6px !important;
  margin:0 0 10px !important; padding:4px 10px !important; border-radius:999px !important;
  background:var(--md-xanh-nhat) !important; color:var(--md-xanh-dam) !important;
  font-size:11.5px !important; font-weight:700 !important;
}
.news-home .item .date:before{
  font-family:"FontAwesome"; content:"\f133"; font-size:11px; color:var(--md-xanh-dam);
}
.news-home .item .text{
  order:3; flex:1 1 auto !important; height:auto !important; margin:0 0 14px !important;
  font-size:13.5px !important; line-height:1.65 !important; color:var(--md-xam) !important;
  display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden !important;
}

/* --------------------------------------------------------------------------
   7) NÚT "CHI TIẾT" — dạng viền bo tròn, đồng bộ với dichvu/policy: chữ
   --md-xanh-dam trên nền trắng lúc thường, đổ nền --md-xanh-dam + chữ trắng
   khi hover/focus (tương phản 5,6 — đạt chuẩn cho chữ nhỏ).
   -------------------------------------------------------------------------- */
.news-home .item .read-more{
  order:4; margin:auto 0 0 !important; float:none !important; padding:0 !important;
  display:inline-flex !important; align-items:center !important; gap:6px !important;
  align-self:flex-start !important;
  border:1.5px solid var(--md-xanh) !important; border-radius:999px !important;
  color:var(--md-xanh-dam) !important; background:#fff !important;
  font-size:12.5px !important; font-weight:800 !important; text-transform:none !important;
  padding:8px 18px !important; text-align:left !important;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease !important;
}
.news-home .item .read-more .fa{ color:inherit !important; font-size:11px !important; }
.news-home .item .read-more:hover, .news-home .item .read-more:focus{
  background:var(--md-nen-nut) !important; border-color:var(--md-nen-nut) !important;
  color:#fff !important; text-decoration:none !important;
}

/* --------------------------------------------------------------------------
   8) NÚT ĐIỀU HƯỚNG (prev/next) — bản gốc dùng ảnh nền cũ (btn-mini-*.png),
   đặt tuyệt đối đè lên ảnh theo margin-top cố định -70px (giả định thẻ cao
   đúng 1 mức, sai ngay khi thẻ đổi chiều cao). Chuyển sang 2 nút tròn viền,
   xếp hàng NGANG CĂN GIỮA phía dưới slider — không phụ thuộc chiều cao thẻ,
   không cần position:absolute nên không có nguy cơ bị .box-news cắt.
   -------------------------------------------------------------------------- */
.news-home .group-btn{
  position:static !important; display:flex !important; justify-content:center !important;
  gap:12px !important; margin:26px 0 0 !important; float:none !important;
}
.news-home .btn-control{
  position:static !important; top:auto !important; left:auto !important; right:auto !important;
  margin:0 !important; width:42px !important; height:42px !important;
  border-radius:50% !important; border:1.5px solid var(--md-vien-xanh) !important;
  background:#fff !important; color:var(--md-xanh-dam) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  cursor:pointer !important; transition:background-color .18s ease, border-color .18s ease, transform .15s ease !important;
}
.news-home .btn-control:before{
  font-family:"FontAwesome"; font-size:16px; line-height:1; color:inherit;
}
.news-home .prev-control:before{ content:"\f104"; }
.news-home .next-control:before{ content:"\f105"; }
.news-home .btn-control:hover{
  background:var(--md-nen-nut) !important; border-color:var(--md-nen-nut) !important;
  color:#fff !important; transform:translateY(-2px) !important;
}

/* --------------------------------------------------------------------------
   9) ĐIỆN THOẠI — owl JS đã tự chuyển 1 thẻ/hàng dưới 600px (main.js:71-76),
   ở đây chỉ giảm khoảng đệm + cỡ chữ cho vừa màn hẹp, không đụng số cột.
   -------------------------------------------------------------------------- */
@media(max-width:767px){
  .news-home{ padding:34px 0 36px !important; }
  .news-home h3.title-main{ font-size:19px !important; }
  .news-home .content{ padding:14px 16px 16px !important; }
  .news-home .item .name{ font-size:14.5px !important; }
  .news-home .group-btn{ margin-top:20px !important; }
}

/* --------------------------------------------------------------------------
   9) THẺ TIN PHẢI CAO BẰNG NHAU (đo 30/09: 423/357/378/423 — lệch tới 66px,
   bài nào không có mô tả thì thẻ hụt hẳn xuống, nhìn như thiếu nội dung).
   Owl carousel xếp các ô bằng inline-block nên mỗi ô tự cao theo nội dung;
   cho dải chứa nó thành hàng flex kéo đều là mọi thẻ chạm đáy chung.
   -------------------------------------------------------------------------- */
.news-home .owl-stage{ display:flex !important; align-items:stretch !important; }
.news-home .owl-item{ display:flex !important; height:auto !important; float:none !important; }
.news-home .owl-item > *{ display:flex !important; flex-direction:column !important;
  width:100% !important; }
.news-home .owl-item .item{ height:auto !important; flex:1 1 auto !important; }
/* Nút "Chi tiết" tụt xuống đáy thẻ để các thẻ nhìn thẳng hàng */
.news-home .content .btn, .news-home .content .readmore, .news-home .content a.more{
  margin-top:auto !important; }