/* ============================================================
   b2b.css – Trang Doanh Nghiệp (/doanh-nghiep)
   Chỉ load trên trang B2B. Dùng lại biến & utility từ main.css
   (:root, .container, .section-label, .section-title, form…)
   Mobile-first (375px) → 768px → 1024px
   ============================================================ */

:root {
  --green:   #16A34A;
  --green-d: #15803D;
  --green-l: #F0FDF4;
}

/* ── HERO ─────────────────────────────────────────────────── */
.b2b-hero { position:relative; padding:120px 0 70px; overflow:hidden;
  background:linear-gradient(135deg,#064E3B 0%,#0866C6 55%,#0550A0 100%); }
.b2b-hero-overlay { position:absolute; inset:0;
  background:radial-gradient(circle at 80% 20%,rgba(22,163,74,.35) 0%,transparent 60%); }
.b2b-hero-content { position:relative; z-index:1; color:#fff; }

.b2b-back { display:inline-block; font-size:13px; font-weight:600; color:rgba(255,255,255,.85);
  margin-bottom:20px; transition:color .2s; }
.b2b-back:hover { color:#fff; }

.b2b-eyebrow { font-size:11px; font-weight:800; letter-spacing:1.4px; line-height:1.5;
  color:#6EE7B7; margin-bottom:14px; }
.b2b-hero-title { font-size:clamp(27px,6.4vw,50px); font-weight:900; line-height:1.15;
  margin-bottom:16px; text-shadow:0 2px 12px rgba(0,0,0,.25); }
.b2b-hero-sub { font-size:clamp(15px,2.5vw,18px); font-weight:500; opacity:.92;
  margin-bottom:26px; max-width:640px; }

.b2b-hero-bullets { list-style:none; display:flex; flex-direction:column; gap:10px;
  margin-bottom:32px; }
.b2b-hero-bullets li { position:relative; padding-left:28px; font-size:15px; font-weight:500; }
.b2b-hero-bullets li::before { content:'✓'; position:absolute; left:0; top:-1px;
  width:20px; height:20px; border-radius:50%; background:rgba(110,231,183,.22);
  color:#6EE7B7; font-size:12px; font-weight:800; display:flex;
  align-items:center; justify-content:center; }

.b2b-hero-cta { display:flex; flex-direction:column; gap:12px; }
.btn-hero-ghost { display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid rgba(255,255,255,.55); color:#fff; font-size:15px; font-weight:700;
  padding:15px 26px; border-radius:10px; transition:all .2s; }
.btn-hero-ghost:hover { background:rgba(255,255,255,.14); border-color:#fff; }

/* ── TRỤ CỘT ──────────────────────────────────────────────── */
.b2b-pillars { background:var(--white); padding:72px 0; }
.pillar-grid { display:grid; grid-template-columns:1fr; gap:24px; }
.pillar-card { position:relative; background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius); padding:32px 24px 28px; overflow:hidden;
  transition:transform .2s, box-shadow .2s; }
.pillar-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(26,43,74,.1); }
.pillar-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; }
.pillar-digital::before { background:var(--blue); }
.pillar-green::before   { background:var(--green); }

.pillar-num { position:absolute; top:18px; right:22px; font-size:34px; font-weight:900;
  color:var(--border); line-height:1; }
.pillar-icon { font-size:38px; line-height:1; margin-bottom:14px; }
.pillar-title { font-size:21px; font-weight:800; color:var(--dark); margin-bottom:10px; }
.pillar-desc { font-size:15px; color:var(--gray); margin-bottom:18px; }
.pillar-list { list-style:none; display:flex; flex-direction:column; gap:9px; }
.pillar-list li { position:relative; padding-left:22px; font-size:14.5px;
  font-weight:500; color:var(--dark); }
.pillar-list li::before { content:'▸'; position:absolute; left:4px; font-weight:800; }
.pillar-digital .pillar-list li::before { color:var(--blue); }
.pillar-green   .pillar-list li::before { color:var(--green); }

/* ── LNG ──────────────────────────────────────────────────── */
.b2b-lng { background:linear-gradient(135deg,var(--green-l) 0%,#ECFDF5 100%);
  padding:72px 0; }
.lng-inner { display:grid; grid-template-columns:1fr; gap:32px; align-items:center; }

.lng-badge { display:inline-block; background:var(--green); color:#fff; font-size:11px;
  font-weight:800; letter-spacing:1.1px; text-transform:uppercase;
  padding:6px 14px; border-radius:50px; margin-bottom:14px; }
.lng-title { font-size:clamp(24px,5vw,36px); font-weight:800; color:#064E3B;
  line-height:1.2; margin-bottom:14px; }
.lng-lead { font-size:16px; color:#166534; font-weight:500; margin-bottom:26px; }

.lng-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:26px; }
.lng-stat { background:rgba(255,255,255,.75); border:1px solid rgba(22,163,74,.22);
  border-radius:10px; padding:16px 10px; text-align:center; }
.lng-stat-num { display:block; font-size:clamp(19px,4vw,25px); font-weight:900;
  color:var(--green-d); line-height:1.1; margin-bottom:4px; }
.lng-stat-label { display:block; font-size:11.5px; font-weight:600; color:#166534;
  line-height:1.35; }

.lng-benefits { list-style:none; display:flex; flex-direction:column; gap:11px;
  margin-bottom:28px; }
.lng-benefits li { position:relative; padding-left:28px; font-size:15px;
  font-weight:500; color:var(--dark); }
.lng-benefits li::before { content:'✓'; position:absolute; left:0; top:0;
  width:20px; height:20px; border-radius:50%; background:var(--green);
  color:#fff; font-size:11px; font-weight:800; display:flex;
  align-items:center; justify-content:center; }

.btn-lng { display:inline-flex; align-items:center; justify-content:center;
  background:var(--green); color:#fff; font-size:15px; font-weight:700;
  padding:15px 28px; border-radius:10px; border:none; cursor:pointer;
  transition:background .2s, transform .2s; }
.btn-lng:hover { background:var(--green-d); transform:translateY(-2px); }

.lng-visual-card { background:var(--white); border-radius:16px; padding:34px 26px;
  text-align:center; box-shadow:0 10px 34px rgba(6,78,59,.13);
  border:1px solid rgba(22,163,74,.16); }
.lng-visual-icon { font-size:44px; line-height:1; margin-bottom:12px; }
.lng-visual-card strong { display:block; font-size:20px; font-weight:800;
  color:#064E3B; margin-bottom:8px; }
.lng-visual-card p { font-size:14px; color:var(--gray); }

/* ── DANH MỤC ─────────────────────────────────────────────── */
.b2b-catalog { background:var(--bg); padding:72px 0; }
.catalog-grid { display:grid; grid-template-columns:1fr; gap:22px; }
.catalog-card { position:relative; display:flex; flex-direction:column;
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
  padding:28px 22px; transition:transform .2s, box-shadow .2s; }
.catalog-card:hover { transform:translateY(-4px); box-shadow:0 12px 30px rgba(26,43,74,.1); }
.catalog-featured { border-color:rgba(22,163,74,.4); box-shadow:0 6px 22px rgba(22,163,74,.12); }

.catalog-tag { position:absolute; top:16px; right:16px; font-size:10.5px; font-weight:800;
  letter-spacing:.6px; text-transform:uppercase; color:#fff;
  padding:5px 11px; border-radius:50px; }
.catalog-tag.tag-green { background:var(--green); }
.catalog-tag.tag-blue  { background:var(--blue); }

.catalog-icon { font-size:32px; line-height:1; margin-bottom:12px; }
.catalog-title { font-size:18px; font-weight:800; color:var(--dark);
  line-height:1.3; margin-bottom:10px; padding-right:60px; }
.catalog-desc { font-size:14.5px; color:var(--gray); margin-bottom:16px; }
.catalog-features { list-style:none; display:flex; flex-direction:column; gap:8px;
  margin-bottom:22px; }
.catalog-features li { font-size:14px; font-weight:500; color:var(--dark); }

.btn-catalog { margin-top:auto; width:100%; background:transparent;
  border:1.5px solid var(--blue); color:var(--blue); font-size:14.5px; font-weight:700;
  padding:13px 18px; border-radius:9px; cursor:pointer; font-family:var(--font);
  transition:all .2s; }
.btn-catalog:hover { background:var(--blue); color:#fff; }
.catalog-featured .btn-catalog { border-color:var(--green); color:var(--green-d); }
.catalog-featured .btn-catalog:hover { background:var(--green); color:#fff; }

/* ── QUY TRÌNH ────────────────────────────────────────────── */
.b2b-steps { background:var(--white); padding:72px 0; }
.steps-grid { display:grid; grid-template-columns:1fr; gap:22px; margin-top:32px; }
.step-item { position:relative; background:var(--bg); border-radius:var(--radius);
  padding:26px 22px 24px; }
.step-num { display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; background:var(--blue); color:#fff;
  font-size:17px; font-weight:900; margin-bottom:13px; }
.step-item h3 { font-size:17px; font-weight:800; color:var(--dark); margin-bottom:8px; }
.step-item p  { font-size:14.5px; color:var(--gray); }

/* ── CTA BANNER trên trang chủ ────────────────────────────── */
.hi-b2b-cta { background:linear-gradient(135deg,#064E3B 0%,#0866C6 100%); padding:56px 0; }
.b2b-cta-inner { text-align:center; color:#fff; }
.b2b-cta-label { display:inline-block; font-size:11px; font-weight:800;
  letter-spacing:1.3px; text-transform:uppercase; color:#6EE7B7; margin-bottom:10px; }
.b2b-cta-title { font-size:clamp(22px,4.6vw,32px); font-weight:800;
  line-height:1.25; margin-bottom:12px; }
.b2b-cta-sub { font-size:15.5px; opacity:.9; margin:0 auto 26px; max-width:620px; }
.btn-b2b-cta { display:inline-flex; align-items:center; justify-content:center;
  background:var(--white); color:#0550A0; font-size:15px; font-weight:800;
  padding:15px 30px; border-radius:10px; transition:transform .2s, box-shadow .2s; }
.btn-b2b-cta:hover { transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.22); }

/* ── TABLET 768px ─────────────────────────────────────────── */
@media (min-width: 768px) {
  .b2b-hero { padding:150px 0 90px; }
  .b2b-hero-cta { flex-direction:row; align-items:center; gap:14px; }
  .pillar-grid   { grid-template-columns:repeat(2,1fr); }
  .catalog-grid  { grid-template-columns:repeat(2,1fr); }
  .steps-grid    { grid-template-columns:repeat(2,1fr); }
  .lng-stat-label { font-size:12.5px; }
}

/* ── DESKTOP 1024px ───────────────────────────────────────── */
@media (min-width: 1024px) {
  .lng-inner    { grid-template-columns:1.55fr 1fr; gap:48px; }
  .catalog-grid { grid-template-columns:repeat(4,1fr); }
  .steps-grid   { grid-template-columns:repeat(4,1fr); }
  .b2b-pillars, .b2b-lng, .b2b-catalog, .b2b-steps { padding:88px 0; }
}