/* ===================================================
   Landing Page B2B — Tối ưu Ma trận Dinh dưỡng
   Chỉ load trên trang /toi-uu-ma-tran-dinh-duong/
   =================================================== */

.lpb2b { background: var(--bg-white); overflow-x: hidden; }
.lpb2b .container { max-width: 1200px; }
.lpb2b .section-title, .lpb2b-hero h1, .lpb2b-sci-text h3, .lpb2b-mech-body h3 { text-wrap: balance; }

/* ---------- HERO ---------- */
.lpb2b-hero {
  background: linear-gradient(135deg, var(--dark) 0%, #102b1f 60%, var(--primary-dark) 100%);
  padding: 56px 0 60px;
  position: relative;
  overflow: hidden;
}
.lpb2b-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(43,192,105,.25), transparent 55%);
  pointer-events: none;
}
.lpb2b-hero-grid {
  display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; position: relative; z-index: 1;
}
@media (min-width: 992px) {
  .lpb2b-hero-grid { grid-template-columns: 1.05fr 0.95fr; }
}
.lpb2b-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(249,169,27,.15); color: var(--secondary-light);
  font-size: .8rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 7px 18px; border-radius: 50px; margin-bottom: 20px;
  border: 1px solid rgba(249,169,27,.35);
}
.lpb2b-hero h1 {
  color: #fff; font-size: 2.5rem; font-weight: 800; line-height: 1.25; margin-bottom: 18px;
}
.lpb2b-hero h1 span { color: var(--secondary-light); }
.lpb2b-hero p.lead {
  color: rgba(255,255,255,.82); font-size: 1.05rem; max-width: 540px; margin-bottom: 30px;
}
.lpb2b-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }

