/* Landing page module — erpsme.vn (2026-08-22) */
.ldp-intro { padding: 40px 0; }
.ldp-intro .title-primary .heading { font-size: 30px; font-weight: 700; }
.ldp-intro .title-secondary { font-size: 16px; color: #5b6b85; max-width: 760px; margin: 12px auto 0; }
.ldp-modules { padding: 20px 0 56px; background: #f5f9ff; }
.ldp-modules-wrap { padding: 8px 0 40px; }
.ldp-modules-title { text-align: center; font-size: 22px; font-weight: 700; color: #0b1f3d; margin-bottom: 28px; }
.ldp-modules-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ldp-module-card { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #e9eef7; border-radius: 10px; padding: 16px 18px; box-shadow: 0 2px 8px rgba(11,31,61,.05); transition: transform .2s, box-shadow .2s; }
.ldp-module-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(11,31,61,.1); }
.ldp-module-card--nolink { cursor: default; }
.ldp-module-card--nolink:hover { transform: none; box-shadow: 0 2px 8px rgba(11,31,61,.05); }
.ldp-module-card img { width: 40px; height: 40px; object-fit: contain; flex: 0 0 auto; }
.ldp-module-card span { font-size: 14px; font-weight: 600; color: #0b1f3d !important; }
@media (max-width: 992px) { .ldp-modules-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .ldp-modules-grid { grid-template-columns: 1fr; } }

/* Landing page dùng lại 3 component chung (_trainghiemgiongmaytinh, _bannhanduocgi,
   _banner_hoatdongtrenmoinentang) — các component này gắn hiệu ứng cuộn-mờ-dần
   (data-aos) nhưng thư viện AOS không được khởi tạo lại trên trang landingpage mới,
   khiến nội dung mắc kẹt ở opacity:0 (có thật trong HTML nhưng vô hình). Buộc hiện
   luôn, bỏ hiệu ứng, để không phụ thuộc việc AOS có chạy hay không. */
main [data-aos] {
  opacity: 1 !important;
  transform: none !important;
}

/* Banner CTA giữa trang "Đẩy nhanh tốc độ tăng trưởng..." — thu gọn theo
   yêu cầu (2026-08-26), thay vì dùng padding/font-size mặc định của
   styles-ldp.min.css vốn thiết kế cho 1 banner lớn, độc lập trên trang. */
.section_banner_contact_06_area {
  padding: 36px 0 !important;
}
.section_banner_contact_06_area .section-box-title {
  margin-bottom: 10px !important;
}
.section_banner_contact_06_area .text {
  font-size: 20px !important;
}
.section_banner_contact_06_area .btn-contact {
  padding: 10px 32px !important;
  font-size: 15px !important;
}

/* Khối "Các giải pháp trong nhóm này" dùng đúng class thiết kế gốc của
   erpsme.vn (.heading/.txt-bluel), nhưng css/styles-ldp.min.css (copy
   nguyên từ sis.vn, chỉ để style phần {(content)} copy verbatim) định
   nghĩa lại 2 class nay (weight 400 + xanh #005fff của sis.vn) và load
   sau nên đè mất giao diện gốc. Khôi phục đúng font-weight 600 + xanh
   #0d73d7 chuẩn erpsme cho riêng khối nay. */
.section_item_pro_area .section-box-title .title-primary .heading {
  font-weight: 600;
}
.section_item_pro_area .txt-bluel {
  color: #0d73d7 !important;
}

/* Ảnh nhóm/module (khung .wrap-ratio-img.aspect-ratio-3x2) — mặc định
   dùng object-fit:cover (cắt ảnh theo khung, dễ mất phần nội dung quan
   trọng nếu ảnh upload lên không đúng tỷ lệ 3:2, như đã gặp với banner
   SIS Accounting Online). Đổi sang "fill" để ảnh luôn co giãn khớp đúng
   cả chiều rộng lẫn chiều cao của khung, bất kể tỷ lệ ảnh upload lên —
   không cắt mất nội dung, không cần chỉnh lại CSS mỗi lần đổi ảnh. */
.section_item_pro_area .wrap-ratio-img img,
.ldp-modules-wrap .wrap-ratio-img img {
  -o-object-fit: fill !important;
  object-fit: fill !important;
}

/* Cung 1 loi nhu tren (styles-ldp.min.css de font-weight 400 + chu qua
   nho 12px cho .heading/.intro-content), nhung xay ra rong hon o cac
   trang san pham (pro/view.blade.php) vua chuyen sang dung khoi
   section_item_feature_area — chu tieu de va noi dung deu bi nho/mong,
   nhin "lon xon". Sua chung cho toan bo main, khong rieng 1 class nao. */
main .heading {
  font-weight: 600 !important;
}
main .txt-bluel {
  color: #0d73d7 !important;
}
main .intro-content,
main .intro-content p,
main .intro-content li,
main .intro-content td,
main .intro-content th {
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

/* Bang so sanh trong noi dung san pham: mac dinh la bang HTML tho, ke thua
   text-align:justify tu .intro-content khien chu ngan trong o bi keo
   gian tu qua xau. Chuan hoa: full-width, can trai, dong deu mau. */
main .intro-content table {
  width: 100% !important;
  border-collapse: collapse;
  margin: 20px 0;
}
main .intro-content table td,
main .intro-content table th {
  text-align: left !important;
  padding: 12px 16px;
  border: 1px solid #e3e9f0;
  vertical-align: top;
}
main .intro-content table th {
  background: #f4f8fd;
}
main .intro-content table tr:nth-child(even) td {
  background: #fafbfc;
}

/* section_item_feature_area: .wrap-primary mac dinh luon co dinh 50%
   width de doi cho voi .wrap-secondary (anh) o ben canh. Voi cac muc
   khong co anh minh hoa (chi co .wrap-primary, khong co .wrap-secondary
   sibling), 50% do bo trong het nua con lai cua section, nhin nhu bi
   "hut vao 1 ben". Cho .wrap-primary danh rieng 1 minh (:only-child)
   danh toan bo chieu rong, chi cac muc co anh moi chia 2 cot nhu binh
   thuong. */
.section_item_feature_area .wrap-primary:only-child {
  width: 100% !important;
  padding: 20px 0 !important;
}

/* Banner dau trang (pro/view.blade.php va landingpage/view.blade.php):
   can full-width, khong khoang trong 2 ben, khong cat mat noi dung anh
   (object-fit:cover se cat phan duoi, cat nhieu hon khi man hinh cang
   rong - da gap voi SIS Live Translator). Dung aspect-ratio (khong
   phai px co dinh) de ty le phan hien thi luon nhu nhau o moi do rong
   man hinh, cong max-height chan cho man qua rong. object-fit:fill keo
   gian ca 2 chieu khop khung thay vi cat - danh doi la anh co the meo
   nhe neu ty le anh goc khac 2.8:1.
   CHI ap dung tu 768px tro len (banner_pc). Anh banner_mb duoc crop
   theo ty le gan vuong (~1.1-1.2:1) cho dien thoai — ep no vao khung
   2.8:1 se bop det khung khiep (da tung xay ra that, banner cao 139px
   tren man 390px, chu bi keo det ngang). Duoi 768px de anh hien thi
   dung ty le tu nhien (width:100%, height:auto), khong crop khong keo
   gian. */
.hero-banner-cover img.responsive {
  width: 100%;
  height: auto;
}
@media (min-width: 768px) {
  .hero-banner-cover {
    width: 100%;
    aspect-ratio: 2.8 / 1;
    max-height: 600px;
    overflow: hidden;
  }
  .hero-banner-cover .item-slide-inner,
  .hero-banner-cover picture {
    display: block;
    width: 100%;
    height: 100%;
  }
  .hero-banner-cover img.responsive {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
}