/* ============================================================================
   LUNAKEY — "Luna Pop" (v3.0.0, 2026-10-07)
   Lớp cuối cùng, nạp sau lunakey-mockup.css trên MỌI trang phía khách.

   Học kiến trúc nodns.vn: nền sáng một màu, chữ tròn Nunito, nút "phím bấm"
   có gờ dưới, thẻ trắng bo lớn, khối tối làm điểm nhấn, CTA màu đặc cuối trang,
   nút Zalo nổi, thanh tiến độ cuộn. Màu lấy từ logo LunaKey (cyan → xanh → tím),
   không dùng tông vàng của Locket.

   Cách hoạt động: các lớp cũ (gaming-light-theme, lunakey-mockup) đã được đổi mã
   màu cứng sang biến (--lk-brand, --lk-brand-text, --lk-ink-strong, --lk-violet,
   --primary-rgb…). File này định nghĩa lại các biến đó, nên đổi màu ở đây là đổi
   cho cả site. Trang chủ có thêm home-luna.css (chỉ nạp ở trang chủ).
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
/* Khai báo trên cả body: lunakey-mockup.css (mục 18) đặt lại --lk-ink, --lk-muted, --lk-line,
   --lk-ground, --lk-blue, --lk-lift ngay trên body, nên chỉ đặt ở :root là bị đè. */
