/* In Ấn Q7 – Công trình thực tế V1.12.0 */
.inq7-ct{
  --p:#23356e;--a:#faa21b;--ink:#1b2233;--muted:#5b6479;--line:#e6e9f0;
  font-family:"Roboto",-apple-system,Segoe UI,Arial,sans-serif;
  color:var(--ink);line-height:1.6;
  /* 1320px – đúng bề ngang khối "Sản phẩm tương tự" ngay phía trên, cho hai khối thẳng hàng */
  width:100%;max-width:1320px;margin:40px auto 6px;
}
.inq7-ct *{box-sizing:border-box}

/* v1.5 – dòng mô tả đã bỏ nên tiêu đề phải tự có khoảng thở phía dưới.
   Khi nào bật lại dòng mô tả thì lề âm của nó kéo khoảng cách về đúng 6px như cũ. */
.inq7-ct-h2{
  margin:0 0 20px!important;font-size:clamp(17px,2vw,22px);font-weight:800;
  color:var(--p);line-height:1.5;text-align:center;letter-spacing:.01em;
}
.inq7-ct-lead{
  margin:-14px auto 20px!important;font-size:13.5px;color:var(--muted);
  text-align:center;max-width:70ch;line-height:1.6;
}

/* v1.3 – 6 công trình một dòng trên máy tính. Bề ngang chia cho 6 nên thẻ hẹp lại,
   khung ảnh giữ tỉ lệ dọc 3:4 nên chiều cao tự rút theo, không cần ép riêng. */
.inq7-ct-luoi{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}

/* v1.9 – theme Flatsome áp kiểu nút bấm lên MỌI thẻ <button>: viết hoa toàn bộ,
   giãn chữ, nền, viền. Phải gỡ đúng những thứ đó, nếu không chữ mô tả sẽ bị hoa hết. */
.inq7-ct .inq7-ct-o{
  display:flex;flex-direction:column;width:100%;height:auto;min-height:0;
  margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;
  font:inherit;font-family:inherit;line-height:inherit;color:inherit;
  text-transform:none;letter-spacing:normal;text-decoration:none;text-align:center;
  cursor:pointer;transition:none;
}
.inq7-ct .inq7-ct-o:hover,
.inq7-ct .inq7-ct-o:focus,
.inq7-ct .inq7-ct-o:active{background:none;box-shadow:none;color:inherit;transform:none}
.inq7-ct .inq7-ct-o:focus-visible{outline:0}

/* Viền và hiệu ứng di chuột nay nằm ở khung ảnh, không phải cả thẻ. */
.inq7-ct-anh{
  display:block;position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;
  background:#f2f4f8;border:1px solid var(--line);border-radius:12px;
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.inq7-ct-o:hover .inq7-ct-anh{
  border-color:var(--a);transform:translateY(-2px);box-shadow:0 6px 18px rgba(27,34,51,.12);
}
.inq7-ct-o:focus-visible .inq7-ct-anh{outline:3px solid var(--a);outline-offset:2px}
.inq7-ct-anh img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;margin:0;border-radius:0;
}

.inq7-ct-chu{
  display:block;flex:1 1 auto;padding:10px 4px 0;
  font-size:12.5px;line-height:1.45;font-weight:600;
  background:none;border:0;color:var(--ink);text-align:center;
  text-transform:none;letter-spacing:normal;transition:color .18s;
}
.inq7-ct-o:hover .inq7-ct-chu{color:var(--a)}

/* Màn hẹp dần thì bớt cột để thẻ không teo lại quá */
@media(max-width:1199px){ .inq7-ct-luoi{grid-template-columns:repeat(4,1fr)} }
@media(max-width:899px){  .inq7-ct-luoi{grid-template-columns:repeat(3,1fr)} }

/* Điện thoại: 2 công trình một dòng */
@media(max-width:699px){
  .inq7-ct{margin-top:32px}
  .inq7-ct-luoi{grid-template-columns:repeat(2,1fr);gap:12px}
  .inq7-ct-chu{padding:10px 12px 12px;font-size:12.5px}
  }

/* Bàn phím tab tới vẫn thấy được viền lấy nét */

@media(prefers-reduced-motion:reduce){
  .inq7-ct-o{transition:none}
  }

