/* ══════════════════════════════════════════════════════════════════════════
   TRANG BAN CUA TUNG DICH VU — bo lop dung cho HTML tu soan
   ──────────────────────────────────────────────────────────────────────────
   Tep nay duoc nap o HAI noi va phai giong het nhau:
     · trang khach  : lesmee.com/services/<ma dich vu>
     · trang quan tri: khung xem thu trong tab "Trang ban"
   Vi vay no dung bien mau rieng, khong phu thuoc crystal.css.
   Moi lop deu bat dau bang "lmx-" de phan biet voi lop cua he thong.
   ══════════════════════════════════════════════════════════════════════════ */

.lm-landing {
  --lmx-ink:      #3A3843;
  --lmx-ink-2:    #4E4B57;
  --lmx-ink-3:    #585661;
  --lmx-line:     rgba(28, 27, 32, .10);
  --lmx-line-2:   rgba(28, 27, 32, .06);
  --lmx-surface:  rgba(255, 255, 255, .82);
  --lmx-surface-2:rgba(255, 255, 255, .58);
  --lmx-brand:    #7A2FD4;
  --lmx-brand-2:  #B36AF0;
  --lmx-tint:     rgba(122, 47, 212, .07);
  --lmx-ok:       #12855C;
  --lmx-gold:     #C98A16;
  --lmx-r:        18px;
  --lmx-r-sm:     12px;
  --lmx-sh:       0 1px 2px rgba(28,27,32,.05), 0 8px 24px -12px rgba(28,27,32,.18);
  --lmx-gap:      clamp(16px, 2.2vw, 26px);

  color: var(--lmx-ink);
  font-size: 15px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* Nhip doc: moi khoi con truc tiep cach nhau deu nhau */
.lm-landing > * + * { margin-top: clamp(28px, 4vw, 56px); }

/* ── 1 · KHOI ───────────────────────────────────────────────────────────── */
.lmx-band {
  padding: clamp(22px, 3vw, 38px);
  border-radius: var(--lmx-r);
  background: var(--lmx-surface);
  border: 1px solid var(--lmx-line-2);
  box-shadow: var(--lmx-sh);
}
.lmx-band-plain { padding: 0; background: none; border: 0; box-shadow: none; }
.lmx-band-tint  { background: var(--lmx-tint); border-color: rgba(122,47,212,.14); }
.lmx-band-dark {
  color: #fff;
  background: radial-gradient(96% 118% at 6% -8%, #2A1650 0%, #1A1030 46%, #150C26 100%);
  border-color: rgba(255,255,255,.10);
}
.lmx-band-dark .lmx-h1,
.lmx-band-dark .lmx-h2,
.lmx-band-dark .lmx-h3    { color: #fff; }
.lmx-band-dark .lmx-lead,
.lmx-band-dark .lmx-p     { color: rgba(255,255,255,.88); }
.lmx-band-dark .lmx-muted,
.lmx-band-dark .lmx-caption { color: rgba(255,255,255,.70); }
.lmx-band-dark .lmx-eyebrow { color: #C6A6FF; }
.lmx-band-dark .lmx-price   { color: #fff; }
.lmx-band-dark .lmx-quote   { color: rgba(255,255,255,.88); border-left-color: #C6A6FF; }
.lmx-band-dark .lmx-quote cite { color: rgba(255,255,255,.66); }
.lmx-band-dark .lmx-list,
.lmx-band-dark .lmx-check   { color: rgba(255,255,255,.86); }
.lmx-band-dark .lmx-card    { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.lmx-band-dark .lmx-table td      { color: rgba(255,255,255,.86); }
.lmx-band-dark .lmx-table thead th{ color: rgba(255,255,255,.68); border-bottom-color: rgba(255,255,255,.18); }
.lmx-band-dark .lmx-table tbody tr + tr td { border-top-color: rgba(255,255,255,.10); }
.lmx-band-dark .lmx-tag     { background: rgba(255,255,255,.12); color: #E7DCFF; }
.lmx-band-dark .lmx-sep     { background: rgba(255,255,255,.14); }
.lmx-band-dark .lmx-cta-ghost { color: #E7DCFF; border-color: rgba(255,255,255,.34); }

/* ── 2 · CHU ────────────────────────────────────────────────────────────── */
.lmx-h1 {
  margin: 0 0 .35em;
  font-size: clamp(28px, 4.2vw, 42px);
  line-height: 1.14;
  letter-spacing: -.02em;
  font-weight: 700;
  color: var(--lmx-ink);
}
.lmx-h2 {
  margin: 0 0 .4em;
  font-size: clamp(21px, 2.7vw, 29px);
  line-height: 1.22;
  letter-spacing: -.015em;
  font-weight: 700;
  color: var(--lmx-ink);
}
.lmx-h3 {
  margin: 0 0 .45em;
  font-size: clamp(16px, 1.9vw, 19px);
  line-height: 1.32;
  font-weight: 650;
  color: var(--lmx-ink);
}
.lmx-lead  { margin: 0 0 1em; font-size: clamp(16px, 1.8vw, 18px); color: var(--lmx-ink-2); }
.lmx-p     { margin: 0 0 1em; color: var(--lmx-ink-2); }
.lmx-p:last-child, .lmx-lead:last-child { margin-bottom: 0; }
.lmx-muted { color: var(--lmx-ink-3); font-size: 13px; }
.lmx-center{ text-align: center; }
.lmx-eyebrow {
  display: inline-block;
  margin: 0 0 .8em;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--lmx-brand);
}

/* ── 3 · LUOI ───────────────────────────────────────────────────────────── */
.lmx-grid   { display: grid; gap: var(--lmx-gap); grid-template-columns: 1fr; }
.lmx-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lmx-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lmx-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* chia doi chu — anh */
.lmx-split  { display: grid; gap: var(--lmx-gap); grid-template-columns: 1fr 1fr; align-items: center; }
.lmx-split-wide { grid-template-columns: 1.25fr 1fr; }

@media (max-width: 900px) {
  .lmx-grid-3, .lmx-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .lmx-grid-2, .lmx-grid-3, .lmx-grid-4,
  .lmx-split, .lmx-split-wide { grid-template-columns: 1fr; }
}

/* ── 4 · THE ────────────────────────────────────────────────────────────── */
.lmx-card {
  padding: clamp(16px, 2vw, 22px);
  border-radius: var(--lmx-r-sm);
  background: var(--lmx-surface-2);
  border: 1px solid var(--lmx-line-2);
}
.lmx-card > * + * { margin-top: .6em; }
.lmx-card-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-bottom: 6px;
  border-radius: 9px;
  background: var(--lmx-tint); color: var(--lmx-brand);
  font-size: 13px; font-weight: 700;
}

/* ── 5 · ANH & VIDEO ────────────────────────────────────────────────────── */
.lmx-img {
  display: block; width: 100%; height: auto;
  border-radius: var(--lmx-r-sm);
  border: 1px solid var(--lmx-line-2);
}
.lmx-img-plain { border: 0; border-radius: 0; }
.lmx-figure { margin: 0; }
.lmx-caption { margin-top: .5em; font-size: 12.5px; color: var(--lmx-ink-3); }
/* khung 16:9 cho video nhung */
.lmx-video { position: relative; width: 100%; padding-top: 56.25%; border-radius: var(--lmx-r-sm); overflow: hidden; background: #14101F; }
.lmx-video > iframe,
.lmx-video > video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── 6 · DANH SACH ──────────────────────────────────────────────────────── */
.lmx-list { margin: 0; padding-left: 1.15em; color: var(--lmx-ink-2); }
.lmx-list > li + li { margin-top: .45em; }
/* danh sach co dau tick, khong dung dau cham */
.lmx-check { margin: 0; padding: 0; list-style: none; color: var(--lmx-ink-2); }
.lmx-check > li { position: relative; padding-left: 1.7em; }
.lmx-check > li + li { margin-top: .5em; }
.lmx-check > li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--lmx-ok);
}

/* ── 7 · BANG ───────────────────────────────────────────────────────────── */
.lmx-tablewrap { width: 100%; overflow-x: auto; }
.lmx-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lmx-table th, .lmx-table td { padding: 11px 14px; text-align: left; vertical-align: top; }
.lmx-table thead th {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--lmx-ink-3); border-bottom: 1px solid var(--lmx-line);
}
.lmx-table tbody tr + tr td { border-top: 1px solid var(--lmx-line-2); }
.lmx-table td { color: var(--lmx-ink-2); }
.lmx-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── 8 · GIA ────────────────────────────────────────────────────────────── */
.lmx-price {
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--lmx-ink);
}
.lmx-price-note { font-size: 13px; color: var(--lmx-ink-3); }

/* ── 9 · NHAN & TRICH ───────────────────────────────────────────────────── */
.lmx-tag {
  display: inline-block; margin: 0 6px 6px 0;
  padding: 4px 10px; border-radius: 99px;
  background: var(--lmx-tint); color: var(--lmx-brand);
  font-size: 11.5px; font-weight: 650; letter-spacing: .02em;
}
.lmx-tag-ok   { background: rgba(18,133,92,.10);  color: var(--lmx-ok); }
.lmx-tag-gold { background: rgba(201,138,22,.12); color: var(--lmx-gold); }
.lmx-quote {
  margin: 0; padding-left: 16px;
  border-left: 3px solid var(--lmx-brand-2);
  color: var(--lmx-ink-2); font-size: 16px;
}
.lmx-quote cite { display: block; margin-top: .6em; font-size: 13px; font-style: normal; color: var(--lmx-ink-3); }

/* ── 10 · LOI KEU GOI ───────────────────────────────────────────────────── */
.lmx-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px;
  background: linear-gradient(135deg, var(--lmx-brand), var(--lmx-brand-2));
  color: #fff; font-weight: 650; font-size: 14.5px;
  text-decoration: none;
  box-shadow: 0 6px 18px -8px rgba(122,47,212,.7);
}
.lmx-cta:hover { filter: brightness(1.05); }
.lmx-cta-ghost {
  background: none; color: var(--lmx-brand);
  border: 1px solid rgba(122,47,212,.28); box-shadow: none;
}

/* ── 11 · KHOANG CACH & DUONG KE ────────────────────────────────────────── */
.lmx-sep { height: 1px; margin: 0; border: 0; background: var(--lmx-line-2); }
.lmx-sp-sm { height: 12px; }
.lmx-sp-md { height: 24px; }
.lmx-sp-lg { height: 44px; }

/* ── 12 · AN TOAN ───────────────────────────────────────────────────────── */
/* HTML tu soan khong duoc pha vo be ngang cua trang */
.lm-landing { overflow-wrap: anywhere; }
/* Me 197 (15/10, soat cheo C-N5): khung trang ban la VUNG KIN — phan tu fixed / z-index ben trong
   (ke ca HTML dan tu noi khac) bi nhot trong khung, khong trum duoc the dat hang, menu hay hop thoai
   cua trang. Lop thu hai sau bo loc may chu (chi giu lop lmx-* / is-*). */
.lm-landing { position: relative; contain: layout; isolation: isolate; }
.lm-landing img,
.lm-landing video,
.lm-landing iframe,
.lm-landing table { max-width: 100%; }
.lm-landing pre { overflow-x: auto; }

@media (prefers-reduced-motion: reduce) {
  .lm-landing * { animation: none !important; transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MẺ 197 (14/10/2026) — BỘ KHỐI THAY ld.lesmee.com
   ──────────────────────────────────────────────────────────────────────────
   Anh Huy: «làm sao bỏ hẳn ld.lesmee.com mà khi vào dịch vụ trên lesmee.com
   khách cũng xem được sự trình bày tương tự cho mỗi dịch vụ».
   Các khối dưới đây dựng lại bố cục các trang ld (hero tối có ảnh bay, dải số
   liệu, lưới tính năng có biểu tượng, ảnh có điểm chú thích, portfolio, đánh
   giá, bảng giá nhiều gói, so sánh, hỏi đáp, kêu gọi hành động) mà KHÔNG cần
   CSS hay mã viết tay trong HTML. Hành vi (tab, trượt ảnh, đặt hàng, hộp báo
   giá, tải tour) gắn bằng thuộc tính data-lmx-* — xem TrangBanHtml.tsx.
   Nền: sáng theo lesmee.com; khi thẻ ngoài cùng có data-theme="dark" (quy ước
   của crystal.css) thì đổi sang nền tối. Khối hero / băng tối luôn tối.
   ══════════════════════════════════════════════════════════════════════════ */

.lm-landing {
  --lmx-amber:      #B9770E;   /* chữ vàng trên nền sáng — đủ tương phản */
  --lmx-amber-glow: #F0A830;   /* vàng của trang ld, dùng cho quầng sáng / nút */
  --lmx-teal:       #137A70;
  --lmx-teal-glow:  #46D8C8;
  --lmx-violet-glow:#A855F7;
  --lmx-solid:      #FFFFFF;   /* nền đặc cho viền chuyển màu */
  --lmx-night:      #110B1E;
  --lmx-night-2:    #1D1233;
  --lmx-glass:      rgba(255, 255, 255, .72);
  --lmx-ease-pop:   cubic-bezier(.2, 1.35, .4, 1);
  --lmx-display:    var(--font-playfair, "Playfair Display"), Georgia, "Times New Roman", serif;
}
:where(.lm-landing) button { font: inherit; }   /* độ ưu tiên thấp: lớp lmx-* vẫn đặt được cỡ / độ đậm */
/* nhảy tới mục trong trang (href="#lmx-…") không bị thanh menu dính che mất tiêu đề */
.lm-landing [id] { scroll-margin-top: 96px; }
.lm-landing :where(a, button, summary):focus-visible {
  outline: 2px solid var(--lmx-brand-2);
  outline-offset: 3px;
}

/* Nền tối của cả trang (crystal.css 4.9) */
:root[data-theme="dark"] .lm-landing {
  --lmx-ink:      #E4E3EA;
  --lmx-ink-2:    #AFADBA;
  --lmx-ink-3:    #8F8C99;
  --lmx-line:     rgba(255, 255, 255, .13);
  --lmx-line-2:   rgba(255, 255, 255, .08);
  --lmx-surface:  rgba(34, 34, 42, .78);
  --lmx-surface-2:rgba(255, 255, 255, .04);
  --lmx-brand:    #C79BF2;
  --lmx-brand-2:  #D8BCF6;
  --lmx-tint:     rgba(199, 155, 242, .13);
  --lmx-ok:       #5FD3A6;
  --lmx-gold:     #F0C879;
  --lmx-amber:    #F0C266;
  --lmx-teal:     #5FD3C4;
  --lmx-solid:    #1C1C21;
  --lmx-glass:    rgba(28, 28, 34, .74);
  --lmx-sh:       0 1px 2px rgba(0,0,0,.34), 0 10px 28px -14px rgba(0,0,0,.66);
}

/* Trong khối tối: đổi bộ màu một lần, mọi khối con tự theo */
.lmx-hero,
.lmx-band-dark {
  --lmx-ink:      #FFFFFF;
  --lmx-ink-2:    rgba(255, 255, 255, .86);
  --lmx-ink-3:    rgba(255, 255, 255, .66);
  --lmx-line:     rgba(255, 255, 255, .18);
  --lmx-line-2:   rgba(255, 255, 255, .10);
  --lmx-surface:  rgba(255, 255, 255, .06);
  --lmx-surface-2:rgba(255, 255, 255, .05);
  --lmx-tint:     rgba(199, 155, 242, .16);
  --lmx-brand:    #D8BCF6;
  --lmx-ok:       #5FD3A6;
  --lmx-amber:    #F6C46A;
  --lmx-teal:     #46D8C8;
  --lmx-solid:    #1A1129;
  --lmx-glass:    rgba(17, 11, 30, .66);
}

/* ── 13 · HERO — khối mở đầu tối, chữ một bên, ảnh bay một bên ───────────── */
.lmx-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  padding: clamp(26px, 4vw, 54px);
  border-radius: calc(var(--lmx-r) + 6px);
  color: var(--lmx-ink);
  background:
    radial-gradient(60% 70% at 92% 0%, rgba(240, 168, 48, .20), transparent 62%),
    radial-gradient(56% 66% at 0% 100%, rgba(168, 85, 247, .26), transparent 64%),
    linear-gradient(160deg, var(--lmx-night-2), var(--lmx-night) 62%);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 34px 80px -40px rgba(40, 18, 82, .72);
}
/* lưới mảnh mờ dần như trang ld */
.lmx-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(244, 241, 234, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 241, 234, .07) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(circle at 74% 44%, #000 0%, transparent 72%);
          mask-image: radial-gradient(circle at 74% 44%, #000 0%, transparent 72%);
}
.lmx-hero-copy { position: relative; z-index: 2; min-width: 0; }
.lmx-hero .lmx-eyebrow { color: var(--lmx-amber-glow); }
.lmx-hero .lmx-lead { color: rgba(255, 255, 255, .78); max-width: 34em; }
.lmx-hero-hint {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, .5);
  text-align: right;
}

.lmx-display {
  margin: .25em 0 .42em;
  font-family: var(--lmx-display);
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.06;
  letter-spacing: -.02em;
  font-weight: 700;
  color: var(--lmx-ink);
  text-wrap: balance;
}
.lmx-grad {
  background: linear-gradient(112deg, var(--lmx-amber-glow) 8%, var(--lmx-violet-glow) 92%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.lmx-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 1.5em;
}
.lmx-cta { cursor: pointer; transition: filter .2s, transform .35s var(--lmx-ease-pop), box-shadow .3s; }
/* nút đặc giữ đúng tím thương hiệu ở mọi nền (bộ màu nền tối làm nhạt --lmx-brand cho chữ, không cho nút) */
.lmx-cta:not(.lmx-cta-ghost):not(.lmx-cta-amber) { background: linear-gradient(135deg, #7A2FD4, #B36AF0); }
/* nút <button> mang lớp lmx-cta: bỏ viền mặc định của trình duyệt (nút viền lmx-cta-ghost giữ viền riêng) */
.lm-landing button.lmx-cta:not(.lmx-cta-ghost) { border: 0; }
.lmx-cta:hover { transform: translateY(-2px); }
.lmx-cta-amber {
  color: #1A1206;
  background: linear-gradient(135deg, var(--lmx-amber-glow), #F6C46A);
  box-shadow: 0 10px 30px -10px rgba(240, 168, 48, .85);
}
.lmx-cta-lg { padding: 14px 26px; font-size: 15.5px; }
.lmx-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--lmx-ink-2);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.lmx-link:hover { color: var(--lmx-ink); }
.lmx-link-ico {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--lmx-line);
  font-size: 13px;
  transition: transform .35s var(--lmx-ease-pop), border-color .2s, color .2s;
}
.lmx-link:hover .lmx-link-ico { transform: scale(1.1); border-color: var(--lmx-amber-glow); color: var(--lmx-amber-glow); }

/* 13a · ảnh bay (collage) — tối đa 6 ảnh, vị trí theo thứ tự ảnh */
.lmx-collage {
  position: relative;
  z-index: 1;
  min-width: 0;
  aspect-ratio: 1 / .9;
}
.lmx-collage > img {
  position: absolute;
  display: block;
  height: auto;               /* thuộc tính height của ảnh không được đè tỉ lệ khung */
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .20);
  box-shadow: 0 26px 54px -22px rgba(0, 0, 0, .78);
  animation: lmx-bay 9s ease-in-out infinite;
  transition: scale .45s var(--lmx-ease-pop), box-shadow .3s;
}
.lmx-collage > img:hover { scale: 1.06; z-index: 9; animation-play-state: paused; }
.lmx-collage > img:nth-child(1) {
  width: 64%; aspect-ratio: 4 / 3; left: 18%; top: 20%; z-index: 4; --lmx-rot: -4deg;
  box-shadow: 0 0 0 1px rgba(240, 168, 48, .55), 0 0 64px -8px rgba(240, 168, 48, .5), 0 32px 64px -26px rgba(0, 0, 0, .85);
}
.lmx-collage > img:nth-child(2) { width: 42%; aspect-ratio: 4 / 3; right: 0;  top: 0;     z-index: 3; --lmx-rot: 6deg;  animation-delay: -2.2s; }
.lmx-collage > img:nth-child(3) { width: 40%; aspect-ratio: 4 / 3; left: 0;   bottom: 6%; z-index: 5; --lmx-rot: -7deg; animation-delay: -4.4s; }
.lmx-collage > img:nth-child(4) { width: 33%; aspect-ratio: 1;     right: 3%; bottom: 0;  z-index: 5; --lmx-rot: 5deg;  animation-delay: -6.1s; }
.lmx-collage > img:nth-child(5) { width: 27%; aspect-ratio: 4 / 3; left: 3%;  top: 3%;    z-index: 2; --lmx-rot: -9deg; animation-delay: -3.3s; opacity: .9; }
.lmx-collage > img:nth-child(6) { width: 24%; aspect-ratio: 1;     left: 40%; bottom: -2%; z-index: 6; --lmx-rot: 3deg; animation-delay: -5.2s; border-radius: 50%; }
@keyframes lmx-bay {
  0%, 100% { transform: translateY(0) rotate(var(--lmx-rot, 0deg)); }
  50%      { transform: translateY(-11px) rotate(var(--lmx-rot, 0deg)); }
}
/* ảnh bản vẽ / sản phẩm nền trong: đặt trọn trên tờ giấy trắng, không cắt mất nét */
.lmx-collage-paper > img { object-fit: contain; padding: 6px; background: #FFFFFF; }

/* 13b · quả cầu 360° có vòng quay và nhãn điểm */
.lmx-orbit {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  aspect-ratio: 1;
  margin-inline: auto;
  display: grid;
  place-items: center;
}
.lmx-orbit > img {
  width: 58%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 70px 6px rgba(110, 170, 255, .40), 0 30px 80px -18px rgba(0, 0, 0, .85), inset 0 0 50px rgba(0, 0, 0, .5);
  animation: lmx-xoay 120s linear infinite, lmx-nhun 7s ease-in-out infinite;
}
.lmx-orbit-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .85);
  pointer-events: none;
}
.lmx-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.lmx-ring-1 { width: 76%;  height: 76%;  border: 1px solid rgba(179, 106, 240, .38); animation: lmx-xoay 18s linear infinite; }
.lmx-ring-2 { width: 94%;  height: 94%;  border: 1px dashed rgba(70, 216, 200, .32); animation: lmx-xoay 30s linear infinite reverse; }
.lmx-ring-3 { width: 108%; height: 108%; border: 1px solid rgba(168, 85, 247, .18); }
.lmx-ring-1::before,
.lmx-ring-2::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
}
.lmx-ring-1::before { left: 0;  translate: -50% -50%; background: var(--lmx-amber-glow); box-shadow: 0 0 16px var(--lmx-amber-glow); }
.lmx-ring-2::before { right: 0; translate: 50% -50%;  background: var(--lmx-teal-glow);  box-shadow: 0 0 16px var(--lmx-teal-glow); }
.lmx-orbit-tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 650;
  color: #fff;
  white-space: nowrap;
  background: rgba(16, 18, 24, .86);
  border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  animation: lmx-nhun 6s ease-in-out infinite;
}
.lmx-orbit-tag::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lmx-amber-glow);
  box-shadow: 0 0 10px var(--lmx-amber-glow);
}
.lmx-tag-1 { top: 14%; left: -2%; }
.lmx-tag-2 { top: 46%; right: -4%; animation-delay: -2s; }
.lmx-tag-2::before { background: var(--lmx-teal-glow); box-shadow: 0 0 10px var(--lmx-teal-glow); }
.lmx-tag-3 { bottom: 10%; left: 6%; animation-delay: -4s; }
.lmx-tag-3::before { background: var(--lmx-violet-glow); box-shadow: 0 0 10px var(--lmx-violet-glow); }
@keyframes lmx-xoay { to { rotate: 360deg; } }
@keyframes lmx-nhun { 50% { translate: 0 -12px; } }