:root,
body {
  /* Nền & bề mặt */
  --lk-ground: #F6F5FF;            /* sữa trăng: trắng ngả tím rất nhẹ */
  --lk-surface: #FFFFFF;
  --lk-sunken: #EFEEFB;
  --lk-line: #E4E2F4;
  --lk-line-strong: #D3D0EC;

  /* Mực */
  --lk-ink-strong: #17153B;        /* 17.4:1 trên nền */
  --lk-ink: #221F4B;
  --lk-ink-2: #4E4B78;             /* 7.5:1 */
  --lk-muted: #5B5884;             /* 6.1:1 */
  --lk-ink-muted: #5B5884;
  --lk-ink-muted-soft: #5B5884;

  /* Màu thương hiệu (từ logo) */
  --lk-brand: #3D4FF5;             /* trắng trên nền này 5.78:1 */
  --lk-blue: #3D4FF5;
  --lk-brand-text: #3442E6;
  --lk-brand-text-hover: #2A35C4;
  --lk-brand-soft: #ECEEFF;
  --lk-brand-soft-2: #DFE2FF;
  --lk-key-edge: #2730B0;          /* gờ dưới của nút phím bấm */
  --lk-cyan: #00B4F0;
  --lk-cyan-soft: #E0F6FF;
  --lk-violet: #8B3DFF;
  --lk-violet-text: #6D28D9;
  --lk-violet-soft: #F1E8FF;
  --lk-night: #15123A;
  --lk-night-2: #231E5C;
  --lk-moon: #FFB21E;              /* sao đánh giá, chỉ trang trí */
  --lk-mint-soft: #E6F7EF;
  --lk-ok-text: #047857;
  --lk-focus: #3442E6;

  /* Ánh xạ sang biến của các lớp cũ */
  --primary: #3D4FF5;
  --primary1: #2A35C4;
  --primary-rgb: 61, 79, 245;
  --primary-light: #ECEEFF;
  --accent-blue: #3D4FF5;
  --input-focus-border: #3D4FF5;
  --bg-body: #F6F5FF;
  --bg-card: #FFFFFF;
  --bg-card-hover: #FBFAFF;
  --bg-secondary: #EFEEFB;
  --text-primary: #17153B;
  --text-secondary: #4E4B78;
  --text-muted: #5B5884;
  --border-color: #E4E2F4;
  --border-light: #E4E2F4;
  --border-accent: rgba(61, 79, 245, .25);
  --grad-primary: linear-gradient(180deg, #3D4FF5 0%, #3D4FF5 100%);
  --grad-primary-hover: linear-gradient(180deg, #2A35C4 0%, #2A35C4 100%);
  --grad-best: linear-gradient(135deg, #8B3DFF 0%, #3D4FF5 100%);
  --grad-premium: linear-gradient(135deg, #00B4F0 0%, #3D4FF5 55%, #8B3DFF 100%);
  --grad-accent-subtle: linear-gradient(135deg, rgba(61, 79, 245, .08) 0%, rgba(139, 61, 255, .05) 100%);

  /* Chữ */
  --font-sans: 'Nunito', ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: var(--font-sans);   /* đồng hồ đếm ngược dùng tabular-nums, không cần mono */

  /* Hình khối */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-card: 22px;
  --radius-modal: 24px;
  --lk-r-panel: 32px;

  /* Bóng: luôn có độ lệch + nhoè, ám màu mực tím */
  --shadow-xs: 0 1px 2px rgba(23, 21, 59, .05);
  --shadow-sm: 0 1px 2px rgba(23, 21, 59, .05), 0 6px 16px -10px rgba(23, 21, 59, .16);
  --shadow-md: 0 1px 2px rgba(23, 21, 59, .05), 0 16px 32px -16px rgba(23, 21, 59, .24);
  --shadow-lg: 0 2px 4px rgba(23, 21, 59, .05), 0 30px 56px -26px rgba(23, 21, 59, .34);
  --lk-lift: var(--shadow-md);

  --lk-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- 2. Nền, chữ, bề mặt trình duyệt ------------------------------ */
html, body {
  font-family: var(--font-sans) !important;
  background-color: var(--lk-ground) !important;
  color: var(--lk-ink) !important;
}
body { font-weight: 500; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-sans) !important;
  font-weight: 800;
  letter-spacing: -.015em;
  text-wrap: balance;
}
p { text-wrap: pretty; }
::selection { background: #D9DCFF; color: var(--lk-ink-strong); }
input, textarea { caret-color: var(--lk-brand); }
html { scrollbar-color: #CFCBEB transparent; }
a { text-underline-offset: .18em; }

/* Các chỗ lớp cũ ép Inter / JetBrains Mono bằng tên font */
.order-card-total, .transaction-amount, .affiliate-stat-value, .gamer-stat-value, .hero-stat-value,
.flashsale-countdown, .countdown-value, .timer-value, .timer-number, [class*="countdown"] .value,
.spp-current, .spp-original, .plan-current-price, .plan-original-price, .balance-amount-text,
.price-value, .price-value.total, .product-price, .product-price-upper,
.featured-price-current, .featured-price-old, .rv-price-current {
  font-family: var(--font-sans) !important;
  font-variant-numeric: tabular-nums !important;
}

/* Vòng focus: một vòng, đúng màu thương hiệu */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible {
  outline: 2.5px solid var(--lk-focus) !important;
  outline-offset: 2px !important;
}

/* Thanh tiến độ cuộn (như nodns) — thuần CSS, trình duyệt chưa hỗ trợ thì không hiện */
@supports (animation-timeline: scroll()) {
  html::after {
    content: "";
    position: fixed;
    inset: 0 0 auto 0;
    height: 3px;
    z-index: 2100;
    pointer-events: none;
    background: linear-gradient(90deg, var(--lk-cyan), var(--lk-brand) 55%, var(--lk-violet));
    transform-origin: 0 50%;
    transform: scaleX(0);
    animation: lk-scroll-progress linear both;
    animation-timeline: scroll(root);
  }
  @keyframes lk-scroll-progress { to { transform: scaleX(1); } }
}

/* ---------- 3. Nút "phím bấm" -------------------------------------------- */
/* LunaKey = chìa khoá: mọi hành động chính là một phím có gờ dưới, bấm thì lún xuống.
   Selector 2 lớp (.btn-primary.btn-primary…) để thắng "a.btn-primary" gradient của lớp cũ. */
.lk-btn,
.btn-primary.btn-primary,
.header-part .header-login-btn,
.product-card .btn-buy-card,
#productsGrid .product-card .btn-buy-card,
.product-card .btn-featured-buy {
  --key-face: var(--lk-brand);
  --key-face-hover: #4A5BFF;
  --key-edge: var(--lk-key-edge);
  --key-ink: #FFFFFF;
  background: var(--key-face) !important;
  color: var(--key-ink) !important;
  border: 0 !important;
  font-family: var(--font-sans) !important;
  font-weight: 800 !important;
  letter-spacing: 0;
  box-shadow: 0 3px 0 var(--key-edge), 0 10px 18px -12px rgba(39, 48, 176, .8) !important;
  transform: translateY(0) !important;
  transition: transform .12s var(--lk-ease), box-shadow .12s var(--lk-ease), background-color .16s ease !important;
}
.lk-btn:hover,
.btn-primary.btn-primary:hover,
.header-part .header-login-btn:hover,
.product-card .btn-buy-card:hover,
#productsGrid .product-card .btn-buy-card:hover,
.product-card .btn-featured-buy:hover {
  background: var(--key-face-hover) !important;
  color: var(--key-ink) !important;
  filter: none !important;
  transform: translateY(0) !important;
  box-shadow: 0 3px 0 var(--key-edge), 0 12px 20px -12px rgba(39, 48, 176, .85) !important;
}
.lk-btn:active,
.btn-primary.btn-primary:active,
.header-part .header-login-btn:active,
.product-card .btn-buy-card:active,
#productsGrid .product-card .btn-buy-card:active,
.product-card .btn-featured-buy:active {
  transform: translateY(3px) !important;
  box-shadow: 0 0 0 var(--key-edge), 0 4px 10px -8px rgba(39, 48, 176, .8) !important;
}
.btn-primary:disabled, .btn-primary.disabled, .lk-btn[aria-disabled="true"] {
  background: #B9BEEA !important;
  box-shadow: 0 3px 0 #9DA3D8 !important;
  transform: none !important;
}
.btn-outline-primary {
  color: var(--lk-brand-text) !important;
  border-color: var(--lk-brand-soft-2) !important;
}
.btn-outline-primary:hover { background: var(--lk-brand-soft) !important; color: var(--lk-brand-text-hover) !important; }

.lk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px !important;
  font-size: 16px;
  line-height: 1;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
}
.lk-btn--lg { min-height: 56px; padding: 0 30px; font-size: 17px; }
.lk-btn--sm { min-height: 40px; padding: 0 18px; font-size: 14px; }
.lk-btn--white {
  --key-face: #FFFFFF;
  --key-face-hover: #F3F4FF;
  --key-edge: #C3C7F2;
  --key-ink: var(--lk-brand-text);
}
.lk-btn--zalo {
  --key-face: #0068FF;
  --key-face-hover: #1A78FF;
  --key-edge: #0049B5;
}
.lk-btn--ghost {
  background: transparent !important;
  color: var(--lk-ink-strong) !important;
  box-shadow: inset 0 0 0 1.5px var(--lk-line-strong) !important;
}
.lk-btn--ghost:hover { background: #fff !important; color: var(--lk-ink-strong) !important; }
.lk-btn--ghost:active { transform: translateY(1px) !important; box-shadow: inset 0 0 0 1.5px var(--lk-line-strong) !important; }

/* ---------- 4. Header ---------------------------------------------------- */
/* Không dùng backdrop-filter/transform ở header: popup tìm kiếm mobile là
   position: fixed nằm trong header (xem DESIGN.md, mục tìm kiếm popup). */
.header-part {
  background: rgba(246, 245, 255, .97) !important;
  border-bottom: 1px solid var(--lk-line) !important;
  box-shadow: 0 10px 24px -22px rgba(23, 21, 59, .45) !important;
  padding: 10px 0 !important;
}
.header-brand-badge { display: none !important; }
.header-logo img { max-height: 34px !important; }

/* Cỡ chữ / đệm giữ đúng "dấu chân" của header cũ: ở 1280px khi đã đăng nhập
   (ô số dư + avatar) header vừa khít mép — đừng nới thêm. */
.header-part .header-nav-item {
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--lk-ink-2) !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  background: transparent !important;
}
.header-part .header-nav-item:hover { color: var(--lk-ink-strong) !important; background: #ECEBFA !important; }
.header-part .header-nav-item.active { color: var(--lk-brand-text) !important; background: var(--lk-brand-soft) !important; font-weight: 800 !important; }

.header-part .header-form-pill {
  background: #FFFFFF !important;
  border: 1.5px solid var(--lk-line) !important;
  border-radius: 999px !important;
  box-shadow: var(--shadow-xs) !important;
}
.header-part .header-form-pill:focus-within {
  border-color: var(--lk-brand) !important;
  box-shadow: 0 0 0 4px rgba(61, 79, 245, .14) !important;
}
.header-part #searchInput { font-family: var(--font-sans) !important; font-weight: 600 !important; color: var(--lk-ink-strong) !important; }
.header-part #searchInput::placeholder { color: var(--lk-muted) !important; opacity: 1; }

.mockup-balance-pill {
  background: #FFFFFF !important;
  border: 1.5px solid var(--lk-line) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
.mockup-balance-pill .balance-amount-text { color: var(--lk-ink-strong) !important; font-weight: 800 !important; }
.mockup-balance-pill .btn-balance-topup {
  background: var(--lk-brand-soft) !important;
  color: var(--lk-brand-text) !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
}

.header-part .header-widget,
.header-part .header-src,
.header-part .header-user {
  background: #FFFFFF !important;
  border: 1.5px solid var(--lk-line) !important;
  color: var(--lk-ink-strong) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
.header-part .header-widget:hover,
.header-part .header-src:hover { border-color: var(--lk-line-strong) !important; background: #fff !important; }
.header-part #numCart,
.mobile-menu .mobile-menu-badge {
  background: var(--lk-violet-text) !important;
  color: #fff !important;
  font-family: var(--font-sans) !important;
  font-weight: 800 !important;
}
.header-user-btn { border-radius: 999px !important; }
.header-user-btn .user-avatar-img { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--lk-brand-soft-2) !important; }

.header-part .header-login-btn {
  border-radius: 999px !important;
  padding: 9px 20px !important;
  font-size: 14.5px !important;
}
@media (max-width: 991.98px) {
  .header-part .header-login-btn { width: 44px; height: 44px; padding: 0 !important; justify-content: center; }
}

/* Menu thả xuống (số dư, tài khoản, mega menu sản phẩm) */
.balance-dropdown-menu,
.user-dropdown-menu,
.header-mega-menu,
.mega-menu-panel {
  border: 1px solid var(--lk-line) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-lg) !important;
}

/* ---------- 5. Thanh điều hướng dưới (mobile) ----------------------------- */
@media (max-width: 991.98px) {
  .mobile-menu {
    background: #FFFFFF !important;
    border-top: 1px solid var(--lk-line) !important;
    box-shadow: 0 -12px 28px -20px rgba(23, 21, 59, .35) !important;
    border-radius: 20px 20px 0 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .mobile-menu a, .mobile-menu button {
    color: var(--lk-muted) !important;
    font-family: var(--font-sans) !important;
    font-weight: 700 !important;
    border-radius: 14px;
  }
  .mobile-menu a i { transition: transform .2s var(--lk-ease); }
  .mobile-menu a.active { color: var(--lk-brand-text) !important; }
  .mobile-menu a.active i {
    color: var(--lk-brand) !important;
    transform: translateY(-1px);
  }
}

/* ---------- 6. Thẻ sản phẩm (dùng ở mọi danh sách) ----------------------- */
.product-card.featured-product-card,
.product-card {
  background: #FFFFFF !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform .28s var(--lk-ease), box-shadow .28s var(--lk-ease), border-color .2s ease !important;
}
.product-card.featured-product-card:hover,
.product-card:hover {
  transform: translateY(-4px) !important;
  border-color: var(--lk-brand-soft-2) !important;
  box-shadow: var(--shadow-md) !important;
}
.product-card.featured-product-card { padding: 10px 10px 14px !important; }

/* Vùng ảnh: nền tím sữa có quầng sáng, logo nằm trên ô trắng như icon app */
.featured-thumb-container,
.product-card .product-image-container {
  border-radius: 16px !important;
  background: var(--lk-sunken) !important;
}
.featured-thumb-link {
  background:
    radial-gradient(70% 60% at 50% 40%, #FFFFFF 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(160deg, #F1F0FC 0%, #E9E7FA 100%) !important;
}
.featured-thumb-img[src$=".svg"],
.featured-thumb-img[src*="brand_"],
.featured-thumb-img[src*="auto_brand_"] {
  width: 84px !important;
  height: 84px !important;
  padding: 14px;
  background: #FFFFFF;
  border-radius: 24px;
  box-shadow: 0 1px 2px rgba(23, 21, 59, .06), 0 12px 22px -12px rgba(23, 21, 59, .35) !important;
  filter: none !important;
}
.product-card.featured-product-card:hover .featured-thumb-img[src$=".svg"],
.product-card.featured-product-card:hover .featured-thumb-img[src*="brand_"],
.product-card.featured-product-card:hover .featured-thumb-img[src*="auto_brand_"] {
  transform: translateY(-3px) rotate(-4deg) !important;
}

.featured-badge,
.product-card .product-discount-badge {
  font-family: var(--font-sans) !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
.featured-badge.badge-bestseller,
.product-discount-badge.badge-bestseller { background: var(--lk-violet-text) !important; color: #fff !important; }

.featured-card-title, .featured-card-title a,
.product-card .product-title, .product-card .product-title a {
  font-family: var(--font-sans) !important;
  font-weight: 800 !important;
  color: var(--lk-ink-strong) !important;
  letter-spacing: -.01em;
}
.featured-card-title { font-size: 15.5px !important; line-height: 1.35 !important; }
.featured-card-subtitle, .product-card .product-category-sub { color: var(--lk-muted) !important; font-weight: 600; }

.featured-chip {
  border-radius: 999px !important;
  font-weight: 700 !important;
  border: 0 !important;
}
.featured-chip.chip-instant, .featured-chip.chip-partial_instant { background: var(--lk-mint-soft) !important; color: var(--lk-ok-text) !important; }
.featured-chip.chip-plans, .featured-chip.chip-warranty { background: var(--lk-brand-soft) !important; color: var(--lk-brand-text) !important; }
.featured-rating i, .product-rating i { color: var(--lk-moon) !important; }

.featured-price-current,
.product-card .product-price {
  font-family: var(--font-sans) !important;
  font-weight: 900 !important;
  color: var(--lk-brand-text) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.featured-price-current { font-size: 19px !important; }
.featured-price-original, .product-card .product-original-price { color: var(--lk-muted) !important; font-weight: 600 !important; }

.btn-featured-buy,
.product-card .btn-buy-card,
#productsGrid .product-card .btn-buy-card {
  border-radius: 999px !important;
  min-height: 42px !important;
  font-size: 14.5px !important;
}

.product-badge-instant {
  background: var(--lk-mint-soft) !important;
  color: var(--lk-ok-text) !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
}

/* Cờ nước trên thẻ eSIM (CatalogCardService::esimMeta). SVG vẽ tay, không dùng emoji. */
.lk-flag {
  position: absolute;
  z-index: 2;
  width: 30px;
  height: 20px;
  border-radius: 4px;
  background-size: cover;
  box-shadow: 0 0 0 1px rgba(23, 21, 59, .12), 0 3px 8px -3px rgba(23, 21, 59, .35);
  pointer-events: none;
}
.featured-thumb-container .lk-flag { left: 10px; bottom: 10px; }
.product-image-container .lk-flag { right: 10px; bottom: 10px; }
.lk-flag--jp { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23fff'/%3E%3Ccircle cx='15' cy='10' r='6' fill='%23BC002D'/%3E%3C/svg%3E"); }
.lk-flag--vn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23DA251D'/%3E%3Cpolygon fill='%23FFFF00' points='15,4 16.35,8.14 20.71,8.15 17.19,10.71 18.53,14.85 15,12.3 11.47,14.85 12.81,10.71 9.29,8.15 13.65,8.14'/%3E%3C/svg%3E"); }
/* Dòng phụ (danh mục, hoặc "Nhật Bản · 15–30 ngày · 500 MB–1 GB/ngày" ở eSIM) được 2 dòng */
.featured-card-subtitle {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal !important;
  overflow: hidden !important;
  line-height: 1.4;
}
@media (max-width: 575.98px) {
  .featured-card-subtitle { -webkit-line-clamp: 3; }
}

/* Lớp cũ ép hàng "★ 5.0 | Đã bán 3k" một dòng và giấu phần tràn trên điện thoại -> chữ
   "Đã bán" bị cắt. Cho xuống dòng, bỏ dấu "|" khi chật. */
@media (max-width: 575.98px) {
  .featured-meta-row {
    flex-wrap: wrap !important;
    row-gap: 2px !important;
    overflow: visible !important;
    white-space: normal !important;
  }
  .featured-meta-row > span { white-space: nowrap; }
  .featured-meta-row .featured-meta-divider { display: none !important; }
}

/* ---------- 7. Tiêu đề mục dùng chung ------------------------------------ */
.lk-sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 20px;
}
.lk-sec-head > div { min-width: 0; }
.lk-sec-title {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 34px) !important;
  font-weight: 900 !important;
  line-height: 1.12;
  letter-spacing: -.025em !important;
  color: var(--lk-ink-strong) !important;
}
.lk-sec-sub {
  margin: 6px 0 0;
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--lk-muted);
  font-weight: 600;
}
.lk-sec-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 4px;
  font-weight: 800;
  font-size: 15px;
  color: var(--lk-brand-text) !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.lk-sec-link i { transition: transform .2s var(--lk-ease); }
.lk-sec-link:hover i { transform: translateX(3px); }
.lk-sec-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.lk-sec-head--center .lk-sec-sub { margin-inline: auto; }
@media (max-width: 575.98px) {
  .lk-sec-head { flex-wrap: wrap; align-items: flex-start; }
  .lk-sec-head:not(.lk-sec-head--center) .lk-sec-link { min-height: 36px; margin-top: -6px; }
}

/* FAQ dựng sẵn (views/client/faq.php khi Admin chưa nhập nội dung) — dùng lại thẻ
   .esim-faq của trang eSIM, chỉ thêm nhịp giữa các nhóm. */
.lk-faq { max-width: 860px; margin: 0 auto; }
.lk-faq-group + .lk-faq-group { margin-top: 28px; }
.lk-faq .esim-faq-title { font-size: 20px !important; font-weight: 900 !important; color: var(--lk-ink-strong) !important; }
.lk-faq .esim-faq-answer p { max-width: 68ch; line-height: 1.65; }
.lk-faq .esim-faq-answer a { font-weight: 800; color: var(--lk-brand-text) !important; }
.lk-faq-more { margin: 28px 0 0; text-align: center; font-weight: 700; color: var(--lk-muted); }
.lk-faq-more a { font-weight: 900; color: var(--lk-brand-text) !important; }

/* ---------- 8. Footer ---------------------------------------------------- */
.lk-footer {
  position: relative;
  margin-top: 56px;
  padding: 56px 0 28px;
  background: #FFFFFF;
  border-top: 1px solid var(--lk-line);
  color: var(--lk-ink-2);
  font-size: 14.5px;
}
.lk-footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 32px 40px;
}
.lk-footer-brand img { height: 34px; width: auto; }
.lk-footer-desc {
  margin: 14px 0 16px;
  max-width: 40ch;
  line-height: 1.6;
  color: var(--lk-muted);
  font-weight: 600;
}
.lk-footer-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.lk-footer-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--lk-ground);
  border: 1px solid var(--lk-line);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--lk-ink-2);
}
.lk-footer-pill i { color: var(--lk-brand); font-size: 11px; }
.lk-footer h3 {
  margin: 4px 0 14px;
  font-size: 15px !important;
  font-weight: 900 !important;
  color: var(--lk-ink-strong) !important;
  letter-spacing: 0 !important;
}
.lk-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lk-footer-links a {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  color: var(--lk-ink-2) !important;
  font-weight: 700;
  text-decoration: none !important;
}
.lk-footer-links a:hover { color: var(--lk-brand-text) !important; text-decoration: underline !important; }
.lk-footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 5px 0;
  font-weight: 700;
  color: var(--lk-ink-2);
  overflow-wrap: anywhere;
}
.lk-footer-contact li i {
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  margin-top: -3px;
  border-radius: 9px;
  background: var(--lk-brand-soft);
  color: var(--lk-brand-text);
  font-size: 12px;
}
.lk-footer-contact a { display: inline-flex; align-items: center; min-height: 32px; margin-block: -5px; color: inherit !important; text-decoration: none !important; }
.lk-footer-contact a:hover { color: var(--lk-brand-text) !important; }
.lk-footer-contact a.lk-btn { min-height: 40px; margin: 12px 0 0; color: #FFFFFF !important; }
.lk-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--lk-line);
  color: var(--lk-muted);
  font-size: 13.5px;
  font-weight: 600;
}
.lk-footer-bottom p { margin: 0; }
.lk-footer-bottom strong { color: var(--lk-ink-strong); }
@media (max-width: 991.98px) {
  .lk-footer { padding-top: 40px; padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .lk-footer-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lk-footer-brand, .lk-footer-contact { grid-column: 1 / -1; }
}

/* ---------- 9. Nút Zalo nổi (như nodns) ---------------------------------- */
.lk-zalo-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1030;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 6px 20px 6px 6px;
  border-radius: 999px;
  background: #0068FF;
  color: #FFFFFF !important;
  font-weight: 800;
  font-size: 15px;
  text-decoration: none !important;
  box-shadow: 0 3px 0 #0049B5, 0 16px 30px -14px rgba(0, 73, 181, .75);
  transition: transform .14s var(--lk-ease), box-shadow .14s var(--lk-ease), background-color .16s ease;
}
.lk-zalo-fab:hover { background: #1A78FF; color: #fff !important; }
.lk-zalo-fab:active { transform: translateY(3px); box-shadow: 0 0 0 #0049B5, 0 8px 16px -10px rgba(0, 73, 181, .75); }
.lk-zalo-fab-mark {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #FFFFFF;
  color: #0068FF;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: -.02em;
}
.backtop { bottom: 88px !important; right: 26px !important; }
/* Trang sản phẩm (máy tính): cột phải có thanh mua dính đáy chạy sát mép container.
   Nút Zalo thu thành hình tròn 52px nằm ngoài mép cột, không đè giá / nút mua. */
@media (min-width: 992px) {
  body:has(.product-sticky-order-panel) .lk-zalo-fab { right: 14px; padding: 6px; }
  body:has(.product-sticky-order-panel) .lk-zalo-fab-text {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  body:has(.product-sticky-order-panel) .backtop { right: 18px !important; }
}
@media (max-width: 991.98px) {
  .lk-zalo-fab {
    right: 14px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    min-height: 0;
    padding: 5px;
  }
  .lk-zalo-fab-text {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .lk-zalo-fab-mark { width: 46px; height: 46px; font-size: 12px; }
  .backtop { bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important; right: 18px !important; }
  /* Trang sản phẩm có thanh mua dính đáy: nhường chỗ */
  body.lk-buybar-on .lk-zalo-fab { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- 10. Chuyển động: tôn trọng người dùng tắt hiệu ứng ------------- */
@media (prefers-reduced-motion: reduce) {
  .lk-btn, .btn-primary, .btn-featured-buy, .product-card, .lk-zalo-fab { transition: none !important; }
  .product-card:hover, .product-card.featured-product-card:hover { transform: none !important; }
}