/* == Service Content Responsive Pack ==
   Áp dụng cho nội dung trang dịch vụ (detail & custom HTML ở list nếu dùng). */

/* 1) Reset các phần tử media trong vùng nội dung */
.service-content .entry,
.service-custom-html {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Ảnh/Video/SVG co giãn theo khung */
.service-content .entry img,
.service-custom-html img,
.service-content .entry video,
.service-custom-html video,
.service-content .entry svg,
.service-custom-html svg {
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

/* Xử lý ảnh có inline width/height từ editor */
.service-content .entry img[width],
.service-custom-html img[width],
.service-content .entry img[style*="width"],
.service-custom-html img[style*="width"] {
  max-width: 100% !important;
}

/* 2) Iframe nhúng (YouTube, Maps...) */
.service-embed,
.service-custom-html .service-embed {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  /* tỉ lệ mặc định 16:9; JS sẽ đặt inline style nếu phát hiện size khác */
  aspect-ratio: 16 / 9;
}
.service-embed iframe {
  position: absolute;
  inset: 0;
  border: 0;
  display: block;
}

/* 3) Bảng rộng – cho phép cuộn ngang */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-responsive > table {
  border-collapse: collapse;
}
.table-responsive th,
.table-responsive td {
  border: 1px solid #eee;
  padding: 8px 10px;
}

/* 4) Khoảng cách & chữ trên màn nhỏ */
@media (max-width: 959px) {
  .product-section.uk-section-large { padding-top: 40px; padding-bottom: 40px; }
}
@media (max-width: 639px) {
  .product-section.uk-section-large { padding-top: 28px; padding-bottom: 28px; }
  .breadcrumb { font-size: 13px; }
  .service-content .entry h1,
  .service-content .entry h2 { font-size: 22px; line-height: 1.25; }
}

/* 5) Ngăn nội dung phá layout do float/width cố định */
.service-content .entry [style*="position:fixed"] { position: static !important; }
.service-content .entry [style*="float:left"],
.service-content .entry [style*="float:right"] {
  float: none !important;
  margin: 10px auto !important;
}

/* 6) Hình trong <a> vẫn block để không vỡ chữ */
.service-content .entry a > img { display: block; }