/* ============ v1.8.0 – huy hiệu đếm ảnh/video trên thẻ ============ */
.inq7-ct-dem{
  position:absolute;left:7px;bottom:7px;z-index:2;display:flex;gap:4px;pointer-events:none;
}
.inq7-ct-vien{
  display:inline-block;background:rgba(15,20,35,.82);color:#fff;
  font-size:10.5px;font-weight:700;line-height:1.35;padding:3px 7px;border-radius:6px;
}
.inq7-ct-vien-v{background:rgba(208,52,44,.9)}
@media(max-width:699px){ .inq7-ct-vien{font-size:10px;padding:2px 6px} }

/* ============ v1.9.0 – đèn lồng: khung trắng nổi trên nền mờ ============ */
html.inq7-khoa-cuon{overflow:hidden}

/* v1.11.1 – theme Flatsome gán margin-right:1em và margin-bottom:1em cho MỌI thẻ <button>.
   Chính 1em đó làm nút X và mũi tên thụt vào 16px so với mép ảnh. Gỡ ngay từ đầu
   cho mọi nút trong đèn lồng, kể cả ô ảnh nhỏ. */
.inq7-den button{margin:0}
.inq7-den{
  position:fixed;inset:0;z-index:99999;display:none;
  background:rgba(10,14,24,.74);
  font-family:"Roboto",-apple-system,Segoe UI,Arial,sans-serif;
  --cam:#faa21b;--navy:#23356e;--ke:#e6e9f0;--muc:#1b2233;
  padding:18px;
}
.inq7-den.mo{display:flex;align-items:center;justify-content:center}

/* v1.10.2 – chiều cao khoá 620px, bề ngang do JS tính theo tỉ lệ ảnh đang xem.
   Giá trị dưới đây là bản dự phòng khi JS chưa chạy kịp hoặc bị chặn. */
/* v1.11.2 – --le là khoảng lề trong của khung. Vùng ảnh, dải ảnh nhỏ, số đếm và
   nút X đều lấy chung biến này, nên ảnh nằm đâu thì bốn thứ kia thẳng theo đó.
   Trước đây mỗi chỗ ghi 16px riêng, sửa một chỗ là lệch hàng. */
.inq7-den-hop{
  --le:16px;
  background:#fff;border-radius:14px;overflow:hidden;
  width:min(620px,100%);height:min(620px,100%);max-width:100%;max-height:100%;
  display:flex;flex-direction:column;
  box-shadow:0 24px 70px rgba(0,0,0,.45);
}

/* Tiêu đề canh giữa màu xanh. Số đếm và nút đóng đặt tuyệt đối hai bên
   để tiêu đề giữ đúng giữa dù dài ngắn khác nhau. */
.inq7-den-dau{
  position:relative;flex:none;padding:14px 54px 12px;
  border-bottom:1px solid var(--ke);
}
.inq7-den-ten{
  display:block;text-align:center;color:var(--navy);
  font-size:15px;font-weight:700;line-height:1.45;
}
.inq7-den-dem{
  position:absolute;left:var(--le);top:50%;transform:translateY(-50%);
  font-size:12.5px;color:#8c93a4;font-variant-numeric:tabular-nums;
}
/* v1.10.1 – dấu X đơn giản, nét mảnh, nằm sát góc trên phải.
   Không viền, không nền, không vòng tròn. Ô bấm vẫn 34px cho ngón tay chạm trúng.

   v1.11.2 – ô bấm rộng 34px mà dấu X chỉ 15px, để canh giữa thì nét chữ còn thụt
   vào (34-15)/2 ≈ 10px so với mép ô. Mép ô thẳng hàng nhưng mắt nhìn vào nét chữ
   nên vẫn thấy hụt. Dồn dấu X về sát mép phải của ô bằng place-items:center end,
   ô bấm vẫn giữ nguyên 34px cho ngón tay. */
.inq7-den-x{
  position:absolute;right:var(--le);top:50%;transform:translateY(-50%);
  width:34px;height:34px;border:0;background:none;border-radius:6px;
  cursor:pointer;padding:0;color:#8f97a6;
  display:grid;place-items:center end;transition:color .15s;
}
.inq7-den-x svg{
  width:16px;height:16px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;
}
.inq7-den-x:hover{color:var(--muc);background:none}

/* min-height:0 giữ cho ảnh không đội lên phần bên dưới khi màn hình thấp */
.inq7-den-giua{
  flex:1 1 auto;display:flex;align-items:center;justify-content:center;
  padding:var(--le) var(--le) 10px;min-height:0;overflow:hidden;background:#fff;
}
.inq7-den-khung{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
}
.inq7-den-khung img{
  width:auto;height:100%;max-width:100%;max-height:100%;
  object-fit:contain;border-radius:10px;display:block;margin:0;
}
.inq7-den-video{
  height:100%;max-height:100%;width:auto;aspect-ratio:9/16;max-width:100%;
  border-radius:10px;overflow:hidden;background:#0f1420;border:1px solid var(--ke);
}
.inq7-nguon-youtube{aspect-ratio:16/9}
.inq7-den-video iframe{width:100%;height:100%;border:0;display:block}

