/* =========================================================================
   X-DMAIC labs.css — trang X-DMAIC Labs /labs/ (dựng theo DESIGN.md, không có artboard riêng).
   Hero: chữ ngắn bên trái, sản phẩm nổi bật lớn bên phải; các sản phẩm còn lại dạng lưới thẻ.
   Khối CTA cuối dùng .xd-bnext của blog.css.
   ========================================================================= */

/* ---------- Hero ---------- */
.xd-lhero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:56px;align-items:center;padding-top:56px}
.xd-lhero__copy{display:flex;flex-direction:column;gap:22px}
.xd-lhero__h{font-size:var(--xd-t-h1);font-weight:800;line-height:1.08;letter-spacing:-.04em;max-width:640px}
.xd-lhero__h .xd-eyebrow{display:block;margin-bottom:16px;font-size:13px;letter-spacing:.16em;line-height:1.4}
.xd-lhero__h em{font-style:normal;color:var(--xd-lime)}
.xd-lhero .xd-lead{color:rgba(255,255,255,.92);max-width:520px}

/* Sản phẩm nổi bật */
.xd-lfeat{position:relative;display:flex;flex-direction:column;gap:14px;min-height:470px;padding:36px;border-radius:28px;overflow:hidden;background:var(--xd-ink);color:var(--xd-on-dark);box-shadow:var(--xd-shadow-2);scroll-margin-top:24px;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:32px 32px}
.xd-lfeat>*{position:relative;z-index:1}
.xd-lfeat__top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:13px;font-weight:600;color:var(--xd-muted)}
.xd-lfeat__name{margin-top:auto;font-size:clamp(40px,4.4vw,64px);font-weight:800;line-height:1.02;letter-spacing:-.04em}
.xd-lfeat__name a{text-decoration:none}
.xd-lfeat__name a:hover{color:var(--xd-lime)}
.xd-lfeat__tag{max-width:380px;font-size:17px;line-height:1.5;font-weight:600;color:var(--xd-on-dark-2)}
.xd-lfeat__tech{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.xd-lfeat__tech li{padding:4px 10px;border-radius:999px;border:1px solid var(--xd-line-dark);font-size:12.5px;font-weight:600}
.xd-lfeat .xb-line{color:#fff}
.xd-lfeat>.xd-pic img,.xd-lfeat>img{position:absolute;right:24px;top:22px;width:104px;height:auto}
.xd-lfeat__top{padding-right:130px}

.xd-lstatus{padding:4px 10px;border-radius:999px;background:var(--xd-ink);color:var(--xd-lime);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.xd-lfeat .xd-lstatus{background:rgba(255,255,255,.08)}
.xd-lstatus.is-live{background:var(--xd-lime)!important;color:var(--xd-ink)!important}

/* ---------- Các sản phẩm khác ---------- */
.xd-labs-page{padding-bottom:var(--xd-section-y)}
.xd-lsec{padding-top:var(--xd-section-y)}
.xd-lall__h{font-size:clamp(30px,3.4vw,46px);font-weight:800;letter-spacing:-.035em;line-height:1.1}
.xd-lgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.xd-lcard{height:100%;display:flex;flex-direction:column;gap:10px;padding:26px;border-radius:var(--xd-r-lg);background:#fff;border:1px solid var(--xd-line);scroll-margin-top:24px;transition:border-color var(--xd-fast),box-shadow var(--xd-fast)}
.xd-lcard:hover{border-color:var(--xd-ink);box-shadow:var(--xd-shadow-1)}
.xd-lcard__top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.xd-lcard__top .xd-num{font-size:13px;font-weight:800;color:var(--xd-blue)}
.xd-lcard__type{font-size:13px;font-weight:600;color:var(--xd-sub-2)}
.xd-lcard__name{font-size:24px;font-weight:800;line-height:1.15;letter-spacing:-.02em}
.xd-lcard__name a{text-decoration:none}
.xd-lcard__name a:hover{color:var(--xd-blue)}
.xd-lcard__tag{flex:1;font-size:15px;line-height:1.55;color:var(--xd-sub-2)}
.xd-lp__tech{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.xd-lp__tech li{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;border:1.5px solid var(--xd-line);font-size:12.5px;font-weight:600}
.xd-lcard__act{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.xd-lcard .xb-line{color:var(--xd-ink)}

.xd-lcta-sec{padding-top:var(--xd-section-y)}

@media (max-width:1100px){
  .xd-lgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .xd-lhero{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:32px}
  .xd-lfeat{min-height:0;padding:28px}
}
@media (max-width:640px){
  .xd-lgrid{grid-template-columns:minmax(0,1fr)}
  .xd-lfeat>.xd-pic img,.xd-lfeat>img{width:62px;right:14px;top:12px}
  .xd-lfeat__top{padding-right:90px}
}