/* Mockup dashboard card */
.lpb2b-dashboard {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 22px; animation: lpFadeUp .8s ease both;
}
.lpb2b-dashboard-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.lpb2b-dashboard-head .dots span { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; }
.lpb2b-dashboard-head .dots span:nth-child(1){background:#F76C6C;} .lpb2b-dashboard-head .dots span:nth-child(2){background:#FFC95C;} .lpb2b-dashboard-head .dots span:nth-child(3){background:#48C774;}
.lpb2b-dashboard-title { font-size: .8rem; font-weight: 700; color: var(--text-muted); letter-spacing: .5px; }
.lpb2b-kpi-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.lpb2b-kpi { background: var(--bg-soft); border-radius: var(--radius); padding: 12px 14px; }
.lpb2b-kpi .kpi-label { font-size: .72rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.lpb2b-kpi .kpi-value { font-size: 1.4rem; font-weight: 800; color: var(--dark); }
.lpb2b-kpi .kpi-value.down { color: #D64545; }
.lpb2b-kpi .kpi-value.up { color: var(--primary); }
.lpb2b-chart-box { background: var(--bg-light); border-radius: var(--radius); padding: 10px 12px 4px; margin-bottom: 10px; }
.lpb2b-chart-box canvas { width: 100% !important; height: 90px !important; }
.lpb2b-chart-box .chart-cap { font-size: .72rem; color: var(--text-muted); font-weight: 600; margin-bottom: 2px; }

/* ---------- SCIENCE SECTION ---------- */
.lpb2b-science { padding: 60px 0; background: var(--bg-light); }
.lpb2b-sci-row { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; margin-bottom: 40px; }
@media (min-width: 992px) { .lpb2b-sci-row { grid-template-columns: 1fr 1fr; } }
.lpb2b-sci-row.reverse .lpb2b-sci-visual { order: 2; }
.lpb2b-sci-visual {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: 30px; display: flex; align-items: center; justify-content: center; min-height: 260px; position: relative;
}
.lpb2b-molecule { position: relative; width: 220px; height: 220px; }
.lpb2b-molecule .core {
  position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--primary-light), var(--primary-dark));
  box-shadow: 0 0 0 8px rgba(21,155,74,.12);
  animation: lpPulse 2.6s ease-in-out infinite;
}
.lpb2b-molecule .orbit {
  position: absolute; top: 50%; left: 50%; border: 2px dashed rgba(21,155,74,.35); border-radius: 50%;
  transform: translate(-50%,-50%);
  animation: lpSpin linear infinite;
}
.lpb2b-molecule .orbit.o1 { width: 140px; height: 140px; animation-duration: 9s; }
.lpb2b-molecule .orbit.o2 { width: 200px; height: 200px; animation-duration: 14s; animation-direction: reverse; }
.lpb2b-molecule .particle { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--secondary); top: -8px; left: 50%; margin-left: -8px; box-shadow: 0 0 12px rgba(249,169,27,.6); }
.lpb2b-molecule .orbit.o2 .particle { background: var(--primary); box-shadow: 0 0 12px rgba(21,155,74,.6); }
.lpb2b-sci-text .section-label { background: #fff; }
.lpb2b-sci-stat { display: inline-flex; align-items: baseline; gap: 6px; background: var(--primary-ultra); border-radius: var(--radius); padding: 10px 18px; margin-top: 8px; }
.lpb2b-sci-stat b { font-size: 1.5rem; color: var(--primary-dark); }
.lpb2b-sci-stat span { font-size: .82rem; color: var(--text-light); }

/* ---------- SIMULATOR ---------- */
.lpb2b-sim { padding: 60px 0 70px; background: #fff; }
.lpb2b-sim-card {
  background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 36px; display: grid; grid-template-columns: 1fr; gap: 30px;
}
@media (min-width: 992px) { .lpb2b-sim-card { grid-template-columns: 1fr 1fr; } }
.lpb2b-sim-form .form-label { font-weight: 600; color: var(--dark); font-size: .88rem; margin-bottom: 6px; }
.lpb2b-sim-form .form-select { border-radius: var(--radius); border: 1.5px solid var(--border); padding: 11px 14px; font-size: .92rem; margin-bottom: 16px; }
.lpb2b-sim-form .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(21,155,74,.12); }
.lpb2b-sim-result {
  background: var(--bg-soft); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; justify-content: center; min-height: 280px;
}
.lpb2b-sim-result .placeholder-state { text-align: center; color: var(--text-muted); }
.lpb2b-sim-result .placeholder-state i { font-size: 2.2rem; color: var(--border); margin-bottom: 10px; }
.lpb2b-result-savings { font-size: 2.1rem; font-weight: 800; color: var(--primary-dark); }
.lpb2b-result-savings small { font-size: .95rem; font-weight: 600; color: var(--text-light); display: block; }
.lpb2b-result-product { display: inline-flex; align-items: center; gap: 8px; background: #fff; border-radius: 50px; padding: 8px 16px; font-weight: 700; color: var(--primary-dark); margin: 10px 0; box-shadow: var(--shadow-sm); }
.lpb2b-sim-chart-wrap { background: #fff; border-radius: var(--radius); padding: 14px; margin-top: 14px; }
.lpb2b-sim-chart-wrap canvas { max-height: 160px; }
#lpb2bAlert { display: none; }

@keyframes lpFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lpPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes lpSpin { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }

.lp-fade-up { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.lp-fade-up.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Vine-leaf title accent (replaces flat .title-line on this page) ---------- */
.lpb2b-vine-line { display: flex; align-items: center; justify-content: center; gap: 5px; height: 20px; margin: 14px auto 26px; }
.lpb2b-vine-line .vine-bar {
  width: 0; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
}
.lpb2b-vine-line .vine-leaf {
  width: 16px; height: 16px; color: var(--primary-dark); opacity: 0; transform: scale(.3) rotate(-25deg); transform-origin: bottom left;
}
.lpb2b-vine-line .vine-leaf path:first-child { fill: var(--secondary); }
.is-visible .lpb2b-vine-line .vine-bar { animation: lpVineGrow .6s ease forwards; }
.is-visible .lpb2b-vine-line .vine-leaf { animation: lpVineLeafIn .45s ease .35s forwards, lpVineLeafSway 3.2s ease-in-out 1s infinite; }
@keyframes lpVineGrow { to { width: 40px; } }
@keyframes lpVineLeafIn { to { opacity: 1; transform: scale(1) rotate(0deg); } }
@keyframes lpVineLeafSway { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg); } }

/* =========================================================
   V2.0 — Năng lực sản xuất / Thư viện cơ chế / Iceberg / Cấp 1-2
   ========================================================= */

/* ---------- Hero tech grid overlay ---------- */
.lpb2b-techgrid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .35;
  background-image:
    linear-gradient(rgba(43,192,105,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,192,105,.18) 1px, transparent 1px);
  background-size: 38px 38px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 85%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 85%);
  animation: lpGridDrift 16s linear infinite;
}
@keyframes lpGridDrift { from { background-position: 0 0, 0 0; } to { background-position: 38px 38px, 38px 38px; } }

