:root {
  /* NETALINK Stitch design tokens (dark, Geist, cyan + purple) */
  --bg: #0c1324;
  --surface: #101a2e;
  --surface-2: #191f31;
  --panel: #101A2E;
  --line: rgba(133, 147, 151, .18);
  --line-strong: rgba(138, 235, 255, .30);
  --primary: #8aebff;
  --primary-container: #22d3ee;
  --accent: #cebdff;
  --green: #61f6b9;
  --tertiary: #61f6b9;
  --yellow: #FBBF24;
  --red: #ffb4ab;
  --text: #E5E7EB;
  --muted: #94A3B8;
  --ink: #00363e;
  --gradient: linear-gradient(90deg, #8aebff 0%, #cebdff 100%);
  --shadow: 0 24px 70px rgba(0,0,0,.42);
  --radius: 16px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  min-height: 100vh;
  max-width: 100vw;
  overflow-x: hidden;
  isolation: isolate;
  background: radial-gradient(circle at 12% 8%, rgba(138,235,255,.14), transparent 28%), radial-gradient(circle at 88% 12%, rgba(206,189,255,.12), transparent 32%), var(--bg);
  color: var(--text);
  font-family: "Inter", "Be Vietnam Pro", "Geist", Arial, sans-serif;
  line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
strong { font-weight: 600; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
#app { position: relative; z-index: 1; }
.container { width: min(1280px, calc(100dvw - clamp(32px, 6vw, 96px))); margin: 0 auto; }
.muted { color: var(--muted); }
.screen { min-height: 100vh; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; border: 1px solid transparent; border-radius: 999px; padding: 10px 16px; background: rgba(255,255,255,.05); color: var(--text); font-weight: 600; transition: color .34s ease, background-color .34s ease, border-color .34s ease, box-shadow .34s ease, transform .34s cubic-bezier(.22,1,.36,1); white-space: nowrap; }
.btn:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.btn-primary { background: var(--gradient); color: var(--ink); box-shadow: 0 12px 34px rgba(34,211,238,.22); }
.btn-ghost { border-color: var(--line); background: rgba(255,255,255,.03); }
.btn-danger { color: #fecdd3; border-color: rgba(251,113,133,.35); background: rgba(251,113,133,.12); }
.btn-small { min-height: 34px; padding: 7px 11px; font-size: 12px; }
.site-header { position: sticky; top: 0; z-index: 50; background: linear-gradient(180deg, rgba(7,13,31,.96) 0%, rgba(7,13,31,.9) 72%, rgba(7,13,31,0) 100%); backdrop-filter: blur(18px); padding: 14px 0; }
.nav { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(7,13,31,.82); backdrop-filter: blur(24px); padding: 9px 14px 9px 22px; box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.brand { flex: 0 0 auto; }
.brand img { width: 172px; max-height: 38px; object-fit: contain; display: block; }
.nav-menu { --nav-pill-x: 6px; --nav-pill-w: 0px; --nav-pill-opacity: 0; position: relative; flex: 0 1 auto; min-width: 0; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: 999px; padding: 6px; background: transparent; overflow-x: auto; scrollbar-width: none; isolation: isolate; }
.nav-menu::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; z-index: 0; width: var(--nav-pill-w); border-radius: 999px; background: linear-gradient(90deg, #8aebff, #cebdff); box-shadow: 0 10px 26px rgba(34,211,238,.2); opacity: var(--nav-pill-opacity); transform: translateX(var(--nav-pill-x)); transition: transform .46s cubic-bezier(.22,1,.36,1), width .46s cubic-bezier(.22,1,.36,1), opacity .22s ease, box-shadow .36s ease; }
.nav-menu::-webkit-scrollbar { display: none; }
.nav-link { position: relative; z-index: 1; border-radius: 999px; padding: 9px 13px; color: var(--muted); background: rgba(255,255,255,0); font-size: 14px; font-weight: 600; white-space: nowrap; transition: color .36s ease, background-color .36s ease, text-shadow .36s ease, transform .36s cubic-bezier(.22,1,.36,1); }
.nav-link.active, .nav-link:hover { color: var(--ink); background: rgba(34,211,238,.86); }
.nav-menu.nav-pill-ready .nav-link.active, .nav-menu.nav-pill-ready .nav-link:hover { background: transparent; }
.nav-link:hover { transform: translateY(-1px); }
.nav-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.nav-actions .btn-ghost { width: 42px; height: 42px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.05); color: var(--text); }
.nav-actions .btn-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(138,235,255,.4); color: var(--primary); }
.nav-actions .cart-link { width: auto; min-width: 70px; height: 42px; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; padding: 0 14px; border-radius: 999px; gap: 8px; }
.nav-actions .btn-primary { height: 42px; border-radius: 999px; padding: 0 20px; }
.cart-count { flex: 0 0 auto; display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; color: var(--ink); background: var(--primary); font-size: 11px; font-weight: 800; line-height: 1; }
.mobile-menu-toggle { display: none; }
.mobile-menu-panel { display: none; }
.mobile-menu-list { display: grid; gap: 8px; }
.mobile-menu-link { display: flex; align-items: center; min-height: 46px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 0 14px; color: var(--muted); background: rgba(255,255,255,.035); font-weight: 600; transition: color .28s ease, background-color .28s ease, border-color .28s ease, transform .28s cubic-bezier(.22,1,.36,1); }
.mobile-menu-link.active, .mobile-menu-link:hover { color: var(--ink); border-color: transparent; background: var(--gradient); transform: translateY(-1px); }
.mobile-menu-actions { display: grid; gap: 10px; margin-top: 12px; }
.mobile-menu-actions .btn { width: 100%; min-height: 46px; }
.hero { min-height: 660px; display: flex; align-items: center; overflow: hidden; box-shadow: inset 0 -80px 55px -40px var(--bg); background: radial-gradient(circle at 8% 18%, rgba(34,211,238,.18), transparent 28%), linear-gradient(135deg, #020617 0%, #07111f 58%, #111827 100%); }
.hero-inner { display: grid; grid-template-columns: minmax(0, .96fr) minmax(520px, .86fr); align-items: center; gap: clamp(42px, 5vw, 92px); padding: 78px 0; }
.hero-content { max-width: 860px; padding: 0; }
.hero-visual { position: relative; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 28px; background: rgba(11,18,32,.86); box-shadow: var(--shadow); transition: transform .5s cubic-bezier(.22,1,.36,1), border-color .5s ease, box-shadow .5s ease; }
.hero-visual::before { content: ""; position: absolute; inset: -42%; background: conic-gradient(from 180deg, transparent, rgba(34,211,238,.2), transparent, rgba(167,139,250,.18), transparent); animation: spinBeam 15s linear infinite; }
.hero-visual::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(135deg, rgba(96,165,250,.14), transparent 34%, rgba(34,211,238,.08) 72%, transparent); opacity: .46; transition: opacity .5s ease; }
.hero-visual:hover { transform: translateY(-5px); border-color: rgba(96,165,250,.42); box-shadow: 0 32px 80px rgba(37,99,235,.16); }
.hero-visual:hover::after { opacity: .72; }
.hero-visual > * { position: relative; z-index: 1; }
.hero-visual img { width: 100%; height: clamp(330px, 22vw, 410px); object-fit: cover; filter: saturate(1.08) contrast(1.02); }
.hero-panel-body { padding: 24px; }
.readiness-mini { display: grid; gap: 10px; margin-top: 16px; }
.readiness-mini div { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: rgba(255,255,255,.04); }
.readiness-mini span:first-child { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--primary); background: rgba(34,211,238,.12); font-weight: 700; }
.readiness-mini small { color: var(--muted); font-weight: 600; }
@keyframes spinBeam { to { transform: rotate(360deg); } }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; border: 1px solid var(--line-strong); border-radius: 999px; padding: 8px 12px; background: rgba(34,211,238,.08); color: var(--primary); font-size: 13px; font-weight: 700; text-transform: uppercase; }
h1 { font-size: clamp(34px, 3.7vw, 54px); line-height: 1.13; font-weight: 600; letter-spacing: 0; }
.hero-content h1 { max-width: 800px; margin: 0 0 18px; font-size: clamp(34px, 3.25vw, 48px); line-height: 1.2; font-weight: 600; text-wrap: balance; }
.gradient-word { background: linear-gradient(90deg, #8aebff 0%, #cebdff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
.text-gradient { background: linear-gradient(90deg, #8aebff, #cebdff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.glass-panel { background: rgba(16,26,46,.7); backdrop-filter: blur(18px); border: 1px solid rgba(133,147,151,.18); border-radius: var(--radius); }
.glow-cyan { box-shadow: 0 0 34px rgba(34,211,238,.22); }
h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.12; font-weight: 600; letter-spacing: 0; }
h3 { line-height: 1.25; font-weight: 600; }
.lead { margin-top: 18px; color: var(--muted); font-size: 17px; max-width: 680px; }
.hero-content .lead { margin-top: 20px; max-width: 720px; font-size: clamp(15px, 1.08vw, 17px); line-height: 1.7; }
.subline { margin-top: 18px; color: var(--primary); font-size: 17px; font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.section { padding: 78px 0 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 28px; }
.kicker { margin-bottom: 10px; color: var(--primary); font-size: 13px; font-weight: 700; text-transform: uppercase; }
.logo-marquee-section { position: relative; width: 100%; max-width: 100%; margin-top: 78px; padding: 78px 0 54px; overflow: hidden; overflow: clip; contain: layout paint; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(2,6,23,.48), #020617 42%, #030712); }
main > .logo-marquee-section:first-child { margin-top: 0; }
.logo-proof { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 34px; color: #aeb8c9; font-size: 20px; font-weight: 600; text-align: center; }
.logo-proof span { display: inline-flex; align-items: center; min-height: 36px; border: 1px solid rgba(148,163,184,.5); border-radius: 999px; padding: 4px 14px; color: #f8fafc; background: linear-gradient(135deg, rgba(34,211,238,.22), rgba(167,139,250,.16)); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.logo-proof strong { color: var(--primary); }
.logo-marquee { position: relative; width: 100%; max-width: 100%; overflow: hidden; overflow: clip; contain: layout paint; padding: 8px 0 12px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.logo-track { display: flex; align-items: center; width: max-content; gap: clamp(12px, 1.8vw, 34px); animation: logoSlide 108s linear infinite; will-change: transform; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
.logo-item { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 146px; height: 82px; border: 0; border-radius: 0; background: transparent; box-shadow: none; transition: transform .36s cubic-bezier(.22,1,.36,1), opacity .36s ease; }
.logo-item img { max-width: 142px; max-height: 58px; object-fit: contain; opacity: .68; filter: grayscale(1) invert(1) brightness(1.22) contrast(.9); transition: transform .36s cubic-bezier(.22,1,.36,1), opacity .36s ease, filter .36s ease; }
.logo-item:hover { transform: translateY(-2px); }
.logo-item:hover img { opacity: .95; filter: grayscale(1) invert(1) brightness(1.38) contrast(.92); transform: scale(1.035); }
.logo-text { color: #dbeafe; font-size: 20px; font-weight: 700; white-space: nowrap; opacity: .78; }
@keyframes logoSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.grid-2, .grid-3, .grid-4, .product-grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.product-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.card, .product-card, .panel { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(11,18,32,.88); box-shadow: 0 16px 44px rgba(0,0,0,.16); transition: transform .46s cubic-bezier(.22,1,.36,1), border-color .46s ease, box-shadow .46s ease, background-color .46s ease; }
.screen main .card, .screen main .product-card, .screen main .panel { position: relative; overflow: hidden; }
.screen main .card::before, .screen main .product-card::before, .screen main .panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(96,165,250,.12), transparent 38%, rgba(34,211,238,.06) 72%, transparent);
  opacity: 0;
  transition: opacity .46s ease;
}
.screen main .card:hover::before, .screen main .product-card:hover::before, .screen main .panel:hover::before { opacity: 1; }
.screen main .card > *, .screen main .product-card > *, .screen main .panel > * { position: relative; z-index: 2; }
.card:hover, .product-card:hover { transform: translateY(-4px); border-color: rgba(96,165,250,.38); box-shadow: 0 24px 58px rgba(37,99,235,.12); }
.card { padding: 24px; }
.icon-box { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 16px; border-radius: 15px; background: rgba(34,211,238,.11); color: var(--primary); font-weight: 700; }
.card p { margin-top: 9px; color: var(--muted); }
.product-card { overflow: hidden; background: rgba(16,26,46,.6); backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 18px; transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease; }
.product-card:hover { border-color: rgba(138,235,255,.4); transform: translateY(-4px); box-shadow: 0 0 36px rgba(34,211,238,.14); }
.product-seg { display: inline-block; margin-bottom: 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.price-block { display: flex; flex-direction: column; gap: 2px; }
.price-from { font-size: 11px; color: var(--muted); }
.price-line { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.price-block .price { font-size: 20px; }
.price-unit { font-size: 12px; font-weight: 600; color: var(--muted); }
.product-media { height: 214px; overflow: hidden; border-radius: 16px 16px 0 0; clip-path: inset(0 round 16px 16px 0 0); background: #111827; }
.product-media img { width: 100%; height: 100%; object-fit: cover; transition: .45s ease; filter: saturate(1.04) contrast(1.02); }
.product-card:hover img { transform: scale(1.05); }
.news-grid { align-items: start; }
.news-card { overflow: hidden; padding: 0; border: none; background: transparent; box-shadow: none; }
.news-card:hover { border: none; box-shadow: none; }
.screen main .news-card::before { display: none; }
.news-media { margin-left: 0; margin-right: 0; }
.news-card h3, .news-card p, .news-card .actions { padding-left: 4px; padding-right: 4px; }
.news-media { position: relative; height: auto; aspect-ratio: 4 / 3; margin: 0 -24px 20px; overflow: hidden; border-radius: 18px 18px 0 0; clip-path: inset(0 round 18px 18px 0 0); background: #07111f; }
.news-media::before { content: ""; position: absolute; inset: -18px; background-image: var(--news-img); background-size: cover; background-position: center; filter: blur(18px) brightness(.5) saturate(1.12); transform: scale(1.08); opacity: .72; }
.news-media::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, transparent 48%, rgba(15,23,42,.26)), linear-gradient(135deg, rgba(96,165,250,.18), transparent 44%); opacity: 0; transition: opacity .45s ease; }
.news-media img { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; object-position: center; filter: saturate(1.06) contrast(1.02); transition: .45s ease; }
.news-card:hover .news-media::after { opacity: 1; }
.news-card:hover .news-media img { transform: scale(1.035); }
.product-body { padding: 18px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 11px; }
.tag { border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 8px; color: var(--primary); background: rgba(34,211,238,.08); font-size: 11px; font-weight: 600; }
.product-body h3 { min-height: 48px; font-size: 17px; }
.product-meta { min-height: 44px; margin-top: 8px; color: var(--muted); font-size: 13px; }
.price-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 14px 0; }
.price { color: var(--text); font-weight: 700; }
.stock { color: var(--green); font-size: 12px; font-weight: 600; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; background: rgba(255,255,255,.035); }
.filter-row { display: flex; flex-wrap: nowrap; gap: 6px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: thin; padding-bottom: 3px; scroll-snap-type: x proximity; }
.filter-row::-webkit-scrollbar { height: 5px; }
.filter-row::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 999px; }
.product-toolbar { align-items: center; }
.license-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 18px; margin: -8px auto 26px; max-width: 940px; }
.license-trust span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text); padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.035); }
.license-trust span svg { color: var(--primary); }
@media (max-width: 640px) { .license-trust span { font-size: 12.5px; padding: 7px 12px; } }
/* ── Hero trang Sản phẩm (bản quyền chính hãng) ── */
.license-hero { position: relative; overflow: hidden; padding: clamp(34px,5vw,64px) 0 clamp(28px,4vw,46px); box-shadow: inset 0 -82px 58px -42px var(--bg); background:
  radial-gradient(circle at 18% 8%, rgba(34,211,238,.34), transparent 40%),
  radial-gradient(circle at 84% 14%, rgba(168,85,247,.34), transparent 44%),
  radial-gradient(circle at 70% 86%, rgba(232,121,249,.22), transparent 46%),
  radial-gradient(circle at 10% 82%, rgba(56,120,255,.26), transparent 44%),
  radial-gradient(circle at 50% 46%, rgba(34,211,238,.10), transparent 58%),
  linear-gradient(135deg, #020617 0%, #07111f 55%, #0e1430 100%); }
.license-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background:
  radial-gradient(circle at 24% 18%, rgba(34,211,238,.30), transparent 30%),
  radial-gradient(circle at 78% 74%, rgba(168,85,247,.26), transparent 32%);
  filter: blur(30px); opacity: .95; animation: lhbloom 12s ease-in-out infinite; }
@keyframes lhbloom { 0%,100% { transform: translate(0,0) scale(1); opacity: .85; } 50% { transform: translate(2.5%,1.5%) scale(1.08); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .license-hero::before { animation: none; } }
.license-hero-inner { position: relative; z-index: 2; text-align: center; }
.lh-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--primary); padding: 8px 18px; border-radius: 999px; border: 1px solid rgba(138,235,255,.35); background: rgba(138,235,255,.06); }
.lh-badge svg { color: var(--primary); }
.lh-title { font-size: clamp(30px,5.2vw,58px); font-weight: 800; line-height: 1.16; letter-spacing: -.02em; margin: 18px auto 0; max-width: 18ch; }
.lh-title .g1 { background: linear-gradient(90deg,#38bdf8,#22d3ee); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lh-title .g2 { background: linear-gradient(90deg,#8aebff,#9b8bff,#d3a6ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lh-sub { max-width: 720px; margin: 16px auto 0; color: var(--muted); font-size: clamp(14.5px,1.6vw,16.5px); line-height: 1.7; }
.lh-features { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 26px auto 0; max-width: 920px; }
.lh-card { display: flex; align-items: center; gap: 12px; padding: 13px 20px; border-radius: 16px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); min-width: 188px; }
.lh-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto; }
.lh-ico.blue { background: rgba(56,189,248,.14); color: #38bdf8; }
.lh-ico.green { background: rgba(34,197,94,.15); color: #4ade80; }
.lh-ico.purple { background: rgba(168,85,247,.16); color: #c084fc; }
.lh-ico.cyan { background: rgba(34,211,238,.14); color: #22d3ee; }
.lh-card-t { display: flex; flex-direction: column; text-align: left; line-height: 1.25; }
.lh-card-t strong { font-size: 14.5px; color: var(--text); }
.lh-card-t span { font-size: 13px; color: var(--muted); }
.lh-cta { display: inline-flex; margin: 28px auto 0; font-size: 16px; font-weight: 800; letter-spacing: .4px; padding: 15px 34px; border-radius: 999px; }
.lh-trust { margin: 14px auto 0; display: flex; justify-content: center; align-items: center; gap: 8px; color: var(--muted); font-size: 13.5px; }
.lh-trust svg { color: var(--primary); }
.lh-floats { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.lh-float { position: absolute; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 20px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 22px 45px -22px rgba(0,3,12,.75); animation: lh-bob 6s ease-in-out infinite; }
.lh-float img { width: 44px; height: 44px; object-fit: contain; }
.lh-float svg { color: #a9c7ff; }
.lh-float.f-ms { left: 11%; top: 18%; }
.lh-float.f-gg { left: 8%; top: 58%; animation-delay: 1.2s; }
.lh-float.f-cloud { right: 12%; top: 9%; animation-delay: .6s; }
.lh-float.f-canva { right: 8%; top: 40%; animation-delay: 1.8s; }
.lh-float.f-shield { right: 11%; top: 68%; animation-delay: .9s; }
.lh-float.f-shield svg { color: #4c9aff; }
@keyframes lh-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (max-width: 1180px) { .lh-floats { display: none; } }
@media (max-width: 560px) { .lh-card { min-width: 0; flex: 1 1 44%; } .lh-cta { width: 100%; justify-content: center; } }
/* ── Hero trang Template (thư viện mẫu) ── */
.tmpl-page { background: #060814; }
.tmpl-hero { position: relative; overflow: hidden; text-align: center; padding: clamp(48px,7vw,94px) 20px clamp(40px,5vw,66px); }
.tmpl-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background:
  radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.5px) 0 0 / 24px 24px,
  radial-gradient(circle at 16% 20%, rgba(56,120,255,.30), transparent 42%),
  radial-gradient(circle at 88% 82%, rgba(150,90,255,.30), transparent 46%),
  radial-gradient(circle at 50% 46%, rgba(18,36,84,.35), transparent 72%),
  #060814; }
.tmpl-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; z-index: 0; pointer-events: none; background: linear-gradient(180deg, transparent, #060814); }
.tmpl-hero-in { position: relative; z-index: 1; }
.tmpl-hero-emblem { display: flex; align-items: center; justify-content: center; gap: clamp(14px,4vw,28px); margin-bottom: 26px; }
.tmpl-hero-emblem .thl { width: clamp(50px,15vw,210px); border-top: 2px dotted rgba(140,170,255,.45); }
.tmpl-hero-orb { position: relative; flex: 0 0 auto; width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; color: #e6ecff; background: radial-gradient(circle at 50% 38%, rgba(34,56,120,.9), rgba(8,12,28,.95)); }
.tmpl-hero-orb::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; padding: 2px; background: linear-gradient(135deg,#38bdf8,#9b8bff,#e879f9); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.tmpl-hero-badge { display: inline-flex; align-items: center; gap: 9px; padding: 7px 18px; border-radius: 999px; border: 1px solid rgba(120,160,255,.4); background: rgba(30,50,110,.22); color: #9db4ff; font-size: 12px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; }
.tmpl-hero-badge i { width: 7px; height: 7px; border-radius: 50%; background: #38bdf8; box-shadow: 0 0 9px #38bdf8; }
.tmpl-hero-title { font-size: clamp(30px,5.4vw,58px); font-weight: 800; letter-spacing: -.02em; margin: 18px 0 0; color: #fff; }
.tmpl-hero-title .grad { background: linear-gradient(90deg,#5b8cff,#9b8bff,#e879f9); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.tmpl-hero-underline { display: block; width: 132px; height: 3px; margin: 16px auto 0; border-radius: 3px; background: linear-gradient(90deg, transparent, #6aa0ff, #a78bff, transparent); }
.tmpl-hero-sub { max-width: 640px; margin: 18px auto 0; color: #aeb9d6; font-size: clamp(14.5px,1.7vw,17px); line-height: 1.75; }
@media (max-width: 520px) { .tmpl-hero-emblem .thl { display: none; } }
/* Hiệu ứng động nền hero Template */
.tmpl-hero-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.tfx { position: absolute; border-radius: 50%; filter: blur(46px); opacity: .55; will-change: transform; }
.tfx.orbA { width: 340px; height: 340px; left: -60px; top: -50px; background: radial-gradient(circle, rgba(56,120,255,.6), transparent 70%); animation: tdriftA 15s ease-in-out infinite; }
.tfx.orbB { width: 440px; height: 440px; right: -90px; bottom: -120px; background: radial-gradient(circle, rgba(150,90,255,.55), transparent 70%); animation: tdriftB 19s ease-in-out infinite; }
.tfx.sweep { top: -50%; left: -35%; width: 55%; height: 200%; border-radius: 0; filter: blur(18px); opacity: 0; transform: rotate(18deg); background: linear-gradient(90deg, transparent, rgba(150,190,255,.14), transparent); animation: tsweep 10s ease-in-out infinite; }
.tstar { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #d5e3ff; box-shadow: 0 0 8px #9db4ff; opacity: .6; animation: ttwinkle 3.2s ease-in-out infinite; }
.tstar.s1 { left: 13%; top: 24%; } .tstar.s2 { left: 30%; top: 62%; animation-delay: .6s; }
.tstar.s3 { right: 20%; top: 28%; animation-delay: 1.1s; } .tstar.s4 { right: 12%; top: 66%; animation-delay: 1.6s; }
.tstar.s5 { left: 52%; top: 16%; animation-delay: .3s; } .tstar.s6 { left: 68%; top: 70%; animation-delay: 2s; }
.tmpl-hero-orb { animation: torbpulse 4s ease-in-out infinite; }
@keyframes tdriftA { 0%,100% { transform: translate(0,0); } 50% { transform: translate(46px,34px); } }
@keyframes tdriftB { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-54px,-32px); } }
@keyframes tsweep { 0% { transform: translate(-40%,0) rotate(18deg); opacity: 0; } 25% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(260%,0) rotate(18deg); opacity: 0; } }
@keyframes ttwinkle { 0%,100% { opacity: .2; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.25); } }
@keyframes torbpulse { 0%,100% { box-shadow: 0 0 0 rgba(122,138,255,0); } 50% { box-shadow: 0 0 34px rgba(122,138,255,.42); } }
@media (prefers-reduced-motion: reduce) { .tfx, .tstar, .tmpl-hero-orb { animation: none; } }
/* Vì sao chọn NETALINK — so sánh đại lý thường vs AI Enablement */
.why-netalink .section-head { margin-bottom: 26px; }
.why-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 980px; margin: 0 auto; align-items: stretch; }
.why-col { border-radius: 20px; padding: 26px 26px 28px; border: 1px solid var(--line); background: var(--surface); }
.why-col h3 { display: flex; align-items: center; gap: 9px; font-size: 16px; margin-bottom: 16px; }
.why-col ul { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.why-col li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.5; }
.why-col li svg { flex: 0 0 auto; margin-top: 2px; }
.why-col.plain { color: var(--muted); background: rgba(255,255,255,.02); }
.why-col.plain h3 svg, .why-col.plain li svg { color: #8b98b4; }
.why-col.net { position: relative; border-color: rgba(138,235,255,.34); background: linear-gradient(160deg, rgba(138,235,255,.10), rgba(155,139,255,.06)); box-shadow: 0 24px 60px -34px rgba(138,235,255,.5); }
.why-col.net li svg { color: var(--primary); }
.why-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; letter-spacing: .3px; color: #06121f; background: linear-gradient(90deg, var(--primary), var(--accent)); padding: 7px 14px; border-radius: 999px; margin-bottom: 16px; }
.why-col.net .btn { margin-top: 20px; width: 100%; justify-content: center; }
@media (max-width: 760px) { .why-compare { grid-template-columns: 1fr; } }
.product-search { display: grid; grid-template-columns: minmax(190px, 300px) auto; align-items: center; gap: 10px; }
.product-search .field-control { min-height: 46px; border-radius: 999px; padding: 0 16px; background: rgba(255,255,255,.055); }
.product-search .field-control::-webkit-search-cancel-button { cursor: pointer; }
.product-search .btn { min-height: 46px; padding-inline: 18px; }
.chip { flex: 0 0 auto; white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; background: rgba(255,255,255,.03); color: var(--muted); font-size: 12.5px; font-weight: 700; transition: background .2s, color .2s, border-color .2s; scroll-snap-align: start; }
.chip:hover { background: rgba(255,255,255,.07); color: var(--text); border-color: var(--line-strong); }
.chip.active { background: linear-gradient(90deg, var(--primary), var(--accent)); color: #00363e; border-color: transparent; }
.field-control { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; outline: none; color: var(--text); background: rgba(255,255,255,.05); color-scheme: dark; }
.field-control:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(34,211,238,.1); }
select.field-control option, select.field-control optgroup { background: #0c1324; color: #e6edf7; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.field { display: grid; gap: 7px; }
.field.full { grid-column: 1 / -1; }
label { color: var(--muted); font-size: 13px; font-weight: 600; }
textarea.field-control { min-height: 96px; resize: vertical; }
.admin-login-screen { display: grid; place-items: center; min-height: 100dvh; padding: 24px; }
.admin-login-card { width: min(520px, 100%); }
.admin-login-head { text-align: left; }
.admin-login-head img { width: 210px; max-width: 82%; margin-bottom: 18px; }
.detail-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 24px; align-items: start; padding-top: 40px; }
.detail-image { border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: var(--surface); }
.detail-image img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.article-shell { padding-top: 54px; }
.article-card { max-width: 980px; margin: 0 auto; padding: clamp(24px, 4vw, 46px); }
.article-card h2 { max-width: 900px; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.14; }
.article-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; color: var(--muted); font-size: 13px; font-weight: 600; }
.article-meta span { border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; background: rgba(255,255,255,.035); }
.article-hero-image { margin-top: 26px; border-radius: 26px; clip-path: inset(0 round 26px); background: rgba(255,255,255,.96); }
.article-hero-image img { display: block; width: 100%; height: auto; max-height: 560px; aspect-ratio: auto; object-fit: contain; }
.article-body { display: grid; gap: 15px; margin-top: 30px; color: #cbd5e1; font-size: 17px; line-height: 1.78; }
.article-body p { margin: 0; color: #cbd5e1; }
.article-body ul, .article-body ol { margin: 0 0 0 22px; color: #cbd5e1; }
.article-body li { margin: 7px 0; }
.article-body a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.article-body blockquote { margin: 8px 0; border-left: 4px solid var(--primary); border-radius: 0 10px 10px 0; padding: 12px 16px; background: rgba(34,211,238,.09); color: #e2e8f0; }
.article-body img { width: min(100%, 900px); height: auto; border-radius: 14px; border: 1px solid var(--line); object-fit: contain; background: rgba(255,255,255,.04); }
.article-heading { scroll-margin-top: 118px; margin-top: 16px; color: #f8fafc; font-size: 24px; line-height: 1.34; }
.article-bullet { position: relative; padding-left: 20px; }
.article-bullet::before { content: ""; position: absolute; left: 2px; top: .82em; width: 6px; height: 6px; border-radius: 999px; background: var(--primary); box-shadow: 0 0 16px rgba(34,211,238,.42); }
.article-card > .actions { margin-top: 32px; border-top: 1px solid var(--line); padding-top: 22px; }
.about-hero { display: grid; grid-template-columns: minmax(0,.9fr) minmax(420px,1fr); gap: clamp(28px, 5vw, 78px); align-items: center; padding-top: 56px; }
.about-copy h2 { max-width: 860px; }
.about-media-card { position: relative; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 28px; background: linear-gradient(135deg, rgba(34,211,238,.08), rgba(167,139,250,.08)); box-shadow: var(--shadow); }
.about-media-card::before { content: ""; position: absolute; inset: -18px; background-image: var(--about-img); background-size: cover; background-position: center; filter: blur(22px) brightness(.58) saturate(1.12); opacity: .62; transform: scale(1.08); }
.about-media-card img { position: relative; z-index: 1; width: 100%; max-height: 520px; object-fit: contain; padding: 10px; border-radius: 24px; }
.about-info-grid { align-items: stretch; }
.about-info-card { min-height: 260px; }
.about-info-card p { line-height: 1.72; }
.value-list { display: grid; gap: 10px; margin-top: 12px; }
.value-list p { position: relative; margin: 0; padding-left: 18px; color: var(--muted); }
.value-list p::before { content: ""; position: absolute; left: 0; top: .75em; width: 6px; height: 6px; border-radius: 999px; background: var(--primary); box-shadow: 0 0 12px rgba(34,211,238,.36); }
.about-video-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(320px,.75fr); gap: 20px; align-items: stretch; }
.about-video-frame { position: relative; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 28px; aspect-ratio: 16 / 9; background: #020617; box-shadow: var(--shadow); }
.about-video-frame iframe, .about-video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.about-video-note { padding: 28px; display: grid; align-content: center; }
.about-video-note p { margin-top: 12px; color: var(--muted); line-height: 1.72; }
.about-cover { position: relative; min-height: 560px; display: grid; place-items: center; overflow: hidden; background: var(--bg); }
.about-cover::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 5%, rgba(0,219,233,.16), transparent 34%), radial-gradient(circle at 82% 34%, rgba(112,0,255,.18), transparent 28%), linear-gradient(180deg, rgba(5,9,20,.36), rgba(5,9,20,.72) 50%, var(--bg)); }
.about-cover::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(180deg, transparent, var(--bg)); pointer-events: none; }
.about-cover-bg { position: absolute; inset: 0; background: linear-gradient(90deg, #050b1c 4%, rgba(5,11,28,.86) 34%, rgba(5,11,28,.32) 60%, rgba(5,11,28,0) 100%), url("../../public/media/about-hero-bg.svg") right center / cover no-repeat; -webkit-mask: linear-gradient(180deg, #000 55%, transparent 100%); mask: linear-gradient(180deg, #000 55%, transparent 100%); }
.about-cover-inner { position: relative; z-index: 1; display: grid; justify-items: start; text-align: left; padding: 96px 0 84px; }
.about-crumbs { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; color: rgba(197,198,205,.7); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.about-crumbs a { color: rgba(197,198,205,.62); transition: color .25s ease; }
.about-crumbs a:hover, .about-crumbs strong { color: var(--primary); }
.about-title { max-width: 680px; font-size: clamp(40px, 6.4vw, 72px); line-height: 1.04; font-weight: 800; color: #eef4ff; }
.about-accent { position: relative; display: block; width: 128px; height: 2px; margin: 26px 0 12px; background: linear-gradient(90deg, rgba(138,235,255,.2), var(--primary) 35%, var(--accent)); border-radius: 2px; }
.about-accent::before, .about-accent::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 50%; transform: translateY(-50%); }
.about-accent::before { left: -3px; background: var(--primary); box-shadow: 0 0 10px rgba(138,235,255,.85); }
.about-accent::after { right: -3px; background: var(--accent); box-shadow: 0 0 10px rgba(206,189,255,.7); }
.about-subtitle { max-width: 560px; margin-top: 4px; color: #c9d3e6; font-size: clamp(16px, 1.7vw, 20px); line-height: 1.7; }
.about-split { display: grid; grid-template-columns: minmax(0,.92fr) minmax(420px,1fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.about-story { display: grid; gap: 42px; }
.about-principle { position: relative; }
.about-principle-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.about-principle-head h2 { font-size: clamp(24px, 2.4vw, 34px); color: #d6e3ff; text-transform: uppercase; }
.about-principle-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; border: 1px solid rgba(185,199,228,.12); background: rgba(10,25,47,.82); box-shadow: 0 0 34px rgba(112,0,255,.12); }
.about-principle-icon.cyan { color: #00dbe9; }
.about-principle-icon.purple { color: #cebdff; }
.about-principle p { margin: 0; border-left: 2px solid rgba(0,219,233,.28); padding-left: 24px; color: #c5c6cd; font-size: 18px; line-height: 1.78; transition: border-color .3s ease; }
.about-principle:hover p { border-left-color: #00dbe9; }
.about-visual { position: relative; min-height: 420px; }
.about-orb { position: absolute; z-index: 0; width: 250px; height: 250px; border-radius: 50%; filter: blur(86px); opacity: .24; animation: pulseGlow 5s ease-in-out infinite; }
.about-orb.cyan { top: -40px; right: -46px; background: #00dbe9; }
.about-orb.purple { left: -50px; bottom: -40px; background: #7000ff; animation-delay: -1.4s; }
.about-hero-frame { position: relative; z-index: 1; overflow: hidden; margin: 0; border: 1px solid rgba(185,199,228,.14); border-radius: 28px; padding: 9px; background: rgba(17,34,64,.42); backdrop-filter: blur(16px); box-shadow: 0 28px 80px rgba(0,0,0,.38), 0 0 34px rgba(112,0,255,.12); }
.about-hero-frame::before { content: ""; position: absolute; inset: -24px; background-image: var(--about-img); background-size: cover; background-position: center; filter: blur(26px) brightness(.56) saturate(1.12); opacity: .62; transform: scale(1.08); }
.about-hero-frame img { position: relative; z-index: 1; width: 100%; max-height: 520px; object-fit: cover; border-radius: 22px; }
.about-value-band { position: relative; width: 100%; margin-top: 76px; padding: 82px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(16,26,46,.3), rgba(2,6,23,.54)); }
.about-value-heading { display: grid; justify-items: center; text-align: center; margin-bottom: 44px; }
.about-value-heading h2 { max-width: 760px; font-size: clamp(28px, 4vw, 44px); color: #d6e3ff; }
.about-value-heading span { display: block; width: 96px; height: 4px; margin-top: 18px; border-radius: 999px; background: linear-gradient(90deg, #00dbe9, #7000ff); }
.about-value-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.about-value-card { position: relative; overflow: hidden; min-height: 300px; border: 1px solid rgba(185,199,228,.12); border-top: 2px solid transparent; border-radius: 18px; padding: 30px; background: rgba(17,34,64,.38); backdrop-filter: blur(14px); box-shadow: 0 18px 52px rgba(0,0,0,.22); transition: transform .34s cubic-bezier(.22,1,.36,1), border-color .34s ease, box-shadow .34s ease; }
.about-value-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 18% 0, rgba(0,219,233,.16), transparent 34%); opacity: 0; transition: opacity .34s ease; }
.about-value-card:hover { transform: translateY(-8px); border-color: rgba(0,219,233,.38); border-top-color: #00dbe9; box-shadow: 0 26px 68px rgba(0,219,233,.12); }
.about-value-card:hover::before { opacity: 1; }
.about-value-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 22px; border-radius: 50%; border: 1px solid rgba(185,199,228,.16); background: #112240; }
.about-value-icon.cyan { color: #00f0ff; }
.about-value-icon.purple { color: #cebdff; }
.about-value-icon.teal { color: #61f6b9; }
.about-value-card h3, .about-value-card p { position: relative; z-index: 1; }
.about-value-card h3 { color: #d6e3ff; font-size: 23px; margin-bottom: 14px; }
.about-value-card p { color: #c5c6cd; line-height: 1.74; }
.about-profile-cta { padding-top: 72px; }
.about-profile-inner { position: relative; overflow: hidden; display: grid; justify-items: center; text-align: center; max-width: 900px; margin: 0 auto; border: 1px solid rgba(185,199,228,.14); border-radius: 28px; padding: clamp(34px, 5vw, 58px); background: rgba(17,34,64,.38); backdrop-filter: blur(18px); box-shadow: var(--shadow); }
.about-profile-inner h2 { max-width: 640px; color: #d6e3ff; }
.about-profile-inner p { max-width: 600px; margin-top: 14px; color: #c5c6cd; font-size: 17px; line-height: 1.68; }
.about-profile-inner .actions { justify-content: center; }
.about-cta-orb { position: absolute; width: 170px; height: 170px; border-radius: 50%; filter: blur(56px); opacity: .22; pointer-events: none; }
.about-cta-orb-1 { top: -56px; left: -48px; background: #7000ff; }
.about-cta-orb-2 { right: -52px; bottom: -62px; background: #00dbe9; }
@keyframes pulseGlow { 0%, 100% { opacity: .18; transform: scale(.98); } 50% { opacity: .32; transform: scale(1.05); } }
.solution-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; align-items: stretch; }
.solution-card { overflow: hidden; padding: 0; }
.solution-media { position: relative; height: 190px; overflow: hidden; border-radius: 18px 18px 0 0; background: #07111f; }
.solution-media::before { content: ""; position: absolute; inset: -18px; background-image: var(--solution-img); background-size: cover; background-position: center; filter: blur(18px) brightness(.55); opacity: .7; transform: scale(1.08); }
.solution-media img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.solution-card-body { padding: 22px; }
.solution-card-body h3 { min-height: 58px; }
.solution-detail-card { margin-bottom: 18px; padding: 0; scroll-margin-top: 96px; }
.solution-detail-card summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; cursor: pointer; list-style: none; padding: 22px 24px; }
.solution-detail-card summary::-webkit-details-marker { display: none; }
.solution-detail-card summary span { color: var(--primary); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.solution-detail-card summary strong { font-size: clamp(20px, 2.2vw, 30px); color: var(--text); }
.solution-detail-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.42fr); gap: 24px; border-top: 1px solid var(--line); padding: 24px; }
.solution-heading-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.solution-heading-list span { border: 1px solid var(--line); border-radius: 999px; padding: 7px 10px; color: #cbd5e1; background: rgba(255,255,255,.035); font-size: 12px; }
.solution-point-list { display: grid; gap: 10px; color: var(--muted); }
.solution-point-list p { position: relative; margin: 0; padding-left: 18px; line-height: 1.72; }
.solution-point-list p::before { content: ""; position: absolute; left: 0; top: .82em; width: 6px; height: 6px; border-radius: 999px; background: var(--primary); }
.solution-gallery { display: grid; gap: 12px; align-content: start; }
.solution-gallery img { width: 100%; max-height: 240px; object-fit: contain; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.04); }
.solution-video-list { display: grid; gap: 14px; margin-top: 20px; }
.source-solution-top { position: relative; padding-bottom: 12px; }
.source-title-center { margin-bottom: 34px; text-align: center; }
.source-title-center h2 { background: linear-gradient(90deg, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-size: clamp(25px, 2.7vw, 38px); font-weight: 800; text-transform: uppercase; }
.source-title-center span { display: block; width: 96px; height: 4px; margin: 16px auto 0; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--accent)); }
.source-solution-head { align-items: center; }
.source-package-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; align-items: stretch; }
.source-package-card { overflow: hidden; border: 1px solid rgba(60,73,76,.3); border-radius: 18px; padding: 22px 24px 30px; background: rgba(16,26,46,.7); backdrop-filter: blur(18px); color: var(--text); box-shadow: 0 10px 30px rgba(0,0,0,.25); text-align: center; transition: transform .34s cubic-bezier(.22,1,.36,1), border-color .34s ease, box-shadow .34s ease; }
.source-package-card:hover, .source-package-card.active { transform: translateY(-5px); border-color: rgba(138,235,255,.5); box-shadow: 0 0 40px rgba(34,211,238,.18); }
.source-package-media { position: relative; height: 200px; overflow: hidden; margin-bottom: 22px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.05); }
.source-package-media::before { display: none; }
.source-package-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.source-package-card:hover .source-package-media img { transform: scale(1.05); }
.source-package-body { display: grid; gap: 14px; justify-items: center; }
.source-package-body h3 { min-height: 0; color: var(--text); font-size: 20px; font-weight: 800; line-height: 1.3; text-transform: uppercase; }
.source-package-body p:not(.kicker) { max-width: 360px; margin: 0 auto; color: var(--muted); font-size: 15px; line-height: 1.7; }
.source-package-body .actions { margin-top: 6px; }
.source-package-body .btn-primary { min-width: 170px; min-height: 46px; text-transform: uppercase; }
.source-package-media .media-badge { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: rgba(7,13,31,.78); border: 1px solid rgba(138,235,255,.3); color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.source-package-body .source-cat { margin-bottom: -4px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.source-anchor-section { padding-top: 28px; }
.source-tab-row { position: sticky; top: 86px; z-index: 35; display: flex; gap: 10px; overflow-x: auto; border: 1px solid var(--line); border-radius: 999px; padding: 8px; background: rgba(2,6,23,.86); backdrop-filter: blur(18px); scrollbar-width: none; }
.source-tab-row::-webkit-scrollbar { display: none; }
.source-docs { display: grid; gap: 32px; padding-top: 36px; }
.source-solution-doc { overflow: hidden; padding: 0; scroll-margin-top: 142px; border-color: rgba(148,163,184,.22); }
.source-doc-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); padding: 28px 30px; background: radial-gradient(circle at 0 0, rgba(34,211,238,.12), transparent 34%), rgba(15,23,42,.68); }
.source-doc-head h2 { max-width: 920px; font-size: clamp(28px, 3vw, 42px); font-weight: 600; }
.source-doc-cover { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: #07111f; }
.source-doc-cover::before { content: ""; position: absolute; inset: -28px; background-image: var(--solution-img); background-position: center; background-size: cover; filter: blur(24px) brightness(.5); opacity: .62; transform: scale(1.08); }
.source-doc-cover img { position: relative; z-index: 1; width: 100%; max-height: 420px; object-fit: contain; padding: 16px; }
.source-content { display: grid; gap: 16px; padding: 32px 34px 38px; color: #cbd5e1; font-size: 16px; line-height: 1.78; }
.source-heading { margin-top: 12px; color: var(--text); letter-spacing: 0; }
.source-heading:first-child { margin-top: 0; }
.source-heading-2 { font-size: clamp(26px, 3vw, 40px); line-height: 1.18; font-weight: 600; }
.source-heading-3 { font-size: clamp(21px, 2.2vw, 30px); line-height: 1.24; font-weight: 600; }
.source-heading-4 { font-size: 18px; line-height: 1.36; font-weight: 600; color: #dbeafe; }
.source-heading[id] { scroll-margin-top: 118px; }
.source-paragraph { margin: 0; color: #b9c6d8; }
.source-list { display: grid; gap: 10px; margin: 4px 0 8px; padding: 0; list-style: none; color: #cbd5e1; }
.source-list li { position: relative; padding-left: 22px; line-height: 1.72; }
.source-list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 7px; height: 7px; border-radius: 999px; background: var(--primary); box-shadow: 0 0 14px rgba(34,211,238,.36); }
.source-action-text { justify-self: start; border: 1px solid var(--line-strong); border-radius: 999px; padding: 8px 14px; color: var(--ink); background: var(--gradient); font-weight: 600; line-height: 1.2; }
.source-figure { overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.035); }
.source-figure img { width: 100%; max-height: 460px; object-fit: contain; padding: 12px; }
.source-video { max-width: 980px; }
.source-detail-hero { padding-top: 46px; }
.source-detail-hero > .btn { margin-bottom: 24px; }
.source-detail-hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(360px,.7fr); gap: 34px; align-items: center; }
.source-detail-cover { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 24px; background: rgba(255,255,255,.04); box-shadow: var(--shadow); }
.source-detail-cover img { width: 100%; max-height: 380px; object-fit: contain; padding: 16px; background: rgba(255,255,255,.02); }
.source-detail-section { padding-top: 42px; }
.content-with-toc { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 22px; align-items: start; }
.content-with-toc.no-toc { grid-template-columns: minmax(0,1fr); }
.content-with-toc.no-toc .article-card { width: 100%; }
.toc-box { position: sticky; top: 112px; border: 1px solid var(--line); border-radius: 18px; padding: 16px; background: rgba(11,18,32,.86); box-shadow: 0 16px 42px rgba(0,0,0,.16); }
.toc-title { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--text); font-weight: 600; }
.toc-box nav { display: grid; gap: 8px; }
.toc-box a { display: block; border-left: 2px solid rgba(138,235,255,.2); padding: 6px 0 6px 10px; color: var(--muted); font-size: 13px; line-height: 1.35; transition: color .25s ease, border-color .25s ease, transform .25s ease; }
.toc-box a:hover { color: var(--primary); border-left-color: var(--primary); transform: translateX(2px); }
.toc-box a.active,
.toc-box a[aria-current="true"] { color: var(--text); border-left-color: var(--primary); background: linear-gradient(90deg, rgba(34,211,238,.12), transparent); transform: translateX(2px); }
.toc-box a:focus-visible,
.admin-toc a:focus-visible { outline: 2px solid rgba(138,235,255,.65); outline-offset: 3px; border-radius: 8px; }
.source-video-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 18px; max-width: 980px; }
.source-all-media-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.source-all-media-grid figure { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.035); }
.source-all-media-grid img { width: 100%; height: 240px; object-fit: contain; padding: 10px; }
.source-all-media-grid figcaption { border-top: 1px solid var(--line); padding: 9px 12px; color: var(--muted); font-size: 12px; }
.professional-page { overflow: hidden; }
.professional-hero { position: relative; min-height: 700px; display: flex; align-items: center; padding: 76px 0 68px; box-shadow: inset 0 -72px 48px -34px var(--bg); background: radial-gradient(circle at 16% 24%, rgba(34,211,238,.18), transparent 28%), radial-gradient(circle at 86% 20%, rgba(206,189,255,.15), transparent 32%), linear-gradient(135deg, #07111f 0%, #0c1324 56%, #101025 100%); }
.professional-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(138,235,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(138,235,255,.035) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(180deg, rgba(0,0,0,.72), transparent 82%); opacity: .7; }
.professional-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,.92fr) minmax(440px,.72fr); align-items: center; gap: clamp(34px, 5vw, 78px); }
.professional-hero-copy h1 { max-width: 840px; font-size: clamp(38px, 4.4vw, 72px); line-height: 1.04; font-weight: 600; }
.professional-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.professional-video-card { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 28px; background: rgba(11,18,32,.82); box-shadow: var(--shadow); }
.professional-cover { padding: 18px 18px 0; }
.professional-cover img { width: 100%; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; background: rgba(255,255,255,.03); object-fit: contain; }
.professional-video-frame { position: relative; margin: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; aspect-ratio: 16 / 9; background: #020617; }
.professional-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.professional-strip { border-block: 1px solid rgba(138,235,255,.18); background: linear-gradient(90deg, rgba(34,211,238,.2), rgba(37,99,235,.28), rgba(206,189,255,.18)); }
.professional-strip-inner { display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: center; min-height: 86px; }
.professional-strip span { display: block; color: var(--primary); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.professional-strip strong { color: #f8fafc; font-size: 20px; font-weight: 600; }
.professional-strip p { color: #dbeafe; }
.professional-benefits { display: grid; grid-template-columns: minmax(280px,.48fr) minmax(0,1fr); gap: 34px; align-items: center; }
.professional-wheel { display: grid; place-items: center; border: 1px solid var(--line); border-radius: 26px; padding: 24px; background: rgba(255,255,255,.035); box-shadow: 0 20px 60px rgba(0,0,0,.22); }
.professional-wheel img { width: min(100%, 430px); border-radius: 50%; }
.professional-benefit-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 24px; }
.professional-benefit { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 12px; align-items: start; border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: rgba(11,18,32,.78); transition: transform .32s cubic-bezier(.22,1,.36,1), border-color .32s ease, background-color .32s ease; }
.professional-benefit:hover { transform: translateY(-3px); border-color: var(--line-strong); background: rgba(16,26,46,.92); }
.professional-benefit span, .professional-question-list span, .professional-process-card > span, .professional-outcome-grid span { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--primary); background: rgba(34,211,238,.12); font-weight: 700; }
.professional-benefit p { margin: 0; color: #cbd5e1; line-height: 1.56; }
.professional-quote { border: 1px solid rgba(138,235,255,.24); border-radius: 22px; padding: 28px; background: linear-gradient(135deg, rgba(34,211,238,.12), rgba(206,189,255,.09)); color: #e0f2fe; text-align: center; font-size: clamp(22px, 3vw, 36px); font-style: italic; font-weight: 500; }
.professional-industry-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
.professional-industry-grid span { min-height: 58px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 14px; padding: 10px; background: rgba(255,255,255,.035); color: #dbeafe; font-size: 12px; font-weight: 600; line-height: 1.28; text-align: center; transition: color .28s ease, border-color .28s ease, transform .28s cubic-bezier(.22,1,.36,1); }
.professional-industry-grid span:hover { color: var(--primary); border-color: var(--line-strong); transform: translateY(-2px); }
.professional-plan-grid { display: grid; grid-template-columns: minmax(300px,.72fr) minmax(0,1fr); gap: 28px; align-items: center; }
.professional-plan-media { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
.professional-plan-media img { width: 100%; height: 260px; object-fit: cover; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.04); }
.professional-question-panel, .professional-price-card, .professional-outcome-card { border: 1px solid var(--line); border-radius: 24px; padding: clamp(22px, 3vw, 34px); background: rgba(11,18,32,.84); box-shadow: 0 18px 54px rgba(0,0,0,.22); }
.professional-question-panel h3 { max-width: 760px; font-size: clamp(24px, 2.8vw, 38px); font-weight: 600; }
.professional-question-list { display: grid; gap: 12px; margin: 22px 0; }
.professional-question-list div { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 16px; padding: 12px; background: rgba(255,255,255,.035); }
.professional-question-list strong { font-weight: 600; }
.professional-process-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.professional-process-card, .professional-ecom-card { border: 1px solid var(--line); border-radius: 18px; padding: 20px; background: rgba(11,18,32,.84); transition: transform .34s cubic-bezier(.22,1,.36,1), border-color .34s ease, box-shadow .34s ease; }
.professional-process-card:hover, .professional-ecom-card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 22px 54px rgba(34,211,238,.12); }
.professional-process-card h3 { margin: 14px 0 12px; color: #f8fafc; font-size: 17px; }
.professional-process-card ul, .professional-software-card ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 14px; line-height: 1.5; }
.professional-process-card li, .professional-software-card li { position: relative; padding-left: 17px; }
.professional-process-card li::before, .professional-software-card li::before { content: ""; position: absolute; left: 0; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.professional-software-grid { display: grid; gap: 16px; }
.professional-software-card { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,.38fr); gap: 20px; align-items: center; border: 1px solid var(--line); border-radius: 22px; padding: 22px; background: rgba(11,18,32,.82); }
.professional-software-card img { width: 100%; max-height: 250px; object-fit: contain; border-radius: 16px; background: rgba(255,255,255,.04); }
.professional-ecom-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.professional-ecom-card svg { color: var(--primary); }
.professional-ecom-card h3 { margin: 16px 0 10px; font-size: 18px; }
.professional-ecom-card p { color: var(--muted); font-size: 14px; line-height: 1.62; }
.professional-ecom-card a { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--primary); font-weight: 600; font-size: 13px; }
.professional-blue-band { margin-top: 78px; padding: 28px 0; background: linear-gradient(90deg, #0ea5e9, #2563eb 52%, #22d3ee); }
.professional-blue-band-inner { display: flex; align-items: center; justify-content: center; gap: 24px; text-align: center; }
.professional-blue-band h2 { color: #fff; font-size: clamp(24px, 3vw, 38px); text-transform: uppercase; }
.professional-project-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; }
.professional-project-grid figure { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.035); }
.professional-project-grid img { width: 100%; height: 170px; object-fit: cover; transition: transform .45s ease; }
.professional-project-grid figure:hover img { transform: scale(1.04); }
.professional-csmo { display: flex; align-items: center; justify-content: center; gap: 18px; max-width: 920px; margin: 24px auto 0; border: 1px solid rgba(138,235,255,.22); border-radius: 18px; padding: 14px 20px; background: rgba(11,18,32,.78); color: #dbeafe; text-align: center; }
.professional-csmo img { max-width: 230px; border-radius: 10px; }
.professional-client-panel { max-width: 940px; margin: 0 auto; border: 1px solid var(--line); border-radius: 22px; padding: 22px; background: rgba(255,255,255,.96); box-shadow: 0 24px 70px rgba(0,0,0,.2); }
.professional-client-panel img { width: 100%; border-radius: 14px; object-fit: contain; }
.professional-outcome-card { background: linear-gradient(135deg, rgba(14,165,233,.16), rgba(206,189,255,.1)), rgba(11,18,32,.86); }
.professional-outcome-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-top: 18px; }
.professional-outcome-grid div { display: grid; gap: 12px; border: 1px solid var(--line); border-radius: 16px; padding: 16px; background: rgba(255,255,255,.035); }
.professional-pricing { display: grid; grid-template-columns: minmax(300px,.68fr) minmax(0,1fr); gap: 24px; align-items: start; }
.professional-price-card h2 { color: var(--primary); font-size: clamp(38px, 4vw, 64px); }
.professional-price-card strong { display: block; margin-top: 22px; color: #fff; font-size: clamp(36px, 4vw, 58px); line-height: 1; }
.professional-price-card span { display: block; color: var(--muted); }
.professional-price-card img { width: 100%; max-height: 260px; object-fit: contain; margin-top: 24px; border-radius: 18px; background: rgba(255,255,255,.04); }
.professional-consult-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; padding: clamp(22px, 3vw, 34px); }
.professional-consult-form h2, .professional-consult-form .kicker, .professional-consult-form .full, .professional-consult-form button { grid-column: 1 / -1; }
.professional-consult-form h2 { font-size: clamp(24px, 2.5vw, 34px); }
.basic-page { overflow: hidden; background: radial-gradient(circle at 10% 8%, rgba(34,211,238,.13), transparent 26%), radial-gradient(circle at 90% 12%, rgba(167,139,250,.12), transparent 28%); }
.basic-hero { position: relative; min-height: 760px; display: flex; align-items: center; padding: 72px 0 62px; box-shadow: inset 0 -72px 48px -34px var(--bg); background: radial-gradient(circle at 72% 46%, rgba(14,165,233,.2), transparent 28%), linear-gradient(135deg, #020617 0%, #061427 52%, #080b1f 100%); }
.basic-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(138,235,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(138,235,255,.035) 1px, transparent 1px); background-size: 58px 58px; mask-image: radial-gradient(circle at 76% 48%, #000, transparent 58%); opacity: .9; }
.basic-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,.9fr) minmax(430px,.8fr); align-items: center; gap: clamp(36px, 5vw, 82px); }
.basic-pill { display: inline-flex; width: fit-content; margin: 18px 0; border: 1px solid rgba(138,235,255,.28); border-radius: 999px; padding: 8px 13px; background: rgba(34,211,238,.08); color: #b9efff; font-size: 12px; font-weight: 600; text-transform: uppercase; }
.basic-hero-copy h1 { font-size: clamp(44px, 6vw, 92px); line-height: .96; font-weight: 600; color: var(--accent); }
.basic-hero-copy h1 span { background: linear-gradient(90deg, #8aebff, #cebdff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.basic-check-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 22px 0 0; color: #dbeafe; font-size: 14px; }
.basic-check-row span { display: inline-flex; align-items: center; gap: 7px; }
.basic-check-row svg { color: var(--green); }
.basic-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.basic-quick-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 34px; max-width: 720px; }
.basic-quick-stats div { display: grid; gap: 6px; border: 1px solid rgba(138,235,255,.18); border-radius: 16px; padding: 14px; background: rgba(255,255,255,.035); }
.basic-quick-stats svg, .basic-solution-card svg, .basic-industry-grid svg, .basic-process-grid svg, .basic-ecom-grid svg, .basic-metric-grid svg { color: var(--primary); filter: drop-shadow(0 0 14px rgba(34,211,238,.28)); }
.basic-quick-stats strong { color: #fff; font-weight: 600; }
.basic-quick-stats span { color: var(--muted); font-size: 13px; }
.basic-hero-stage { position: relative; min-height: 540px; display: grid; place-items: center; }
.basic-orbit { position: absolute; width: min(92%, 560px); aspect-ratio: 1; border: 1px solid rgba(138,235,255,.18); border-radius: 50%; background: radial-gradient(circle, rgba(34,211,238,.18), transparent 48%); box-shadow: inset 0 0 80px rgba(34,211,238,.08), 0 0 70px rgba(167,139,250,.16); animation: spinBeam 22s linear infinite; }
.basic-packshot { position: relative; z-index: 2; width: min(100%, 560px); border: 1px solid rgba(255,255,255,.1); border-radius: 28px; background: rgba(255,255,255,.04); box-shadow: 0 36px 90px rgba(0,0,0,.42); }
.basic-dashboard-card, .basic-ai-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: 9px; border: 1px solid rgba(138,235,255,.22); border-radius: 16px; padding: 12px 14px; background: rgba(11,18,32,.76); backdrop-filter: blur(18px); color: #dbeafe; box-shadow: 0 18px 48px rgba(0,0,0,.22); }
.basic-dashboard-card { right: 2%; bottom: 13%; }
.basic-ai-card { left: 4%; top: 20%; }
.basic-overview { display: grid; grid-template-columns: minmax(280px,.58fr) minmax(280px,.44fr) minmax(280px,.58fr); gap: 18px; align-items: stretch; }
.basic-panel, .basic-overview-copy, .basic-wheel-wrap, .basic-benefit-list, .basic-cta-card { border: 1px solid rgba(138,235,255,.16); border-radius: 22px; background: rgba(11,18,32,.78); box-shadow: 0 22px 60px rgba(0,0,0,.2); }
.section.basic-panel { padding: clamp(28px, 3.2vw, 42px); }
#basic-solutions.basic-panel { margin-top: clamp(28px, 3.4vw, 54px); }
.basic-overview-copy { padding: clamp(22px, 3vw, 34px); }
.basic-overview-copy h2 { font-size: clamp(24px, 2.8vw, 38px); }
.basic-mini-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 22px; }
.basic-mini-metrics div { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: rgba(255,255,255,.035); }
.basic-mini-metrics strong { display: block; color: var(--primary); font-size: 24px; }
.basic-mini-metrics span { color: var(--muted); font-size: 12px; }
.basic-wheel-wrap { display: grid; place-items: center; padding: 22px; }
.basic-wheel-wrap img { width: min(100%, 380px); border-radius: 50%; }
.basic-benefit-list { display: grid; align-content: center; gap: 10px; padding: clamp(20px, 3vw, 30px); }
.basic-benefit-list p { display: flex; align-items: flex-start; gap: 10px; margin: 0; color: #dbeafe; font-size: 14px; line-height: 1.48; }
.basic-benefit-list svg { flex: 0 0 auto; margin-top: 3px; color: var(--green); }
.basic-industry-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 14px; }
.basic-industry-grid article, .basic-process-grid article, .basic-ecom-grid article, .basic-metric-grid article { border: 1px solid rgba(138,235,255,.16); border-radius: 16px; background: rgba(11,18,32,.78); transition: transform .34s cubic-bezier(.22,1,.36,1), border-color .34s ease, box-shadow .34s ease; }
.basic-industry-grid article:hover, .basic-process-grid article:hover, .basic-ecom-grid article:hover, .basic-metric-grid article:hover, .basic-solution-card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 22px 54px rgba(34,211,238,.12); }
.basic-industry-grid article { min-height: 132px; display: grid; place-items: center; gap: 12px; padding: 18px; color: #dbeafe; text-align: center; font-weight: 500; }
.basic-solution-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
.basic-solution-card { border: 1px solid rgba(138,235,255,.16); border-radius: 18px; padding: 24px; background: linear-gradient(180deg, rgba(37,99,235,.14), rgba(11,18,32,.9)); transition: transform .34s cubic-bezier(.22,1,.36,1), border-color .34s ease, box-shadow .34s ease; }
.basic-solution-card div { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; margin-bottom: 22px; background: radial-gradient(circle, rgba(138,235,255,.2), rgba(167,139,250,.13)); }
.basic-solution-card h3, .basic-process-grid h3, .basic-ecom-grid h3 { margin-bottom: 10px; color: #f8fafc; font-size: 18px; }
.basic-solution-card p, .basic-ecom-grid p { color: var(--muted); font-size: 14px; line-height: 1.6; }
.basic-solution-card a { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; color: var(--primary); font-weight: 600; font-size: 13px; }
.basic-question-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.basic-question-grid article { border: 1px solid rgba(138,235,255,.16); border-radius: 18px; padding: 22px; background: rgba(11,18,32,.78); }
.basic-question-grid span { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; margin-bottom: 16px; color: var(--primary); background: rgba(34,211,238,.12); font-weight: 700; }
.basic-question-grid strong { display: block; color: #fff; font-size: 18px; font-weight: 600; }
.basic-question-grid p { margin-top: 10px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.basic-process-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 14px; }
.basic-process-grid article, .basic-ecom-grid article { padding: 20px; }
.basic-process-grid ul, .basic-software-grid ul, .basic-cta-card ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 14px; line-height: 1.5; }
.basic-process-grid li, .basic-software-grid li, .basic-cta-card li { position: relative; padding-left: 17px; }
.basic-process-grid li::before, .basic-software-grid li::before, .basic-cta-card li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.basic-software-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.basic-software-grid article { display: grid; grid-template-columns: minmax(0,1fr) minmax(190px,.38fr); gap: 18px; align-items: center; border: 1px solid rgba(138,235,255,.16); border-radius: 20px; padding: 22px; background: rgba(11,18,32,.8); }
.basic-software-grid h3 { color: #f8fafc; font-size: 19px; }
.basic-software-grid img { width: 100%; max-height: 190px; object-fit: contain; border-radius: 14px; background: rgba(255,255,255,.04); }
.basic-ecom-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.basic-project-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; }
.basic-project-grid figure { overflow: hidden; border: 1px solid rgba(138,235,255,.14); border-radius: 16px; background: rgba(255,255,255,.035); }
.basic-project-grid img { width: 100%; height: 158px; object-fit: cover; transition: transform .45s ease; }
.basic-project-grid figure:hover img { transform: scale(1.04); }
.basic-csmo { display: flex; align-items: center; justify-content: center; gap: 18px; max-width: 880px; margin: 24px auto 0; border: 1px solid rgba(138,235,255,.18); border-radius: 18px; padding: 14px 20px; background: rgba(11,18,32,.78); color: #dbeafe; text-align: center; }
.basic-csmo img { max-width: 220px; border-radius: 10px; }
.basic-client-panel { border: 1px solid rgba(138,235,255,.16); border-radius: 20px; padding: 22px; background: rgba(255,255,255,.96); }
.basic-client-panel img { width: 100%; border-radius: 14px; object-fit: contain; }
.basic-metric-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 14px; }
.basic-metric-grid article { display: grid; gap: 6px; padding: 20px; }
.basic-metric-grid strong { color: var(--primary); font-size: clamp(28px, 3vw, 40px); line-height: 1; }
.basic-metric-grid span { color: var(--muted); font-size: 13px; }
.basic-cta-grid { display: grid; grid-template-columns: .75fr 1fr .9fr; gap: 16px; align-items: stretch; }
.basic-cta-card { display: grid; align-content: start; gap: 16px; padding: clamp(22px, 3vw, 30px); }
.basic-cta-card.accent { background: linear-gradient(135deg, rgba(37,99,235,.3), rgba(126,34,206,.28)), rgba(11,18,32,.88); }
.basic-cta-card h2 { font-size: clamp(24px, 2.7vw, 34px); }
.basic-consult-form .field-control { margin-bottom: 0; }
.spec-list { display: grid; gap: 10px; margin: 18px 0; }
.spec-list li { list-style: none; display: flex; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); padding-bottom: 9px; color: var(--muted); }
.product-detail-v2 { align-items: start; padding-top: clamp(28px, 4vw, 54px); }
.product-buybox { display: grid; gap: 14px; }
.product-short { color: var(--muted); line-height: 1.65; }
.product-info-box { border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: rgba(255,255,255,.035); }
.product-info-box h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--text); font-size: 15px; line-height: 1.35; }
.product-info-box ul { display: grid; gap: 6px; margin: 0; padding-left: 18px; color: var(--muted); line-height: 1.55; }
.product-detail-sections { display: grid; gap: 22px; }
.product-spec-card, .product-desc-card, .product-related { padding: clamp(18px, 3vw, 28px); }
.specs-table { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 22px; }
.specs-table li { min-height: 44px; align-items: center; }
.specs-table li strong { color: var(--text); font-weight: 600; }
.specs-table li span { text-align: right; }
.product-rich-content { margin: 14px 0 18px; color: var(--muted); font-size: 16px; line-height: 1.72; }
.product-rich-content p { margin: 0 0 12px; }
.product-rich-content h2, .product-rich-content h3 { margin: 18px 0 10px; color: var(--text); line-height: 1.25; }
.product-rich-content h2 { font-size: 24px; }
.product-rich-content h3 { font-size: 20px; }
.product-rich-content ul, .product-rich-content ol { margin: 0 0 14px 22px; }
.product-rich-content li { margin: 6px 0; }
.product-rich-content a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.product-rich-content blockquote { margin: 14px 0; border-left: 4px solid var(--primary); border-radius: 0 10px 10px 0; padding: 12px 14px; background: rgba(34,211,238,.09); color: #dbeafe; }
.product-rich-content img { display: block; width: min(100%, 760px); height: auto; max-height: 520px; margin: 16px 0; border-radius: 14px; border: 1px solid var(--line); object-fit: contain; background: rgba(255,255,255,.04); }
.product-rich-content .desc-figure { margin: 18px 0 22px; }
.product-rich-content .desc-figure img { margin: 0 0 8px; background: #fff; }
.product-rich-content .desc-figure figcaption { font-size: 13.5px; color: var(--muted); font-style: italic; text-align: center; width: min(100%, 760px); }
.cart-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: rgba(255,255,255,.035); }
.qty { display: flex; align-items: center; gap: 8px; }
.icon-btn { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.05); color: var(--text); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.footer { position: relative; overflow: hidden; margin-top: 88px; border-top: 1px solid rgba(138,235,255,.16); padding: 64px 0 28px; color: var(--muted); background: radial-gradient(circle at 12% 0%, rgba(34,211,238,.14), transparent 30%), radial-gradient(circle at 86% 8%, rgba(206,189,255,.12), transparent 34%), linear-gradient(180deg, rgba(7,13,31,.94), #020617 72%); }
.footer::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(138,235,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(138,235,255,.035) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(180deg, rgba(0,0,0,.75), transparent 78%); opacity: .45; }
.footer-glow { position: absolute; left: 50%; top: -140px; width: min(760px, 72vw); height: 260px; border-radius: 999px; background: linear-gradient(90deg, rgba(34,211,238,.18), rgba(206,189,255,.14)); filter: blur(58px); transform: translateX(-50%); opacity: .7; pointer-events: none; }
.footer-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr .72fr 1.08fr 1fr; gap: clamp(26px, 3.8vw, 54px); align-items: start; }
.footer-col { min-width: 0; }
.footer-col h3 { position: relative; margin-bottom: 22px; padding-left: 16px; color: #f8fafc; font-size: 17px; line-height: 1.35; font-weight: 600; }
.footer-col h3::before { content: ""; position: absolute; left: 0; top: .18em; width: 4px; height: 22px; border-radius: 999px; background: var(--gradient); box-shadow: 0 0 20px rgba(34,211,238,.35); }
.footer-hotline { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid rgba(148,163,184,.14); color: #dbeafe; font-size: 14px; font-weight: 500; }
.footer a { transition: color .28s ease, border-color .28s ease, background-color .28s ease, transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease; }
.footer a:hover { color: var(--primary); }
.footer-info-list { display: grid; gap: 16px; padding: 0; list-style: none; }
.footer-info-list li { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 8px; align-items: start; color: #c7d2e5; font-size: 14px; line-height: 1.55; }
.footer-info-list svg { margin-top: 2px; color: var(--primary); filter: drop-shadow(0 0 12px rgba(34,211,238,.28)); }
.footer-link-list { display: grid; gap: 9px; }
.footer-link-list a { display: grid; grid-template-columns: 16px minmax(0,1fr); gap: 8px; align-items: start; min-height: 32px; border-radius: 10px; padding: 5px 7px 5px 0; color: #b9c6d8; font-size: 14px; line-height: 1.45; }
.footer-link-list a svg { margin-top: 2px; color: var(--primary); opacity: .74; transition: transform .28s cubic-bezier(.22,1,.36,1), opacity .28s ease; }
.footer-link-list a:hover { color: #f8fafc; background: rgba(255,255,255,.035); transform: translateX(3px); }
.footer-link-list a:hover svg { opacity: 1; transform: translateX(2px); }
.footer-services .footer-link-list { gap: 8px; }
.footer-newsletter p { max-width: 390px; color: #c7d2e5; font-size: 14px; line-height: 1.72; }
.footer-subscribe { display: grid; grid-template-columns: minmax(0,1fr) 48px; align-items: center; gap: 8px; margin-top: 22px; border: 1px solid rgba(138,235,255,.18); border-radius: 999px; padding: 6px; background: rgba(255,255,255,.92); box-shadow: 0 16px 36px rgba(0,0,0,.22); }
.footer-subscribe:focus-within { border-color: rgba(138,235,255,.62); box-shadow: 0 0 0 4px rgba(34,211,238,.1), 0 18px 40px rgba(0,0,0,.24); }
.footer-subscribe input { min-width: 0; height: 42px; border: 0; outline: 0; padding: 0 12px; color: #0f172a; background: transparent; font-size: 14px; }
.footer-subscribe input::placeholder { color: #73859c; }
.footer-subscribe button { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 999px; color: var(--ink); background: var(--gradient); box-shadow: 0 10px 24px rgba(34,211,238,.28); }
.footer-subscribe button:hover { transform: translateY(-1px) scale(1.03); box-shadow: 0 14px 32px rgba(34,211,238,.36); }
.footer-logo-card { display: inline-flex; align-items: center; justify-content: center; min-height: 68px; margin-top: 20px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 12px 18px; background: rgba(255,255,255,.92); box-shadow: 0 18px 44px rgba(0,0,0,.24); }
.footer-logo-card:hover { transform: translateY(-2px); border-color: rgba(138,235,255,.45); }
.footer-logo-card img { width: 210px; max-width: 100%; object-fit: contain; }
.footer-bottom { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 24px; margin-top: 46px; border-top: 1px solid rgba(148,163,184,.14); padding-top: 22px; color: #8ea0b9; font-size: 13px; }
.footer-bottom p:last-child { max-width: 680px; text-align: right; }
.chat-widget { position: fixed; right: 22px; bottom: 28px; z-index: 80; width: min(420px, calc(100vw - 28px)); color: #0f172a; }
.chat-panel { overflow: hidden; border-radius: 28px; background: #fff; box-shadow: 0 28px 70px rgba(2,6,23,.28); transform: translateY(0) scale(1); opacity: 1; transition: transform .36s cubic-bezier(.22,1,.36,1), opacity .28s ease; }
.chat-widget.collapsed { width: 84px; height: 84px; }
.chat-widget.collapsed .chat-panel { display: none; pointer-events: none; visibility: hidden; opacity: 0; transform: translateY(18px) scale(.96); }
.chat-head { display: grid; grid-template-columns: auto 1fr 50px 50px; gap: 12px; align-items: center; padding: 30px 28px 18px; color: #fff; background: linear-gradient(135deg,#0f72ff,#2f83ff); }
.chat-avatar { position: relative; display: grid; place-items: center; width: 106px; height: 46px; border-radius: 16px; background: #fff; box-shadow: 0 8px 22px rgba(15,23,42,.18); }
.chat-avatar img { width: 88px; max-height: 28px; object-fit: contain; }
.chat-avatar span { position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; border: 3px solid #fff; border-radius: 999px; background: #22c55e; }
.chat-head strong { font-size: 20px; color: #fff; }
.chat-icon-btn { display: grid; place-items: center; width: 50px; height: 50px; border: 0; border-radius: 999px; color: #fff; background: rgba(255,255,255,.14); transition: background .24s ease, transform .24s ease; }
.chat-icon-btn:hover { background: rgba(255,255,255,.24); transform: translateY(-1px); }
.chat-body { padding: 18px 28px 28px; color: #fff; background: linear-gradient(135deg,#2279ff,#2f83ff); }
.chat-body h3 { font-size: 28px; line-height: 1.15; color: #fff; }
.chat-body p { margin-top: 6px; font-size: 17px; color: rgba(255,255,255,.9); }
.chat-actions { display: grid; gap: 14px; padding: 34px 24px 74px; text-align: center; }
.chat-actions p { color: #7c91a6; font-size: 18px; }
.chat-zalo, .chat-quick { display: grid; place-items: center; min-height: 58px; border-radius: 11px; font-size: 20px; font-weight: 700; transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease, background .28s ease; }
.chat-zalo { color: #fff; background: linear-gradient(135deg,#0068ff 0%,#1688ff 55%,#35b8ff 100%); box-shadow: 0 14px 28px rgba(8,108,255,.25); }
.chat-zalo:hover { transform: translateY(-2px); box-shadow: 0 20px 38px rgba(8,108,255,.34); }
.chat-quick { color: #3b3b3b; background: #e3e7ec; }
.chat-quick:hover { transform: translateY(-2px); background: #d8dee7; box-shadow: 0 12px 26px rgba(15,23,42,.1); }
.chat-lang { display: flex; justify-content: center; gap: 24px; border-top: 1px solid #e5e7eb; padding: 20px; color: #3b3b3b; }
.chat-lang span:first-child { border-radius: 9px; padding: 7px 18px; color: #086cff; background: #eaf3ff; font-weight: 700; }
.chat-bubble { isolation: isolate; position: absolute; right: 8px; bottom: -8px; display: grid; place-items: center; width: 68px; height: 68px; border: 3px solid rgba(255,255,255,.96); border-radius: 999px; color: #fff; background: linear-gradient(145deg,#0068ff 0%,#158aff 58%,#42c7ff 100%); box-shadow: 0 18px 42px rgba(8,108,255,.38), inset 0 1px 0 rgba(255,255,255,.42); font-size: 17px; font-weight: 700; letter-spacing: -.1px; transition: transform .34s cubic-bezier(.22,1,.36,1), box-shadow .34s ease, filter .34s ease; }
.chat-widget.collapsed .chat-bubble { right: 0; bottom: 0; }
.chat-bubble::before { content: ""; position: absolute; inset: -9px; z-index: -1; border: 1px solid rgba(22,136,255,.38); border-radius: inherit; animation: zaloPulse 2.4s ease-out infinite; }
.chat-bubble::after { content: ""; position: absolute; inset: 8px 9px auto auto; width: 18px; height: 18px; border-radius: 999px; background: radial-gradient(circle,rgba(255,255,255,.92) 0%,rgba(255,255,255,.32) 58%,rgba(255,255,255,0) 72%); opacity: .8; }
.chat-bubble span { position: relative; z-index: 1; text-shadow: 0 1px 8px rgba(0,67,176,.3); }
.chat-bubble:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 24px 54px rgba(8,108,255,.48), inset 0 1px 0 rgba(255,255,255,.48); filter: saturate(1.08); }
.chat-bubble:active { transform: translateY(-1px) scale(.99); }
@keyframes zaloPulse {
  0% { opacity: .72; transform: scale(.82); }
  70%, 100% { opacity: 0; transform: scale(1.28); }
}
.admin-shell { display: grid; grid-template-columns: 270px 1fr; min-height: 100vh; background: #f0f0f1; color: #0f172a; }
.admin-sidebar { position: sticky; top: 0; height: 100vh; overflow: auto; padding: 18px; background: #1d2327; color: #f0f0f1; border-right: 1px solid rgba(255,255,255,.08); }
.admin-logo { display: flex; align-items: center; min-height: 54px; margin-bottom: 18px; }
.admin-logo img { width: 178px; }
.admin-nav { display: grid; gap: 5px; }
.admin-nav a { display: flex; align-items: center; gap: 10px; min-height: 40px; border-radius: 4px; padding: 9px 11px; color: #c3c4c7; font-size: 14px; font-weight: 600; }
.admin-nav a.active, .admin-nav a:hover { color: #fff; background: #2271b1; }
.admin-main { min-width: 0; }
.admin-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; padding: 14px 24px; border-bottom: 1px solid #e2e8f0; background: rgba(255,255,255,.92); backdrop-filter: blur(14px); }
.admin-title h1 { color: #0f172a; font-size: 28px; line-height: 1.2; }
.admin-title p { color: #64748b; }
.admin-content { padding: 24px; }
.admin-card, .kpi, .table-wrap { border: 1px solid #dcdcde; border-radius: 4px; background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.04); }
.admin-card { padding: 18px; }
.kpi-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { padding: 18px; }
.kpi span { color: #64748b; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.kpi strong { display: block; margin-top: 8px; font-size: 28px; color: #0f172a; }
.lead-type-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-bottom: 16px; }
.lead-type-card { border: 1px solid #dcdcde; border-radius: 6px; padding: 16px; background: linear-gradient(135deg,#fff,#f8fbff); box-shadow: 0 1px 1px rgba(0,0,0,.04); }
.lead-type-card span { display: inline-flex; align-items: center; gap: 8px; color: #334155; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.lead-type-card strong { display: block; margin-top: 8px; color: #0f172a; font-size: 30px; line-height: 1; }
.lead-type-card p { margin-top: 8px; color: #64748b; font-size: 13px; line-height: 1.45; }
.admin-security-center { display: grid; gap: 18px; margin-top: 16px; }
.admin-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.admin-section-head h3 { color: #0f172a; font-size: 20px; line-height: 1.25; }
.security-status-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.security-status-card { min-width: 0; border: 1px solid #dbeafe; border-radius: 8px; padding: 14px; background: linear-gradient(135deg,#f8fbff,#eef6ff); }
.security-status-card span { display: inline-flex; align-items: center; gap: 7px; color: #334155; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.security-status-card strong { display: block; margin-top: 9px; color: #0f172a; font-size: 18px; line-height: 1.25; overflow-wrap: anywhere; }
.security-form { border-top: 1px solid #e2e8f0; padding-top: 16px; }
.security-audit { display: grid; gap: 10px; min-width: 0; }
.security-audit h4 { color: #0f172a; font-size: 16px; }
.media-stat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 16px; }
.media-stat-card { border: 1px solid #dcdcde; border-radius: 6px; padding: 16px; background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.04); }
.media-stat-card span { display: inline-flex; align-items: center; gap: 8px; color: #334155; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.media-stat-card strong { display: block; margin-top: 8px; color: #0f172a; font-size: 28px; line-height: 1; }
.media-stat-card p { margin-top: 8px; color: #64748b; font-size: 13px; line-height: 1.45; }
.media-toolbar .admin-select { min-width: 220px; }
.media-upload-btn { cursor: pointer; }
.media-admin-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: 16px; align-items: stretch; }
.media-card { display: grid; grid-template-rows: 160px 1fr; min-width: 0; border: 1px solid #dcdcde; border-radius: 8px; background: #fff; overflow: hidden; box-shadow: 0 1px 1px rgba(0,0,0,.04); }
.media-card.unused { border-color: #fecdd3; }
.media-card-thumb { background: #f1f5f9; overflow: hidden; }
.media-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-card-body { display: grid; gap: 9px; padding: 13px; min-width: 0; }
.media-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.media-type, .media-used, .media-unused { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 4px 8px; font-size: 11px; font-weight: 700; line-height: 1; }
.media-type { max-width: 120px; color: #1e40af; background: #dbeafe; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-used { color: #166534; background: #dcfce7; }
.media-unused { color: #9f1239; background: #ffe4e6; }
.media-card h3 { color: #0f172a; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.media-card p { color: #64748b; font-size: 12px; line-height: 1.45; min-height: 34px; }
.media-card code { display: block; max-width: 100%; border: 1px solid #e2e8f0; border-radius: 4px; padding: 7px 8px; background: #f8fafc; color: #475569; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 2px; }
.media-card-actions .btn:disabled { opacity: .55; cursor: not-allowed; }
.admin-grid-2 { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; }
.admin-toolbar, .admin-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.admin-toolbar { justify-content: space-between; margin-bottom: 14px; }
.admin-input, .admin-select, .admin-textarea { width: 100%; border: 1px solid #8c8f94; border-radius: 4px; padding: 10px 11px; background: #fff; color: #0f172a; outline: none; }
.admin-main .btn-ghost { color: #0f172a; border-color: #cbd5e1; background: #fff; }
.admin-main .btn-danger { color: #9f1239; border-color: #fda4af; background: #fff1f2; }
.admin-main .btn-primary { color: #0f172a; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; min-width: 860px; }
th, td { border-bottom: 1px solid #e2e8f0; padding: 13px 12px; text-align: left; font-size: 13px; vertical-align: middle; }
th { position: sticky; top: 0; background: #f8fafc; color: #334155; font-size: 12px; text-transform: uppercase; z-index: 1; }
td { color: #1e293b; }
.badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 9px; font-size: 12px; font-weight: 600; background: #dbeafe; color: #1e40af; }
.badge.published, .badge.open, .badge.active, .badge.completed, .badge.converted, .badge.ready { background: #dcfce7; color: #166534; }
.badge.draft, .badge.planned, .badge.pending, .badge.new, .badge.review { background: #fef9c3; color: #854d0e; }
.badge.paused, .badge.blocked, .badge.lost, .badge.cancelled { background: #ffe4e6; color: #9f1239; }
.lead-type-pill { display: inline-flex; align-items: center; gap: 6px; min-width: max-content; border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 700; border: 1px solid #cbd5e1; background: #f8fafc; color: #334155; }
.lead-type-pill.template { border-color: #c4b5fd; background: #f5f3ff; color: #5b21b6; }
.lead-type-pill.consult { border-color: #7dd3fc; background: #ecfeff; color: #155e75; }
.lead-type-pill.other { border-color: #d6d3d1; background: #fafaf9; color: #57534e; }
.admin-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.admin-form .full { grid-column: 1 / -1; }
.admin-thumb { width: 62px; height: 46px; border: 1px solid #dcdcde; border-radius: 4px; object-fit: cover; background: #f6f7f7; }
.admin-row-meta { margin-top: 4px; color: #646970; font-size: 12px; }
.wp-post-layout { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 20px; align-items: start; }
.wp-editor-main, .wp-editor-side { display: grid; gap: 16px; min-width: 0; }
.wp-box { border: 1px solid #c3c4c7; border-radius: 4px; background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.04); }
.wp-box-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; border-bottom: 1px solid #dcdcde; padding: 10px 14px; }
.wp-box-head h3 { color: #1d2327; font-size: 15px; }
.wp-box-head span { color: #646970; font-size: 12px; font-weight: 600; }
.wp-box > .field, .wp-box > .checkbox-line, .wp-box > .wp-publish-actions, .wp-product-grid, .seo-preview, .seo-checklist { margin: 14px; }
.wp-post-title-bar { display: grid; gap: 8px; }
.wp-title-input { width: 100%; min-height: 54px; border: 1px solid #8c8f94; border-radius: 4px; padding: 10px 14px; color: #1d2327; background: #fff; font-size: 24px; font-weight: 600; outline: none; }
.wp-permalink { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: #646970; font-size: 13px; }
.wp-permalink code { color: #2271b1; background: transparent; }
.wp-permalink input { min-width: 220px; border: 1px solid #c3c4c7; border-radius: 4px; padding: 6px 8px; color: #1d2327; }
.wp-editor-toolbar { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid #dcdcde; padding: 8px 12px; background: #f6f7f7; }
.wp-editor-toolbar button { min-width: 32px; height: 30px; border: 1px solid #c3c4c7; border-radius: 3px; background: #fff; color: #1d2327; font-weight: 600; }
.wp-content-editor { width: calc(100% - 28px); min-height: 320px; margin: 14px; border: 1px solid #8c8f94; border-radius: 4px; padding: 14px; color: #1d2327; resize: vertical; outline: none; line-height: 1.7; }
.classic-editor { margin: 14px; border: 1px solid #8c8f94; border-radius: 4px; background: #fff; overflow: hidden; }
.classic-editor-tabs { display: flex; justify-content: flex-end; gap: 4px; padding: 8px 8px 0; border-bottom: 1px solid #dcdcde; background: #f6f7f7; }
.classic-editor-tabs button { min-height: 34px; border: 1px solid #c3c4c7; border-bottom: none; border-radius: 4px 4px 0 0; padding: 0 12px; background: #f0f0f1; color: #50575e; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.classic-editor-tabs button.active { background: #fff; color: #1d2327; border-color: #8c8f94; position: relative; top: 1px; }
.classic-editor-toolbar { align-items: center; padding: 10px 12px; gap: 7px; }
.classic-editor-toolbar button, .classic-upload { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 34px; border: 1px solid #c3c4c7; border-radius: 4px; padding: 0 10px; background: #fff; color: #1d2327; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
.classic-editor-toolbar button:hover, .classic-upload:hover { border-color: #2271b1; color: #135e96; background: #f0f6fc; }
.classic-editor-toolbar button:active, .classic-upload:active { transform: translateY(1px); }
.classic-upload input { display: none; }
.classic-editor-visual { min-height: 320px; padding: 18px; color: #1d2327; font-size: 15px; line-height: 1.72; outline: none; overflow: auto; }
.classic-editor-visual:empty::before { content: attr(data-placeholder); color: #8c8f94; pointer-events: none; }
.classic-editor-visual:focus { box-shadow: inset 0 0 0 2px rgba(34,113,177,.18); }
.classic-editor-visual p { margin: 0 0 14px; }
.classic-editor-visual h2, .classic-editor-visual h3 { margin: 18px 0 10px; color: #1d2327; line-height: 1.25; }
.classic-editor-visual h2 { font-size: 24px; }
.classic-editor-visual h3 { font-size: 20px; }
.classic-editor-visual ul, .classic-editor-visual ol { margin: 0 0 16px 22px; padding: 0; }
.classic-editor-visual li { margin: 6px 0; }
.classic-editor-visual blockquote { margin: 16px 0; border-left: 4px solid #2271b1; padding: 10px 14px; background: #f0f6fc; color: #334155; }
.classic-editor-visual h1 { font-size: 28px; margin: 18px 0 12px; color: #1d2327; line-height: 1.2; }
.classic-editor-visual h4 { font-size: 17px; margin: 14px 0 8px; color: #1d2327; }
.classic-editor-visual h5 { font-size: 15px; margin: 12px 0 6px; color: #1d2327; }
.classic-editor-visual h6 { font-size: 13px; margin: 10px 0 6px; color: #1d2327; text-transform: uppercase; letter-spacing: .04em; }
.classic-editor-visual pre { background: #f6f7f7; border: 1px solid #dcdcde; border-radius: 4px; padding: 12px 14px; font-family: ui-monospace, monospace; font-size: 13px; overflow: auto; margin: 12px 0; }
.classic-editor-visual table.ce-table { width: 100%; border-collapse: collapse; margin: 14px 0; }
.classic-editor-visual table.ce-table th, .classic-editor-visual table.ce-table td { border: 1px solid #c3c4c7; padding: 8px 10px; vertical-align: top; }
.classic-editor-visual table.ce-table th { background: #f6f7f7; font-weight: 700; }
.classic-editor-visual img { max-width: 100%; height: auto; border-radius: 4px; margin: 8px 0; }
.classic-editor-visual iframe { max-width: 100%; border-radius: 4px; margin: 8px 0; }
.classic-editor-toolbar .ce-select { min-height: 30px; padding: 0 10px; border: 1px solid #c3c4c7; border-radius: 3px; background: #fff; color: #1d2327; font-size: 13px; font-weight: 600; cursor: pointer; }
.classic-editor-toolbar .ce-sep { display: inline-block; width: 1px; height: 22px; background: #dcdcde; margin: 0 2px; align-self: center; }
.classic-editor-visual a { color: #135e96; text-decoration: underline; }
.classic-editor-visual img { display: block; width: min(100%, 860px); height: auto; margin: 16px 0; border-radius: 8px; }
.classic-editor .classic-editor-text { display: none; width: 100%; min-height: 320px; margin: 0; border: 0; border-radius: 0; border-top: 1px solid #dcdcde; padding: 16px; font: 13px/1.65 Consolas, "Courier New", monospace; background: #fff; color: #1d2327; }
.classic-editor[data-mode="text"] .classic-editor-visual { display: none; }
.classic-editor[data-mode="text"] .classic-editor-text { display: block; }
.classic-editor.compact .classic-editor-toolbar { gap: 5px; padding: 8px; }
.classic-editor.compact .classic-editor-toolbar button, .classic-editor.compact .classic-upload { min-height: 30px; min-width: 32px; padding: 0 8px; font-size: 12px; }
.wp-product-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.wp-product-grid .full { grid-column: 1 / -1; }
.wp-editor-side .wp-box { position: relative; }
.admin-toc-box { position: sticky; top: 92px; z-index: 3; }
.admin-toc { display: grid; gap: 4px; padding: 10px; }
.admin-toc a { display: flex; align-items: center; gap: 8px; border-radius: 4px; padding: 9px 10px; color: #1d2327; font-size: 13px; font-weight: 600; transition: background .2s ease, color .2s ease; }
.admin-toc a:hover { background: #f0f6fc; color: #2271b1; }
.admin-toc a.active,
.admin-toc a[aria-current="true"] { background: #e0f2fe; color: #0f172a; }
.wp-box[id] { scroll-margin-top: 96px; }
.wp-publish-actions { display: flex; gap: 10px; justify-content: space-between; }
.checkbox-line { display: flex; align-items: center; gap: 8px; color: #1d2327; font-weight: 600; }
.featured-image-box { display: grid; place-items: center; min-height: 190px; margin: 14px; border: 1px dashed #a7aaad; border-radius: 4px; background: #f6f7f7; overflow: hidden; }
.featured-image-box img { width: 100%; height: 220px; object-fit: cover; }
#productImagePlaceholder { display: grid; place-items: center; gap: 8px; color: #646970; font-weight: 600; text-align: center; }
.upload-drop { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; margin: 14px; border: 1px dashed #2271b1; border-radius: 4px; color: #2271b1; background: #f0f6fc; font-weight: 600; cursor: pointer; }
.upload-drop input { display: none; }
.yoast-box { border-top: 4px solid #7ad03a; }
.seo-preview { border: 1px solid #dcdcde; border-radius: 4px; padding: 14px; background: #fff; }
.seo-preview div { color: #1a0dab; font-size: 18px; line-height: 1.3; }
.seo-preview cite { display: block; margin-top: 3px; color: #006621; font-style: normal; font-size: 13px; }
.seo-preview p { margin-top: 6px; color: #545454; font-size: 13px; line-height: 1.45; }
.seo-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 62px; min-height: 28px; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 600; }
.seo-chip.good { background: #dcfce7; color: #166534; }
.seo-chip.ok { background: #fef9c3; color: #854d0e; }
.seo-chip.bad { background: #ffe4e6; color: #9f1239; }
.seo-checklist { display: grid; gap: 8px; padding: 0 0 4px; }
.seo-checklist li { list-style: none; display: grid; grid-template-columns: 12px 150px 1fr; gap: 10px; align-items: start; color: #50575e; font-size: 13px; }
.seo-checklist li span { width: 10px; height: 10px; margin-top: 5px; border-radius: 999px; }
.seo-checklist li.pass span { background: #16a34a; }
.seo-checklist li.fail span { background: #dc2626; }
.seo-checklist strong { color: #1d2327; }
.seo-checklist em { font-style: normal; }
.empty { padding: 32px; text-align: center; color: #64748b; }
.admin-row-actions { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: max-content; white-space: nowrap; }
.admin-row-actions .btn { flex: 0 0 auto; }
.table-wrap td:has(.admin-row-actions) { min-width: 216px; }
.admin-help { display: block; margin-top: 7px; color: #64748b; font-size: 12px; line-height: 1.45; }
.news-config-layout { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 16px; align-items: start; }
.news-config-counts { border: 1px solid #dcdcde; border-radius: 4px; padding: 14px; background: #f8fafc; }
.news-config-counts h3 { margin-bottom: 12px; color: #1d2327; font-size: 15px; }
.news-config-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #e2e8f0; padding: 10px 0; color: #334155; font-size: 13px; font-weight: 600; }
.news-config-row:last-child { border-bottom: 0; }
.news-config-row span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.news-config-row b { display: inline-grid; place-items: center; min-width: 30px; height: 26px; border-radius: 999px; background: #dbeafe; color: #1e40af; }
.news-pin-card { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 16px; border: 1px solid #dcdcde; border-radius: 4px; padding: 14px; background: #f8fafc; }
.news-pin-card img { width: 100%; height: 118px; object-fit: cover; border-radius: 4px; background: #e2e8f0; }
.news-pin-card span { color: #2271b1; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.news-pin-card h3 { margin-top: 5px; color: #1d2327; font-size: 18px; line-height: 1.35; }
.news-pin-card p { margin-top: 7px; color: #64748b; font-size: 13px; line-height: 1.55; }
.news-pin-card a { display: inline-flex; margin-top: 8px; color: #2271b1; font-weight: 700; }
.bar-list { display: grid; gap: 10px; }
.bar-item { display: grid; grid-template-columns: 120px 1fr 44px; gap: 10px; align-items: center; color: #334155; font-size: 13px; font-weight: 600; }
.bar-track { height: 10px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.bar-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg,#22d3ee,#a78bfa); }
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 85; padding: 26px 0 calc(26px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.08); background: rgba(5,7,18,.97); box-shadow: 0 -24px 72px rgba(0,0,0,.42); backdrop-filter: blur(18px); }
.cookie-inner { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 26px; }
.cookie-copy { max-width: 840px; }
.cookie-copy h3 { color: #f8fafc; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.18; font-weight: 600; }
.cookie-copy p { margin-top: 12px; color: #b8c2d2; font-size: 16px; line-height: 1.72; }
.cookie-actions { display: flex; align-items: center; gap: 12px; }
.cookie-actions .btn { min-height: 48px; padding-inline: 22px; }
.cookie-link { min-height: 48px; border: 0; border-radius: 999px; padding: 0 4px; color: #38bdf8; background: transparent; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; transition: color .25s ease, transform .25s ease; }
.cookie-link:hover { color: var(--primary); transform: translateY(-1px); }
.toast { position: fixed; right: 18px; bottom: 18px; z-index: 100; max-width: 360px; border: 1px solid var(--line-strong); border-radius: 16px; padding: 14px 16px; background: rgba(11,18,32,.96); color: var(--text); box-shadow: var(--shadow); transform: translateY(120%); opacity: 0; transition: .25s ease; }
.toast.show { transform: translateY(0); opacity: 1; }
.modal-backdrop { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(2,6,23,.68); padding: 18px; }
.modal { width: min(460px, 100%); border-radius: 18px; padding: 22px; background: #fff; color: #0f172a; box-shadow: var(--shadow); }
.modal-lg { width: min(980px, 100%); max-height: min(860px, calc(100vh - 36px)); overflow: auto; }
.modal-editor-layout { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 18px; align-items: start; }
.modal-toc { position: sticky; top: 0; border: 1px solid #dcdcde; border-radius: 6px; padding: 12px; background: #f8fafc; }
.modal-toc h4 { margin-bottom: 8px; color: #1d2327; font-size: 14px; }
.modal-toc a { display: block; border-left: 2px solid #cbd5e1; padding: 6px 0 6px 9px; color: #475569; font-size: 12px; font-weight: 600; }
.modal-toc a:hover { color: #2271b1; border-left-color: #2271b1; }
.admin-edit-form .field[id] { scroll-margin-top: 20px; }
@media (max-width: 1080px) {
  .nav { flex-wrap: wrap; padding: 10px 0; }
  .nav-menu { order: 3; width: 100%; }
  .hero-inner { grid-template-columns: 1fr; }
  .training-hero-inner, .training-module, .training-module-flip, .ai-module { grid-template-columns: 1fr; }
  .training-module-flip > .training-mini-grid { grid-column: 1 / -1; }
  .training-mini-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .training-course-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .training-cta { grid-template-columns: 1fr; }
  .about-hero, .about-video-grid { grid-template-columns: 1fr; }
  .about-split { grid-template-columns: 1fr; }
  .about-value-grid { grid-template-columns: 1fr; }
  .about-visual { min-height: 0; }
  .solution-grid, .solution-detail-body { grid-template-columns: 1fr; }
  .source-detail-hero-grid { grid-template-columns: 1fr; }
  .source-all-media-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .source-package-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .professional-hero-grid, .professional-benefits, .professional-plan-grid, .professional-pricing { grid-template-columns: 1fr; }
  .professional-industry-grid, .professional-process-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .professional-ecom-grid, .professional-outcome-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .professional-project-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .professional-software-card { grid-template-columns: 1fr; }
  .basic-hero-grid, .basic-overview, .basic-cta-grid { grid-template-columns: 1fr; }
  .basic-industry-grid, .basic-process-grid, .basic-metric-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .basic-solution-grid, .basic-ecom-grid, .basic-software-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .basic-project-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .basic-hero-stage { min-height: 440px; }
  .footer-inner { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
  .footer-bottom p:last-child { max-width: 100%; text-align: left; }
  .product-grid, .grid-4, .kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .detail-grid, .admin-grid-2, .wp-post-layout { grid-template-columns: 1fr; }
  .specs-table { grid-template-columns: 1fr; }
  .specs-table li span { text-align: left; }
  .content-with-toc { grid-template-columns: 1fr; }
  .toc-box, .admin-toc-box { position: static; }
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; height: auto; }
  .admin-nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 740px) {
  .container { width: calc(100dvw - 32px); }
  .site-header { padding: 0; background: rgba(4,7,19,.98); border-bottom: 1px solid rgba(255,255,255,.06); }
  .site-header .container.nav { width: 100%; max-width: 100%; }
  .nav { position: relative; min-height: 92px; flex-wrap: nowrap; border: 0; border-radius: 0; padding: 18px 20px; background: rgba(4,7,19,.98); box-shadow: none; }
  .brand { min-width: 0; }
  .brand img { width: min(202px, 58vw); max-height: 46px; }
  .nav-menu, .nav-actions { display: none; }
  .mobile-menu-toggle { display: inline-grid; flex: 0 0 52px; place-items: center; width: 52px; height: 52px; margin-left: auto; border: 0; border-radius: 16px; color: #f8fafc; background: transparent; touch-action: manipulation; transition: background-color .24s ease, transform .24s cubic-bezier(.22,1,.36,1); }
  .mobile-menu-toggle:hover, .mobile-menu-toggle:focus-visible { background: rgba(255,255,255,.08); outline: none; }
  .mobile-menu-toggle:active { transform: scale(.96); }
  .mobile-menu-panel { position: absolute; left: 0; right: 0; top: 100%; display: block; padding: 0 20px 20px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(4,7,19,.98); box-shadow: 0 28px 70px rgba(0,0,0,.38); transform: translateY(-10px); opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .26s ease, transform .32s cubic-bezier(.22,1,.36,1), visibility .26s ease; }
  body.mobile-menu-open .mobile-menu-panel { transform: translateY(0); opacity: 1; pointer-events: auto; visibility: visible; }
  body.mobile-menu-open .mobile-menu-toggle { background: rgba(255,255,255,.08); }
  .hero { min-height: 560px; }
  .hero-inner { padding: 48px 0; }
  .hero-content { text-align: center; }
  .hero-content .actions { justify-content: center; }
  .hero-content .btn { width: 100%; max-width: 360px; }
  .hero h1, .hero-content h1 { margin-bottom: 18px; font-size: clamp(30px, 8.4vw, 38px); line-height: 1.22; }
  .hero-content .pipe-row { justify-content: center; row-gap: 10px; margin-bottom: 22px; }
  .lead { max-width: 100%; font-size: 15px; line-height: 1.65; }
  .hero-content .lead { margin-top: 18px; font-size: 15px; line-height: 1.65; }
  .eyebrow { justify-content: center; max-width: 100%; }
  .hero-visual img { height: 230px; }
  .professional-hero { min-height: 0; padding: 48px 0 42px; }
  .professional-hero-copy h1 { font-size: clamp(34px, 10vw, 48px); }
  .professional-strip-inner { grid-template-columns: 1fr; padding: 18px 0; text-align: center; }
  .professional-benefit-grid, .professional-industry-grid, .professional-process-grid, .professional-ecom-grid, .professional-outcome-grid, .professional-pricing { grid-template-columns: 1fr; }
  .professional-plan-media, .professional-project-grid { grid-template-columns: 1fr; }
  .professional-plan-media img, .professional-project-grid img { height: auto; max-height: 260px; object-fit: contain; }
  .professional-blue-band-inner, .professional-csmo { flex-direction: column; }
  .professional-consult-form { grid-template-columns: 1fr; }
  .basic-hero { min-height: 0; padding: 46px 0 42px; }
  .basic-hero-copy h1 { font-size: clamp(42px, 14vw, 64px); }
  .basic-quick-stats, .basic-mini-metrics, .basic-industry-grid, .basic-solution-grid, .basic-question-grid, .basic-process-grid, .basic-software-grid, .basic-ecom-grid, .basic-project-grid, .basic-metric-grid, .basic-cta-grid { grid-template-columns: 1fr; }
  .basic-hero-stage { min-height: 320px; }
  .basic-packshot { width: min(100%, 420px); }
  .basic-dashboard-card, .basic-ai-card { position: relative; left: auto; right: auto; top: auto; bottom: auto; justify-self: center; margin-top: 10px; }
  .basic-software-grid article { grid-template-columns: 1fr; }
  .basic-project-grid img { height: auto; max-height: 260px; object-fit: contain; }
  .basic-csmo { flex-direction: column; }
  .training-hero { min-height: 620px; margin-top: -132px; padding-top: 150px; }
  .training-hero-inner { padding: 42px 0 54px; }
  .training-hero-copy h1 { font-size: clamp(36px, 11vw, 52px); }
  .training-hero-panel { min-height: 320px; border-radius: 24px; }
  .training-hero-metrics { grid-template-columns: 1fr; }
  .training-catalog { gap: 64px; padding-top: 62px; }
  .training-module-media img { height: 238px; }
  .training-mini-grid, .training-course-grid { grid-template-columns: 1fr; }
  .training-mini-card { min-height: 0; }
  .training-timeline-head { align-items: flex-start; flex-direction: column; }
  .training-table-section { padding-top: 64px; }
  .training-proof-band { margin-top: 68px; padding: 62px 0; }
  .training-cta .btn { width: 100%; }
  .about-cover { min-height: 460px; }
  .about-cover-inner { padding: 62px 0 54px; }
  .about-crumbs { flex-wrap: wrap; justify-content: flex-start; letter-spacing: .08em; }
  .about-principle p { padding-left: 16px; font-size: 16px; }
  .about-value-band { margin-top: 54px; padding: 58px 0; }
  .about-value-card { min-height: 0; padding: 24px; }
  .about-profile-inner .actions { width: 100%; }
  .about-profile-inner .btn { width: 100%; }
  .logo-marquee-section { margin-top: 58px; padding: 58px 0 40px; }
  .logo-proof { flex-wrap: wrap; gap: 8px; font-size: 16px; margin-bottom: 24px; padding: 0 18px; }
  .logo-track { gap: 12px; animation-duration: 68s; }
  .logo-item { width: 116px; height: 66px; }
  .logo-item img { max-width: 112px; max-height: 46px; }
  .product-media { height: 220px; }
  .product-search { width: 100%; grid-template-columns: 1fr; }
  .product-search .btn { width: 100%; }
  .source-package-grid { grid-template-columns: 1fr; }
  .source-package-media { height: 188px; }
  .source-all-media-grid { grid-template-columns: 1fr; }
  .source-all-media-grid img { height: auto; max-height: 300px; }
  .source-doc-head { align-items: stretch; flex-direction: column; padding: 22px; }
  .source-doc-cover img { max-height: 280px; padding: 10px; }
  .source-content { padding: 24px 20px 30px; font-size: 15px; }
  .source-tab-row { top: 106px; border-radius: 18px; }
  .chat-widget { right: 14px; bottom: 24px; width: calc(100vw - 28px); }
  .chat-panel { border-radius: 24px; }
  .chat-head { grid-template-columns: auto 1fr 44px 44px; padding: 22px 22px 16px; }
  .chat-icon-btn { width: 44px; height: 44px; }
  .chat-actions { padding-bottom: 64px; }
  .cookie-banner { padding: 26px 0 calc(26px + env(safe-area-inset-bottom)); }
  .cookie-inner { width: calc(100vw - 32px); grid-template-columns: 1fr; align-items: start; gap: 20px; }
  .cookie-copy h3 { font-size: clamp(24px, 7vw, 30px); line-height: 1.22; }
  .cookie-copy p { font-size: 16px; line-height: 1.7; }
  .cookie-actions { flex-wrap: wrap; justify-content: flex-start; gap: 12px; }
  .cookie-actions .btn { min-height: 50px; padding-inline: 20px; }
  .cookie-link { min-height: 50px; }
  .footer { margin-top: 58px; padding: 46px 0 24px; }
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .footer-col h3 { margin-bottom: 16px; font-size: 16px; }
  .footer-info-list li, .footer-link-list a, .footer-newsletter p { font-size: 13px; }
  .footer-subscribe { grid-template-columns: minmax(0,1fr) 44px; }
  .footer-subscribe button { width: 38px; height: 38px; }
  .footer-logo-card { width: 100%; }
  .footer-logo-card img { width: 190px; }
  .footer-bottom { margin-top: 34px; }
  .grid-2, .grid-3, .grid-4, .product-grid, .kpi-grid, .form-grid, .admin-form, .wp-product-grid { grid-template-columns: 1fr; }
  .section-head, .toolbar, .admin-topbar { align-items: stretch; flex-direction: column; }
  .field.full, .admin-form .full, .wp-product-grid .full { grid-column: auto; }
  .seo-checklist li { grid-template-columns: 12px 1fr; }
  .seo-checklist em { grid-column: 2; }
  .modal-editor-layout { grid-template-columns: 1fr; }
  .modal-toc { position: static; }
  .admin-nav { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .screen main .card::before, .screen main .product-card::before, .screen main .panel::before, .hero-visual::after, .news-media::after { display: none; }
  .logo-track { animation: none; }
  .training-orbit i { animation: none; }
  .training-module-media img, .training-mini-card, .training-course-card, .training-proof-item { transition: none; }
}

/* ============================================================
   E-commerce storefront UI
   ============================================================ */
.product-media { position: relative; }
.discount-badge { position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--red); color: #1b0410; font-weight: 700; font-size: 12px; padding: 4px 9px; border-radius: 999px; }
.product-rating { display: flex; align-items: center; gap: 6px; color: var(--yellow); font-size: 13px; margin: 2px 0 6px; }
.product-rating span { color: var(--muted); }
.price-compare { color: var(--muted); text-decoration: line-through; font-size: 14px; margin-left: 8px; }
.price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-block { width: 100%; margin-top: 8px; }
.narrow { max-width: 760px; }

/* Variant picker */
.variant-picker { margin: 14px 0; }
.variant-label { display: block; font-weight: 600; margin-bottom: 8px; color: var(--muted); }
.variant-options { display: flex; flex-wrap: wrap; gap: 10px; }
.variant-chip { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--text); border-radius: 12px; padding: 8px 14px; transition: border-color .25s, background-color .25s; }
.variant-chip small { color: var(--muted); font-size: 12px; }
.variant-chip.active { border-color: var(--primary); background: rgba(34,211,238,.12); }
.variant-chip.active small { color: var(--primary); }

/* Cart + checkout layout */
.cart-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .8fr); gap: 24px; align-items: start; }
.cart-lines { display: flex; flex-direction: column; gap: 10px; }
.cart-row { display: grid; grid-template-columns: 76px minmax(180px, 1fr) max-content minmax(112px, max-content) 44px; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.025); }
.cart-thumb { display: block; width: 76px; height: 76px; overflow: hidden; border-radius: 14px; background: rgba(255,255,255,.05); }
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.cart-info { min-width: 0; }
.cart-info strong { display: block; overflow-wrap: anywhere; }
.cart-line-total { font-weight: 700; min-width: 112px; text-align: right; white-space: nowrap; }
.cart-remove { color: var(--red); }
.qty { display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; }
.icon-btn { width: 36px; height: 36px; display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--text); }
.cart-summary { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 16px; }
.summary-block { display: flex; flex-direction: column; gap: 8px; }
.summary-label { font-weight: 600; color: var(--muted); }
.summary-totals { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.summary-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.summary-total { border-top: 1px solid var(--line); padding-top: 10px; font-size: 17px; }

/* Coupon */
.coupon-box { display: flex; gap: 8px; }
.coupon-box .field-control { flex: 1; }
.track-search { max-width: 640px; margin: 0 auto; align-items: center; gap: 10px; padding: 10px; border-radius: 16px; position: relative; }
.track-search-ico { display: grid; place-items: center; padding-left: 8px; color: var(--muted); }
.track-search .field-control { border: none; background: transparent; font-size: 15px; }
.track-search .field-control:focus { box-shadow: none; }
.track-search .btn-primary { white-space: nowrap; min-height: 46px; }
.track-search:focus-within { border-color: rgba(138,235,255,.4); box-shadow: 0 0 0 3px rgba(138,235,255,.12); }
/* Product swipe gallery */
.detail-gallery { display: grid; gap: 12px; align-content: start; }
.gallery-main { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.gallery-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-slide { flex: 0 0 100%; scroll-snap-align: center; margin: 0; aspect-ratio: 4 / 3; }
.gallery-slide img { width: 100%; height: 100%; object-fit: contain; background: #0b1220; }
.gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); background: rgba(7,13,31,.7); backdrop-filter: blur(8px); color: var(--text); z-index: 2; }
.gallery-nav:hover { background: rgba(7,13,31,.92); color: var(--primary); }
.gallery-nav.prev { left: 12px; }
.gallery-nav.next { right: 12px; }
.gallery-thumbs { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.gallery-thumbs::-webkit-scrollbar { display: none; }
.gallery-thumb { flex: 0 0 76px; width: 76px; height: 60px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; background: rgba(255,255,255,.04); padding: 0; cursor: pointer; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb.active { border-color: var(--primary); }
/* Admin gallery preview + large edit modal */
.admin-gallery-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.admin-gallery-preview img { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.modal.modal-lg { width: min(760px, 94vw); max-height: 88vh; overflow-y: auto; text-align: left; }
.admin-edit-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.admin-edit-form .field.full { grid-column: 1 / -1; }
.admin-edit-form label { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 5px; text-transform: capitalize; }
.admin-edit-page { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 22px; align-items: start; }
.admin-edit-sidebar { display: grid; gap: 14px; min-width: 0; }
.admin-edit-sidebar .admin-toc-box { position: sticky; top: 18px; }
.admin-edit-return { display: grid; gap: 10px; padding: 16px; }
.admin-edit-return .btn { width: 100%; justify-content: center; }
.admin-edit-form-page { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 24px; min-width: 0; overflow: hidden; }
.admin-edit-form-page .field { min-width: 0; }
.admin-edit-form-page .field.full { grid-column: 1 / -1; }
.admin-edit-form-page label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 12px; font-weight: 750; letter-spacing: .02em; text-transform: none; }
.admin-edit-form-page .admin-input,
.admin-edit-form-page .admin-select,
.admin-edit-form-page .admin-textarea { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.admin-edit-head { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.admin-edit-head h3 { margin-top: 5px; font-size: clamp(22px, 2.4vw, 32px); }
.admin-edit-actions { position: sticky; bottom: 0; z-index: 2; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 4px -24px -24px; padding: 16px 24px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(14px); }
/* AI Workplace solution bundles (3 gói) */
.wp-solutions { display: grid; gap: 34px; }
.wp-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; align-items: stretch; }
/* Intro cards */
.wp-intro-card { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 20px; border: 1px solid rgba(255,255,255,.08); background: rgba(16,26,46,.7); backdrop-filter: blur(18px); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.wp-intro-card:hover { transform: translateY(-4px); border-color: rgba(138,235,255,.4); box-shadow: 0 0 40px rgba(34,211,238,.14); }
.wp-intro-card.featured { border: 1px solid transparent; background: linear-gradient(rgba(16,26,46,.86), rgba(16,26,46,.86)) padding-box, linear-gradient(135deg, var(--primary), var(--accent)) border-box; }
.wp-intro-media { position: relative; height: 150px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); }
.wp-intro-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 14px; background: rgba(34,211,238,.12); color: var(--primary); }
.wp-intro-icon.lg { width: 62px; height: 62px; background: linear-gradient(135deg, var(--primary), var(--accent)); color: #00363e; }
.wp-play { position: absolute; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(7,13,31,.75); border: 1px solid rgba(138,235,255,.4); color: var(--primary); }
.wp-pill { position: absolute; bottom: 10px; right: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .05em; background: rgba(7,13,31,.82); border: 1px solid rgba(138,235,255,.35); color: var(--primary); }
.wp-intro-card h3 { font-size: 20px; }
.wp-intro-card.featured h3 { background: linear-gradient(90deg, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.wp-tagline { color: var(--muted); font-size: 14px; line-height: 1.6; flex: 1; }
.wp-intro-btn { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 8px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--primary); border: 1px solid rgba(138,235,255,.3); background: rgba(138,235,255,.06); }
.wp-platform { margin-top: 4px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.wp-platform span { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--muted); }
.wp-platform p { margin-top: 5px; font-size: 13px; color: var(--text); font-weight: 600; }
/* Plan (pricing) cards */
.wp-plan-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 30px 26px; border-radius: 22px; border: 1px solid rgba(255,255,255,.08); background: rgba(16,26,46,.7); backdrop-filter: blur(18px); overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; }
.wp-plan-card.featured { border: 1px solid transparent; background: linear-gradient(rgba(13,20,38,.92), rgba(13,20,38,.92)) padding-box, linear-gradient(135deg, var(--primary), var(--accent)) border-box; box-shadow: 0 0 50px rgba(34,211,238,.16); transform: translateY(-8px); }
.wp-ribbon { position: absolute; top: 16px; right: -34px; transform: rotate(45deg); width: 150px; text-align: center; padding: 5px 0; font-size: 10px; font-weight: 800; letter-spacing: .04em; color: #1b0410; background: linear-gradient(90deg, #f59e0b, #fbbf24); box-shadow: 0 6px 18px rgba(245,158,11,.3); }
.wp-plan-label { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--muted); }
.wp-plan-name { font-size: 24px; font-weight: 800; line-height: 1.15; }
.wp-plan-card.featured .wp-plan-name { background: linear-gradient(90deg, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.wp-plan-desc { color: var(--muted); font-size: 14px; line-height: 1.6; }
.wp-price-row { display: flex; align-items: flex-end; gap: 10px; margin-top: 6px; }
.wp-price { font-size: 34px; font-weight: 800; color: var(--text); line-height: 1; }
.wp-price.sm { font-size: 24px; color: var(--primary); }
.wp-price-unit { font-size: 12px; color: var(--muted); font-weight: 600; padding-bottom: 4px; }
.wp-plan-sub p { font-size: 12px; color: var(--muted); line-height: 1.5; }
.wp-plan-sub p.promo { color: #fbbf24; font-weight: 700; }
.wp-features { display: grid; gap: 14px; margin: 12px 0 6px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); }
.wp-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--text); line-height: 1.45; }
.wp-features li svg, .wp-features li i { color: var(--tertiary); flex: 0 0 auto; margin-top: 1px; }
.wp-cta { margin-top: auto; text-align: center; padding: 13px 20px; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: .02em; border: 1px solid var(--primary); color: var(--primary); transition: all .25s ease; }
.wp-cta:hover { transform: scale(1.02); }
.wp-plan-card.featured .wp-cta { background: linear-gradient(90deg, var(--primary), var(--accent)); color: #00363e; border-color: transparent; }
.wp-plan-card.featured .wp-cta:hover { box-shadow: 0 10px 30px rgba(34,211,238,.28); }
.wp-intro-video { cursor: pointer; padding: 0; width: 100%; font: inherit; color: inherit; }
.wp-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .4s ease, filter .3s ease; }
.wp-intro-video::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(7,13,31,.25), rgba(7,13,31,.55)); }
.wp-intro-video:hover .wp-poster { transform: scale(1.05); filter: brightness(1.05); }
.wp-intro-video .wp-play, .wp-intro-video .wp-pill { z-index: 2; }
.wp-intro-video:hover .wp-play { transform: scale(1.08); background: var(--primary); color: #00363e; }
.wp-play { transition: transform .25s ease, background .25s ease, color .25s ease; }
/* Video lightbox modal */
.modal.video-modal { width: min(880px, 94vw); padding: 0; background: transparent; box-shadow: none; border: none; text-align: center; }
.video-modal .video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; border: 1px solid rgba(138,235,255,.25); box-shadow: 0 30px 80px rgba(0,0,0,.6); background: #000; }
.video-modal .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-modal .video-close { position: absolute; top: -14px; right: -14px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(7,13,31,.9); color: #fff; font-size: 16px; cursor: pointer; }
.video-modal .video-close:hover { background: rgba(7,13,31,1); color: var(--primary); }
.video-modal .btn { margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; }
/* KHỐI A — Hero AI-First band */
.aifirst-band { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 80px; padding-bottom: 90px; }
.aifirst-band::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; z-index: 0; background: url('../../public/media/giai-phap-bg.svg') center/cover no-repeat; }
.aifirst-band::after { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; z-index: 0; pointer-events: none; background: linear-gradient(180deg, #0c1324 0%, rgba(12,19,36,.22) 12%, rgba(12,19,36,.05) 32%, rgba(12,19,36,.3) 56%, rgba(12,19,36,.72) 72%, #0c1324 86%, #0c1324 100%), linear-gradient(90deg, #0c1324 0%, rgba(12,19,36,0) 8%, rgba(12,19,36,0) 92%, #0c1324 100%); }
.aifirst-orb { display: none; }
.aifirst-band > *:not(.aifirst-orb) { position: relative; z-index: 1; }
.aifirst-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .16em; color: var(--primary); border: 1px solid rgba(138,235,255,.3); background: rgba(138,235,255,.06); }
.aifirst-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); animation: pulseDot 1.6s infinite; }
@keyframes pulseDot { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.aifirst-title { display: flex; flex-direction: column; gap: 2px; font-family: "Inter", "Be Vietnam Pro", "Geist", sans-serif; font-weight: 800; line-height: 1.18; letter-spacing: -.02em; }
.aifirst-title span { padding-top: .08em; }
.aifirst-title .l1 { font-size: clamp(30px, 5vw, 58px); color: var(--text); }
.aifirst-title .l2 { font-size: clamp(30px, 5vw, 58px); background: linear-gradient(90deg, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.aifirst-title .l3, .aifirst-title .l4 { font-size: clamp(34px, 6.5vw, 74px); text-transform: uppercase; background: linear-gradient(90deg, #a2eeff, var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.aifirst-desc { max-width: 620px; font-style: italic; color: var(--muted); font-size: 15px; line-height: 1.7; margin-top: 8px; }
.aifirst-desc .hl { color: var(--primary); font-style: italic; font-weight: 600; }
.aifirst-desc .hl-box { display: inline-block; white-space: nowrap; font-style: italic; padding: 2px 8px; border-radius: 6px; color: var(--accent); background: rgba(206,189,255,.1); border: 1px solid rgba(206,189,255,.25); }
@media (max-width: 560px) { .aifirst-desc .hl-box { white-space: normal; } }
.aifirst-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 8px; }
/* KHỐI B — Agent network + panel */
.solutions-banner { width: 100%; margin: 0; line-height: 0; }
.solutions-banner img { display: block; width: 100%; height: clamp(180px, 26vw, 340px); object-fit: cover; }
.agent-section { display: grid; gap: 30px; overflow: hidden; }
.agent-section > *,
.agent-logo-grid,
.agent-panels,
.agent-panel,
.agent-cols,
.agent-col,
.agent-tabs-row {
  min-width: 0;
  max-width: 100%;
}
.agent-underline { display: block; width: 90px; height: 4px; margin: 14px auto 0; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--accent)); }
.agent-logo-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 16px; }
.agent-logo { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 12px; border-radius: 16px; border: 1px solid rgba(255,255,255,.07); background: rgba(16,26,46,.55); text-align: center; transition: transform .3s ease, border-color .3s ease; }
.agent-logo:hover { transform: translateY(-4px); border-color: rgba(138,235,255,.4); }
.agent-logo-box { width: 100%; aspect-ratio: 3/2; border-radius: 12px; background: rgba(255,255,255,.9); display: grid; place-items: center; overflow: hidden; }
.agent-logo-box img { max-width: 76%; max-height: 70%; object-fit: contain; }
.agent-logo-box span { color: #0f172a; font-weight: 800; font-size: 12px; padding: 4px; }
.agent-logo h4 { font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.agent-logo p { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.agent-panel { position: relative; padding: 30px; border-radius: 24px; display: none; }
.agent-panel.active { display: block; animation: agentFade .4s cubic-bezier(.22,1,.36,1); }
@keyframes agentFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.agent-title { text-align: center; font-size: clamp(18px, 2.4vw, 26px); font-weight: 800; margin-bottom: 26px; }
.agent-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.agent-cols.agent-cols-3 { grid-template-columns: repeat(3, 1fr); }
.agent-subtitle { text-align: center; max-width: 720px; margin: -14px auto 26px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.agent-sublabel { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; margin: -8px 0 14px; text-align: center; }
.agent-item { display: flex; gap: 12px; align-items: flex-start; padding: 15px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); margin-bottom: 12px; }
.agent-item-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto; background: rgba(34,211,238,.1); color: var(--primary); }
.agent-item h5 { font-size: 14px; margin-bottom: 4px; }
.agent-item p { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.agent-stats { display: grid; gap: 4px; }
.agent-stat { text-align: center; padding: 18px 8px; border-bottom: 1px solid rgba(255,255,255,.07); }
.agent-stat:last-child { border-bottom: none; }
.agent-stat strong { display: block; font-size: 34px; font-weight: 900; line-height: 1; letter-spacing: -.02em; }
.agent-stat span { display: block; margin-top: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 920px) { .agent-cols.agent-cols-3 { grid-template-columns: 1fr; } }
.agent-label { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--muted); margin-bottom: 14px; }
.agent-col > .agent-label:first-child { color: var(--primary); }
.agent-barrier { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); margin-bottom: 12px; }
.agent-barrier h5 { font-size: 14px; margin-bottom: 4px; }
.agent-barrier p { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.agent-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; margin-top: 5px; }
.agent-dot.sm { display: inline-block; width: 7px; height: 7px; margin-right: 7px; }
.agent-barrier-ico { margin-left: auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(34,211,238,.1); color: var(--primary); flex: 0 0 auto; }
.agent-barrier-ico strong { font-size: 15px; color: var(--tertiary); }
.agent-plat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.agent-plat { padding: 14px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); color: var(--primary); }
.agent-plat h5 { font-size: 13px; margin: 8px 0 4px; color: var(--text); }
.agent-plat p { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.agent-protocol { border: 1px solid rgba(255,255,255,.08); border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
.agent-protocol-head { display: flex; align-items: center; gap: 8px; padding: 11px 14px; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--primary); background: rgba(138,235,255,.06); border-bottom: 1px solid rgba(255,255,255,.08); }
.agent-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.agent-table th { position: static; text-align: left; padding: 10px 14px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--primary); background: rgba(138,235,255,.05); border-bottom: 1px solid rgba(255,255,255,.08); }
.agent-table td { padding: 10px 14px; font-size: 12.5px; color: var(--text); border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: top; }
.agent-table td:last-child { color: var(--muted); }
.agent-table tr:last-child td { border-bottom: none; }
.agent-table th,
.agent-table td {
  overflow-wrap: anywhere;
}
.agent-connect { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--muted); }
.agent-conn { padding: 4px 11px; border-radius: 8px; font-size: 11px; font-weight: 700; color: var(--primary); background: rgba(138,235,255,.08); border: 1px solid rgba(138,235,255,.25); }
.agent-note { position: absolute; right: 22px; bottom: 18px; display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--accent); opacity: .7; }
.agent-tabs-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.agent-arrows { display: flex; gap: 8px; }
.agent-arrows button { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: var(--text); cursor: pointer; }
.agent-arrows button:hover { border-color: var(--primary); color: var(--primary); }
.agent-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.agent-tab { padding: 9px 18px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--muted); border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); cursor: pointer; transition: all .25s ease; }
.agent-tab:hover { color: var(--text); }
.agent-tab.active { background: linear-gradient(90deg, var(--primary), var(--accent)); color: #00363e; border-color: transparent; }
@media (max-width: 920px) { .agent-cols { grid-template-columns: 1fr; } .agent-logo-grid { grid-template-columns: repeat(3, 1fr); } .agent-plat-grid { grid-template-columns: 1fr; } .agent-tabs-row { justify-content: center; } }
@media (max-width: 560px) { .agent-logo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 920px) { .wp-grid { grid-template-columns: 1fr; } .wp-plan-card.featured { transform: none; order: -1; } .wp-intro-card.featured { order: -1; } }
/* Cinematic scroll-reveal entrance (site-wide).
   Fail-safe by default: content stays visible unless JS explicitly marks it pending. */
.reveal { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; }
.reveal.reveal-pending { opacity: 0; transform: translateY(26px); }
.reveal.reveal-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }
.coupon-error { color: var(--red); font-size: 13px; margin-top: 6px; }
.coupon-ok { color: var(--green); font-size: 13px; margin-top: 6px; }

/* Shipping + payment options */
.ship-options, .pay-options { display: flex; flex-direction: column; gap: 8px; }
.ship-option, .pay-option { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; transition: border-color .25s, background-color .25s; }
.ship-option.active, .pay-option.active { border-color: var(--primary); background: rgba(34,211,238,.1); }
.ship-option span { display: flex; flex-direction: column; flex: 1; }
.ship-option small { color: var(--muted); font-size: 12px; }
.ship-option em { font-style: normal; font-weight: 600; }
.payment-panels { margin-top: 12px; }
.payment-panel { display: grid; gap: 12px; border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: rgba(34,211,238,.06); color: var(--muted); }
.payment-panel[hidden] { display: none !important; }
.payment-panel strong { display: flex; align-items: center; gap: 8px; color: var(--text); }
.payment-panel p { margin: 0; line-height: 1.55; }
.payment-info-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.payment-info-list span { border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 10px; background: rgba(255,255,255,.035); }
.payment-info-list b { display: block; color: var(--muted); font-size: 12px; }
.payment-info-list em { display: block; color: var(--text); font-style: normal; font-weight: 600; }
.wallet-row { display: flex; flex-wrap: wrap; gap: 8px; }
.wallet-row span { border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; color: var(--text); background: rgba(255,255,255,.04); font-size: 12px; font-weight: 700; }
.payment-note { color: var(--primary); font-weight: 600; }

/* Order success + tracking */
.order-success { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.success-icon { color: var(--green); }
.order-steps { display: flex; justify-content: space-between; gap: 8px; margin: 16px 0; }
.order-step { flex: 1; text-align: center; position: relative; color: var(--muted); }
.order-step span { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--line); margin: 0 auto 6px; }
.order-step.done { color: var(--text); }
.order-step.done span { background: var(--primary); border-color: var(--primary); }
.order-step:not(:last-child)::after { content: ""; position: absolute; top: 8px; left: 60%; width: 80%; height: 2px; background: var(--line); }
.order-step.done:not(:last-child)::after { background: var(--primary); }

@media (max-width: 1180px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
}

@media (max-width: 640px) {
  .cart-row { grid-template-columns: 64px minmax(0, 1fr) 44px; gap: 12px; padding: 12px; }
  .cart-thumb { width: 64px; height: 64px; }
  .cart-info { align-self: center; }
  .qty { grid-column: 2 / 3; justify-content: flex-start; }
  .cart-line-total { grid-column: 2 / 3; min-width: 0; text-align: left; }
  .cart-remove { grid-column: 3; grid-row: 1 / span 3; align-self: center; justify-self: end; }
  .coupon-box { flex-direction: column; }
  .payment-info-list { grid-template-columns: 1fr; }
}

.detail-title { font-size: 28px; line-height: 1.2; margin-bottom: 4px; }

/* ============================================================
   Stitch design layer — NETALINK AI (cyan/purple, Geist)
   ============================================================ */
.orb-blur { position: fixed; filter: blur(80px); opacity: .15; z-index: 0; pointer-events: none; border-radius: 50%; }
.orb-1 { width: 500px; height: 500px; top: -260px; left: -130px; background: var(--primary); }
.orb-2 { width: 400px; height: 400px; top: 50%; right: -130px; background: var(--accent); }

/* Nav icon action buttons (person / cart / admin) */
.nav-icon-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--text); transition: background-color .3s ease, border-color .3s ease, transform .3s ease; }
.nav-icon-btn:hover { background: rgba(255,255,255,.1); transform: translateY(-1px); }
.nav-icon-btn .cart-count { position: absolute; transform: translate(14px,-14px); }
.nav-cart { position: relative; }

/* Hero AI console panel */
.hero-console { padding: 22px; }
.hero-console-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.hero-console-dots { display: flex; gap: 6px; }
.hero-console-dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.hero-console-mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }
.hero-status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.hero-status { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 12px; }
.hero-status p { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.hero-status strong { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.hero-layers { display: grid; gap: 10px; margin-bottom: 16px; }
.hero-layer { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 10px; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.hero-layer.l1 { background: rgba(138,235,255,.08); border: 1px solid rgba(138,235,255,.2); color: var(--primary); }
.hero-layer.l2 { background: rgba(206,189,255,.08); border: 1px solid rgba(206,189,255,.2); color: var(--accent); }
.hero-layer.l3 { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); color: var(--muted); }
.hero-terminal { height: 140px; overflow: hidden; border-radius: 10px; border: 1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.5); padding: 16px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; line-height: 1.7; color: rgba(138,235,255,.7); }
.hero-terminal .ok { color: var(--tertiary); }
.hero-terminal .warn { color: var(--yellow); }

/* Ticker strip */
.ticker-strip { width: 100vw; position: relative; left: 50%; margin-left: -50vw; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(21,27,45,.6); padding: 14px 0; margin-top: 40px; }
.ticker-track { display: flex; width: max-content; animation: tickerScroll 28s linear infinite; }
.ticker-track .grp { display: flex; align-items: center; gap: 48px; padding: 0 24px; }
.ticker-track .tk { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; white-space: nowrap; color: rgba(138,235,255,.7); }
.ticker-track .tk i { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Stats */
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; }
.stat { text-align: center; }
.stat h3 { font-size: 52px; font-weight: 800; line-height: 1; margin-bottom: 6px; }
.stat p { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* Bento */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; }
.bento-item { border-radius: 18px; padding: 28px; position: relative; overflow: hidden; }
.bento-8 { grid-column: span 8; }
.bento-4 { grid-column: span 4; }
.bento-item h3 { font-size: 22px; margin-bottom: 8px; }
.bento-item .icon-lg { font-size: 38px; margin-bottom: 14px; display: inline-block; }
.bento-item.panel { background: var(--surface-2); border: 1px solid rgba(255,255,255,.05); }
.section-head.center { justify-content: center; text-align: center; }
.section-head.center p.muted { max-width: 580px; margin: 8px auto 0; }
.beam-separator { height: 1px; max-width: 1200px; margin: 56px auto; background: linear-gradient(90deg, transparent, var(--primary-container), transparent); opacity: .35; }
.bento-hero { display: flex; flex-direction: column; min-height: 240px; }
.bento-hero > * { position: relative; z-index: 1; }
.bento-hero .bento-bg { position: absolute; right: -60px; bottom: -60px; width: 250px; height: 250px; object-fit: cover; border-radius: 50%; opacity: .16; z-index: 0; }
.bento-hero .bento-link { margin-top: auto; }
.bento-link { color: var(--primary); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.bento-stack { display: flex; flex-direction: column; }
.bento-ico { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.bento-ico.ac { background: rgba(206,189,255,.18); color: var(--accent); }
.bento-ico.te { background: rgba(97,246,185,.18); color: var(--tertiary); }
.bento-row { display: flex; gap: 26px; align-items: center; }
.bento-row .bento-box { flex: 0 0 120px; width: 120px; height: 120px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: rgba(34,211,238,.08); border: 1px solid rgba(34,211,238,.2); color: var(--primary-container); }
.bento-list { margin-top: 14px; display: grid; gap: 8px; }
.bento-list li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
.bento-list li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--primary-container); }
/* Course cards */
.course-card { position: relative; overflow: hidden; }
.course-card .course-ghost { position: absolute; right: -16px; top: -16px; opacity: .07; pointer-events: none; }
.course-card > * { position: relative; }
.icon-box.pr { background: rgba(138,235,255,.18); color: var(--primary); }
.icon-box.ac { background: rgba(206,189,255,.18); color: var(--accent); }
.icon-box.te { background: rgba(97,246,185,.18); color: var(--tertiary); }
.course-meta { display: flex; flex-wrap: wrap; gap: 16px; margin: 6px 0 4px; }
.course-meta span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
/* AI training page */
.training-hero { position: relative; min-height: 680px; margin-top: -88px; padding-top: 110px; display: flex; align-items: center; overflow: hidden; background: #020617; }
.training-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .22; filter: saturate(1.08) contrast(1.05); }
.training-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, var(--bg)), radial-gradient(circle at 18% 38%, rgba(34,211,238,.24), transparent 32%), radial-gradient(circle at 78% 24%, rgba(112,0,255,.18), transparent 34%), linear-gradient(90deg, rgba(2,6,23,.98), rgba(2,6,23,.82) 52%, rgba(2,6,23,.96)); }
.training-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .96fr) minmax(360px, .66fr); gap: clamp(34px, 5vw, 78px); align-items: center; padding: 64px 0 76px; }
.training-hero-copy { max-width: 820px; }
.training-hero-copy h1 { max-width: 900px; font-size: clamp(42px, 5.2vw, 76px); line-height: 1.02; font-weight: 500; }
.training-hero-copy p { max-width: 720px; margin-top: 20px; color: #b9c7dc; font-size: clamp(16px, 1.45vw, 20px); }
.training-pill { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; border: 1px solid rgba(138,235,255,.28); border-radius: 999px; padding: 8px 13px; background: rgba(16,26,46,.72); color: var(--primary); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.training-hero-panel { position: relative; min-height: 420px; display: grid; align-content: end; overflow: hidden; padding: 28px; border-radius: 32px; box-shadow: 0 34px 100px rgba(0,0,0,.45); }
.training-hero-panel::before { content: ""; position: absolute; inset: 28px; border: 1px solid rgba(138,235,255,.18); border-radius: 28px; background: linear-gradient(135deg, rgba(138,235,255,.08), rgba(206,189,255,.04)); transform: perspective(900px) rotateX(58deg) rotateZ(-18deg); transform-origin: 50% 70%; }
.training-orbit { position: absolute; inset: 50px; display: grid; place-items: center; }
.training-orbit span { position: relative; z-index: 2; display: grid; place-items: center; width: 112px; height: 112px; border: 1px solid rgba(138,235,255,.36); border-radius: 30px; background: linear-gradient(135deg, rgba(34,211,238,.92), rgba(206,189,255,.88)); color: var(--ink); font-size: 28px; font-weight: 800; box-shadow: 0 0 48px rgba(34,211,238,.28); }
.training-orbit i { position: absolute; width: min(70%, 310px); aspect-ratio: 1; border: 1px solid rgba(148,163,184,.14); border-radius: 36px; transform: rotate(45deg); }
.training-orbit i:nth-child(3) { width: min(52%, 230px); border-color: rgba(138,235,255,.2); animation: spinBeam 18s linear infinite; }
.training-orbit i:nth-child(4) { width: min(38%, 170px); border-color: rgba(206,189,255,.24); animation: spinBeam 14s linear reverse infinite; }
.training-hero-metrics { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.training-hero-metrics div { border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 14px; background: rgba(2,6,23,.42); backdrop-filter: blur(12px); }
.training-hero-metrics small { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.training-hero-metrics strong { color: #f8fafc; font-size: 15px; }
.training-catalog { display: grid; gap: 94px; padding-top: 90px; }
.training-home-catalog { display: block; padding-top: clamp(54px, 5.6vw, 86px); padding-bottom: clamp(28px, 4vw, 52px); }
.training-module { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1fr); gap: clamp(26px, 4vw, 58px); align-items: center; min-width: 0; }
.training-module > .training-mini-grid { grid-column: 1 / -1; }
.training-module-flip { align-items: start; }
.training-module-flip > .training-mini-grid { grid-column: auto; }
.training-module-media { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 26px; background: rgba(255,255,255,.04); box-shadow: var(--shadow); }
.training-module-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(138,235,255,.12), transparent 44%, rgba(206,189,255,.14)); opacity: .8; }
.training-module-media img { width: 100%; height: clamp(260px, 24vw, 420px); object-fit: contain; padding: 12px; background: rgba(255,255,255,.03); transition: transform .7s cubic-bezier(.22,1,.36,1), filter .7s ease; }
.training-module-media:hover img { transform: scale(1.035); filter: saturate(1.08); }
.training-module-media.inline { margin-bottom: 26px; box-shadow: none; }
.training-module-media.inline img { height: 210px; }
.training-module-copy { min-width: 0; }
.training-module-copy h2 { max-width: 780px; margin-top: 12px; font-size: clamp(30px, 3.6vw, 48px); font-weight: 500; overflow-wrap: anywhere; }
.training-module-copy p { max-width: 680px; margin-top: 14px; color: #b9c7dc; font-size: 17px; }
.training-tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.training-tag-row span { display: inline-flex; align-items: center; min-height: 28px; border-radius: 999px; padding: 4px 11px; background: rgba(206,189,255,.12); color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.training-tag-row small { color: var(--muted); font-size: 13px; }
.training-bullets { display: grid; gap: 13px; margin-top: 24px; padding: 0; }
.training-bullets li { list-style: none; display: flex; gap: 10px; align-items: flex-start; color: #dbeafe; }
.training-bullets svg { flex: 0 0 auto; margin-top: 3px; color: var(--primary); }
.training-bullets.purple svg { color: var(--accent); }
.training-bullets.green svg { color: var(--green); }
.training-mini-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.training-mini-card { min-height: 178px; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 22px; background: rgba(16,26,46,.62); box-shadow: 0 16px 42px rgba(0,0,0,.18); transition: transform .42s cubic-bezier(.22,1,.36,1), border-color .42s ease, background-color .42s ease; }
.training-mini-card:hover { transform: translateY(-5px); border-color: rgba(138,235,255,.36); background: rgba(20,35,60,.78); }
.training-mini-card strong { color: var(--primary); font-size: 13px; letter-spacing: .08em; }
.training-mini-card.purple strong { color: var(--accent); }
.training-mini-card h4 { margin-top: 14px; color: #f8fafc; font-size: 18px; font-weight: 600; }
.training-mini-card p { margin-top: 8px; color: var(--muted); font-size: 14px; }
.training-mini-card small { margin-top: auto; padding-top: 18px; color: #8291a8; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ai-module { align-items: start; }
.ai-module > .training-course-grid { grid-column: 1 / -1; }
.training-timeline-card { position: relative; overflow: hidden; min-width: 0; border: 1px solid rgba(97,246,185,.18); border-radius: 28px; padding: 28px; background: linear-gradient(135deg, rgba(16,26,46,.86), rgba(21,27,45,.7)); box-shadow: var(--shadow); }
.training-timeline-card::before { content: ""; position: absolute; inset: -1px; background: linear-gradient(135deg, rgba(97,246,185,.14), transparent 42%, rgba(138,235,255,.1)); pointer-events: none; }
.training-timeline-card > * { position: relative; z-index: 1; }
.training-timeline-head { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 26px; }
.training-timeline-head h3 { font-size: 24px; font-weight: 500; }
.training-timeline-head span { border-radius: 999px; padding: 5px 10px; background: rgba(97,246,185,.12); color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.training-timeline { position: relative; display: grid; gap: 18px; }
.training-timeline::before { content: ""; position: absolute; left: 23px; top: 16px; bottom: 16px; width: 1px; background: rgba(255,255,255,.1); }
.training-step { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; }
.training-step strong { z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid rgba(97,246,185,.52); border-radius: 999px; background: var(--surface); color: var(--green); font-size: 14px; }
.training-step div { border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 15px; background: rgba(255,255,255,.04); }
.training-step h4 { color: #f8fafc; font-size: 15px; font-weight: 600; }
.training-step p { margin-top: 4px; color: var(--muted); font-size: 13px; }
.training-course-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; min-width: 0; }
.training-course-card { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 24px; background: rgba(16,26,46,.72); transition: transform .42s cubic-bezier(.22,1,.36,1), border-color .42s ease, box-shadow .42s ease; }
.training-course-card:hover { transform: translateY(-5px); border-color: rgba(138,235,255,.38); box-shadow: 0 24px 58px rgba(37,99,235,.12); }
.training-course-card h3 { font-size: 22px; font-weight: 600; }
.training-course-card p { margin-top: 10px; color: var(--muted); }
.training-course-card .btn { margin-top: 18px; }
.training-table-section { padding-top: 92px; }
.training-table-wrap { overflow-x: auto; border: 1px solid rgba(255,255,255,.1); border-radius: 22px; background: rgba(16,26,46,.62); box-shadow: 0 16px 42px rgba(0,0,0,.18); }
.training-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.training-table th, .training-table td { padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.07); text-align: left; }
.training-table th { color: var(--muted); background: rgba(255,255,255,.04); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.training-table td { color: #dbeafe; font-size: 14px; }
.training-table td:nth-child(2) { color: var(--muted); }
.training-table tr:last-child td { border-bottom: 0; }
.training-table tr { transition: background-color .28s ease; }
.training-table tbody tr:hover { background: rgba(255,255,255,.04); }
.training-proof-band { position: relative; left: 50%; width: 100vw; margin: 94px 0 0 -50vw; padding: 84px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(2,6,23,.35), rgba(3,7,18,.92)); }
.training-proof-grid { margin-top: 34px; }
.training-proof-item { min-height: 220px; border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 24px; background: rgba(16,26,46,.55); text-align: center; transition: transform .42s cubic-bezier(.22,1,.36,1), border-color .42s ease; }
.training-proof-item:hover { transform: translateY(-5px); border-color: rgba(138,235,255,.34); }
.training-proof-item .icon-box { margin: 0 auto 16px; border-radius: 999px; }
.training-proof-item p { margin-top: 10px; color: var(--muted); font-size: 14px; }
.training-cta { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 28px; overflow: hidden; border: 1px solid rgba(138,235,255,.22); border-radius: 30px; padding: clamp(26px, 4vw, 48px); background: radial-gradient(circle at 0% 0%, rgba(34,211,238,.18), transparent 42%), linear-gradient(135deg, rgba(16,26,46,.92), rgba(21,27,45,.7)); box-shadow: var(--shadow); }
.training-cta h2 { max-width: 760px; font-weight: 500; }
.training-cta p { max-width: 680px; margin-top: 12px; color: var(--muted); }
@media (max-width: 1080px) {
  .training-hero-inner, .training-module, .training-module-flip, .ai-module { grid-template-columns: 1fr; }
  .training-module-flip > .training-mini-grid { grid-column: 1 / -1; }
  .training-mini-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .training-course-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .training-cta { grid-template-columns: 1fr; }
}
@media (max-width: 740px) {
  .training-hero { min-height: 620px; margin-top: -132px; padding-top: 150px; }
  .training-hero-inner { padding: 42px 0 54px; }
  .training-hero-copy h1 { font-size: clamp(36px, 11vw, 52px); }
  .training-hero-panel { min-height: 320px; border-radius: 24px; }
  .training-hero-metrics { grid-template-columns: 1fr; }
  .training-catalog { gap: 64px; padding-top: 62px; }
  .training-module-media img { height: 238px; }
  .training-mini-grid, .training-course-grid { grid-template-columns: 1fr; }
  .training-mini-card { min-height: 0; }
  .training-timeline-head { align-items: flex-start; flex-direction: column; }
  .training-table-section { padding-top: 64px; }
  .training-proof-band { margin-top: 68px; padding: 62px 0; }
  .training-cta .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .training-orbit i { animation: none; }
  .training-module-media img, .training-mini-card, .training-course-card, .training-proof-item { transition: none; }
}
/* News redesign */
.news-layout { display: grid; grid-template-columns: 260px 1fr; gap: 34px; align-items: start; }
.news-sidebar { position: sticky; top: 100px; display: grid; gap: 20px; }
.news-side-title { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.news-cat-list { display: grid; gap: 4px; }
.news-cat { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 10px; color: var(--muted); font-size: 14px; transition: background .2s, color .2s; }
.news-cat span { display: inline-flex; align-items: center; gap: 10px; }
.news-cat:hover { background: rgba(255,255,255,.04); color: var(--text); }
.news-cat.active { background: rgba(206,189,255,.1); color: var(--accent); border-left: 3px solid var(--accent); }
.news-cat b { font-size: 12px; opacity: .7; }
.news-newsletter { padding: 22px; border-radius: 16px; }
.news-newsletter p { color: var(--muted); font-size: 13px; line-height: 1.6; margin-bottom: 14px; }
.news-main { display: grid; gap: 26px; }
.news-head h2 { font-size: clamp(24px,3vw,34px); margin-top: 4px; }
.news-head .muted { margin-top: 8px; }
.news-featured { position: relative; display: block; height: 420px; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); }
.news-featured img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.news-featured:hover img { transform: scale(1.04); }
.news-featured-body { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 36px; background: linear-gradient(180deg, transparent 0%, rgba(12,19,36,.94) 100%); }
.news-featured-body h2 { font-size: clamp(22px,2.6vw,34px); color: #fff; max-width: 620px; line-height: 1.22; }
.news-featured-body p { color: var(--text); max-width: 560px; font-size: 15px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-featured-tags { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.news-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 8px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: rgba(7,13,31,.7); border: 1px solid rgba(138,235,255,.3); color: var(--primary); }
.news-badge.primary { background: var(--primary); color: #00363e; border: none; }
.news-badge.ghost { background: rgba(97,246,185,.12); border-color: rgba(97,246,185,.3); color: var(--tertiary); }
.news-meta { font-size: 12px; color: var(--muted); font-weight: 600; }
.news-feed { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.news-feed-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: rgba(16,26,46,.6); backdrop-filter: blur(14px); transition: border-color .3s, transform .3s; }
.news-feed-card:hover { border-color: rgba(138,235,255,.4); transform: translateY(-3px); }
.news-feed-media { position: relative; display: block; height: 200px; overflow: hidden; }
.news-feed-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.news-feed-card:hover .news-feed-media img { transform: scale(1.06); }
.news-feed-media .news-badge { position: absolute; top: 14px; left: 14px; }
.news-feed-body { display: flex; flex-direction: column; gap: 10px; padding: 22px; flex: 1; }
.news-feed-body h3 { font-size: 18px; line-height: 1.35; }
.news-feed-body h3 a { color: var(--text); }
.news-feed-card:hover .news-feed-body h3 a { color: var(--primary); }
.news-feed-body p { color: var(--muted); font-size: 14px; line-height: 1.6; }
.news-feed-link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-weight: 700; font-size: 13px; }
@media (max-width: 980px) { .news-layout { grid-template-columns: 1fr; } .news-sidebar { position: static; grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .news-feed { grid-template-columns: 1fr; } .news-sidebar { grid-template-columns: 1fr; } .news-featured { height: 340px; } .news-featured-body { padding: 22px; } }

@media (max-width: 900px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-8, .bento-4 { grid-column: span 12; }
  .hero-status-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .bento-row { flex-direction: column; align-items: flex-start; }
}

/* ═══════════ HOME · NEWS (glass cards) ═══════════ */
.news2-head { display: flex; flex-direction: column; gap: 18px; margin-bottom: 36px; }
.news2-kicker { display: inline-block; padding: 5px 13px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); background: rgba(138,235,255,.1); border: 1px solid rgba(138,235,255,.22); }
.news2-head h2 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; line-height: 1.2; margin-top: 14px; }
.news2-viewall { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 999px; border: 1px solid var(--line); color: var(--text); font-weight: 600; white-space: nowrap; transition: border-color .3s ease, background-color .3s ease; }
.news2-viewall:hover { border-color: rgba(138,235,255,.5); background: rgba(255,255,255,.04); }
.news2-viewall svg { color: var(--primary); transition: transform .3s ease; }
.news2-viewall:hover svg { transform: translateX(3px); }
@media (min-width: 768px) { .news2-head { flex-direction: row; align-items: flex-end; justify-content: space-between; } }

.news2-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px) { .news2-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .news2-grid { grid-template-columns: repeat(3, 1fr); } }

.news2-card { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: rgba(16,26,46,.4); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.1); transition: transform .3s cubic-bezier(.4,0,.2,1), border-color .3s ease, box-shadow .3s ease, background-color .3s ease; }
.news2-card:hover { transform: translateY(-4px); border-color: rgba(138,235,255,.3); box-shadow: 0 10px 30px -10px rgba(34,211,238,.28); background: rgba(25,31,49,.6); }
.news2-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.news2-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.2); transition: transform .5s ease, filter .5s ease; }
.news2-card:hover .news2-media img { transform: scale(1.05); filter: grayscale(0); }
.news2-badge { position: absolute; top: 14px; left: 14px; padding: 5px 9px; border-radius: 5px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; backdrop-filter: blur(8px); }
.news2-badge.cyan { background: rgba(138,235,255,.85); color: #06121f; }
.news2-badge.purple { background: rgba(206,189,255,.85); color: #1a1230; }
.news2-badge.teal { background: rgba(77,224,130,.85); color: #00210c; }
.news2-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 22px; }
.news2-body h3 { font-size: 18px; font-weight: 700; line-height: 1.4; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 50px; }
.news2-body h3 a { color: var(--text); transition: color .3s ease; }
.news2-card:hover .news2-body h3 a { color: var(--primary); }
.news2-body > p { color: var(--muted); font-size: 14px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 20px; }
.news2-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; justify-content: space-between; }
.news2-date { font-size: 12px; color: var(--muted); opacity: .7; }
.news2-more { display: inline-flex; align-items: center; gap: 4px; color: var(--primary); font-weight: 700; font-size: 12px; letter-spacing: .04em; transition: gap .3s ease; }
.news2-more:hover { gap: 9px; }

/* Trang 404 */
.notfound { text-align: center; padding: 90px 0; }
.notfound .kicker { justify-content: center; display: inline-flex; }
.notfound h1 { font-size: clamp(32px, 5vw, 56px); font-weight: 800; margin: 12px 0 14px; }
.notfound .lead { max-width: 520px; margin: 0 auto 26px; color: var(--muted); }
.notfound .actions { justify-content: center; }

/* Honeypot chống bot — ẩn hoàn toàn khỏi người dùng */
.hp-field { position: fixed !important; inset: 0 auto auto 0 !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; clip-path: inset(50%) !important; overflow: hidden !important; }

/* ═══════════ NEWS · BẢN TIN NỔI BẬT ═══════════ */
.news-highlight-wrap { padding-top: 26px; padding-bottom: 0; }
.news-highlight { position: relative; display: block; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); text-decoration: none; color: inherit; box-shadow: 0 18px 44px -26px rgba(34,211,238,.35); }
.news-highlight img { display: block; width: 100%; height: clamp(210px, 24vw, 264px); object-fit: cover; object-position: var(--nh-pos, center bottom); transition: transform .5s ease; }
.news-highlight:hover img { transform: scale(1.03); }
.news-highlight::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,12,25,.94) 0%, rgba(6,12,25,.66) 40%, rgba(6,12,25,.12) 74%, transparent 100%); }
.news-highlight-body { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 20px 28px; max-width: 620px; }
.news-highlight-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #06121f; background: var(--gradient); }
.news-highlight-body h2 { font-size: clamp(16px, 1.9vw, 23px); line-height: 1.3; font-weight: 800; color: #fff; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-highlight-time { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-size: 13px; font-weight: 600; }
.news-highlight-cta { align-self: flex-start; margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 999px; background: #e11d2a; color: #fff; font-weight: 700; font-size: 14px; }
.news-highlight:hover .news-highlight-cta { filter: brightness(1.08); }
@media (max-width: 640px) { .news-highlight::after { background: linear-gradient(0deg, rgba(6,12,25,.95) 0%, rgba(6,12,25,.55) 52%, rgba(6,12,25,.12) 100%); } .news-highlight-body { justify-content: flex-end; max-width: none; padding: 18px 20px; } }

/* ═══════════ TEMPLATE LIBRARY ═══════════ */
.tmpl-head { text-align: center; }
.tmpl-head h1 { font-size: clamp(28px, 3.6vw, 44px); font-weight: 800; margin: 12px 0 14px; }
.tmpl-head .lead { max-width: 720px; margin: 0 auto; color: var(--muted); }
.tmpl-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.tmpl-cats span { padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--primary); background: rgba(138,235,255,.08); border: 1px solid rgba(138,235,255,.22); }
.tmpl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tmpl-card { display: flex; flex-direction: column; padding: 26px 24px; border-radius: 18px; background: var(--surface); border: 1px solid rgba(255,255,255,.07); transition: transform .3s cubic-bezier(.22,.61,.36,1), border-color .3s ease, box-shadow .3s ease; }
.tmpl-card:hover { transform: translateY(-4px); border-color: rgba(138,235,255,.3); box-shadow: 0 18px 44px -28px rgba(138,235,255,.5); }
.tmpl-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.tmpl-ico { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--primary); background: rgba(138,235,255,.08); border: 1px solid rgba(138,235,255,.16); }
.tmpl-cat { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); padding: 4px 10px; border-radius: 999px; background: rgba(206,189,255,.1); border: 1px solid rgba(206,189,255,.24); }
.tmpl-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.tmpl-card p { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin-bottom: 20px; flex: 1 1 auto; }
.tmpl-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--primary); }
.tmpl-link:hover { gap: 9px; }
.tmpl-cta { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; padding: 36px; border-radius: 22px; border: 1px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--gradient) border-box; }
.tmpl-cta h2 { font-size: clamp(20px, 2.4vw, 28px); margin-bottom: 8px; }
.tmpl-cta p { color: var(--muted); }
@media (min-width: 768px) { .tmpl-cta { flex-direction: row; align-items: center; justify-content: space-between; } }
@media (max-width: 980px) { .tmpl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .tmpl-grid { grid-template-columns: 1fr; } }

/* Tabs + filter */
.tmpl-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 26px; }
.tmpl-tab { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--muted); font-weight: 700; font-size: 14px; cursor: pointer; transition: all .3s ease; }
.tmpl-tab:hover { color: var(--text); border-color: rgba(138,235,255,.35); }
.tmpl-tab.active { color: #06121f; background: var(--gradient); border-color: transparent; }
.tmpl-panel { display: none; }
.tmpl-panel.active { display: block; animation: agentFade .4s ease; }
.tmpl-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 22px; }
.tmpl-chip { padding: 7px 15px; border-radius: 999px; border: 1px solid rgba(138,235,255,.22); background: rgba(138,235,255,.06); color: var(--primary); font-weight: 700; font-size: 13px; cursor: pointer; transition: all .25s ease; }
.tmpl-chip:hover { background: rgba(138,235,255,.12); }
.tmpl-chip.active { color: #06121f; background: var(--primary); border-color: transparent; }
.tmpl-group { margin-bottom: 30px; }
.tmpl-group-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.07); }

/* Detail page */
.tmpl-detail { max-width: 860px; }
.tmpl-detail-head { margin: 18px 0 24px; }
.tmpl-detail-head h1 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; margin: 12px 0 12px; line-height: 1.2; }
.tmpl-detail-head .lead { color: var(--muted); max-width: 680px; }
.tmpl-prompt-wrap { position: relative; border: 1px solid var(--line); border-radius: 16px; background: rgba(16,26,46,.5); overflow: hidden; }
.tmpl-prompt-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--muted); }
.tmpl-copy { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--text); font-size: 12.5px; cursor: pointer; transition: all .25s ease; }
.tmpl-copy:hover { border-color: rgba(138,235,255,.4); color: var(--primary); }
.tmpl-prompt { margin: 0; padding: 18px; max-height: 320px; overflow: hidden; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 13.5px; line-height: 1.75; color: var(--text); -webkit-mask-image: linear-gradient(180deg, #000 66%, transparent); mask-image: linear-gradient(180deg, #000 66%, transparent); }
.tmpl-prompt-wrap.unlocked .tmpl-prompt { max-height: none; -webkit-mask-image: none; mask-image: none; }
.tmpl-lockbar { padding: 12px 16px; text-align: center; color: var(--accent); font-weight: 600; font-size: 13px; border-top: 1px dashed rgba(255,255,255,.14); display: inline-flex; align-items: center; gap: 6px; width: 100%; justify-content: center; }

/* Gate form */
.tmpl-gate { margin-top: 18px; padding: 24px; border-radius: 18px; border: 1px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--gradient) border-box; }
.tmpl-gate-title { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; color: #fff; }
.tmpl-gate .muted { margin: 6px 0 16px; }
.tmpl-gate-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.tmpl-gate-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.tmpl-gate-alt { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-weight: 700; font-size: 14px; }
@media (max-width: 640px) { .tmpl-gate-row { grid-template-columns: 1fr; } .tmpl-tab { padding: 9px 15px; font-size: 13px; } }

/* 2 khối kết quả (cơ bản / nâng cao) */
.tmpl-results { margin-top: 40px; }
.tmpl-results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tmpl-result { display: flex; flex-direction: column; padding: 20px; border-radius: 16px; background: var(--surface); border: 1px solid rgba(255,255,255,.08); }
.tmpl-result.advanced { border: 1px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--gradient) border-box; box-shadow: 0 20px 50px -30px rgba(206,189,255,.5); }
.tmpl-result-tag { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 5px 11px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: rgba(255,255,255,.05); margin-bottom: 12px; }
.tmpl-result-tag.pro { color: #06121f; background: var(--gradient); }
.tmpl-result pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 14px; line-height: 1.7; color: var(--text); }
.tmpl-result-cta { margin-top: 16px; align-self: flex-start; }
@media (max-width: 760px) { .tmpl-results-grid { grid-template-columns: 1fr; } }

/* ═══════════ HOME · AI ENABLEMENT REDESIGN ═══════════ */
.punch-line { text-align: center; font-size: clamp(20px, 2.6vw, 30px); font-weight: 800; letter-spacing: -.01em; margin: 40px auto 0; max-width: 900px; line-height: 1.35; }
.center-actions { display: flex; justify-content: center; margin-top: 36px; }
.section-head.center {
  position: relative;
  justify-content: center;
  text-align: center;
  padding: clamp(18px, 2.4vw, 34px) 0 4px;
  margin-bottom: clamp(30px, 4vw, 48px);
  isolation: isolate;
}
.section-head.center::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -18px;
  z-index: -1;
  width: min(760px, 92vw);
  height: 190px;
  transform: translateX(-50%);
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(138,235,255,.16), transparent 64%),
    linear-gradient(90deg, transparent, rgba(138,235,255,.1), rgba(206,189,255,.1), transparent);
  filter: blur(.2px);
  opacity: .85;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%);
}
.section-head.center > div { position: relative; max-width: 940px; margin: 0 auto; }
.section-head.center .kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  margin-bottom: 14px;
  border: 1px solid rgba(138,235,255,.28);
  border-radius: 999px;
  padding: 6px 14px;
  color: #8aebff;
  background: rgba(138,235,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 30px rgba(34,211,238,.08);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
}
.section-head.center .kicker::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 16px rgba(138,235,255,.75);
}
.section-head.center h2 {
  white-space: normal;
  text-wrap: balance;
  background: linear-gradient(90deg, #f8fafc 8%, #9befff 48%, #cec2ff 88%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 18px 46px rgba(2,6,23,.42);
}
.section-head.center h2::after {
  content: "";
  display: block;
  width: clamp(64px, 8vw, 116px);
  height: 3px;
  margin: 18px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent);
  box-shadow: 0 0 22px rgba(138,235,255,.36);
}
.section-head.center p.muted {
  max-width: 660px;
  margin: 14px auto 0;
  color: #aeb8c9;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.7;
}
@media (max-width: 740px) {
  .section-head.center,
  .section-head.center > div {
    width: 100%;
    min-width: 0;
  }
  .section-head.center h2 {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

/* Badge icon + đường chấm mờ dần 2 bên (kiểu header mẫu) */
.sec-badge-row { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 14px; }
.sec-badge-row::before, .sec-badge-row::after { content: ""; flex: 1 1 auto; max-width: 230px; height: 6px; background-image: radial-gradient(circle, rgba(138,235,255,.55) 1.5px, transparent 1.6px); background-size: 12px 6px; background-position: center; background-repeat: repeat-x; }
.sec-badge-row::before { -webkit-mask-image: linear-gradient(90deg, transparent, #000); mask-image: linear-gradient(90deg, transparent, #000); }
.sec-badge-row::after { -webkit-mask-image: linear-gradient(90deg, #000, transparent); mask-image: linear-gradient(90deg, #000, transparent); }
.sec-badge { flex: 0 0 auto; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; color: var(--primary); border: 2px solid transparent; background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--gradient) border-box; box-shadow: 0 0 34px -6px rgba(138,235,255,.45), inset 0 0 22px -10px rgba(206,189,255,.5); }
@media (max-width: 560px) { .sec-badge-row { gap: 12px; } .sec-badge { width: 54px; height: 54px; } .sec-badge-row::before, .sec-badge-row::after { max-width: 120px; } }

/* Hero pipeline chips */
.pipe-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 2px 0 20px; }
.pipe-chip { display: inline-flex; align-items: center; padding: 7px 15px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--text); background: rgba(138,235,255,.06); border: 1px solid rgba(138,235,255,.22); }
.pipe-arrow { color: var(--primary); opacity: .7; display: inline-flex; }

/* S2 Problem */
.problem-panel { padding: 14px 22px; border-radius: 22px; }
.problem-row { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: center; gap: 14px; padding: 16px 6px; border-bottom: 1px solid rgba(255,255,255,.06); }
.problem-row:last-child { border-bottom: 0; }
.problem-ico { display: inline-flex; color: var(--yellow); }
.problem-cause { font-weight: 700; color: var(--text); }
.problem-arrow { display: inline-flex; color: var(--primary); opacity: .8; }
.problem-effect { color: var(--muted); }

/* S3 Positioning */
.position-panel { position: relative; display: grid; grid-template-columns: 1.4fr .9fr; gap: 30px; align-items: center; padding: 44px; border-radius: 26px; border: 1px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--gradient) border-box; overflow: hidden; }
.position-text h2 { margin: 6px 0 14px; font-size: clamp(24px, 3vw, 36px); }
.position-text p { color: var(--muted); max-width: 640px; margin-bottom: 22px; }
.position-mark { position: relative; display: flex; justify-content: center; align-items: center; color: var(--primary); opacity: .9; }
.position-orb { position: absolute; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(206,189,255,.4), transparent 70%); filter: blur(30px); }

/* S4 Framework */
.fw-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.fw-card { position: relative; padding: 26px 22px; border-radius: 20px; background: var(--surface); border: 1px solid rgba(255,255,255,.07); overflow: hidden; transition: transform .3s cubic-bezier(.22,.61,.36,1), border-color .3s; }
.fw-card:hover { transform: translateY(-4px); border-color: rgba(138,235,255,.3); }
.fw-card .fw-num { position: absolute; top: 6px; right: 14px; font-size: 58px; font-weight: 800; line-height: 1; color: rgba(255,255,255,.045); }
.fw-card h3 { margin: 14px 0 8px; font-size: 19px; }
.fw-card p { color: var(--muted); font-size: 14.5px; }

/* S5 Roles */
.roles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.role-card { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--surface); border: 1px solid rgba(255,255,255,.07); text-decoration: none; color: inherit; transition: transform .3s cubic-bezier(.22,.61,.36,1), border-color .3s, box-shadow .3s; }
.role-card:hover { transform: translateY(-6px); border-color: rgba(138,235,255,.34); box-shadow: 0 22px 50px -30px rgba(138,235,255,.5); }
.role-media { height: 150px; display: flex; align-items: center; justify-content: center; color: #fff; position: relative; }
.role-card.cyan .role-media { background: linear-gradient(135deg, rgba(138,235,255,.28), rgba(138,235,255,.05)); }
.role-card.purple .role-media { background: linear-gradient(135deg, rgba(206,189,255,.3), rgba(206,189,255,.05)); }
.role-card.teal .role-media { background: linear-gradient(135deg, rgba(45,212,191,.26), rgba(45,212,191,.05)); }
.role-media svg { opacity: .92; transition: transform .4s ease; }
.role-card:hover .role-media svg { transform: scale(1.12); }
.role-media.has-img { overflow: hidden; }
.role-media.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.role-card:hover .role-media.has-img img { transform: scale(1.06); }
.role-body { padding: 22px 22px 26px; }
.role-body h3 { font-size: 18px; margin-bottom: 8px; }
.role-body p { color: var(--muted); font-size: 14.5px; margin-bottom: 16px; }
.role-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--primary); font-size: 14px; }

/* S6 Devices */
.device-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.device-card { position: relative; padding: 30px 26px; border-radius: 22px; background: var(--surface); border: 1px solid rgba(255,255,255,.07); transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.device-card:hover { transform: translateY(-5px); }
.device-card.featured { border: 1px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--gradient) border-box; box-shadow: 0 24px 60px -34px rgba(138,235,255,.55); }
.device-ribbon { position: absolute; top: 18px; right: 18px; padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #06121f; background: var(--gradient); }
.device-card h3 { margin: 16px 0 10px; font-size: 20px; }
.device-card p { color: var(--muted); font-size: 14.5px; margin-bottom: 20px; }

/* S7 Training */
.train-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.train-card { position: relative; padding: 28px 24px; border-radius: 20px; background: var(--surface); border: 1px solid rgba(255,255,255,.07); transition: transform .3s cubic-bezier(.22,.61,.36,1), border-color .3s; }
.train-card:hover { transform: translateY(-4px); border-color: rgba(206,189,255,.3); }
.train-dur { position: absolute; top: 22px; right: 22px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--accent); background: rgba(206,189,255,.1); border: 1px solid rgba(206,189,255,.24); }
.train-card h3 { margin: 16px 0 8px; font-size: 18px; }
.train-card p { color: var(--muted); font-size: 14.5px; }

/* S10 Consult */
.home-consult { position: relative; margin-top: 0; padding: 100px 0 96px; overflow: hidden; background: radial-gradient(120% 78% at 18% 12%, rgba(138,235,255,.13), transparent 55%), radial-gradient(120% 88% at 86% 88%, rgba(206,189,255,.16), transparent 55%), var(--bg); }
.home-consult::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(680px, 80%); height: 1px; z-index: 2; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(138,235,255,.4), rgba(206,189,255,.4), transparent); }
.consult-orb { position: absolute; border-radius: 50%; filter: blur(60px); z-index: 0; }
.consult-orb-1 { width: 300px; height: 300px; top: -60px; left: -40px; background: rgba(138,235,255,.18); }
.consult-orb-2 { width: 340px; height: 340px; bottom: -80px; right: -50px; background: rgba(206,189,255,.16); }
.consult-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.1fr; gap: 44px; align-items: center; }
.consult-head h2 { font-size: clamp(26px, 3.2vw, 40px); margin: 8px 0 14px; line-height: 1.2; }
.consult-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 30px; border-radius: 24px; }
.cf-field { display: flex; flex-direction: column; gap: 7px; }
.cf-field.full { grid-column: 1 / -1; }
.cf-field label { font-size: 13px; font-weight: 600; color: var(--muted); }
.btn-block { width: 100%; justify-content: center; }

@media (max-width: 980px) {
  .fw-grid { grid-template-columns: repeat(2, 1fr); }
  .roles-grid, .device-grid, .train-grid { grid-template-columns: 1fr; }
  .position-panel { grid-template-columns: 1fr; }
  .position-mark { display: none; }
  .consult-inner { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 620px) {
  .fw-grid { grid-template-columns: 1fr; }
  .consult-form { grid-template-columns: 1fr; padding: 22px; }
  .problem-row { grid-template-columns: auto 1fr; row-gap: 4px; }
  .problem-arrow { display: none; }
  .problem-effect { grid-column: 2; }
}

/* ═══════════ ADMIN · CONTENT EDITOR ═══════════ */
.content-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.content-tab { padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--muted); border: 1px solid var(--line); background: rgba(255,255,255,.03); text-decoration: none; }
.content-tab.active { color: var(--ink); background: var(--gradient); border-color: transparent; }
.content-form { display: flex; flex-direction: column; gap: 18px; }
.content-actionbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cf-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; padding: 20px 22px 24px; }
.cf-row { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.cf-row.full { grid-column: 1 / -1; }
.cf-row > label { display: block; padding-left: 2px; font-size: 13px; font-weight: 600; line-height: 1.35; color: #64748b; }
.cf-row > label em { font-weight: 400; opacity: .7; font-style: normal; }
.cf-check { flex-direction: row; align-items: center; gap: 8px; }
.cf-body .admin-input, .cf-body .admin-textarea, .cf-body .admin-select { width: 100%; min-height: 46px; border-color: #9ca3af; border-radius: 8px; padding: 11px 14px; line-height: 1.55; }
.cf-body .admin-textarea { min-height: 122px; resize: vertical; }
.cf-group { grid-column: 1 / -1; border: 1px solid #d7dde6; border-radius: 14px; padding: 18px 18px 20px; margin: 2px 0; background: #fbfdff; }
.cf-group > legend { padding: 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #2271b1; }
.cf-group .cf-row, .cf-group .cf-group { }
.cf-group > .cf-row, .cf-group > .cf-group { display: grid; }
.cf-group { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
.cf-group > legend { grid-column: 1 / -1; }
.cf-group > .cf-row.full, .cf-group > .cf-group { grid-column: 1 / -1; }
.cf-mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12.5px; line-height: 1.5; white-space: pre; }
/* Image control (URL + upload) */
.cf-imgctl { display: flex; gap: 12px; align-items: flex-start; }
.cf-imgprev { flex: 0 0 auto; width: 84px; height: 60px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.03); display: grid; place-items: center; overflow: hidden; color: var(--muted); }
.cf-imgprev.sm { width: 54px; height: 40px; }
.cf-imgprev img { width: 100%; height: 100%; object-fit: contain; }
.cf-imgfields { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.upload-drop.sm { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px; border-radius: 10px; border: 1px dashed var(--line); background: rgba(255,255,255,.03); cursor: pointer; color: var(--muted); width: fit-content; }
.upload-drop.sm:hover { border-color: rgba(138,235,255,.4); color: var(--primary); }

.admin-image-control { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: stretch; padding: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(255,255,255,.025); }
.admin-image-control.compact { grid-template-columns: 86px minmax(0, 1fr); }
.admin-image-preview { min-height: 78px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.035); display: grid; place-items: center; overflow: hidden; color: var(--muted); }
.admin-image-control.compact .admin-image-preview { min-height: 64px; }
.admin-image-preview img { width: 100%; height: 100%; object-fit: contain; }
.admin-image-fields { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; }
.admin-image-list-control { display: flex; flex-direction: column; gap: 10px; }
.admin-image-list-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-image-list-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.admin-image-list-preview img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.035); padding: 5px; }

/* Logo repeatable rows */
.cf-logos { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.cf-logo-row { display: grid; grid-template-columns: 54px 1.1fr 1.4fr auto auto; gap: 10px; align-items: center; }
.cf-logo-add { width: fit-content; }
@media (max-width: 760px) { .cf-body, .cf-group { grid-template-columns: 1fr; } .cf-body { padding: 16px; } .cf-group { padding: 16px; } .cf-logo-row { grid-template-columns: 44px 1fr auto auto; } .cf-logo-row [data-lurl] { grid-column: 2 / -1; } .admin-image-control, .admin-image-control.compact { grid-template-columns: 1fr; } .admin-image-preview { min-height: 140px; } .admin-edit-page, .admin-edit-form-page { grid-template-columns: 1fr; } .admin-edit-sidebar .admin-toc-box { position: static; } .admin-edit-form-page { padding: 18px; } .admin-edit-actions { margin: 4px -18px -18px; padding: 14px 18px; } }
@media (max-width: 760px) { .news-config-layout, .news-pin-card { grid-template-columns: 1fr; } .news-pin-card img { height: 170px; } }

/* Layout guard: keep dense storefront/admin content away from card edges. */
.panel, .card, .product-card, .admin-card, .wp-box, .table-wrap { min-width: 0; }
.panel > :first-child, .card > :first-child, .admin-card > :first-child { min-width: 0; }
.field-control, .admin-input, .admin-select, .admin-textarea, .wp-title-input, .wp-permalink input { min-width: 0; max-width: 100%; }
.summary-row span:first-child, .ship-option span, .pay-option span, td, th { min-width: 0; overflow-wrap: anywhere; }
.admin-content { min-width: 0; overflow-x: clip; }
.admin-toolbar > *, .admin-controls > * { min-width: 0; }
.admin-row-actions { justify-content: flex-start; }
.agent-protocol { overflow-x: auto; }
.agent-table { min-width: 0; }
.chat-widget { max-width: calc(100vw - 24px); }
.chat-panel { width: 100%; }
.ticker-strip { width: 100%; left: auto; margin-left: 0; }
body, .screen { max-width: 100%; overflow-x: clip; }

@media (max-width: 1180px) {
  .admin-shell { grid-template-columns: 230px minmax(0,1fr); }
  .kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .admin-grid-2, .wp-post-layout { grid-template-columns: 1fr; }
  .wp-editor-side { order: -1; }
}

@media (max-width: 760px) {
  .admin-shell { display: block; }
  .admin-sidebar { position: relative; height: auto; max-height: none; padding: 14px; }
  .admin-logo { justify-content: center; margin-bottom: 12px; }
  .admin-logo img { width: min(178px, 72vw); }
  .admin-nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .admin-nav a { min-height: 44px; padding: 9px 10px; }
  .admin-topbar { position: relative; flex-direction: column; align-items: flex-start; min-height: 0; padding: 16px; }
  .admin-title h1 { font-size: 24px; overflow-wrap: anywhere; }
  .admin-content { padding: 16px; }
  .admin-card { padding: 14px; }
  .kpi-grid, .lead-type-grid, .media-stat-grid, .security-status-grid, .admin-form, .wp-product-grid { grid-template-columns: 1fr; }
  .media-admin-grid { grid-template-columns: 1fr; }
  .media-card { grid-template-rows: 190px 1fr; }
  .admin-toolbar { align-items: stretch; }
  .admin-toolbar, .admin-controls, .wp-publish-actions { flex-direction: column; }
  .admin-toolbar .btn, .admin-controls .btn, .wp-publish-actions .btn { width: 100%; justify-content: center; }
  .table-wrap { margin-inline: -4px; max-width: calc(100vw - 24px); }
  table { min-width: 760px; }
  th, td { padding: 12px 10px; }
  .classic-editor, .wp-box > .field, .wp-box > .checkbox-line, .wp-box > .wp-publish-actions, .wp-product-grid, .seo-preview, .seo-checklist { margin: 12px; }
}

/* Admin confirmation modal: light surface needs stronger button contrast. */
.modal .actions .btn-danger {
  color: #991b1b;
  border-color: #fca5a5;
  background: #fee2e2;
  box-shadow: none;
  opacity: 1;
}
.modal .actions .btn-danger:hover,
.modal .actions .btn-danger:focus-visible {
  color: #7f1d1d;
  border-color: #fb7185;
  background: #fecaca;
}
.modal .actions .btn-ghost {
  color: #334155;
  border-color: #cbd5e1;
  background: #ffffff;
  box-shadow: none;
  opacity: 1;
}
.modal .actions .btn-ghost:hover,
.modal .actions .btn-ghost:focus-visible {
  color: #0f172a;
  border-color: #94a3b8;
  background: #f8fafc;
}