/* ============================================================================
   madai-dichvu.css — Thiết kế lại khu "DỊCH VỤ CUNG CẤP" (section.policy)
   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.
   Bộ màu đo từ logo (đã có sẵn ở :root trong madai-2026.css, dùng lại,
   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.
   ============================================================================ */

/* --------------------------------------------------------------------------
   1) VÁ GỐC LAYOUT — đây là NGUYÊN NHÂN GỐC khiến lưới "tụt hàng":
   <ul class="list clear row"> vừa display:flex (CSS trước gán) vừa mang class
   Bootstrap ".row" — mà bootstrap.css có ".row:before,.row:after{content:" ";
   display:table}" (clearfix cũ cho layout float). Khi phần tử cha là flex,
   2 pseudo-element này KHÔNG biến mất mà bị "blockify" thành 2 flex-item ẩn,
   chen thêm 1 gap ở đầu hàng — đủ để đẩy lệch 15-16px và làm hàng 1 chỉ vừa
   2 thẻ, hàng 2 vừa 3 thẻ, hàng 3 rớt lại 1 thẻ (đã đo bằng getBoundingClientRect
   TRƯỚC/SAU: trước vá item[0].x lệch +16px so với mép ul, sau vá khớp tuyệt đối
   186/581/976). Tắt hẳn 2 pseudo này là đủ, không cần đổi lại % cột bên dưới.
   -------------------------------------------------------------------------- */
.policy ul.list:before,
.policy ul.list:after{ content:none !important; display:none !important; }

/* --------------------------------------------------------------------------
   2) KHUNG SECTION — nền sáng dịu (thay ảnh nền cũ đã bị che bởi lớp trắng),
   khoảng cách thoáng hơn.
   -------------------------------------------------------------------------- */
