/* eOTP landing mới (L2): hero.css (L0 đã duyệt) + khung section + khối a-* (L2a). Khuôn bố cục infobip.com + kính mờ Apple.
   Vibe: sáng, rộng, chữ to mảnh, ảnh sản phẩm thật rất lớn, vài mảng màu đậm và thẻ kính nổi. */

:root {
  --bg: #EEF2FC;
  --ink: #111111;
  --ink-2: #3A3A3A;
  --blue: #28B8F8;
  --blue-d: #0E9AD9;
  --green: #88C030;
  --blue-soft: #DFF4FE;
  --green-soft: #E1EFCB; /* #88C030 pha 25% với trắng */
  --font: "Be Vietnam Pro", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, "JetBrains Mono", Consolas, monospace;
  --wrap: 1160px;
  --glass-bg: rgba(255, 255, 255, .42);
  --glass-blur: blur(22px) saturate(1.8);
  --glass-border: 1px solid rgba(255, 255, 255, .65);
  --glass-shadow: 0 10px 40px rgba(17, 17, 17, .10), inset 0 1px 0 rgba(255, 255, 255, .95);
  --lp2-util-h: 40px; /* thanh phụ dính top 0 */
  --lp2-nav-h: 64px;  /* nav kính 62 + viền 2, dính ngay dưới thanh phụ */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.lp2 {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
:where(.lp2) a { color: inherit; text-decoration: none; }
.lp2 img { display: block; max-width: 100%; height: auto; }
/* 9/11 anh chốt "không cho chọn ảnh": mọi ảnh trang trí không bôi chọn, không kéo ra ảnh ma, không nhận chuột.
   Ảnh nằm trong link (logo menu, pill, logo footer) vẫn nhận chuột để bấm link, nhưng không kéo được. */
.lp2 img { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.lp2-logo, .lp2-pill, .lpb-foot-logo { -webkit-user-drag: none; } /* 9/11: chặn kéo LINK bọc logo (img đã pointer-events:none nên dragstart rơi vào <a>) */
.lp2 a img { pointer-events: auto; }
/* ảnh đã bỏ nhận chuột nên chuột rơi xuống khung ảnh: khung cũng không cho bôi chọn (kéo từ giữa ảnh không bôi chữ/ảnh lân cận) */
.lp2-shot, .lpa-card-media, .lpa-ch-shot, .lpa-api-shot, .lpb-cta-media { -webkit-user-select: none; user-select: none; }
.lp2 :focus { outline: none; }
.lp2 :focus-visible { outline: 2px solid var(--blue-d); outline-offset: 2px; }
/* Link + nút thanh phụ / nav / footer / hộp: bấm chuột không viền, chỉ bàn phím (:focus-visible) mới có viền. */
.lp2 a:focus:not(:focus-visible), .lp2 button:focus:not(:focus-visible), .lpc-dlg :focus:not(:focus-visible) { outline: none; }

.lp2-wrap { width: min(var(--wrap), calc(100% - 48px)); margin-inline: auto; }

/* ---------- Nền màu loang sau nav + hero (để kính mờ thấy màu đi qua, kiểu Apple/iOS) ---------- */
.lp2-bg { position: absolute; top: 0; left: 0; width: 100%; height: 1500px; overflow: hidden; z-index: 0; pointer-events: none; }
.lp2-glow { position: absolute; border-radius: 50%; }
.lp2-glow-blue   { right: 4%;  top: -170px; width: 720px; height: 460px; background: radial-gradient(closest-side, rgba(40, 184, 248, .62), rgba(40, 184, 248, 0)); }
.lp2-glow-violet { left: 26%;  top: -190px; width: 560px; height: 380px; background: radial-gradient(closest-side, rgba(124, 140, 248, .40), rgba(124, 140, 248, 0)); }
.lp2-glow-green  { left: -4%;  top: 60px;   width: 620px; height: 520px; background: radial-gradient(closest-side, rgba(136, 192, 48, .48), rgba(136, 192, 48, 0)); }
.lp2-glow-blue2  { right: -6%; top: 820px;  width: 700px; height: 640px; background: radial-gradient(closest-side, rgba(40, 184, 248, .42), rgba(40, 184, 248, 0)); }
main { position: relative; z-index: 1; }

/* ---------- Thanh phụ + nav dính khi cuộn (khuôn infobip: cả hai cùng dính, VI|EN + Đăng nhập luôn hiện) ----------
   Hai khối anh em cùng sticky (thanh phụ top 0, nav top = cao thanh phụ) → không bọc lại HTML, không nhảy layout.
   lp.js gắn .is-scrolled khi scrollY > 8: nav bóng đậm hơn. Thanh phụ (anh chốt 9/11 "nó chỉ làm mờ đi thôi", như infobip):
   chỉ làm mờ nội dung trôi phía sau, KHÔNG phủ màu (nền trắng tối đa .08 để Safari bật blur), không viền, không bóng — cả 2 trạng thái. */
.lp2-util, .lp2-util.is-scrolled {
  background: rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 0; box-shadow: none;
}
.lp2-util {
  position: sticky; top: 0; z-index: 51;
  height: var(--lp2-util-h); font-size: 13px; font-weight: 500; white-space: nowrap;
}
/* Bấm anchor: tiêu đề không chui dưới thanh phụ + nav (trang docs tự lo bằng scroll-padding của docs.css) */
body.lp2:not(:has(.dc)) [id] { scroll-margin-top: calc(var(--lp2-util-h) + var(--lp2-nav-h) + 16px); }
.lp2-util-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* Máy tính (> 1100px, anh chốt 10/11 "menu full màn hình"): thanh phụ bỏ trần --wrap, mép trùng mép nav kính (cách mép màn 24px).
   Chỉ thanh phụ — .lp2-wrap của thân trang vẫn khung 1160. */
@media (min-width: 1101px) { .lp2-wrap.lp2-util-in { width: calc(100% - 48px); } }
.lp2-util-l { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.lp2-util-l span { color: rgba(17, 17, 17, .35); }
.lp2-util-l a:hover, .lp2-login:hover { text-decoration: underline; text-underline-offset: 3px; }
.lp2-util-r { display: flex; align-items: center; gap: 16px; }
/* Nút ngôn ngữ (globe + mã ngữ + menu 2 dòng) ở thanh phụ: kiểu ở lp-b.css mục 7 (dùng chung với footer). */
.lp2-login { background: #fff; border-radius: 8px; padding: 3px 10px; }

/* ---------- Thanh menu kính nổi ---------- */
.lp2-nav {
  position: sticky; top: var(--lp2-util-h); z-index: 50;
  width: calc(100% - 48px); margin: 0 auto; /* full màn (10/11): cách mỗi mép 24px, không trần --wrap */
  border-radius: 16px;
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: box-shadow .25s;
}
.lp2-nav.is-scrolled { box-shadow: 0 10px 40px rgba(17, 17, 17, .12), inset 0 1px 0 rgba(255, 255, 255, .95); }
.lp2-nav-in { height: 62px; display: flex; align-items: center; gap: 24px; padding: 0 9px 0 16px; }
.lp2-logo img { height: 36px; width: auto; }
.lp2-menu { display: flex; align-items: center; gap: 4px; flex: 1; }
.lp2-menu > a { padding: 10px 14px; border-radius: 12px; font-size: 15px; font-weight: 500; white-space: nowrap; transition: background .2s; }
.lp2-menu > a:hover { background: rgba(17, 17, 17, .05); }
.lp2-menu-act { display: none; }
.lp2-nav-act { display: flex; align-items: center; gap: 8px; }
.lp2-nav-act .lp2-btn { font-size: 14px; }
.lp2-burger { display: none; }

/* ---------- Nút ---------- */
.lp2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; padding: 0 22px; border-radius: 16px; border: 1px solid transparent;
  font-family: var(--font); font-size: 16px; font-weight: 600; line-height: 1; white-space: nowrap;
  cursor: pointer; transition: background .2s, border-color .2s, box-shadow .2s;
}
.lp2-btn-main { background: var(--blue); border-color: var(--blue); color: #fff; }
.lp2-btn-main:hover { background: var(--blue-d); border-color: var(--blue-d); }
.lp2-btn-line { background: transparent; border-color: var(--ink); color: var(--ink); }
.lp2-btn-line:hover { background: rgba(17, 17, 17, .05); }
.lp2-btn-dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.lp2-btn-dark:hover { background: #2A2A2A; }
.lp2-btn-lg { padding: 0 24px; }

/* ---------- Hero ---------- */
.lp2-hero { position: relative; padding: 16px 0 150px; overflow-x: clip; }
.lp2-hero-in { display: flex; flex-direction: column; align-items: center; text-align: center; }

.lp2-pill {
  display: flex; align-items: center; gap: 18px;
  max-width: 940px; min-height: 70px; padding: 12px 12px 12px 22px;
  background: var(--ink); color: #fff; border-radius: 16px; text-align: left;
}
/* Logo eOTP thật trong pill đen (khuôn infobip: logo sản phẩm bên trái, anh chốt 9/11), thay chip chữ cũ. alt = khoá pill_tag. */
.lp2-pill .lp2-pill-logo { flex: none; display: block; width: auto; height: 28px; } /* 2 class: đè .lp2 img { height: auto } */
.lp2-pill-sep { flex: none; width: 1px; height: 40px; background: rgba(255, 255, 255, .35); }
.lp2-pill-txt { font-size: 18px; font-weight: 400; line-height: 1.3; white-space: nowrap; }
.lp2-pill-btn {
  flex: none; display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 22px;
  background: var(--blue); color: #fff; border-radius: 12px; font-size: 16px; font-weight: 600; transition: background .2s;
}
.lp2-pill:hover .lp2-pill-btn { background: var(--blue-d); }

.lp2-h1 {
  position: relative; z-index: 1; margin: 104px 0 0; padding-bottom: 6px; max-width: 1160px;
  font-size: 64px; line-height: 1.08; font-weight: 600; letter-spacing: -1.5px; color: var(--ink);
}
.lp2-sub { position: relative; z-index: 1; margin: 26px 0 0; max-width: 860px; text-wrap: balance; font-size: 20px; line-height: 1.5; color: var(--ink-2); }
.lp2-cta { position: relative; z-index: 1; margin-top: 40px; display: flex; gap: 16px; justify-content: center; }

/* Hàng 4 chip giá trị (kính mờ nhỏ) */
.lp2-chips { position: relative; z-index: 1; list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.lp2-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px;
  font-size: 15px; font-weight: 500; color: var(--ink); white-space: nowrap;
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: var(--glass-border); box-shadow: var(--glass-shadow); border-radius: 999px;
}
/* Dải nền tảng: hàng chữ phẳng + icon đơn sắc, cùng nhịp dải logo khách infobip */
.lp2-plat { position: relative; z-index: 1; margin-top: 36px; display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; }
.lp2-plat-lbl { font-size: 14px; font-weight: 500; color: #8A8F95; }
.lp2-plat-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 32px; }
.lp2-plat-list li { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 600; color: #5F6368; white-space: nowrap; transition: color .2s; }
.lp2-plat-list li:hover { color: var(--ink); }
.lp2-plat-list svg { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lp2-chip svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--blue-d); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Khối media: ảnh tả thực (Codex, không phải ảnh chụp hệ thống) 1536×1024 hiển thị 760×507 (tỉ lệ 2.02×, luật ảnh ≥ 2×),
   căn giữa khung 1160; 2 thẻ kính hai bên đè lên mảng màu đặc + mép hình để kính thấy màu đi qua. */
.lp2-media { position: relative; width: 100%; max-width: 1160px; margin-top: 64px; text-align: left; }
.lp2-shot {
  position: relative; z-index: 1; margin: 0 auto; width: 760px; max-width: 100%;
  border-radius: 24px; overflow: hidden; background: var(--bg);
  box-shadow: 0 24px 64px rgba(17, 17, 17, .10), 0 0 0 1px rgba(17, 17, 17, .05);
}
.lp2-shot img { width: 100%; aspect-ratio: 1536 / 1024; object-fit: cover; }

.lp2-blob { position: absolute; z-index: 0; border-radius: 40px; }
.lp2-blob-blue  { background: var(--blue);  left: 40px;  top: 20px;  width: 220px; height: 300px; }
.lp2-blob-green { background: var(--green); right: 30px; top: 230px; width: 260px; height: 300px; }
.lp2-blob-dark  { background: var(--ink);   right: -10px; top: 140px; width: 86px; height: 126px; border-radius: 28px; } /* thu còn ~1/3 diện tích */

.lp2-glass {
  position: absolute; z-index: 2;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 20px;
  padding: 14px 16px 16px;
}
.lp2-card-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.lp2-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(136, 192, 48, .25); }

.lp2-card-zns { left: 0; top: 64px; width: 294px; }
/* Ô mã: chữ HTML thật, 6 số trong một ô lớn */
.lp2-otp-code {
  display: flex; justify-content: center; gap: 10px; padding: 14px 12px;
  background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .9); border-radius: 14px;
  box-shadow: 0 2px 8px rgba(17, 17, 17, .06);
  font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: 0; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.lp2-otp-exp { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; font-weight: 500; color: #3A3A3A; }
.lp2-otp-exp svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--blue-d); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.lp2-card-code { right: -48px; bottom: -64px; }
.lp2-card-code pre {
  margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--ink);
  white-space: pre; overflow-x: auto;
}
.lp2-card-code .c { color: #5A5A5A; }

/* ---------- Màn vừa ---------- */
@media (max-width: 1360px) {
  .lp2-card-code { right: -16px; }
}
@media (max-width: 1100px) {
  .lp2-menu > a { padding: 10px 10px; }
  .lp2-nav-act .lp2-btn-line { display: none; }
  .lp2-h1 { font-size: 56px; letter-spacing: -1.2px; }
}

/* ---------- Di động ---------- */
@media (max-width: 760px) {
  :root { --lp2-util-h: 36px; --lp2-nav-h: 58px; }
  .lp2-wrap { width: calc(100% - 32px); }
  .lp2-util { font-size: 12px; }
  .lp2-util-l { gap: 6px; }
  .lp2-util-l > :nth-child(3), .lp2-util-l > :nth-child(4) { display: none; }
  .lp2-util-r { gap: 10px; }

  .lp2-nav { width: calc(100% - 32px); }
  .lp2-nav-in { height: 56px; gap: 8px; padding: 0 6px 0 12px; justify-content: space-between; }
  .lp2-logo img { height: 32px; }
  .lp2-nav-act { display: none; }
  .lp2-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); cursor: pointer;
  }
  .lp2-burger:hover { background: rgba(17, 17, 17, .05); }
  .lp2-menu {
    display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px; padding: 8px;
    background: #fff; /* lồng trong nav đã có backdrop-filter → kính con không blur được, dùng nền đặc */
    border: 1px solid rgba(17, 17, 17, .06); border-radius: 16px; box-shadow: 0 8px 32px rgba(17, 17, 17, .12);
  }
  .lp2-menu.is-open { display: flex; }
  .lp2-menu > a { font-size: 16px; padding: 12px 14px; }
  .lp2-menu-act { display: flex; flex-direction: column; gap: 8px; padding: 8px 6px 4px; }
  .lp2-menu-act .lp2-btn { width: 100%; }

  .lp2-hero { padding: 16px 0 72px; }
  .lp2-pill { flex-wrap: wrap; gap: 12px; padding: 16px; min-height: 0; width: 100%; }
  .lp2-pill-sep { display: none; }
  .lp2-pill .lp2-pill-logo { height: 24px; }
  .lp2-pill-txt { flex: 1 0 100%; font-size: 16px; white-space: normal; }
  .lp2-pill-btn { height: 40px; padding: 0 18px; font-size: 15px; }

  .lp2-h1 { margin-top: 48px; font-size: 38px; line-height: 1.14; letter-spacing: -.6px; }
  .lp2-br { display: none; }
  .lp2-sub { margin-top: 20px; font-size: 17px; }
  .lp2-cta { margin-top: 28px; flex-direction: column; width: 100%; gap: 12px; }
  .lp2-cta .lp2-btn { width: 100%; }
  .lp2-chips { margin-top: 20px; gap: 8px; }
  .lp2-chip { height: 36px; font-size: 14px; padding: 0 12px 0 10px; }
  .lp2-plat { margin-top: 28px; flex-direction: column; gap: 12px; }
  .lp2-plat-list { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; column-gap: 20px; row-gap: 12px; }
  .lp2-plat-list li { font-size: 15px; gap: 6px; }
  .lp2-plat-list svg { width: 20px; height: 20px; }

  .lp2-media { margin-top: 40px; display: flex; flex-direction: column; gap: 16px; }
  .lp2-shot { border-radius: 16px; width: 100%; }
  .lp2-glass { position: relative; inset: auto; width: 100%; }
  .lp2-otp-code { font-size: 30px; gap: 12px; }
  .lp2-card-code { padding: 12px; }
  .lp2-card-code pre { font-size: 11px; letter-spacing: -.2px; }

  .lp2-blob { border-radius: 32px; }
  .lp2-blob-blue  { left: -50px; right: auto; top: 300px; width: 190px; height: 260px; }
  .lp2-blob-green { left: auto; right: -40px; top: auto; bottom: 30px; width: 190px; height: 200px; }
  .lp2-blob-dark  { left: auto; right: -40px; top: -20px; width: 82px; height: 92px; border-radius: 22px; }
  .lp2-glow-blue   { right: -40%; width: 420px; height: 320px; top: -120px; }
  .lp2-glow-violet { left: -10%;  width: 360px; height: 260px; top: -140px; }
  .lp2-glow-green  { left: -30%;  width: 380px; height: 360px; top: 200px; }
  .lp2-glow-blue2  { right: -40%; width: 420px; height: 420px; top: 900px; }
}

/* =====================================================================
   L2a: khung chung các section + 3 khối a-* (values, channels, api). Dải a-trust đã bỏ 9/11 (anh: thừa).
   Phần trên là nguyên hero.css (L0 đã duyệt). L2b nạp thêm lp-b.css (build.py chèn <link> nếu file tồn tại).
   Dùng chung cho L2b: .lp2-sec (padding 112/72), .lp2-sec-head, .lp2-h2, .lp2-lead, .lp2-glass-chip, .lp2-btn*.
   ===================================================================== */
body > footer { position: relative; z-index: 1; }

/* Dải gợi ý tiếng Việt (chỉ bản gốc en, lp.js mở) */
.lp2-langhint {
  position: relative; z-index: 3; display: flex; align-items: center; justify-content: center;
  min-height: 36px; padding: 0 48px; background: var(--blue-soft); color: var(--ink); font-size: 14px; font-weight: 500;
}
.lp2-langhint[hidden] { display: none; }
.lp2-langhint-go { display: inline-flex; gap: 6px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(17, 17, 17, .3); }
.lp2-langhint-go:hover { text-decoration-color: var(--ink); }
.lp2-langhint-x {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border: 0; border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer;
}
.lp2-langhint-x:hover { background: rgba(17, 17, 17, .06); }
.lp2-langhint-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* Khung section chung */
.lp2-sec { position: relative; padding: 112px 0; }
.lp2-sec + .lp2-sec { padding-top: 0; } /* hai khối liền nhau: khoảng giữa = 112, không cộng đôi 224 */
/* Hero nối thẳng "Vì sao dev chọn eOTP" (bỏ dải a-trust 9/11): khoảng = đáy thẻ code kính (lố đáy hero 64px) → tiêu đề 112 (390: 72) */
.lp2-hero:has(+ .lp2-sec) { padding-bottom: 176px; }
.lp2-hero + .lp2-sec { padding-top: 0; }
.lp2-sec-head { max-width: 820px; margin: 0 auto 56px; text-align: center; }
.lp2-h2 { margin: 0; padding-bottom: 4px; font-size: 48px; line-height: 1.16; font-weight: 600; letter-spacing: -1px; color: var(--ink); text-wrap: balance; }
.lp2-lead { margin: 16px 0 0; font-size: 19px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }

/* Chip kính nổi trên ảnh */
.lp2-glass-chip {
  position: absolute; z-index: 2; left: 12px; bottom: 12px;
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap;
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: var(--glass-border); box-shadow: var(--glass-shadow);
}

/* Ảnh chưa có (build.py gắn data-wait khi thiếu file img/sec/ của L2c): ô xám có nhãn, tự hết khi có ảnh */
.lp2 img[data-wait] { visibility: hidden; }
figure:has(> img[data-wait]) { background: repeating-linear-gradient(135deg, #D5DCE6 0 14px, #DCE2EB 14px 28px); }
figure:has(> img[data-wait])::after {
  content: "Ảnh chờ L2c"; position: absolute; inset: 0; display: grid; place-items: center;
  font: 600 13px/1 var(--font); color: #6B7076;
}


/* ---------- a-values: 4 thẻ trắng bo 24 ---------- */
.lpa-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lpa-card {
  display: flex; flex-direction: column; background: #fff; border-radius: 24px; padding: 12px 12px 28px;
}
/* hover nâng 4px + bóng: xem mục "Hiệu ứng" cuối file (chỉ translate/opacity, không animate box-shadow) */
.lpa-card-media { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: var(--blue-soft); }
.lpa-card-media img { width: 100%; height: 100%; object-fit: cover; }
.lpa-card-body { display: flex; flex-direction: column; flex: 1; padding: 20px 12px 0; }
.lpa-tag { align-self: flex-start; padding: 3px 8px; border-radius: 6px; background: var(--green); color: var(--ink); font-size: 13px; font-weight: 600; }
.lpa-card-h { margin: 16px 0 0; font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -.4px; text-wrap: balance; }
.lpa-card-p { flex: 1; margin: 12px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.lpa-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-size: 16px; font-weight: 600; }
.lpa-link span { transition: transform .2s; }
.lpa-link:hover span { transform: translateX(3px); }

/* ---------- a-channels: panel xanh nhạt ---------- */
.lpa-ch-panel {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center;
  padding: 64px; background: var(--blue-soft); border-radius: 24px; overflow: hidden;
}
.lpa-ch-h2 { font-size: 40px; }
.lpa-ch-tabs { display: flex; flex-direction: column; gap: 4px; margin-top: 32px; }
.lpa-ch-tab {
  display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 16px 20px; text-align: left;
  border: 0; border-radius: 16px; background: transparent; color: var(--ink); font-family: var(--font); cursor: pointer;
  transition: background .2s, box-shadow .2s;
}
.lpa-ch-tab:hover { background: rgba(255, 255, 255, .5); }
.lpa-ch-tab[aria-selected="true"] { background: #fff; box-shadow: 0 2px 10px rgba(17, 17, 17, .05); }
.lpa-ch-tab-t { display: flex; align-items: center; gap: 10px; font-size: 18px; line-height: 1.3; font-weight: 600; }
.lpa-ch-tab-d { font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.lpa-badge { padding: 2px 8px; border-radius: 6px; background: var(--green); color: var(--ink); font-size: 12px; font-weight: 600; }
.lpa-badge:empty { display: none; }
.lpa-ch-note { display: flex; align-items: center; gap: 8px; margin: 20px 0 0 20px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.lpa-ch-note svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--blue-d); stroke-width: 2; stroke-linecap: round; }

.lpa-ch-right { position: relative; width: 100%; max-width: 460px; margin-inline: auto; } /* = khung ảnh → chip neo theo ảnh, mọi cỡ */
.lpa-ch-shot {
  position: relative; z-index: 1; margin: 0 auto; width: 100%; max-width: 460px; aspect-ratio: 1;
  border-radius: 24px; overflow: hidden; background: #CDE8F8; box-shadow: 0 24px 64px rgba(17, 17, 17, .10);
}
.lpa-ch-shot img { width: 100%; height: 100%; object-fit: cover; }
.lpa-ch-blob { position: absolute; z-index: 0; border-radius: 32px; }
.lpa-ch-blob-blue  { background: var(--blue);  left: -36px; top: 28px; width: 150px; height: 190px; }
.lpa-ch-blob-green { background: var(--green); right: -40px; bottom: 44px; width: 160px; height: 200px; }
.lpa-ch-right .lp2-glass { position: absolute; width: auto; }
/* 9/11: máy trong ảnh studio chiếm ~4–89% chiều cao → nhãn kênh treo dưới mép ảnh, mã channel treo trên mép ảnh (không đè máy) */
.lpa-ch-tags { left: -24px; top: calc(100% - 24px); display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; }
.lpa-ch-tag { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; white-space: nowrap; opacity: .38; transition: opacity .2s; }
.lpa-ch-tag.is-on { opacity: 1; }
.lpa-ch-tag[data-ch="zalo"] .lp2-dot { background: var(--blue); box-shadow: 0 0 0 3px rgba(40, 184, 248, .25); }
.lpa-ch-code { right: -24px; bottom: calc(100% - 8px); padding: 10px 14px; }
.lpa-ch-code code { font-family: var(--mono); font-size: 14px; color: var(--ink); white-space: nowrap; }
.lpa-ch-code span { color: var(--blue-d); font-weight: 700; }

/* ---------- a-api: panel tối ---------- */
.lpa-api-panel {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px;
  padding: 48px 56px; background: var(--ink); color: #fff; border-radius: 24px; align-items: start;
}
.lpa-api-glow { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; }
.lpa-api-glow-blue  { left: 22%; top: 220px; width: 560px; height: 440px; background: radial-gradient(closest-side, rgba(40, 184, 248, .40), rgba(40, 184, 248, 0)); }
.lpa-api-glow-green { left: -100px; bottom: -80px; width: 480px; height: 400px; background: radial-gradient(closest-side, rgba(136, 192, 48, .32), rgba(136, 192, 48, 0)); }
.lpa-api-left, .lpa-api-right { position: relative; z-index: 1; min-width: 0; }
.lpa-api-h2 { font-size: 44px; color: #fff; }
.lpa-api-lead { color: rgba(255, 255, 255, .72); }

.lpa-code {
  margin-top: 24px; overflow: hidden; border-radius: 16px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.lpa-code-tabs { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid rgba(255, 255, 255, .10); }
.lpa-code-tab {
  height: 34px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent;
  color: rgba(255, 255, 255, .65); font: 500 14px/1 var(--font); cursor: pointer; transition: background .2s, color .2s;
}
.lpa-code-tab:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.lpa-code-tab[aria-selected="true"] { color: #fff; background: rgba(255, 255, 255, .14); }
/* Khung code cao cố định theo tab curl (15 dòng): code dài hơn cuộn trong khung → đổi tab không nhảy layout, panel ≤ ~760px ở 1440. */
.lpa-code-panes { display: grid; }
.lpa-code-pane {
  grid-area: 1 / 1; min-width: 0; max-height: 350px; padding: 14px 20px; overflow: auto; visibility: hidden;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .28) transparent;
}
.lpa-code-pane.is-on { visibility: visible; }
.lpa-code pre { margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1.65; color: #E8EAED; white-space: pre; }
.lpa-code .c { color: #8A9099; }
.lpa-code .s { color: #B5DC7A; }
.lpa-code .k { color: #7FD3FB; }
.lpa-code-note { margin: 0; padding: 12px 20px; border-top: 1px solid rgba(255, 255, 255, .10); font-size: 13px; color: rgba(255, 255, 255, .7); }
.lpa-code-note code { font-family: var(--mono); color: #fff; }

.lpa-api-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.lpa-btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .9); color: #fff; }
.lpa-btn-ghost:hover { background: rgba(255, 255, 255, .08); }

.lpa-api-right { align-self: start; display: flex; flex-direction: column; gap: 24px; padding-top: 8px; }
.lpa-api-shot { position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: #2A2A2A; }
.lpa-api-shot img { width: 100%; height: 100%; object-fit: cover; }
.lpa-api-shot:has(> img[data-wait]) { background: repeating-linear-gradient(135deg, #2A2A2A 0 14px, #313131 14px 28px); }
.lpa-api-shot:has(> img[data-wait])::after { color: rgba(255, 255, 255, .5); }
.lpa-steps { list-style: none; margin: 0; padding: 0; }
.lpa-step { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 12px; padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.lpa-step-t { font-size: 18px; font-weight: 600; }
.lpa-step-ep { justify-self: end; font-family: var(--mono); font-size: 13px; color: rgba(255, 255, 255, .7); white-space: nowrap; }
.lpa-step-ep b { color: var(--green); font-weight: 600; }
.lpa-step-d { grid-column: 1 / -1; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .72); }

/* ---------- Màn vừa ---------- */
@media (max-width: 1100px) {
  .lpa-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lpa-ch-panel, .lpa-api-panel { grid-template-columns: minmax(0, 1fr); }
  .lpa-api-shot { width: 100%; max-width: 720px; margin-inline: auto; } /* L2-ghép: ảnh 1536px, giữ ≥ 2× khi panel 1 cột */
}

/* ---------- Di động ---------- */
@media (max-width: 760px) {
  .lp2-langhint { padding: 6px 44px; text-align: center; }
  .lp2-sec { padding: 72px 0; }
  .lp2-hero:has(+ .lp2-sec) { padding-bottom: 72px; }
  .lp2-sec-head { margin-bottom: 32px; }
  .lp2-h2 { font-size: 32px; letter-spacing: -.4px; }
  .lp2-lead { font-size: 17px; }


  .lpa-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lpa-card-h { font-size: 24px; }
  .lpa-card:hover { translate: none; }

  .lpa-ch-panel { gap: 56px; padding: 32px 16px 72px; border-radius: 20px; }
  .lpa-ch-h2, .lpa-api-h2 { font-size: 30px; }
  .lpa-ch-tabs { margin-top: 24px; }
  .lpa-ch-tab { padding: 14px 16px; }
  .lpa-ch-note { margin-left: 0; align-items: flex-start; }
  .lpa-ch-tags { left: -8px; top: calc(100% - 20px); padding: 10px 12px; }
  .lpa-ch-code { right: -8px; bottom: calc(100% - 6px); padding: 8px 10px; }
  .lpa-ch-code code { font-size: 12px; }
  .lpa-ch-blob-blue  { left: -36px; top: -16px; width: 110px; height: 140px; }
  .lpa-ch-blob-green { right: -36px; bottom: -16px; width: 120px; height: 150px; }

  .lpa-api-panel { gap: 32px; padding: 40px 16px 24px; border-radius: 20px; }
  .lpa-code pre { font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; } /* 390: xuống dòng thay vì cắt ngang */
  .lpa-code-pane { padding: 14px 14px; max-height: 420px; }
  .lpa-api-cta .lp2-btn { flex: 1 1 100%; }
}

/* ---------- Hiệu ứng (anh chốt 9/11 "web còn hơi tĩnh") ----------
   Luật: KHÔNG ẩn nội dung chờ cuộn (không fade-in từ opacity 0) — mọi thứ hiện sẵn; chỉ animate transform/translate/opacity
   (không animate box-shadow/width → không tụt FPS, không layout shift); prefers-reduced-motion: reduce → tắt hết.
   Dùng thuộc tính `translate` riêng cho trôi/thở/nâng để không đè `transform` sẵn có (vd .lpb-tier-hot nổi -16px). */
.lpa-card, .lpb-tier, .lpb-qa { position: relative; }
.lpa-card::after, .lpb-tier::after, .lpb-qa::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 18px 44px rgba(17, 17, 17, .14); opacity: 0;
}
.lpa-card:hover::after, .lpb-tier:hover::after, .lpb-qa:hover::before { opacity: 1; }
.lpa-card:hover, .lpb-tier:hover, .lpb-qa:hover { translate: 0 -4px; }
/* nút chính: vệt sáng lướt qua; mũi tên trong nút trượt 3px */
.lp2-btn-main, .lpb-btn-main, .lp2-pill-btn { position: relative; overflow: hidden; isolation: isolate; }
.lp2-btn-main::before, .lpb-btn-main::before, .lp2-pill-btn::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 60%; pointer-events: none;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .38) 50%, transparent 100%);
  transform: translateX(-120%); opacity: 0;
}
.lp2-btn-main:hover::before, .lpb-btn-main:hover::before, .lp2-pill:hover .lp2-pill-btn::before { transform: translateX(260%); opacity: 1; }
.lp2-btn > span[aria-hidden="true"], .lp2-pill-btn > span[aria-hidden="true"] { display: inline-block; }
.lp2-btn:hover > span[aria-hidden="true"], .lp2-pill:hover .lp2-pill-btn > span[aria-hidden="true"] { translate: 3px 0; }
.lp2-logo:hover img { scale: 1.03; }
/* hộp countries + menu ngôn ngữ: mở bằng scale .96 → 1 + opacity, 150ms */
@keyframes lp2-pop { from { opacity: 0; scale: .96; } to { opacity: 1; scale: 1; } }
@keyframes lp2-drift-a { 0%, 100% { translate: 0 0; } 50% { translate: 28px -22px; } }
@keyframes lp2-drift-b { 0%, 100% { translate: 0 0; } 50% { translate: -34px 20px; } }
@keyframes lp2-drift-c { 0%, 100% { translate: 0 0; } 50% { translate: -22px 30px; } }
@keyframes lp2-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@media (prefers-reduced-motion: no-preference) {
  .lp2-blob-blue  { animation: lp2-drift-a 22s ease-in-out infinite; }
  .lp2-blob-green { animation: lp2-drift-b 26s ease-in-out -6s infinite; }
  .lp2-blob-dark  { animation: lp2-drift-c 18s ease-in-out -3s infinite; }
  .lp2-card-zns   { animation: lp2-float 7s ease-in-out infinite; }
  .lp2-card-code  { animation: lp2-float 8s ease-in-out -3.5s infinite; }
  .lpa-ch-right .lp2-glass { animation: lp2-float 6.5s ease-in-out -2s infinite; }
  .lpa-ch-right .lp2-glass + .lp2-glass { animation-duration: 7.5s; animation-delay: -5s; }
  .lp2-shot, .lp2-card-zns, .lp2-card-code { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
  .lp2-shot { transform: translate3d(calc(var(--mx, 0) * 8px), calc(var(--my, 0) * 8px), 0); }
  .lp2-card-zns, .lp2-card-code { transform: translate3d(calc(var(--mx, 0) * -5px), calc(var(--my, 0) * -5px), 0); }
  .lpa-card, .lpb-tier, .lpb-qa { transition: translate .25s ease; }
  .lpa-card::after, .lpb-tier::after, .lpb-qa::before { transition: opacity .25s ease; }
  .lp2-btn-main:hover::before, .lpb-btn-main:hover::before, .lp2-pill:hover .lp2-pill-btn::before { transition: transform .6s ease, opacity .15s ease; }
  .lp2-btn > span[aria-hidden="true"], .lp2-pill-btn > span[aria-hidden="true"] { transition: translate .2s ease; }
  .lp2-logo img { transition: scale .2s ease; }
  .lpc-dlg[open] .lpc-box { animation: lp2-pop .15s ease-out; }
  .lp2-lng-menu:not([hidden]) { animation: lp2-pop .15s ease-out; transform-origin: top right; }
  .lpb-foot-lang .lp2-lng-menu:not([hidden]) { transform-origin: top left; }
  .lp2-lng.is-up .lp2-lng-menu:not([hidden]) { transform-origin: bottom left; }
  /* tab code: crossfade 180ms, pane cũ giữ hiện tới khi pane mới hiện xong (không trống) */
  .lpa-code-pane { opacity: 0; transition: opacity .18s ease, visibility 0s linear .18s; }
  .lpa-code-pane.is-on { opacity: 1; transition: opacity .18s ease, visibility 0s; }
}
@media (prefers-reduced-motion: reduce) {
  .lp2 *, .lp2 *::before, .lp2 *::after { animation: none !important; transition: none !important; }
}

/* ===== lp-b.css (L2b) ===== */
/* eOTP landing mới · L2b: 5 khối cuối (số liệu, giá, FAQ, CTA tối, footer xanh).
   Chỉ class tiền tố .lpb- để không đụng lp.css (L2a). Bám biến :root của hero.css (--bg, --ink, --blue, --green, --glass-*),
   có giá trị dự phòng nếu nạp riêng. Khuôn infobip: thẻ trắng bo 24 không bóng, nút cao 46 bo 16, panel tối bo 24, footer panel màu bo 24 + thanh đen. */

.lpb-sec { position: relative; padding: 112px 0; }
/* Ghép trang (L2-ghép): khối liền nhau không cộng đôi khoảng (giống .lp2-sec + .lp2-sec trong lp.css) */
.lp2-sec + .lpb-sec, .lpb-sec + .lpb-sec { padding-top: 0; }
.lpb-wrap { position: relative; z-index: 1; width: min(var(--wrap, 1160px), calc(100% - 48px)); margin-inline: auto; }

/* ---------- Đầu khối ---------- */
.lpb-head { max-width: 820px; margin: 0 auto 56px; text-align: center; }
.lpb-head-l { margin: 0; text-align: left; }
.lpb-eyebrow {
  display: inline-block; margin: 0 0 16px; padding: 6px 12px; border-radius: 10px;
  font-size: 14px; font-weight: 700; letter-spacing: .01em; line-height: 1.2;
  color: #4E7A12; background: rgba(136, 192, 48, .16); border: 1px solid rgba(136, 192, 48, .35);
}
.lpb-h2 {
  margin: 0; font-size: 48px; line-height: 1.12; font-weight: 600; letter-spacing: -1px;
  color: var(--ink, #111111); text-wrap: balance;
}
.lpb-lead { margin: 20px auto 0; max-width: 720px; font-size: 18px; line-height: 1.55; color: var(--ink-2, #3A3A3A); text-wrap: balance; }
.lpb-head-l .lpb-lead { margin-left: 0; }

/* ---------- Nút (cùng số đo .lp2-btn của hero) ---------- */
.lpb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; padding: 0 22px; border-radius: 16px; border: 1px solid transparent;
  font-family: var(--font, "Be Vietnam Pro", system-ui, sans-serif); font-size: 16px; font-weight: 600; line-height: 1; white-space: nowrap;
  text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s, color .2s;
}
.lpb-btn-main { background: var(--blue, #28B8F8); border-color: var(--blue, #28B8F8); color: #fff; }
.lpb-btn-main:hover { background: var(--blue-d, #0E9AD9); border-color: var(--blue-d, #0E9AD9); }
.lpb-btn-line { background: transparent; border-color: var(--ink, #111111); color: var(--ink, #111111); }
.lpb-btn-line:hover { background: rgba(17, 17, 17, .05); }
.lpb-btn-dark { background: var(--ink, #111111); border-color: var(--ink, #111111); color: #fff; }
.lpb-btn-dark:hover { background: #2A2A2A; }
.lpb-btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .85); color: #fff; }
.lpb-btn-ghost:hover { background: rgba(255, 255, 255, .1); }

/* ---------- 1. Số liệu ---------- */
.lpb-stats { padding-top: 96px; }
.lpb-stat-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lpb-stat {
  display: flex; flex-direction: column; justify-content: space-between; gap: 20px; min-height: 196px;
  padding: 32px 24px 28px; background: #fff; border-radius: 24px;
}
.lpb-stat-key { background: var(--ink, #111111); color: #fff; }
.lpb-stat-val { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.lpb-stat-num { font-size: 48px; line-height: 1; font-weight: 700; letter-spacing: -1px; font-variant-numeric: tabular-nums; color: inherit; }
.lpb-stat-unit { font-size: 18px; font-weight: 600; color: var(--blue-d, #0E9AD9); }
.lpb-stat-key .lpb-stat-unit { color: var(--blue, #28B8F8); }
.lpb-stat-lbl { margin: 0; font-size: 15px; line-height: 1.45; color: #5F6368; }
.lpb-stat-key .lpb-stat-lbl { color: rgba(255, 255, 255, .78); }

/* ---------- 2. Giá ---------- */
.lpb-price { overflow-x: clip; }
.lpb-price-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lpb-glow { position: absolute; border-radius: 50%; }
.lpb-glow-blue  { left: 50%; top: 48%; width: 680px; height: 760px; transform: translate(-30%, -50%); background: radial-gradient(closest-side, rgba(40, 184, 248, .55), rgba(40, 184, 248, 0)); }
.lpb-glow-green { left: 50%; top: 62%; width: 540px; height: 600px; transform: translate(-80%, -50%); background: radial-gradient(closest-side, rgba(136, 192, 48, .42), rgba(136, 192, 48, 0)); }

.lpb-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.lpb-tier {
  display: flex; flex-direction: column; padding: 32px 28px 28px; background: #fff; border-radius: 24px;
  border: 1px solid transparent;
}
.lpb-tier-hot {
  position: relative; z-index: 1; transform: translateY(-16px);
  background: var(--glass-bg, rgba(255, 255, 255, .42));
  -webkit-backdrop-filter: var(--glass-blur, blur(22px) saturate(1.8));
  backdrop-filter: var(--glass-blur, blur(22px) saturate(1.8));
  border: 2px solid var(--blue, #28B8F8);
  box-shadow: 0 24px 64px rgba(40, 184, 248, .22), inset 0 1px 0 rgba(255, 255, 255, .95);
}
.lpb-tier-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lpb-tier-name { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; }
.lpb-tier-tag { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: #EEF2FC; color: #3A3A3A; white-space: nowrap; }
.lpb-tier-hot .lpb-tier-tag { background: var(--blue, #28B8F8); color: #fff; }
.lpb-tier-quota { margin: 24px 0 0; font-size: 32px; line-height: 1.1; font-weight: 700; letter-spacing: -.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lpb-tier-note { margin: 8px 0 0; font-size: 15px; font-weight: 600; color: var(--blue-d, #0E9AD9); }
.lpb-tier-value { margin: 20px 0 0; font-size: 16px; line-height: 1.55; color: var(--ink-2, #3A3A3A); }
/* Quyền lợi từng cấp: checklist tick xanh lá. Danh sách flex:1 nên nút luôn nằm đáy thẻ, 3 thẻ cao bằng nhau (grid stretch). */
.lpb-tier-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 20px 0 28px; padding: 20px 0 0; border-top: 1px solid rgba(17, 17, 17, .08); flex: 1; }
.lpb-tier-list li { display: flex; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--ink-2, #3A3A3A); }
.lpb-tier-list li.is-all { font-weight: 600; }
.lpb-tier-list svg { width: 18px; height: 18px; flex: none; margin-top: 2px; fill: none; stroke: var(--green, #88C030); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.lpb-tier .lpb-btn { width: 100%; }
.lpb-price-foot { margin: 32px 0 0; text-align: center; font-size: 14px; color: #5F6368; }

/* ---------- 3. FAQ ---------- */
.lpb-faq-in { display: grid; grid-template-columns: 360px 1fr; gap: 64px; align-items: start; }
.lpb-qa-list { display: flex; flex-direction: column; gap: 12px; }
.lpb-qa { background: #fff; border-radius: 16px; }
.lpb-qa summary {
  position: relative; list-style: none; cursor: pointer; padding: 22px 64px 22px 24px;
  font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--ink, #111111); border-radius: 16px;
}
.lpb-qa summary::-webkit-details-marker { display: none; }
.lpb-qa summary::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%;
  background: #EEF2FC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform .2s, background-color .2s;
}
.lpb-qa[open] summary::after { transform: rotate(45deg); background-color: var(--blue-soft, #DFF4FE); }
.lpb-qa summary:hover::after { background-color: var(--blue-soft, #DFF4FE); }
.lpb-qa-a { padding: 0 24px 22px; }
.lpb-qa-a p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2, #3A3A3A); }

/* ---------- 4. CTA tối ---------- */
.lpb-cta { padding-bottom: 16px; }
.lpb-cta-panel {
  display: grid; grid-template-columns: 1fr 520px; gap: 56px; align-items: center;
  padding: 64px 56px 64px 88px; background: var(--ink, #111111); color: #fff; border-radius: 24px;
}
.lpb-cta-h2 { margin: 0; font-size: 48px; line-height: 1.12; font-weight: 600; letter-spacing: -1px; color: #fff; text-wrap: balance; }
.lpb-cta-sub { margin: 20px 0 0; font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, .78); }
.lpb-cta-btns { display: flex; gap: 16px; margin-top: 36px; flex-wrap: wrap; }
.lpb-cta-media {
  margin: 0; aspect-ratio: 3 / 2; border-radius: 20px; overflow: hidden; /* ảnh L2c 1536×1024 */
  background: linear-gradient(135deg, var(--blue, #28B8F8), var(--green, #88C030));
}
.lpb-cta-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- 5. Footer ---------- */
.lpb-foot { padding: 0 0 24px; }
.lpb-foot-panel {
  display: grid; grid-template-columns: 1.25fr .8fr .8fr 2fr .7fr; gap: 32px;
  padding: 40px 32px 48px; background: var(--blue, #28B8F8); color: var(--ink, #111111); border-radius: 24px;
}
.lpb-foot-logo { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 14px; color: var(--ink, #111111); text-decoration: none; }
/* Thẻ trắng giữ logo đầy đủ nổi trên nền xanh (mark xanh trên nền xanh bị chìm). */
.lpb-foot-card { display: inline-flex; align-items: center; padding: 10px 14px; border-radius: 14px; background: #fff; box-shadow: 0 6px 18px rgba(17, 17, 17, .10); }
.lpb-foot-card img { display: block; flex: none; width: auto; height: 32px; }
.lpb-foot-name { font-size: 18px; font-weight: 600; letter-spacing: -.2px; line-height: 1.3; color: var(--ink, #111111); }
.lpb-foot-h { margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(17, 17, 17, .35); font-size: 15px; font-weight: 700; }
.lpb-foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lpb-foot-col li { font-size: 15px; line-height: 1.4; font-weight: 500; overflow-wrap: anywhere; }
.lpb-foot-col a, .lpb-foot-lang a { color: inherit; text-decoration: none; }
.lpb-foot-col a:hover { text-decoration: underline; text-underline-offset: 3px; }
.lpb-foot-co li { font-size: 14px; line-height: 1.5; }
.lpb-foot-co .lpb-foot-legal { font-size: 15px; font-weight: 700; }
.lpb-foot-co a { font-weight: 600; }
/* Cột Ngôn ngữ: cùng nút globe như thanh phụ (mục 7), trên nền xanh là pill trắng .9. */

.lpb-foot-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px;
  padding: 22px 32px; background: var(--ink, #111111); color: #fff; border-radius: 24px; font-size: 14px;
}
.lpb-foot-bar p { margin: 0; }
.lpb-foot-bar-r { display: flex; gap: 24px; }
.lpb-foot-bar a { color: #fff; text-decoration: none; }
.lpb-foot-bar a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Màn vừa ---------- */
@media (max-width: 1240px) {
  .lpb-tier-quota { font-size: 28px; } /* L2-ghép: "100.000 OTP/tháng" giữ 1 dòng ở 1200 (iPad ngang) */
}
@media (max-width: 1100px) {
  .lpb-tier-quota { font-size: 24px; letter-spacing: -.3px; } /* 1 dòng ở 1024 */
}
@media (max-width: 960px) {
  .lpb-tier-quota { white-space: normal; }
}
@media (max-width: 1100px) {
  .lpb-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .lpb-faq-in { grid-template-columns: 1fr; gap: 32px; }
  .lpb-cta-panel { grid-template-columns: 1fr 360px; padding: 56px 48px; gap: 40px; }
  .lpb-foot-panel { grid-template-columns: repeat(2, 1fr); }
  .lpb-foot-brand { grid-column: 1 / -1; }
}

/* ---------- Di động ---------- */
@media (max-width: 760px) {
  .lpb-foot-card img { height: 28px; }
  .lpb-sec { padding: 72px 0; }
  .lpb-wrap { width: calc(100% - 32px); }
  .lpb-head { margin-bottom: 36px; }
  .lpb-h2, .lpb-cta-h2 { font-size: 32px; line-height: 1.2; letter-spacing: 0; }
  .lpb-lead, .lpb-cta-sub { font-size: 16px; }

  .lpb-stat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .lpb-stat { min-height: 0; padding: 22px 16px 20px; gap: 12px; border-radius: 20px; }
  .lpb-stat-num { font-size: 36px; }
  .lpb-stat-unit { font-size: 15px; }
  .lpb-stat-lbl { font-size: 14px; }

  .lpb-tiers { grid-template-columns: 1fr; gap: 16px; }
  .lpb-tier-hot { transform: none; }
  .lpb-tier { padding: 28px 22px 22px; }
  .lpb-tier-quota { font-size: 32px; }

  .lpb-qa summary { font-size: 16px; padding: 18px 56px 18px 18px; }
  .lpb-qa summary::after { right: 16px; }
  .lpb-qa-a { padding: 0 18px 18px; }
  .lpb-qa-a p { font-size: 15px; }

  .lpb-cta-panel { grid-template-columns: 1fr; padding: 40px 22px 22px; gap: 32px; }
  .lpb-cta-btns { flex-direction: column; gap: 12px; margin-top: 28px; }
  .lpb-cta-btns .lpb-btn { width: 100%; }
  .lpb-cta-media { border-radius: 16px; }
  .lpb-tier-quota { font-size: 30px; }

  .lpb-foot-panel { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding: 32px 22px 36px; }
  .lpb-foot-col-wide { grid-column: 1 / -1; }
  .lpb-foot-bar { flex-direction: column; align-items: flex-start; padding: 20px 22px; }
}

/* ---------- 6. Hộp "Quốc gia hỗ trợ" (<dialog> kính mờ, anh chốt 9/11) ---------- */
.lpc-dlg {
  width: min(440px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px);
  margin: auto; padding: 0; border: 0; background: transparent; color: var(--ink, #111111); overflow: visible;
  overscroll-behavior: contain;
}
.lpc-dlg::backdrop { background: rgba(17, 17, 17, .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lpc-box {
  max-height: calc(100dvh - 32px); overflow: auto; padding: 22px 24px 20px; border-radius: 24px;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: var(--glass-blur, blur(22px) saturate(1.8)); backdrop-filter: var(--glass-blur, blur(22px) saturate(1.8));
  border: var(--glass-border, 1px solid rgba(255, 255, 255, .65)); box-shadow: 0 24px 64px rgba(17, 17, 17, .18), inset 0 1px 0 rgba(255, 255, 255, .95);
}
.lpc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.lpc-h { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.2px; line-height: 1.3; }
.lpc-x {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px;
  border: 0; border-radius: 10px; background: transparent; color: var(--ink, #111111); cursor: pointer;
}
.lpc-x:hover { background: rgba(17, 17, 17, .06); }
.lpc-x:focus:not(:focus-visible) { outline: none; }
.lpc-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lpc-tbl { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 15px; }
.lpc-tbl .lpc-col { width: 88px; }
.lpc-tbl th, .lpc-tbl td { height: 40px; padding: 0 8px; border-bottom: 1px solid rgba(17, 17, 17, .08); text-align: left; vertical-align: middle; }
.lpc-tbl thead th { height: 36px; font-size: 13px; font-weight: 600; color: var(--ink-2, #3A3A3A); border-bottom-color: rgba(17, 17, 17, .18); }
.lpc-tbl tbody th { font-weight: 500; }
.lpc-tbl th:first-child { padding-left: 0; }
/* Cột SMS/Zalo: tiêu đề (th) và ô (td) cùng class .lpc-c → cùng rộng, cùng căn giữa; tâm tiêu đề trùng tâm icon. */
.lpc-tbl .lpc-c { width: 88px; padding: 0; text-align: center; vertical-align: middle; }
.lpc-tbl tbody tr:last-child > * { border-bottom: 0; }
/* Icon ✓ và "–" cùng một ô 24px, khối giữa ô (margin auto) để không lệch vì khoảng trắng dòng. */
.lpc-i { position: relative; display: block; width: 24px; height: 24px; margin: 0 auto; }
.lpc-c.is-yes .lpc-i { border-radius: 50%; background: var(--green, #88C030); }
.lpc-c.is-yes .lpc-i::after {
  content: ""; position: absolute; left: 9px; top: 5px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.lpc-c.is-no .lpc-i::after { content: ""; position: absolute; left: 6px; top: 11px; width: 12px; height: 2px; border-radius: 1px; background: rgba(17, 17, 17, .28); }
.lpc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 760px) {
  .lpc-box { padding: 18px 18px 16px; border-radius: 20px; }
  .lpc-tbl th, .lpc-tbl td { height: 38px; }
  .lpc-tbl .lpc-col, .lpc-tbl .lpc-c { width: 72px; }
}

/* ---------- 7. Nút ngôn ngữ (khuôn infobip, anh chốt 9/11): pill viền mảnh, globe 16px + mã ngữ, menu kính 2 dòng ----------
   Dùng chung thanh phụ (.lp2-lang) + footer (.lpb-foot-lang), landing + legal + docs. Dòng đang chọn có ✓ theo html[lang].
   lp.js: bấm mở/đóng, Esc/bấm ngoài đóng, footer sát đáy thì mở lên (.is-up). */
.lp2-lng { position: relative; display: inline-flex; margin: 0; }
.lp2-lng-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px;
  border: 1px solid rgba(17, 17, 17, .22); border-radius: 999px; background: transparent; color: var(--ink, #111111);
  font: inherit; font-weight: 600; letter-spacing: .02em; line-height: 1; cursor: pointer; transition: border-color .2s;
}
.lp2-lng-btn:hover, .lp2-lng-btn[aria-expanded="true"] { border-color: rgba(17, 17, 17, .5); }
.lp2-lng-btn:focus:not(:focus-visible) { outline: none; }
.lp2-lng-ic { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.lp2-lng-code { text-transform: uppercase; }
.lp2-lng-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 168px; margin: 0; padding: 6px; list-style: none;
  border-radius: 12px; background: rgba(255, 255, 255, .97); /* gần đặc: menu nằm trong thanh phụ đã có backdrop-filter → blur của menu không thấy nav bên dưới, nền mỏng sẽ lộ nút nav */
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, .65); box-shadow: 0 12px 32px rgba(17, 17, 17, .14);
}
.lp2-lng-menu[hidden] { display: none; }
.lp2-lng.is-up .lp2-lng-menu { top: auto; bottom: calc(100% + 6px); }
.lp2-lng-menu li { margin: 0; }
.lp2-lng-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 10px; border-radius: 8px;
  font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ink, #111111); text-decoration: none; white-space: nowrap; opacity: 1;
}
.lp2-lng-menu a:hover { background: rgba(17, 17, 17, .06); text-decoration: none; }
.lp2-lng-menu a:focus:not(:focus-visible) { outline: none; }
.lp2-lng-ck { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--blue-d, #0E9AD9); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
html[lang="en"] .lp2-lng-menu a[hreflang="en"], html[lang="vi"] .lp2-lng-menu a[hreflang="vi"] { font-weight: 600; }
html[lang="en"] .lp2-lng-menu a[hreflang="en"] .lp2-lng-ck, html[lang="vi"] .lp2-lng-menu a[hreflang="vi"] .lp2-lng-ck { visibility: visible; }
.lpb-foot-lang .lp2-lng-btn { height: 34px; padding: 0 14px 0 10px; border-color: transparent; background: rgba(255, 255, 255, .9); font-size: 15px; }
.lpb-foot-lang .lp2-lng-btn:hover, .lpb-foot-lang .lp2-lng-btn[aria-expanded="true"] { border-color: rgba(17, 17, 17, .18); }
.lpb-foot-lang .lp2-lng-menu { left: 0; right: auto; padding: 6px; gap: 2px; } /* đè .lpb-foot-col ul (padding 0, gap 10) */

/* ---------- 8. Hộp "Contact us" thẻ BUSINESS (W14, anh chốt 9/11): dùng chung khung .lpc-dlg/.lpc-box/.lpc-head/.lpc-x của hộp countries.
   Màu lỗi #DD3737 = --c-err của app eOTP (site/easy-otp/app), không phải màu mới. Ô lỗi giữ chỗ 18px → hiện lỗi không nhảy hộp. ---------- */
.lpk-dlg { width: min(480px, calc(100% - 32px)); }
.lpk-lead { margin: -4px 0 16px; font-size: 14px; line-height: 1.5; color: var(--ink-2, #3A3A3A); }
.lpk-f { margin: 0; }
.lpk-l { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; line-height: 1.3; }
.lpk-req { margin-left: 2px; color: var(--blue-d, #0E9AD9); }
.lpk-in {
  display: block; width: 100%; height: 44px; padding: 0 14px; margin: 0;
  border: 1px solid rgba(17, 17, 17, .16); border-radius: 12px; background: rgba(255, 255, 255, .9);
  font: inherit; font-size: 16px; color: var(--ink, #111111); transition: border-color .2s, box-shadow .2s;
}
.lpk-in:hover { border-color: rgba(17, 17, 17, .32); }
.lpk-in:focus { outline: none; border-color: var(--blue-d, #0E9AD9); box-shadow: 0 0 0 3px rgba(40, 184, 248, .18); }
.lpk-in[aria-invalid="true"] { border-color: #DD3737; }
.lpk-in[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(221, 55, 55, .12); }
.lpk-in:disabled, .lpk-in[readonly] { opacity: .45; cursor: not-allowed; }
.lpk-tel { display: flex; gap: 8px; }
.lpk-cc {
  flex: none; width: auto; min-width: 96px; padding: 0 30px 0 12px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background: rgba(255, 255, 255, .9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center / 16px 16px;
}
.lpk-tel .lpk-in:not(.lpk-cc) { flex: 1; min-width: 0; }
.lpk-err { min-height: 18px; margin: 4px 0 6px; font-size: 13px; line-height: 18px; color: #DD3737; }
.lpk-hp { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lpk-msg {
  margin: 2px 0 12px; padding: 10px 12px; border-radius: 12px; font-size: 14px; line-height: 1.45;
  color: #DD3737; background: rgba(221, 55, 55, .1);
}
.lpk-msg[hidden], .lpk-ok[hidden], .lpk-form[hidden] { display: none; }
.lpk-act { display: flex; gap: 12px; margin-top: 4px; }
.lpk-act .lpb-btn { flex: 1; }
.lpk-send:disabled { opacity: .45; cursor: not-allowed; }
.lpk-send:disabled::before { display: none; }
.lpk-ok { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 12px 4px 4px; }
.lpk-ok-ic { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--green, #88C030); }
.lpk-ok-ic svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.lpk-ok-h { margin: 16px 0 6px; font-size: 20px; font-weight: 700; line-height: 1.3; }
.lpk-ok-p { margin: 0 0 20px; font-size: 15px; line-height: 1.5; color: var(--ink-2, #3A3A3A); }
.lpk-ok .lpb-btn { min-width: 140px; }

/* W101: chip "Chính/Primary" đi theo tab chế độ gửi (lp.js gắn .is-in khi chuyển) */
@keyframes lpa-badge-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.lpa-badge.is-in { animation: lpa-badge-in .15s ease-out; }
@media (prefers-reduced-motion: reduce) { .lpa-badge.is-in { animation: none; } }

/* W101: cột mã vùng nhỏ trong hộp "Quốc gia hỗ trợ" */
.lpc-tbl .lpc-col-d { width: 72px; }
.lpc-tbl .lpc-d { padding: 0 8px 0 0; font-size: 13px; color: var(--ink-2, #3A3A3A); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lpc-tbl thead .lpc-d { font-weight: 600; }
@media (max-width: 760px) { .lpc-tbl .lpc-col-d { width: 60px; } }

/* ---------- 9. Mobile + iPad (10/11, đợt mobile-1011 thợ L1). Chỉ trong @media điện thoại / cảm ứng / iPad dọc — máy tính ≥1280 dùng chuột không đổi. ---------- */
/* Logo bản 400px (logo-eotp-400-1110.png): giữ đúng tỉ lệ bản 1248×495 cũ → khung logo không lệch 0,3px ở máy tính. */
.lp2-logo img, .lp2-pill .lp2-pill-logo, .lpb-foot-card img { aspect-ratio: 1248 / 495; }
/* Menu ☰: nền mờ che trang (lp.js gắn .lp2-scrim vào body), khoá cuộn nền, nav nổi trên nền mờ. */
.lp2-scrim { display: none; }
.lp2-menu-util { display: none; }
@media (max-width: 760px) {
  /* chỉ khoá html (truyền lên viewport); KHÔNG đặt body overflow — body thành khung cuộn riêng làm thanh phụ + nav dính bị trôi */
  html.lp2-menu-lock { overflow: hidden; }
  html.lp2-menu-lock { scrollbar-gutter: stable; } /* máy có thanh cuộn cổ điển: không nhảy bố cục khi khoá */
  html.lp2-menu-lock .lp2-nav { z-index: 53; }
  .lp2-scrim.is-on { display: block; position: fixed; inset: 0; z-index: 52; background: rgba(17, 17, 17, .28); touch-action: none; }
  .lp2-menu { max-height: calc(100dvh - var(--lp2-util-h) - var(--lp2-nav-h) - 16px); overflow-y: auto; overscroll-behavior: contain; }
  .lp2-menu > a { min-height: 48px; display: flex; align-items: center; }
  .lp2-menu-util { display: flex; flex-direction: column; margin: 4px 6px 0; padding-top: 4px; border-top: 1px solid rgba(17, 17, 17, .08); }
  .lp2-menu-util a { display: flex; align-items: center; min-height: 44px; padding: 0 8px; font-size: 15px; font-weight: 500; color: var(--ink-2); border-radius: 10px; }

  /* Thanh trên cùng: chỉ giữ nút ngôn ngữ + Đăng nhập (link phụ đã vào menu ☰), vùng chạm 44px, chữ 13px.
     Thanh phụ 44 + nav 52 = 96px dính đầu màn. */
  :root { --lp2-util-h: 44px; --lp2-nav-h: 52px; }
  .lp2-util { font-size: 13px; }
  .lp2-util-l { display: none; }
  .lp2-util-in { justify-content: flex-end; }
  .lp2-util-r { gap: 4px; }
  .lp2-nav-in { height: 50px; }
  .lp2-logo { display: inline-flex; align-items: center; min-height: 44px; }
  .lp2-logo img { height: 30px; }

  /* Màn đầu: pill gọn 1 dòng (bỏ logo lặp + nút lặp CTA), H1 co theo bề ngang, đệm nhỏ → H1 + mô tả + nút chính trong màn đầu. */
  .lp2-hero { padding-top: 12px; }
  .lp2-pill { flex-wrap: nowrap; gap: 8px; padding: 9px 14px; min-height: 44px; width: auto; max-width: 100%; border-radius: 12px; }
  .lp2-pill .lp2-pill-logo, .lp2-pill-btn { display: none; }
  .lp2-pill-txt { flex: 0 1 auto; font-size: 14px; line-height: 1.35; text-align: center; text-wrap: balance; }
  .lp2-pill-txt::after { content: " \2192"; }
  .lp2-h1 { margin-top: 20px; font-size: clamp(28px, 7.8vw, 36px); line-height: 1.12; letter-spacing: -.5px; text-wrap: balance; }
  .lp2-sub { margin-top: 12px; font-size: 16px; line-height: 1.45; }
  .lp2-cta { margin-top: 20px; }
}
@media (max-width: 380px) and (max-height: 700px) {
  .lp2-sub { font-size: 15px; }
}

/* Thanh trên cùng ở mọi máy cảm ứng (điện thoại + iPad): vùng chạm cao 44, vẽ pill/nền bằng ::before để hình nhìn như cũ. */
@media (max-width: 760px), (pointer: coarse) and (max-width: 1366px) {
  :root { --lp2-util-h: 44px; }
  .lp2-util-l a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  .lp2-util .lp2-lng-btn { position: relative; height: 44px; border-color: transparent; background: transparent; }
  .lp2-util .lp2-lng-btn::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; bottom: 7px; border: 1px solid rgba(17, 17, 17, .22); border-radius: 999px; pointer-events: none; }
  .lp2-util .lp2-lng-btn:hover::before, .lp2-util .lp2-lng-btn[aria-expanded="true"]::before { border-color: rgba(17, 17, 17, .5); }
  .lp2-login { position: relative; z-index: 0; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; background: transparent; }
  .lp2-login::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; bottom: 8px; z-index: -1; border-radius: 8px; background: #fff; }
  .lp2-menu > a { min-height: 44px; display: inline-flex; align-items: center; }
  .lp2-logo { display: inline-flex; align-items: center; min-height: 44px; }

  /* Vùng chạm ≥ 44: link trong thẻ, footer, chân trang, nút ngôn ngữ footer + menu ngôn ngữ, nút × hộp thoại */
  .lpa-link { min-height: 44px; }
  .lpa-code-tab { min-height: 44px; }
  .lpb-foot-col li a, .lpb-foot-bar a { min-width: 44px; }
  .lpb-foot-col ul { gap: 0; }
  .lpb-foot-col li a { display: inline-flex; align-items: center; min-height: 44px; }
  .lpb-foot-bar-r { gap: 8px 20px; flex-wrap: wrap; }
  .lpb-foot-bar a { display: inline-flex; align-items: center; min-height: 44px; }
  .lpb-foot-lang .lp2-lng-btn { height: 44px; }
  .lp2-lng-menu a { min-height: 44px; }
  .lpc-x { width: 44px; height: 44px; }
  .lp2-langhint { min-height: 44px; padding-block: 0; } /* link + × đã cao 44 → dải đúng 44, không đệm thêm */
  .lp2-langhint-go { display: inline-flex; align-items: center; min-height: 44px; }
  .lp2-langhint-x { width: 44px; height: 44px; right: 4px; }
}

/* iPad dọc / màn vừa 761–1100: H1 cân 3 dòng (bỏ ngắt cứng), ảnh + 2 thẻ kính không đè, CTA cuối 1 cột, bảng giá 1 cột rộng (≤960). */
@media (min-width: 761px) and (max-width: 1100px) {
  .lp2-br { display: none; }
  .lp2-h1 { text-wrap: balance; }
  .lp2-media { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 16px; }
  .lp2-media > .lp2-shot { flex: 0 0 100%; max-width: 760px; }
  .lp2-media > .lp2-glass { position: relative; inset: auto; }
  .lp2-card-zns { width: 294px; }
  .lp2-hero:has(+ .lp2-sec) { padding-bottom: 112px; }
  .lpb-qa-a p { max-width: 62ch; } /* ch của Be Vietnam Pro ≈ 9,6px (chữ số rộng) → 62ch ≈ 72–75 ký tự chữ thường/dòng */
}
@media (min-width: 761px) and (max-width: 960px) {
  .lpb-cta-panel { grid-template-columns: 1fr; padding: 56px 48px 40px; gap: 36px; }
  .lpb-tiers { grid-template-columns: 1fr; max-width: 600px; margin-inline: auto; }
  .lpb-tier-hot { transform: none; }
}