/* Floating leaf particles — phytogenic / plant-extract visual identity */
.lpb2b-leaves { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.lpb2b-leaves .leaf-particle { position: absolute; bottom: -40px; width: 20px; height: 20px; fill: var(--primary-light); opacity: 0; animation: lpLeafDrift linear infinite; }
.lpb2b-leaves .lp1 { left: 6%;  width: 22px; animation-duration: 15s; animation-delay: 0s;   --sway: 40px;  fill: var(--secondary-light); }
.lpb2b-leaves .lp2 { left: 18%; width: 14px; animation-duration: 11s; animation-delay: 3s;   --sway: -30px; }
.lpb2b-leaves .lp3 { left: 32%; width: 18px; animation-duration: 18s; animation-delay: 1.5s; --sway: 25px;  fill: var(--secondary-light); }
.lpb2b-leaves .lp4 { left: 55%; width: 16px; animation-duration: 13s; animation-delay: 6s;   --sway: -45px; }
.lpb2b-leaves .lp5 { left: 70%; width: 24px; animation-duration: 19s; animation-delay: 2s;   --sway: 35px; }
.lpb2b-leaves .lp6 { left: 84%; width: 15px; animation-duration: 12s; animation-delay: 8s;   --sway: -25px; fill: var(--secondary-light); }
.lpb2b-leaves .lp7 { left: 94%; width: 19px; animation-duration: 16s; animation-delay: 4.5s; --sway: 30px; }
@keyframes lpLeafDrift {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
  10%  { opacity: .3; }
  85%  { opacity: .22; }
  100% { transform: translateY(-520px) translateX(var(--sway, 30px)) rotate(75deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lpb2b-leaves, .lpb2b-techgrid { display: none; }
}

/* ---------- Năng lực sản xuất ---------- */
.lpb2b-capability { padding: 60px 0; background: var(--bg-white); position: relative; }
.lpb2b-stat-strip {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; margin-bottom: 38px;
}
@media (min-width: 768px) { .lpb2b-stat-strip { grid-template-columns: repeat(4,1fr); } }
.lpb2b-stat {
  background: linear-gradient(160deg, var(--bg-light), #fff); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 22px 16px; text-align: center; box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.lpb2b-stat:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.lpb2b-stat .stat-num {
  font-family: 'Courier New', monospace; font-size: 2.1rem; font-weight: 800; color: var(--primary-dark);
  letter-spacing: .5px; text-shadow: 0 0 18px rgba(21,155,74,.25);
}
.lpb2b-stat .stat-label { font-size: .8rem; color: var(--text-light); font-weight: 600; margin-top: 6px; line-height: 1.4; }

.lpb2b-cap-row { display: grid; grid-template-columns: 1fr; gap: 36px; margin-bottom: 40px; }
@media (min-width: 992px) { .lpb2b-cap-row { grid-template-columns: 1.3fr 1fr; align-items: center; } }

.lpb2b-gallery-wrap { position: relative; min-width: 0; }
.lpb2b-gallery { border-radius: var(--radius-lg); overflow: hidden; }
.lpb2b-gallery .swiper-slide { border-radius: var(--radius-lg); overflow: hidden; height: 230px; }
.lpb2b-gallery .swiper-slide a { display: block; position: relative; height: 100%; }
.lpb2b-gallery .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lpb2b-gallery .swiper-slide .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px;
  background: linear-gradient(0deg, rgba(7,25,15,.85), transparent);
  color: #fff; font-size: .78rem; font-weight: 600;
}
.lpb2b-gallery-hint { text-align: center; font-size: .76rem; color: var(--text-muted); margin-top: 10px; }

.lpb2b-strengths { display: flex; flex-direction: column; gap: 16px; }
.lpb2b-strength-item { display: flex; gap: 14px; align-items: flex-start; }
.lpb2b-strength-item i {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; background: var(--primary-ultra); color: var(--primary-dark);
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem; transition: var(--transition);
}
.lpb2b-strength-item:hover i { background: var(--primary); color: #fff; animation: lpSprout .5s ease; }
.lpb2b-strength-item b { display: block; color: var(--dark); font-size: .95rem; }
.lpb2b-strength-item span { display: block; color: var(--text-light); font-size: .8rem; margin-top: 2px; }

.lpb2b-timeline { position: relative; padding-top: 10px; overflow-x: auto; }
.lpb2b-timeline .tl-line {
  position: absolute; left: 0; right: 0; top: 38px; height: 2px;
  background: linear-gradient(90deg, var(--border), var(--primary-light), var(--border));
}
.lpb2b-timeline { display: grid; grid-template-columns: repeat(7, minmax(120px,1fr)); gap: 6px; }
.tl-item { position: relative; text-align: center; padding-top: 30px; }
.tl-dot {
  position: absolute; top: 32px; left: 50%; width: 12px; height: 12px; margin-left: -6px;
  border-radius: 50%; background: var(--primary); border: 3px solid #fff; box-shadow: 0 0 0 3px rgba(21,155,74,.25); z-index: 1;
}
.tl-item.is-now .tl-dot { background: var(--secondary); box-shadow: 0 0 0 4px rgba(249,169,27,.3), 0 0 14px rgba(249,169,27,.7); animation: lpPulse 1.8s ease-in-out infinite; }
.tl-year { font-weight: 800; color: var(--primary-dark); font-family: 'Courier New', monospace; margin-top: 14px; }
.tl-item.is-now .tl-year { color: var(--secondary); }
.tl-text { font-size: .76rem; color: var(--text-light); margin-top: 4px; line-height: 1.4; }

/* ---------- Thư viện cơ chế tác động ---------- */
.lpb2b-mechlib { padding: 60px 0; background: var(--bg-light); position: relative; }
.lpb2b-mech-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 768px) { .lpb2b-mech-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1200px) { .lpb2b-mech-grid { grid-template-columns: repeat(3,1fr); } }
.lpb2b-mech-card {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--border-light);
  overflow: hidden; transition: var(--transition); display: flex; flex-direction: column;
}
.lpb2b-mech-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.lpb2b-mech-anim {
  height: 130px; position: relative; background: radial-gradient(circle at 30% 20%, var(--primary-ultra), var(--bg-soft));
  overflow: hidden;
}
.lpb2b-mech-body { padding: 20px 22px 22px; }
.mech-icon-badge {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px;
  background: var(--primary-ultra); color: var(--primary-dark); font-size: 1rem; margin-bottom: 10px;
  position: relative; transition: var(--transition);
}
.lpb2b-mech-card:hover .mech-icon-badge { background: var(--primary); color: #fff; }
.lpb2b-mech-card:hover .mech-icon-badge::after {
  content: ''; position: absolute; inset: -6px; border-radius: 14px; border: 2px solid var(--primary-light);
  animation: lpRingExpand 1.1s ease-out;
}
.lpb2b-mech-body h3 { font-size: 1.05rem; margin-bottom: 8px; }
.lpb2b-mech-body p { font-size: .84rem; color: var(--text-light); line-height: 1.65; margin-bottom: 0; }
.lpb2b-mech-products { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mech-chip {
  display: inline-flex; align-items: center; gap: 6px; background: var(--bg-soft); border-radius: 50px; padding: 5px 12px 5px 6px;
  font-size: .74rem; font-weight: 700; color: var(--dark); text-decoration: none; transition: var(--transition);
}
.mech-chip:hover { background: var(--primary-ultra); color: var(--primary-dark); }
.mech-chip img { width: 22px; height: 22px; object-fit: contain; border-radius: 50%; background: #fff; }
.mech-chip-fallback { width: 22px; height: 22px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: .7rem; color: var(--primary); }

/* mini animations per mechanism */
.cellwall { position: absolute; top: 50%; left: 18%; width: 8px; height: 60px; margin-top: -30px; background: var(--primary-light); border-radius: 4px; opacity: .5; }
.pump { position: absolute; top: 50%; left: 18%; width: 30px; height: 30px; margin: -15px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; color: #D64545; font-size: .85rem; animation: lpPulse 2s ease-in-out infinite; }
.molecule { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--secondary); box-shadow: 0 0 8px rgba(249,169,27,.7); animation: lpMoleculeBounce 2.4s ease-in-out infinite; }
.molecule.m1 { top: 30%; right: 25%; animation-delay: 0s; }
.molecule.m2 { top: 65%; right: 35%; animation-delay: 1.1s; }
@keyframes lpMoleculeBounce { 0%,100% { right: 20%; opacity: 1; } 45% { right: 42%; opacity: 1; } 55% { right: 42%; opacity: 0; } 56% { right: 20%; opacity: 0;} 70%{opacity:1;} }

.lifecycle-ring { position: absolute; top: 50%; left: 50%; width: 90px; height: 90px; margin: -45px; border: 2px dashed rgba(21,155,74,.4); border-radius: 50%; animation: lpSpin 10s linear infinite; }
.lifecycle-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); top: 50%; left: 50%; }
.lifecycle-dot.d1 { margin: -50px 0 0 -5px; animation: lpSpin 3s linear infinite; transform-origin: 5px 50px; }
.lifecycle-dot.d2 { margin: -50px 0 0 -5px; animation: lpSpin 3s linear infinite reverse; transform-origin: 5px 50px; animation-delay: 1.5s; }
.lifecycle-block { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; color: #D64545; }

.shield-core { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; box-shadow: 0 0 0 8px rgba(21,155,74,.12); z-index: 1; }
.shield-ring { position: absolute; top: 50%; left: 50%; border: 2px solid rgba(21,155,74,.35); border-radius: 50%; transform: translate(-50%,-50%); animation: lpRingExpand 2.6s ease-out infinite; }
.shield-ring.r2 { animation-delay: 1.3s; }

.dna-strand { position: absolute; top: 50%; left: 50%; width: 70px; height: 90px; margin: -45px 0 0 -35px; display: flex; justify-content: space-between; }
.dna-strand span { width: 6px; height: 100%; border-radius: 4px; background: linear-gradient(180deg, var(--primary-light), var(--secondary)); animation: lpDnaWave 2.2s ease-in-out infinite; }
.dna-strand span:nth-child(1){animation-delay:0s;} .dna-strand span:nth-child(2){animation-delay:.15s;} .dna-strand span:nth-child(3){animation-delay:.3s;}
.dna-strand span:nth-child(4){animation-delay:.45s;} .dna-strand span:nth-child(5){animation-delay:.6s;} .dna-strand span:nth-child(6){animation-delay:.75s;}
@keyframes lpDnaWave { 0%,100% { transform: scaleY(.5); opacity:.6; } 50% { transform: scaleY(1); opacity: 1; } }

.transport-channel { position: absolute; top: 50%; left: 50%; width: 90px; height: 22px; margin: -11px 0 0 -45px; border-radius: 12px; border: 2px solid var(--primary-light); background: #fff; }
.transport-ion { position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--secondary); left: 10%; animation: lpIonMove 2.4s linear infinite; }
.transport-ion.i2 { animation-delay: .8s; } .transport-ion.i3 { animation-delay: 1.6s; }
@keyframes lpIonMove { 0% { left: 8%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 85%; opacity: 0; } }

.oxi-core { position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; margin: -19px; border-radius: 50%; background: var(--primary-dark); color: #fff; display: flex; align-items: center; justify-content: center; z-index: 1; }
.oxi-pulse { position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; margin: -19px; border-radius: 50%; border: 2px solid rgba(43,192,105,.5); animation: lpRingExpand 2.2s ease-out infinite; }
.oxi-pulse.p2 { animation-delay: 1.1s; }

.liver-core { position: absolute; top: 58%; left: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: var(--secondary); color: #fff; display: flex; align-items: center; justify-content: center; }
.liver-drop { position: absolute; top: 18%; width: 8px; height: 12px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--secondary-light); animation: lpDropFall 2s ease-in infinite; }
.liver-drop.dr1 { left: 38%; animation-delay: 0s; } .liver-drop.dr2 { left: 50%; animation-delay: .5s; } .liver-drop.dr3 { left: 62%; animation-delay: 1s; }
@keyframes lpDropFall { 0% { top: 15%; opacity: 0; } 20% { opacity: 1; } 75% { top: 55%; opacity: 1; } 100% { top: 58%; opacity: 0; } }

.heart-core { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; background: #D64545; color: #fff; display: flex; align-items: center; justify-content: center; animation: lpPulse 1.3s ease-in-out infinite; z-index: 1; }
.heart-ring { position: absolute; top: 50%; left: 50%; width: 70px; height: 70px; margin: -35px; border-radius: 50%; border: 2px dashed rgba(214,69,69,.3); animation: lpSpin 12s linear infinite; }

@keyframes lpRingExpand { 0% { width: 38px; height: 38px; margin: -19px; opacity: .8; } 100% { width: 110px; height: 110px; margin: -55px; opacity: 0; } }

/* ---------- Tảng băng chi phí ---------- */
.lpb2b-iceberg { padding: 60px 0; background: linear-gradient(160deg, var(--dark) 0%, #0c2a1d 70%, var(--primary-dark) 100%); position: relative; overflow: hidden; }
.lpb2b-iceberg-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; min-width: 0; }
.lpb2b-iceberg-grid > * { min-width: 0; }
@media (min-width: 992px) { .lpb2b-iceberg-grid { grid-template-columns: 1.1fr .9fr; } }
.lpb2b-iceberg-legend { display: flex; flex-direction: column; gap: 14px; margin: 26px 0 28px; }
.iceberg-legend-item { display: flex; gap: 12px; align-items: flex-start; }
.iceberg-legend-item .dot { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; margin-top: 4px; }
.iceberg-legend-item .dot-1 { background: #EAF8F0; }
.iceberg-legend-item .dot-2 { background: var(--secondary); }
.iceberg-legend-item .dot-3 { background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.3) inset; }
.iceberg-legend-item b { display: block; color: #fff; font-size: .92rem; }
.iceberg-legend-item span { display: block; color: rgba(255,255,255,.65); font-size: .78rem; margin-top: 2px; }
.lpb2b-iceberg-cta { margin-top: 6px; }
.lpb2b-iceberg-visual svg { width: 100%; max-width: 360px; display: block; margin: 0 auto; }
.lpb2b-iceberg-visual .ice-tip { filter: drop-shadow(0 0 10px rgba(255,255,255,.5)); }
.lpb2b-iceberg-visual .ice-body { animation: lpIceDrift 5s ease-in-out infinite; }
@keyframes lpIceDrift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
.ice-label { fill: var(--dark); font-size: 13px; font-weight: 700; font-family: var(--font); }
.ice-label-2, .ice-label-3 { fill: #fff; }

/* ---------- Goal grid (chẩn đoán theo mục tiêu) ---------- */
.lpb2b-goal-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-bottom: 16px; }
@media (min-width: 768px) { .lpb2b-goal-grid { grid-template-columns: repeat(4,1fr); } }
.lpb2b-goal-tile {
  background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius); padding: 16px 14px; text-align: left;
  cursor: pointer; transition: var(--transition); display: flex; flex-direction: column; gap: 4px;
}
.lpb2b-goal-tile i { color: var(--primary); font-size: 1.2rem; margin-bottom: 4px; }
.lpb2b-goal-tile b { font-size: .85rem; color: var(--dark); }
.lpb2b-goal-tile span { font-size: .72rem; color: var(--text-muted); }
.lpb2b-goal-tile:hover { border-color: var(--primary-light); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.lpb2b-goal-tile:hover i { animation: lpSprout .5s ease; }
@keyframes lpSprout { 0% { transform: scale(1) rotate(0deg); } 40% { transform: scale(1.3) rotate(-8deg); } 70% { transform: scale(1.1) rotate(4deg); } 100% { transform: scale(1) rotate(0deg); } }
.lpb2b-goal-tile.is-active { border-color: var(--primary); background: var(--primary-ultra); box-shadow: 0 0 0 3px rgba(21,155,74,.12); }
.lpb2b-goal-tile.is-active i { color: var(--primary-dark); }
.lpb2b-goal-active {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--primary-ultra); color: var(--primary-dark);
  border-radius: 50px; padding: 8px 18px; font-size: .82rem; font-weight: 600; margin-bottom: 28px;
}
.lpb2b-goal-active button {
  border: none; background: none; color: var(--primary-dark); font-weight: 700; cursor: pointer; font-size: .8rem; text-decoration: underline;
}

/* Species/stage filter (Thư viện Cơ chế) — biến thể pill ngang gọn của goal-tile */
.lpb2b-species-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 34px; }
.lpb2b-species-filter .lpb2b-goal-tile {
  flex-direction: row; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; width: auto;
}
.lpb2b-species-filter .lpb2b-goal-tile b { margin: 0; font-size: .85rem; }
.lpb2b-species-filter .lpb2b-goal-tile.is-active { background: var(--primary); border-color: var(--primary); }
.lpb2b-species-filter .lpb2b-goal-tile.is-active i, .lpb2b-species-filter .lpb2b-goal-tile.is-active b { color: #fff; }
.form-hint { font-size: .76rem; color: var(--text-muted); margin: -10px 0 16px; display: flex; gap: 6px; align-items: flex-start; }

/* ---------- Cấp 1: battle visual + savings counter ---------- */
.lpb2b-r1-battle { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.lpb2b-r1-chip {
  display: flex; flex-direction: column; align-items: center; gap: 6px; background: #fff; border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow-sm); min-width: 110px; text-align: center;
}
.lpb2b-r1-chip.current { color: #D64545; border: 1.5px dashed rgba(214,69,69,.35); }
.lpb2b-r1-chip.current i { font-size: 1.3rem; }
.lpb2b-r1-chip.current span { font-size: .76rem; font-weight: 700; }
.lpb2b-r1-chip.solution { border: 1.5px solid var(--primary-light); animation: lpFadeUp .6s ease both; position: relative; overflow: visible; }
.lpb2b-r1-chip.solution::before {
  content: ''; position: absolute; top: 8px; left: 50%; width: 56px; height: 56px; margin-left: -28px;
  border-radius: 50%; background: radial-gradient(circle, rgba(43,192,105,.35), transparent 70%);
  animation: lpHaloPulse 2.6s ease-in-out infinite;
}
.lpb2b-r1-pack { width: 56px; height: 56px; object-fit: contain; animation: lpPackFloat 2.6s ease-in-out infinite; position: relative; z-index: 1; }
@keyframes lpHaloPulse { 0%,100% { transform: scale(.85); opacity: .5; } 50% { transform: scale(1.25); opacity: .9; } }
.lpb2b-r1-pack-fallback { font-size: 1.8rem; color: var(--primary); }
.lpb2b-r1-chip.solution span { font-size: .78rem; font-weight: 800; color: var(--primary-dark); }
@keyframes lpPackFloat { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-5px) rotate(1deg); } }
.lpb2b-r1-arrow { color: var(--secondary); font-size: 1.4rem; animation: lpArrowNudge 1.4s ease-in-out infinite; }
@keyframes lpArrowNudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

.lpb2b-r1-savings { text-align: center; margin-bottom: 10px; }
.lpb2b-r1-savings .savings-num {
  font-family: 'Courier New', monospace; font-size: 2.3rem; font-weight: 800; color: var(--primary-dark);
  text-shadow: 0 0 20px rgba(21,155,74,.25);
}
.lpb2b-r1-savings .savings-unit { font-size: .85rem; color: var(--text-light); font-weight: 600; }
.lpb2b-r1-teaser {
  background: #fff; border-radius: var(--radius); padding: 12px 16px; font-size: .82rem; color: var(--text-light);
  display: flex; gap: 8px; margin-bottom: 16px; box-shadow: var(--shadow-sm);
}
.lpb2b-r1-teaser i { color: var(--primary); margin-top: 2px; }
.lpb2b-r1-productlink { display: inline-block; margin-top: 14px; font-size: .8rem; font-weight: 700; }

/* ---------- Cấp 2: locked teaser + unlocked panel ---------- */
.lpb2b-lvl2-lock { position: relative; background: #fff; border-radius: var(--radius); padding: 16px; overflow: hidden; }
.lvl2-lock-row { display: flex; justify-content: space-between; font-size: .82rem; padding: 7px 0; border-bottom: 1px dashed var(--border); color: var(--text-light); }
.lvl2-lock-row:last-of-type { border-bottom: none; }
.lvl2-lock-row .blur-fake { font-family: 'Courier New', monospace; font-weight: 700; color: var(--text-muted); letter-spacing: 1px; user-select: none; }
.lvl2-lock-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,.96) 45%); padding: 16px; backdrop-filter: blur(2px);
}
.lvl2-lock-overlay i.fa-lock { font-size: 1.6rem; color: var(--secondary); margin-bottom: 8px; }
.lvl2-lock-overlay p { font-size: .82rem; color: var(--dark); font-weight: 700; max-width: 280px; margin-bottom: 12px; }

.lpb2b-lvl2-panel { background: #fff; border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); animation: lpFadeUp .5s ease both; }
.lvl2-head { font-weight: 800; color: var(--primary-dark); font-size: .9rem; margin-bottom: 14px; display: flex; gap: 8px; align-items: center; }
.lvl2-total { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.lvl2-total.lvl2-total-perhead { grid-template-columns: 1fr; }
.lvl2-total-box { background: var(--primary-ultra); border-radius: var(--radius); padding: 12px 14px; text-align: center; }
.lvl2-total-box span { display: block; font-size: .72rem; color: var(--text-light); font-weight: 600; }
.lvl2-total-box b { font-family: 'Courier New', monospace; font-size: 1.25rem; color: var(--primary-dark); }
.lvl2-perhead-note { font-size: .76rem; color: var(--text-muted); margin: -4px 0 14px; }
.lvl2-eff-table { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 10px; }
.lvl2-eff-row { display: flex; justify-content: space-between; padding: 9px 14px; font-size: .82rem; border-bottom: 1px solid var(--border-light); }
.lvl2-eff-row:last-child { border-bottom: none; }
.lvl2-eff-row:nth-child(odd) { background: var(--bg-light); }
.lvl2-eff-row b { color: var(--primary-dark); }
.lvl2-eff-empty { display: flex; gap: 8px; align-items: center; padding: 14px; font-size: .8rem; color: var(--text-light); background: var(--bg-light); }
.lvl2-source { font-size: .72rem; color: var(--text-muted); margin-bottom: 10px; }
.lvl2-risk { background: var(--primary-ultra); border-radius: var(--radius); padding: 10px 14px; font-size: .8rem; color: var(--primary-dark); font-weight: 600; margin-bottom: 14px; display: flex; gap: 8px; }
.lvl2-cta-row { display: flex; gap: 10px; flex-wrap: wrap; }
.lvl2-cta-row .btn-primary-tv, .lvl2-cta-row .btn-secondary-tv { flex: 1; justify-content: center; }