.policy{
  background:linear-gradient(180deg,#fff 0%,var(--md-xanh-nhat) 100%) !important;
  padding:44px 0 40px !important;
}
.policy .title-main{ color:var(--md-than) !important; }

/* --------------------------------------------------------------------------
   3) LƯỚI THẺ — desktop 3 cột, đều cao theo hàng nhờ flex mặc định
   (align-items:stretch), khoảng cách đều bằng gap (không dùng margin cộng dồn
   nên không bao giờ lệch/đè khi số thẻ không tròn hàng).
   -------------------------------------------------------------------------- */
.policy ul.list{
  display:flex !important; flex-wrap:wrap !important;
  gap:20px !important; margin:22px 0 0 !important; padding:0 !important;
}
.policy ul.list > li{
  float:none !important; margin:0 !important; padding:0 !important; list-style:none;
  width:calc(33.333% - 13.334px) !important; /* 3 cột, trừ đúng phần gap chia đều */
}

/* --------------------------------------------------------------------------
   4) THẺ DỊCH VỤ — bo góc 16px, viền mảnh xanh nhạt, bóng nhẹ, vạch màu
   thương hiệu phía trên. Chuyển .item sang flex-column để icon nằm TRÊN,
   tiêu đề/mô tả nằm DƯỚI (thay vì icon nổi bên phải tiêu đề như bản cũ, hay
   bị đè/lệch dòng khi tiêu đề dài).
   -------------------------------------------------------------------------- */
.policy ul.list > li .item{
  display:flex !important; flex-direction:column !important; align-items:flex-start !important;
  height:100% !important; width:100% !important;
  background:#fff !important; border:1px solid var(--md-vien-xanh) !important;
  border-radius:16px !important; padding:22px 20px 20px !important;
  position:relative !important; overflow:hidden !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;
}
.policy ul.list > li .item:before{
  content:"" !important; position:absolute !important; left:0 !important; right:0 !important; top:0 !important;
  height:4px !important; background:linear-gradient(90deg,var(--md-xanh),var(--md-cam)) !important;
}
.policy ul.list > li .item:hover{
  box-shadow:0 12px 28px rgba(0,45,35,.12) !important; transform:translateY(-3px) !important;
  border-color:var(--md-xanh) !important;
}

/* --------------------------------------------------------------------------
   5) HUY HIỆU ICON — sửa lỗi "2 icon chồng nhau": file icon-policy_N.png là
   ảnh SPRITE dọc 41×82 (nửa trên = icon xám mặc định, nửa dưới = icon màu
   dùng khi hover kiểu cũ). Rule cũ ".item img{max-height:46px}" phá tỉ lệ khớp
   pixel giữa khung cắt (41px) và ảnh, khiến khung không còn cắt gọn — lộ cả
   2 nửa cùng lúc (thấy rõ khi zoom ảnh chụp thật). Ở đây ấn định khung 52×52,
   phóng ảnh đúng gấp đôi bề rộng (52×104) rồi kéo lên đúng 52px để CHỈ hiện
   nửa dưới (bản icon màu, hợp thương hiệu hơn bản xám) — khớp pixel tuyệt đối
   nên luôn cắt sạch, không phụ thuộc hover (điện thoại không có hover).
   -------------------------------------------------------------------------- */
.policy ul.list li .icon{
  float:none !important; width:52px !important; height:52px !important;
  display:flex !important; align-items:flex-start !important; justify-content:center !important;
  overflow:hidden !important; margin:0 0 14px !important;
  background:var(--md-xanh-nhat) !important; border:1px solid var(--md-vien-xanh) !important;
  border-radius:50% !important; flex:0 0 auto !important;
}
.policy ul.list li .icon img{
  width:52px !important; height:104px !important; max-height:none !important;
  margin:-52px 0 0 !important; display:block !important;
}
/* Hover kiểu cũ (đảo -41px) không còn khớp khung mới — ghim lại đúng vị trí
   để không bị "nhảy icon" khi rê chuột qua thẻ. */
.policy ul.list li:hover .icon img{ margin-top:-52px !important; }

/* --------------------------------------------------------------------------
   6) NỘI DUNG — tiêu đề rõ, mô tả dễ đọc (≥13px), nút "Chi tiết" đẩy xuống
   đáy thẻ bằng flex nên các thẻ cao thấp khác nhau vẫn thẳng hàng nút.
   -------------------------------------------------------------------------- */
.policy ul.list li .content{
  float:none !important; width:100% !important;
  display:flex !important; flex-direction:column !important; flex:1 1 auto !important;
}
.policy ul.list li .content .lbl{
  margin:0 0 8px !important; font-size:16px !important; font-weight:800 !important;
  color:var(--md-xanh-dam) !important; line-height:1.35 !important;
}
.policy ul.list li .content .lbl span{ display:block !important; }
.policy ul.list li .content .desc{
  flex:1 1 auto !important; margin:0 0 16px !important;
  font-size:14px !important; line-height:1.7 !important; color:var(--md-xam) !important;
}

/* --------------------------------------------------------------------------
   7) NÚT "CHI TIẾT" — bản cũ mặc định opacity:0, chỉ hiện khi :hover vào <li>
   nên trên điện thoại (không có hover) nút GẦN NHƯ VÔ HÌNH mãi mãi (đã thấy
   trong ảnh chụp 390px: chỉ thẻ máy vừa rê chuột mới lộ nút, các thẻ khác mất
   hẳn nút "Chi tiết"). Ở đây ép luôn hiển thị, dạng nút viền bo tròn, đổ màu
   khi hover/focus — chữ trắng CHỈ đặt trên nền --md-xanh-dam (#00875a, tương
   phản 5,6) theo đúng yêu cầu, không dùng --md-xanh (#009966, tương phản 4,05
   không đạt cho chữ nhỏ).
   -------------------------------------------------------------------------- */
.policy ul.list li .content .read-more{ margin:auto 0 0 !important; padding:0 !important; }
.policy ul.list li .content .read-more a{
  position:static !important; opacity:1 !important; bottom:auto !important;
  filter:none !important; z-index:auto !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  min-width:0 !important; height:auto !important; line-height:1.2 !important;
  padding:9px 20px !important; border:1.5px solid var(--md-xanh) !important; border-radius:999px !important;
  color:var(--md-xanh-dam) !important; background:#fff !important;
  font-size:13px !important; font-weight:800 !important; letter-spacing:.3px !important;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease !important;
}
.policy ul.list li .content .read-more a:after{ content:none !important; display:none !important; }
.policy ul.list li .content .read-more a:hover,
.policy ul.list li .content .read-more a:focus{
  background:var(--md-nen-nut) !important; border-color:var(--md-nen-nut) !important;
  color:#fff !important; text-decoration:none !important;
}

/* --------------------------------------------------------------------------
   8) RESPONSIVE — máy tính bảng 2 cột (≤991px), điện thoại 1 cột (≤767px).
   Cùng ngưỡng với madai-2026.css để không "giật" bố cục giữa 2 lớp CSS.
   -------------------------------------------------------------------------- */
@media(max-width:991px){
  .policy ul.list > li{ width:calc(50% - 10px) !important; }
}
@media(max-width:767px){
  .policy{ padding:30px 0 26px !important; }
  .policy ul.list{ gap:16px !important; margin-top:18px !important; }
  .policy ul.list > li{ width:100% !important; }
  .policy ul.list > li .item{ padding:20px 18px 18px !important; }
}