@media (max-width: 820px) {
  .lmx-hero { grid-template-columns: 1fr; }
  .lmx-collage { width: min(100%, 460px); margin-inline: auto; }
  .lmx-hero-hint { text-align: center; }
}

/* ── 14 · DẢI CHẠY NGÀNH NGHỀ — viết danh sách HAI lần liền nhau ───────── */
.lmx-marquee {
  overflow: hidden;
  padding: 13px 0;
  border-block: 1px solid var(--lmx-line-2);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.lmx-marquee-track {
  display: flex;
  width: max-content;
  animation: lmx-chay 40s linear infinite;
}
.lmx-marquee:hover .lmx-marquee-track { animation-play-state: paused; }
.lmx-marquee-track > span {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding-right: 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--lmx-ink-3);
  white-space: nowrap;
}
.lmx-marquee-track > span::after { content: "\2726"; font-size: 10px; color: var(--lmx-amber-glow); }
@keyframes lmx-chay { to { transform: translateX(-50%); } }

/* ── 15 · DẢI SỐ LIỆU ─────────────────────────────────────────────────────── */
.lmx-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border-radius: var(--lmx-r);
  background: var(--lmx-line-2);
  border: 1px solid var(--lmx-line-2);
  box-shadow: var(--lmx-sh);
}
.lmx-stat { padding: clamp(16px, 2.2vw, 24px) 14px; text-align: center; background: var(--lmx-surface); }
.lmx-stat-num {
  display: block;
  font-size: clamp(24px, 3.1vw, 34px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(112deg, var(--lmx-brand), var(--lmx-amber-glow));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.lmx-stat-label { display: block; margin-top: 4px; font-size: 13px; color: var(--lmx-ink-3); }
@media (max-width: 620px) { .lmx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Số lớn giữa trang (dự án đã làm) */
.lmx-bigstat {
  position: relative;
  padding: clamp(26px, 4vw, 46px) 16px;
  text-align: center;
  border-radius: var(--lmx-r);
  background:
    radial-gradient(50% 120% at 50% 0%, rgba(240, 168, 48, .14), transparent 70%),
    var(--lmx-surface);
  border: 1px solid var(--lmx-line-2);
  box-shadow: var(--lmx-sh);
}
.lmx-bigstat-rest,
.lmx-bigstat-mid { font-size: clamp(16px, 2vw, 21px); color: var(--lmx-ink-2); }
.lmx-bigstat-num {
  display: inline-block;
  margin: 6px 0;
  font-size: clamp(46px, 8vw, 86px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  background: linear-gradient(112deg, var(--lmx-amber-glow), var(--lmx-violet-glow));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ── 16 · ĐẦU MỤC, THẺ CÓ BIỂU TƯỢNG, NHÃN NHỎ ───────────────────────────── */
.lmx-head { max-width: 660px; margin-bottom: clamp(18px, 2.4vw, 28px); }
.lmx-head.lmx-center { margin-inline: auto; }
.lmx-head > .lmx-p:last-child,
.lmx-head > .lmx-lead:last-child { margin-bottom: 0; }

.lmx-feature {
  padding: clamp(18px, 2vw, 24px);
  border-radius: var(--lmx-r-sm);
  background: var(--lmx-surface);
  border: 1px solid var(--lmx-line-2);
  box-shadow: var(--lmx-sh);
}
.lmx-feature > .lmx-h3 { margin-top: 2px; }
.lmx-feature > .lmx-p { margin: 0; font-size: 14.5px; }
.lmx-ico {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  border-radius: 12px;
  color: var(--lmx-brand);
  background: var(--lmx-tint);
  box-shadow: inset 0 0 0 1px rgba(122, 47, 212, .16);
}
.lmx-ico svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lmx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.lmx-chips-center { justify-content: center; }
.lmx-chip {
  padding: 3px 9px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--lmx-ink-2);
  background: var(--lmx-surface-2);
  border: 1px solid var(--lmx-line);
}

/* danh sách điểm mạnh: tick tròn + tiêu đề đậm + một dòng giải thích */
.lmx-flist { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.lmx-flist > li { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; align-items: start; align-content: start; }
.lmx-flist > li > * { grid-column: 2; }
.lmx-flist > li::before { grid-row: 1 / span 2; }
.lmx-flist > li::before {
  content: "\2713";
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #7A2FD4, #B36AF0);
  box-shadow: 0 0 14px -2px rgba(122, 47, 212, .6);
}
.lmx-flist b { display: block; font-weight: 650; color: var(--lmx-ink); }
.lmx-flist span { display: block; margin-top: 2px; font-size: 14.5px; color: var(--lmx-ink-2); }

/* ── 17 · QUY TRÌNH NHIỀU BƯỚC (ol) — số bước tự đánh ─────────────────────── */
.lmx-steps {
  counter-reset: lmx-buoc;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--lmx-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lmx-steps > li { counter-increment: lmx-buoc; position: relative; padding-top: 54px; }
.lmx-steps > li::before {
  content: counter(lmx-buoc, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
  color: var(--lmx-brand);
  background: var(--lmx-solid);
  border: 1px solid rgba(122, 47, 212, .32);
  box-shadow: 0 0 0 5px var(--lmx-tint);
}
.lmx-steps > li::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 54px;
  right: -10px;
  height: 1px;
  background: linear-gradient(90deg, rgba(122, 47, 212, .38), transparent);
}
.lmx-steps > li:last-child::after { display: none; }
.lmx-steps .lmx-h3 { margin-bottom: .35em; }
.lmx-steps .lmx-p { margin: 0; font-size: 14.5px; }
@media (max-width: 900px) {
  .lmx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lmx-steps > li::after { display: none; }
}
@media (max-width: 620px) { .lmx-steps { grid-template-columns: 1fr; } }

/* ── 18 · TAB (data-lmx-tabs / data-lmx-tab / data-lmx-panel) ─────────────── */
/* Ô nào chưa đánh dấu is-active thì ẩn. Trang khách tự đánh dấu theo nút đang
   chọn; khung xem thử (không chạy mã) thì hiện đúng ô người soạn đã đánh dấu. */
.lm-landing [data-lmx-panel]:not(.is-active) { display: none !important; }
.lm-landing [data-lmx-tabs].is-ready [data-lmx-panel].is-active { animation: lmx-bat .42s var(--lmx-ease-pop) both; }
.lmx-tabbar {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 100%;
  margin-bottom: 18px;
  padding: 4px;
  border-radius: 999px;
  background: var(--lmx-surface-2);
  border: 1px solid var(--lmx-line);
}
.lmx-tabbar-center { display: flex; width: fit-content; margin-inline: auto; }
.lmx-tab {
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--lmx-ink-2);
  cursor: pointer;
  transition: color .2s, background .25s, box-shadow .25s;
}
.lmx-tab:hover { color: var(--lmx-ink); }
.lmx-tab.is-active {
  color: #fff;
  background: linear-gradient(135deg, #7A2FD4, #B36AF0);
  box-shadow: 0 6px 18px -8px rgba(122, 47, 212, .8);
}
.lmx-tabbar-sm { margin-bottom: 4px; }
.lmx-tabbar-sm .lmx-tab { padding: 5px 12px; font-size: 12.5px; }
@keyframes lmx-bat {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ── 19 · DẢI ẢNH TRƯỢT (data-lmx-carousel) — không mã vẫn vuốt ngang được ── */
.lmx-carousel { position: relative; }
.lmx-carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: var(--lmx-r);
  background: var(--lmx-surface-2);
  border: 1px solid var(--lmx-line-2);
  box-shadow: var(--lmx-sh);
}
.lmx-carousel-track::-webkit-scrollbar { display: none; }
.lmx-carousel [data-lmx-slide],
.lmx-slide {
  position: relative;
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: start;
}
.lmx-carousel [data-lmx-slide] > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: contain;
}
.lmx-slide-cap {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 24px);
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 650;
  color: #fff;
  background: rgba(17, 11, 30, .72);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.lmx-slide-cap::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lmx-teal-glow);
  box-shadow: 0 0 10px var(--lmx-teal-glow);
}
.lmx-carousel-btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  translate: 0 -50%;
  border-radius: 50%;
  border: 1px solid var(--lmx-line);
  background: var(--lmx-glass);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: var(--lmx-ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--lmx-sh);
  transition: scale .3s var(--lmx-ease-pop);
}
.lmx-carousel-btn:hover { scale: 1.1; }
.lmx-carousel-btn[data-lmx-prev] { left: 10px; }
.lmx-carousel-btn[data-lmx-next] { right: 10px; }
.lmx-carousel.is-ready .lmx-carousel-btn { display: grid; }
.lmx-carousel-dots { display: flex; justify-content: center; gap: 7px; margin-top: 12px; }
.lmx-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: var(--lmx-line);
  cursor: pointer;
  transition: width .4s var(--lmx-ease-pop), background .25s;
}
.lmx-dot.is-active { width: 24px; background: linear-gradient(90deg, #7A2FD4, var(--lmx-amber-glow)); }

/* ── 20 · ẢNH CÓ ĐIỂM CHÚ THÍCH (hotspot) — vị trí bằng lớp lmx-x-* / lmx-y-* ── */
.lmx-hs { position: relative; margin: 0; }
.lmx-hs > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--lmx-r);
  box-shadow: var(--lmx-sh);
}
.lmx-hs-label {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 650;
  color: #fff;
  background: rgba(17, 11, 30, .7);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.lmx-hs-label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lmx-amber-glow);
  box-shadow: 0 0 10px var(--lmx-amber-glow);
}
.lmx-hotspot {
  position: absolute;
  z-index: 2;
  width: 34px;
  height: 34px;
  padding: 0;
  translate: -50% -50%;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.lmx-hotspot::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .75);
  animation: lmx-nhip 2.2s ease-out infinite;
  pointer-events: none;
}
.lmx-hotspot-dot {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 800;
  color: #6B2E99;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .65);
  transition: scale .35s var(--lmx-ease-pop);
}
.lmx-hotspot:hover .lmx-hotspot-dot,
.lmx-hotspot.is-open .lmx-hotspot-dot { scale: 1.12; }
.lmx-hotspot-pop {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  display: block;
  width: max-content;
  max-width: min(240px, 60vw);
  padding: 10px 12px;
  translate: -50% 6px;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
  color: rgba(255, 255, 255, .86);
  background: rgba(17, 11, 30, .92);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 16px 36px -16px rgba(0, 0, 0, .75);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, translate .35s var(--lmx-ease-pop);
}
.lmx-hotspot-pop b { display: block; margin-bottom: 2px; font-size: 13px; color: #fff; }
.lmx-hotspot:hover .lmx-hotspot-pop,
.lmx-hotspot:focus .lmx-hotspot-pop,
.lmx-hotspot.is-open .lmx-hotspot-pop { opacity: 1; translate: -50% 0; }
@keyframes lmx-nhip {
  0%   { opacity: .9; scale: .8; }
  100% { opacity: 0;  scale: 1.6; }
}
/* vị trí điểm chú thích theo % bề ngang / bề cao ảnh, bước 5 */
.lmx-x-0{left:0%} .lmx-x-5{left:5%} .lmx-x-10{left:10%} .lmx-x-15{left:15%} .lmx-x-20{left:20%} .lmx-x-25{left:25%} .lmx-x-30{left:30%} .lmx-x-35{left:35%} .lmx-x-40{left:40%} .lmx-x-45{left:45%} .lmx-x-50{left:50%} .lmx-x-55{left:55%} .lmx-x-60{left:60%} .lmx-x-65{left:65%} .lmx-x-70{left:70%} .lmx-x-75{left:75%} .lmx-x-80{left:80%} .lmx-x-85{left:85%} .lmx-x-90{left:90%} .lmx-x-95{left:95%} .lmx-x-100{left:100%}
.lmx-y-0{top:0%} .lmx-y-5{top:5%} .lmx-y-10{top:10%} .lmx-y-15{top:15%} .lmx-y-20{top:20%} .lmx-y-25{top:25%} .lmx-y-30{top:30%} .lmx-y-35{top:35%} .lmx-y-40{top:40%} .lmx-y-45{top:45%} .lmx-y-50{top:50%} .lmx-y-55{top:55%} .lmx-y-60{top:60%} .lmx-y-65{top:65%} .lmx-y-70{top:70%} .lmx-y-75{top:75%} .lmx-y-80{top:80%} .lmx-y-85{top:85%} .lmx-y-90{top:90%} .lmx-y-95{top:95%} .lmx-y-100{top:100%}

/* ── 21 · PORTFOLIO — lưới ảnh dày, ô rộng / ô cao ─────────────────────────── */
.lmx-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: clamp(120px, 15vw, 186px);
  grid-auto-flow: dense;
  gap: 10px;
}
.lmx-gallery-item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 12px;
  background: var(--lmx-surface-2);
}
.lmx-gallery-item > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale .7s var(--lmx-ease-pop);
}
.lmx-gallery-item:hover > img { scale: 1.06; }
.lmx-gallery-wide { grid-column: span 2; }
.lmx-gallery-tall { grid-row: span 2; }
.lmx-gallery-tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 3px 9px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 650;
  color: #fff;
  background: rgba(17, 11, 30, .62);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  opacity: 0;
  translate: 0 6px;
  transition: opacity .25s, translate .35s var(--lmx-ease-pop);
}
.lmx-gallery-item:hover .lmx-gallery-tag,
.lmx-gallery-item:focus-visible .lmx-gallery-tag { opacity: 1; translate: 0 0; }
.lmx-gallery-cta {
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 16px;
  border: 0;
  border-radius: 12px;
  text-align: center;
  font-size: 15px;
  font-weight: 750;
  color: #fff;
  background: linear-gradient(135deg, #7A2FD4, #C47AE8 55%, var(--lmx-amber-glow));
  cursor: pointer;
  transition: filter .2s;
}
.lmx-gallery-cta:hover { filter: brightness(1.08); }
@media (max-width: 620px) {
  .lmx-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 22 · BẢNG GIÁ NHIỀU GÓI ────────────────────────────────────────────────── */
.lmx-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lmx-gap);
  align-items: stretch;
}
.lmx-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--lmx-r);
  background: var(--lmx-surface);
  border: 1px solid var(--lmx-line-2);
  box-shadow: var(--lmx-sh);
}
.lmx-plan-pop {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--lmx-solid), var(--lmx-solid)) padding-box,
    linear-gradient(140deg, #B36AF0, var(--lmx-amber-glow)) border-box;
  box-shadow: 0 0 0 5px rgba(179, 106, 240, .10), 0 26px 56px -26px rgba(122, 47, 212, .72);
}
.lmx-plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  translate: -50% 0;
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 750;
  white-space: nowrap;
  color: #1A1206;
  background: linear-gradient(135deg, var(--lmx-amber-glow), #F6C46A);
  box-shadow: 0 6px 18px -6px rgba(240, 168, 48, .85);
}
.lmx-plan-name { margin: 0; font-size: 18px; font-weight: 750; color: var(--lmx-ink); }
.lmx-plan-desc { margin: 0; font-size: 13.5px; color: var(--lmx-ink-3); }
.lmx-plan-price {
  font-size: clamp(28px, 3.2vw, 36px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--lmx-ink);
}
.lmx-plan-price small { font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--lmx-ink-3); }
.lmx-plan-per {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 12.5px;
  color: var(--lmx-teal);
  background: rgba(19, 122, 112, .10);
}
.lmx-plan > .lmx-check { flex: 1; font-size: 14.5px; }
.lmx-plan > .lmx-cta { justify-content: center; margin-top: 4px; }
.lmx-plan-note { margin: 0; font-size: 13px; color: var(--lmx-ink-3); }
.lmx-plan-note b { color: var(--lmx-ink-2); }
.lmx-plan > .lmx-tag { align-self: flex-start; margin: 0; }
.lmx-from { font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--lmx-ink-3); }
@media (max-width: 900px) {
  .lmx-plans { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
}

/* băng ngang có viền vàng (giá đối tác, ưu đãi số lượng) */
.lmx-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: clamp(20px, 2.6vw, 30px);
  border-radius: var(--lmx-r);
  border: 1px solid rgba(240, 168, 48, .6);
  background: linear-gradient(135deg, rgba(168, 85, 247, .09), rgba(240, 168, 48, .08));
}
.lmx-banner > div { flex: 1 1 320px; }
.lmx-banner .lmx-h3 { margin-bottom: .3em; }
.lmx-banner .lmx-p { margin: 0; }