.inq7-den-duoi{flex:none;padding:0 var(--le) 16px;background:#fff}

/* Mũi tên đẩy ra sát hai mép ảnh, dải ảnh nhỏ căn giữa khoảng còn lại.
   Cần lớp bọc riêng vì dải ảnh dùng lề tự động để căn giữa, lề tự động sẽ
   nuốt hết khoảng trống và kéo hai mũi tên dính vào sát dải. */
.inq7-hang-nho{display:flex;align-items:center;gap:8px}
.inq7-dai-boc{flex:1 1 auto;min-width:0;display:flex;justify-content:center}
.inq7-mui{
  flex:none;width:30px;height:30px;border-radius:999px;cursor:pointer;padding:0;
  border:1px solid var(--ke);background:#fff;color:var(--muc);
  font-size:16px;line-height:1;display:grid;place-items:center;
}
.inq7-mui:hover{background:#f2f4f8;border-color:#cfd5e2}
.inq7-mui[hidden]{display:none}

/* justify-content:center khi nội dung tràn sẽ cắt mất cả hai đầu và không cuộn tới được.
   Thay bằng fit-content: đủ chỗ thì dải co đúng bằng nội dung rồi tự căn giữa,
   tràn thì bị chặn ở 100% và cuộn được tới cả ảnh đầu lẫn ảnh cuối. */
.inq7-dai{
  display:flex;gap:7px;overflow-x:auto;padding:2px;
  justify-content:flex-start;scrollbar-width:none;
  width:fit-content;max-width:100%;margin:0 auto;
}
.inq7-dai::-webkit-scrollbar{display:none}
.inq7-dai[hidden]{display:none}
.inq7-nho{
  flex:0 0 auto;width:46px;height:60px;padding:0;cursor:pointer;position:relative;
  border-radius:6px;overflow:hidden;border:2px solid var(--ke);background:#eef1f7;
}
.inq7-nho img{width:100%;height:100%;object-fit:cover;display:block;margin:0}
.inq7-nho[aria-current="true"]{border-color:var(--cam)}
.inq7-cham{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,14,22,.42)}
.inq7-cham svg{width:16px;height:16px;fill:#fff}

.inq7-vuot{display:none;text-align:center;font-size:12px;color:#8c93a4;margin:8px 0 0}

.inq7-den-cta{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:14px}
/* Không có link sản phẩm thì hàng nút biến mất hẳn, không chừa khoảng trống */
.inq7-den-cta[hidden]{display:none}
.inq7-cta{
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  font-size:14px;font-weight:700;padding:11px 22px;border-radius:999px;line-height:1.3;
}
.inq7-cta-chinh{background:var(--cam);color:#111827}
.inq7-cta-chinh:hover{background:#ffb433;color:#111827}

.inq7-den button:focus-visible,.inq7-den a:focus-visible{outline:2px solid var(--cam);outline-offset:2px}
/* Khung hộp nhận tiêu điểm lúc mở nên không được vẽ viền, nếu không sẽ thấy
   một khung màu bao quanh toàn bộ đèn lồng ngay khi vừa bấm vào. */
.inq7-den-hop:focus,.inq7-den-hop:focus-visible{outline:0}

@media(max-width:699px){
  .inq7-den{padding:10px}
  /* Đổi một biến --le là cả vùng ảnh, dải ảnh nhỏ, số đếm và dấu X cùng lùi vào 12px */
  .inq7-den-hop{--le:12px;width:100%!important;height:auto!important;max-height:100%;border-radius:12px}
  .inq7-den-dau{padding:12px 46px 10px}
  .inq7-den-ten{font-size:14px}
  .inq7-den-giua{padding:var(--le) var(--le) 8px}
  .inq7-den-duoi{padding:0 var(--le) 14px}
  .inq7-mui{display:none}
  .inq7-vuot{display:block}
  .inq7-den-cta{flex-wrap:nowrap;margin-top:12px}
  .inq7-cta{flex:1 1 0;padding:12px 10px;font-size:13.5px}
  .inq7-nho{width:42px;height:55px}
  .inq7-den-video{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .inq7-den *{transition:none!important;animation:none!important}
}