@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Cormorant+Garamond:wght@600;700&family=Inter:wght@400;500;600&display=swap');

/* Nền chứng chỉ ITUpX dạng A4 ngang: dữ liệu cá nhân, QR và mã vạch được chèn động. */
.itupx-cert {
  --cert-bg: url('/assets/certificate-bg-v8.jpg');
  position: relative;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  aspect-ratio: 1491 / 1055;
  background: #fff var(--cert-bg) center / 100% 100% no-repeat;
  box-shadow: 0 14px 42px rgba(0,0,0,.28);
  border-radius: 2px;
  overflow: hidden;
  color: #111827;
}
.itupx-cert__layer { position:absolute; inset:0; z-index:2; pointer-events:none; }
.itupx-cert__name-row { position:absolute; left:13.5%; width:73%; top:36%; height:7%; display:table; table-layout:fixed; }
.itupx-cert__name { display:table-cell; width:50%; vertical-align:middle; font-family:'Great Vibes',cursive; font-size:clamp(.92rem,2.2vw,2rem); line-height:1.05; overflow:hidden; }
.itupx-cert__name--vi { text-align:left; padding-right:.35em; }
.itupx-cert__name--en { text-align:right; padding-left:.35em; }
.itupx-cert__course-row { position:absolute; left:13.5%; width:73%; top:46.2%; height:15%; display:table; table-layout:fixed; }
.itupx-cert__course { display:table-cell; width:50%; vertical-align:top; padding:.45em 1.4em; font-family:'Cormorant Garamond',Georgia,serif; font-size:clamp(.55rem,1.05vw,.88rem); line-height:1.28; color:#172554; overflow:hidden; background:transparent; }
.itupx-cert__course strong { display:block; font-weight:700; }
.itupx-cert__course--vi { text-align:left; }
.itupx-cert__course--en { text-align:right; }
.itupx-cert__qr { position:absolute; left:12.65%; top:67.15%; width:7.75%; aspect-ratio:1; padding:0; box-sizing:border-box; background:transparent; border:0; }
.itupx-cert__qr canvas,.itupx-cert__qr img { display:block; width:100% !important; height:100% !important; }
.itupx-cert__qr-note { position:absolute; left:22%; top:67.45%; width:15.2%; font-family:Inter,system-ui,sans-serif; font-size:clamp(.34rem,.62vw,.54rem); line-height:1.2; color:#334155; }
.itupx-cert__qr-note .link { color:#0b2f8a; font-weight:600; word-break:break-all; }
.itupx-cert__barcode { position:absolute; left:64%; top:70%; width:18.8%; height:9%; padding:0; box-sizing:border-box; text-align:center; background:transparent; }
.itupx-cert__barcode svg { display:block; width:100%; height:38%; max-height:none; background:#fff; shape-rendering:crispEdges; }
.itupx-cert__barcode-label { margin-top:.35em; font-family:ui-monospace,Menlo,monospace; font-size:clamp(.33rem,.65vw,.54rem); color:#475569; background:transparent; }
.itupx-cert__date { position:absolute; left:50%; top:81.8%; transform:translateX(-50%); font-family:'Cormorant Garamond',Georgia,serif; font-size:clamp(.72rem,1.25vw,1rem); font-weight:700; text-align:center; white-space:nowrap; background:transparent; }
.itupx-cert-card { padding:.85rem; background:#0f172a; border:1px solid rgba(251,191,36,.25); border-radius:1.25rem; }
.itupx-cert-card__actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; justify-content:flex-end; pointer-events:auto; }
@media (max-width: 700px) {
  .itupx-cert__name-row { left:13%; width:74%; top:35.4%; height:6.6%; }
  .itupx-cert__name { font-size:clamp(.78rem,3.25vw,1.55rem); line-height:1; }
  .itupx-cert__course-row { top:46.1%; height:14.4%; }
  .itupx-cert__course { padding:.3em 1em; font-size:clamp(.46rem,1.55vw,.72rem); line-height:1.18; }
  .itupx-cert__qr { width:8.1%; }
  .itupx-cert__qr-note { left:22%; top:67.3%; width:16.8%; font-size:clamp(.3rem,1.1vw,.5rem); line-height:1.1; overflow:hidden; }
  .itupx-cert__qr-note .link { word-break:normal; }
  .itupx-cert__barcode { left:64%; top:69.8%; width:18.8%; height:8.5%; }
  .itupx-cert__barcode-label { margin-top:.25em; font-size:clamp(.3rem,1vw,.45rem); }
  .itupx-cert__date { top:82%; font-size:clamp(.55rem,1.45vw,.75rem); }
}

@media print { body * { visibility:hidden !important; } .itupx-cert,.itupx-cert * { visibility:visible !important; } .itupx-cert { position:fixed !important; inset:0; width:100vw !important; max-width:none !important; box-shadow:none !important; } .itupx-cert-card__actions { display:none !important; } }