/* ── 23 · BẢNG SO SÁNH — cột nổi bật đánh dấu lmx-col-hl ──────────────────── */
.lmx-compare { min-width: 640px; }
.lmx-compare tbody th {
  min-width: 150px;
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--lmx-ink);
}
.lmx-compare tbody tr + tr th { border-top: 1px solid var(--lmx-line-2); }
.lmx-compare thead th small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--lmx-ink-3);
}
.lmx-compare thead th { color: var(--lmx-ink); font-size: 13.5px; letter-spacing: 0; text-transform: none; }
.lmx-compare .lmx-col-hl { background: rgba(122, 47, 212, .06); }
.lmx-compare thead .lmx-col-hl { color: var(--lmx-brand); border-radius: 12px 12px 0 0; }
.lmx-dash { color: var(--lmx-ink-3); }

/* ── 24 · ĐÁNH GIÁ KHÁCH CÓ ẢNH ĐẠI DIỆN ───────────────────────────────────── */
.lmx-review {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: clamp(18px, 2vw, 24px);
  border-radius: var(--lmx-r);
  background: var(--lmx-surface);
  border: 1px solid var(--lmx-line-2);
  box-shadow: var(--lmx-sh);
}
.lmx-stars { font-size: 14px; letter-spacing: 2px; color: var(--lmx-amber-glow); }
.lmx-review > blockquote { flex: 1; margin: 0; font-size: 15px; line-height: 1.6; color: var(--lmx-ink-2); }
.lmx-review > figcaption { display: flex; align-items: center; gap: 12px; }
.lmx-review > figcaption b { display: block; font-size: 14px; color: var(--lmx-ink); }
.lmx-review > figcaption small { display: block; font-size: 12.5px; color: var(--lmx-ink-3); }
.lmx-avatar {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--lmx-solid), 0 0 0 3.5px rgba(179, 106, 240, .5);
}
.lmx-avatar-txt { display: grid; place-items: center; font-size: 13.5px; font-weight: 800; color: #fff; }
.lmx-av-1 { background: linear-gradient(135deg, #F0A830, #F6C46A); }
.lmx-av-2 { background: linear-gradient(135deg, #9A7BFF, #A855F7); }
.lmx-av-3 { background: linear-gradient(135deg, #46D8C8, #2BB8A8); }
.lmx-av-4 { background: linear-gradient(135deg, #F0A830, #9A7BFF); }

/* trích lời lớn ở giữa trang */
.lmx-pullquote { max-width: 760px; margin-inline: auto; text-align: center; }
.lmx-pullquote > p {
  margin: 0;
  font-family: var(--lmx-display);
  font-size: clamp(20px, 2.6vw, 27px);
  line-height: 1.42;
  color: var(--lmx-ink);
}
.lmx-pullquote > cite { display: block; margin-top: 14px; font-size: 13.5px; font-style: normal; color: var(--lmx-ink-3); }

/* ── 25 · HỎI ĐÁP (details / summary) ─────────────────────────────────────── */
.lmx-faq { display: grid; gap: 10px; }
.lmx-qa {
  overflow: hidden;
  border-radius: var(--lmx-r-sm);
  background: var(--lmx-surface);
  border: 1px solid var(--lmx-line-2);
  transition: border-color .25s, box-shadow .3s;
}
.lmx-qa[open] { border-color: rgba(122, 47, 212, .3); box-shadow: 0 16px 38px -26px rgba(122, 47, 212, .7); }
.lmx-qa > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  font-weight: 650;
  color: var(--lmx-ink);
  cursor: pointer;
  list-style: none;
}
.lmx-qa > summary::-webkit-details-marker { display: none; }
.lmx-qa > summary::after {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--lmx-brand);
  background:
    linear-gradient(currentColor, currentColor) center / 10px 1.7px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.7px 10px no-repeat,
    var(--lmx-tint);
  transition: rotate .4s var(--lmx-ease-pop);
}
.lmx-qa[open] > summary::after { rotate: 45deg; }
.lmx-qa-a { padding: 0 18px 16px; color: var(--lmx-ink-2); }
.lmx-qa-a > :last-child { margin-bottom: 0; }
.lmx-qa[open] > .lmx-qa-a { animation: lmx-bat .4s var(--lmx-ease-pop) both; }

/* ── 26 · KÊU GỌI HÀNH ĐỘNG CUỐI TRANG ─────────────────────────────────────── */
.lmx-band-glow {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(240, 168, 48, .22), transparent 62%),
    radial-gradient(60% 80% at 0% 100%, rgba(168, 85, 247, .30), transparent 62%),
    linear-gradient(160deg, var(--lmx-night-2), var(--lmx-night));
}
.lmx-cta-box {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: clamp(18px, 2.4vw, 26px);
  border-radius: var(--lmx-r);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}
.lmx-cta-box > .lmx-muted { margin: 0; }

/* ── 27 · TOUR 360 NHÚNG — bấm mới tải (data-lmx-embed) ────────────────────── */
.lmx-embed {
  position: relative;
  isolation: isolate;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--lmx-r);
  background: radial-gradient(circle at 50% 40%, #2A1650, #0B0814 70%);
  box-shadow: 0 28px 60px -32px rgba(40, 18, 82, .85);
  cursor: pointer;
}
.lmx-embed > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  color: transparent;         /* ảnh bìa tour lỗi thì không lộ chữ alt — còn nền gradient */
  opacity: .74;
  transition: scale 1.2s ease, opacity .3s;
}
.lmx-embed:hover > img { scale: 1.04; opacity: .88; }
.lmx-embed::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 40%, rgba(11, 8, 20, .75));
}
.lmx-embed-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  translate: -50% -60%;
  border-radius: 50%;
  font-size: 22px;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, .06), 0 0 44px rgba(240, 168, 48, .5);
  transition: scale .4s var(--lmx-ease-pop);
}
.lmx-embed:hover .lmx-embed-play { scale: 1.1; }
.lmx-embed-title,
.lmx-embed-hint {
  position: absolute;
  left: 16px;
  right: 16px;
  z-index: 2;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .75);
}
.lmx-embed-title { top: calc(50% + 34px); font-size: clamp(16px, 2vw, 20px); font-weight: 750; }
.lmx-embed-hint  { top: calc(50% + 64px); font-size: 12.5px; color: rgba(255, 255, 255, .78); }
.lmx-embed > iframe { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; }
.lmx-embed.is-loaded { cursor: auto; }
.lmx-embed.is-loaded > :not(iframe) { display: none; }
.lmx-embed.is-loaded::after { display: none; }
.lmx-embed-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--lmx-ink-3);
}
.lmx-embed-bar a { color: var(--lmx-brand); font-weight: 650; text-decoration: none; }
.lmx-embed-bar a:hover { text-decoration: underline; }

@media (max-width: 620px) {
  .lmx-embed-title { top: calc(50% + 26px); }
  .lmx-embed-hint { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MẺ 199 (16/10/2026) — CÙNG GIỌNG CHỮ TRANG CHỦ + KHỐI MỚI CỦA MÁY DỰNG
   ──────────────────────────────────────────────────────────────────────────
   Anh Huy: «Kiểm tra lại nội dung và font chữ của những landing page đó có
   phù hợp với trang tổng quan hay không?». Trang chủ (TrangChu.tsx): đầu mục
   là viên thuốc chữ hoa tím, tiêu đề Playfair đậm có nửa sau tô tím → vàng,
   vạch vàng 60×3 dưới tiêu đề. Khối hero / băng tối giữ kiểu cũ.
   Lớp mới: lmx-grad-soft, lmx-gia, lmx-pricing, lmx-pricing-side,
   lmx-steps-3, lmx-steps-5, lmx-related, lmx-related-card.
   ══════════════════════════════════════════════════════════════════════════ */

/* tiêu đề mục: Playfair như trang chủ (font-serif text-3xl → 42px, leading 1.06) */
.lmx-h2 {
  font-family: var(--lmx-display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.06;
  letter-spacing: -.02em;
  text-wrap: balance;
}
/* nửa sau tiêu đề trên nền sáng: tím #853ABE → vàng #D4952F (text-gradient-purple-gold của trang chủ) */
.lmx-grad-soft {
  background: linear-gradient(135deg, #853ABE 0%, #D4952F 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
:root[data-theme="dark"] .lmx-grad-soft { background-image: linear-gradient(135deg, #C79BF2 0%, #F0C266 100%); }
.lmx-hero .lmx-grad-soft,
.lmx-band-dark .lmx-grad-soft { background-image: linear-gradient(112deg, var(--lmx-amber-glow) 8%, var(--lmx-violet-glow) 92%); }

/* nhãn đầu mục trên nền sáng: viên thuốc chữ hoa tím, viền xám nhạt, nền trắng */
.lmx-eyebrow {
  margin: 0 0 14px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--lmx-line);
  background: var(--lmx-solid);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lmx-brand);
}
/* trong hero / khối tối: giữ kiểu chữ hoa trơn cũ (màu vàng / tím nhạt đã đặt ở trên) */
.lmx-hero .lmx-eyebrow,
.lmx-band-dark .lmx-eyebrow {
  margin: 0 0 .8em;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 11.5px;
  letter-spacing: .10em;
}

/* vạch vàng 60×3 dưới tiêu đề của cụm đầu mục (căn giữa khi đầu mục căn giữa) */
.lmx-head > .lmx-h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  margin-top: 16px;
  border-radius: 2px;
  background: linear-gradient(90deg, #F4BB4E, #D4952F);
}
.lmx-head.lmx-center > .lmx-h2::after { margin-inline: auto; }
.lmx-head > .lmx-h2 { margin-bottom: 16px; }

/* số liệu: Playfair như số lớn của trang chủ */
.lmx-stat-num { font-family: var(--lmx-display); font-weight: 700; letter-spacing: -.01em; }
.lmx-bigstat-num { font-family: var(--lmx-display); }

/* chỗ đặt giá «từ» hiện hành (data-lmx-gia) — không ngắt dòng giữa ký hiệu tiền và số */
.lmx-gia { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* hàng nhãn dưới nút ở hero */
.lmx-hero .lmx-actions + .lmx-chips { margin-top: 20px; }

/* ảnh mẫu dạng lưới: thẻ figure không mang lề mặc định, chú thích luôn hiện */
.lm-landing figure.lmx-gallery-item { margin: 0; }
.lmx-gallery-item > .lmx-slide-cap { left: 10px; bottom: 10px; max-width: calc(100% - 20px); }

/* dải ảnh mẫu dưới đầu mục căn giữa: không tràn hết bề ngang màn lớn */
.lmx-head.lmx-center + .lmx-carousel { max-width: 960px; margin-inline: auto; }

/* hỏi đáp dưới đầu mục căn giữa: cột đọc vừa mắt */
.lmx-head.lmx-center + .lmx-faq { max-width: 880px; margin-inline: auto; }

/* quy trình 3 hoặc 5 bước: đủ cột, không để ô trống */
.lmx-steps.lmx-steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lmx-steps.lmx-steps-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .lmx-steps.lmx-steps-3,
  .lmx-steps.lmx-steps-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .lmx-steps.lmx-steps-3,
  .lmx-steps.lmx-steps-5 { grid-template-columns: 1fr; }
}

/* khối giá: thẻ giá «từ» (lmx-plan lmx-plan-pop) + cột yếu tố ảnh hưởng giá */
.lmx-pricing {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: var(--lmx-gap);
  align-items: start;
}
.lmx-pricing > .lmx-plan { gap: 10px; }
.lmx-pricing .lmx-plan-price { font-family: var(--lmx-display); font-weight: 700; }
.lmx-pricing .lmx-plan-price small { font-family: var(--font-inter, system-ui), system-ui, sans-serif; }
.lmx-pricing > .lmx-plan > .lmx-plan-note { margin-top: 6px; }
.lmx-pricing > .lmx-plan > .lmx-cta { align-self: stretch; justify-content: center; margin-top: 8px; }
.lmx-pricing-side { padding: clamp(4px, 1.4vw, 18px) clamp(0px, 1vw, 8px); }
.lmx-pricing-side > .lmx-list { margin-bottom: 18px; }
.lmx-pricing-side > .lmx-list > li::marker { color: var(--lmx-amber); }
.lmx-pricing + .lmx-banner { margin-top: var(--lmx-gap); }
@media (max-width: 900px) {
  .lmx-pricing { grid-template-columns: 1fr; }
}

/* dịch vụ liên quan: thẻ kính mờ như lg-card, rê chuột nhấc nhẹ có độ nảy */
.lmx-related {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lmx-gap);
}
.lmx-related-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(18px, 2vw, 24px);
  padding-right: 58px;
  border-radius: var(--lmx-r);
  color: inherit;
  text-decoration: none;
  background: linear-gradient(158deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .62));
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 1px 2px rgba(28, 27, 32, .05),
    0 16px 36px -20px rgba(60, 30, 110, .38);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
          backdrop-filter: blur(14px) saturate(1.3);
  transition: transform .45s var(--lmx-ease-pop), box-shadow .3s, border-color .3s;
}
.lmx-related-card::after {
  content: "\2192";
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  color: var(--lmx-brand);
  background: var(--lmx-tint);
  box-shadow: inset 0 0 0 1px rgba(122, 47, 212, .16);
  transition: transform .4s var(--lmx-ease-pop), box-shadow .3s;
}
.lmx-related-card:hover {
  transform: translateY(-4px);
  border-color: rgba(133, 58, 190, .30);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 0 0 4px rgba(179, 106, 240, .08),
    0 24px 46px -22px rgba(122, 47, 212, .55);
}
.lmx-related-card:hover::after { transform: translateX(3px); box-shadow: 0 0 14px -2px rgba(240, 168, 48, .7); }
.lmx-related-card > .lmx-h3 { margin: 0; }
.lmx-related-card > .lmx-p { margin: 0; font-size: 14px; }
:root[data-theme="dark"] .lmx-related-card {
  background: linear-gradient(158deg, rgba(70, 68, 86, .55), rgba(30, 30, 38, .62));
  border-color: rgba(255, 255, 255, .10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 40px -22px rgba(0, 0, 0, .8);
}
@media (max-width: 820px) {
  .lmx-related { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MẺ 199 (16/10/2026) — HERO HIỆU ỨNG: mỗi dịch vụ một kiểu, không hộp nền tối
   ──────────────────────────────────────────────────────────────────────────
   Anh Huy (trang duyệt): «phần hero không nhất thiết phải có nền. tôi muốn mỗi
   dịch vụ có 1 kiểu hero khác biệt với phần còn lại».
     <section class="lmx-hero lmx-hero-fx"> … <div class="lmx-fx" data-lmx-fx="tên"><img …></div>
   · lmx-hero-fx  : bỏ hộp tối, chữ theo nền sáng của trang (nền động lesmee.com lộ ra);
                    hiệu ứng nằm cột phải. Ảnh <img> trong hộp là ảnh dự phòng.
   · lmx-hero-nen : hiệu ứng phủ CẢ khối làm nền (CAD, LiDAR…), chữ trắng nằm trên.
   Hiệu ứng nạp theo data-lmx-fx (TrangBanHtml → hanhViTrangBan → hieu-ung/).
   ══════════════════════════════════════════════════════════════════════════ */
.lmx-hero.lmx-hero-fx {
  --lmx-ink:      #3A3843;
  --lmx-ink-2:    #4E4B57;
  --lmx-ink-3:    #585661;
  --lmx-line:     rgba(28, 27, 32, .10);
  --lmx-line-2:   rgba(28, 27, 32, .06);
  --lmx-surface:  rgba(255, 255, 255, .82);
  --lmx-surface-2:rgba(255, 255, 255, .58);
  --lmx-tint:     rgba(122, 47, 212, .07);
  --lmx-brand:    #7A2FD4;
  --lmx-ok:       #12855C;
  --lmx-amber:    #B9770E;
  --lmx-teal:     #137A70;
  --lmx-solid:    #FFFFFF;
  --lmx-glass:    rgba(255, 255, 255, .72);
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  gap: clamp(22px, 3.4vw, 56px);
  padding: clamp(6px, 1.6vw, 22px) 0 clamp(6px, 1.2vw, 14px);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
:root[data-theme="dark"] .lmx-hero.lmx-hero-fx {
  --lmx-ink:      #E4E3EA;
  --lmx-ink-2:    #AFADBA;
  --lmx-ink-3:    #8F8C99;
  --lmx-line:     rgba(255, 255, 255, .13);
  --lmx-line-2:   rgba(255, 255, 255, .08);
  --lmx-surface:  rgba(34, 34, 42, .78);
  --lmx-surface-2:rgba(255, 255, 255, .04);
  --lmx-tint:     rgba(199, 155, 242, .13);
  --lmx-brand:    #C79BF2;
  --lmx-amber:    #F0C266;
  --lmx-teal:     #5FD3C4;
  --lmx-solid:    #1C1C21;
  --lmx-glass:    rgba(28, 28, 34, .74);
}
.lmx-hero.lmx-hero-fx::before { display: none; }
.lmx-hero-fx .lmx-lead { color: var(--lmx-ink-2); max-width: 36em; }
.lmx-hero-fx .lmx-eyebrow { color: var(--lmx-amber); }
/* chữ chuyển màu đủ đậm trên nền sáng (vàng sáng của hero tối không đọc được trên nền trắng) */
.lmx-hero-fx .lmx-grad { background-image: linear-gradient(112deg, #7A2FD4 6%, #B36AF0 46%, #C9821A 100%); }
:root[data-theme="dark"] .lmx-hero-fx .lmx-grad { background-image: linear-gradient(112deg, #C79BF2 8%, #F0C266 92%); }
.lmx-hero-fx .lmx-display { font-size: clamp(30px, 3.9vw, 50px); }

/* hộp hiệu ứng: hiệu ứng tự vẽ khung / bóng của mình; ảnh đầu tiên là ảnh dự phòng */
.lmx-fx {
  position: relative;
  z-index: 1;
  min-width: 0;
  aspect-ratio: 5 / 4;
  border-radius: 26px;
  isolation: isolate;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.lmx-fx > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  box-shadow: var(--lmx-sh);
  transition: opacity .7s ease;
}
.lmx-fx > img ~ img { display: none; }
.lmx-fx.is-fx-san > img { opacity: 0; pointer-events: none; }
.lmx-fx canvas { border-radius: inherit; }
/* nhãn chữ nhỏ do hiệu ứng tự thêm (vd «Kéo để xoay») */
.lmx-fx-hint {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 12px;
  translate: -50% 0;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .02em;
  color: var(--lmx-ink-2);
  background: var(--lmx-glass);
  border: 1px solid var(--lmx-line);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  pointer-events: none;
  white-space: nowrap;
  transition: opacity .5s ease;
}

/* hero nền: hiệu ứng phủ cả khối, lớp phủ tối phía chữ cho dễ đọc */
.lmx-hero.lmx-hero-fx.lmx-hero-nen {
  --lmx-ink:      #FFFFFF;
  --lmx-ink-2:    rgba(255, 255, 255, .86);
  --lmx-ink-3:    rgba(255, 255, 255, .66);
  --lmx-line:     rgba(255, 255, 255, .18);
  --lmx-line-2:   rgba(255, 255, 255, .10);
  --lmx-surface:  rgba(255, 255, 255, .06);
  --lmx-surface-2:rgba(255, 255, 255, .05);
  --lmx-amber:    #F6C46A;
  --lmx-solid:    #1A1129;
  --lmx-glass:    rgba(17, 11, 30, .66);
  grid-template-columns: minmax(0, 1fr) minmax(0, .7fr);
  min-height: clamp(470px, 40vw, 620px);
  padding: clamp(28px, 4.6vw, 64px);
  border-radius: calc(var(--lmx-r) + 8px);
  background: var(--lmx-night);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 34px 80px -40px rgba(40, 18, 82, .72);
  overflow: hidden;
}
.lmx-hero-nen .lmx-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  aspect-ratio: auto;
  border-radius: inherit;
}
.lmx-hero-nen .lmx-fx > img { box-shadow: none; opacity: .5; }
.lmx-hero-nen .lmx-fx.is-fx-san > img { opacity: 0; }
.lmx-hero-nen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(17, 11, 30, .86) 0%, rgba(17, 11, 30, .58) 40%, rgba(17, 11, 30, 0) 74%);
}
.lmx-hero-nen .lmx-hero-copy { z-index: 2; max-width: 620px; }
.lmx-hero-nen .lmx-eyebrow { color: var(--lmx-amber); }
.lmx-hero-nen .lmx-lead { color: rgba(255, 255, 255, .80); }
.lmx-hero-nen .lmx-grad { background-image: linear-gradient(112deg, var(--lmx-amber-glow) 8%, var(--lmx-violet-glow) 92%); }

@media (max-width: 820px) {
  .lmx-hero.lmx-hero-fx { grid-template-columns: 1fr; }
  .lmx-hero-fx .lmx-fx { aspect-ratio: 4 / 3.4; }
  /* hero nền: hộp hiệu ứng vẫn phủ kín cả khối trên điện thoại (quy tắc tỉ lệ 4:3,4 ngay trên chỉ cho hero cột phải) */
  .lmx-hero.lmx-hero-nen .lmx-fx { aspect-ratio: auto; }
  .lmx-hero.lmx-hero-fx.lmx-hero-nen { grid-template-columns: 1fr; min-height: 580px; align-items: end; }
  .lmx-hero-nen::after { background: linear-gradient(180deg, rgba(17, 11, 30, .25) 0%, rgba(17, 11, 30, .70) 46%, rgba(17, 11, 30, .92) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .lmx-fx > img { transition: none; }
}