/* ============================================================================
   LUNAKEY — "Clean" (v4.0.0, 2026-10-23)
   Lớp CUỐI CÙNG phía khách: nạp sau lunakey-luna.css và home-luna.css (header.php).

   Hướng (chủ site): tối giản, đơn giản, không màu mè, dễ nhìn, dễ thao tác.
   - Nền xám rất nhạt, bề mặt trắng, viền 1px; bóng chỉ dùng cho menu thả / hộp thoại.
   - Một màu nhấn (xanh #2563EB). Xanh lá / cam / đỏ chỉ để báo trạng thái.
   - Không gradient, quầng sáng, nút "phím bấm" có gờ, thẻ nhún khi rê chuột, chữ nghiêng.
   - Be Vietnam Pro 400–700 (header.php chỉ nạp tới 700 nên mọi rule cũ ghi 800/900
     hiển thị ở 700).
   Các lớp cũ dùng !important gần như ở mọi rule, nên ở đây cũng phải dùng.
   Mục 1–6 là nền chung; các mục sau theo khu vực (header, trang chủ, mua hàng, tài khoản).
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
/* Khai báo trên cả body: lunakey-mockup.css (mục 18) đặt lại một số biến ngay trên body. */
:root,
body {
  --lk-ground: #F5F6F8;
  --lk-surface: #FFFFFF;
  --lk-sunken: #F2F4F7;
  --lk-line: #E4E7EC;
  --lk-line-strong: #D0D5DD;

  --lk-ink-strong: #101828;        /* 17.9:1 trên trắng */
  --lk-ink: #1D2939;
  --lk-ink-2: #344054;             /* 10.4:1 */
  --lk-muted: #5D6679;             /* 5.76:1 trên trắng, 5.3:1 trên nền */
  --lk-ink-muted: #5D6679;
  --lk-ink-muted-soft: #5D6679;

  --lk-brand: #2563EB;             /* chữ trắng trên nền này 5.16:1 */
  --lk-blue: #2563EB;
  --lk-brand-text: #1D4ED8;        /* 6.7:1 */
  --lk-brand-text-hover: #1E40AF;
  --lk-brand-soft: #EFF4FF;
  --lk-brand-soft-2: #D1E0FF;
  --lk-key-edge: transparent;
  /* Các màu phụ của bản Luna gộp về màu nhấn để trang chỉ còn một màu */
  --lk-cyan: #2563EB;
  --lk-cyan-soft: #EFF4FF;
  --lk-violet: #2563EB;
  --lk-violet-text: #1D4ED8;
  --lk-violet-soft: #EFF4FF;
  --lk-night: #1D2939;
  --lk-night-2: #344054;
  --lk-moon: #F59E0B;              /* sao đánh giá */
  --lk-mint-soft: #ECFDF3;
  --lk-ok: #12B76A;
  --lk-ok-text: #067647;
  --lk-warn: #F79009;
  --lk-warn-text: #B54708;
  --lk-warn-bg: #FFFAEB;
  --lk-amber-text: #B54708;
  --lk-danger: #F04438;
  --lk-danger-text: #D92D20;
  --lk-danger-bg: #FEF3F2;
  --lk-focus: #2563EB;

  /* Ánh xạ sang biến của các lớp cũ */
  --primary: #2563EB;
  --primary1: #1D4ED8;
  --primary-rgb: 37, 99, 235;
  --primary-light: #EFF4FF;
  --accent-blue: #2563EB;
  --accent-cyan: #2563EB;
  --accent-pink: #D92D20;
  --accent-rose: #D92D20;
  --accent-green: #067647;
  --accent-amber: #B54708;
  --input-focus-border: #2563EB;
  --bg-body: #F5F6F8;
  --bg-card: #FFFFFF;
  --bg-card-hover: #FFFFFF;
  --bg-secondary: #F2F4F7;
  --bg-glass: #FFFFFF;
  --text-primary: #101828;
  --text-secondary: #344054;
  --text-muted: #5D6679;
  --border-color: #E4E7EC;
  --border-light: #E4E7EC;
  --border-accent: rgba(37, 99, 235, .3);

  /* Mọi "gradient" thành màu đặc (giữ cú pháp gradient để chỗ nào dùng background-image vẫn hợp lệ) */
  --grad-primary: linear-gradient(#2563EB, #2563EB);
  --grad-primary-hover: linear-gradient(#1D4ED8, #1D4ED8);
  --grad-best: linear-gradient(#2563EB, #2563EB);
  --grad-premium: linear-gradient(#2563EB, #2563EB);
  --grad-accent-subtle: linear-gradient(#EFF4FF, #EFF4FF);
  --grad-soft: linear-gradient(#EFF4FF, #EFF4FF);
  --grad-glass: linear-gradient(#FFFFFF, #FFFFFF);
  --grad-hot: linear-gradient(#D92D20, #D92D20);
  --grad-sale: linear-gradient(#D92D20, #D92D20);
  --grad-instant: linear-gradient(#067647, #067647);
  --grad-hero: linear-gradient(#F5F6F8, #F5F6F8);

  /* Chữ */
  --font-sans: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: var(--font-sans);

  /* Hình khối: bo vừa phải, như nhau ở mọi nơi */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-card: 12px;
  --radius-modal: 14px;
  --lk-r-panel: 16px;

  /* Bóng: gần như phẳng */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-md: 0 4px 12px -2px rgba(16, 24, 40, .08);
  --shadow-lg: 0 12px 28px -6px rgba(16, 24, 40, .14);
  --shadow-glow: none;
  --shadow-glow-blue: none;
  --shadow-soft: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-float: 0 4px 12px -2px rgba(16, 24, 40, .08);
  --ring-focus: 0 0 0 3px rgba(37, 99, 235, .18);
  --lk-lift: 0 1px 2px rgba(16, 24, 40, .05);
  --lk-ease: ease;
}

/* ---------- 2. Nền, chữ ---------------------------------------------------- */
html,
body {
  font-family: var(--font-sans) !important;
  background: var(--lk-ground) !important;
  color: var(--lk-ink) !important;
}
body {
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-sans) !important;
  font-weight: 700;
  letter-spacing: -.01em;
}
b, strong { font-weight: 600; }
::selection { background: var(--lk-brand-soft-2); color: var(--lk-ink-strong); }
html { scrollbar-color: #C4C9D2 transparent; }

/* Thanh tiến độ cuộn của bản Luna: bỏ */
html::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* Vòng focus: một vòng mảnh, đúng màu nhấn */
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: 2px solid var(--lk-focus) !important;
  outline-offset: 2px !important;
}

/* Dấu ✦ trước tiêu đề mục (lunakey-mockup.css mục 24): bỏ */
.section-title-mockup::before,
.products-section-title::before,
.category-section-title::before,
.featured-heading::before {
  content: none !important;
  display: none !important;
}
.title-star-decor { display: none !important; }

/* ---------- 3. Nút: phẳng, một màu, không gờ / không nhún --------------------- */
/* Cùng bộ selector với lunakey-luna.css mục 3 (nạp sau nên thắng ở cùng độ ưu tiên). */
.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: var(--lk-brand-hover, var(--lk-brand-text));
  --key-edge: transparent;
  --key-ink: var(--lk-on-brand, #FFFFFF);
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s 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,
.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 {
  box-shadow: none !important;
  transform: none !important;
}
.btn-primary:disabled,
.btn-primary.disabled,
.lk-btn[aria-disabled="true"] {
  background: #D0D5DD !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}
.lk-btn { border-radius: 10px !important; }
.lk-btn--lg { min-height: 52px; }
.lk-btn.lk-btn--white {
  --key-face: #FFFFFF;
  --key-face-hover: #F2F4F7;
  --key-ink: var(--lk-brand-text);
  box-shadow: inset 0 0 0 1px var(--lk-line-strong) !important;
}
.lk-btn.lk-btn--zalo {
  --key-face: #0068FF;
  --key-face-hover: #0057D9;
}
.lk-btn.lk-btn--ghost,
.lk-btn.lk-btn--ghost:hover,
.lk-btn.lk-btn--ghost:active {
  background: #FFFFFF !important;
  color: var(--lk-ink-strong) !important;
  box-shadow: inset 0 0 0 1px var(--lk-line-strong) !important;
}
.lk-btn.lk-btn--ghost:hover { background: var(--lk-sunken) !important; }
.btn {
  font-weight: 600;
}
.btn-outline-primary {
  color: var(--lk-brand-text) !important;
  border-color: var(--lk-line-strong) !important;
  background: #FFFFFF !important;
}
.btn-outline-primary:hover {
  background: var(--lk-brand-soft) !important;
  border-color: var(--lk-brand-soft-2) !important;
  color: var(--lk-brand-text-hover) !important;
}

/* ---------- 4. Tiêu đề mục dùng chung --------------------------------------- */
.lk-sec-title,
.section-title-mockup,
.products-section-title,
.category-section-title,
.featured-heading {
  font-size: clamp(20px, 2vw, 26px) !important;
  font-weight: 700 !important;
  letter-spacing: -.015em !important;
  color: var(--lk-ink-strong) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
.lk-sec-sub {
  font-size: 14.5px;
  font-weight: 400;
  color: var(--lk-muted);
}
.lk-sec-head .lk-sec-link,
.lk-sec-link {
  min-height: 40px !important;
  font-weight: 600;
  font-size: 14.5px;
}
.lk-sec-link i { transition: none; }
.lk-sec-link:hover i { transform: none; }
.lk-sec-head { margin-bottom: 16px; }

/* ---------- 5. Thẻ sản phẩm ngang (.lk-pc) -------------------------------- */
/* Markup: CatalogCardService::renderCard() + products-filter.js createProductCard().
   [ảnh + dải cách giao] | [danh mục · tình trạng] [tên 2 dòng] [Kho / Đã bán + thanh] [giá · Mua ngay]
   Cả thẻ bấm được (::after của link tên); nút Mua và tim nằm trên lớp đó. */
.product-card.lk-pc,
.product-card.lk-pc.featured-product-card {
  --pc-media: 112px;
  position: relative;
  display: grid !important;
  grid-template-columns: var(--pc-media) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  flex-direction: row !important;
  width: auto;
  min-width: 0;
  margin: 0 !important;
  padding: 12px !important;
  overflow: visible !important;
  background: #FFFFFF !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
.product-card.lk-pc:hover,
.product-card.lk-pc.featured-product-card:hover {
  transform: none !important;
  border-color: var(--lk-line-strong) !important;
  box-shadow: var(--shadow-md) !important;
}
.product-card.lk-pc::before,
.product-card.lk-pc::after { content: none !important; }

/* Ảnh */
.lk-pc .lk-pc-media {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--lk-line);
  border-radius: 10px;
  background: var(--lk-sunken);
  text-decoration: none !important;
}
.lk-pc .lk-pc-img {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none !important;
  filter: none !important;
}
.lk-pc .product-image-placeholder {
  display: grid;
  flex: 1 1 auto;
  place-items: center;
  aspect-ratio: 1 / 1;
  color: #98A2B3;
  font-size: 26px;
}
.lk-pc .lk-pc-mode {
  display: block;
  flex: none;
  padding: 5px 4px;
  background: #475467;            /* chữ trắng 7.6:1 */
  color: #FFFFFF;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lk-pc .lk-pc-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1;
  max-width: calc(100% - 12px);
  padding: 2px 6px;
  overflow: hidden;
  border-radius: 6px;
  background: #FFFFFF;
  color: var(--lk-ink-2);
  box-shadow: 0 0 0 1px var(--lk-line);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.lk-pc .lk-pc-badge--sale,
.lk-pc .lk-pc-badge--flash { background: var(--lk-danger-bg); color: var(--lk-danger-text); box-shadow: 0 0 0 1px #FECDCA; }
/* "Bán chạy" gắn cho cả loạt thẻ đầu trang và che logo -> chỉ giữ huy hiệu giảm giá */
.lk-pc .lk-pc-badge--bestseller { display: none; }
.lk-pc .lk-pc-media .lk-flag {
  top: 6px;
  right: 6px;
  left: auto;
  bottom: auto;
  width: 24px;
  height: 16px;
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .14);
}

/* Thân thẻ */
.lk-pc .lk-pc-body {
  display: flex;
  flex-direction: column;
  /* gap: 8px; — chủ site bỏ: khoảng cách giữa các hàng trong thẻ làm thẻ dư trống */
  min-width: 0;
}
.lk-pc .lk-pc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.lk-pc .lk-pc-cat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--lk-brand-soft);
  color: var(--lk-brand-text);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.lk-pc .lk-pc-cat i { flex: none; font-size: 9px; }
.lk-pc .lk-pc-cat > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lk-pc .lk-pc-status {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 5px;
  color: var(--lk-muted);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.lk-pc .lk-pc-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lk-ok);
}
.lk-pc .lk-pc-status--manual::before { background: var(--lk-warn); }
.lk-pc .lk-pc-status--out_of_stock::before { background: #98A2B3; }

.lk-pc .lk-pc-title {
  display: -webkit-box;
  /* min-height: calc(1.4em * 2); — chủ site bỏ: tên 1 dòng không chừa trống dòng thứ hai */
  margin: 0 !important;
  overflow: hidden;
  color: var(--lk-ink-strong) !important;
  font-family: var(--font-sans) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-wrap: pretty;
}
.lk-pc .lk-pc-title a {
  color: inherit !important;
  text-decoration: none !important;
}
.lk-pc .lk-pc-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 14px;
}
.lk-pc:hover .lk-pc-title a { color: var(--lk-brand-text) !important; }
.lk-pc .lk-pc-sub {
  margin-top: -4px;
  overflow: hidden;
  color: var(--lk-muted);
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Ô Kho / Đã bán */
.lk-pc .lk-pc-stats {
  padding: 7px 10px 8px;
  border: 1px solid var(--lk-line);
  border-radius: 8px;
  background: #FAFBFC;
}
.lk-pc .lk-pc-stats-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 10px;
  color: var(--lk-muted);
  font-size: 12px;
  line-height: 1.5;
}
.lk-pc .lk-pc-stats-row b {
  color: var(--lk-ink-strong);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.lk-pc .lk-pc-sold i { margin-right: 1px; color: #98A2B3; font-size: 11px; }
.lk-pc .lk-pc-bar {
  height: 4px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--lk-line);
}
.lk-pc .lk-pc-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--lk-brand);
}

/* Giá + nút */
.lk-pc .lk-pc-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
}
.lk-pc .lk-pc-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 6px;
  min-width: 0;
  color: var(--lk-brand-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.lk-pc .lk-price-prefix {
  margin: 0;
  color: var(--lk-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: none !important;
}
.lk-pc .lk-pc-old {
  color: var(--lk-muted);
  font-size: 12px;
  font-weight: 400;
}
.lk-pc .lk-pc-buy {
  position: relative;
  z-index: 2;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  margin-left: auto;
  padding: 0 14px;
  border-radius: 10px;
  background: var(--lk-brand);
  color: var(--lk-on-brand, #FFFFFF) !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color .15s ease;
}
.lk-pc .lk-pc-buy:hover { background: var(--lk-brand-hover, var(--lk-brand-text)); }
.lk-pc .lk-pc-buy i { font-size: 12px; }

/* Hết hàng: chỉ làm nhạt ảnh, chữ vẫn đọc rõ; nút thành viền */
.lk-pc.is-out-of-stock .lk-pc-img { opacity: .5; filter: grayscale(1) !important; }
.lk-pc.is-out-of-stock .lk-pc-price { color: var(--lk-muted); }
.lk-pc.is-out-of-stock .lk-pc-buy {
  background: #FFFFFF;
  color: var(--lk-ink-2) !important;
  box-shadow: inset 0 0 0 1px var(--lk-line-strong);
}
.lk-pc.is-out-of-stock .lk-pc-buy:hover { background: var(--lk-sunken); }

/* Nút tim (trang danh sách): góc phải trên của ảnh */
.lk-pc .product-favorite-btn {
  position: absolute !important;
  top: 17px !important;
  left: calc(12px + var(--pc-media) - 33px) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 3 !important;
  display: grid !important;
  place-items: center;
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  color: var(--lk-muted) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  opacity: 1 !important;
  transform: none !important;
}
.lk-pc .product-favorite-btn:hover,
.lk-pc .product-favorite-btn.active { color: var(--lk-danger-text) !important; }
.lk-pc .product-favorite-btn::after {
  content: "";
  position: absolute;
  inset: -8px;
}

/* Điện thoại: ảnh hẹp lại để giá + nút "Chọn gói" và ô Kho / Đã bán vẫn nằm trên một hàng */
@media (max-width: 575.98px) {
  .product-card.lk-pc,
  .product-card.lk-pc.featured-product-card { --pc-media: 88px; gap: 12px; }
  .lk-pc .lk-pc-buy { padding: 0 12px; }
}
@media (max-width: 399.98px) {
  .product-card.lk-pc,
  .product-card.lk-pc.featured-product-card { --pc-media: 80px; gap: 12px; padding: 10px !important; }
  .lk-pc .product-favorite-btn { top: 15px !important; left: calc(10px + var(--pc-media) - 33px) !important; }
  .lk-pc .lk-pc-buy { padding: 0 12px; }
}

/* ---------- 6. Lưới thẻ ----------------------------------------------------- */
/* Thẻ ngang cần ~340px: 3 cột ở màn rộng, 2 cột ở máy tính bảng / cột kết quả
   trang danh sách, 1 cột ở điện thoại. auto-fill + min(100%, …) không bao giờ tràn ngang. */
#productsGrid,
.products-grid.featured-5cols-grid,
.products-grid.catalog-empty-grid,
.products-grid.featured-esim-grid,
.products-loading .products-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)) !important;
  gap: 14px !important;
}
@media (max-width: 575.98px) {
  #productsGrid,
  .products-grid.featured-5cols-grid,
  .products-grid.catalog-empty-grid,
  .products-grid.featured-esim-grid,
  .products-loading .products-grid { gap: 10px !important; }
}

/* ---------- 7. Danh mục trang chủ: một nút thả xuống ------------------------ */
/* views/client/widgets/category-dropdown.php (<details>/<summary>).
   Máy tính: bảng nổi 3 cột dưới nút. Điện thoại: danh sách mở ngay dưới nút, đẩy nội dung. */
.lk-catdrop-sec { padding-block: 20px 4px !important; }
.lk-catdrop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.lk-catdrop {
  position: relative;
  flex: 0 1 380px;
  min-width: 0;
}
.lk-catdrop-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--lk-line-strong);
  border-radius: 10px;
  background: #FFFFFF;
  color: var(--lk-ink-strong);
  font-size: 15px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.lk-catdrop-btn::-webkit-details-marker { display: none; }
.lk-catdrop-btn::marker { content: ""; }
.lk-catdrop-btn:hover { border-color: #98A2B3; }
.lk-catdrop[open] > .lk-catdrop-btn { border-color: var(--lk-brand); }
.lk-catdrop-btn-icon { color: var(--lk-brand-text); font-size: 15px; }
.lk-catdrop-btn-text { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lk-catdrop-btn-count {
  flex: none;
  min-width: 26px;
  padding: 1px 8px;
  border-radius: 99px;
  background: var(--lk-sunken);
  color: var(--lk-muted);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}
.lk-catdrop-caret { flex: none; color: var(--lk-muted); font-size: 12px; transition: transform .15s ease; }
.lk-catdrop[open] .lk-catdrop-caret { transform: rotate(180deg); }

.lk-catdrop-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 950;                      /* dưới header (1000) và thanh nav dưới (1040) */
  width: min(920px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
  padding: 8px;
  overflow-y: auto;
  border: 1px solid var(--lk-line);
  border-radius: 12px;
  background: #FFFFFF;
  box-shadow: var(--shadow-md);
  overscroll-behavior: contain;
}
.lk-catdrop-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lk-catdrop-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--lk-ink) !important;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none !important;
  transition: background-color .15s ease;
}
.lk-catdrop-item:hover,
.lk-catdrop-item:focus-visible { background: var(--lk-sunken); color: var(--lk-ink-strong) !important; }
.lk-catdrop-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--lk-brand-soft);
  color: var(--lk-brand-text);
  font-size: 13px;
}
.lk-catdrop-icon img { width: 20px; height: 20px; object-fit: contain; }
.lk-catdrop-name { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lk-catdrop-num { flex: none; color: var(--lk-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.lk-catdrop-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  margin-top: 6px;
  border-top: 1px solid var(--lk-line);
  color: var(--lk-brand-text) !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
}

@media (max-width: 991.98px) {
  .lk-catdrop-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Điện thoại: nút rộng hết hàng, danh sách mở ngay dưới (không nổi) */
@media (max-width: 767.98px) {
  .lk-catdrop-sec { padding-block: 16px 0 !important; }
  .lk-catdrop { flex: 1 1 auto; }
  /* Không giới hạn cao thì cũng không là khung cuộn: overflow-y:auto + overscroll-behavior:contain
     của bản desktop chặn cú vuốt ở trong danh sách, trang đứng im khi danh sách che gần hết màn hình */
  .lk-catdrop-panel {
    position: static;
    width: auto;
    max-height: none;
    margin-top: 6px;
    padding: 4px;
    overflow: visible;
    overscroll-behavior: auto;
    box-shadow: none;
  }
  .lk-catdrop-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lk-catdrop-list li + li { border-top: 1px solid var(--lk-sunken); }
  .lk-catdrop-item { min-height: 48px; font-size: 15px; }
}

/* ---------- 8. Sửa chung (gom từ các khu vực) ------------------------------ */
/* 8.1 Lề trang điện thoại 16px: trước là 10px margin (modern-client.css) + 16px padding = 26px */
@media (max-width: 575.98px) {
  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 16px !important;
  }
  .home-shelf { --shelf-bleed: 16px !important; }
}
/* 8.2 JS ẩn lưới bằng style="display:none" lúc tải / rỗng / lỗi — mục 6 ép display:grid nên phải nhường */
#productsGrid[style*="display: none"],
#productsGrid[style*="display:none"] { display: none !important; }
/* 8.3 Phân trang: bỏ bóng (modern-client.css), nút 40px, trang đang xem = nền màu nhấn */
.pagination,
.products-pagination { box-shadow: none !important; }
/* 8.4 Nút lên đầu trang: main.js bật bằng jQuery .show() (display:block) nhưng CSS cũ chỉ hiện khi có class .show */
.backtop[style*="display: block"],
.backtop[style*="display:block"],
.backtop[style*="display: inline"] {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
/* 8.5 Chuyển màu link: ≤ .15s */
a { transition-duration: .15s; }


/* ========================================================================
   10. Header, menu, thanh điều hướng dưới, footer
   ======================================================================== */
/* ============================================================================
   10. Khung chung phía khách: header, menu thả, tìm kiếm, drawer, thanh nav dưới,
   footer, nút nổi. Markup: views/client/nav.php, footer.php, product-menu.php.
   Không dùng transform / backdrop-filter trên .header-part: popup tìm kiếm điện thoại
   là position: fixed nằm trong header (DESIGN.md, "Tìm kiếm trên header điện thoại").
   ========================================================================== */

/* ---------- 10.1 Header: nền trắng, một đường kẻ, không bóng ---------------- */
.header-part,
.header-part.active {
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--lk-line) !important;
  box-shadow: none !important;
  padding: 0 !important;
  /* chỉ đổi màu, không chạy "all" (z-index chạy dần làm thanh nav dưới đè lớp tối) */
  transition: background-color .15s ease, border-color .15s ease !important;
}
.header-part .header-content {
  min-height: 64px !important;
}
.header-part .header-logo img,
.header-part .header-media-group img.logo-light {
  max-height: 32px !important;
}
@media (max-width: 991.98px) {
  /* thẳng mép với nội dung trang (trước thêm 16px nữa so với .container) */
  .header-part .header-content {
    min-height: 56px !important;
    padding-inline: 0 !important;
  }
  .header-part .header-media-group img.logo-light { max-height: 30px !important; }
  /* logo là link về trang chủ: vùng chạm cao 40px như các nút bên cạnh */
  .header-part .header-media-group > a:has(img.logo-light) { min-height: 40px; align-items: center; }
}

/* ---------- 10.2 Nav máy tính: chữ thường, mục đang xem tô nhạt màu nhấn -------- */
.header-part .header-nav-item,
.header-part .header-desktop-nav .header-nav-item {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  padding: 0 12px !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--lk-ink-2) !important;
  font-family: var(--font-sans) !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transform: none !important;
  transition: color .15s ease, background-color .15s ease !important;
}
.header-part .header-nav-item:hover,
.header-part .header-nav-dropdown-wrap:hover .header-nav-dropdown-btn,
.header-part .header-nav-dropdown-wrap.open .header-nav-dropdown-btn {
  background: var(--lk-sunken) !important;
  color: var(--lk-ink-strong) !important;
  font-weight: 500 !important;
}
/* Mục đang xem giữ nguyên khi rê sang "Sản phẩm" (lớp cũ tắt nó đi bằng :has) */
.header-part .header-desktop-nav > .header-nav-item.active,
.header-part .header-desktop-nav .header-nav-dropdown-btn.active,
.header-part .header-desktop-nav:has(.header-nav-dropdown-wrap:hover) > .header-nav-item.active,
.header-part .header-desktop-nav:has(.header-nav-dropdown-wrap.open) > .header-nav-item.active {
  background: var(--lk-brand-soft) !important;
  color: var(--lk-brand-text) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.header-part .header-nav-dropdown-btn .nav-caret {
  font-size: 10px;
  color: var(--lk-muted);
  transition: transform .15s ease !important;
}

/* ---------- 10.3 Ô tìm kiếm (≥1200px): một viền, một vòng focus ------------- */
.header-part .header-form-pill,
.header-part .header-form-pill:focus-within {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.header-part #searchInput {
  height: 44px !important;
  min-height: 44px;
  padding-right: 16px !important;
  background: var(--lk-sunken) !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: var(--lk-ink-strong) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease !important;
}
.header-part #searchInput::placeholder {
  color: var(--lk-muted) !important;
  font-weight: 400;
  opacity: 1;
}
.header-part #searchInput:hover { border-color: var(--lk-line-strong) !important; }
.header-part #searchInput:focus,
.header-part #searchInput:focus-visible {
  outline: none !important;
  background: #FFFFFF !important;
  border-color: var(--lk-brand) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15) !important;
}
.header-part .header-form-pill .header-search-icon {
  color: var(--lk-muted) !important;
  font-size: 13px !important;
}

/* Khung gợi ý khi gõ (lunakey-mockup hs.3) */
@media (min-width: 1200px) {
  .header-part #searchAutocomplete {
    border: 1px solid var(--lk-line) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-md) !important;
  }
}
.search-autocomplete .search-autocomplete-catalog {
  border-radius: 6px;
  background: var(--lk-sunken);   /* trước nền tím */
  color: var(--lk-ink-2);
  font-size: 11px;
  font-weight: 600;
}
.search-autocomplete a.search-autocomplete-item.active,
.search-autocomplete a.search-autocomplete-item[aria-selected="true"] {
  background: var(--lk-brand-soft) !important;
  box-shadow: none !important;
}
.search-autocomplete a.search-autocomplete-item:hover { background: var(--lk-sunken); }
/* phần chữ khớp từ khoá: lớp cũ ghi 800 (font chỉ có tới 700) -> 700 cho rõ ý */
.search-autocomplete .search-autocomplete-name mark { font-weight: 700 !important; }
.search-autocomplete .search-autocomplete-cats a {
  border-radius: 8px;
  background: var(--lk-sunken);
  color: var(--lk-ink-2);
  font-weight: 500;
}
.search-autocomplete .search-autocomplete-cats a:hover { background: var(--lk-brand-soft); color: var(--lk-brand-text); }

/* ---------- 10.4 Popup tìm kiếm (<1200px): giữ cơ chế, bỏ hiệu ứng nảy ---------- */
@media (max-width: 1199.98px) {
  .header-part .header-content.search-open::before {
    background: rgba(16, 24, 40, .45) !important;
    animation: none !important;
  }
  .header-part .header-content.search-open #headerSearchWrapper {
    /* width:auto + margin auto của lớp cũ làm thẻ co theo nội dung (270px ở 1024px,
       324px ở 375px). Đặt rộng rõ ràng: đủ màn, tối đa 560px, nằm giữa. */
    width: min(560px, calc(100vw - 24px)) !important;
    border: 1px solid var(--lk-line);
    border-radius: 12px !important;
    box-shadow: var(--shadow-lg) !important;
    animation: none !important;
  }
  .header-part .search-open #headerSearchWrapper #searchInput {
    font-size: 16px !important;   /* iOS không tự phóng to khi chạm ô nhập */
  }
  .header-part .search-open #headerSearchWrapper #searchInput::placeholder { font-size: 14px !important; }
  .header-part .search-open .header-search-close {
    border-radius: 10px !important;
    background: var(--lk-sunken) !important;
    color: var(--lk-ink-2) !important;
    transition: background-color .15s ease !important;
  }
  .header-part .search-open .header-search-close:hover,
  .header-part .search-open .header-search-close:active {
    background: var(--lk-line) !important;
    color: var(--lk-ink-strong) !important;
  }
  .header-part .search-open #searchAutocomplete { border-top-color: var(--lk-line) !important; }
}
@media (max-width: 389.98px) {
  /* lớp cũ hs.2: popup cách mép 8px ở màn hẹp */
  .header-part .header-content.search-open #headerSearchWrapper { width: calc(100vw - 16px) !important; }
}
/* Nút nổi không đè lên popup */
body.header-search-open .lk-zalo-fab,
body.header-search-open .backtop,
body.header-search-open .hotline-phone-ring-wrap { display: none !important; }

/* ---------- 10.5 Nút icon trên header: phẳng, không viền --------------------- */
.header-part .header-user,
.header-part .header-src,
.header-part .header-widget {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  flex: 0 0 40px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  color: var(--lk-ink-strong) !important;
  font-size: 17px !important;
  transform: none !important;
  transition: background-color .15s ease, color .15s ease !important;
}
.header-part .header-user i,
.header-part .header-src i,
.header-part .header-widget i { font-size: 17px !important; color: inherit !important; }
.header-part .header-user:hover,
.header-part .header-src:hover,
.header-part .header-widget:hover,
.header-part .header-src[aria-expanded="true"] {
  background: var(--lk-sunken) !important;
  color: var(--lk-ink-strong) !important;
  border: 0 !important;
}
/* 992–1199px: kính lúp đầu nhóm widget (lunakey-mockup 26.2) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .header-part .header-src-desktop { display: inline-flex !important; }
}
@media (max-width: 575.98px) {
  .header-part .header-widget-cart.is-guest,
  .header-part .header-widget-cart.has-items {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 10px !important;
  }
}

/* Số món trong giỏ: chấm màu nhấn, viền trắng tách khỏi icon */
.header-part #numCart {
  top: 2px !important;
  right: 0 !important;
  left: auto !important;
  min-width: 18px;
  height: 18px !important;
  padding: 0 5px !important;
  border: 2px solid #FFFFFF !important;
  border-radius: 9px !important;
  background: var(--lk-brand) !important;
  box-shadow: none !important;
  color: var(--lk-on-brand, #FFFFFF) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  line-height: 14px !important;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---------- 10.6 Ô số dư: chip trung tính, bỏ emoji 💰 ------------------------ */
.header-part .mockup-balance-pill {
  height: 40px !important;
  min-height: 40px;
  min-width: 40px;
  gap: 8px !important;
  padding: 0 12px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  transform: none !important;
  transition: border-color .15s ease, background-color .15s ease !important;
}
.header-part .mockup-balance-pill:hover,
.header-part .mockup-balance-pill[aria-expanded="true"] {
  border-color: var(--lk-line-strong) !important;
  background: var(--lk-sunken) !important;
}
.header-part .mockup-balance-pill .coin-icon { display: none !important; }
.header-part .mockup-balance-pill .balance-amount-text {
  display: inline-flex !important;
  align-items: center;
  gap: 7px !important;
  color: var(--lk-ink-strong) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* icon ví thay emoji (Font Awesome 6, glyph wallet) */
.header-part .mockup-balance-pill .balance-amount-text::before {
  content: "\f555";
  flex: none;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 13px;
  line-height: 1;
  color: var(--lk-muted);
}
.header-part .mockup-balance-pill .btn-balance-topup {
  padding: 4px 8px !important;
  border-radius: 6px !important;
  background: var(--lk-brand-soft) !important;
  color: var(--lk-brand-text) !important;
  box-shadow: none !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  transition: background-color .15s ease !important;
}
.header-part .mockup-balance-pill .btn-balance-topup:hover { background: var(--lk-brand-soft-2) !important; }
@media (max-width: 575.98px) {
  .header-part .mockup-balance-pill { padding: 0 10px !important; max-width: 132px; }
  .header-part .mockup-balance-pill .balance-amount-text { font-size: 13px !important; gap: 6px !important; }
}
@media (max-width: 389.98px) {
  .header-part .mockup-balance-pill { padding: 0 8px !important; max-width: 96px; }
  .header-part .mockup-balance-pill .balance-amount-text::before { content: none; }
}

/* ---------- 10.7 Avatar: một viền mảnh, ảnh tròn đúng tỉ lệ ------------------- */
/* khung bọc là block chứa nút inline-flex -> dòng chữ kéo cao thêm 3px, avatar lệch tâm */
.header-part .user-dropdown-wrapper { display: flex; align-items: center; }
.header-part .header-widget-group #userMenuBtn,
.header-part #userMenuBtn.header-user-btn {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px;
  padding: 2px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  transform: none !important;
  transition: border-color .15s ease !important;
}
.header-part .header-widget-group #userMenuBtn:hover,
.header-part .user-dropdown-wrapper.active #userMenuBtn {
  border-color: var(--lk-line-strong) !important;
  box-shadow: none !important;
  transform: none !important;
}
.header-part .header-widget-group #userMenuBtn .user-avatar-img,
.header-part #userMenuBtn img {
  flex: none;
  width: 34px !important;
  height: 34px !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  object-fit: cover;
}
@media (max-width: 359.98px) {
  .header-part .header-widget-group #userMenuBtn { width: 38px !important; height: 38px !important; flex-basis: 38px; }
  .header-part .header-widget-group #userMenuBtn .user-avatar-img,
  .header-part #userMenuBtn img { width: 32px !important; height: 32px !important; }
}

/* ---------- 10.8 Nút Đăng nhập (khách) ------------------------------------- */
.header-part .header-login-btn,
.header-part .header-widget-group > .btn.header-login-btn {
  min-height: 40px;
  height: 40px;
  gap: 8px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
.header-part .header-login-btn i { font-size: 14px; }
/* 576–991px: lớp Luna ép nút còn 44px mà chữ vẫn hiện -> chữ tràn ra ngoài. Giữ chữ. */
@media (min-width: 576px) and (max-width: 991.98px) {
  .header-part .header-login-btn {
    width: auto !important;
    height: 40px !important;
    padding: 0 14px !important;
  }
}
/* ≤575px chỉ còn icon (chữ đã ẩn ở lớp cũ): ô vuông 40px */
@media (max-width: 575.98px) {
  .header-part .header-login-btn,
  .header-part .header-widget-group > .btn.header-login-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    justify-content: center;
  }
}

/* ---------- 10.9 Menu thả xuống: số dư, tài khoản ----------------------------- */
.header-part .balance-dropdown-menu,
.header-part .user-dropdown-menu {
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-md) !important;
  background: #FFFFFF !important;
  transform: none !important;
  transition: opacity .12s ease !important;
}
.header-part .balance-dropdown-menu.show,
.header-part .user-dropdown-menu.show { transform: none !important; }

/* Số dư */
.header-part .balance-dropdown-menu { padding: 12px !important; }
/* Điện thoại: menu rộng 290px neo theo mép phải ô số dư (ô nằm giữa header) nên ở 320px
   lòi ra ngoài mép trái 40px. Neo theo màn hình, ngay dưới header (header dính top 0). */
@media (max-width: 575.98px) {
  .header-part .balance-dropdown-menu {
    position: fixed !important;
    top: 64px !important;
    right: 16px !important;
    left: auto !important;
    width: min(290px, calc(100vw - 32px)) !important;
  }
}
.header-part .balance-dropdown-header strong {
  color: var(--lk-ink-strong) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
.header-part .balance-dropdown-header i,
.header-part .balance-dropdown-row i {
  color: var(--lk-muted) !important;
}
.header-part .balance-dropdown-header .badge {
  padding: 3px 6px;
  border-radius: 6px !important;
  background: var(--lk-sunken) !important;
  color: var(--lk-ink-2) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}
.header-part .balance-dropdown-row {
  min-height: 44px;
  margin-bottom: 6px !important;
  padding: 0 12px !important;
  background: var(--lk-sunken) !important;
  border-radius: 8px !important;
}
.header-part .balance-dropdown-row span { color: var(--lk-ink-2) !important; font-size: 13.5px !important; }
.header-part .balance-dropdown-row strong {
  color: var(--lk-ink-strong) !important;   /* Ví eSIM trước tô tím (inline) */
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
}
.header-part .balance-dropdown-menu .btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 10px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.header-part .balance-dropdown-menu .btn i { color: inherit !important; }
.header-part .balance-dropdown-menu .btn-outline-secondary {
  background: #FFFFFF !important;
  border: 1px solid var(--lk-line-strong) !important;
  color: var(--lk-ink-2) !important;
}
.header-part .balance-dropdown-menu .btn-outline-secondary:hover {
  background: var(--lk-sunken) !important;
  color: var(--lk-ink-strong) !important;
}
.header-part .balance-dropdown-menu .border-top { border-top-color: var(--lk-line) !important; }

/* Tài khoản */
.header-part .user-dropdown-menu {
  width: 260px !important;
  padding: 8px !important;
}
.header-part .user-dropdown-header {
  gap: 10px !important;
  padding: 6px 8px 10px !important;
}
.header-part .user-dropdown-header .dropdown-avatar {
  width: 40px !important;
  height: 40px !important;
  border: 1px solid var(--lk-line) !important;
  box-shadow: none !important;
}
.header-part .dropdown-username {
  color: var(--lk-ink-strong) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
}
.header-part .dropdown-email { color: var(--lk-muted) !important; font-size: 12.5px !important; }
.header-part .user-dropdown-balance {
  margin: 0 0 6px !important;
  padding: 10px 12px !important;
  background: var(--lk-sunken) !important;
  border: 0 !important;
  border-radius: 8px !important;
}
.header-part .user-dropdown-balance .text-secondary { color: var(--lk-ink-2) !important; font-size: 13px !important; }
.header-part .user-dropdown-balance .text-primary {
  color: var(--lk-ink-strong) !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
}
.header-part .user-dropdown-divider { margin: 6px 0 !important; background: var(--lk-line) !important; }
.header-part .dropdown-item-link {
  min-height: 40px;
  padding: 0 10px !important;
  border-radius: 8px !important;
  color: var(--lk-ink) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transform: none !important;
  transition: background-color .15s ease, color .15s ease !important;
}
.header-part .dropdown-item-link i { color: var(--lk-muted) !important; font-size: 14px !important; }
.header-part .dropdown-item-link:hover {
  background: var(--lk-sunken) !important;
  color: var(--lk-ink-strong) !important;
  transform: none !important;
}
.header-part .dropdown-item-link:hover i { color: var(--lk-ink-2) !important; }
/* "Quản trị hệ thống" trước màu cam (text-warning): chỉ là một link, không phải trạng thái */
.header-part .dropdown-item-link.text-warning { color: var(--lk-ink) !important; }
.header-part .dropdown-item-link.logout-link,
.header-part .dropdown-item-link.logout-link i { color: var(--lk-danger-text) !important; }
.header-part .dropdown-item-link.logout-link:hover { background: var(--lk-danger-bg) !important; }
.header-part .dropdown-item-link .badge {
  min-width: 20px;
  padding: 3px 6px;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
.header-part .dropdown-item-link .badge.bg-primary { background: var(--lk-brand-soft) !important; color: var(--lk-brand-text) !important; }
.header-part .dropdown-item-link .badge.bg-danger { background: var(--lk-danger-bg) !important; color: var(--lk-danger-text) !important; }

/* ---------- 10.10 Mega menu "Sản phẩm" --------------------------------------- */
.header-part .header-mega-menu {
  padding: 16px !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-md) !important;
  transition: opacity .12s ease, visibility .12s ease !important;
}
/* bỏ bước trượt 10px khi mở; ≥1400px vẫn cần translateX(-35%) để neo theo nút */
@media (min-width: 1400px) {
  .header-part .header-mega-menu,
  .header-part .header-nav-dropdown-wrap:hover .header-mega-menu,
  .header-part .header-nav-dropdown-wrap.open .header-mega-menu { transform: translateX(-35%) !important; }
}
@media (min-width: 992px) and (max-width: 1399.98px) {
  .header-part .header-mega-menu,
  .header-part .header-nav-dropdown-wrap:hover .header-mega-menu,
  .header-part .header-nav-dropdown-wrap.open .header-mega-menu { transform: none !important; }
}
.header-part .mega-menu-grid { gap: 16px; }
/* 18 danh mục cao hơn màn laptop mà menu nằm trong header dính -> cột danh mục tự cuộn */
.header-part .mega-col-categories {
  gap: 2px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  border-right-color: var(--lk-line) !important;
  padding-right: 12px;
}
.header-part .mega-cat-item {
  flex: none;
  min-height: 36px;
  padding: 0 12px !important;
  border-radius: 8px !important;
  color: var(--lk-ink-2) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: background-color .15s ease, color .15s ease !important;
}
.header-part .mega-cat-item:hover { background: var(--lk-sunken) !important; color: var(--lk-ink-strong) !important; }
.header-part .mega-cat-item.active {
  background: var(--lk-brand-soft) !important;
  color: var(--lk-brand-text) !important;
  font-weight: 600 !important;
}
.header-part .mega-cat-chevron { color: var(--lk-muted) !important; transform: none !important; transition: none !important; }
.header-part .mega-cat-item.active .mega-cat-chevron { color: var(--lk-brand-text) !important; }
.header-part .mega-cat-all-link {
  min-height: 40px;
  padding: 0 12px !important;
  border-top-color: var(--lk-line) !important;
  border-radius: 8px !important;
  color: var(--lk-brand-text) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  transition: background-color .15s ease !important;
}
.header-part .mega-cat-all-link:hover { background: var(--lk-brand-soft) !important; color: var(--lk-brand-text-hover) !important; }
.header-part .mega-cat-panel.active { animation: none !important; }
.header-part .mega-subcat-title {
  color: var(--lk-ink-strong) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}
.header-part .mega-subcat-title:hover { color: var(--lk-brand-text) !important; }
.header-part .mega-subcat-desc { color: var(--lk-muted) !important; font-size: 12.5px !important; }
.header-part .mega-subcat-item {
  min-height: 36px;
  padding: 0 10px !important;
  border-radius: 8px !important;
  color: var(--lk-ink) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  transition: background-color .15s ease, color .15s ease !important;
}
.header-part .mega-subcat-item:hover { background: var(--lk-sunken) !important; color: var(--lk-brand-text) !important; }
.header-part .mega-featured-title { color: var(--lk-ink-2) !important; font-size: 13px !important; font-weight: 600 !important; }
.header-part .mega-mini-card {
  padding: 12px 8px 10px !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  transform: none !important;
  transition: border-color .15s ease, background-color .15s ease !important;
}
.header-part .mega-mini-card:hover {
  border-color: var(--lk-line-strong) !important;
  background: var(--lk-sunken) !important;
  box-shadow: none !important;
  transform: none !important;
}
.header-part .mega-mini-icon { border-radius: 8px !important; }
.header-part .mega-mini-name { color: var(--lk-ink-strong) !important; font-size: 13px !important; font-weight: 600 !important; }
.header-part .mega-mini-action { color: var(--lk-brand-text) !important; font-size: 12px !important; font-weight: 500 !important; }

/* ---------- 10.11 Drawer menu (#navSidebar) ------------------------------------ */
.nav-sidebar {
  padding: 16px !important;
  border-right: 1px solid var(--lk-line) !important;
  border-radius: 0 !important;
  box-shadow: var(--shadow-lg) !important;
  background: #FFFFFF !important;
  transition: transform .2s ease, visibility 0s linear .2s !important;
}
.nav-sidebar.active { transition: transform .2s ease, visibility 0s !important; }
.nav-sidebar .nav-header {
  min-height: 48px;
  margin-bottom: 12px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--lk-line) !important;
}
.nav-sidebar .nav-header img { width: auto !important; height: auto !important; max-height: 30px !important; max-width: 150px; }
.nav-sidebar .nav-close {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  background: var(--lk-sunken) !important;
  color: var(--lk-ink-2) !important;
  font-size: 16px;
  transition: background-color .15s ease !important;
}
.nav-sidebar .nav-close:hover { background: var(--lk-line) !important; color: var(--lk-ink-strong) !important; }
.nav-sidebar .nav-content { gap: 12px !important; }

/* Nút đầu drawer: khách = "Đăng nhập" (nút chính); đã đăng nhập = link hồ sơ, nút viền */
.nav-sidebar .nav-btn .btn {
  min-height: 44px;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--lk-brand) !important;
  box-shadow: none !important;
  color: var(--lk-on-brand, #FFFFFF) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  transition: background-color .15s ease !important;
}
.nav-sidebar .nav-btn .btn:hover { background: var(--lk-brand-hover, var(--lk-brand-text)) !important; }
.nav-sidebar .nav-content:has(.nav-select-group) .nav-btn .btn {
  justify-content: flex-start !important;
  background: #FFFFFF !important;
  box-shadow: inset 0 0 0 1px var(--lk-line-strong) !important;
  color: var(--lk-ink-strong) !important;
}
.nav-sidebar .nav-content:has(.nav-select-group) .nav-btn .btn:hover { background: var(--lk-sunken) !important; }
.nav-sidebar .nav-content:has(.nav-select-group) .nav-btn .btn i { color: var(--lk-muted); }
.nav-sidebar .nav-content:has(.nav-select-group) .nav-btn .btn::after {
  content: "\f054";
  margin-left: auto;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  color: var(--lk-muted);
}

/* Số dư 2 ví: một khung, hai dòng nhãn | số */
.nav-sidebar .nav-select-group {
  display: grid;
  gap: 0;
  padding: 4px 12px !important;
  background: var(--lk-sunken) !important;
  border: 0 !important;
  border-radius: 10px !important;
}
.nav-sidebar .nav-select-group p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
  margin: 0 !important;
  color: var(--lk-ink-2) !important;
  font-size: 13.5px !important;
}
.nav-sidebar .nav-select-group p + p { border-top: 1px solid var(--lk-line); }
.nav-sidebar .nav-select-group .text-wallet {
  color: var(--lk-ink-strong) !important;
  font-size: 14px;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
}

/* Danh sách mục */
.nav-sidebar .nav-list { gap: 0 !important; margin: 0; padding: 0; }
.nav-sidebar .nav-list .nav-link {
  min-height: 44px;
  gap: 12px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--lk-ink) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  transition: background-color .15s ease, color .15s ease !important;
}
.nav-sidebar .nav-list .nav-link > i {
  flex: none;
  width: 20px;
  text-align: center;
  color: var(--lk-ink-2) !important;
  font-size: 15px !important;
}
.nav-sidebar .nav-list .nav-link:hover,
.nav-sidebar .nav-list .nav-link.active {
  background: var(--lk-sunken) !important;
  color: var(--lk-ink-strong) !important;
}
.nav-sidebar .nav-list li.open > .nav-link.dropdown-link {
  background: var(--lk-sunken) !important;
  color: var(--lk-ink-strong) !important;
  font-weight: 600 !important;
}
.nav-sidebar .nav-list li:has(.dropdown-list) > .nav-link.dropdown-link::after {
  color: var(--lk-muted) !important;
  font-size: 11px !important;
  transition: transform .15s ease !important;
}
.nav-sidebar .nav-list li.open > .nav-link.dropdown-link::after { color: var(--lk-ink-2) !important; }
.nav-sidebar .nav-list .nav-link-count {
  margin-left: auto;
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--lk-brand-soft) !important;
  color: var(--lk-brand-text) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  text-align: center;
}

/* Danh sách con (Sản phẩm, Nạp tiền, Lịch sử): thẳng cột chữ với mục cha, không kẻ đứt */
.nav-sidebar .nav-list .dropdown-list {
  margin: 2px 0 6px !important;
  padding: 0 !important;
  border: 0 !important;
}
.nav-sidebar .nav-list .dropdown-list a {
  min-height: 40px;
  gap: 12px !important;
  padding: 0 12px 0 12px !important;
  border-radius: 8px !important;
  color: var(--lk-ink-2) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.3;
  transition: background-color .15s ease, color .15s ease !important;
}
.nav-sidebar .nav-list .dropdown-list a:hover {
  background: var(--lk-sunken) !important;
  color: var(--lk-ink-strong) !important;
}
.nav-sidebar .nav-list .dropdown-list a img,
.nav-sidebar .nav-list img {
  width: 20px !important;
  height: 20px !important;
  border-radius: 4px;
  object-fit: contain;
}
/* icon danh mục (ảnh nhiều màu): về một tông xám để danh sách đọc gọn như các icon chữ */
.nav-sidebar .nav-list .dropdown-list a img {
  filter: grayscale(1) contrast(1.05);
  opacity: .8;
}
/* mục không có icon (Tất cả sản phẩm, Lịch sử…): chừa ô 20px cho thẳng hàng */
.nav-sidebar .nav-list .dropdown-list a:not(:has(img))::before {
  content: "";
  flex: none;
  width: 20px;
}
.nav-sidebar .nav-list .dropdown-list > li:first-child > a[href$="/products"] {
  color: var(--lk-brand-text) !important;
  font-weight: 500 !important;
}

/* Hotline / email cuối drawer */
.nav-sidebar .nav-info-group {
  gap: 0 !important;
  padding-top: 8px !important;
  border-top: 1px solid var(--lk-line) !important;
}
.nav-sidebar .nav-info {
  min-height: 40px;
  gap: 12px !important;
  padding: 0 12px;
  color: var(--lk-ink-2) !important;
  font-size: 14px;
}
.nav-sidebar .nav-info i { width: 20px; text-align: center; color: var(--lk-muted) !important; font-size: 14px; }
.nav-sidebar .nav-info p { margin: 0 !important; overflow-wrap: anywhere; }

/* Lớp tối sau drawer: phủ cả header (z 1000) và thanh nav dưới (z 1040), dưới drawer (z 1100) */
.backdrop {
  z-index: 1090 !important;
  background: rgba(16, 24, 40, .45) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: opacity .15s ease, visibility .15s ease !important;
}

/* ---------- 10.12 Thanh điều hướng dưới (mobile) ------------------------------- */
@media (max-width: 991.98px) {
  /* chừa đúng chiều cao thanh nav (trước 74px: lộ một dải xám 10px dưới footer) */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; }
  .mobile-menu {
    /* 64px + vùng an toàn iPhone; trước height: 64px cố định nên phần đệm an toàn ép bẹp các ô */
    height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 0 0 env(safe-area-inset-bottom, 0px) !important;
    background: #FFFFFF !important;
    border-top: 1px solid var(--lk-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .mobile-menu > a,
  .mobile-menu a,
  .mobile-menu button {
    gap: 4px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--lk-muted) !important;
    font-family: var(--font-sans) !important;
    font-weight: 500 !important;
    transition: color .15s ease !important;
  }
  .mobile-menu > a > i,
  .mobile-menu a i {
    font-size: 18px !important;
    color: inherit !important;
    transform: none !important;
    transition: none !important;
  }
  .mobile-menu > a > span {
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: -.01em;
    line-height: 1.2;
  }
  .mobile-menu a:hover { color: var(--lk-ink-2) !important; }
  .mobile-menu a.active,
  .mobile-menu .active {
    background: transparent !important;
    color: var(--lk-brand-text) !important;
  }
  .mobile-menu a.active i { color: var(--lk-brand) !important; transform: none !important; }
  .mobile-menu a.active > span { font-weight: 600 !important; }
  .mobile-menu .mobile-menu-badge {
    top: 6px !important;
    left: calc(50% + 4px) !important;
    right: auto !important;   /* lớp cũ có right: -4px -> chấm bị kéo dài 31px */
    width: auto !important;
    justify-content: center;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    border: 2px solid #FFFFFF;
    border-radius: 9px !important;
    background: var(--lk-brand) !important;
    color: var(--lk-on-brand, #FFFFFF) !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    line-height: 14px !important;
    box-sizing: border-box;
  }
}
/* 6 ô chia theo độ dài nhãn (lớp cũ chia đều flex 1 1 0: "eSIM" thừa chỗ, "Đăng nhập"
   bị cắt "Đăng nh…" ở 320px và các nhãn dính nhau). Ô hẹp nhất vẫn 44px để dễ chạm.
   Từ 360px nhãn 12px (cả "Đăng nhập" của khách); dưới 360px mới thu còn 10.5px. */
@media (max-width: 991.98px) {
  .mobile-menu > a {
    flex: 1 1 auto !important;
    min-width: 44px !important;
    padding-inline: 0 !important;
  }
  .mobile-menu.mobile-menu > a > span {
    width: auto !important;
    max-width: 100%;
  }
}
@media (max-width: 359.98px) {
  .mobile-menu.mobile-menu > a > span { font-size: 10.5px !important; letter-spacing: 0 !important; }
  .mobile-menu > a > i { font-size: 17px !important; }
}

/* ---------- 10.13 Nút lên đầu trang: phẳng ------------------------------------- */
.backtop {
  width: 40px !important;
  height: 40px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  box-shadow: var(--shadow-sm) !important;
  color: var(--lk-ink-2) !important;
  font-size: 14px;
  filter: none !important;
  transform: none !important;
  transition: opacity .15s ease, background-color .15s ease !important;
}
.backtop:hover { background: var(--lk-sunken) !important; color: var(--lk-ink-strong) !important; filter: none !important; }

/* ---------- 10.14 Nút Zalo nổi: nhỏ, phẳng ------------------------------------ */
.lk-zalo-fab {
  right: 20px;
  bottom: 20px;
  gap: 8px;
  min-height: 44px;
  padding: 4px 16px 4px 4px;
  border-radius: 999px;
  background: var(--lk-brand) !important;
  box-shadow: var(--shadow-md) !important;
  color: var(--lk-on-brand, #FFFFFF) !important;
  font-size: 14px;
  font-weight: 600;
  transform: none !important;
  transition: background-color .15s ease !important;
}
.lk-zalo-fab:hover { background: var(--lk-brand-hover, var(--lk-brand-text)) !important; }
.lk-zalo-fab:active { transform: none !important; box-shadow: var(--shadow-md) !important; }
.lk-zalo-fab-mark {
  width: 36px;
  height: 36px;
  background: #FFFFFF;
  color: var(--lk-brand-text);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0;
}
.backtop { right: 22px !important; bottom: 76px !important; }
@media (min-width: 992px) {
  /* trang sản phẩm: thu thành tròn 44px ngoài mép cột mua (lunakey-luna mục 9) */
  body:has(.product-sticky-order-panel) .lk-zalo-fab { right: 14px; padding: 4px; }
  body:has(.product-sticky-order-panel) .backtop { right: 16px !important; }
}
/* 992–1399px lề ngoài chỉ ~20px: nút tròn vẫn đè mép nút "Mua ngay" của thanh mua dính
   (#lkBuybar). Trang sản phẩm đã có thẻ "Hỗ trợ qua Zalo & Telegram" nên ẩn nút nổi. */
@media (min-width: 992px) and (max-width: 1399.98px) {
  body:has(.product-sticky-order-panel) .lk-zalo-fab { display: none !important; }
}
@media (max-width: 991.98px) {
  .lk-zalo-fab {
    right: 16px;
    bottom: calc(64px + 12px + env(safe-area-inset-bottom, 0px));
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    justify-content: center;
  }
  .lk-zalo-fab-mark {
    width: 44px;
    height: 44px;
    background: transparent;
    color: var(--lk-on-brand, #FFFFFF);
    font-size: 11px;
  }
  .backtop {
    right: 18px !important;
    bottom: calc(64px + 12px + 44px + 12px + env(safe-area-inset-bottom, 0px)) !important;
  }
}
/* Drawer, popup tìm kiếm mở: nút nổi nằm dưới lớp tối (z 1030 < 1090) */

/* ---------- 10.15 Widget cũ (hotline đỏ, bong bóng Zalo): tắt rung / nhấp nháy -------- */
.hotline-phone-ring-circle,
.hotline-phone-ring-circle-fill {
  display: none !important;
  animation: none !important;
}
.hotline-phone-ring-img-circle {
  animation: none !important;
  background-color: var(--lk-brand) !important;
  box-shadow: none !important;
}
.hotline-bar {
  background: var(--lk-brand) !important;
  box-shadow: none !important;
  transition: none !important;
}
.hotline-bar > a { font-family: var(--font-sans) !important; letter-spacing: 0 !important; font-weight: 600 !important; }
#linkzalo .fcta-zalo-nen-nut::before,
#linkzalo .fcta-zalo-nen-nut::after { content: none !important; animation: none !important; }
#linkzalo .fcta-zalo-nen-nut,
#linkzalo div.fcta-zalo-mess { box-shadow: var(--shadow-md) !important; }
#linkzalo .fcta-zalo-ben-trong-nut,
#linkzalo .fcta-zalo-ben-trong-nut i,
#linkzalo .fcta-zalo-text { animation: none !important; transition: none !important; }
#linkzalo span.fcta-zalo-tracking,
#linkzalo .fcta-zalo-text { font-family: var(--font-sans) !important; }

/* ---------- 10.16 Footer: nền trắng, cột link đơn giản ----------------------- */
.lk-footer {
  margin-top: 48px;
  padding: 40px 0 24px;
  background: #FFFFFF !important;
  border-top: 1px solid var(--lk-line);
  color: var(--lk-ink-2);
  font-size: 14px;
}
.lk-footer::before,
.lk-footer::after { content: none !important; }
.lk-footer-top { gap: 28px 40px; }
.lk-footer-brand img { height: 30px; }
.lk-footer-desc {
  margin: 12px 0 14px;
  color: var(--lk-muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
}
/* 3 cam kết: dòng chữ kèm icon nhỏ, không còn chip viền */
.lk-footer-pills { display: grid; gap: 6px; }
.lk-footer-pill {
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--lk-ink-2);
  font-size: 13.5px;
  font-weight: 500;
}
.lk-footer-pill i { width: 16px; text-align: center; color: var(--lk-muted); font-size: 12px; }
.lk-footer h3 {
  margin: 0 0 10px;
  color: var(--lk-ink-strong) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}
.lk-footer ul { gap: 0; }
.lk-footer-links a {
  min-height: 36px;
  color: var(--lk-ink-2) !important;
  font-size: 14px;
  font-weight: 400;
  transition: color .15s ease;
}
.lk-footer-links a:hover { color: var(--lk-brand-text) !important; text-decoration: underline !important; }
.lk-footer-contact li {
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0;
  color: var(--lk-ink-2);
  font-weight: 400;
}
.lk-footer-contact li i {
  width: 16px;
  height: auto;
  margin: 0;
  border-radius: 0;
  background: none;
  color: var(--lk-muted);
  font-size: 13px;
}
.lk-footer-contact a { min-height: 36px; margin-block: 0; }
.lk-footer-contact a:hover { color: var(--lk-brand-text) !important; }
/* Nút "Nhắn Zalo": nút viền phụ (màu nhấn đã có ở nút nổi) */
.lk-footer-contact a.lk-btn.lk-btn--zalo,
.lk-footer-contact a.lk-btn.lk-btn--zalo:hover,
.lk-footer-contact a.lk-btn.lk-btn--zalo:active {
  min-height: 40px;
  margin: 10px 0 0;
  padding: 0 16px;
  background: #FFFFFF !important;
  box-shadow: inset 0 0 0 1px var(--lk-line-strong) !important;
  color: var(--lk-ink-strong) !important;
  font-size: 14px;
}
.lk-footer-contact a.lk-btn.lk-btn--zalo:hover { background: var(--lk-sunken) !important; }
.lk-footer-bottom {
  margin-top: 28px;
  padding-top: 16px;
  border-top-color: var(--lk-line);
  color: var(--lk-muted);
  font-size: 13px;
  font-weight: 400;
}
.lk-footer-bottom strong { color: var(--lk-ink-2); font-weight: 600; }
@media (max-width: 991.98px) {
  /* body đã chừa đúng chiều cao thanh nav dưới (10.12) nên footer chỉ cần lề thường */
  .lk-footer {
    margin-top: 32px;
    padding-top: 32px;
    padding-bottom: 28px;
  }
  .lk-footer-links a,
  .lk-footer-contact li,
  .lk-footer-contact a { min-height: 40px; }
}
@media (max-width: 575.98px) {
  .lk-footer-top { gap: 24px 16px; }
}

/* ---------- 10.17 Tắt hiệu ứng khi người dùng chọn giảm chuyển động ------------ */
@media (prefers-reduced-motion: reduce) {
  .nav-sidebar, .backdrop, .backtop, .lk-zalo-fab,
  .header-part .header-mega-menu, .header-part .user-dropdown-menu, .header-part .balance-dropdown-menu {
    transition: none !important;
  }
}


/* ========================================================================
   20. Trang chủ
   ======================================================================== */
/* Trang chủ (views/client/home.php + widgets/*). Nạp sau home-luna.css.
   Bỏ: vòng cung SVG, quầng sáng, khung điện thoại xoay, sticker, toast, tấm tối eSIM,
   mảng CTA xanh đặc, hiệu ứng chạy vòng / nhún. Giữ nguyên mọi id, class, data-* mà JS dùng. */

/* ---------- 20.1 Nhịp giữa các mục --------------------------------------------- */
/* ~36px giữa hai mục ở máy tính, ~24px ở điện thoại */
.lk-home .lk-sec { padding: 18px 0; }
.lk-home .lk-sec.lk-sec--first { padding-top: 24px; }
@media (max-width: 767.98px) {
  .lk-home .lk-sec { padding: 12px 0; }
  .lk-home .lk-sec.lk-sec--first { padding-top: 16px; }
  .lk-home .lk-sec-sub { font-size: 14px; }
  /* Link "Xem tất cả" ở đầu mục: vùng bấm ≥ 40px */
  .lk-home .lk-sec-head .lk-sec-link,
  .lk-home .lk-sec-head:not(.lk-sec-head--center) .lk-sec-link { display: inline-flex; align-items: center; min-height: 40px; }
  /* Dải cách giao dưới ảnh (ảnh 80–88px): bỏ giãn chữ để "TỰ ĐỘNG 24/7" không bị cắt */
  .lk-home .lk-pc .lk-pc-mode { padding-inline: 2px; letter-spacing: 0; }
}

/* ---------- 20.2 Hero ------------------------------------------------------------ */
.lk-hero {
  padding: 40px 0 32px;
  background: none;
}
.lk-hero-bg { display: none; }
.lk-hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: 48px;
  min-height: 0;
}
.lk-hero .lk-hero-title {
  margin: 0 0 12px !important;
  font-size: 28px !important;          /* H1 trang: 22–28px (điện thoại 24px) */
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -.02em !important;
  text-wrap: balance;
}
.lk-hero .lk-hl { display: inline; color: var(--lk-brand-text); }
.lk-hero .lk-hl::after { content: none; display: none; }
.lk-hero-lede {
  max-width: 54ch;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--lk-ink-2);
}

/* Ô tìm: viền mảnh, không bóng; focus = viền màu nhấn + vòng mảnh */
.lk-hero-search { max-width: 560px; margin-top: 22px; }
.lk-hero-form {
  height: 52px;
  padding: 4px 4px 4px 18px;
  border: 1px solid var(--lk-line-strong);
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.lk-hero-form:focus-within { border-color: var(--lk-brand); box-shadow: var(--ring-focus); }
.lk-hero-form-icon { font-size: 16px; }
.lk-hero-form #heroSearchInput { font-size: 16px !important; font-weight: 400; transition: none; }
.lk-hero-form #heroSearchInput::placeholder { font-weight: 400; }
.lk-hero-search .search-autocomplete { top: calc(100% + 6px); border-radius: 12px; box-shadow: var(--shadow-md); }
.lk-hero-form .lk-hero-submit {
  min-height: 44px !important;
  padding: 0 22px !important;
  border-radius: 999px !important;
  font-size: 15px !important;
}

/* 3 cam kết: một kiểu icon trung tính */
.lk-hero-trust { gap: 8px 20px; margin-top: 18px; }
.lk-hero-trust li { gap: 8px; font-size: 14px; font-weight: 500; color: var(--lk-ink-2); }
.lk-hero-trust i {
  width: 16px;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--lk-brand-text);
  font-size: 13px;
}

/* Cột phải (máy tính): một thẻ trắng phẳng "Bảng giá hôm nay".
   Máy "Đơn hàng" bị ẩn -> không có offsetParent -> script hero không chạy vòng. */
.lk-hero-stage {
  width: 100%;
  max-width: 400px;
  height: auto;
  justify-self: end;
}
.lk-hero-stage .lk-phone--order,
.lk-hero-stage .lk-sticker,
.lk-hero-stage .lk-toast,
.lk-hero-stage .lk-phone-notch,
.lk-hero-stage .lk-menu-top { display: none !important; }
.lk-hero-stage .lk-phone--menu {
  position: static;
  width: 100%;
  aspect-ratio: auto;
  padding: 0;
  rotate: none;
  border: 1px solid var(--lk-line);
  border-radius: 12px;
  background: #FFFFFF;
  box-shadow: none;
  container-type: normal;
}
.lk-hero-stage .lk-phone-screen {
  height: auto;
  border-radius: 12px;
  background: transparent;
  font-size: 14px;
  line-height: 1.4;
}
.lk-hero-stage .lk-menu-title {
  margin: 0 !important;
  padding: 16px 16px 0;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}
.lk-hero-stage .lk-menu-note {
  margin: 2px 16px 10px;
  font-size: 13px;
  font-weight: 400;
  color: var(--lk-muted);
}
.lk-hero-stage .lk-menu-list { gap: 0; padding: 0; }
.lk-hero-stage .lk-mrow,
.lk-hero-stage .lk-mrow.is-active {
  gap: 12px;
  padding: 10px 16px;
  border: 0;
  border-top: 1px solid var(--lk-line);
  border-radius: 0;
  background: transparent;
  transform: none;
  transition: background-color .15s ease;
}
.lk-hero-stage .lk-mrow:hover,
.lk-hero-stage .lk-mrow:focus-visible { background: var(--lk-sunken); }
.lk-hero-stage .lk-mrow-logo {
  width: 36px;
  height: 36px;
  padding: 4px;
  border: 1px solid var(--lk-line);
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: none;
}
.lk-hero-stage .lk-mrow-name { font-size: 14px; font-weight: 600; }
.lk-hero-stage .lk-mrow-price { font-size: 13.5px; font-weight: 700; }
.lk-hero-stage .lk-mrow-tag {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--lk-sunken);
  color: var(--lk-ink-2);
  font-size: 11px;
  font-weight: 600;
}
.lk-hero-stage .lk-mrow-go { font-size: 12px; }
.lk-hero-stage .lk-menu-cta {
  height: 44px;
  margin: 12px 16px 16px;
  border: 1px solid var(--lk-line-strong);
  border-radius: 10px;
  background: #FFFFFF;
  box-shadow: none;
  color: var(--lk-ink-strong) !important;
  font-size: 14px;
  font-weight: 600;
  transition: background-color .15s ease;
}
.lk-hero-stage .lk-menu-cta:hover { background: var(--lk-sunken); }

/* Máy tính bảng / điện thoại: hero ngắn, ô danh mục lên sớm; bảng giá trùng với "Bán chạy" nên ẩn */
@media (max-width: 991.98px) {
  .lk-hero { padding: 24px 0 16px; }
  .lk-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lk-hero-stage { display: none !important; }
  .lk-hero .lk-hero-title { font-size: 26px !important; }
}
@media (max-width: 575.98px) {
  .lk-hero { padding: 20px 0 12px; }
  .lk-hero .lk-hero-title { margin-bottom: 10px !important; font-size: 24px !important; line-height: 1.25 !important; }
  .lk-hero-lede { font-size: 15px; line-height: 1.55; }
  .lk-hero-search { margin-top: 16px; }
  .lk-hero-form { height: 52px; padding: 4px 4px 4px 16px; }
  .lk-hero-form .lk-hero-submit { width: 44px; padding: 0 !important; }
  .lk-hero-trust { gap: 8px 14px; margin-top: 14px; }
  .lk-hero-trust li { font-size: 13px; }
}

/* Banner ảnh trên cùng (nếu Admin bật) */
.home-banner-top,
.home-banner-top .home-banner-img { border-radius: 12px; box-shadow: none; }

/* ---------- 20.3 Thanh thông báo --------------------------------------------- */
.home-announcement-bar {
  gap: 12px;
  margin: 0 0 16px;
  padding: 8px 8px 8px 14px;
  border: 1px solid var(--lk-line);
  border-radius: 12px;
  background: #FFFFFF;
  color: var(--lk-ink-2);
  font-size: 14px;
  font-weight: 400;
}
.home-announcement-bar .announcement-content { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; }
.home-announcement-bar .announcement-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--lk-sunken);
  color: var(--lk-brand-text);
  font-size: 13px;
}
.home-announcement-bar .announcement-text { min-width: 0; overflow-wrap: anywhere; }
.home-announcement-bar .announcement-close {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: transparent;
  color: var(--lk-muted);
  transition: background-color .15s ease, color .15s ease;
}
.home-announcement-bar .announcement-close:hover { background: var(--lk-sunken); color: var(--lk-ink-strong); }
@media (max-width: 767.98px) {
  .home-announcement-bar .announcement-close { width: 44px; height: 44px; }
}

/* ---------- 20.4 Flash sale ----------------------------------------------------- */
/* Thẻ trắng viền mảnh. Màu đỏ chỉ còn ở đồng hồ đếm ngược và % giảm. */
.lk-home .flashsale-section {
  gap: 24px !important;
  margin: 0 0 16px !important;
  padding: 20px 24px !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
}
.lk-home .flashsale-section::before,
.lk-home .flashsale-section::after { content: none !important; display: none !important; }
.lk-home .flashsale-header { flex-basis: 220px !important; width: 220px !important; }
.lk-home .flashsale-title-row { gap: 8px !important; margin-bottom: 2px !important; }
.lk-home .flashsale-bolt-icon {
  color: var(--lk-danger-text) !important;
  font-size: 18px !important;
  filter: none !important;
}
.lk-home .flashsale-title {
  color: var(--lk-ink-strong) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  font-style: normal !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
}
.lk-home .flashsale-subtitle {
  margin: 2px 0 12px !important;
  color: var(--lk-muted) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}
.lk-home .flashsale-timer { margin-bottom: 14px !important; }
.lk-home .flashsale-timer .timer-block {
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 8px !important;
  background: var(--lk-sunken) !important;
  box-shadow: none !important;
}
.lk-home .flashsale-timer .timer-number {
  color: var(--lk-danger-text) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}
.lk-home .flashsale-timer .timer-text { color: var(--lk-muted) !important; font-size: 10.5px !important; font-weight: 500 !important; }
.lk-home .flashsale-timer .timer-colon { color: var(--lk-muted) !important; font-weight: 600 !important; transform: none !important; }
.lk-home .btn-flashsale-all,
.lk-home .btn-flashsale-all:hover {
  min-height: 40px !important;
  padding: 0 16px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
  color: var(--lk-ink-strong) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  transform: none !important;
  transition: background-color .15s ease !important;
}
.lk-home .btn-flashsale-all:hover { background: var(--lk-sunken) !important; }
.lk-home .flashsale-carousel { gap: 14px !important; }
.lk-home .flash-card,
.lk-home .flash-card:hover {
  padding: 14px !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
  transform: none !important;
  transition: border-color .15s ease !important;
}
.lk-home .flash-card:hover { border-color: var(--lk-line-strong) !important; }
.lk-home .flash-brand-logo {
  width: 48px !important;
  height: 48px !important;
  flex-basis: 48px !important;
  padding: 4px;
  border: 1px solid var(--lk-line);
  border-radius: 10px !important;
  background: var(--lk-sunken) !important;
}
.lk-home .flash-product-title { color: var(--lk-ink-strong) !important; font-size: 14.5px !important; font-weight: 600 !important; }
.lk-home .flash-product-title:hover { color: var(--lk-brand-text) !important; }
.lk-home .flash-product-plan { color: var(--lk-muted) !important; font-size: 12.5px !important; font-weight: 400 !important; }
.lk-home .flash-discount-tag {
  padding: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--lk-danger-text) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}
.lk-home .flash-discount-tag i { display: none !important; }
.lk-home .flash-price-current { color: var(--lk-brand-text) !important; font-size: 15.5px !important; font-weight: 700 !important; }
.lk-home .flash-price-original { color: var(--lk-muted) !important; font-size: 12px !important; }
.lk-home .flash-progress-track { height: 4px !important; margin-bottom: 6px !important; border-radius: 99px !important; background: var(--lk-line) !important; }
.lk-home .flash-progress-fill { border-radius: inherit !important; background: var(--lk-brand) !important; }
.lk-home .flash-stock-text,
.lk-home .flash-card.is-out-of-stock .flash-stock-text { color: var(--lk-muted) !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.3 !important; }
.lk-home .btn-flash-cart,
.lk-home .btn-flash-cart:hover {
  width: 40px !important;
  height: 40px !important;
  flex-basis: 40px !important;
  border-radius: 10px !important;
  background: var(--lk-brand) !important;
  color: var(--lk-on-brand, #FFFFFF) !important;
  transform: none !important;
  transition: background-color .15s ease !important;
}
.lk-home .btn-flash-cart:hover { background: var(--lk-brand-hover, var(--lk-brand-text)) !important; }
@media (max-width: 1080px) {
  .lk-home .flashsale-section { gap: 14px !important; padding: 16px !important; }
  .lk-home .flashsale-header {
    flex-flow: row wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 0 0 auto !important;
    gap: 10px 16px !important;
    width: 100% !important;
    max-width: none !important;
    text-align: left !important;
  }
  .lk-home .flashsale-title-row { justify-content: flex-start !important; margin: 0 !important; }
  .lk-home .flashsale-subtitle { flex: 1 0 100%; order: 3; margin: 0 !important; max-width: none; }
  .lk-home .flashsale-timer { order: 2; margin: 0 0 0 auto !important; }
  .lk-home .btn-flashsale-all { order: 4; }
  .lk-home .flashsale-timer .timer-block { width: 42px !important; min-width: 42px !important; height: 42px !important; }
}
@media (max-width: 575.98px) {
  /* Điện thoại: tên / mô tả / đồng hồ / nút xếp dọc, canh trái */
  .lk-home .flashsale-header { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  .lk-home .flashsale-subtitle,
  .lk-home .flashsale-timer,
  .lk-home .btn-flashsale-all { order: 0; flex: none; margin: 0 !important; }
  .lk-home .btn-flashsale-all { width: 100%; min-height: 44px !important; }
  .lk-home .btn-flash-cart { width: 44px !important; height: 44px !important; flex-basis: 44px !important; }
}

/* ---------- 20.5 Slider + banner dưới slider (chỉ máy tính) ------------------------ */
.lk-home .home-slider-wrapper { margin-bottom: 16px !important; }
.lk-home .home-slider-container {
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.lk-home .home-slider-track { transition: transform .3s ease !important; }
.lk-home .home-slider-nav,
.lk-home .home-slider-nav:hover {
  width: 40px !important;
  height: 40px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
  color: var(--lk-ink-strong) !important;
  backdrop-filter: none !important;
  transform: translateY(-50%) !important;
  transition: background-color .15s ease, color .15s ease !important;
}
.lk-home .home-slider-nav:hover { background: var(--lk-sunken) !important; color: var(--lk-brand-text) !important; }
/* Chấm chỉ 8px nhưng nút bấm 24px; viền trắng để thấy được trên ảnh */
.lk-home .home-slider-indicator,
.lk-home .home-slider-indicator.active {
  position: relative;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: transparent !important;
  transition: none !important;
}
.lk-home .home-slider-indicator::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lk-line-strong);
  box-shadow: 0 0 0 2px #FFFFFF;
  transform: translate(-50%, -50%);
  transition: background-color .15s ease;
}
.lk-home .home-slider-indicator.active::after { width: 8px; background: var(--lk-brand); }
.lk-home .home-slider-autoplay-toggle {
  width: 28px;
  height: 28px;
  border: 1px solid var(--lk-line-strong);
  border-radius: 8px;
  background: #FFFFFF;
  color: var(--lk-ink-2);
}
.lk-home .home-slider-autoplay-toggle:hover,
.lk-home .home-slider-autoplay-toggle:focus-visible { background: var(--lk-sunken); color: var(--lk-ink-strong); }
.lk-home .gaming-feature-banners-section { margin: 0 0 16px !important; }
.lk-home .gaming-feature-banners-grid { gap: 14px !important; }
.lk-home .gaming-feature-banner-link,
.lk-home .gaming-feature-banner-link:hover {
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transform: none !important;
  transition: border-color .15s ease !important;
}
.lk-home .gaming-feature-banner-link:hover { border-color: var(--lk-line-strong) !important; }
.lk-home .gaming-feature-banner-img { transform: none !important; transition: none !important; }

/* ---------- 20.6 eSIM: mục sáng bình thường (không còn tấm tối) ---------------------- */
.lk-home .lk-night {
  margin: 18px 0 !important;
  padding: 0;
  overflow: visible;
  border-radius: 0;
  background: none;
  color: inherit;
}
.lk-night .lk-night-arcs { display: none; }
.lk-night .lk-sec-title { color: var(--lk-ink-strong) !important; }
.lk-night .lk-sec-sub { color: var(--lk-muted); }
.lk-night .lk-sec-link { color: var(--lk-brand-text) !important; }
/* Cả mục đã là eSIM: bỏ chip danh mục "ESIM NHẬT BẢN…" lặp lại trên từng thẻ (giống hàng danh mục) */
.home-esim-section .lk-pc .lk-pc-cat { display: none; }

/* Lưới: 3 cột (≥1200) / 2 cột (768–1199) / 1 cột; ô "Đã có SIM?" lấp nốt hàng cuối.
   --N = số thẻ eSIM + 1 ô. */
.lk-night .products-grid.featured-5cols-grid.lk-esim-grid.featured-esim-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
.lk-esim-grid--2 > .lk-esim-have,
.lk-esim-grid--5 > .lk-esim-have { grid-column: span 2; }
.lk-esim-grid--4 > .lk-esim-have { grid-column: 1 / -1; }
@media (max-width: 1199.98px) {
  .lk-night .products-grid.featured-5cols-grid.lk-esim-grid.featured-esim-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .lk-esim-grid--2 > .lk-esim-have,
  .lk-esim-grid--4 > .lk-esim-have { grid-column: auto; }
  .lk-esim-grid--3 > .lk-esim-have,
  .lk-esim-grid--5 > .lk-esim-have { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
  .lk-home .lk-night { margin: 12px 0 !important; }
  .lk-night .products-grid.featured-5cols-grid.lk-esim-grid.featured-esim-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
  .lk-esim-grid > .lk-esim-have { grid-column: auto !important; }
}

/* Ô "Đã có SIM rồi?": hộp viền mảnh, hai link là nút viền */
.lk-esim-have {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  grid-template-areas: "icon title" "text text" "links links";
  align-items: center;
  gap: 10px 12px;
  padding: 16px;
  border: 1px solid var(--lk-line);
  border-radius: 12px;
  background: #FFFFFF;
  box-shadow: none;
}
.lk-esim-have-icon {
  grid-area: icon;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--lk-sunken);
  color: var(--lk-brand-text);
  font-size: 16px;
}
.lk-night .lk-esim-have-title {
  grid-area: title;
  margin: 0 !important;
  color: var(--lk-ink-strong) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}
.lk-esim-have-text {
  grid-area: text;
  align-self: start;
  color: var(--lk-muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
}
.lk-esim-have-links {
  grid-area: links;
  align-self: end;
  margin: 0;
  padding: 0;
}
.lk-night-link {
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px var(--lk-line-strong);
  color: var(--lk-ink-strong) !important;
  font-size: 14px;
  font-weight: 600;
  transition: background-color .15s ease;
}
.lk-night-link:hover { background: var(--lk-sunken); }
.lk-night-link i { color: var(--lk-ink-2); font-size: 13px; }
/* Ô nằm cả một hàng (hoặc 2 cột): xếp ngang icon | chữ | nút */
@media (min-width: 768px) {
  .lk-esim-grid--4 > .lk-esim-have,
  .lk-esim-grid--5 > .lk-esim-have,
  .lk-esim-grid--2 > .lk-esim-have {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    grid-template-areas: "icon title links" "icon text links";
    gap: 2px 14px;
  }
  .lk-esim-grid--4 > .lk-esim-have .lk-esim-have-links,
  .lk-esim-grid--5 > .lk-esim-have .lk-esim-have-links,
  .lk-esim-grid--2 > .lk-esim-have .lk-esim-have-links { flex-flow: row wrap; align-self: center; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .lk-esim-grid--2 > .lk-esim-have,
  .lk-esim-grid--4 > .lk-esim-have {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "icon title" "text text" "links links";
    gap: 10px 12px;
  }
  .lk-esim-grid--2 > .lk-esim-have .lk-esim-have-links,
  .lk-esim-grid--4 > .lk-esim-have .lk-esim-have-links { flex-direction: column; align-self: end; }
  .lk-esim-grid--3 > .lk-esim-have {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    grid-template-areas: "icon title links" "icon text links";
    gap: 2px 14px;
  }
  .lk-esim-grid--3 > .lk-esim-have .lk-esim-have-links { flex-flow: row wrap; align-self: center; }
}

.lk-night .lk-night-foot { margin-top: 12px; padding-top: 0; border-top: 0; }
.lk-night .esim-feat-help {
  max-width: none;
  color: var(--lk-muted) !important;
  font-size: 14px;
  font-weight: 400;
}
.lk-night .esim-feat-help i { color: var(--lk-muted) !important; }
.lk-night .esim-feat-help a { color: var(--lk-brand-text) !important; font-weight: 600; }

/* ---------- 20.7 Mua theo danh mục (hàng cuộn ngang) --------------------------------- */
/* Thẻ ngang .lk-pc cần ~340px: 3 thẻ (≥1200) / 2 thẻ + mẩu thẻ sau / ~1 thẻ + mẩu thẻ sau */
.lk-home .home-shelves-section { margin-block: 0 !important; }
.home-shelves-section .lk-sec-head { margin-bottom: 12px; }
.home-shelf { --shelf-cols: 3; --shelf-gap: 14px; }
.home-shelf + .home-shelf { margin-top: 12px; }
@media (max-width: 1199.98px) {
  .home-shelf { --shelf-cols: 2.2; }
}
@media (max-width: 767.98px) {
  .home-shelf { --shelf-gap: 10px; }
  .home-shelf + .home-shelf { margin-top: 8px; }
  .home-shelf .home-shelf-track { grid-auto-columns: min(calc(100% - 40px), 360px); }
}
/* Máy rất hẹp: thẻ gần trọn bề ngang, chỉ ló ~14px thẻ sau */
@media (max-width: 399.98px) {
  .home-shelf .home-shelf-track { grid-auto-columns: calc(100% - 24px); }
}

.home-shelf .home-shelf-head { margin-bottom: 10px; }
/* Icon danh mục là ảnh upload nhiều màu (mỗi hàng một kiểu): bỏ, tên hàng đã đủ rõ */
.home-shelf .home-shelf-icon { display: none; }
.home-shelf .home-shelf-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.3;
}
.home-shelf .home-shelf-count { color: var(--lk-muted) !important; font-size: 12.5px; font-weight: 400 !important; }
.home-shelf .home-shelf-nav {
  width: 40px;
  height: 40px;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  transition: background-color .15s ease, color .15s ease;
}
.home-shelf .home-shelf-nav:hover:not(:disabled) { background: var(--lk-sunken) !important; }
.home-shelf .home-shelf-nav:active:not(:disabled) { transform: none; }
.home-shelf .home-shelf-all { font-size: 14px; font-weight: 600 !important; }
/* Tên danh mục đã ở đầu hàng: bỏ chip danh mục trên từng thẻ */
.home-shelf .lk-pc .lk-pc-cat { display: none; }
/* Máy tính bảng / điện thoại: 14 hàng nối nhau -> thẻ trong hàng bỏ ô Kho / Đã bán
   (vẫn có ở lưới "Bán chạy" và trang sản phẩm), mỗi hàng thấp hơn ~60px */
@media (max-width: 991.98px) {
  .home-shelf .lk-pc .lk-pc-stats { display: none; }
}

.home-shelf .home-shelf-more {
  gap: 8px;
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  transition: border-color .15s ease;
}
.home-shelf .home-shelf-more:hover { border-color: var(--lk-line-strong) !important; box-shadow: none; }
.home-shelf .home-shelf-more-icon {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px !important;
  background: var(--lk-sunken) !important;
  color: var(--lk-brand-text) !important;
}
.home-shelf .home-shelf-more-text { color: var(--lk-ink-strong) !important; font-size: 14px; font-weight: 600 !important; }
.home-shelf .home-shelf-more-note { color: var(--lk-muted) !important; font-size: 12.5px; }

/* ---------- 20.8 Đã xem gần đây (thẻ .lk-pc do home.js dựng) ---------------------------- */
.lk-home .recently-viewed-section { margin: 24px 0 0; }
.recently-viewed-section .products-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 24px;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: none;
}
.recently-viewed-section .products-section-header-left { min-width: 0; }
.recently-viewed-section .products-section-title { margin: 0; }
.recently-viewed-section .products-section-title > i { display: none; }
.recently-viewed-section .products-section-subtitle { margin: 4px 0 0; color: var(--lk-muted); font-size: 14.5px; font-weight: 400; }
.recently-viewed-section .btn-explore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 4px;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--lk-brand-text) !important;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none !important;
  transform: none;
  transition: color .15s ease;
}
.recently-viewed-section .btn-explore:hover { color: var(--lk-brand-text-hover) !important; }
.recently-viewed-carousel {
  gap: 14px;
  margin-inline: -8px;
  padding: 2px 8px 10px;
  scroll-padding-inline: 8px;
}
.recently-viewed-carousel > .lk-pc {
  flex: 0 0 calc((100% - 28px) / 3);
  min-width: 0;
  scroll-snap-align: start;
}
/* height:100% của thẻ không áp được trong hàng flex -> các thẻ cao thấp khác nhau; auto để kéo bằng nhau */
#recentlyViewedCarousel > .product-card.lk-pc.featured-product-card { height: auto !important; }
.recently-viewed-nav {
  width: 40px;
  height: 40px;
  border: 1px solid var(--lk-line-strong);
  border-radius: 10px;
  background: #FFFFFF;
  box-shadow: none;
  color: var(--lk-ink-2);
  transition: background-color .15s ease, color .15s ease;
}
.recently-viewed-nav:hover { background: var(--lk-sunken); color: var(--lk-ink-strong); }
/* Nút ‹ › không đè lên thẻ: đặt ở cuối dòng tiêu đề như hàng danh mục; ẩn khi số thẻ vừa khung */
@media (min-width: 992px) {
  .recently-viewed-section .recently-viewed-nav {
    top: -52px;
    transform: none;
  }
  .recently-viewed-section .recently-viewed-nav-prev { left: auto; right: 48px; }
  .recently-viewed-section .recently-viewed-nav-next { right: 0; }
  .recently-viewed-section:has(.recently-viewed-nav:not([hidden])) .products-section-header { padding-right: 104px; }
}
@media (min-width: 1200px) {
  .recently-viewed-section:not(:has(#recentlyViewedCarousel > :nth-child(4))) .recently-viewed-nav { display: none; }
  .recently-viewed-section:not(:has(#recentlyViewedCarousel > :nth-child(4))) .products-section-header { padding-right: 0; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .recently-viewed-section:not(:has(#recentlyViewedCarousel > :nth-child(3))) .recently-viewed-nav { display: none; }
  .recently-viewed-section:not(:has(#recentlyViewedCarousel > :nth-child(3))) .products-section-header { padding-right: 0; }
}
/* Màn cảm ứng: vuốt, không cần nút (giống hàng danh mục) */
@media (max-width: 991.98px) {
  .recently-viewed-section .recently-viewed-nav { display: none; }
}
@media (max-width: 1199.98px) {
  .recently-viewed-carousel > .lk-pc { flex-basis: calc((100% - 16.8px) / 2.2); }
}
@media (max-width: 767.98px) {
  .lk-home .recently-viewed-section { margin-top: 16px; }
  .recently-viewed-carousel { gap: 10px; }
  .recently-viewed-carousel > .lk-pc { flex-basis: min(calc(100% - 40px), 360px); }
}
@media (max-width: 399.98px) {
  .recently-viewed-carousel > .lk-pc { flex-basis: calc(100% - 24px); }
}

/* ---------- 20.9 Chọn gói, quét QR là xong ------------------------------------------- */
.lk-how .lk-sec-head { margin-bottom: 16px; }
.lk-steps { gap: 14px; }
.lk-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  box-shadow: none;
}
.lk-step .lk-step-art {
  grid-column: 1 / -1;
  grid-row: auto;
  gap: 10px;
  height: 120px;
  margin: 0;
  border-radius: 10px;
  background: var(--lk-sunken);
}
.lk-step .lk-step-no {
  position: static;
  width: 28px;
  height: 28px;
  translate: none;
  border-radius: 8px;
  background: var(--lk-brand-soft);
  box-shadow: none;
  color: var(--lk-brand-text);
  font-size: 14px;
  font-weight: 700;
}
.lk-step h3 {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}
.lk-step p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--lk-muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
}
.lk-art-plans { gap: 6px; }
.lk-art-plans span {
  padding: 7px 10px;
  border: 1px solid var(--lk-line);
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
}
.lk-art-plans .is-on { border-color: var(--lk-brand); box-shadow: none; color: var(--lk-brand-text); }
.lk-art-chip { padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; }
.lk-art-bar { height: 8px; border-radius: 4px; background: var(--lk-line); }
.lk-art-qr {
  width: 80px;
  height: 80px;
  padding: 8px;
  border: 1px solid var(--lk-line);
  border-radius: 8px;
  box-shadow: none;
  color: var(--lk-ink-2);
}
.lk-art-cred { padding: 4px 12px; border: 1px solid var(--lk-line); border-radius: 8px; box-shadow: none; }
.lk-art-cred-row + .lk-art-cred-row { border-top-style: solid; }
.lk-art-cred-row b { font-weight: 500; }
.lk-art-cred-row span { font-weight: 600; }
/* Máy tính bảng / điện thoại: bỏ hình minh hoạ, mỗi bước một hàng gọn (số | tiêu đề / mô tả) */
@media (max-width: 991.98px) {
  .lk-how .lk-sec-head { margin-bottom: 12px; }
  .lk-steps { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .lk-step { gap: 4px 12px; padding: 14px; }
  .lk-step .lk-step-art { display: none; }
  .lk-step p { grid-column: 2; }
}

/* ---------- 20.10 Mua an tâm ----------------------------------------------------------- */
.lk-safe { gap: 24px 48px; }
.lk-safe-intro .lk-sec-title { font-size: clamp(20px, 2vw, 26px) !important; }
.lk-proof { gap: 12px 28px; margin-top: 18px; }
.lk-proof dt { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.lk-proof dt span { font-size: .6em; font-weight: 500; }
.lk-proof dd { font-size: 13px; font-weight: 400; }
.lk-safe-help {
  gap: 10px;
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 400;
}
.lk-safe-help i { margin-top: 2px; color: var(--lk-brand-text); font-size: 16px; }
.lk-safe-help a { font-weight: 600; }
.lk-safe-list { padding: 4px 20px; border-radius: 12px; box-shadow: none; }
.lk-safe-list li { gap: 14px; padding: 16px 0; }
.lk-safe-list .lk-safe-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--lk-sunken);
  color: var(--lk-brand-text);
  font-size: 16px;
}
.lk-safe-list h3 { margin: 0 0 4px !important; font-size: 15.5px !important; font-weight: 600 !important; }
.lk-safe-list p { font-size: 14px; font-weight: 400; }
@media (max-width: 991.98px) {
  .lk-safe { gap: 16px; }
  .lk-proof { gap: 12px 16px; }
  .lk-proof > div { flex: 1 1 140px; }
  .lk-safe-list { padding: 0 16px; }
  .lk-safe-list li { gap: 12px; padding: 14px 0; }
  .lk-safe-list .lk-safe-icon { width: 36px; height: 36px; font-size: 15px; }
}

/* ---------- 20.11 Đánh giá thật ---------------------------------------------------------- */
.lk-reviews .lk-sec-head { margin-bottom: 14px; }
.lk-rv-nav {
  width: 40px;
  height: 40px;
  border: 1px solid var(--lk-line-strong);
  border-radius: 10px;
  transition: background-color .15s ease, color .15s ease;
}
.lk-rv-nav:hover:not(:disabled) { background: var(--lk-sunken); }
.lk-rv-track { gap: 14px; padding-top: 2px; padding-bottom: 10px; }
.lk-review {
  gap: 10px;
  padding: 16px;
  border-radius: 12px;
  box-shadow: none;
}
.lk-review-stars .is-off { color: var(--lk-line-strong); }
.lk-review-text { color: var(--lk-ink); font-size: 14.5px; font-weight: 400; line-height: 1.55; }
.lk-review-foot { padding-top: 10px; border-top-style: solid; }
.lk-review-foot img { padding: 4px; border: 1px solid var(--lk-line); border-radius: 8px; background: #FFFFFF; }
.lk-review-who { font-size: 13.5px; font-weight: 600; }
.lk-review-verified { font-weight: 500; }
.lk-review-what { font-size: 12.5px; font-weight: 400; }
@media (max-width: 575.98px) {
  .lk-review { padding: 14px; }
}

/* ---------- 20.12 CTA cuối: hộp trắng viền mảnh, nút màu nhấn ------------------------------ */
.lk-cta {
  padding: 32px 24px;
  border: 1px solid var(--lk-line);
  border-radius: 12px;
  background: #FFFFFF;
  box-shadow: none;
  color: var(--lk-ink);
}
.lk-cta .lk-cta-arcs { display: none; }
.lk-cta .lk-cta-title {
  max-width: 30ch;
  margin: 0 auto 8px !important;
  font-size: clamp(20px, 2vw, 26px) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -.015em !important;
  color: var(--lk-ink-strong) !important;
}
.lk-cta-text { margin: 0 auto 18px; color: var(--lk-muted); font-size: 15px; font-weight: 400; }
.lk-cta-search {
  height: 52px;
  max-width: 520px;
  margin: 0 auto 12px;
  padding: 4px 4px 4px 18px;
  border: 1px solid var(--lk-line-strong);
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.lk-cta-search:focus-within { border-color: var(--lk-brand); box-shadow: var(--ring-focus); }
.lk-cta-search i { font-size: 16px; }
.lk-cta-search input { font-size: 16px; font-weight: 400; transition: none; }
.lk-cta-search input::placeholder { font-weight: 400; }
.lk-cta-search .lk-btn.lk-btn--white {
  --key-face: var(--lk-brand);
  --key-face-hover: var(--lk-brand-text);
  --key-ink: #FFFFFF;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px !important;
  background: var(--lk-brand) !important;
  box-shadow: none !important;
  color: var(--lk-on-brand, #FFFFFF) !important;
}
.lk-cta-search .lk-btn.lk-btn--white:hover { background: var(--lk-brand-hover, var(--lk-brand-text)) !important; }
.lk-cta-actions { gap: 8px 16px; }
.lk-cta .lk-cta-all {
  color: var(--lk-brand-text) !important;
  font-weight: 600;
  text-decoration: none !important;
}
.lk-cta .lk-cta-all:hover { color: var(--lk-brand-text-hover) !important; text-decoration: underline !important; }
.lk-cta .lk-btn.lk-btn--onbrand,
.lk-cta .lk-btn.lk-btn--onbrand:active {
  min-height: 44px;
  padding: 0 18px;
  background: #FFFFFF !important;
  box-shadow: inset 0 0 0 1px var(--lk-line-strong) !important;
  color: var(--lk-ink-strong) !important;
  font-size: 14.5px;
  transform: none !important;
}
.lk-cta .lk-btn.lk-btn--onbrand:hover { background: var(--lk-sunken) !important; }
.lk-cta .lk-zalo-word {
  height: 22px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--lk-brand-soft);
  color: var(--lk-brand-text);
  font-size: 11px;
  font-weight: 700;
}
@media (max-width: 767.98px) {
  .lk-cta { padding: 24px 16px; }
  .lk-cta-text { font-size: 14.5px; }
}
@media (max-width: 575.98px) {
  .lk-cta-search { padding-left: 16px; }
  .lk-cta-search > i { display: none; }
  /* Ô đã có đệm trái: bỏ đệm của input + nút gọn lại để gợi ý "Netflix, ChatGPT, eSIM…" hiện được nhiều chữ hơn */
  .lk-cta-search input { padding-left: 0 !important; padding-right: 8px !important; }
  .lk-cta-search .lk-btn.lk-btn--white { padding: 0 18px; }
}

/* ---------- 20.13 Giới thiệu (SEO) ------------------------------------------------------------ */
.lk-home .lk-sec.lk-about { padding: 8px 0 24px; }
.lk-about .lk-about-title { font-size: 15px !important; font-weight: 600 !important; }
.lk-about-text { font-size: 14px; font-weight: 400; }

/* ---------- 20.14 Banner cố định hai bên (≥1600px) ---------------------------------------- */
/* home.js đặt opacity/transform inline để "bay xuống" có nảy; !important ở đây giữ banner đứng yên,
   chỉ còn hiện mờ dần ngắn. */
.home-sidebar-banner {
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transform: translateY(-50%) !important;
  transition: opacity .15s ease !important;
}
.home-sidebar-banner .home-sidebar-banner-close {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(16, 24, 40, .6);
}

/* ---------- 20.15 Giảm chuyển động --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .lk-hero-form, .lk-cta-search, .lk-hero-stage .lk-mrow, .lk-night-link,
  .home-shelf .home-shelf-nav, .lk-home .home-slider-track { transition: none !important; }
}


/* ========================================================================
   30. Mua hàng: danh sách, sản phẩm, giỏ, đơn hàng, yêu thích
   ======================================================================== */
/* ==========================================================================
   30. MUA HÀNG: danh sách (/products, /category, /esim), chi tiết sản phẩm,
   giỏ hàng, yêu thích, đơn hàng. Chỉ phẳng hoá + chỉnh kích thước; không đổi
   id / class mà JS đang dùng (products-filter.js, product-checkout-direct.js,
   cart-direct-checkout.js, favorites.js, product-orders.js).
   ========================================================================== */

/* ---------- 30.1 Danh sách: đầu trang ------------------------------------- */
.catalog-page-header.page-header-modern {
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
.catalog-page-header .page-title-modern {
  display: flex !important;
  align-items: center;
  gap: 10px !important;
  margin: 0 0 4px !important;
  color: var(--lk-ink-strong) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -.015em !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
/* Icon chữ (túi mua hàng / SIM) chỉ trang trí: bỏ. Logo danh mục (img) giữ, nhỏ lại. */
.catalog-page-header #catalogTitleIcon > i { display: none !important; }
.catalog-page-header #catalogTitleIcon:not(:has(img)) { display: none !important; }
.catalog-page-header #catalogTitleIcon {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.catalog-page-header #catalogTitleIcon img {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain;
  border-radius: 6px;
}
.catalog-page-header .page-subtitle-modern {
  color: var(--lk-muted) !important;
  font-size: 14.5px !important;
  font-weight: 400 !important;
}
.catalog-page-header .breadcrumb-modern,
.catalog-page-header .breadcrumb-modern a {
  color: var(--lk-muted) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}
.catalog-page-header .breadcrumb-modern .current { color: var(--lk-ink-2) !important; font-weight: 500 !important; }
@media (max-width: 575.98px) {
  .catalog-page-header .page-title-modern { font-size: 22px !important; }
  .catalog-page-header #catalogTitleIcon img { width: 24px !important; height: 24px !important; }
  .catalog-page-header .page-subtitle-modern { font-size: 13px !important; }
}

/* ---------- 30.2 Khung lọc (sidebar desktop / sheet dưới mobile) ---------- */
.products-page .catalog-filter-panel {
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
}
.products-page .catalog-filter-head { padding: 12px 14px !important; }
.products-page #catalogFilterTitle {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--lk-ink-strong) !important;
  white-space: nowrap;
}
.products-page #catalogFilterTitle > i { color: var(--lk-ink-2) !important; font-size: 14px; }
.products-page .catalog-filter-panel .catalog-filter-reset {
  min-height: 34px !important;
  padding: 0 10px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  color: var(--lk-ink-2) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
.products-page .catalog-filter-panel .catalog-filter-reset:hover { background: var(--lk-sunken) !important; }
.products-page .catalog-filter-body { padding: 14px 14px 2px !important; }
.products-page .catalog-filter-group { margin-bottom: 18px !important; }
.products-page .catalog-filter-label,
.products-page .catalog-filter-group > .form-label {
  margin-bottom: 8px !important;
  color: var(--lk-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}
.products-page .catalog-filter-foot {
  padding: 12px 14px 14px !important;
  border-top: 1px solid var(--lk-line) !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
}
.products-page .catalog-filter-panel #btnApplyFilter {
  min-height: 44px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--lk-brand) !important;
  color: var(--lk-on-brand, #FFFFFF) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color .15s ease !important;
}
.products-page .catalog-filter-panel #btnApplyFilter:hover { background: var(--lk-brand-hover, var(--lk-brand-text)) !important; }

/* Ô nhập: phẳng, 44px */
.products-page .catalog-filter-panel .form-control,
.products-page .catalog-toolbar .form-select {
  min-height: 44px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background-color: #FFFFFF !important;
  color: var(--lk-ink-strong) !important;
  font-size: 14px !important;
  box-shadow: none !important;
  transition: border-color .15s ease !important;
}
.products-page .catalog-filter-panel .form-control:focus,
.products-page .catalog-toolbar .form-select:focus {
  border-color: var(--lk-brand) !important;
  box-shadow: var(--ring-focus) !important;
}
.products-page .catalog-filter-panel .form-control::placeholder { color: #8A93A5; }
.products-page .catalog-filter-panel .catalog-price-inputs .form-control[aria-invalid="true"] {
  border-color: var(--lk-danger-text) !important;
  box-shadow: 0 0 0 3px rgba(217, 45, 32, .12) !important;
}

/* Desktop: 1280px cột lọc còn 291px, đầu khung vẫn 1 hàng */
@media (min-width: 992px) {
  .products-page .catalog-filter-col { top: 88px; }
}

/* Sheet dưới (<992px): bóng hộp thoại, rộng tối đa 560px ở máy tính bảng */
@media (max-width: 991.98px) {
  .products-page .catalog-filter-panel.gaming-filter-sidebar {
    max-width: 560px;
    margin: 0 auto !important;
    border: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: var(--shadow-lg) !important;
    transition: transform .2s ease, visibility 0s linear .2s !important;
  }
  .products-page .catalog-filter-panel.gaming-filter-sidebar.is-open {
    transition: transform .2s ease, visibility 0s !important;
  }
  .products-page .catalog-filter-head { padding: 20px 16px 12px !important; }
  .products-page .catalog-filter-head::before { background: var(--lk-line-strong) !important; }
  .products-page .catalog-filter-body { padding: 14px 16px 4px !important; }
  .products-page .catalog-filter-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important; }
  .products-page .catalog-filter-panel .catalog-filter-reset { min-height: 40px !important; padding: 0 12px !important; }
  .products-page .catalog-filter-close {
    width: 40px !important;
    height: 40px !important;
    border: 1px solid var(--lk-line-strong) !important;
    border-radius: 10px !important;
    background: #FFFFFF !important;
    color: var(--lk-ink-2) !important;
  }
  .products-page .catalog-filter-panel #btnApplyFilter { min-height: 48px !important; font-size: 15px !important; }
  /* iOS không phóng to khi chạm ô nhập */
  .products-page .catalog-filter-panel .form-control,
  .products-page .catalog-toolbar .form-select { font-size: 16px !important; }
  .catalog-filter-backdrop { background: rgba(16, 24, 40, .45) !important; transition: opacity .2s ease !important; }
}

/* ---------- 30.3 Cây danh mục: gọn, số đếm là chữ mờ ---------------------- */
.products-page .catalog-filter-panel .filter-category-nav-list { gap: 1px !important; }
.products-page .catalog-filter-panel .filter-cat-row { gap: 0 !important; }
.products-page .catalog-filter-panel .filter-cat-nav-item {
  min-height: 38px !important;
  padding: 6px 10px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--lk-ink) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color .15s ease, color .15s ease !important;
}
.products-page .catalog-filter-panel .filter-cat-nav-item:hover { background: var(--lk-sunken) !important; }
.products-page .catalog-filter-panel .filter-cat-nav-item.active {
  background: var(--lk-brand-soft) !important;
  color: var(--lk-brand-text) !important;
  font-weight: 600 !important;
}
/* Icon / logo trước tên danh mục: nhiều màu, không giúp chọn -> bỏ */
.products-page .catalog-filter-panel .filter-cat-name > img,
.products-page .catalog-filter-panel .filter-cat-name > i { display: none !important; }
.products-page .catalog-filter-panel .filter-cat-name { gap: 0 !important; }
.products-page .catalog-filter-panel .filter-count-badge {
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--lk-muted) !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  box-shadow: none !important;
}
.products-page .catalog-filter-panel .filter-cat-nav-item.active .filter-count-badge { color: var(--lk-brand-text) !important; }
.products-page .catalog-filter-panel .filter-cat-toggle {
  flex: 0 0 36px !important;
  width: 36px !important;
  min-height: 38px !important;
  border-radius: 8px !important;
  color: var(--lk-muted) !important;
}
.products-page .catalog-filter-panel .filter-cat-toggle:hover { background: var(--lk-sunken) !important; color: var(--lk-ink-2) !important; }
.products-page .catalog-filter-panel .filter-cat-toggle i { transition: transform .15s ease !important; }
.products-page .catalog-filter-panel .filter-cat-children {
  margin: 1px 0 4px 10px !important;
  padding-left: 0 !important;
  border-left: 0 !important;
  gap: 1px !important;
}
.products-page .catalog-filter-panel .filter-cat-child {
  color: var(--lk-ink-2) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
}
.products-page .catalog-filter-panel .filter-cat-child.active { font-weight: 600 !important; }
@media (max-width: 991.98px) {
  .products-page .catalog-filter-panel .filter-cat-nav-item { min-height: 42px !important; font-size: 15px !important; }
  .products-page .catalog-filter-panel .filter-cat-child { font-size: 14.5px !important; }
  .products-page .catalog-filter-panel .filter-cat-toggle { flex-basis: 44px !important; width: 44px !important; min-height: 42px !important; }
}

/* ---------- 30.4 Mốc giá, đánh giá, tình trạng ---------------------------- */
.products-page .catalog-price-presets { gap: 6px !important; }
.products-page .catalog-filter-panel .price-preset-btn,
.products-page .catalog-filter-panel .price-preset-btn.btn-xs {
  min-height: 36px !important;
  padding: 0 12px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  color: var(--lk-ink-2) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease !important;
}
.products-page .catalog-filter-panel .price-preset-btn:hover { background: var(--lk-sunken) !important; }
/* JS bật .active.btn-primary.text-white: viền + nền xanh nhạt thay vì khối xanh đặc có bóng */
.products-page .catalog-filter-panel .price-preset-btn.active,
.products-page .catalog-filter-panel .price-preset-btn.active.btn-primary.text-white {
  border-color: var(--lk-brand) !important;
  background: var(--lk-brand-soft) !important;
  color: var(--lk-brand-text) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.products-page .catalog-price-hint { color: var(--lk-muted) !important; font-size: 12px !important; }
.products-page .catalog-filter-panel .filter-checkbox-row {
  min-height: 40px !important;
  padding: 4px 6px !important;
  border-radius: 8px !important;
  color: var(--lk-ink) !important;
  font-size: 14px !important;
}
.products-page .catalog-filter-panel .filter-checkbox-row:hover { background: var(--lk-sunken); }
.products-page .catalog-filter-panel .filter-checkbox-row .text-secondary,
.products-page .catalog-filter-panel .filter-checkbox-row .text-dark,
.products-page .catalog-filter-panel .filter-checkbox-row .small.text-muted {
  color: var(--lk-ink) !important;
  font-size: 14px !important;
}
.products-page .catalog-filter-panel .form-check-input {
  width: 18px !important;
  height: 18px !important;
  border-color: var(--lk-line-strong) !important;
  box-shadow: none !important;
}
.products-page .catalog-filter-panel .form-check-input:checked {
  border-color: var(--lk-brand) !important;
  background-color: var(--lk-brand) !important;
}
.products-page .catalog-rating-stars { color: var(--lk-moon) !important; }
.products-page .catalog-instant-tag {
  padding: 0 !important;
  background: none !important;
  color: var(--lk-ink) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}
.products-page .catalog-instant-tag i { color: var(--lk-ok-text); font-size: 12px; }
@media (max-width: 991.98px) {
  .products-page .catalog-filter-panel .price-preset-btn,
  .products-page .catalog-filter-panel .price-preset-btn.btn-xs { min-height: 40px !important; padding: 0 14px !important; font-size: 14px !important; }
  .products-page .catalog-filter-panel .filter-checkbox-row { min-height: 44px !important; }
}

/* ---------- 30.5 Thanh công cụ, chip đang lọc, ghi chú ------------------- */
.products-page .catalog-toolbar {
  gap: 10px 12px !important;
  padding-bottom: 12px !important;
  margin-bottom: 14px !important;
  border-bottom: 1px solid var(--lk-line) !important;
}
.products-page .catalog-results-count {
  color: var(--lk-ink-2) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
.products-page .catalog-results-count > i { display: none !important; }
.products-page .catalog-sort-label { color: var(--lk-muted) !important; font-size: 13px !important; font-weight: 500 !important; }
.products-page .catalog-toolbar .form-select { min-width: 170px; padding-right: 36px !important; }
.products-page .catalog-filter-open {
  min-height: 44px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  color: var(--lk-ink-strong) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.products-page .catalog-filter-open > i { color: var(--lk-ink-2) !important; }
.products-page .catalog-filter-open-count {
  background: var(--lk-brand) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.products-page .catalog-chip {
  min-height: 34px !important;
  border: 1px solid var(--lk-brand-soft-2) !important;
  border-radius: 8px !important;
  background: var(--lk-brand-soft) !important;
  color: var(--lk-brand-text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.products-page .catalog-chip-remove { border-radius: 6px !important; }
.products-page .catalog-chip-remove:hover { background: var(--lk-brand-soft-2) !important; color: var(--lk-brand-text-hover) !important; }
.products-page .catalog-chip-clear {
  color: var(--lk-brand-text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.products-page .catalog-notice {
  border: 1px solid #FEDF89 !important;
  border-radius: 12px !important;
  background: var(--lk-warn-bg) !important;
}
.products-page .catalog-notice-icon {
  flex-basis: auto !important;
  width: auto !important;
  height: auto !important;
  padding-top: 1px;
  background: none !important;
  color: var(--lk-warn-text) !important;
  font-size: 18px !important;
}
.products-page .catalog-notice-title { color: var(--lk-ink-strong) !important; font-size: 15px !important; font-weight: 600 !important; }
.products-page .catalog-notice-text { color: var(--lk-ink-2) !important; }
.products-page .catalog-link-chip {
  min-height: 36px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  color: var(--lk-ink) !important;
  font-weight: 500 !important;
}
.products-page .catalog-link-chip:hover { border-color: var(--lk-brand) !important; color: var(--lk-brand-text) !important; }
.products-page .catalog-search-note {
  border: 1px solid var(--lk-brand-soft-2) !important;
  border-radius: 12px !important;
  background: var(--lk-brand-soft) !important;
  color: var(--lk-ink) !important;
}
.products-page .catalog-search-note a { color: var(--lk-brand-text) !important; font-weight: 600 !important; }

@media (max-width: 575.98px) {
  .products-page .catalog-toolbar { gap: 8px 10px !important; padding-bottom: 10px !important; margin-bottom: 12px !important; }
  .products-page .catalog-toolbar .catalog-sort { flex: 1 1 0; min-width: 0; }
  .products-page .catalog-toolbar .form-select { width: 100% !important; min-width: 0 !important; max-width: none !important; }
  .products-page .catalog-results-count { font-size: 13px !important; }
}

/* ---------- 30.6 Hàng chip danh mục cuộn ngang (mobile) -------------------
   Markup ở products.php (#catalogCatChips). Chạm chip = chạm đúng mục đó trong
   cây #sidebarCategoryNav (script nhỏ cạnh markup), nên lọc tại chỗ như cây. */
.catalog-cat-chips { display: none; }
@media (max-width: 991.98px) {
  .catalog-cat-chips {
    display: flex;
    gap: 8px;
    margin: 0 -16px 12px;
    padding: 0 16px 2px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .catalog-cat-chips::-webkit-scrollbar { display: none; }
  .catalog-cat-chip {
    display: inline-flex;
    flex: none;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--lk-line-strong);
    border-radius: 8px;
    background: #FFFFFF;
    color: var(--lk-ink-2) !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  }
  .catalog-cat-chip:hover { background: var(--lk-sunken); }
  .catalog-cat-chip.active {
    border-color: var(--lk-brand);
    background: var(--lk-brand-soft);
    color: var(--lk-brand-text) !important;
    font-weight: 600;
  }
}

/* ---------- 30.7 Khung chờ tải: cùng dáng thẻ ngang .lk-pc ----------------- */
.products-loading .product-card.skeleton {
  display: grid !important;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 14px;
  min-height: 160px;
  padding: 12px !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 14px !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
  transform: none !important;
}
.products-loading .product-card.skeleton .skeleton-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
}
.products-loading .product-card.skeleton .skeleton-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0 !important;
}
.products-loading .product-card.skeleton .skeleton-title { width: 85%; height: 14px; border-radius: 6px; }
.products-loading .product-card.skeleton .skeleton-title::after {
  content: "";
  display: block;
  width: 60%;
  height: 14px;
  margin-top: 26px;
  border-radius: 6px;
  background: inherit;
}
.products-loading .product-card.skeleton .skeleton-price { width: 40%; height: 18px; margin-top: auto; border-radius: 6px; }
.products-loading .skeleton-image,
.products-loading .skeleton-title,
.products-loading .skeleton-price {
  background: var(--lk-sunken) !important;
  animation: lk-shop-pulse 1.2s ease-in-out infinite !important;
}
@keyframes lk-shop-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .products-loading .skeleton-image,
  .products-loading .skeleton-title,
  .products-loading .skeleton-price { animation: none !important; }
}
@media (max-width: 399.98px) {
  .products-loading .product-card.skeleton { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 10px !important; }
}

/* ---------- 30.8 Không có kết quả / lỗi tải: không vòng tròn trang trí ----- */
.products-page .products-empty-state {
  padding: 36px 20px !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
}
.products-page .products-empty-state .empty-state-icon {
  width: auto !important;
  height: auto !important;
  margin-bottom: 10px !important;
  border-radius: 0 !important;
  background: none !important;
  color: #98A2B3 !important;
  font-size: 32px !important;
  box-shadow: none !important;
}
.products-page .products-error-state .empty-state-icon { color: var(--lk-danger-text) !important; }
.products-page .products-empty-state h2 {
  color: var(--lk-ink-strong) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}
.products-page .products-empty-state .text-secondary { color: var(--lk-ink-2) !important; font-size: 14.5px; }
.products-page .catalog-empty-actions .btn,
.products-page #productsRetryButton {
  min-height: 44px !important;
  padding: 0 18px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.products-page .catalog-empty-heading { color: var(--lk-ink-strong) !important; font-size: 16px !important; font-weight: 600 !important; }
.products-page .catalog-empty-support { color: var(--lk-muted) !important; }
.products-page .catalog-empty-support a { color: var(--lk-brand-text) !important; font-weight: 600 !important; }

/* ---------- 30.9 Phân trang: ô vuông 40px, trang hiện tại xanh đặc ---------- */
.products-page .products-pagination {
  justify-content: center;
  gap: 6px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.products-page .products-pagination .pagination-page,
.products-page .products-pagination .pagination-nav {
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 10px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  color: var(--lk-ink-2) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease !important;
}
.products-page .products-pagination .pagination-page:not(.is-active):hover,
.products-page .products-pagination .pagination-nav:not(.is-disabled):hover {
  border-color: var(--lk-line-strong) !important;
  background: var(--lk-sunken) !important;
  color: var(--lk-ink-strong) !important;
}
.products-page .products-pagination .pagination-page.is-active {
  border-color: var(--lk-brand) !important;
  background: var(--lk-brand) !important;
  color: var(--lk-on-brand, #FFFFFF) !important;
  font-weight: 600 !important;
}
.products-page .products-pagination .pagination-nav.is-disabled { opacity: .45; }
.products-page .products-pagination .pagination-gap { color: var(--lk-muted) !important; padding: 0 2px !important; }

/* Lưới nền (lunakey-clean.css mục 6) ép #productsGrid { display:grid !important } nên
   style.display='none' của products-filter.js (lúc đang tải / không kết quả / lỗi) không
   còn ẩn được lưới cũ. Trả quyền ẩn về cho JS. */
#productsGrid[style*="display: none"],
#productsGrid[style*="display:none"] { display: none !important; }

/* ==========================================================================
   Trang chi tiết sản phẩm (/product/<slug>, /esim/product/<slug>)
   ========================================================================== */

/* ---------- 30.10 Khung: thẻ phẳng, ảnh trên nền trắng --------------------- */
.product-detail-page .product-hero-image-card,
.product-detail-page .product-sticky-order-panel,
.product-detail-page .product-description-section,
.product-detail-page .product-reviews-section {
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
}
/* Nền ảnh: script inline tô gradient theo màu mép ảnh -> nền trắng phẳng (thắng style inline) */
.product-detail-page .product-hero-image-card .product-image-wrapper {
  background: #FFFFFF !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.product-detail-page .product-hero-image-card .product-image-wrapper img,
.product-detail-page .product-hero-image-card .product-image-wrapper:hover img {
  filter: none !important;
  transform: none !important;
  transition: none !important;
}
.product-detail-page .product-badge-instant {
  padding: 3px 8px !important;
  border-radius: 6px !important;
  background: var(--lk-mint-soft) !important;
  color: var(--lk-ok-text) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.product-detail-page .gallery-thumb-item {
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 8px !important;
  transform: none !important;
  box-shadow: none !important;
  transition: border-color .15s ease !important;
}
.product-detail-page .gallery-thumb-item.active { border-color: var(--lk-brand) !important; box-shadow: inset 0 0 0 1px var(--lk-brand) !important; }

/* Cam kết: một kiểu, icon cùng màu */
.product-detail-page .product-trust-badge {
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
  transform: none !important;
  transition: border-color .15s ease !important;
}
.product-detail-page .product-trust-badge:hover { transform: none !important; border-color: var(--lk-line-strong) !important; }
.product-detail-page .product-trust-badge > i,
.product-detail-page .product-trust-badge > i.text-warning,
.product-detail-page .product-trust-badge > i.text-primary,
.product-detail-page .product-trust-badge > i.text-success {
  color: var(--lk-brand-text) !important;
  font-size: 18px !important;
}
.product-detail-page .trust-badge-text strong { color: var(--lk-ink-strong) !important; font-size: 13.5px !important; font-weight: 600 !important; }
.product-detail-page .trust-badge-text span { color: var(--lk-muted) !important; font-size: 12.5px !important; }
@media (max-width: 991.98px) {
  .product-detail-page .lk-trust-strip { border-top: 1px solid var(--lk-line) !important; }
  .product-detail-page .lk-trust-strip .product-trust-badge { border: 0 !important; padding: 0 !important; background: none !important; }
  .product-detail-page .lk-trust-strip .product-trust-badge > i { font-size: 15px !important; }
}

/* ---------- 30.11 Tên sản phẩm + hàng thông tin ---------------------------- */
.product-detail-page h1.product-hero-title {
  color: var(--lk-ink-strong) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -.01em !important;
}
@media (max-width: 575.98px) {
  .product-detail-page h1.product-hero-title { font-size: 21px !important; }
}
.product-detail-page .product-header-actions { gap: 8px; }
.product-detail-page .product-header-actions .product-favorite-btn,
.product-detail-page .product-header-actions .product-affiliate-share-btn,
.product-detail-page .product-header-actions .product-api-doc-btn {
  width: 40px !important;
  height: 40px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  color: var(--lk-ink-2) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: color .15s ease, background-color .15s ease !important;
}
.product-detail-page .product-header-actions .product-favorite-btn:hover,
.product-detail-page .product-header-actions .product-affiliate-share-btn:hover,
.product-detail-page .product-header-actions .product-api-doc-btn:hover { background: var(--lk-sunken) !important; }
.product-detail-page .product-header-actions .product-favorite-btn.active { color: var(--lk-danger-text) !important; border-color: #FECDCA !important; background: var(--lk-danger-bg) !important; }
.product-detail-page .product-header-actions .affiliate-rate-badge-small {
  background: var(--lk-brand) !important;
  box-shadow: none !important;
}

.product-detail-page .pd-meta {
  gap: 6px 8px !important;
  color: var(--lk-muted);
  font-size: 13px;
}
.product-detail-page .pd-meta .product-rating-stars { color: var(--lk-moon) !important; font-size: 13px !important; }
.product-detail-page .pd-meta .text-dark { color: var(--lk-ink-strong) !important; font-weight: 600 !important; font-size: 13px !important; }
.product-detail-page .pd-meta a.text-muted { color: var(--lk-muted) !important; font-size: 13px !important; }
.product-detail-page .pd-meta-cat,
.product-detail-page .pd-meta-sold {
  color: var(--lk-muted);
  font-size: 13px;
  font-weight: 500;
}
.product-detail-page .pd-meta-cat + .pd-meta-sold::before {
  content: "•";
  margin-right: 8px;
  color: var(--lk-muted);
}

/* ---------- 30.11b Hero rộng hết trang + Thông báo quan trọng (2026-10-24) ------ */
/* product.php: ảnh + tên + đánh giá nằm trong .pd-hero phía trên 2 cột (ý tưởng từ trang sản phẩm
   muakey.com); ô .pd-notice đứng trên "Chọn gói" thay cho 3 ô cam kết cũ. */
.product-detail-page .pd-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0 0 24px;
  padding: 20px 24px;
  border: 1px solid var(--lk-line);
  border-radius: 12px;
  background: #FFFFFF;
}
.product-detail-page .pd-hero-media { flex: none; width: 180px; }
.product-detail-page .pd-hero .product-hero-image-card {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
/* Ảnh là logo vuông: ô vuông thay cho khung 16:10 cũ (lunakey-mockup giới hạn max-height theo vh) */
.product-detail-page .pd-hero .product-image-wrapper {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--lk-line) !important;
  border-radius: 16px !important;
  overflow: hidden;
}
/* Ảnh SVG có khung 160px riêng (mục 9): trong ô vuông thì bỏ khung lồng khung */
.product-detail-page .pd-hero #productMainImage[src$=".svg"],
.product-detail-page .pd-hero #productMainImage[src^="data:image/svg"] {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 16% !important;
}
.product-detail-page .pd-hero .product-gallery-thumbnails { justify-content: center; }
.product-detail-page .pd-hero-info {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.product-detail-page .pd-hero-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
.product-detail-page .pd-hero h1.product-hero-title {
  min-width: 0;
  margin: 0;
  font-size: 28px !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere;
}
.product-detail-page .pd-hero .product-header-actions { display: flex; flex: none; }
.product-detail-page .pd-hero .pd-meta { margin: 0 !important; }
@media (max-width: 767.98px) {
  .product-detail-page .pd-hero {
    flex-direction: column;
    gap: 14px;
    padding: 20px 16px;
    text-align: center;
  }
  .product-detail-page .pd-hero-media { width: 150px; }
  .product-detail-page .pd-hero-info { align-items: center; width: 100%; }
  .product-detail-page .pd-hero-head { justify-content: center; }
  .product-detail-page .pd-hero h1.product-hero-title { font-size: 22px !important; }
  /* Nút yêu thích lên góc phải hero, như ảnh tham khảo */
  .product-detail-page .pd-hero .product-header-actions { position: absolute; top: 12px; right: 12px; }
  .product-detail-page .pd-hero .pd-meta { justify-content: center; }
}

.product-detail-page .pd-notice {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid #FEDF89;
  border-radius: 12px;
  background: var(--lk-warn-bg);
  color: var(--lk-ink-2);
  font-size: 13.5px;
  line-height: 1.5;
}
.product-detail-page .pd-notice-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--lk-warn-text);
  font-size: 14px;
  font-weight: 700;
}
.product-detail-page .pd-notice-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.product-detail-page .pd-notice-list li { display: flex; align-items: flex-start; gap: 8px; }
.product-detail-page .pd-notice-list li > i {
  flex: none;
  width: 16px;
  margin-top: 3px;
  color: var(--lk-muted);
  font-size: 12.5px;
  text-align: center;
}
.product-detail-page .pd-notice-list strong { color: var(--lk-ink-strong); font-weight: 700; }
.product-detail-page .pd-notice-list a { color: var(--lk-brand-text); font-weight: 600; }
.product-detail-page .rating-big .rating-out-of {
  margin-left: 2px;
  color: var(--lk-muted);
  font-size: .45em;
  font-weight: 600;
}

/* ---------- 30.12 Chọn gói: thẻ rõ chữ, đang chọn = viền xanh 2px + nền nhạt ---- */
.product-detail-page .product-plans-section > .form-label {
  margin-bottom: 8px !important;
  color: var(--lk-ink-2) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
}
.product-detail-page .product-sticky-order-panel .product-plans-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
.product-detail-page .product-plan-card {
  justify-content: flex-start !important;
  gap: 6px !important;
  min-height: 64px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
  transform: none !important;
  transition: border-color .15s ease, background-color .15s ease !important;
}
.product-detail-page .product-plan-card:hover {
  border-color: #98A2B3 !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
  transform: none !important;
}
.product-detail-page .product-plan-card.active,
.product-detail-page .product-plan-card.active:hover {
  border-color: var(--lk-brand) !important;
  background: var(--lk-brand-soft) !important;
  box-shadow: inset 0 0 0 1px var(--lk-brand) !important;
}
.product-detail-page .product-plan-card .plan-card-content {
  padding-right: 22px;
  line-height: 1.35 !important;
}
.product-detail-page .product-plan-card .plan-card-title {
  display: inline;
  color: var(--lk-ink-strong) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}
.product-detail-page .product-plan-card .plan-card-badges { margin-left: 6px; gap: 4px; }
.product-detail-page .product-plan-card .product-delivery.delivery-order {
  display: inline-flex !important;
  padding: 1px 6px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: var(--lk-sunken) !important;
  color: var(--lk-ink-2) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  vertical-align: 1px;
}
.product-detail-page .product-plan-card .flash-sale-badge-inline {
  padding: 1px 6px !important;
  border-radius: 6px !important;
  background: var(--lk-danger-bg) !important;
  color: var(--lk-danger-text) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.product-detail-page .product-plan-card .plan-card-price { gap: 2px 8px !important; margin-top: auto; }
.product-detail-page .product-plan-card .plan-current-price {
  color: var(--lk-brand-text) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
.product-detail-page .product-plan-card .plan-current-price.flash-price { color: var(--lk-danger-text) !important; }
.product-detail-page .product-plan-card .plan-current-price.free-price { color: var(--lk-ok-text) !important; }
.product-detail-page .product-plan-card .plan-original-price { color: var(--lk-muted) !important; font-size: 12px !important; }
.product-detail-page .product-plan-card .plan-discount-badge,
.product-detail-page .product-plan-card .plan-discount-badge.flash-discount {
  padding: 0 !important;
  background: none !important;
  color: var(--lk-danger-text) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
/* Dấu chọn: chấm tròn 18px góc phải, không nhảy / không quầng */
.product-detail-page .product-plan-card .plan-card-check {
  top: 10px !important;
  right: 10px !important;
  width: 18px !important;
  height: 18px !important;
  border: 0 !important;
  font-size: 10px !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  box-shadow: none !important;
}
.product-detail-page .product-plan-card.is-out-of-stock { opacity: .6 !important; }
.product-detail-page .plan-stock-badge.plan-stock-badge-out {
  margin: 0 6px 2px 0 !important;
  padding: 1px 6px !important;
  border-radius: 6px !important;
  background: var(--lk-danger-bg) !important;
  color: var(--lk-danger-text) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.product-detail-page .plan-oos-toggle {
  min-height: 40px !important;
  margin-top: 8px !important;
  color: var(--lk-brand-text) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* Điện thoại: một cột, tên bên trái - giá bên phải, vòng chọn kiểu radio ở cuối hàng */
@media (max-width: 575.98px) {
  .product-detail-page .product-sticky-order-panel .product-plans-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .product-detail-page .product-plan-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    min-height: 56px !important;
    padding: 10px 44px 10px 14px !important;
  }
  .product-detail-page .product-plan-card .plan-card-image { display: none !important; }
  .product-detail-page .product-plan-card .plan-card-content { padding-right: 0; }
  .product-detail-page .product-plan-card .plan-card-price {
    flex-direction: column;
    align-items: flex-end !important;
    margin-top: 0;
    text-align: right;
  }
  .product-detail-page .product-plan-card .plan-price-extra { justify-content: flex-end; }
  .product-detail-page .product-plan-card .plan-card-check,
  .product-detail-page .product-plan-card.active .plan-card-check {
    display: grid !important;
    place-items: center;
    top: 50% !important;
    right: 14px !important;
    margin-top: -9px;
  }
  .product-detail-page .product-plan-card:not(.active) .plan-card-check {
    border: 1.5px solid var(--lk-line-strong) !important;
    background: #FFFFFF !important;
    color: transparent !important;
  }
}

/* Máy rất hẹp (<400px): giá xuống dưới tên để tên gói không bị bóp còn 4-5 dòng */
@media (max-width: 399.98px) {
  .product-detail-page .product-plan-card { grid-template-columns: minmax(0, 1fr) !important; row-gap: 4px; }
  .product-detail-page .product-plan-card .plan-card-price {
    flex-direction: row !important;
    align-items: baseline !important;
    text-align: left;
  }
  .product-detail-page .product-plan-card .plan-price-extra { justify-content: flex-start; }
}

/* ---------- 30.13 Form mua: số lượng, ô nhập, mã giảm giá, tổng tiền, nút ---- */
.product-detail-page .order-form-group-quantity {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
}
.product-detail-page .order-form-group-quantity > label {
  margin: 0 !important;
  color: var(--lk-ink-strong) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
.product-detail-page .quantity-selector {
  gap: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
  overflow: hidden;
}
.product-detail-page .quantity-selector .qty-btn {
  width: 44px !important;
  height: 44px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #FFFFFF !important;
  color: var(--lk-ink-2) !important;
  box-shadow: none !important;
  transform: none !important;
}
.product-detail-page .quantity-selector .qty-btn:hover:not(:disabled) { background: var(--lk-sunken) !important; color: var(--lk-ink-strong) !important; }
.product-detail-page .quantity-selector .qty-input {
  width: 52px !important;
  height: 44px !important;
  min-height: 44px !important;
  border: 0 !important;
  border-inline: 1px solid var(--lk-line) !important;
  border-radius: 0 !important;
  background: #FFFFFF !important;
  color: var(--lk-ink-strong) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.product-detail-page .order-fields-heading { color: var(--lk-ink-strong) !important; font-size: 14px !important; font-weight: 600 !important; }
.product-detail-page .order-form-group .order-field-label { color: var(--lk-ink-2) !important; font-size: 13px !important; font-weight: 500 !important; }
.product-detail-page .order-input,
.product-detail-page .coupon-input {
  min-height: 44px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  color: var(--lk-ink-strong) !important;
  font-size: 15px !important;
  box-shadow: none !important;
  transition: border-color .15s ease !important;
}
.product-detail-page .order-input:focus,
.product-detail-page .coupon-input:focus {
  border-color: var(--lk-brand) !important;
  box-shadow: var(--ring-focus) !important;
  outline: none !important;
}
.product-detail-page .coupon-toggle {
  display: inline-flex !important;
  align-items: center;
  min-height: 40px !important;
  padding: 0 2px !important;
  color: var(--lk-brand-text) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
.product-detail-page .coupon-input-group { gap: 8px !important; }
.product-detail-page .btn-apply-coupon {
  min-height: 44px !important;
  padding: 0 16px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  color: var(--lk-ink-strong) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.product-detail-page .btn-apply-coupon:hover { background: var(--lk-sunken) !important; }
.product-detail-page .applied-coupon {
  border: 1px solid #ABEFC6 !important;
  border-radius: 10px !important;
  background: var(--lk-mint-soft) !important;
}
.product-detail-page .btn-remove-coupon { min-width: 40px; min-height: 40px; border-radius: 8px !important; }
@media (max-width: 575.98px) {
  .product-detail-page .order-input,
  .product-detail-page .coupon-input { font-size: 16px !important; }
}

.product-detail-page .order-price-summary {
  padding: 12px 14px !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: #FAFBFC !important;
  box-shadow: none !important;
}
.product-detail-page .order-price-summary .price-row { color: var(--lk-ink-2) !important; font-size: 14px !important; }
.product-detail-page .order-price-summary .price-value { color: var(--lk-ink-strong) !important; font-weight: 600 !important; }
.product-detail-page .order-price-summary .discount-label,
.product-detail-page .order-price-summary .discount-label i { color: var(--lk-ink-2) !important; }
.product-detail-page .order-price-summary .price-value.discount,
.product-detail-page .order-price-summary .price-value.coupon-discount { color: var(--lk-ok-text) !important; }
.product-detail-page .order-price-summary .price-row.total-row {
  border-top: 1px solid var(--lk-line) !important;
  color: var(--lk-ink-strong) !important;
  font-weight: 600 !important;
}
.product-detail-page .order-price-summary .price-value.total {
  color: var(--lk-brand-text) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}
.product-detail-page .order-stock-info {
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--lk-mint-soft) !important;
  color: var(--lk-ok-text) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}
.product-detail-page .order-stock-info strong { color: inherit !important; font-weight: 600 !important; }
.product-detail-page .order-stock-info.out-of-stock {
  background: var(--lk-danger-bg) !important;
  color: var(--lk-danger-text) !important;
}

/* Nút Mua ngay: xanh đặc, không gradient / quầng / nhấc lên */
.product-detail-page .btn-order,
.product-detail-page .btn-order:hover,
.product-detail-page .btn-order:focus,
.product-detail-page .btn-order:active {
  height: auto !important;
  min-height: 48px !important;
  padding: 8px 16px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--lk-brand) !important;
  color: var(--lk-on-brand, #FFFFFF) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  transition: background-color .15s ease !important;
}
.product-detail-page .btn-order:hover { background: var(--lk-brand-hover, var(--lk-brand-text)) !important; }
.product-detail-page .btn-order:disabled,
.product-detail-page .btn-order.disabled {
  background: #D0D5DD !important;
  color: #FFFFFF !important;
  cursor: not-allowed;
}
.product-detail-page .btn-add-cart,
.product-detail-page .btn-add-cart:hover {
  width: 48px !important;
  height: 48px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  color: var(--lk-ink-2) !important;
  box-shadow: none !important;
  transform: none !important;
}
.product-detail-page .btn-add-cart:hover:not(:disabled) { background: var(--lk-sunken) !important; color: var(--lk-ink-strong) !important; }
.product-detail-page .btn-add-cart:disabled { opacity: .5; }
.product-detail-page .lk-pay-hint {
  border: 1px solid var(--lk-brand-soft-2) !important;
  border-radius: 10px !important;
  background: var(--lk-brand-soft) !important;
  color: var(--lk-ink) !important;
  font-size: 13px !important;
}
.product-detail-page .lk-pay-hint a { color: var(--lk-brand-text) !important; font-weight: 600 !important; }
.product-detail-page .lk-pending-invoice { border-radius: 10px !important; }

/* ---------- 30.14 Flash Sale: một dòng chữ đỏ thay cho băng gradient ------- */
.product-detail-page .flash-sale-countdown {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--lk-danger-text) !important;
  animation: none !important;
}
.product-detail-page .flash-sale-countdown-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--lk-danger-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: none !important;
}
.product-detail-page .flash-sale-countdown-label i { animation: none !important; }
.product-detail-page .flash-sale-countdown-timer { display: inline-flex !important; align-items: baseline; gap: 4px !important; }
.product-detail-page .flash-sale-countdown .countdown-block {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: baseline;
  gap: 2px;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.product-detail-page .flash-sale-countdown .countdown-value {
  color: var(--lk-danger-text) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
}
.product-detail-page .flash-sale-countdown .countdown-label {
  color: var(--lk-muted) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  text-transform: none !important;
}
.product-detail-page .flash-sale-countdown .countdown-separator { color: var(--lk-muted) !important; animation: none !important; }

/* ---------- 30.15 Mô tả sản phẩm + chi tiết gói --------------------------- */
.product-detail-page .desc-section-header {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
}
.product-detail-page .desc-section-header:hover { background: none !important; }
.product-detail-page .desc-icon-wrapper,
.product-detail-page .desc-section-header .desc-label { display: none !important; }
.product-detail-page .desc-section-header .desc-title {
  margin: 0 !important;
  color: var(--lk-ink-strong) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}
.product-detail-page .desc-toggle-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 4px !important;
  border: 0 !important;
  background: none !important;
  color: var(--lk-brand-text) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
.product-detail-page .desc-toggle-btn .collapse-icon {
  width: auto !important;
  height: auto !important;
  background: none !important;
  color: inherit !important;
  transition: transform .15s ease !important;
}
.product-detail-page .product-description-content .description-text { color: var(--lk-ink) !important; font-size: 15px; line-height: 1.65; }

.product-detail-page .selected-plan-description {
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
}
.product-detail-page .plan-desc-header {
  border: 0 !important;
  border-radius: 12px !important;
  background: none !important;
  box-shadow: none !important;
}
.product-detail-page .plan-desc-icon-wrapper { display: none !important; }
.product-detail-page .plan-desc-label {
  color: var(--lk-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
}
.product-detail-page .selected-plan-name { color: var(--lk-ink-strong) !important; font-size: 14px !important; font-weight: 600 !important; }
.product-detail-page .plan-desc-toggle-btn {
  width: 36px !important;
  height: 36px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--lk-sunken) !important;
  color: var(--lk-ink-2) !important;
  box-shadow: none !important;
}
.product-detail-page .plan-desc-toggle-btn .collapse-icon { transition: transform .15s ease !important; }

/* Dưới 992px JS chuyển "Mô tả sản phẩm" vào khung mua (sau "Chi tiết gói"): bỏ khung lồng khung,
   chỉ còn đường kẻ ngăn, chữ mô tả dùng trọn bề ngang (trước chỉ còn ~207px ở 375px). */
@media (max-width: 991.98px) {
  .product-detail-page .product-sticky-order-panel .product-description-section,
  .product-detail-page .product-sticky-order-panel .selected-plan-description {
    margin: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--lk-line) !important;
    border-radius: 0 !important;
    background: none !important;
  }
  .product-detail-page .product-sticky-order-panel .product-description-section { padding: 14px 0 0 !important; }
  .product-detail-page .product-sticky-order-panel .desc-content-wrapper { padding: 10px 0 0 !important; }
  .product-detail-page .product-sticky-order-panel .plan-desc-header { padding: 14px 0 8px !important; }
  .product-detail-page .product-sticky-order-panel .plan-desc-inner { padding: 0 !important; }
}

/* ---------- 30.16 Đánh giá: thanh đặc, sao vàng ---------------------------- */
.product-detail-page .product-reviews-section .section-header .header-left > i { display: none !important; }
.product-detail-page .product-reviews-section .section-header h3 {
  color: var(--lk-ink-strong) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}
.product-detail-page .review-count-badge {
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--lk-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.product-detail-page .reviews-summary .rating-big {
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--lk-sunken) !important;
  box-shadow: none !important;
}
.product-detail-page .rating-big .rating-number {
  color: var(--lk-ink-strong) !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
.product-detail-page .rating-big .rating-label { color: var(--lk-muted) !important; font-size: 13px !important; }
.product-detail-page .rating-stars-big,
.product-detail-page .rating-bar-label i,
.product-detail-page .review-rating-stars { color: var(--lk-moon) !important; }
.product-detail-page .rating-bar-label,
.product-detail-page .rating-bar-count { color: var(--lk-ink-2) !important; font-size: 13px !important; }
.product-detail-page .rating-bar-track {
  height: 6px !important;
  border-radius: 99px !important;
  background: var(--lk-line) !important;
}
.product-detail-page .rating-bar-fill {
  border-radius: 99px !important;
  background: var(--lk-moon) !important;
  box-shadow: none !important;
  transition: none !important;
}
.product-detail-page .review-item {
  border: 0 !important;
  border-top: 1px solid var(--lk-line) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.product-detail-page .review-avatar {
  background: var(--lk-sunken) !important;
  color: var(--lk-muted) !important;
  box-shadow: none !important;
}
.product-detail-page .review-username { color: var(--lk-ink-strong) !important; font-weight: 600 !important; }
.product-detail-page .review-date { color: var(--lk-muted) !important; font-size: 12.5px !important; }
.product-detail-page .verified-badge {
  border: 0 !important;
  border-radius: 6px !important;
  background: var(--lk-mint-soft) !important;
  color: var(--lk-ok-text) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
}
.product-detail-page .review-plan {
  border: 0 !important;
  border-radius: 6px !important;
  background: var(--lk-sunken) !important;
  color: var(--lk-ink-2) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
}
.product-detail-page .review-plan i { color: var(--lk-muted) !important; }
.product-detail-page .review-content { color: var(--lk-ink) !important; font-size: 14.5px !important; }
.product-detail-page .review-admin-reply {
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--lk-sunken) !important;
}
.product-detail-page .admin-reply-header i,
.product-detail-page .admin-reply-label { color: var(--lk-ink-2) !important; }
.product-detail-page .btn-review-helpful {
  min-height: 36px !important;
  padding: 0 12px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  color: var(--lk-ink-2) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transform: none !important;
}
.product-detail-page .btn-review-helpful.voted { border-color: var(--lk-brand-soft-2) !important; background: var(--lk-brand-soft) !important; color: var(--lk-brand-text) !important; }
.product-detail-page .btn-write-review-inline,
.product-detail-page .btn-load-more-reviews {
  min-height: 40px !important;
  padding: 0 14px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  color: var(--lk-ink-strong) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transform: none !important;
}
.product-detail-page .btn-write-review-inline:hover,
.product-detail-page .btn-load-more-reviews:hover { background: var(--lk-sunken) !important; }
.product-detail-page .write-review-login-prompt {
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--lk-sunken) !important;
  color: var(--lk-ink-2) !important;
}
.product-detail-page .write-review-login-prompt a { color: var(--lk-brand-text) !important; font-weight: 600 !important; }
.product-detail-page .no-reviews-message .no-reviews-icon {
  width: auto !important;
  height: auto !important;
  background: none !important;
  color: #98A2B3 !important;
  font-size: 28px !important;
}
.product-detail-page .review-modal-content { border-radius: 14px !important; box-shadow: var(--shadow-lg) !important; }
.product-detail-page .btn-submit-review {
  min-height: 44px !important;
  border-radius: 10px !important;
  background: var(--lk-brand) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ---------- 30.17 "Có thể bạn cũng thích" --------------------------------- */
.product-detail-page .related-products-box { border-top: 1px solid var(--lk-line) !important; }
.product-detail-page .related-products-box h6 {
  color: var(--lk-ink-strong) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}
.product-detail-page .related-products-box h6 > i { display: none !important; }
.product-detail-page .related-product-mini-item {
  border: 1px solid var(--lk-line) !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
  transform: none !important;
  transition: border-color .15s ease !important;
}
.product-detail-page .related-product-mini-item:hover { border-color: var(--lk-line-strong) !important; background: #FFFFFF !important; }
.product-detail-page .related-product-mini-item .text-dark {
  color: var(--lk-ink-strong) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
.product-detail-page .related-product-mini-item .text-muted { color: var(--lk-muted) !important; font-size: 12px !important; }
.product-detail-page .related-product-mini-item .text-end > .text-primary {
  color: var(--lk-brand-text) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
.product-detail-page .related-product-mini-item .text-end > span.text-primary {
  color: var(--lk-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* ---------- 30.18 Thanh mua nhanh #lkBuybar --------------------------------- */
.product-detail-page .lk-buybar-plan { color: var(--lk-muted) !important; font-size: 12.5px !important; }
.product-detail-page .lk-buybar-total { color: var(--lk-brand-text) !important; font-size: 17px !important; font-weight: 700 !important; }
.product-detail-page .lk-buybar-btn {
  min-height: 44px !important;
  border-radius: 10px !important;
  background: var(--lk-brand) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transform: none !important;
}
.product-detail-page .lk-buybar-btn:hover { background: var(--lk-brand-hover, var(--lk-brand-text)) !important; }
.product-detail-page .lk-buybar-btn:disabled { background: #D0D5DD !important; opacity: 1 !important; }
@media (max-width: 991.98px) {
  .product-detail-page .lk-buybar.is-on {
    border-top: 1px solid var(--lk-line) !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
  }
}
@media (min-width: 992px) {
  .product-detail-page .lk-buybar.is-on {
    border: 1px solid var(--lk-line) !important;
    background: #FFFFFF !important;
    box-shadow: var(--shadow-md) !important;
  }
}

/* Nút mua trên máy hẹp: "Mua ngay - Thanh toán QR" vừa 1 dòng cạnh nút giỏ 48px */
@media (max-width: 399.98px) {
  .product-detail-page .btn-order { gap: 6px !important; padding: 8px 10px !important; font-size: 14px !important; }
}

/* ==========================================================================
   Giỏ hàng (/cart) — phần lớn do cart-direct-checkout.js dựng lại bằng innerHTML
   ========================================================================== */

/* ---------- 30.19 Bước thanh toán + đầu trang ------------------------------ */
.cart-page .cart-stepper {
  gap: 8px !important;
  max-width: 560px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.cart-page .cart-stepper-item {
  gap: 8px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--lk-muted) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: none !important;
}
.cart-page .cart-stepper .stepper-icon {
  width: 28px !important;
  height: 28px !important;
  border: 1px solid var(--lk-line-strong) !important;
  background: #FFFFFF !important;
  color: var(--lk-muted) !important;
  font-size: 12px !important;
  box-shadow: none !important;
}
.cart-page .cart-stepper-item.active { color: var(--lk-ink-strong) !important; font-weight: 600 !important; background: none !important; }
.cart-page .cart-stepper-item.active .stepper-icon {
  border-color: var(--lk-brand) !important;
  background: var(--lk-brand) !important;
  color: var(--lk-on-brand, #FFFFFF) !important;
}
.cart-page .cart-stepper-item.completed { color: var(--lk-ink-2) !important; }
.cart-page .cart-stepper-item.completed .stepper-icon {
  border-color: var(--lk-brand-soft-2) !important;
  background: var(--lk-brand-soft) !important;
  color: var(--lk-brand-text) !important;
}
.cart-page .cart-stepper .stepper-line {
  min-width: 16px !important;
  height: 1px !important;
  background: var(--lk-line-strong) !important;
}
.cart-page .cart-stepper .stepper-line.active { background: var(--lk-brand) !important; }
/* Điện thoại: vẫn giữ chữ của từng bước (trước chỉ còn 3 icon 28px) */
@media (max-width: 575.98px) {
  .cart-page .cart-stepper { gap: 6px !important; }
  .cart-page .cart-stepper .stepper-label { display: inline !important; font-size: 13px; white-space: nowrap; }
  .cart-page .cart-stepper-item { gap: 6px !important; }
  .cart-page .cart-stepper .stepper-icon { width: 24px !important; height: 24px !important; font-size: 11px !important; }
  .cart-page .cart-stepper .stepper-line { min-width: 10px !important; }
}

.cart-page .cart-page-header {
  padding: 16px 18px !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  background-image: none !important;
  box-shadow: none !important;
}
.cart-page .cart-page-header-bg { display: none !important; }
.cart-page .cart-page-header-left { gap: 12px !important; }
.cart-page .cart-page-header-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  background: var(--lk-sunken) !important;
  color: var(--lk-brand-text) !important;
  font-size: 18px !important;
  box-shadow: none !important;
}
/* Số trong chấm đỏ trùng với dòng "N sản phẩm" ngay bên cạnh */
.cart-page .cart-icon-badge { display: none !important; }
.cart-page .cart-page-header-title {
  color: var(--lk-ink-strong) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
}
.cart-page .cart-page-header-count { color: var(--lk-muted) !important; font-size: 14px !important; }
.cart-page .cart-page-header-count span { color: var(--lk-ink-strong) !important; font-weight: 600 !important; }
.cart-page .cart-header-btn {
  min-height: 40px;
  padding: 0 14px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  color: var(--lk-ink-2) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transition: background-color .15s ease !important;
}
.cart-page .cart-header-btn:hover { background: var(--lk-sunken) !important; color: var(--lk-ink-strong) !important; }
@media (max-width: 575.98px) {
  .cart-page .cart-page-header { padding: 14px !important; }
  .cart-page .cart-page-header-title { font-size: 20px !important; }
  .cart-page .cart-page-header-right,
  .cart-page .cart-header-btn { width: 100%; justify-content: center; }
}

/* ---------- 30.20 Giỏ trống / đang tải: không vòng tròn, không bay lượn ----- */
.cart-page .cart-loading-spinner { color: var(--lk-brand) !important; font-size: 26px !important; }
.cart-page .cart-empty {
  padding: 40px 20px !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
}
.cart-page .cart-empty-circles,
.cart-page .cart-empty-float-items { display: none !important; }
.cart-page .cart-empty-visual { height: auto !important; margin-bottom: 12px !important; }
.cart-page .cart-empty-icon {
  position: static !important;
  color: #98A2B3 !important;
  font-size: 36px !important;
  animation: none !important;
}
.cart-page .cart-empty-content h3 { color: var(--lk-ink-strong) !important; font-size: 18px !important; font-weight: 700 !important; }
.cart-page .cart-empty-content p { color: var(--lk-ink-2) !important; font-size: 14.5px !important; }

/* Nút chung của giỏ: chính = xanh đặc, phụ = viền */
.cart-page .btn-browse-products,
.cart-page .btn-success-primary,
.cart-page .btn-login,
.cart-page .btn-pay-balance,
.cart-page .btn-pay-direct,
.cart-page .btn-confirm-checkout {
  min-height: 48px;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--lk-brand) !important;
  color: var(--lk-on-brand, #FFFFFF) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  transition: background-color .15s ease !important;
}
.cart-page .btn-browse-products:hover,
.cart-page .btn-success-primary:hover,
.cart-page .btn-login:hover,
.cart-page .btn-pay-balance:hover:not(:disabled),
.cart-page .btn-pay-direct:hover:not(:disabled),
.cart-page .btn-confirm-checkout:hover:not(:disabled) {
  background: var(--lk-brand-hover, var(--lk-brand-text)) !important;
  transform: none !important;
  filter: none !important;
}
.cart-page .btn-pay-balance:disabled,
.cart-page .btn-confirm-checkout:disabled { background: #D0D5DD !important; opacity: 1 !important; }
.cart-page .btn-browse-products,
.cart-page .btn-success-primary,
.cart-page .btn-login,
.cart-page .btn-view-history,
.cart-page .btn-success-secondary { min-height: 44px; padding: 0 18px !important; font-size: 14.5px !important; }
.cart-page .btn-view-history,
.cart-page .btn-success-secondary,
.cart-page .btn-go-back,
.cart-page .btn-view-orders,
.cart-page .btn-refresh-prices,
.cart-page .btn-clear-cart {
  min-height: 44px;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  color: var(--lk-ink-2) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color .15s ease !important;
}
.cart-page .btn-view-history:hover,
.cart-page .btn-success-secondary:hover,
.cart-page .btn-go-back:hover,
.cart-page .btn-view-orders:hover,
.cart-page .btn-refresh-prices:hover { background: var(--lk-sunken) !important; color: var(--lk-ink-strong) !important; }
.cart-page .btn-clear-cart { color: var(--lk-danger-text) !important; }
.cart-page .btn-clear-cart:hover { background: var(--lk-danger-bg) !important; border-color: #FECDCA !important; color: var(--lk-danger-text) !important; }

/* ---------- 30.21 Danh sách sản phẩm trong giỏ ------------------------------ */
.cart-page .cart-items-wrapper,
.cart-page .cart-summary,
.cart-page .cart-coupon-card,
.cart-page .cart-payment-card,
.cart-page .cart-actions-card,
.cart-page .confirm-section-card,
.cart-page .cart-success {
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
}
.cart-page .cart-items-header,
.cart-page .cart-summary-header,
.cart-page .confirm-section-header {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--lk-line) !important;
  background: #FFFFFF !important;
  color: var(--lk-ink-strong) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}
.cart-page .cart-items-header i,
.cart-page .cart-summary-header i,
.cart-page .confirm-section-header i { color: var(--lk-muted) !important; }
.cart-page .confirm-section-header h3 { font-size: 15px !important; font-weight: 600 !important; }
.cart-page .cart-item {
  grid-template-columns: 72px minmax(0, 1fr) 40px !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--lk-line) !important;
}
.cart-page .cart-item:last-child { border-bottom: 0 !important; }
.cart-page .cart-item-image {
  width: 72px !important;
  height: 72px !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 10px !important;
  background: var(--lk-sunken) !important;
}
.cart-page .cart-item-image img { object-fit: contain !important; }
.cart-page .cart-item-image-overlay { background: rgba(16, 24, 40, .5) !important; font-size: 22px !important; }
.cart-page .cart-item-name { color: var(--lk-ink-strong) !important; font-size: 15px !important; font-weight: 600 !important; }
.cart-page .cart-item-name a { color: inherit !important; }
.cart-page .cart-item-name a:hover { color: var(--lk-brand-text) !important; }
.cart-page .cart-item-plan { color: var(--lk-muted) !important; font-size: 13px !important; }
.cart-page .cart-item-plan i { color: var(--lk-muted) !important; }
.cart-page .cart-item-discount-badge {
  padding: 2px 6px !important;
  border-radius: 6px !important;
  background: var(--lk-sunken) !important;
  color: var(--lk-ink-2) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
}
.cart-page .cart-item-fields {
  border-radius: 8px !important;
  background: var(--lk-sunken) !important;
  font-size: 12.5px !important;
}
.cart-page .cart-item-fields-title { color: var(--lk-ink-2) !important; font-weight: 600 !important; }
.cart-page .cart-item-field { color: var(--lk-ink-2) !important; }
.cart-page .cart-item-field strong { color: var(--lk-ink-strong) !important; font-weight: 500 !important; }
.cart-page .cart-item-field-value { font-family: var(--font-sans) !important; }
.cart-page .cart-item-unavailable,
.cart-page .cart-item-price-changed {
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
.cart-page .cart-item-unavailable { background: var(--lk-danger-bg) !important; color: var(--lk-danger-text) !important; }
.cart-page .cart-item-price-changed.price-increased { background: var(--lk-danger-bg) !important; color: var(--lk-danger-text) !important; }
.cart-page .cart-item-price-changed.price-decreased { background: var(--lk-mint-soft) !important; color: var(--lk-ok-text) !important; }
.cart-page .cart-item-final-price {
  color: var(--lk-brand-text) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}
.cart-page .cart-item-final-price.cart-item-price-na { color: var(--lk-muted) !important; }
.cart-page .cart-item-original-price { color: var(--lk-muted) !important; font-size: 12px !important; }

/* Số lượng: nút 40px, ô 16px (iOS không phóng to) */
.cart-page .cart-item-qty {
  padding: 0 !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  overflow: hidden;
}
.cart-page .cart-item-qty button {
  width: 40px !important;
  height: 40px !important;
  border-radius: 0 !important;
  background: #FFFFFF !important;
  color: var(--lk-ink-2) !important;
  transition: background-color .15s ease !important;
}
.cart-page .cart-item-qty button:hover { background: var(--lk-sunken) !important; color: var(--lk-ink-strong) !important; }
.cart-page .cart-qty-input {
  width: 48px !important;
  height: 40px !important;
  border-inline: 1px solid var(--lk-line) !important;
  color: var(--lk-ink-strong) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}
.cart-page .cart-item-remove {
  width: 40px !important;
  height: 40px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--lk-muted) !important;
  transition: background-color .15s ease, color .15s ease !important;
}
.cart-page .cart-item-remove:hover { background: var(--lk-danger-bg) !important; color: var(--lk-danger-text) !important; }
@media (max-width: 575.98px) {
  .cart-page .cart-item {
    grid-template-columns: 64px minmax(0, 1fr) 40px !important;
    gap: 12px !important;
    padding: 14px !important;
  }
  .cart-page .cart-item-image { width: 64px !important; height: 64px !important; }
  /* Nút xoá ở góc phải hàng đầu, không chiếm một hàng riêng */
  .cart-page .cart-item-remove { grid-column: 3 !important; grid-row: 1 !important; margin: -8px -8px 0 0; }
  .cart-page .cart-item-info { grid-column: 2 / 4; grid-row: 1; padding-right: 36px; }
  .cart-page .cart-item-bottom { margin-right: -36px; }
}

/* ---------- 30.22 Tóm tắt, mã giảm giá, thanh toán ------------------------ */
.cart-page .cart-summary-body { padding: 12px 16px 14px !important; }
.cart-page .cart-summary-row { color: var(--lk-ink-2) !important; font-size: 14px !important; }
.cart-page .cart-summary-label,
.cart-page .cart-summary-label i,
.cart-page .cart-summary-row-user-discount .cart-summary-label i,
.cart-page .cart-summary-row-flash .cart-summary-label i,
.cart-page .cart-summary-row-sale .cart-summary-label i { color: var(--lk-ink-2) !important; }
.cart-page .cart-summary-value { color: var(--lk-ink-strong) !important; font-weight: 600 !important; }
.cart-page .cart-summary-value.discount { color: var(--lk-ok-text) !important; }
.cart-page .cart-summary-total { border-top: 1px solid var(--lk-line) !important; }
.cart-page .cart-summary-total .cart-summary-label { color: var(--lk-ink-strong) !important; font-size: 15px !important; font-weight: 600 !important; }
.cart-page .cart-summary-total .cart-summary-value { color: var(--lk-brand-text) !important; font-size: 20px !important; font-weight: 700 !important; }

.cart-page .cart-coupon-header {
  min-height: 48px;
  padding: 0 16px !important;
  background: #FFFFFF !important;
  color: var(--lk-ink-strong) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
}
.cart-page .cart-coupon-header i { color: var(--lk-muted) !important; }
.cart-page .cart-coupon-form { padding: 0 16px 16px !important; }
.cart-page .cart-coupon-input { gap: 8px !important; }
.cart-page .cart-coupon-input input {
  min-height: 44px;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  color: var(--lk-ink-strong) !important;
  font-size: 15px !important;
  box-shadow: none !important;
}
.cart-page .cart-coupon-input input:focus { border-color: var(--lk-brand) !important; box-shadow: var(--ring-focus) !important; outline: none; }
.cart-page .cart-coupon-input .btn-apply-coupon {
  min-height: 44px;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  color: var(--lk-ink-strong) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.cart-page .cart-coupon-input .btn-apply-coupon:hover { background: var(--lk-sunken) !important; }
.cart-page .cart-coupon-applied { border-radius: 10px !important; background: var(--lk-mint-soft) !important; }
.cart-page .coupon-info .coupon-code { color: var(--lk-ok-text) !important; font-family: var(--font-sans) !important; font-weight: 600 !important; }
.cart-page .btn-remove-coupon { width: 40px !important; height: 40px !important; border-radius: 10px !important; color: var(--lk-danger-text) !important; }
.cart-page .cart-coupon-message { border-radius: 8px !important; font-size: 13px !important; font-weight: 500 !important; }
.cart-page .cart-coupon-message.success { background: var(--lk-mint-soft) !important; color: var(--lk-ok-text) !important; }
.cart-page .cart-coupon-message.error { background: var(--lk-danger-bg) !important; color: var(--lk-danger-text) !important; }
@media (max-width: 575.98px) {
  .cart-page .cart-coupon-input input { font-size: 16px !important; }
}

.cart-page .cart-payment-card,
.cart-page .cart-actions-card { padding: 16px !important; }
.cart-page .btn-pay-balance,
.cart-page .btn-pay-direct { padding: 10px 16px !important; font-size: 15px !important; }
.cart-page .btn-pay-direct span { font-size: 12px !important; font-weight: 500 !important; opacity: .9 !important; }
.cart-page .cart-topup-link { color: var(--lk-ink-2) !important; font-size: 13px !important; }
.cart-page .cart-topup-link a { color: var(--lk-brand-text) !important; font-weight: 600 !important; }
.cart-page .cart-unavailable-warning {
  border: 1px solid #FEDF89;
  border-radius: 10px !important;
  background: var(--lk-warn-bg) !important;
  color: var(--lk-warn-text) !important;
  font-size: 13.5px !important;
}
.cart-page .cart-login-icon {
  width: auto !important;
  height: auto !important;
  background: none !important;
  color: #98A2B3 !important;
}

/* ---------- 30.23 Xác nhận + hoàn tất ------------------------------------ */
.cart-page .confirm-item-count,
.cart-page .confirm-item-qty {
  border-radius: 6px !important;
  background: var(--lk-sunken) !important;
  color: var(--lk-ink-2) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
.cart-page .confirm-item-image { border: 1px solid var(--lk-line); border-radius: 10px !important; }
.cart-page .confirm-item-image img { object-fit: contain !important; }
.cart-page .confirm-item-name { color: var(--lk-ink-strong) !important; font-size: 14.5px !important; font-weight: 600 !important; }
.cart-page .confirm-item-plan { color: var(--lk-muted) !important; font-size: 13px !important; }
.cart-page .confirm-item-price { color: var(--lk-brand-text) !important; font-weight: 700 !important; }
.cart-page .payment-method-item {
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
}
.cart-page .payment-method-item.active {
  border-color: var(--lk-brand) !important;
  background: var(--lk-brand-soft) !important;
  box-shadow: inset 0 0 0 1px var(--lk-brand) !important;
}
.cart-page .payment-method-icon {
  border-radius: 10px !important;
  background: #FFFFFF !important;
  background-image: none !important;
  color: var(--lk-brand-text) !important;
  box-shadow: inset 0 0 0 1px var(--lk-line) !important;
}
.cart-page .payment-method-name { color: var(--lk-ink-strong) !important; font-weight: 600 !important; }
.cart-page .payment-method-balance { color: var(--lk-ink-2) !important; font-weight: 600 !important; }
.cart-page .payment-method-check { color: var(--lk-brand) !important; }
.cart-page .confirm-summary-row { color: var(--lk-ink-2); font-size: 14px !important; }
.cart-page .confirm-summary-row.discount { color: var(--lk-ok-text) !important; }
.cart-page .confirm-summary-total { border-top: 1px solid var(--lk-line) !important; font-size: 17px !important; font-weight: 700 !important; }
.cart-page .confirm-summary-total > span:last-child { color: var(--lk-brand-text) !important; }
.cart-page .btn-go-back,
.cart-page .btn-confirm-checkout { min-height: 48px; font-size: 15px !important; }

.cart-page .cart-success { padding: 40px 20px !important; }
.cart-page .success-circles,
.cart-page .success-confetti { display: none !important; }
.cart-page .cart-success-visual { width: auto !important; height: auto !important; margin-bottom: 14px !important; }
.cart-page .cart-success-visual .success-icon {
  position: static !important;
  width: 56px !important;
  height: 56px !important;
  margin: 0 auto !important;
  background: var(--lk-mint-soft) !important;
  color: var(--lk-ok-text) !important;
  font-size: 24px !important;
  box-shadow: none !important;
  animation: none !important;
}
.cart-page .success-title { color: var(--lk-ink-strong) !important; font-size: 22px !important; font-weight: 700 !important; }
.cart-page .success-message { color: var(--lk-ink-2) !important; font-size: 15px !important; }

/* ==========================================================================
   Yêu thích (/client/favorites) + Đơn hàng (/product-orders, /product-order/<mã>)
   ========================================================================== */

/* ---------- 30.24 Yêu thích ------------------------------------------------ */
.favorites-page .favorites-page-header {
  padding: 16px 18px !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
}
.favorites-page .favorites-page-header-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  background: var(--lk-sunken) !important;
  color: var(--lk-brand-text) !important;
  font-size: 18px !important;
  box-shadow: none !important;
}
.favorites-page .favorites-page-header-title { color: var(--lk-ink-strong) !important; font-size: 22px !important; font-weight: 700 !important; }
.favorites-page .favorites-page-header-count { color: var(--lk-muted) !important; font-size: 14px !important; }
.favorites-page .favorites-page-header-count span { color: var(--lk-ink-strong) !important; font-weight: 600 !important; }
.favorites-page .btn-add-new {
  min-height: 40px;
  padding: 0 14px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  color: var(--lk-ink-2) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  filter: none !important;
}
.favorites-page .btn-add-new:hover { background: var(--lk-sunken) !important; color: var(--lk-ink-strong) !important; }

.favorites-page .favorites-filters { gap: 8px !important; }
.favorites-page .favorites-filter-btn {
  min-height: 40px;
  padding: 0 14px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  color: var(--lk-ink-2) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease !important;
}
.favorites-page .favorites-filter-btn:hover { background: var(--lk-sunken) !important; }
.favorites-page .favorites-filter-btn i { color: var(--lk-muted) !important; }
.favorites-page .favorites-filter-btn.active {
  border-color: var(--lk-brand) !important;
  background: var(--lk-brand-soft) !important;
  color: var(--lk-brand-text) !important;
  font-weight: 600 !important;
}
.favorites-page .favorites-filter-btn.active i { color: var(--lk-brand-text) !important; }
.favorites-page .favorites-filter-btn .count,
.favorites-page .favorites-filter-btn.active .count {
  padding: 0 !important;
  background: none !important;
  color: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  opacity: .8;
}

.favorites-page .favorite-item {
  gap: 14px !important;
  padding: 12px !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
  transform: none !important;
  transition: border-color .15s ease, opacity .15s ease !important;
}
.favorites-page .favorite-item:hover { border-color: var(--lk-line-strong) !important; box-shadow: none !important; transform: none !important; }
.favorites-page .favorite-item.is-removing { opacity: 0 !important; transform: none !important; }
.favorites-page .favorite-item-image {
  border: 1px solid var(--lk-line) !important;
  border-radius: 10px !important;
  background: var(--lk-sunken) !important;
}
.favorites-page .favorite-item-image img { object-fit: contain !important; }
.favorites-page .favorite-item-sale {
  padding: 1px 6px !important;
  border-radius: 6px !important;
  background: var(--lk-danger-bg) !important;
  color: var(--lk-danger-text) !important;
  box-shadow: 0 0 0 1px #FECDCA;
  font-size: 11px !important;
  font-weight: 600 !important;
}
.favorites-page .favorite-item-badge {
  padding: 2px 6px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
.favorites-page .favorite-item-badge.instant { background: var(--lk-mint-soft) !important; color: var(--lk-ok-text) !important; }
.favorites-page .favorite-item-badge.order { background: var(--lk-sunken) !important; color: var(--lk-ink-2) !important; }
.favorites-page .favorite-item-date,
.favorites-page .favorite-item-meta { color: var(--lk-muted) !important; font-size: 12.5px !important; }
.favorites-page .favorite-item-title { font-size: 15px !important; font-weight: 600 !important; }
.favorites-page .favorite-item-title a { color: var(--lk-ink-strong) !important; }
.favorites-page .favorite-item-title a:hover { color: var(--lk-brand-text) !important; }
.favorites-page .favorite-item-price-current { color: var(--lk-brand-text) !important; font-size: 16px !important; font-weight: 700 !important; }
.favorites-page .favorite-item-price-original { color: var(--lk-muted) !important; font-size: 12px !important; }
.favorites-page .favorite-item-actions { gap: 8px !important; }
.favorites-page .favorite-item-btn-view {
  min-height: 40px;
  padding: 0 14px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  color: var(--lk-brand-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  filter: none !important;
}
.favorites-page .favorite-item-btn-view:hover { background: var(--lk-brand-soft) !important; border-color: var(--lk-brand-soft-2) !important; }
.favorites-page .favorite-item-btn-remove {
  width: 40px !important;
  height: 40px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  color: var(--lk-muted) !important;
  box-shadow: none !important;
  transition: background-color .15s ease, color .15s ease !important;
}
.favorites-page .favorite-item-btn-remove:hover { background: var(--lk-danger-bg) !important; border-color: #FECDCA !important; color: var(--lk-danger-text) !important; }
@media (max-width: 575.98px) {
  .favorites-page .favorites-page-header { padding: 14px !important; }
  .favorites-page .favorites-page-header-title { font-size: 20px !important; }
  .favorites-page .favorite-item { grid-template-columns: 72px minmax(0, 1fr) !important; gap: 8px 12px !important; }
  .favorites-page .favorite-item-image { width: 72px !important; height: 72px !important; }
  .favorites-page .favorite-item-actions { justify-content: flex-end; }
  .favorites-page .favorites-page-header-actions { flex: 1 1 100%; }
  .favorites-page .btn-add-new { width: 100%; justify-content: center; }
  /* 3 nút lọc một hàng, cuộn ngang trong khung nếu chật */
  .favorites-page .favorites-filters {
    flex-wrap: nowrap !important;
    margin-inline: -4px;
    padding-inline: 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .favorites-page .favorites-filter-btn { flex: none; }
  .favorites-page .favorites-filter-btn > i { display: none !important; }
}
.favorites-page .favorites-empty {
  padding: 40px 20px !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
}
.favorites-page .favorites-empty-icon {
  width: auto !important;
  height: auto !important;
  margin-bottom: 10px !important;
  background: none !important;
  color: #98A2B3 !important;
  font-size: 32px !important;
}
.favorites-page .favorites-empty-title { color: var(--lk-ink-strong) !important; font-size: 18px !important; font-weight: 700 !important; }
.favorites-page .favorites-empty-text { color: var(--lk-ink-2) !important; font-size: 14.5px !important; }
.favorites-page .favorites-empty-btn,
.product-orders-page .btn-shop-now {
  min-height: 44px;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--lk-brand) !important;
  color: var(--lk-on-brand, #FFFFFF) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  filter: none !important;
  transition: background-color .15s ease !important;
}
.favorites-page .favorites-empty-btn:hover,
.product-orders-page .btn-shop-now:hover { background: var(--lk-brand-hover, var(--lk-brand-text)) !important; color: var(--lk-on-brand, #FFFFFF) !important; }

/* ---------- 30.25 Danh sách đơn hàng --------------------------------------- */
.product-orders-page .orders-workspace {
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
}
.product-orders-page .orders-header { border-bottom: 1px solid var(--lk-line) !important; }
.product-orders-page .orders-header-icon {
  width: 44px !important;
  height: 44px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--lk-sunken) !important;
  background-image: none !important;
  color: var(--lk-brand-text) !important;
  box-shadow: none !important;
}
.product-orders-page .orders-title {
  color: var(--lk-ink-strong) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -.015em !important;
}
.product-orders-page .orders-subtitle { color: var(--lk-muted) !important; font-size: 14px !important; }
.product-orders-page .orders-browse-link {
  border-color: var(--lk-line-strong) !important;
  color: var(--lk-ink-2) !important;
  font-weight: 500 !important;
}
.product-orders-page .orders-browse-link:hover { background: var(--lk-sunken) !important; color: var(--lk-ink-strong) !important; }
.product-orders-page .search-input-wrapper input {
  min-height: 44px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  color: var(--lk-ink-strong) !important;
  font-size: 15px !important;
  box-shadow: none !important;
}
.product-orders-page .search-input-wrapper input:focus { border-color: var(--lk-brand) !important; box-shadow: var(--ring-focus) !important; }
.product-orders-page .search-clear { width: 32px !important; height: 32px !important; }
.product-orders-page .btn-search {
  min-height: 44px !important;
  border-radius: 10px !important;
  background: var(--lk-brand) !important;
  background-image: none !important;
  color: var(--lk-on-brand, #FFFFFF) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  transition: background-color .15s ease !important;
}
.product-orders-page .btn-search:hover { background: var(--lk-brand-hover, var(--lk-brand-text)) !important; }

.product-orders-page .orders-filter-bar {
  border-bottom: 1px solid var(--lk-line) !important;
  background: #FFFFFF !important;
}
.product-orders-page .orders-filter-tabs .filter-tab {
  min-height: 40px !important;
  padding: 0 12px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--lk-ink-2) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color .15s ease, color .15s ease !important;
}
.product-orders-page .orders-filter-tabs .filter-tab:hover { background: var(--lk-sunken) !important; }
.product-orders-page .orders-filter-tabs .filter-tab.active {
  border-color: var(--lk-brand-soft-2) !important;
  background: var(--lk-brand-soft) !important;
  color: var(--lk-brand-text) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.product-orders-page .orders-filter-tabs .filter-tab.active .tab-label { color: var(--lk-brand-text) !important; }
.product-orders-page .orders-filter-tabs .tab-count,
.product-orders-page .orders-filter-tabs .filter-tab.active .tab-count {
  min-width: 0 !important;
  padding: 0 !important;
  background: none !important;
  color: var(--lk-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.product-orders-page .orders-filter-tabs .filter-tab.active .tab-count { color: var(--lk-brand-text) !important; }
.product-orders-page .orders-results-info { color: var(--lk-muted) !important; font-size: 13px !important; font-weight: 500 !important; }
/* Điện thoại: 5 tab một hàng cuộn ngang trong khung (thay cho 3 hàng tab xuống dòng) */
@media (max-width: 767.98px) {
  .product-orders-page .orders-filter-tabs {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    margin: 0 -10px !important;
    padding: 0 10px !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .product-orders-page .orders-filter-tabs .filter-tab {
    flex: 0 0 auto !important;
    border-color: var(--lk-line-strong) !important;
    background: #FFFFFF !important;
  }
  .product-orders-page .orders-filter-tabs .filter-tab.active { border-color: var(--lk-brand) !important; background: var(--lk-brand-soft) !important; }
  .product-orders-page .search-input-wrapper input { font-size: 16px !important; }
}

/* Bảng (desktop) + thẻ (mobile) */
.product-orders-page .orders-table thead th {
  background: #FAFBFC !important;
  color: var(--lk-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
}
.product-orders-page .orders-table tbody td { border-bottom: 1px solid var(--lk-line) !important; color: var(--lk-ink); font-size: 14px; }
.product-orders-page .orders-table tbody tr:hover td { background: #FAFBFC !important; }
.product-orders-page .td-price { color: var(--lk-ink-strong) !important; font-weight: 700 !important; }
.product-orders-page .td-product-content .product-name { color: var(--lk-ink-strong) !important; font-weight: 600 !important; }
.product-orders-page .td-product-content .product-plan,
.product-orders-page .td-product-content .product-qty,
.product-orders-page .td-time { color: var(--lk-muted) !important; font-size: 12.5px !important; }
.product-orders-page .td-id code { font-family: var(--font-sans) !important; font-size: 12.5px !important; color: var(--lk-ink-2) !important; }
.product-orders-page .order-product-thumb { border-radius: 10px !important; }
.product-orders-page .order-product-thumb img { object-fit: contain !important; }
.product-orders-page .link-detail {
  min-height: 36px !important;
  padding: 0 12px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  color: var(--lk-brand-text) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.product-orders-page .link-detail:hover { background: var(--lk-brand-soft) !important; border-color: var(--lk-brand-soft-2) !important; color: var(--lk-brand-text-hover) !important; }
@media (max-width: 767.98px) {
  .product-orders-page .orders-mobile-list { background: var(--lk-ground) !important; }
  .product-orders-page .order-card-mobile {
    border: 1px solid var(--lk-line) !important;
    border-radius: 12px !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
  }
}
/* Nhãn trạng thái giữ đúng bề rộng chữ (tối đa ~nửa thẻ): "Hoàn thành" không bị bẻ đôi */
.product-orders-page .order-card-status { flex: 0 0 auto !important; max-width: 46% !important; }
.product-orders-page .order-card-id { color: var(--lk-muted) !important; font-family: var(--font-sans) !important; font-size: 12.5px !important; }
.product-orders-page .order-card-plan { color: var(--lk-ink-strong) !important; font-size: 15px !important; font-weight: 600 !important; }
.product-orders-page .order-card-package,
.product-orders-page .order-card-row2 { color: var(--lk-muted) !important; font-size: 13px !important; }
.product-orders-page .order-card-total strong { color: var(--lk-ink-strong) !important; font-weight: 700 !important; }
.product-orders-page .order-card-product-item,
.product-orders-page .order-card-product-placeholder { border: 1px solid var(--lk-line); border-radius: 8px !important; }
.product-orders-page .order-card-product-item img { object-fit: contain !important; }
.product-orders-page .product-qty-badge { border-radius: 4px !important; font-size: 10.5px !important; font-weight: 600 !important; }
.product-orders-page .order-card-detail-link {
  min-height: 40px !important;
  padding: 0 14px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  color: var(--lk-brand-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* Nhãn trạng thái: chỉ màu trạng thái trên nền nhạt */
.product-orders-page .order-status,
.order-detail-page .order-status {
  padding: 3px 8px !important;
  border: 0 !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.product-orders-page .order-status.status-pending,
.product-orders-page .order-status.status-processing,
.order-detail-page .order-status.status-pending,
.order-detail-page .order-status.status-processing { background: var(--lk-warn-bg) !important; color: var(--lk-warn-text) !important; }
.product-orders-page .order-status.status-completed,
.order-detail-page .order-status.status-completed { background: var(--lk-mint-soft) !important; color: var(--lk-ok-text) !important; }
.product-orders-page .order-status.status-cancelled,
.order-detail-page .order-status.status-cancelled { background: var(--lk-danger-bg) !important; color: var(--lk-danger-text) !important; }
.product-orders-page .order-status i,
.order-detail-page .order-status i { color: inherit !important; }

.product-orders-page .orders-empty .empty-icon {
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: none !important;
  color: #98A2B3 !important;
  font-size: 32px !important;
}
.product-orders-page .orders-empty h3 { color: var(--lk-ink-strong) !important; font-size: 18px !important; font-weight: 700 !important; }
.product-orders-page .orders-empty p { color: var(--lk-ink-2) !important; font-size: 14.5px !important; }
.product-orders-page .orders-error { border-radius: 10px !important; background: var(--lk-danger-bg) !important; }
.product-orders-page .orders-error button { min-height: 40px; border-radius: 10px !important; background: var(--lk-brand) !important; }
.product-orders-page .btn-load-more {
  min-height: 44px !important;
  padding: 0 18px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  color: var(--lk-ink-strong) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.product-orders-page .btn-load-more:hover { background: var(--lk-sunken) !important; }
/* Khung chờ tải: khối xám nhịp nhẹ thay cho vệt gradient chạy ngang */
.product-orders-page .mobile-order-skeleton span,
.product-orders-page .skeleton-cell {
  background: var(--lk-sunken) !important;
  animation: lk-shop-pulse 1.2s ease-in-out infinite !important;
}
.product-orders-page .mobile-order-skeleton { border-color: var(--lk-line) !important; }
@media (prefers-reduced-motion: reduce) {
  .product-orders-page .mobile-order-skeleton span,
  .product-orders-page .skeleton-cell { animation: none !important; }
}

/* ---------- 30.26 Chi tiết đơn hàng (chưa có đơn để xem thật: chỉ phẳng hoá) ---- */
.order-detail-page .order-detail-header,
.order-detail-page .detail-card {
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
}
.order-detail-page .detail-card-header {
  border-bottom: 1px solid var(--lk-line) !important;
  background: #FFFFFF !important;
  color: var(--lk-ink-strong) !important;
  font-weight: 600 !important;
}
.order-detail-page .detail-card-header i { color: var(--lk-muted) !important; }
.order-detail-page .order-id-text { color: var(--lk-ink-strong) !important; font-weight: 700 !important; }
.order-detail-page .btn-reorder {
  min-height: 40px;
  padding: 0 14px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  color: var(--lk-brand-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.order-detail-page .btn-reorder:hover { background: var(--lk-brand-soft) !important; color: var(--lk-brand-text-hover) !important; }
.order-detail-page .plan-badge,
.order-detail-page .quantity-badge,
.order-detail-page .duration-badge {
  border-radius: 6px !important;
  background: var(--lk-sunken) !important;
  color: var(--lk-ink-2) !important;
}
.order-detail-page .instant-badge { border-radius: 6px !important; background: var(--lk-mint-soft) !important; color: var(--lk-ok-text) !important; }
.order-detail-page .payment-row.total .payment-value { color: var(--lk-brand-text) !important; }

/* ---------- 30.27 Khối hướng dẫn eSIM dưới danh sách /esim (widgets/esim-intro.php) ---- */
.esim-intro .esim-hero,
.esim-intro .esim-path,
.esim-intro .esim-check,
.esim-intro .esim-faq-item {
  border-color: var(--lk-line) !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  background-image: none !important;
  box-shadow: none !important;
}
.esim-intro .esim-hero-eyebrow {
  border-radius: 6px !important;
  background: var(--lk-brand-soft) !important;
  color: var(--lk-brand-text) !important;
}
.esim-intro .esim-hero-eyebrow i { color: inherit !important; }
.esim-intro .esim-path-icon,
.esim-intro .esim-path-icon--alt,
.esim-intro .esim-check-icon {
  border-radius: 10px !important;
  background: var(--lk-sunken) !important;
  color: var(--lk-brand-text) !important;
  box-shadow: none !important;
}
.esim-intro .esim-path-icon i,
.esim-intro .esim-path-icon--alt i { color: inherit !important; }

/* ---------- 30.28 Rà soát lần 2: chỉnh lặt vặt sau khi xem lại từng trang ------- */
/* Khung lọc mobile được focus bằng JS khi mở -> viền focus xanh bao cả sheet */
.products-page #catalogFilterPanel:focus,
.products-page #catalogFilterPanel:focus-visible { outline: none !important; }
/* Dòng chọn đánh giá / tình trạng: chữ thường 400, dòng đang chọn 500 (trước 600 cả loạt) */
.products-page .catalog-filter-panel .filter-checkbox-row,
.products-page .catalog-filter-panel .filter-checkbox-row .text-secondary,
.products-page .catalog-filter-panel .filter-checkbox-row .text-dark,
.products-page .catalog-filter-panel .filter-checkbox-row .small.text-muted { font-weight: 400 !important; }
.products-page .catalog-filter-panel .filter-checkbox-row:has(input:checked),
.products-page .catalog-filter-panel .filter-checkbox-row:has(input:checked) span { font-weight: 500 !important; }
/* Ô sắp xếp: lớp cũ xoá mũi tên của .form-select -> không nhận ra là ô chọn */
.products-page .catalog-toolbar .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%235D6679' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 6 4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px 14px !important;
}
/* Dấu "…" trong phân trang: căn giữa theo chiều cao ô 40px */
.products-page .products-pagination .pagination-gap {
  display: inline-flex !important;
  align-items: center;
  height: 40px;
}
/* Hàng chip: từ 576px cột chỉ có 10px lề (main.css), kéo tràn -16px làm trang rộng thêm 2px */
@media (min-width: 576px) and (max-width: 991.98px) {
  .catalog-cat-chips { margin: 0 0 12px; padding: 0 0 2px; scroll-padding-inline: 0; }
}

/* Chi tiết: thẻ chuyển từ cột trái xuống (ảnh, mô tả, đánh giá) lệch 2px so với khung mua.
   Lớp cũ bù 12px (gutter Bootstrap) nhưng main.css đặt lề cột 10px. */
@media (max-width: 575.98px) {
  .product-detail-page .product-detail-left-col > .product-hero-image-card { width: auto !important; }
}
@media (max-width: 991.98px) {
  .product-detail-page .product-detail-left-col > .product-hero-image-card,
  .product-detail-page .product-detail-left-col > .product-description-section,
  .product-detail-page .product-detail-left-col > .product-reviews-section {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
}
/* Hàng thông tin: khi xuống dòng, dấu "•" không đứng trơ trọi đầu/cuối dòng.
   Điện thoại: đánh giá một dòng, danh mục + đã bán dòng dưới (dấu • thành ngắt dòng). */
@media (max-width: 575.98px) {
  .product-detail-page .pd-meta > span.text-muted[aria-hidden="true"] {
    flex: 0 0 100%;
    height: 0;
    margin-bottom: -6px;
    overflow: hidden;
    font-size: 0;
  }
  /* Danh mục thành nhãn nền xám nhạt, bỏ dấu • trước "Đã bán" (dòng hẹp sẽ gãy làm dấu đứng đầu dòng) */
  .product-detail-page .pd-meta-cat {
    max-width: 100%;
    overflow: hidden;
    padding: 1px 8px;
    border-radius: 6px;
    background: var(--lk-sunken);
    color: var(--lk-ink-2);
    text-overflow: ellipsis;
  }
  .product-detail-page .pd-meta-cat + .pd-meta-sold::before { content: none; }
}
.product-detail-page .pd-meta-cat,
.product-detail-page .pd-meta-sold { white-space: nowrap; }
/* Nút yêu thích: product-detail.css dùng #productFavoriteBtn !important (nền xám, đã chọn = khối đỏ đặc)
   nên rule theo class ở 30.11 thua. Chưa chọn: nền trắng, tim xám; đã chọn: nền đỏ nhạt, tim đỏ. */
.product-detail-page #productFavoriteBtn {
  border: 1px solid var(--lk-line-strong) !important;
  background: #FFFFFF !important;
  color: var(--lk-muted) !important;
}
.product-detail-page #productFavoriteBtn:hover { background: var(--lk-sunken) !important; color: var(--lk-ink-2) !important; }
.product-detail-page #productFavoriteBtn.active,
.product-detail-page #productFavoriteBtn.active:hover {
  border-color: #FECDCA !important;
  background: var(--lk-danger-bg) !important;
  color: var(--lk-danger-text) !important;
}
/* Đánh giá trên điện thoại: bỏ lớp đệm đôi ở đầu khối, số đánh giá không gãy dòng */
.product-detail-page .review-count-badge { white-space: nowrap; }
@media (max-width: 575.98px) {
  .product-detail-page .product-reviews-section .section-header { padding: 0 0 12px !important; }
  .product-detail-page .btn-review-helpful { min-height: 40px !important; }
}
/* Mô tả do admin nhập: nút/link có bóng màu inline -> bỏ bóng */
.product-detail-page .description-text [style*="box-shadow"] { box-shadow: none !important; }

/* Giỏ: icon trước tên gói thẳng dòng đầu khi tên gói dài nhiều dòng */
.cart-page .cart-item-plan { align-items: baseline !important; }
.cart-page .cart-item-plan i { flex: none; }

/* Khối eSIM: lớp widget dùng 800 / 650 -> về thang 700 / 600; nhãn nhỏ in hoa 11px */
.esim-intro .esim-hero-title,
.esim-intro .esim-faq-title { font-weight: 700 !important; }
.esim-intro .esim-path-link,
.esim-intro summary,
.esim-intro a { font-weight: 600 !important; }
.esim-intro .esim-hero-eyebrow { font-size: 11px !important; font-weight: 600 !important; letter-spacing: .04em !important; }


/* ========================================================================
   40. Tài khoản, nạp tiền, đăng nhập, trang tĩnh, blog
   ======================================================================== */
/* ---------- 40.1 Khung trang tài khoản + menu bên ------------------------- */
/* Nền section: bỏ màu riêng của các lớp cũ để thấy nền chung --lk-ground */
.profile-part:not(.product-orders-page),
.inner-section:has(.client-sidebar),
.support-tickets-page,
.ticket-detail-page {
  background: transparent !important;
}

.client-sidebar {
  overflow: hidden !important;
  background: var(--lk-surface) !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
/* Thẻ người dùng: một hàng gọn (ảnh 40px + tên + số dư) thay cho ảnh 88px căn giữa */
.client-sidebar .sidebar-user-card {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 16px !important;
  text-align: left !important;
  background: transparent !important;
  border-bottom: 1px solid var(--lk-line) !important;
}
.client-sidebar .sidebar-user-avatar {
  flex: none;
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
}
.client-sidebar .sidebar-user-avatar img {
  border: 1px solid var(--lk-line) !important;
  box-shadow: none !important;
}
.client-sidebar .user-status-dot { display: none !important; }
.client-sidebar .sidebar-user-info { min-width: 0; }
.client-sidebar .sidebar-user-name {
  overflow: hidden;
  margin: 0 !important;
  color: var(--lk-ink-strong) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.client-sidebar .sidebar-user-balance {
  display: block !important;
  margin-top: 2px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--lk-ink-2) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums;
}

.client-sidebar .sidebar-menu { padding: 8px !important; }
.client-sidebar .sidebar-menu-label {
  padding: 12px 10px 4px !important;
  color: var(--lk-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase;
}
.client-sidebar .sidebar-menu-item {
  display: flex !important;
  align-items: center;
  gap: 10px !important;
  min-height: 40px !important;
  padding: 8px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--lk-ink-2) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: background-color .15s ease, color .15s ease !important;
}
.client-sidebar .sidebar-menu-item span { color: inherit !important; }
.client-sidebar .sidebar-menu-item i {
  flex: none;
  width: 18px !important;
  color: var(--lk-muted) !important;
  font-size: 14px !important;
  text-align: center;
}
.client-sidebar .sidebar-menu-item:hover {
  background: var(--lk-sunken) !important;
  color: var(--lk-ink-strong) !important;
}
.client-sidebar .sidebar-menu-item.active,
.client-sidebar .sidebar-menu-item.active:hover {
  background: var(--lk-brand-soft) !important;
  color: var(--lk-brand-text) !important;
  font-weight: 600 !important;
}
.client-sidebar .sidebar-menu-item.active i { color: var(--lk-brand-text) !important; }
.client-sidebar .sidebar-menu-item .menu-badge {
  display: inline-grid !important;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: auto !important;
  padding: 0 6px !important;
  border-radius: 6px !important;
  background: var(--lk-brand) !important;
  box-shadow: none !important;
  color: var(--lk-on-brand, #FFFFFF) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  animation: none !important;
}
.client-sidebar .sidebar-footer {
  padding: 8px !important;
  border-top: 1px solid var(--lk-line) !important;
  background: transparent !important;
}
.client-sidebar .sidebar-logout-btn {
  display: flex !important;
  align-items: center;
  gap: 10px !important;
  min-height: 40px;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  color: var(--lk-ink-2) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: background-color .15s ease, color .15s ease !important;
}
.client-sidebar .sidebar-logout-btn span { color: inherit !important; }
.client-sidebar .sidebar-logout-btn i {
  width: 18px;
  color: var(--lk-muted) !important;
  text-align: center;
}
.client-sidebar .sidebar-logout-btn:hover,
.client-sidebar .sidebar-logout-btn:hover i {
  background: var(--lk-danger-bg) !important;
  color: var(--lk-danger-text) !important;
}
.client-sidebar .sidebar-logout-btn:hover i { background: transparent !important; }

/* Dưới 992px: menu thành một hàng chip cuộn ngang, nằm TRÊN nội dung.
   Trước đây column-reverse đẩy menu (~830px) xuống cuối trang.
   Đăng xuất vẫn có trong drawer / menu người dùng ở header. */
@media (max-width: 991.98px) {
  .inner-section:has(.client-sidebar) { padding-top: 16px !important; }
  .row.content-reverse { flex-direction: column !important; }
  .row.content-reverse > .col-lg-3 {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
  }
  .client-sidebar {
    position: static !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
  .client-sidebar .sidebar-user-card,
  .client-sidebar .sidebar-menu-label,
  .client-sidebar .sidebar-footer { display: none !important; }
  .client-sidebar .sidebar-menu {
    display: flex !important;
    gap: 8px;
    padding: 0 0 2px !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .client-sidebar .sidebar-menu::-webkit-scrollbar { display: none; }
  .client-sidebar .sidebar-menu-item {
    flex: none;
    gap: 8px !important;
    min-height: 40px !important;
    padding: 0 14px !important;
    border-color: var(--lk-line) !important;
    border-radius: 10px !important;
    background: var(--lk-surface) !important;
    font-size: 13.5px !important;
    white-space: nowrap;
  }
  .client-sidebar .sidebar-menu-item i { width: auto !important; font-size: 13px !important; }
  .client-sidebar .sidebar-menu-item.active,
  .client-sidebar .sidebar-menu-item.active:hover {
    border-color: var(--lk-brand-soft-2) !important;
    background: var(--lk-brand-soft) !important;
  }
  .client-sidebar .sidebar-menu-item .menu-badge { margin-left: 2px !important; }
}
/* Điện thoại: hàng chip chạy sát mép máy (lề trang 16px) để thấy rõ là cuộn được */
@media (max-width: 575.98px) {
  .client-sidebar .sidebar-menu {
    /* tràn ra hai mép màn hình, đệm lại đúng bằng phần tràn để chip đầu thẳng lề nội dung */
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%) !important;
    scroll-padding-inline: calc(50vw - 50%);
  }
}

/* ---------- 40.2 Thẻ, tiêu đề trang, nút dùng chung khu tài khoản --------- */
.card-modern,
.profile-part:not(.product-orders-page) .card-modern,
.inner-section .card-modern,
.gamer-profile-card,
.gamer-orders-card {
  background: var(--lk-surface) !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.card-modern::before,
.card-modern::after,
.gamer-profile-card::before,
.gamer-profile-card::after,
.gamer-orders-card::before,
.gamer-orders-card::after { content: none !important; }
.card-modern { overflow: hidden; margin-bottom: 16px; }
.card-modern-header {
  padding: 16px 20px !important;
  background: transparent !important;
  border-bottom: 1px solid var(--lk-line) !important;
}
.card-modern-header h5,
.gamer-orders-header h5 {
  margin: 0 !important;
  color: var(--lk-ink-strong) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}
.card-modern-header h5 i,
.gamer-orders-header h5 i {
  width: auto !important;
  height: auto !important;
  margin-right: 2px;
  background: none !important;
  box-shadow: none !important;
  color: var(--lk-muted) !important;
  font-size: 15px !important;
}
.card-modern-body { padding: 20px !important; }

/* Tiêu đề trang dạng "ô icon + H1 + phụ đề" (biến động số dư, nhật ký, ticket, API) */
.data-header-icon,
.ticket-header-icon,
.api-header-icon {
  flex: none;
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  background: var(--lk-brand-soft) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--lk-brand-text) !important;
  font-size: 18px !important;
}
.data-header-icon i,
.ticket-header-icon i,
.api-header-icon i { color: inherit !important; }
.data-card-title,
.ticket-card-title {
  margin: 0 !important;
  color: var(--lk-ink-strong) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  line-height: 1.3 !important;
}
.data-subtitle,
.ticket-subtitle {
  margin: 2px 0 0 !important;
  color: var(--lk-muted) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

/* Nút chính / phụ của khu tài khoản: phẳng, bo 10px, không quầng sáng */
.profile-part:not(.product-orders-page) .btn-shop-now,
.profile-part:not(.product-orders-page) a.btn-shop-now,
.btn-filter-search,
button.btn-filter-search,
:is(.data-table-wrapper, .ticket-table-wrapper) .btn-load-more,
.custom-btn-primary,
.security-update-btn,
.btn-save {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px !important;
  border: 1px solid var(--lk-brand) !important;
  border-radius: 10px !important;
  background: var(--lk-brand) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--lk-on-brand, #FFFFFF) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transform: none !important;
  filter: none !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease !important;
}
.profile-part:not(.product-orders-page) .btn-shop-now:hover,
.profile-part:not(.product-orders-page) a.btn-shop-now:hover,
.btn-filter-search:hover,
button.btn-filter-search:hover,
:is(.data-table-wrapper, .ticket-table-wrapper) .btn-load-more:hover,
.custom-btn-primary:hover,
.security-update-btn:hover,
.btn-save:hover {
  border-color: var(--lk-brand-text) !important;
  background: var(--lk-brand-hover, var(--lk-brand-text)) !important;
  box-shadow: none !important;
  color: var(--lk-on-brand, #FFFFFF) !important;
  transform: none !important;
}
.profile-part:not(.product-orders-page) .btn-shop-now i,
.btn-filter-search i,
:is(.data-table-wrapper, .ticket-table-wrapper) .btn-load-more i,
.custom-btn-primary i { color: inherit !important; }
.btn-filter-reset,
.custom-btn-secondary,
.profile-part:not(.product-orders-page) .btn-outline-secondary,
.inner-section:has(.client-sidebar) .btn-outline-secondary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
  color: var(--lk-ink-strong) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transform: none !important;
  transition: background-color .15s ease, color .15s ease !important;
}
.btn-filter-reset:hover,
.custom-btn-secondary:hover,
.profile-part:not(.product-orders-page) .btn-outline-secondary:hover,
.inner-section:has(.client-sidebar) .btn-outline-secondary:hover {
  background: var(--lk-sunken) !important;
  color: var(--lk-ink-strong) !important;
}
:is(.data-table-wrapper, .ticket-table-wrapper) .btn-load-more {
  border-color: var(--lk-line-strong) !important;
  background: var(--lk-surface) !important;
  color: var(--lk-ink-strong) !important;
}
:is(.data-table-wrapper, .ticket-table-wrapper) .btn-load-more:hover {
  border-color: var(--lk-line-strong) !important;
  background: var(--lk-sunken) !important;
  color: var(--lk-ink-strong) !important;
}

/* Huy hiệu Bootstrap trong khu tài khoản: chỉ màu trạng thái trên nền nhạt */
.profile-part:not(.product-orders-page) .badge,
.inner-section .badge.bg-info-transparent {
  padding: 3px 8px !important;
  border-radius: 6px !important;
  background: var(--lk-sunken) !important;
  background-image: none !important;
  color: var(--lk-ink-2) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.profile-part:not(.product-orders-page) .badge.bg-success { background: var(--lk-mint-soft) !important; color: var(--lk-ok-text) !important; }
.profile-part:not(.product-orders-page) .badge.bg-danger { background: var(--lk-danger-bg) !important; color: var(--lk-danger-text) !important; }
.profile-part:not(.product-orders-page) .badge.bg-warning { background: var(--lk-warn-bg) !important; color: var(--lk-warn-text) !important; }

/* ---------- 40.3 Hồ sơ (profile) ------------------------------------------ */
.gamer-profile-card { padding: 20px !important; margin-bottom: 16px !important; }
.gamer-header-top {
  flex-wrap: wrap !important;
  gap: 12px 16px !important;
  padding-bottom: 16px !important;
  margin-bottom: 16px !important;
  border-bottom-color: var(--lk-line) !important;
}
.gamer-identity { min-width: 0; gap: 14px !important; }
.gamer-avatar-wrap { flex: none; width: 56px !important; height: 56px !important; }
.gamer-avatar {
  border: 1px solid var(--lk-line) !important;
  box-shadow: none !important;
}
.gamer-online-dot { display: none !important; }
.gamer-info { min-width: 0; }
.gamer-info h4 {
  gap: 8px !important;
  margin: 0 0 6px !important;
  color: var(--lk-ink-strong) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  word-break: break-word;
}
/* Hạng thành viên: một chip trung tính, không màu theo hạng / không gradient */
.gamer-rank-badge,
.gamer-rank-badge.bronze,
.gamer-rank-badge.silver,
.gamer-rank-badge.gold,
.gamer-rank-badge.diamond,
.gamer-rank-badge.legend {
  padding: 2px 8px !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 6px !important;
  background: var(--lk-sunken) !important;
  background-image: none !important;
  color: var(--lk-ink-2) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
}
.gamer-rank-badge i { color: var(--lk-muted) !important; font-size: 11px; }
.gamer-uid-chip {
  padding: 0 !important;
  background: none !important;
  color: var(--lk-muted) !important;
  font-family: var(--font-sans) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums;
}
.gamer-uid-chip i { display: none; }
.gamer-header-top .text-muted { color: var(--lk-muted) !important; font-size: 13px !important; font-weight: 500 !important; }
.gamer-header-top strong.text-primary {
  color: var(--lk-ink-strong) !important;
  font-family: var(--font-sans) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
}
.gamer-header-top .btn-shop-now,
.gamer-header-top .btn-outline-secondary {
  padding: 0 16px !important;
  font-size: 14px !important;
}

/* Cấp bậc + thanh tiến độ: màu đặc, chữ xuống dòng được */
.gamer-level-progress-box {
  padding: 12px 14px !important;
  margin-bottom: 16px !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 10px !important;
  background: var(--lk-surface) !important;
}
.level-meta-row {
  flex-wrap: wrap;
  gap: 4px 12px;
  color: var(--lk-ink-2) !important;
  font-size: 13px !important;
}
.level-meta-row i { color: var(--lk-muted) !important; }
.level-meta-row strong { color: var(--lk-ink-strong) !important; font-weight: 600 !important; }
.level-meta-row .text-muted { color: var(--lk-muted) !important; }
.level-bar-track {
  height: 6px !important;
  border-radius: 99px !important;
  background: var(--lk-line) !important;
}
.level-bar-fill {
  border-radius: inherit !important;
  background: var(--lk-brand) !important;
  background-image: none !important;
  box-shadow: none !important;
  transition: none !important;
}

/* 3 ô số liệu: một kiểu icon trung tính, không nhún khi rê chuột */
.gamer-overview-metrics-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}
.gamer-stat-card,
.gamer-stat-card:hover {
  gap: 12px !important;
  padding: 14px 16px !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
  transform: none !important;
}
.gamer-stat-card { transition: none !important; }
.gamer-stat-icon,
.gamer-stat-icon.spend,
.gamer-stat-icon.orders,
.gamer-stat-icon.favorites {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  background: var(--lk-sunken) !important;
  color: var(--lk-ink-2) !important;
  font-size: 16px !important;
}
.gamer-stat-info { min-width: 0; }
.gamer-stat-label {
  color: var(--lk-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.gamer-stat-value {
  color: var(--lk-ink-strong) !important;
  font-family: var(--font-sans) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums;
}

/* 4 ô ví / ưu đãi: trắng, viền mảnh, ô "Ví chính" không còn nền màu */
.gamer-metrics-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)) !important;
  gap: 12px !important;
}
.gamer-metric-tile,
.gamer-metric-tile:hover,
.gamer-metric-tile.primary-tile,
.gamer-metric-tile.primary-tile:hover {
  padding: 14px 16px !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: var(--lk-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}
.gamer-metric-tile { transition: none !important; }
.gamer-metric-tile::before,
.gamer-metric-tile::after { content: none !important; }
.metric-tile-header { flex-wrap: wrap; gap: 6px; }
.metric-tile-label {
  color: var(--lk-ink-2) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.metric-tile-label i,
.metric-tile-label i.text-primary,
.metric-tile-label i.text-info,
.metric-tile-label i.text-success,
.metric-tile-label i.text-warning { color: var(--lk-muted) !important; }
.gamer-metric-tile .metric-tile-header .badge {
  padding: 2px 6px !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 6px !important;
  background: var(--lk-sunken) !important;
  color: var(--lk-ink-2) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
}
.gamer-metric-tile .metric-tile-value,
.gamer-metric-tile .metric-tile-value[style] {
  margin: 6px 0 4px !important;
  color: var(--lk-ink-strong) !important;
  font-family: var(--font-sans) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
}
.metric-tile-action a,
.metric-tile-action > a {
  color: var(--lk-brand-text) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.metric-tile-action a:hover { color: var(--lk-brand-text-hover) !important; text-decoration: underline !important; }
.metric-tile-action .text-muted { color: var(--lk-muted) !important; font-size: 13px !important; font-weight: 500 !important; }
@media (max-width: 991.98px) {
  /* Liên kết "Nạp vào ví" dễ chạm hơn trên màn cảm ứng */
  .metric-tile-action > a { display: inline-flex !important; align-items: center; gap: 4px; min-height: 40px; }
}

/* Lịch sử đơn gần đây */
.gamer-orders-card { padding: 20px !important; margin-bottom: 16px !important; }
.gamer-orders-header {
  gap: 12px !important;
  padding-bottom: 14px !important;
  margin-bottom: 14px !important;
}
.gamer-orders-card .order-filter-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  max-width: 100%;
  padding: 0 !important;
  overflow-x: auto;
  background: none !important;
  border: 0 !important;
  scrollbar-width: none;
}
.gamer-orders-card .order-filter-tabs::-webkit-scrollbar { display: none; }
.gamer-orders-card .order-filter-tab {
  flex: none;
  min-height: 40px !important;
  height: auto !important;
  padding: 0 14px !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 8px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
  color: var(--lk-ink-2) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  transform: none !important;
  transition: background-color .15s ease, color .15s ease !important;
}
.gamer-orders-card .order-filter-tab:hover { background: var(--lk-sunken) !important; color: var(--lk-ink-strong) !important; }
.gamer-orders-card .order-filter-tab.active,
.gamer-orders-card .order-filter-tab.active:hover,
.gamer-orders-card .order-filter-tab.active * {
  border-color: var(--lk-brand-soft-2) !important;
  background: var(--lk-brand-soft) !important;
  color: var(--lk-brand-text) !important;
  font-weight: 600 !important;
}
.gamer-table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gamer-orders-table th {
  background: transparent !important;
  color: var(--lk-muted) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.gamer-orders-table td { border-color: var(--lk-line) !important; }
.order-product-name { color: var(--lk-ink-strong) !important; font-weight: 600 !important; }
.order-plan-name { color: var(--lk-muted) !important; font-size: 12px !important; text-transform: none !important; }
.order-product-thumb { border: 1px solid var(--lk-line) !important; border-radius: 8px !important; background: var(--lk-sunken) !important; box-shadow: none !important; }
.gamer-orders-table .order-code-badge,
.order-code-badge {
  padding: 2px 6px !important;
  border-radius: 6px !important;
  background: var(--lk-sunken) !important;
  color: var(--lk-ink-2) !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
.order-status-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  padding: 3px 8px !important;
  border: 0 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  white-space: nowrap;
}
.order-status-badge.completed { background: var(--lk-mint-soft) !important; color: var(--lk-ok-text) !important; }
.order-status-badge.processing { background: var(--lk-warn-bg) !important; color: var(--lk-warn-text) !important; }
.order-status-badge.cancelled { background: var(--lk-danger-bg) !important; color: var(--lk-danger-text) !important; }
.order-status-badge i { color: inherit !important; }
/* Biểu tượng "đang xử lý" đứng yên (nhãn trạng thái, không phải đang tải) */
.gamer-orders-card .order-status-badge .fa-spin { animation: none !important; }
.gamer-orders-table strong.text-dark {
  color: var(--lk-ink-strong) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.btn-order-view,
.gamer-orders-table .btn-order-view {
  display: inline-flex !important;
  align-items: center;
  min-height: 36px;
  padding: 0 12px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 8px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
  color: var(--lk-brand-text) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap;
  text-decoration: none !important;
  transform: none !important;
}
.btn-order-view:hover { background: var(--lk-brand-soft) !important; }
.gamer-orders-card .btn-outline-primary {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  padding: 0 16px !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
}
/* Trạng thái trống của lịch sử đơn (style viết thẳng trong profile.php) */
.gamer-orders-card .text-center.py-5 > .mb-3.mx-auto[style] {
  background: var(--lk-sunken) !important;
  color: var(--lk-muted) !important;
}
.gamer-orders-card .text-center.py-5 h6 { color: var(--lk-ink-strong) !important; font-size: 15px !important; font-weight: 600 !important; }
.gamer-orders-card .text-center.py-5 p { color: var(--lk-muted) !important; font-size: 14px !important; }
.gamer-orders-card .text-center.py-5 .btn-shop-now { padding: 0 18px !important; font-size: 14px !important; }

/* Thông tin tài khoản: ô trắng viền mảnh, nhãn thường (không viết hoa) */
.profile-info-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)) !important;
  gap: 10px !important;
}
.profile-info-item {
  min-width: 0;
  padding: 12px 14px !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 10px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
}
.profile-info-label {
  gap: 6px;
  margin-bottom: 4px !important;
  color: var(--lk-muted) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.profile-info-label i { color: var(--lk-muted) !important; font-size: 12px; }
.profile-info-value {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--lk-ink-strong) !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
}
.profile-info-value .btn-outline-primary { min-height: 36px; border-radius: 8px !important; font-size: 13px !important; }
.profile-part:not(.product-orders-page) .card-modern-body > .d-flex .btn-primary { min-height: 40px; border-radius: 10px !important; }

@media (max-width: 767.98px) {
  .gamer-profile-card,
  .gamer-orders-card { padding: 16px !important; }
  .card-modern-header { padding: 14px 16px !important; }
  .card-modern-body { padding: 16px !important; }
  /* Hàng đầu: tên ở trên, số dư + 2 nút xuống hàng dưới, chiếm trọn bề ngang */
  .gamer-header-top > .d-flex { width: 100%; gap: 8px !important; }
  .gamer-header-top > .d-flex > .d-flex { width: 100%; margin-right: 0 !important; }
  .gamer-header-top .btn-shop-now,
  .gamer-header-top .btn-outline-secondary { flex: 1 1 0; min-height: 44px !important; }
  .gamer-metric-tile .metric-tile-header .badge { display: none !important; }
  .gamer-info h4 { font-size: 18px !important; }
  /* 3 ô số liệu: 3 cột gọn, bỏ ô icon */
  .gamer-overview-metrics-grid { gap: 8px !important; }
  .gamer-stat-card,
  .gamer-stat-card:hover { padding: 10px 12px !important; }
  .gamer-stat-icon { display: none !important; }
  .gamer-stat-label { font-size: 12px !important; line-height: 1.35; }
  .gamer-stat-value { font-size: 16px !important; }
  .gamer-stat-info { overflow-wrap: anywhere; }
  .gamer-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .gamer-metric-tile,
  .gamer-metric-tile.primary-tile { padding: 12px !important; }
  .gamer-metric-tile .metric-tile-value,
  .gamer-metric-tile .metric-tile-value[style] { font-size: 17px !important; }
  .gamer-orders-header { flex-direction: column; align-items: stretch !important; }
  /* Thông tin tài khoản: một khối danh sách, mỗi dòng ngăn bằng đường kẻ */
  .profile-info-grid {
    gap: 0 !important;
    border: 1px solid var(--lk-line);
    border-radius: 10px;
  }
  .profile-info-item {
    padding: 10px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--lk-line) !important;
    border-radius: 0 !important;
  }
  .profile-info-item:last-child { border-bottom: 0 !important; }
}

/* Hộp thoại (sửa hồ sơ, liên kết Telegram): đầu hộp trắng, không nền màu */
.custom-modal-overlay {
  background: rgba(16, 24, 40, .5) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.custom-modal {
  border: 1px solid var(--lk-line) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-lg) !important;
}
.custom-modal-header,
.custom-modal-header[style] {
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--lk-line) !important;
  background: var(--lk-surface) !important;
  background-image: none !important;
  color: var(--lk-ink-strong) !important;
}
.custom-modal-header h5 {
  color: var(--lk-ink-strong) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}
.custom-modal-header h5 i { color: var(--lk-muted) !important; }
.custom-modal-close {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--lk-ink-2) !important;
}
.custom-modal-close:hover { background: var(--lk-sunken) !important; }
.custom-modal-footer { background: var(--lk-surface) !important; border-top-color: var(--lk-line) !important; }
.custom-form-label { color: var(--lk-ink-2) !important; font-size: 13.5px !important; font-weight: 500 !important; }
.custom-form-label i { color: var(--lk-muted) !important; }
.custom-form-input {
  min-height: 44px;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
  color: var(--lk-ink-strong) !important;
}
.custom-form-input:focus { border-color: var(--lk-brand) !important; box-shadow: var(--ring-focus) !important; }
.telegram-avatar {
  background: var(--lk-brand-soft) !important;
  background-image: none !important;
  color: var(--lk-brand-text) !important;
}
.telegram-step { background: var(--lk-sunken) !important; border-radius: 10px !important; }
.step-number {
  background: var(--lk-surface) !important;
  background-image: none !important;
  border: 1px solid var(--lk-line-strong);
  color: var(--lk-ink-strong) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
@media (max-width: 575.98px) {
  .custom-form-input { font-size: 16px !important; }
}

/* ---------- 40.4 Biến động số dư / nhật ký: tiêu đề, bộ lọc, bảng ---------- */
/* Tiêu đề trang nằm thẳng trên nền; bộ lọc và bảng là hai thẻ riêng */
.data-card-header {
  gap: 12px !important;
  padding: 0 !important;
  margin-bottom: 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.data-header-info { gap: 12px !important; min-width: 0; }
.data-filter-section {
  padding: 16px !important;
  margin-bottom: 12px !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
}
.data-filter-grid { gap: 12px !important; }
.data-filter-group label {
  margin-bottom: 6px !important;
  color: var(--lk-ink-2) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.data-filter-group .form-control,
.data-filter-group .form-select,
.data-filter-group input.flatpickr-input + input {
  min-height: 44px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background-color: var(--lk-surface) !important;
  box-shadow: none !important;
  color: var(--lk-ink-strong) !important;
  font-size: 14px !important;
}
.data-filter-group .form-control:focus,
.data-filter-group .form-select:focus {
  border-color: var(--lk-brand) !important;
  box-shadow: var(--ring-focus) !important;
}
.data-filter-actions { gap: 8px !important; }
.data-filter-actions .btn-filter-search,
.data-filter-actions .btn-filter-reset {
  min-height: 44px !important;
  padding: 0 16px !important;
  font-size: 14px !important;
}
.data-filter-actions .btn-filter-reset:hover { color: var(--lk-ink-strong) !important; }

.data-table-wrapper {
  overflow-x: auto !important;   /* 768–991px: bảng rộng cuộn trong khung, không bị cắt */
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
}
.data-table thead th {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--lk-line) !important;
  background: var(--lk-sunken) !important;
  color: var(--lk-muted) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.data-table tbody td {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--lk-line) !important;
  color: var(--lk-ink) !important;
  font-size: 14px !important;
}
.data-table tbody tr:hover td { background: #FAFBFC !important; }
.data-table tbody td b { color: var(--lk-ink-strong); font-weight: 600 !important; font-variant-numeric: tabular-nums; }
.data-table tbody td small { color: var(--lk-ink-2) !important; font-size: 13.5px !important; }
/* Số tiền: màu viết thẳng trong HTML (green / red / --data-info) chỉ còn báo dấu cộng / trừ */
.data-table b[style*="green"],
.data-table strong[style*="green"] { color: var(--lk-ok-text) !important; }
.data-table b[style*="red"],
.data-table strong[style*="red"] { color: var(--lk-danger-text) !important; }
.data-table b[style*="--data-info"],
.data-table b[style*="blue"] { color: var(--lk-ink-strong) !important; }
.data-date {
  color: var(--lk-ink-2) !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.data-category {
  padding: 2px 8px !important;
  border-radius: 6px !important;
  background: var(--lk-sunken) !important;
  color: var(--lk-ink-2) !important;
  font-family: var(--font-sans) !important;
  font-size: 12.5px !important;
}
.data-category i { color: var(--lk-muted) !important; }
.data-table .badge.bg-info-transparent { white-space: nowrap; }
/* Khung xương khi tải: xám phẳng, không ánh lướt */
.data-table .skeleton-cell {
  background: var(--lk-sunken) !important;
  background-image: none !important;
  animation: none !important;
}
/* Trống: ẩn hẳn bảng (trước hiện dòng tiêu đề cột lơ lửng dưới hình minh hoạ) */
.data-table-wrapper:has(> .data-empty-state[style*="block"]) > .data-table { display: none !important; }
.data-empty-state { padding: 40px 16px !important; }
.data-empty-icon {
  width: 56px !important;
  height: 56px !important;
  margin-bottom: 12px !important;
  background: var(--lk-sunken) !important;
  color: var(--lk-muted) !important;
  font-size: 22px !important;
}
.data-empty-state h4 { color: var(--lk-ink-strong) !important; font-size: 16px !important; font-weight: 600 !important; }
.data-empty-state p { color: var(--lk-muted) !important; font-size: 14px !important; }
.data-load-more { padding: 12px !important; border-top: 1px solid var(--lk-line); }

@media (max-width: 767.98px) {
  .data-card-title,
  .ticket-card-title { font-size: 20px !important; }
  .data-header-icon,
  .ticket-header-icon,
  .api-header-icon { width: 40px !important; height: 40px !important; font-size: 16px !important; }
  .data-filter-section { padding: 12px !important; }
  /* Bộ lọc 2 cột: ô tìm theo chữ chiếm trọn hàng, nút ở hàng cuối */
  .data-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .data-filter-grid > .data-filter-group:first-child,
  .data-filter-grid > .data-filter-actions,
  .data-filter-grid > .data-filter-group:nth-last-child(2):nth-child(even) { grid-column: 1 / -1; }
  .data-filter-group .form-control,
  .data-filter-group .form-select,
  .data-filter-group input.flatpickr-input + input { font-size: 16px !important; }
  .data-filter-actions .btn-filter-search,
  .data-filter-actions .btn-filter-reset { flex: 1 1 0; }

  /* Bảng thành danh sách: mỗi dòng một khối "nhãn — giá trị" (nhãn lấy từ data-label do JS gắn) */
  .data-table thead { display: none !important; }
  .data-table,
  .data-table tr,
  .data-table td { display: block; width: 100%; }
  .data-table tbody:not(.data-loading-skeleton),
  .data-table tbody.data-loading-skeleton.is-loading { display: block; }
  .data-table tbody tr {
    padding: 10px 14px;
    border-bottom: 1px solid var(--lk-line);
  }
  .data-table tbody tr:last-child { border-bottom: 0; }
  .data-table tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0 !important;
    border: 0 !important;
    text-align: right !important;
    overflow-wrap: anywhere;
  }
  .data-table tbody td[data-label]::before {
    content: attr(data-label);
    flex: none;
    color: var(--lk-muted);
    font-size: 12.5px;
    font-weight: 500;
    text-align: left;
  }
  .data-table tbody tr:hover td { background: transparent !important; }
  .data-table .skeleton-cell { margin-left: 0 !important; max-width: 60%; }
}

/* ---------- 40.5 Bảo mật, đổi mật khẩu ------------------------------------ */
.security-setting-item {
  gap: 16px;
  border-color: var(--lk-line) !important;
}
.security-setting-item[style] { background: transparent !important; }
.security-setting-title {
  color: var(--lk-ink-strong) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
}
.security-setting-title i { color: var(--lk-muted) !important; }
.security-setting-desc { color: var(--lk-muted) !important; font-size: 13.5px !important; }
/* Công tắc: giữ dạng viên thuốc */
.security-setting-toggle .switch { flex: none; }
.security-setting-toggle .slider { background: var(--lk-line-strong) !important; box-shadow: none !important; }
.security-setting-toggle .switch input:checked + .slider { background: var(--lk-brand) !important; }
.security-setting-toggle .slider::before { box-shadow: none !important; }
.security-update-btn,
.btn-save { padding: 0 20px !important; font-size: 14px !important; }
.twofa-note {
  border: 1px solid var(--lk-line) !important;
  border-radius: 10px !important;
  background: var(--lk-sunken) !important;
  color: var(--lk-ink-2) !important;
}
.twofa-note li,
.twofa-note strong { color: var(--lk-ink-2) !important; font-size: 13.5px !important; }
.twofa-qr-container { border-radius: 12px !important; box-shadow: none !important; }
.twofa-qr-image { border: 1px solid var(--lk-line) !important; border-radius: 10px !important; box-shadow: none !important; }
.twofa-input-group .input-style,
.input-style {
  min-height: 44px;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.sessions-header h5 { color: var(--lk-ink-strong) !important; font-size: 15px !important; font-weight: 600 !important; }
.session-item {
  border: 1px solid var(--lk-line) !important;
  border-radius: 10px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
}
.session-item .session-icon,
.session-item .session-icon[style] {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  background: var(--lk-sunken) !important;
  background-image: none !important;
}
.session-item .session-icon i,
.session-item .session-icon i[style] { color: var(--lk-ink-2) !important; }
.session-info h6 { color: var(--lk-ink-strong) !important; font-size: 14px !important; font-weight: 600 !important; }
.session-detail-item { color: var(--lk-muted) !important; font-size: 13px !important; }
.session-detail-item i { color: var(--lk-muted) !important; }
.badge-current {
  padding: 3px 8px !important;
  border-radius: 6px !important;
  background: var(--lk-mint-soft) !important;
  color: var(--lk-ok-text) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
/* Đăng xuất phiên: nút viền, chữ đỏ (hành động huỷ), không viên thuốc */
.logout-all-btn,
a.logout-all-btn,
.btn-logout-session,
a.btn-logout-session {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: 40px !important;
  height: auto !important;
  padding: 0 14px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
  color: var(--lk-danger-text) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.logout-all-btn:hover,
.btn-logout-session:hover { background: var(--lk-danger-bg) !important; color: var(--lk-danger-text) !important; }
.sessions-list .empty-state i { color: var(--lk-muted) !important; }

/* Đổi mật khẩu: .form-btn trước là nút mặc định của trình duyệt */
.profile-part:not(.product-orders-page) .card-modern-body > p.text-muted { color: var(--lk-ink-2) !important; font-size: 14px; }
.profile-part:not(.product-orders-page) .form-label {
  margin-bottom: 6px !important;
  color: var(--lk-ink-2) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}
.profile-part:not(.product-orders-page) .card-modern .form-control {
  min-height: 44px !important;
  background-color: var(--lk-surface) !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.profile-part:not(.product-orders-page) .card-modern .form-control:focus { border-color: var(--lk-brand) !important; box-shadow: var(--ring-focus) !important; }
.profile-part:not(.product-orders-page) .form-btn,
#btnChangePasswordProfile {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 44px !important;
  margin-top: 8px;
  padding: 0 24px !important;
  border: 1px solid var(--lk-brand) !important;
  border-radius: 10px !important;
  background: var(--lk-brand) !important;
  box-shadow: none !important;
  color: var(--lk-on-brand, #FFFFFF) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background-color .15s ease !important;
}
.profile-part:not(.product-orders-page) .form-btn:hover,
#btnChangePasswordProfile:hover { background: var(--lk-brand-hover, var(--lk-brand-text)) !important; border-color: var(--lk-brand-text) !important; }

@media (max-width: 575.98px) {
  .profile-part:not(.product-orders-page) .card-modern .form-control,
  .input-style { font-size: 16px !important; }
  .sessions-header { flex-wrap: wrap; gap: 8px; }
  .session-item { flex-wrap: wrap; }
  #btnChangePasswordProfile { width: 100%; }
}

/* ---------- 40.6 API Keys + tài liệu API ---------------------------------- */
.api-keys-header { margin-bottom: 16px !important; }
.api-keys-title,
.api-page-title {
  color: var(--lk-ink-strong) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}
.api-keys-title i,
.api-page-title i { color: var(--lk-brand-text) !important; }
.api-keys-desc,
.api-page-desc { color: var(--lk-muted) !important; font-size: 14px !important; }
.api-stats-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}
.api-stat-card,
.api-stat-card:hover {
  gap: 12px !important;
  padding: 14px 16px !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
  transform: none !important;
}
.api-stat-icon,
.api-stat-icon.purple,
.api-stat-icon.green,
.api-stat-icon.orange,
.api-section-icon,
.api-section-icon.purple,
.api-section-icon.blue,
.api-section-icon.green,
.api-section-icon.orange,
.api-section-icon.teal,
.api-section-icon.red {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  background: var(--lk-sunken) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--lk-ink-2) !important;
  font-size: 16px !important;
}
.api-stat-icon i,
.api-section-icon i { color: inherit !important; }
.api-stat-info h3 {
  margin: 0 !important;
  color: var(--lk-ink-strong) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
}
.api-stat-info p { margin: 0 !important; color: var(--lk-muted) !important; font-size: 13px !important; }
.api-create-btn,
.api-modal-btn.primary {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: 44px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--lk-brand) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--lk-on-brand, #FFFFFF) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  filter: none !important;
  transform: none !important;
}
.api-create-btn:hover,
.api-modal-btn.primary:hover { background: var(--lk-brand-hover, var(--lk-brand-text)) !important; }
.api-modal-btn.secondary {
  min-height: 44px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: var(--lk-surface) !important;
  color: var(--lk-ink-strong) !important;
  font-weight: 600 !important;
}
.api-limit-warning {
  border: 1px solid #FEDF89 !important;
  border-radius: 10px !important;
  background: var(--lk-warn-bg) !important;
  color: var(--lk-warn-text) !important;
}
.api-limit-warning i,
.api-limit-warning p { color: var(--lk-warn-text) !important; }
.api-empty-state {
  margin-top: 16px;
  padding: 40px 16px !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: var(--lk-surface) !important;
}
.api-empty-state-icon {
  width: 56px !important;
  height: 56px !important;
  background: var(--lk-sunken) !important;
  background-image: none !important;
  color: var(--lk-muted) !important;
  font-size: 22px !important;
}
.api-empty-state h4 { color: var(--lk-ink-strong) !important; font-size: 16px !important; font-weight: 600 !important; }
.api-empty-state p { color: var(--lk-muted) !important; font-size: 14px !important; }
.api-alert,
.api-alert.info,
.api-alert.success {
  border: 1px solid var(--lk-line) !important;
  border-radius: 10px !important;
  background: var(--lk-sunken) !important;
  color: var(--lk-ink-2) !important;
}
.api-alert.info *,
.api-alert.success * { color: var(--lk-ink-2) !important; }
.api-alert a,
.api-alert.info a { color: var(--lk-brand-text) !important; }
.api-alert.warning {
  border: 1px solid #FEDF89 !important;
  border-radius: 10px !important;
  background: var(--lk-warn-bg) !important;
  color: var(--lk-warn-text) !important;
}
.api-alert.warning * { color: var(--lk-warn-text) !important; }

.api-key-card,
.api-key-card:hover {
  margin-top: 12px;
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
  transform: none !important;
}
.api-key-card-header { border-bottom-color: var(--lk-line) !important; background: transparent !important; }
.api-key-card-icon,
.api-key-field-icon {
  border-radius: 10px !important;
  background: var(--lk-sunken) !important;
  background-image: none !important;
  color: var(--lk-ink-2) !important;
  box-shadow: none !important;
}
.api-key-card-name { color: var(--lk-ink-strong) !important; font-size: 15px !important; font-weight: 600 !important; }
.api-key-card-date { color: var(--lk-muted) !important; font-size: 12.5px !important; }
.api-key-status-badge {
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.api-key-status-badge.active { background: var(--lk-mint-soft) !important; color: var(--lk-ok-text) !important; }
.api-key-status-badge.inactive { background: var(--lk-sunken) !important; color: var(--lk-ink-2) !important; }
.api-key-field {
  border: 1px solid var(--lk-line) !important;
  border-radius: 10px !important;
  background: #FAFBFC !important;
}
.api-key-field-label { color: var(--lk-muted) !important; font-size: 12.5px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; }
.api-key-field-value { color: var(--lk-ink-strong) !important; overflow-wrap: anywhere; }
.api-key-copy-btn,
.api-secret-copy-btn,
.api-endpoint-copy,
.api-code-copy {
  min-width: 40px;
  min-height: 40px;
  border-radius: 8px !important;
  box-shadow: none !important;
  transform: none !important;
}
.api-key-copy-btn { border: 1px solid var(--lk-line-strong) !important; background: var(--lk-surface) !important; color: var(--lk-ink-2) !important; }
.api-key-rate-limit-item { color: var(--lk-ink-2) !important; font-size: 13px !important; }
.api-key-rate-limit-item i { color: var(--lk-muted) !important; }
.api-key-card-actions { flex-wrap: wrap; gap: 8px !important; border-top-color: var(--lk-line) !important; background: transparent !important; }
.api-key-action-btn {
  min-height: 40px !important;
  padding: 0 14px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
  color: var(--lk-ink-2) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  transform: none !important;
}
.api-key-action-btn:hover,
.api-key-action-btn.edit:hover,
.api-key-action-btn.toggle:hover,
.api-key-action-btn.regenerate:hover {
  border-color: var(--lk-line-strong) !important;
  background: var(--lk-sunken) !important;
  color: var(--lk-ink-strong) !important;
}
.api-key-action-btn.delete { color: var(--lk-danger-text) !important; }
.api-key-action-btn.delete:hover { background: var(--lk-danger-bg) !important; color: var(--lk-danger-text) !important; }

/* Hộp thoại tạo / sửa API key */
.api-modal-backdrop { background: rgba(16, 24, 40, .5) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.api-modal-dialog { border: 1px solid var(--lk-line) !important; border-radius: 14px !important; box-shadow: var(--shadow-lg) !important; }
.api-modal-header { background: var(--lk-surface) !important; background-image: none !important; border-bottom: 1px solid var(--lk-line) !important; }
.api-modal-header h5 { color: var(--lk-ink-strong) !important; font-weight: 700 !important; }
.api-modal-header h5 i { color: var(--lk-muted) !important; }
.api-modal-close { width: 40px !important; height: 40px !important; border-radius: 10px !important; background: transparent !important; color: var(--lk-ink-2) !important; }
.api-modal-close:hover { background: var(--lk-sunken) !important; }
.api-modal-footer { background: var(--lk-surface) !important; border-top: 1px solid var(--lk-line) !important; }
.api-form-label { color: var(--lk-ink-2) !important; font-weight: 500 !important; }
.api-form-input {
  min-height: 44px;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
}
.api-form-input:focus { border-color: var(--lk-brand) !important; box-shadow: var(--ring-focus) !important; }
.api-form-hint { color: var(--lk-muted) !important; }
.api-secret-box { border: 1px solid #FEDF89 !important; border-radius: 10px !important; background: var(--lk-warn-bg) !important; }
.api-secret-warning { color: var(--lk-warn-text) !important; }

/* Tài liệu API (document-api.php) */
.api-sidebar,
.api-section-card {
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
}
.api-section-header { background: transparent !important; border-bottom-color: var(--lk-line) !important; }
.api-section-info h2 { color: var(--lk-ink-strong) !important; font-size: 18px !important; font-weight: 700 !important; }
.api-section-info p { color: var(--lk-muted) !important; }
.api-version-badge { border-radius: 6px !important; background: var(--lk-sunken) !important; background-image: none !important; color: var(--lk-ink-2) !important; box-shadow: none !important; }
.api-nav-link { min-height: 40px; border-radius: 8px !important; color: var(--lk-ink-2) !important; }
.api-nav-link:hover { background: var(--lk-sunken) !important; color: var(--lk-ink-strong) !important; }
.api-nav-link.active { background: var(--lk-brand-soft) !important; background-image: none !important; color: var(--lk-brand-text) !important; }
.api-sidebar-title,
.api-subsection-title { color: var(--lk-ink-strong) !important; }
.api-subsection-title i,
.api-info-label i { color: var(--lk-muted) !important; }
/* Phương thức HTTP: chữ đậm trên nền nhạt thay cho khối màu đặc */
.api-nav-method,
.api-method {
  border-radius: 6px !important;
  background: var(--lk-brand-soft) !important;
  color: var(--lk-brand-text) !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
}
.api-nav-method.post,
.api-method.post { background: var(--lk-mint-soft) !important; color: var(--lk-ok-text) !important; }
.api-method.put { background: var(--lk-warn-bg) !important; color: var(--lk-warn-text) !important; }
.api-method.delete { background: var(--lk-danger-bg) !important; color: var(--lk-danger-text) !important; }
.api-method.patch { background: var(--lk-sunken) !important; color: var(--lk-ink-2) !important; }
.param-required.yes { background: var(--lk-danger-bg) !important; color: var(--lk-danger-text) !important; }
.param-required.no { background: var(--lk-sunken) !important; color: var(--lk-ink-2) !important; }
.api-code-tab.active { background: var(--lk-brand-soft) !important; background-image: none !important; color: var(--lk-brand-text) !important; box-shadow: none !important; }
/* Đầu trang tài liệu: bỏ dải gradient xanh, tiêu đề nằm thẳng trên nền */
.api-page-header {
  padding: 28px 0 8px !important;
  background: transparent !important;
  background-image: none !important;
}
/* Nhãn GET/POST ở đầu mỗi endpoint: nền nhạt như .api-method, chữ 700 */
.api-method-badge {
  border-radius: 6px !important;
  background: var(--lk-brand-soft) !important;
  color: var(--lk-brand-text) !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
}
.api-method-badge.post { background: var(--lk-mint-soft) !important; color: var(--lk-ok-text) !important; }
.api-method-badge.put { background: var(--lk-warn-bg) !important; color: var(--lk-warn-text) !important; }
.api-method-badge.delete { background: var(--lk-danger-bg) !important; color: var(--lk-danger-text) !important; }
.api-method-badge.patch { background: var(--lk-sunken) !important; color: var(--lk-ink-2) !important; }
/* Bảng tham số: tiêu đề cột chữ thường, mã trong bảng ≥ 12px */
.api-params-table th,
.api-plans-table th {
  color: var(--lk-muted) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.api-params-table code,
.api-plans-table code,
.api-response-list code,
.api-alert code,
.api-section-body td code { font-size: 12.5px !important; }
.api-code-copy { font-size: 12.5px !important; font-weight: 500 !important; }
/* Màu cú pháp JSON: bỏ hồng, true/false cùng màu với khoá */
.json-boolean { color: #93C5FD !important; }
/* Nút copy chỉ có icon (Base URL) */
.api-section-body .btn-outline-primary.btn-sm:has(> i:only-child) {
  min-width: 40px;
  min-height: 40px;
  border-radius: 8px !important;
}

@media (max-width: 575.98px) {
  .api-keys-title,
  .api-page-title { font-size: 20px !important; }
  .api-stats-grid { gap: 8px !important; }
  .api-stat-card,
  .api-stat-card:hover { flex-direction: column; align-items: flex-start !important; gap: 4px !important; padding: 10px 12px !important; }
  .api-stat-icon { display: none !important; }
  .api-stat-info h3 { font-size: 16px !important; }
  .api-stat-info p { font-size: 12px !important; line-height: 1.35; }
  .api-create-btn { width: 100%; justify-content: center; }
  .api-key-card-actions .api-key-action-btn { flex: 1 1 calc(50% - 4px); justify-content: center; }
  .api-form-input { font-size: 16px !important; }
}

/* ---------- 40.7 Giới thiệu bạn bè (affiliates, lịch sử, rút tiền) -------- */
.affiliate-page { background: transparent !important; }
.affiliate-page-header { margin-bottom: 16px !important; }
.affiliate-page-title {
  color: var(--lk-ink-strong) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}
.affiliate-page-title i { color: var(--lk-brand-text) !important; }
.affiliate-page-subtitle { color: var(--lk-muted) !important; font-size: 14px !important; }

/* Ô số dư: thẻ trắng + con số lớn (trước là khối xanh đặc, quầng sáng, ô kính mờ) */
.affiliate-balance-card,
.affiliate-balance-card[style] {
  overflow: hidden;
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: var(--lk-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--lk-ink) !important;
}
.affiliate-balance-card { padding: 20px !important; margin-bottom: 16px !important; }
.affiliate-balance-card::before,
.affiliate-balance-card::after { content: none !important; display: none !important; }
.affiliate-balance-header { flex-wrap: wrap; gap: 10px; }
.affiliate-balance-label {
  color: var(--lk-muted) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.affiliate-balance-label i { color: var(--lk-muted) !important; }
.affiliate-balance-value {
  margin: 4px 0 12px !important;
  color: var(--lk-ink-strong) !important;
  font-family: var(--font-sans) !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -.01em !important;
  font-variant-numeric: tabular-nums;
  text-shadow: none !important;
}
.affiliate-action-btn,
.affiliate-balance-btn,
.affiliate-breakdown-btn,
.affiliate-quick-link,
.affiliate-balance-card .affiliate-quick-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px !important;
  padding: 0 16px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: var(--lk-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--lk-ink-strong) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
  filter: none !important;
  transition: background-color .15s ease, color .15s ease !important;
}
.affiliate-action-btn i,
.affiliate-breakdown-btn i,
.affiliate-balance-card .affiliate-quick-link i { color: inherit !important; }
.affiliate-action-btn:hover,
.affiliate-balance-btn:hover,
.affiliate-breakdown-btn:hover,
.affiliate-balance-card .affiliate-quick-link:hover { background: var(--lk-sunken) !important; color: var(--lk-ink-strong) !important; }
.affiliate-action-btn.primary,
.affiliate-breakdown-btn.filled {
  border-color: var(--lk-brand) !important;
  background: var(--lk-brand) !important;
  color: var(--lk-on-brand, #FFFFFF) !important;
}
.affiliate-action-btn.primary:hover,
.affiliate-breakdown-btn.filled:hover {
  border-color: var(--lk-brand-text) !important;
  background: var(--lk-brand-hover, var(--lk-brand-text)) !important;
  color: var(--lk-on-brand, #FFFFFF) !important;
}
.affiliate-rate-badges { gap: 6px !important; }
.affiliate-rate-badge {
  padding: 3px 8px !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 6px !important;
  background: var(--lk-sunken) !important;
  color: var(--lk-ink-2) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  backdrop-filter: none !important;
}
.affiliate-rate-badge i { color: var(--lk-muted) !important; }
.affiliate-mini-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 16px;
}
.affiliate-mini-stat {
  padding: 12px 14px !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 10px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.affiliate-mini-stat-value {
  color: var(--lk-ink-strong) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
}
.affiliate-mini-stat-label { color: var(--lk-muted) !important; font-size: 13px !important; font-weight: 500 !important; opacity: 1 !important; }

/* Các thẻ còn lại */
.affiliate-link-card,
.affiliate-progress-card,
.affiliate-breakdown-card,
.affiliate-table-card,
.affiliate-withdraw-card,
.affiliate-stat-card,
.affiliate-stat-card.success,
.affiliate-stat-card.info,
.affiliate-stat-card.warning,
.affiliate-stat-card.primary {
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: var(--lk-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}
.affiliate-two-col { gap: 16px !important; }
.affiliate-col-left,
.affiliate-col-right { gap: 16px !important; }
.affiliate-link-title,
.affiliate-breakdown-title,
.affiliate-table-title,
.affiliate-withdraw-title,
.affiliate-note-title {
  color: var(--lk-ink-strong) !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
}
.affiliate-link-title i,
.affiliate-breakdown-title i,
.affiliate-table-title i,
.affiliate-withdraw-title i,
.affiliate-note-title i { color: var(--lk-muted) !important; }
.affiliate-link-input-wrapper { gap: 8px !important; }
.affiliate-link-input {
  min-height: 44px;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: var(--lk-sunken) !important;
  color: var(--lk-ink-strong) !important;
  box-shadow: none !important;
}
.affiliate-copy-btn {
  min-width: 44px;
  min-height: 44px;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--lk-brand) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--lk-on-brand, #FFFFFF) !important;
  filter: none !important;
}
.affiliate-copy-btn:hover { background: var(--lk-brand-hover, var(--lk-brand-text)) !important; }
/* Nút chia sẻ: một kiểu trung tính (không màu thương hiệu, không nhún) */
.affiliate-social-share { gap: 8px !important; }
.affiliate-social-btn,
.affiliate-social-btn.facebook,
.affiliate-social-btn.twitter,
.affiliate-social-btn.telegram,
.affiliate-social-btn.whatsapp {
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
  color: var(--lk-ink-2) !important;
  transform: none !important;
}
.affiliate-social-btn:hover { background: var(--lk-sunken) !important; color: var(--lk-ink-strong) !important; transform: none !important; }
.affiliate-social-btn i { color: inherit !important; }

.affiliate-progress-header { color: var(--lk-ink-strong) !important; font-weight: 600 !important; }
.affiliate-progress-bar {
  height: 6px !important;
  border-radius: 99px !important;
  background: var(--lk-line) !important;
  box-shadow: none !important;
}
.affiliate-progress-fill {
  border-radius: inherit !important;
  background: var(--lk-brand) !important;
  background-image: none !important;
  box-shadow: none !important;
}
.affiliate-progress-labels { color: var(--lk-muted) !important; font-size: 12.5px !important; }
.affiliate-progress-note,
.affiliate-progress-note strong {
  border-radius: 8px !important;
  background: var(--lk-sunken) !important;
  color: var(--lk-ink-2) !important;
}
.affiliate-progress-note strong { background: none !important; color: var(--lk-ink-strong) !important; }
.affiliate-progress-note i { color: var(--lk-muted) !important; }
.affiliate-note-box {
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: var(--lk-sunken) !important;
  background-image: none !important;
  box-shadow: none !important;
}
.affiliate-note-content,
.affiliate-note-content * { color: var(--lk-ink-2) !important; }
.affiliate-breakdown-row { border-bottom-color: var(--lk-line) !important; }
.affiliate-breakdown-label,
.affiliate-breakdown-label[style] { color: var(--lk-ink-2) !important; }
/* Các dòng hoa hồng: số liệu, không phải trạng thái -> cùng một màu chữ */
.affiliate-breakdown-value,
.affiliate-breakdown-value.success,
.affiliate-breakdown-value.info,
.affiliate-breakdown-value.warning,
.affiliate-breakdown-value.primary {
  color: var(--lk-ink-strong) !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
}
.affiliate-breakdown-actions { gap: 8px !important; }

/* Lịch sử: 4 ô số liệu, bỏ gạch màu trên đầu */
.affiliate-stats-grid { gap: 12px !important; margin-bottom: 16px !important; }
.affiliate-stat-card { padding: 14px 16px !important; border-top-width: 1px !important; }
.affiliate-stat-icon,
.affiliate-stat-card .affiliate-stat-icon,
.affiliate-stat-card.success .affiliate-stat-icon,
.affiliate-stat-card.info .affiliate-stat-icon,
.affiliate-stat-card.warning .affiliate-stat-icon,
.affiliate-stat-card.primary .affiliate-stat-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: var(--lk-sunken) !important;
  background-image: none !important;
  color: var(--lk-ink-2) !important;
  font-size: 15px !important;
}
.affiliate-stat-value {
  color: var(--lk-ink-strong) !important;
  font-family: var(--font-sans) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}
.affiliate-stat-label { color: var(--lk-muted) !important; font-size: 13px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; }
.affiliate-balance-card .affiliate-quick-links { gap: 8px !important; }

/* Bảng + bộ lọc */
.affiliate-table-header { background: transparent !important; border-bottom: 1px solid var(--lk-line) !important; }
.affiliate-table-badge {
  padding: 2px 8px !important;
  border-radius: 6px !important;
  background: var(--lk-sunken) !important;
  background-image: none !important;
  color: var(--lk-ink-2) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.affiliate-filter-row { gap: 8px !important; }
.affiliate-filter-select,
.affiliate-filter-input,
.affiliate-form-select,
.affiliate-withdraw-body .form-control,
.affiliate-withdraw-body input[type="text"],
.affiliate-withdraw-body input[type="number"] {
  min-height: 44px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background-color: var(--lk-surface) !important;
  box-shadow: none !important;
  color: var(--lk-ink-strong) !important;
}
.affiliate-filter-select:focus,
.affiliate-filter-input:focus,
.affiliate-form-select:focus { border-color: var(--lk-brand) !important; box-shadow: var(--ring-focus) !important; }
.affiliate-filter-buttons { gap: 8px !important; }
.affiliate-filter-btn {
  min-width: 44px;
  min-height: 44px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: var(--lk-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--lk-ink-2) !important;
  filter: none !important;
}
.affiliate-filter-btn:hover { background: var(--lk-sunken) !important; color: var(--lk-ink-strong) !important; }
.affiliate-filter-btn.primary { border-color: var(--lk-brand) !important; background: var(--lk-brand) !important; color: var(--lk-on-brand, #FFFFFF) !important; }
.affiliate-filter-btn.primary:hover { background: var(--lk-brand-hover, var(--lk-brand-text)) !important; color: var(--lk-on-brand, #FFFFFF) !important; }
.affiliate-table thead th {
  background: var(--lk-sunken) !important;
  color: var(--lk-muted) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.affiliate-table tbody td { border-bottom-color: var(--lk-line) !important; color: var(--lk-ink) !important; }
.affiliate-trans-badge,
.affiliate-commission-badge,
.affiliate-type-badge,
.affiliate-type-badge.recharge,
.affiliate-type-badge.order,
.affiliate-type-badge.withdraw,
.affiliate-type-badge.refund,
.affiliate-type-badge.signup {
  padding: 2px 8px !important;
  border-radius: 6px !important;
  background: var(--lk-sunken) !important;
  background-image: none !important;
  color: var(--lk-ink-2) !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.affiliate-status-badge { padding: 2px 8px !important; border-radius: 6px !important; font-size: 12px !important; font-weight: 600 !important; }
.affiliate-status-badge.pending { background: var(--lk-warn-bg) !important; color: var(--lk-warn-text) !important; }
.affiliate-status-badge.completed { background: var(--lk-mint-soft) !important; color: var(--lk-ok-text) !important; }
.affiliate-status-badge.cancel { background: var(--lk-danger-bg) !important; color: var(--lk-danger-text) !important; }
.affiliate-amount { font-weight: 600 !important; font-variant-numeric: tabular-nums; }
.affiliate-amount.positive { color: var(--lk-ok-text) !important; }
.affiliate-amount.negative { color: var(--lk-danger-text) !important; }
.affiliate-amount-muted { color: var(--lk-muted) !important; }
.affiliate-user-avatar { background: var(--lk-sunken) !important; background-image: none !important; color: var(--lk-ink-2) !important; box-shadow: none !important; font-weight: 700 !important; }
/* modern-client.css cho mọi .pagination một bóng đổ */
.affiliate-pagination,
.inner-section:has(.client-sidebar) .pagination { box-shadow: none !important; }
.affiliate-user-name { color: var(--lk-ink-strong) !important; }
.affiliate-table-empty-icon { background: var(--lk-sunken) !important; background-image: none !important; color: var(--lk-muted) !important; }
.affiliate-table-empty h4,
.affiliate-table-empty h5 { color: var(--lk-ink-strong) !important; font-weight: 600 !important; }
.affiliate-table-empty p { color: var(--lk-muted) !important; }
.affiliate-pagination-select { min-height: 40px; border: 1px solid var(--lk-line-strong) !important; border-radius: 10px !important; }

/* Rút tiền */
.affiliate-withdraw-header { background: transparent !important; border-bottom: 1px solid var(--lk-line) !important; }
.affiliate-form-label { color: var(--lk-ink-2) !important; font-size: 13.5px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; }
.affiliate-form-label i { color: var(--lk-muted) !important; }
.affiliate-form-hint { color: var(--lk-muted) !important; }
.affiliate-submit-btn,
#btnWithdraw {
  min-height: 44px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--lk-brand) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--lk-on-brand, #FFFFFF) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  filter: none !important;
  transform: none !important;
}
.affiliate-submit-btn:hover { background: var(--lk-brand-hover, var(--lk-brand-text)) !important; }
.affiliate-submit-btn:disabled { background: var(--lk-line-strong) !important; opacity: 1 !important; }
.affiliate-withdraw-info {
  border: 1px solid var(--lk-line) !important;
  border-radius: 10px !important;
  background: var(--lk-sunken) !important;
  background-image: none !important;
}
.affiliate-withdraw-info i { color: var(--lk-muted) !important; }
.affiliate-withdraw-info-text,
.affiliate-withdraw-info-text strong,
.affiliate-withdraw-info ul li { color: var(--lk-ink-2) !important; }
.affiliate-withdraw-info-text strong { color: var(--lk-ink-strong) !important; }

@media (max-width: 767.98px) {
  .affiliate-page-title { font-size: 20px !important; }
  .affiliate-balance-card { padding: 16px !important; }
  .affiliate-balance-value { font-size: 28px !important; }
  .affiliate-balance-btns { width: 100%; gap: 8px !important; }
  .affiliate-balance-btns .affiliate-action-btn { flex: 1 1 0; min-height: 44px !important; }
  .affiliate-mini-stats { gap: 8px !important; }
  .affiliate-mini-stat { padding: 10px !important; }
  .affiliate-mini-stat-value { font-size: 15px !important; }
  .affiliate-mini-stat-label { font-size: 12px !important; }
  .affiliate-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .affiliate-stat-card { padding: 12px !important; }
  .affiliate-stat-icon { display: none !important; }
  .affiliate-stat-value { font-size: 16px !important; }
  /* Số dư: nhãn -> con số -> số liệu, hai nút xuống cuối thẻ */
  .affiliate-balance-content { display: flex !important; flex-direction: column; }
  .affiliate-balance-header { display: contents !important; }
  .affiliate-balance-btns { order: 5; margin-top: 14px; }
  /* Bộ lọc: hai ô chọn chung một hàng, ô chọn ngày và hàng nút chiếm trọn bề ngang */
  .affiliate-filter-row { display: flex !important; flex-wrap: wrap !important; }
  .affiliate-filter-row > .affiliate-filter-group { flex: 1 1 120px !important; min-width: 0; }
  .affiliate-filter-row > .flex-2,
  .affiliate-filter-row > .affiliate-filter-buttons { flex: 1 1 100% !important; }
  .affiliate-filter-buttons { display: flex !important; }
  .affiliate-filter-buttons .affiliate-filter-btn { flex: 1 1 0; }
  .affiliate-filter-select,
  .affiliate-filter-input,
  .affiliate-form-select,
  .affiliate-link-input,
  .affiliate-withdraw-body input { font-size: 16px !important; }
  /* Bảng rộng: cuộn ngang gọn trong thẻ, trang không tràn */
  .affiliate-table-wrapper { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .affiliate-table { min-width: 520px !important; }
  .affiliate-table thead th,
  .affiliate-table tbody td { white-space: nowrap; }
  /* Bảng trống: không ép bề rộng, để lời nhắn nằm giữa thẻ */
  .affiliate-table:has(.affiliate-table-empty) { min-width: 0 !important; }
  .affiliate-table:has(.affiliate-table-empty) thead { display: none !important; }
  .affiliate-table .affiliate-table-empty,
  .affiliate-table .affiliate-table-empty * { white-space: normal !important; }
}
.affiliate-filter-btn { display: inline-flex !important; align-items: center; justify-content: center; }

/* ---------- 40.8 Yêu cầu hỗ trợ: danh sách + chi tiết ticket --------------- */
/* Tiêu đề trang lên trước 4 ô số liệu (markup đặt ô số liệu trước) */
.support-tickets-page .row.content-reverse > .col-lg-9 { display: flex; flex-direction: column; }
.support-tickets-page .ticket-card-header { order: -1; }
.ticket-card-header {
  flex-wrap: wrap;
  gap: 12px !important;
  padding: 0 !important;
  margin-bottom: 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.ticket-header-info { gap: 12px !important; min-width: 0; }
.btn-create-ticket {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: 44px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--lk-brand) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--lk-on-brand, #FFFFFF) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  filter: none !important;
  transform: none !important;
}
.btn-create-ticket:hover { background: var(--lk-brand-hover, var(--lk-brand-text)) !important; color: var(--lk-on-brand, #FFFFFF) !important; }

.ticket-stats-wrapper {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}
.ticket-stat-card,
.ticket-stat-card:hover {
  gap: 12px !important;
  padding: 14px 16px !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
  transform: none !important;
}
.ticket-stat-card { transition: none !important; }
.ticket-stat-icon,
.stat-total .ticket-stat-icon,
.stat-open .ticket-stat-icon,
.stat-pending .ticket-stat-icon,
.stat-answered .ticket-stat-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  background: var(--lk-sunken) !important;
  background-image: none !important;
  color: var(--lk-ink-2) !important;
  font-size: 16px !important;
}
.ticket-stat-content h3 {
  margin: 0 !important;
  color: var(--lk-ink-strong) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
}
.ticket-stat-content p { margin: 0 !important; color: var(--lk-muted) !important; font-size: 13px !important; }

/* Bộ lọc */
.ticket-filter-section {
  padding: 16px !important;
  margin-bottom: 12px !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
}
.ticket-filter-grid { gap: 12px !important; }
.ticket-filter-group label {
  margin-bottom: 6px !important;
  color: var(--lk-ink-2) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.ticket-filter-group .form-control,
.ticket-filter-group .form-select,
.ticket-filter-group input.flatpickr-input + input {
  min-height: 44px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background-color: var(--lk-surface) !important;
  box-shadow: none !important;
  color: var(--lk-ink-strong) !important;
  font-size: 14px !important;
}
.ticket-filter-actions { gap: 8px !important; }
.ticket-filter-actions .btn-filter-search,
.ticket-filter-actions .btn-filter-reset { min-height: 44px !important; padding: 0 16px !important; font-size: 14px !important; }

/* Bảng ticket */
.ticket-table-wrapper {
  overflow-x: auto !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
}
.ticket-table thead th {
  border-bottom: 1px solid var(--lk-line) !important;
  background: var(--lk-sunken) !important;
  color: var(--lk-muted) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.ticket-table tbody td { border-bottom-color: var(--lk-line) !important; color: var(--lk-ink) !important; }
.ticket-table tbody tr:hover td { background: #FAFBFC !important; }
.btn-view-ticket {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  min-height: 36px;
  padding: 0 12px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 8px !important;
  background: var(--lk-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--lk-brand-text) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.btn-view-ticket:hover { background: var(--lk-brand-soft) !important; }
.ticket-subject-link { color: var(--lk-ink-strong) !important; font-weight: 600 !important; }
.ticket-subject-link:hover { color: var(--lk-brand-text) !important; }
.ticket-category,
.subject-category {
  padding: 2px 8px !important;
  border-radius: 6px !important;
  background: var(--lk-sunken) !important;
  color: var(--lk-ink-2) !important;
  font-size: 12.5px !important;
}
.ticket-category i,
.subject-category i { color: var(--lk-muted) !important; }
.ticket-date { color: var(--lk-ink-2) !important; font-family: var(--font-sans) !important; font-size: 13px !important; font-variant-numeric: tabular-nums; }
/* Trạng thái: mở = xanh nhấn, chờ = cam, đã trả lời = xanh lá, đã đóng = xám */
.ticket-status,
.ticket-status-pill {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  white-space: nowrap;
}
.ticket-status.status-open,
.ticket-status-pill.status-open { background: var(--lk-brand-soft) !important; color: var(--lk-brand-text) !important; }
.ticket-status.status-pending,
.ticket-status-pill.status-pending { background: var(--lk-warn-bg) !important; color: var(--lk-warn-text) !important; }
.ticket-status.status-answered,
.ticket-status-pill.status-answered { background: var(--lk-mint-soft) !important; color: var(--lk-ok-text) !important; }
.ticket-status.status-closed,
.ticket-status-pill.status-closed { background: var(--lk-sunken) !important; color: var(--lk-ink-2) !important; }
.ticket-table .skeleton-cell { background: var(--lk-sunken) !important; background-image: none !important; animation: none !important; }
.ticket-empty-state { padding: 40px 16px !important; }
.ticket-empty-icon {
  width: 56px !important;
  height: 56px !important;
  background: var(--lk-sunken) !important;
  background-image: none !important;
  color: var(--lk-muted) !important;
  font-size: 22px !important;
}
.ticket-empty-state h4 { color: var(--lk-ink-strong) !important; font-size: 16px !important; font-weight: 600 !important; }
.ticket-empty-state p { color: var(--lk-muted) !important; font-size: 14px !important; }
/* Trống: ẩn bảng (chỉ còn dòng tiêu đề cột) */
.ticket-table-wrapper:has(> .ticket-empty-state[style*="block"]) > .ticket-table { display: none !important; }
.ticket-table-wrapper .load-more-wrapper { border-top: 1px solid var(--lk-line); }

/* Hộp thoại tạo ticket */
.ticket-modal-overlay::before,
.ticket-modal-overlay {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.ticket-modal-overlay::before { background: rgba(16, 24, 40, .5) !important; }
.ticket-modal-content {
  border: 1px solid var(--lk-line) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-lg) !important;
}
.ticket-modal-header {
  border-bottom: 1px solid var(--lk-line) !important;
  background: var(--lk-surface) !important;
  background-image: none !important;
}
.ticket-modal-title { color: var(--lk-ink-strong) !important; font-weight: 700 !important; }
.ticket-modal-title i { color: var(--lk-muted) !important; }
.ticket-modal-close {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--lk-ink-2) !important;
}
.ticket-modal-close:hover { background: var(--lk-sunken) !important; }
.ticket-form-label { color: var(--lk-ink-2) !important; font-weight: 500 !important; }
.ticket-form-control {
  min-height: 44px;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
}
.ticket-form-control:focus { border-color: var(--lk-brand) !important; box-shadow: var(--ring-focus) !important; }
.ticket-modal-footer { background: var(--lk-surface) !important; border-top: 1px solid var(--lk-line) !important; }
.btn-submit-ticket,
#submitTicket {
  min-height: 44px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--lk-brand) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--lk-on-brand, #FFFFFF) !important;
  font-weight: 600 !important;
  filter: none !important;
}
.btn-submit-ticket:hover { background: var(--lk-brand-hover, var(--lk-brand-text)) !important; }
.btn-modal-cancel {
  min-height: 44px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: var(--lk-surface) !important;
  color: var(--lk-ink-strong) !important;
  font-weight: 600 !important;
}
.btn-modal-cancel:hover { background: var(--lk-sunken) !important; }

/* Chi tiết ticket: khung chat phẳng, bong bóng của khách nền xanh nhạt chữ đậm */
.ticket-chat-wrapper,
.ticket-sidebar-card {
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
}
.ticket-chat-header,
.ticket-sidebar-header,
.ticket-chat-footer {
  border-color: var(--lk-line) !important;
  background: var(--lk-surface) !important;
}
.ticket-chat-header h5 { color: var(--lk-ink-strong) !important; font-size: 16px !important; font-weight: 700 !important; }
.ticket-chat-header h5 i { color: var(--lk-muted) !important; }
.btn-back-tickets {
  min-height: 40px;
  padding: 0 14px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: var(--lk-surface) !important;
  color: var(--lk-ink-2) !important;
  font-size: 13.5px !important;
}
.btn-back-tickets:hover { background: var(--lk-sunken) !important; color: var(--lk-ink-strong) !important; }
.chat-message { animation: none !important; }
.chat-avatar { border: 1px solid var(--lk-line); background: var(--lk-sunken) !important; }
.chat-avatar-admin,
.chat-message .chat-avatar-admin {
  border: 1px solid var(--lk-line);
  background: var(--lk-sunken) !important;
  background-image: none !important;
  color: var(--lk-ink-2) !important;
  box-shadow: none !important;
}
.chat-bubble-meta { color: var(--lk-muted) !important; font-size: 12px !important; }
.chat-sender { color: var(--lk-ink-strong) !important; font-weight: 600 !important; }
.chat-time { color: var(--lk-muted) !important; }
.chat-bubble-content,
.chat-message.is-admin .chat-bubble-content {
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: var(--lk-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--lk-ink) !important;
  font-size: 14.5px !important;
}
.chat-message.is-admin .chat-bubble-content { border-top-left-radius: 4px !important; background: var(--lk-sunken) !important; border-color: transparent !important; }
.chat-message.is-user .chat-bubble-content {
  border-color: var(--lk-brand-soft-2) !important;
  border-bottom-right-radius: 4px !important;
  background: var(--lk-brand-soft) !important;
  color: var(--lk-ink-strong) !important;
}
.chat-message.is-user .chat-bubble-content a { color: var(--lk-brand-text) !important; }
.chat-waiting-state { color: var(--lk-muted) !important; }
.waiting-animation {
  width: 56px !important;
  height: 56px !important;
  background: var(--lk-sunken) !important;
  background-image: none !important;
  color: var(--lk-muted) !important;
  font-size: 22px !important;
  animation: none !important;
}
.waiting-hint {
  border-radius: 8px !important;
  background: var(--lk-sunken) !important;
  color: var(--lk-ink-2) !important;
}
.chat-input-wrapper textarea {
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
  font-size: 14.5px !important;
}
.chat-input-wrapper textarea:focus { border-color: var(--lk-brand) !important; box-shadow: var(--ring-focus) !important; }
.btn-send-message {
  border-radius: 10px !important;
  background: var(--lk-brand) !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}
.btn-send-message:hover { background: var(--lk-brand-hover, var(--lk-brand-text)) !important; }
.chat-shortcut-hint,
.ticket-close-hint { color: var(--lk-muted) !important; font-size: 12.5px !important; }
.ticket-sidebar-id { color: var(--lk-ink-2) !important; font-family: var(--font-sans) !important; }
.subject-title { color: var(--lk-ink-strong) !important; font-weight: 600 !important; }
.sidebar-info-item { border-bottom: 1px solid var(--lk-line) !important; }
.sidebar-info-item:last-child { border-bottom: 0 !important; }
.info-icon {
  background: var(--lk-sunken) !important;
  background-image: none !important;
  color: var(--lk-ink-2) !important;
}
.info-label { color: var(--lk-muted) !important; font-size: 12.5px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; }
.info-value { color: var(--lk-ink-strong) !important; font-weight: 500 !important; }
.sidebar-action-btn {
  min-height: 44px;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: var(--lk-surface) !important;
  background-image: none !important;
  color: var(--lk-ink-strong) !important;
}
.sidebar-action-btn:hover { background: var(--lk-sunken) !important; color: var(--lk-ink-strong) !important; }
.sidebar-action-btn.btn-close-ticket { color: var(--lk-danger-text) !important; }
.sidebar-action-btn.btn-close-ticket:hover { background: var(--lk-danger-bg) !important; color: var(--lk-danger-text) !important; }

@media (max-width: 767.98px) {
  .ticket-stats-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .ticket-stat-card,
  .ticket-stat-card:hover { padding: 10px 12px !important; }
  .ticket-stat-icon { display: none !important; }
  .ticket-stat-content h3 { font-size: 16px !important; }
  .ticket-card-header .btn-create-ticket { width: 100%; justify-content: center; }
  .ticket-filter-section { padding: 12px !important; }
  .ticket-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .ticket-filter-grid > .ticket-filter-group:first-child,
  .ticket-filter-grid > .ticket-filter-actions,
  .ticket-filter-grid > .ticket-filter-group:nth-last-child(2):nth-child(even) { grid-column: 1 / -1; }
  .ticket-filter-group .form-control,
  .ticket-filter-group .form-select,
  .ticket-filter-group input.flatpickr-input + input,
  .ticket-form-control,
  .chat-input-wrapper textarea { font-size: 16px !important; }
  .ticket-filter-actions .btn-filter-search,
  .ticket-filter-actions .btn-filter-reset { flex: 1 1 0; }

  /* ticket.css ẩn bảng ở <=767px và chờ thẻ mobile_html mà JS không bao giờ vẽ
     -> danh sách trống trên điện thoại. Hiện lại bảng, mỗi dòng thành một khối:
     [tiêu đề ........ trạng thái] / [chủ đề · ngày tạo ...... Xem] */
  .ticket-table { display: block !important; width: 100%; }
  .ticket-table thead { display: none !important; }
  .ticket-table tbody:not(.tickets-loading-skeleton),
  .ticket-table tbody.tickets-loading-skeleton.is-loading { display: block; }
  .ticket-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--lk-line);
  }
  .ticket-table tbody tr:last-child { border-bottom: 0; }
  .ticket-table tbody td {
    display: block;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
  }
  .ticket-table tbody tr:hover td { background: transparent !important; }
  .ticket-table tbody td:nth-child(2) { order: 1; flex: 1 1 60%; min-width: 0; overflow-wrap: anywhere; }
  .ticket-table tbody td:nth-child(4) { order: 2; flex: none; }
  .ticket-table tbody td:nth-child(3) { order: 3; flex: none; }
  .ticket-table tbody td:nth-child(5) { order: 4; flex: 1 1 auto; }
  .ticket-table tbody td:nth-child(6) { display: none; }
  .ticket-table tbody td:nth-child(1) { order: 5; flex: none; margin-left: auto; }
  .ticket-table .skeleton-cell { max-width: 100%; }
  .ticket-card-mobile { display: none !important; }

  /* Chi tiết: khung chat không ép cao 540px, ô thông tin xuống dưới */
  .ticket-chat-wrapper { min-height: 0 !important; }
  .ticket-chat-messages { max-height: 60vh !important; padding: 14px !important; }
  .chat-bubble { max-width: 85% !important; }
  .chat-avatar,
  .chat-avatar-admin { width: 32px !important; height: 32px !important; }
  .ticket-detail-page .col-lg-4 { margin-top: 12px; }
}

/* ---------- 40.9 Nạp tiền (ngân hàng, thẻ cào) ----------------------------- */
.page-header-modern:has(+ .profile-part).page-header-compact { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; }
.page-header-modern:has(+ .profile-part)::before,
.page-header-modern:has(+ .profile-part)::after { content: none !important; }
.page-header-modern:has(+ .profile-part) .page-title-modern {
  color: var(--lk-ink-strong) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: -.015em !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
.page-header-modern:has(+ .profile-part) .page-title-modern i { color: var(--lk-brand-text) !important; font-size: .85em; }
.page-header-modern:has(+ .profile-part) .page-subtitle-modern { color: var(--lk-muted) !important; font-size: 14.5px !important; }
.page-header-modern:has(+ .profile-part) .breadcrumb-modern a { color: var(--lk-ink-2) !important; }
.page-header-modern:has(+ .profile-part) .breadcrumb-modern .current { color: var(--lk-ink-strong) !important; font-weight: 500 !important; }

/* Nhãn trường + chữ phụ */
.recharge-form .form-label,
.profile-part:not(.product-orders-page) .card-modern-body > .form-group > .form-label {
  color: var(--lk-ink-2) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
.recharge-form .form-label i { color: var(--lk-muted) !important; }
.recharge-form .form-info,
.recharge-form .form-info small { color: var(--lk-muted) !important; font-size: 13px !important; }
.recharge-form .form-info i { color: var(--lk-muted) !important; }
#amountLimits .text-danger { color: var(--lk-ink-strong) !important; }
.recharge-form .form-control,
.recharge-form .form-select,
.profile-part:not(.product-orders-page) .card-modern-body .form-control,
.profile-part:not(.product-orders-page) .card-modern-body .form-select {
  min-height: 44px;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background-color: var(--lk-surface) !important;
  box-shadow: none !important;
}

/* Chọn ví: thẻ chọn được, đang chọn = viền xanh + nền xanh nhạt */
.lk-wallet-option {
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 12px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
}
.lk-wallet-option:hover { border-color: var(--lk-brand) !important; }
.lk-wallet-option.is-active {
  border-color: var(--lk-brand) !important;
  background: var(--lk-brand-soft) !important;
  box-shadow: none !important;
}
.lk-wallet-option-icon,
.lk-wallet-option[data-wallet="esim_softbank"] .lk-wallet-option-icon {
  border-radius: 8px !important;
  background: var(--lk-sunken) !important;
  color: var(--lk-ink-2) !important;
}
.lk-wallet-option.is-active .lk-wallet-option-icon { background: var(--lk-surface) !important; color: var(--lk-brand-text) !important; }
.lk-wallet-option-name { font-weight: 600 !important; }
.lk-wallet-option-desc,
.lk-wallet-option-balance { color: var(--lk-muted) !important; }
.lk-wallet-option-balance strong { color: var(--lk-ink-strong) !important; font-weight: 600 !important; }

/* Ô số tiền + chip chọn nhanh */
.lk-amount-field .form-control { min-height: 48px !important; color: var(--lk-ink-strong) !important; font-weight: 600 !important; }
.lk-amount-suffix { color: var(--lk-muted) !important; }
.quick-amounts-grid { gap: 8px !important; }
.btn-quick-amount {
  min-height: 40px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 8px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
  color: var(--lk-ink-2) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transform: none !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease !important;
}
.btn-quick-amount:hover { border-color: var(--lk-brand) !important; color: var(--lk-ink-strong) !important; }
.btn-quick-amount.is-active,
.btn-quick-amount[aria-pressed="true"] {
  border-color: var(--lk-brand) !important;
  background: var(--lk-brand-soft) !important;
  color: var(--lk-brand-text) !important;
}
.lk-bank-static { border-color: var(--lk-line) !important; background: var(--lk-sunken) !important; }
.lk-bank-static i { color: var(--lk-muted) !important; }
/* Số tiền thực nhận: khối nền xám phẳng (bỏ gradient + viền đứt xanh) */
.received-amount-box-enhanced {
  padding: 14px 16px !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 10px !important;
  background: var(--lk-sunken) !important;
  background-image: none !important;
  box-shadow: none !important;
}
.received-amount-box-enhanced .label { color: var(--lk-ink-2) !important; font-size: 13.5px !important; font-weight: 500 !important; }
.received-amount-box-enhanced .label i { color: var(--lk-muted) !important; }
.received-amount-box-enhanced .value {
  color: var(--lk-ink-strong) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}
.create-invoice-btn-enhanced,
.wallet-form #submit,
.wallet-form .form-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 48px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--lk-brand) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--lk-on-brand, #FFFFFF) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  filter: none !important;
  transform: none !important;
  cursor: pointer;
}
.create-invoice-btn-enhanced:hover,
.wallet-form #submit:hover,
.wallet-form .form-btn:hover { background: var(--lk-brand-hover, var(--lk-brand-text)) !important; }
.create-invoice-btn-enhanced:disabled { background: var(--lk-line-strong) !important; opacity: 1 !important; }
.create-invoice-btn-enhanced i { color: inherit !important; }

/* Nút tìm / bỏ lọc / tạo hoá đơn mới (trước là viên thuốc gradient) */
.shop-widget-btn,
a.shop-widget-btn,
button.shop-widget-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 44px !important;
  padding: 0 14px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: var(--lk-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--lk-ink-strong) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transform: none !important;
}
.shop-widget-btn:hover { background: var(--lk-sunken) !important; color: var(--lk-ink-strong) !important; }
button.shop-widget-btn { border-color: var(--lk-brand) !important; background: var(--lk-brand) !important; color: var(--lk-on-brand, #FFFFFF) !important; }
button.shop-widget-btn:hover { background: var(--lk-brand-hover, var(--lk-brand-text)) !important; color: var(--lk-on-brand, #FFFFFF) !important; }
.shop-widget-btn i { color: inherit !important; }

/* Bảng khuyến mãi + lịch sử */
.profile-part:not(.product-orders-page) .table thead th {
  border-bottom: 1px solid var(--lk-line) !important;
  background: var(--lk-sunken) !important;
  color: var(--lk-muted) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.profile-part:not(.product-orders-page) .table td { border-color: var(--lk-line) !important; color: var(--lk-ink) !important; vertical-align: middle; }
.profile-part:not(.product-orders-page) .table td a { color: var(--lk-brand-text) !important; font-weight: 600; }
/* Màu viết thẳng trong HTML: chỉ giữ xanh lá cho phần cộng (+%), số tiền về màu chữ */
.profile-part:not(.product-orders-page) .table b[style*="blue"],
.profile-part:not(.product-orders-page) .table b[style*="red"],
.profile-part:not(.product-orders-page) .table b[style*="green"],
.profile-part:not(.product-orders-page) .table strong[style*="red"],
.profile-part:not(.product-orders-page) .table strong[style*="blue"],
.profile-part:not(.product-orders-page) #ketqua,
.profile-part:not(.product-orders-page) #ketqua[style] { color: var(--lk-ink-strong) !important; font-weight: 600 !important; }
/* bảng khuyến mãi: cột "+x%" là phần được cộng thêm */
.profile-part:not(.product-orders-page) .card-modern .table:not(.lk-stack-table) tbody td:nth-child(2) > b[style*="green"] { color: var(--lk-ok-text) !important; }
/* Huy hiệu trạng thái do display_invoice() / display_card() sinh ra */
.profile-part:not(.product-orders-page) .table .badge {
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.profile-part:not(.product-orders-page) .badge.bg-info { background: var(--lk-brand-soft) !important; color: var(--lk-brand-text) !important; }
.profile-part:not(.product-orders-page) .badge.bg-secondary { background: var(--lk-sunken) !important; color: var(--lk-ink-2) !important; }
.lk-history-empty i { color: var(--lk-muted) !important; font-size: 32px !important; }
.lk-history-empty h5 { color: var(--lk-ink-strong) !important; font-size: 15px !important; font-weight: 600 !important; }
.top-filter {
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 10px 12px !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 10px !important;
  background: var(--lk-surface) !important;
}
.top-filter .filter-label { color: var(--lk-ink-2) !important; font-size: 13.5px !important; font-weight: 500 !important; white-space: nowrap; margin: 0 !important; }
.top-filter .filter-select { min-height: 40px; width: auto; border: 1px solid var(--lk-line-strong) !important; border-radius: 8px !important; }
.bottom-paginate .page-info { color: var(--lk-muted) !important; font-size: 13.5px !important; margin: 0; }
.profile-part:not(.product-orders-page) .pagination { box-shadow: none !important; }
.bottom-paginate .pagination:not(:has(*)) { display: none !important; }
.profile-part:not(.product-orders-page) tfoot td { color: var(--lk-ink-2) !important; font-size: 13.5px !important; border: 0 !important; }
.profile-part:not(.product-orders-page) tfoot strong[style] { color: var(--lk-ink-strong) !important; }
.profile-part:not(.product-orders-page) .alert-warning {
  border: 1px solid #FEDF89 !important;
  border-radius: 10px !important;
  background: var(--lk-warn-bg) !important;
  color: var(--lk-warn-text) !important;
}
.profile-part:not(.product-orders-page) .alert-info {
  border: 1px solid var(--lk-line) !important;
  border-radius: 10px !important;
  background: var(--lk-sunken) !important;
  color: var(--lk-ink-2) !important;
}
.profile-part:not(.product-orders-page) .alert-info.bg-white { background: var(--lk-sunken) !important; }

/* Hoá đơn: khung QR phẳng, nhãn "chờ chuyển khoản" giữ chấm tĩnh (không nhấp nháy) */
.gaming-qr-wrapper { border-color: var(--lk-line) !important; border-radius: 12px !important; box-shadow: none !important; }
.gaming-qr-frame,
.gaming-qr-frame:hover {
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transform: none !important;
}
.qr-live-badge {
  padding: 4px 10px !important;
  border-radius: 6px !important;
  background: var(--lk-warn-bg) !important;
  color: var(--lk-warn-text) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.qr-live-dot {
  background: var(--lk-warn) !important;
  box-shadow: none !important;
  animation: none !important;
  transform: none !important;
}
.lk-qr-download.btn-dark,
.lk-result-btn.btn-dark {
  border: 1px solid var(--lk-line-strong) !important;
  background: var(--lk-surface) !important;
  color: var(--lk-ink-strong) !important;
  box-shadow: none !important;
}
.lk-qr-download.btn-dark:hover,
.lk-result-btn.btn-dark:hover { background: var(--lk-sunken) !important; }
.countdown-container {
  border: 1px solid var(--lk-line) !important;
  border-radius: 10px !important;
  background: var(--lk-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}
.countdown-container .countdown-item { background: var(--lk-sunken) !important; border-radius: 8px !important; box-shadow: none !important; }
.countdown-container .countdown-value { color: var(--lk-ink-strong) !important; font-weight: 700 !important; }
.countdown-container .countdown-label,
.countdown-container .countdown-separator { color: var(--lk-muted) !important; }
.countdown-container .countdown-label { font-size: 12px !important; font-weight: 500 !important; }
/* STK / tên / nội dung CK: 700 thay cho 800, màu chữ đậm thay cho xanh */
.bank-info-table code,
.lk-transfer-table code {
  color: var(--lk-ink-strong) !important;
  font-weight: 700 !important;
}
.lk-pay-amount { color: var(--lk-ink-strong) !important; font-weight: 700 !important; }
.lk-bank-name { color: var(--lk-ink-strong) !important; }
.lk-transfer-table code.lk-memo-code { background: var(--lk-brand-soft) !important; border-color: var(--lk-brand-soft-2) !important; color: var(--lk-ink-strong) !important; }
.payment-info-container .copy-btn.lk-copy-btn {
  border: 1px solid var(--lk-line-strong) !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
  color: var(--lk-brand-text) !important;
  font-weight: 600 !important;
}
.payment-info-container .copy-btn.lk-copy-btn:hover { border-color: var(--lk-line-strong) !important; background: var(--lk-brand-soft) !important; color: var(--lk-brand-text) !important; }
.payment-info-container .copy-btn.lk-copy-btn.is-copied,
.payment-info-container .copy-btn.lk-copy-btn.is-copied:hover { border-color: #ABEFC6 !important; background: var(--lk-mint-soft) !important; color: var(--lk-ok-text) !important; }
.lk-support-box { border-color: var(--lk-line) !important; background: var(--lk-sunken) !important; }
.lk-support-title i { color: var(--lk-muted) !important; }
.lk-support-btn { border-color: var(--lk-line-strong) !important; }
.lk-support-btn:hover { border-color: var(--lk-line-strong) !important; background: var(--lk-brand-soft) !important; }
/* Màn kết quả do JS chèn (style viết thẳng): khung phẳng, vòng tròn trạng thái nhỏ lại */
.completed-invoice-container[style],
.expired-invoice-container[style] {
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.completed-invoice-container [style*="50%"],
.expired-invoice-container [style*="50%"] {
  width: 64px !important;
  height: 64px !important;
  font-size: 28px !important;
}
.expired-invoice-container [style*="50%"] i[style] { font-size: 28px !important; }
.completed-invoice-container [style*="#dcfce7"] { background: var(--lk-mint-soft) !important; color: var(--lk-ok-text) !important; }
.completed-invoice-container [style*="#fef3c7"] { background: var(--lk-warn-bg) !important; color: var(--lk-warn-text) !important; }
.expired-invoice-container [style*="#fee2e2"] { background: var(--lk-danger-bg) !important; }
.expired-invoice-container [style*="#f1f5f9"] { background: var(--lk-sunken) !important; }
.completed-invoice-container .success-animation { display: none !important; }
.completed-invoice-container .badge[style],
.expired-invoice-container .badge[style] { padding: 4px 10px !important; border-radius: 6px !important; font-size: 13px !important; }
.completed-invoice-container .badge.bg-success { background: var(--lk-mint-soft) !important; color: var(--lk-ok-text) !important; }
.completed-invoice-container h3 { font-size: 20px !important; }
.completed-invoice-container h3.text-success { color: var(--lk-ok-text) !important; }

/* Thẻ cào: form nhãn trái / ô phải */
.profile-part:not(.product-orders-page) .col-form-label { color: var(--lk-ink-2) !important; font-size: 14px !important; font-weight: 600 !important; }
.profile-part:not(.product-orders-page) .iq-alert-text { color: var(--lk-ink-2) !important; }

/* Điện thoại: bảng lịch sử thành danh sách "nhãn — giá trị" (data-label trong PHP) */
@media (max-width: 767.98px) {
  .page-header-modern:has(+ .profile-part) .page-title-modern { font-size: 22px !important; }
  .profile-part:not(.product-orders-page) .form-control,
  .profile-part:not(.product-orders-page) .form-select,
  .recharge-form .form-control { font-size: 16px !important; }
  .lk-amount-field .form-control { font-size: 18px !important; }
  .quick-amounts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .top-filter { flex-direction: column; align-items: stretch !important; }
  .top-filter .filter-show,
  .top-filter .filter-short { display: flex !important; justify-content: space-between; }
  /* Bộ lọc lịch sử nạp ngân hàng: 5 ô col-6 -> ô mã giao dịch chiếm trọn hàng, 2 nút chung một hàng */
  .profile-part:not(.product-orders-page) form > .row > .col-6:has(> input[name="transid"]) { flex: 0 0 100%; max-width: 100%; }
  .table-scroll:has(> .lk-stack-table) { overflow: visible !important; }
  .lk-stack-table thead { display: none !important; }
  .lk-stack-table,
  .lk-stack-table tbody,
  .lk-stack-table tfoot,
  .lk-stack-table tr,
  .lk-stack-table td { display: block; width: 100%; }
  .lk-stack-table tbody tr {
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--lk-line);
    border-radius: 10px;
  }
  .lk-stack-table tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0 !important;
    border: 0 !important;
    text-align: right !important;
    overflow-wrap: anywhere;
  }
  .lk-stack-table tbody td[data-label]::before {
    content: attr(data-label);
    flex: none;
    max-width: 50%;
    color: var(--lk-muted);
    font-size: 12.5px;
    font-weight: 500;
    text-align: left;
  }
  .lk-stack-table tbody td[colspan] { display: block; text-align: center !important; }
  .lk-stack-table tbody tr:has(> td[colspan]) { border: 0; }
  .lk-stack-table tfoot td { padding: 8px 0 !important; }
  .lk-stack-table tfoot .float-right { float: none !important; line-height: 1.7; }
}

/* ---------- 40.10 Đăng nhập / đăng ký / quên mật khẩu --------------------- */
/* Một thẻ giữa trang, rộng tối đa 440px; ô nhập 44px, một nút chính đặc màu */
.profile-part:not(.product-orders-page) .user-form-card,
.user-form-part .user-form-card {
  width: 100%;
  max-width: 440px !important;
  margin-inline: auto !important;
  padding: 28px 24px !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: var(--lk-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}
.user-form-card::before,
.user-form-card::after { content: none !important; }
.user-form-title { margin-bottom: 20px !important; text-align: left; }
.user-form-title h2,
.user-form-title h3 {
  margin: 0 0 4px !important;
  color: var(--lk-ink-strong) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -.015em !important;
}
.user-form-title p { margin: 0 !important; color: var(--lk-muted) !important; font-size: 14px !important; }
.user-form .form-group { margin-bottom: 14px !important; }
.user-form .auth-field-label,
.user-form label:not(.agree-terms-label) {
  margin-bottom: 6px !important;
  color: var(--lk-ink-2) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}
.user-form .form-control {
  min-height: 44px !important;
  height: auto !important;
  padding: 10px 14px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
  color: var(--lk-ink-strong) !important;
  font-size: 15px !important;
}
.user-form .form-control:focus { border-color: var(--lk-brand) !important; box-shadow: var(--ring-focus) !important; }
.user-form .form-control::placeholder { color: #98A2B3 !important; }
.user-form .form-button { margin-top: 18px !important; text-align: center; }
.user-form .form-button button,
.user-form .form-button button[type="submit"] {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100% !important;
  min-height: 48px !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--lk-brand) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--lk-on-brand, #FFFFFF) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  filter: none !important;
  transform: none !important;
  transition: background-color .15s ease !important;
}
.user-form .form-button button:hover { background: var(--lk-brand-hover, var(--lk-brand-text)) !important; }
/* lunakey-mockup.css tô các nút này theo id (#btnLoginPage…) -> phải viết lại theo id */
#btnLoginPage,
#btnRegister,
#btnForgotPassword,
#btnChangePassword {
  border-color: var(--lk-brand) !important;
  background: var(--lk-brand) !important;
  box-shadow: none !important;
}
#btnLoginPage:hover,
#btnRegister:hover,
#btnForgotPassword:hover,
#btnChangePassword:hover {
  border-color: var(--lk-brand-text) !important;
  background: var(--lk-brand-hover, var(--lk-brand-text)) !important;
}
#btnLoginPage:disabled,
#btnRegister:disabled,
#btnForgotPassword:disabled,
#btnChangePassword:disabled { border-color: var(--lk-line-strong) !important; background: var(--lk-line-strong) !important; }
.user-form .form-button button:disabled { background: var(--lk-line-strong) !important; }
.user-form .form-button p,
.user-form-card .user-form-remind,
.user-form-remind p {
  color: var(--lk-ink-2) !important;
  font-size: 14px !important;
}
.user-form a,
.user-form-card a:not(.btn-google-signin),
.user-form-remind a { color: var(--lk-brand-text) !important; font-weight: 600; }
.social-login-divider span { color: var(--lk-muted) !important; font-size: 13px !important; background: var(--lk-surface) !important; }
.social-login-divider::before,
.social-login-divider::after { background: var(--lk-line) !important; border-color: var(--lk-line) !important; }
.btn-google-signin {
  min-height: 44px !important;
  height: auto !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
  color: var(--lk-ink-strong) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transform: none !important;
}
.btn-google-signin:hover { background: var(--lk-sunken) !important; }
/* reset-password.php: trang riêng không có nav */
.user-form-part { background: var(--lk-ground) !important; background-image: none !important; }
.user-form-logo img { max-height: 40px; width: auto; }

@media (max-width: 575.98px) {
  .profile-part:not(.product-orders-page) .user-form-card,
  .user-form-part .user-form-card { padding: 22px 18px !important; }
  .user-form-title h2,
  .user-form-title h3 { font-size: 22px !important; }
  .user-form .form-control { font-size: 16px !important; }
}

/* ---------- 40.11 Trang tĩnh: FAQ, liên hệ, chính sách, quyền riêng tư, tra cứu ICCID */
/* Đầu trang: dải trắng phẳng + đường kẻ dưới (bỏ quầng tím/xanh và gạch gradient trên đầu) */
.inner-section.single-banner:is(:has(+ .contact-part), :has(+ .iccid-section)) {
  padding: 24px 0 20px !important;
  border-bottom: 1px solid var(--lk-line) !important;
  background: var(--lk-surface) !important;
  background-image: none !important;
}
.inner-section.single-banner:is(:has(+ .contact-part), :has(+ .iccid-section))::before,
.inner-section.single-banner:is(:has(+ .contact-part), :has(+ .iccid-section))::after { content: none !important; display: none !important; }
.inner-section.single-banner:is(:has(+ .contact-part), :has(+ .iccid-section)) .container { gap: 6px !important; }
.inner-section.single-banner:is(:has(+ .contact-part), :has(+ .iccid-section)) h1,
.inner-section.single-banner:is(:has(+ .contact-part), :has(+ .iccid-section)) h2 {
  color: var(--lk-ink-strong) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -.015em !important;
}
.inner-section.single-banner:is(:has(+ .contact-part), :has(+ .iccid-section)) .breadcrumb-item,
.inner-section.single-banner:is(:has(+ .contact-part), :has(+ .iccid-section)) .breadcrumb-item.active { color: var(--lk-muted) !important; font-size: 13.5px; }
.inner-section.single-banner:is(:has(+ .contact-part), :has(+ .iccid-section)) .breadcrumb-item a { color: var(--lk-ink-2) !important; font-weight: 500 !important; }
.inner-section.single-banner:is(:has(+ .contact-part), :has(+ .iccid-section)) .breadcrumb-item a:hover { color: var(--lk-brand-text) !important; }
.contact-part,
.iccid-section { background: transparent !important; }

/* Nội dung CMS (chính sách / quyền riêng tư / FAQ cũ): đọc thoải mái ~72 ký tự mỗi dòng */
.contact-part .account-card {
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
}
.contact-part .account-card > :not(.lk-faq):not(.page-empty-state) {
  max-width: 72ch;
}
.contact-part .account-card { color: var(--lk-ink) !important; font-size: 15px; line-height: 1.7; }
.contact-part .account-card h2,
.contact-part .account-card h3,
.contact-part .account-card h4 { color: var(--lk-ink-strong) !important; }

/* FAQ: một kiểu accordion phẳng */
.lk-faq { max-width: 760px; margin-inline: auto; }
.lk-faq .esim-faq-title {
  margin: 24px 0 10px !important;
  color: var(--lk-ink-strong) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}
.lk-faq .lk-faq-group:first-child .esim-faq-title { margin-top: 0 !important; }
.lk-faq .esim-faq-list { gap: 8px !important; }
.lk-faq .esim-faq-item {
  overflow: hidden;
  border: 1px solid var(--lk-line) !important;
  border-radius: 10px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
}
.lk-faq .esim-faq-item[open] { border-color: var(--lk-line-strong) !important; }
.lk-faq .esim-faq-item summary {
  min-height: 48px;
  padding: 12px 16px !important;
  color: var(--lk-ink-strong) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  transition: background-color .15s ease !important;
}
.lk-faq .esim-faq-item summary:hover { background: #FAFBFC !important; }
.lk-faq .esim-faq-item summary i { color: var(--lk-muted) !important; transition: transform .15s ease !important; }
.lk-faq .esim-faq-answer {
  padding: 0 16px 14px !important;
  color: var(--lk-ink-2) !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
}
.lk-faq .esim-faq-answer p { color: inherit !important; }
.lk-faq .esim-faq-answer a { color: var(--lk-brand-text) !important; font-weight: 600 !important; }
.lk-faq-more { color: var(--lk-ink-2) !important; }
.lk-faq-more a { color: var(--lk-brand-text) !important; font-weight: 600; }

/* Liên hệ */
.contact-channels-title {
  color: var(--lk-ink-strong) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}
.contact-channels-desc { color: var(--lk-muted) !important; font-size: 14px !important; max-width: 72ch; }
.contact-channel,
.contact-card,
.contact-card.active,
.contact-card:hover,
.contact-channel:hover {
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: var(--lk-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}
.contact-channel-icon,
.contact-card i,
.contact-card > i {
  border-radius: 10px !important;
  background: var(--lk-sunken) !important;
  background-image: none !important;
  color: var(--lk-ink-2) !important;
  box-shadow: none !important;
}
.contact-channel-title,
.contact-card h4,
.contact-card h5 { color: var(--lk-ink-strong) !important; font-weight: 600 !important; }
.contact-channel-desc,
.contact-card p,
.contact-card-link { color: var(--lk-ink-2) !important; }
.contact-card-link:hover { color: var(--lk-brand-text) !important; }
.contact-channel-cta .btn,
.contact-part .page-empty-actions .btn,
.contact-channel .btn { min-height: 44px; display: inline-flex; align-items: center; border-radius: 10px !important; }

/* Trang trống (CMS chưa có nội dung) */
.contact-part .page-empty-state {
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
}
.contact-part .page-empty-icon {
  background: var(--lk-sunken) !important;
  background-image: none !important;
  color: var(--lk-muted) !important;
  box-shadow: none !important;
}
.contact-part .page-empty-title { color: var(--lk-ink-strong) !important; font-weight: 600 !important; }
.contact-part .page-empty-desc { color: var(--lk-muted) !important; }

/* Tra cứu ICCID */
.iccid-card,
.iccid-help,
.iccid-result {
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
}
.iccid-card-icon,
.iccid-help-icon {
  border-radius: 10px !important;
  background: var(--lk-sunken) !important;
  background-image: none !important;
  color: var(--lk-ink-2) !important;
}
.iccid-card-title,
.iccid-help-title { color: var(--lk-ink-strong) !important; font-weight: 700 !important; }
.iccid-card-sub,
.iccid-help-lead,
.iccid-hint { color: var(--lk-muted) !important; }
.iccid-label { color: var(--lk-ink-2) !important; font-weight: 600 !important; }
.iccid-field {
  min-height: 52px;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 12px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
}
.iccid-field:focus-within { border-color: var(--lk-brand) !important; box-shadow: var(--ring-focus) !important; }
.iccid-field--error { border-color: var(--lk-danger) !important; }
/* Ô nhập nằm trong khung .iccid-field: bỏ viền riêng mà luật input chung gắn vào (khung lồng khung) */
.iccid-field .iccid-input {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.iccid-submit,
.iccid-btn--primary {
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--lk-brand) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--lk-on-brand, #FFFFFF) !important;
  font-weight: 600 !important;
  transform: none !important;
}
.iccid-submit:hover:not(:disabled),
.iccid-btn--primary:hover,
.iccid-btn--primary:focus { background: var(--lk-brand-hover, var(--lk-brand-text)) !important; color: var(--lk-on-brand, #FFFFFF) !important; }
.iccid-btn { min-height: 44px; border-radius: 10px !important; font-weight: 600 !important; }
.iccid-btn--ghost {
  border: 1px solid var(--lk-line-strong) !important;
  background: var(--lk-surface) !important;
  color: var(--lk-ink-strong) !important;
}
.iccid-btn--ghost:hover,
.iccid-btn--ghost:focus { background: var(--lk-sunken) !important; color: var(--lk-ink-strong) !important; }
.iccid-help-item {
  border: 1px solid var(--lk-line) !important;
  border-radius: 10px !important;
  background: var(--lk-surface) !important;
}
.iccid-help-item h3 { color: var(--lk-ink-strong) !important; font-weight: 600 !important; }
.iccid-help-item p { color: var(--lk-ink-2) !important; }
/* Dải "SIM sắp hết hạn?" cuối trang: thẻ trắng thay cho khối gradient xanh -> tím */
.iccid-next {
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: var(--lk-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--lk-ink) !important;
}
.iccid-next-title { color: var(--lk-ink-strong) !important; font-size: 18px !important; font-weight: 700 !important; }
.iccid-next-copy p { color: var(--lk-ink-2) !important; }
.iccid-next .iccid-btn--primary { background: var(--lk-brand) !important; color: var(--lk-on-brand, #FFFFFF) !important; }
.iccid-next .iccid-btn--primary:hover,
.iccid-next .iccid-btn--primary:focus { background: var(--lk-brand-hover, var(--lk-brand-text)) !important; color: var(--lk-on-brand, #FFFFFF) !important; }
.iccid-next .iccid-btn--ghost {
  border: 1px solid var(--lk-line-strong) !important;
  background: var(--lk-surface) !important;
  color: var(--lk-ink-strong) !important;
}
.iccid-next .iccid-btn--ghost:hover,
.iccid-next .iccid-btn--ghost:focus { background: var(--lk-sunken) !important; color: var(--lk-ink-strong) !important; }
/* Kết quả tra cứu: thanh tiến độ đặc màu */
.iccid-bar { background: var(--lk-line) !important; }
.iccid-bar > span,
.iccid-bar > i,
.iccid-bar::before { background: var(--lk-brand) !important; background-image: none !important; box-shadow: none !important; }
.iccid-bar--warn > span,
.iccid-bar--warn > i,
.iccid-bar--warn::before { background: var(--lk-warn) !important; }

@media (max-width: 767.98px) {
  .inner-section.single-banner:is(:has(+ .contact-part), :has(+ .iccid-section)) { padding: 18px 0 16px !important; }
  .inner-section.single-banner:is(:has(+ .contact-part), :has(+ .iccid-section)) h1,
  .inner-section.single-banner:is(:has(+ .contact-part), :has(+ .iccid-section)) h2 { font-size: 22px !important; }
  .lk-faq .esim-faq-item summary { font-size: 14.5px !important; }
  .iccid-input,
  .iccid-field input { font-size: 16px !important; }
  /* Điện thoại: ô nhập và nút xếp dọc, mỗi cái một khối riêng (không bọc chung một viền) */
  .iccid-field,
  .iccid-field:focus-within {
    gap: 8px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .iccid-field .iccid-input {
    height: 48px !important;
    padding: 0 14px !important;
    border: 1px solid var(--lk-line-strong) !important;
    border-radius: 10px !important;
    background: var(--lk-surface) !important;
  }
  .iccid-field .iccid-input:focus { border-color: var(--lk-brand) !important; box-shadow: var(--ring-focus) !important; }
  .iccid-field--error .iccid-input { border-color: var(--lk-danger) !important; }
  .iccid-submit { min-height: 48px !important; margin-top: 0 !important; }
}

/* ---------- 40.12 Blog: danh sách + bài viết ------------------------------- */
.news-page-header {
  padding: 24px 0 20px !important;
  border-bottom: 1px solid var(--lk-line) !important;
  background: var(--lk-surface) !important;
  background-image: none !important;
}
.news-page-header::before,
.news-page-header::after { content: none !important; }
.news-breadcrumb a { color: var(--lk-ink-2) !important; }
.news-breadcrumb .separator { color: var(--lk-muted) !important; }
.news-breadcrumb .current { color: var(--lk-ink-strong) !important; font-weight: 500 !important; }
.news-page-title {
  color: var(--lk-ink-strong) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: -.015em !important;
  line-height: 1.3 !important;
}
.news-page-title i { color: var(--lk-brand-text) !important; font-size: .85em; }
.news-page-desc,
.news-page-meta,
.news-page-meta-item { color: var(--lk-muted) !important; }
.news-page-meta-item.featured { background: var(--lk-sunken) !important; color: var(--lk-ink-2) !important; }
.news-page { background: transparent !important; }
.news-section-title { color: var(--lk-ink-strong) !important; font-size: 18px !important; font-weight: 700 !important; }
.news-section-link { color: var(--lk-brand-text) !important; }

/* Thẻ bài viết: phẳng, không phủ tối lên ảnh, không nhún / phóng ảnh */
.news-card,
.news-card:hover,
.news-hero-main,
.news-hero-main:hover,
.news-hero-side-item,
.news-hero-side-item:hover {
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
  transform: none !important;
}
/* blogs.js đặt opacity 0 + translateY rồi mới hiện: bỏ hiệu ứng vào trang */
.news-card,
.news-hero-main,
.news-hero-side-item,
.news-popular-item {
  opacity: 1 !important;
  transform: none !important;
  transition: border-color .15s ease !important;
}
.news-card:hover,
.news-hero-main:hover,
.news-hero-side-item:hover { border-color: var(--lk-line-strong) !important; }
.news-card-thumbnail,
.news-card:hover .news-card-thumbnail,
.news-hero-main-image,
.news-hero-side-image,
.news-hero-main:hover .news-hero-main-image,
.news-hero-side-item:hover .news-hero-side-image {
  transform: none !important;
  filter: none !important;
  transition: none !important;
}
.news-card-image { background: var(--lk-sunken) !important; }
.news-card-placeholder { background: var(--lk-sunken) !important; background-image: none !important; color: var(--lk-muted) !important; }
/* Nhãn chuyên mục trên ảnh: chip trắng chữ đậm (thay khối tối / khối xanh đặc) */
.news-card-category,
.news-hero-main-category,
.news-hero-side-category {
  padding: 2px 8px !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 6px !important;
  background: var(--lk-surface) !important;
  background-image: none !important;
  color: var(--lk-ink-2) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.news-card-featured { border-radius: 6px !important; background: var(--lk-warn-bg) !important; background-image: none !important; color: var(--lk-warn-text) !important; box-shadow: none !important; }
/* Ô tin lớn ở đầu: chữ nằm dưới ảnh trên nền trắng thay cho lớp phủ gradient tối */
.news-hero-main-content,
.news-hero-side-content {
  background: var(--lk-surface) !important;
  background-image: none !important;
  color: var(--lk-ink) !important;
}
.news-hero-main-title,
.news-hero-side-title,
.news-hero-main-title a,
.news-hero-side-title a { color: var(--lk-ink-strong) !important; text-shadow: none !important; }
.news-hero-main-meta,
.news-hero-side-meta { color: var(--lk-muted) !important; }
.news-card-title,
.news-card .news-card-title { color: var(--lk-ink-strong) !important; font-weight: 600 !important; }
.news-card:hover .news-card-title { color: var(--lk-brand-text) !important; }
.news-card-excerpt { color: var(--lk-ink-2) !important; }
.news-card-footer { border-top-color: var(--lk-line) !important; }
.news-card-meta,
.news-card-meta span,
.news-card-author-name { color: var(--lk-muted) !important; font-size: 12.5px !important; }
.news-card-avatar { background: var(--lk-sunken) !important; background-image: none !important; color: var(--lk-ink-2) !important; }

/* Bộ lọc đang áp dụng */
.news-filters {
  border: 1px solid var(--lk-line) !important;
  border-radius: 10px !important;
  background: var(--lk-surface) !important;
  background-image: none !important;
}
.news-filter-label { color: var(--lk-muted) !important; }
.news-filter-tag { border-radius: 6px !important; background: var(--lk-brand-soft) !important; color: var(--lk-brand-text) !important; }
.news-clear-btn { min-height: 36px; border-radius: 8px !important; color: var(--lk-ink-2) !important; }
.news-empty-icon { background: var(--lk-sunken) !important; background-image: none !important; color: var(--lk-muted) !important; }
.news-empty-title { color: var(--lk-ink-strong) !important; }
.news-empty-desc { color: var(--lk-muted) !important; }
.news-empty-btn {
  min-height: 44px;
  border-radius: 10px !important;
  background: var(--lk-brand) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--lk-on-brand, #FFFFFF) !important;
  filter: none !important;
}

/* Cột bên */
.news-widget {
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
}
.news-widget-header { background: transparent !important; border-bottom: 1px solid var(--lk-line) !important; }
.news-widget-title { color: var(--lk-ink-strong) !important; font-size: 15px !important; font-weight: 700 !important; }
.news-widget-title i { color: var(--lk-muted) !important; }
.news-search-input {
  min-height: 44px;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px 0 0 10px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
}
.news-search-btn {
  min-width: 44px;
  min-height: 44px;
  border: 0 !important;
  border-radius: 0 10px 10px 0 !important;
  background: var(--lk-brand) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--lk-on-brand, #FFFFFF) !important;
}
.news-categories-list { gap: 4px !important; }
.news-category-link {
  min-height: 40px;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--lk-ink-2) !important;
  font-weight: 500 !important;
  justify-content: space-between !important;
  gap: 8px;
}
.news-category-link:hover { background: var(--lk-sunken) !important; color: var(--lk-ink-strong) !important; }
.news-category-link.active,
.news-category-link.active:hover {
  background: var(--lk-brand-soft) !important;
  background-image: none !important;
  color: var(--lk-brand-text) !important;
  font-weight: 600 !important;
}
.news-category-count,
.news-category-link.active .news-category-count {
  padding: 1px 7px !important;
  border-radius: 6px !important;
  background: var(--lk-sunken) !important;
  color: var(--lk-ink-2) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.news-category-link.active .news-category-count { background: var(--lk-surface) !important; color: var(--lk-brand-text) !important; }
.news-popular-item { border-bottom-color: var(--lk-line) !important; }
.news-popular-number {
  border-radius: 8px !important;
  background: var(--lk-sunken) !important;
  background-image: none !important;
  color: var(--lk-ink-2) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.news-popular-title { color: var(--lk-ink-strong) !important; font-weight: 600 !important; }
.news-popular-item:hover .news-popular-title { color: var(--lk-brand-text) !important; }
.news-popular-meta,
.news-popular-meta span { color: var(--lk-muted) !important; }
#blogSortForm select,
.news-widget .form-select {
  min-height: 44px;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.news-pagination-info { color: var(--lk-muted) !important; }

/* Bài viết */
.article-container {
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
}
.article-thumbnail { border-radius: 12px 12px 0 0 !important; }
.article-content,
.article-excerpt { max-width: 72ch; margin-inline: auto; }
.article-content { color: var(--lk-ink) !important; font-size: 16px !important; line-height: 1.75 !important; }
.article-content h2,
.article-content h3,
.article-content h4 { color: var(--lk-ink-strong) !important; }
.article-content a { color: var(--lk-brand-text) !important; }
.article-content blockquote { border-left-color: var(--lk-line-strong) !important; background: var(--lk-sunken) !important; color: var(--lk-ink-2) !important; }
.article-excerpt {
  border: 1px solid var(--lk-line) !important;
  border-radius: 10px !important;
  background: var(--lk-sunken) !important;
  background-image: none !important;
}
.article-excerpt-label { color: var(--lk-ink-2) !important; background: none !important; }
.article-excerpt p { color: var(--lk-ink-2) !important; font-style: normal !important; }
.article-footer { border-top-color: var(--lk-line) !important; }
.article-share-label { color: var(--lk-ink-2) !important; }
.article-tag {
  border-radius: 6px !important;
  background: var(--lk-sunken) !important;
  color: var(--lk-ink-2) !important;
}
.article-tag:hover { background: var(--lk-brand-soft) !important; color: var(--lk-brand-text) !important; }
/* Nút chia sẻ: một kiểu viền trung tính, không màu thương hiệu */
.article-share-btn,
.article-share-btn.facebook,
.article-share-btn.twitter,
.article-share-btn.linkedin,
.article-share-btn.copy {
  min-width: 40px;
  min-height: 40px;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
  color: var(--lk-ink-2) !important;
  filter: none !important;
  transform: none !important;
}
.article-share-btn:hover,
.article-share-btn.copy:hover { background: var(--lk-sunken) !important; color: var(--lk-ink-strong) !important; }
.article-nav-item,
.article-nav-item:hover {
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
  transform: none !important;
}
.article-nav-item:hover { border-color: var(--lk-line-strong) !important; }
.article-nav-label { color: var(--lk-muted) !important; }
.article-nav-title { color: var(--lk-ink-strong) !important; }
/* Thanh tiến độ đọc (blogs.js tạo): màu đặc */
#readingProgress { background: var(--lk-brand) !important; }

/* Điện thoại (trang danh sách): tìm kiếm + chuyên mục lên đầu, chuyên mục thành hàng chip
   cuộn ngang; "Đọc nhiều nhất" và "Sắp xếp" ở lại cuối trang. Trang bài viết giữ cột bên ở cuối. */
@media (max-width: 991.98px) {
  .news-page .row:has(> .col-lg-3 > .news-sidebar #blogSearchForm) > .col-lg-3 { display: contents; }
  .news-page .row:has(> .col-lg-3 > .news-sidebar #blogSearchForm) .news-sidebar { display: contents; }
  .news-page .row:has(> .col-lg-3 > .news-sidebar #blogSearchForm) .news-widget {
    flex: 0 0 auto;
    /* lề cột của lớp cũ là 10px (không theo --bs-gutter-x) */
    width: calc(100% - 20px);
    margin: 0 10px 12px !important;
    order: 2;
  }
  .news-page .row:has(> .col-lg-3 > .news-sidebar #blogSearchForm) .news-widget:has(#blogSearchForm),
  .news-page .row:has(> .col-lg-3 > .news-sidebar #blogSearchForm) .news-widget:has(.news-categories-list) { order: -1; }
  .news-widget:has(#blogSearchForm) .news-widget-header,
  .news-widget:has(.news-categories-list) .news-widget-header { display: none !important; }
  .news-widget:has(#blogSearchForm) .news-widget-body { padding: 8px !important; }
  .news-widget:has(.news-categories-list) .news-widget-body { padding: 8px !important; }
  .news-categories-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .news-categories-list::-webkit-scrollbar { display: none; }
  .news-categories-list > * { flex: none !important; width: auto !important; }
  .news-category-link { white-space: nowrap; gap: 6px; border: 1px solid var(--lk-line) !important; }
  .news-category-link.active { border-color: var(--lk-brand-soft-2) !important; }
  .news-page-title { font-size: 22px !important; }
  .news-search-input { font-size: 16px !important; }
}
@media (max-width: 575.98px) {
  .news-page-title > i { display: none !important; }
}

/* ---------- 40.13 Xác minh 2FA / OTP (template Velzon cũ) ----------------- */
/* Trang này nạp sidebar.php (không có nav.php) cho người chưa xác minh xong: ẩn menu tài khoản */
body:has(.auth-page-wrapper) .client-sidebar { display: none !important; }
.auth-page-wrapper { background: transparent !important; }
.auth-one-bg,
.auth-one-bg-position { background: transparent !important; background-image: none !important; height: auto !important; }
.auth-one-bg .bg-overlay,
.auth-one-bg .shape,
#auth-particles canvas,
.auth-page-wrapper lord-icon { display: none !important; }
.auth-page-content .card {
  max-width: 440px;
  margin-inline: auto;
  border: 1px solid var(--lk-line) !important;
  border-radius: 12px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
}
.auth-page-content .card h5.text-primary { color: var(--lk-ink-strong) !important; font-size: 22px !important; font-weight: 700 !important; }
.auth-page-content .card .text-muted { color: var(--lk-muted) !important; }
.auth-page-content .alert-info {
  border: 1px solid var(--lk-line) !important;
  border-radius: 10px !important;
  background: var(--lk-sunken) !important;
  color: var(--lk-ink-2) !important;
}
.auth-page-content .form-control {
  min-height: 44px;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.auth-page-content #btnsubmit {
  min-height: 48px;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--lk-brand) !important;
  box-shadow: none !important;
  color: var(--lk-on-brand, #FFFFFF) !important;
  font-weight: 600 !important;
}
.auth-page-content #btnsubmit:hover { background: var(--lk-brand-hover, var(--lk-brand-text)) !important; }
.auth-page-content .auth-logo img { height: 48px !important; width: auto; }
.auth-page-content a.text-primary { color: var(--lk-brand-text) !important; }
@media (max-width: 575.98px) {
  .auth-page-content .form-control { font-size: 16px !important; }
}

/* ---------- 40.14 Bổ sung sau rà soát -------------------------------------- */
/* Gợi ý phím tắt dưới khung chat + lý do từ chối rút tiền: không nhỏ hơn 12px */
.chat-shortcut-hint kbd {
  padding: 1px 6px !important;
  border: 1px solid var(--lk-line-strong) !important;
  border-radius: 6px !important;
  background: var(--lk-surface) !important;
  box-shadow: none !important;
  color: var(--lk-ink-2) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
.affiliate-table small.text-danger,
.affiliate-withdraw-card small.text-danger { color: var(--lk-danger-text) !important; font-size: 12.5px !important; }
/* Hồ sơ trên điện thoại: "Tổng chi tiêu" (số dài, vd 12.450.000đ) chiếm cả hàng,
   "Tổng đơn" + "Yêu thích" chia đôi hàng dưới -> số tiền không bị cắt */
@media (max-width: 575.98px) {
  .gamer-overview-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .gamer-overview-metrics-grid > .gamer-stat-card:first-child { grid-column: 1 / -1; }
}
/* Lịch sử đơn gần đây trên điện thoại: mỗi đơn là một thẻ nhỏ thay cho bảng cuộn ngang.
   Không dùng !important cho display của hàng: bộ lọc tab đặt style="display:none" lên hàng. */
@media (max-width: 575.98px) {
  .gamer-table-responsive { overflow: visible !important; }
  .gamer-orders-table { display: block; min-width: 0 !important; border-spacing: 0 !important; }
  .gamer-orders-table thead { display: none !important; }
  .gamer-orders-table tbody { display: grid; gap: 8px; }
  .gamer-orders-table tr.order-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 12px;
    padding: 12px;
    border: 1px solid var(--lk-line);
    border-radius: 10px;
    background: var(--lk-surface);
  }
  .gamer-orders-table tr.order-row td,
  .gamer-orders-table tr.order-row:hover td {
    display: block;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 13.5px !important;
    white-space: normal !important;
    text-align: left !important;
  }
  .gamer-orders-table tr.order-row td:first-child { grid-column: 1 / -1; }
  .gamer-orders-table tr.order-row td:nth-child(3),
  .gamer-orders-table tr.order-row td:nth-child(5) { text-align: right !important; }
  .gamer-orders-table .btn-order-view { min-height: 40px; }
}
/* Phiên đăng nhập: profile.css dùng grid 56px | 1fr | auto; trên điện thoại cột
   giữa bị ép về 0 khi có nút "Đăng xuất". Ô icon 44px, nút xuống hàng dưới. */
.session-item {
  grid-template-columns: 44px minmax(0, 1fr) auto !important;
  gap: 12px 14px !important;
  padding: 12px 14px !important;
}
.session-details { gap: 4px 12px !important; }
@media (max-width: 575.98px) {
  .session-item { grid-template-columns: 44px minmax(0, 1fr) !important; }
  .session-item .session-action { grid-column: 2 / -1; justify-self: start; }
}
/* Hạn mức API key: ô nền xám nhạt thay cho viên thuốc xanh */
.api-key-rate-limit {
  border: 1px solid var(--lk-line) !important;
  border-radius: 10px !important;
  background: var(--lk-sunken) !important;
  color: var(--lk-ink-2) !important;
}
.api-key-rate-limit .api-key-rate-limit-item,
.api-key-rate-limit .api-key-rate-limit-item * { color: var(--lk-ink-2) !important; }
.api-key-rate-limit .api-key-rate-limit-item i { color: var(--lk-muted) !important; }
/* Liên kết giới thiệu: khung ngoài của affiliates.css là viên thuốc có viền -> bỏ,
   chỉ còn ô nhập + nút sao chép bo 10px */
.affiliate-link-input-wrapper {
  display: flex !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.affiliate-link-input { flex: 1 1 auto; min-width: 0; }
/* Số liệu nhỏ (thành viên / lượt click / tổng kiếm được): số tiền dài được xuống dòng */
.affiliate-mini-stat { min-width: 0; }
.affiliate-mini-stat-value { overflow-wrap: anywhere; }
/* Bong bóng chat: ticket.css đặt white-space:pre-wrap nên khoảng trắng thụt lề của
   ticket-detail.php hiện thành dòng trống (bong bóng cao ~140px cho một dòng chữ),
   và nl2br() giữ "\n" sau <br> nên xuống dòng bị nhân đôi. Nội dung đã có <br>. */
.chat-bubble-content,
.chat-bubble-content p { white-space: normal !important; }
/* Phím tắt Ctrl + Enter không có trên điện thoại */
@media (max-width: 767.98px) {
  .chat-shortcut-hint { display: none !important; }
}
/* Tài liệu API: nhãn GET ở menu trái cũng nền nhạt như POST (mockup tô xanh đặc) */
.api-nav-method.get,
.api-method.get { background: var(--lk-brand-soft) !important; color: var(--lk-brand-text) !important; }
/* Tài liệu API dưới 992px: menu trái (~570px) thành một hàng chip cuộn ngang
   giống menu tài khoản, để nội dung hiện ngay dưới tiêu đề */
@media (max-width: 991.98px) {
  .api-sidebar {
    display: flex !important;
    gap: 8px;
    margin-bottom: 12px;
    padding: 0 0 2px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    scrollbar-width: none;
  }
  .api-sidebar::-webkit-scrollbar { display: none; }
  .api-sidebar .api-sidebar-section { display: contents; }
  .api-sidebar .api-sidebar-title { display: none !important; }
  .api-sidebar .api-nav-link {
    flex: none;
    gap: 8px !important;
    min-height: 40px;
    padding: 0 14px !important;
    border: 1px solid var(--lk-line) !important;
    border-radius: 10px !important;
    background: var(--lk-surface) !important;
    font-size: 13.5px !important;
    white-space: nowrap;
  }
  .api-sidebar .api-nav-link.active {
    border-color: var(--lk-brand-soft-2) !important;
    background: var(--lk-brand-soft) !important;
  }
  .api-sidebar .api-nav-method { margin-left: 2px !important; }
}
@media (max-width: 575.98px) {
  .api-sidebar {
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%) !important;
    scroll-padding-inline: calc(50vw - 50%);
  }
}
/* 4 ô ví ở 576–991px: auto-fit cho 3 + 1 ô lẻ hàng -> chia đều 2 x 2 */
@media (min-width: 576px) and (max-width: 991.98px) {
  .gamer-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* 20.x Mua theo danh mục: điện thoại chỉ 4 hàng đầu + nút xem tất cả (widgets/category-shelves.php) */
.home-shelves-more-mobile { display: none; }
@media (max-width: 767.98px) {
  .home-shelf.home-shelf--extra { display: none !important; }
  .home-shelves-more-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    margin-top: 8px;
    border: 1px solid var(--lk-line-strong);
    border-radius: 10px;
    background: #FFFFFF;
    color: var(--lk-brand-text) !important;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
  }
  .home-shelves-more-mobile:hover { background: var(--lk-sunken); }
}
/* Dải cách giao trên ảnh 80–88px (điện thoại): "TỰ ĐỘNG 24/7" vừa đủ, không bị cắt */
@media (max-width: 575.98px) {
  .lk-pc .lk-pc-mode { padding-inline: 1px !important; font-size: 10px !important; letter-spacing: 0 !important; }
}

/* ---------- 9. Logo thương hiệu (asvg-icons, libs/asvg_product_icon.php) -------- */
/* Mọi thẻ: một ô vuông trắng cố định, đặt sát mép trên. Logo chiếm ~60% ô (padding 20%);
   ô chữ cái đầu (data URI, đã có nền màu nhạt riêng) lấp kín ô. Không còn dải "TỰ ĐỘNG 24/7":
   chấm "Giao ngay" ở góc trên đã nói đúng điều đó. */
.lk-pc .lk-pc-media {
  align-self: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  height: auto;
  background: #FFFFFF;
  border-radius: 12px;
}
.lk-pc .lk-pc-mode { display: none !important; }
.lk-pc .lk-pc-img {
  flex: none;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
.lk-pc .lk-pc-img[src$=".svg"] { padding: 20%; background: #FFFFFF; }
.lk-pc .lk-pc-img[src^="data:image/svg"] { padding: 0; background: transparent; }
.lk-pc.is-out-of-stock .lk-pc-img[src^="data:image/svg"] { opacity: .6; }

/* Trang sản phẩm: cùng kiểu ô, 160px */
.product-hero-image-card #productMainImage[src$=".svg"],
.product-hero-image-card #productMainImage[src^="data:image/svg"] {
  display: block !important;
  width: 160px !important;
  max-width: 60% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  margin: 24px auto !important;
  border: 1px solid var(--lk-line) !important;
  border-radius: 20px !important;
  background: #FFFFFF !important;
  object-fit: contain !important;
}
.product-hero-image-card #productMainImage[src$=".svg"] { padding: 32px !important; }
.product-hero-image-card #productMainImage[src^="data:image/svg"] { padding: 0 !important; }
.product-hero-image-card .product-image-wrapper:has(#productMainImage[src$=".svg"]),
.product-hero-image-card .product-image-wrapper:has(#productMainImage[src^="data:image/svg"]) {
  background: #FFFFFF !important;
}
/* Icon tự vẽ (assets/img/asvg/c-*.svg, scripts/build_custom_icons.php) đã có nền màu: lấp kín ô */
.lk-pc .lk-pc-img[src*="/asvg/c-"] { padding: 0 !important; background: transparent; }
.product-hero-image-card #productMainImage[src*="/asvg/c-"] { padding: 0 !important; }


/* ==========================================================================
   50. THÊM MÀU SẮC SINH ĐỘNG TOÀN DIỆN CHO PHÍA KHÁCH / CLIENT (2026-10-23)
   Theo yêu cầu chủ site: đưa màu sắc điểm nhấn, gradient thương hiệu, badge
   nổi bật, icon pastel và visual identity sống động vào giao diện khách hàng
   thay vì một màu xanh phẳng đơn điệu.
   ========================================================================== */

/* ---------- 50.1 Header & Navigation: Số dư vàng hoàng kim, giỏ hàng đỏ, nav tươi tắn ---------- */
.header-part .mockup-balance-pill {
  border-color: #FDE68A !important;
  background: linear-gradient(135deg, #FFFDF5 0%, #FEF3C7 100%) !important;
  box-shadow: 0 1px 3px rgba(245, 158, 11, 0.12) !important;
}
.header-part .mockup-balance-pill:hover,
.header-part .mockup-balance-pill[aria-expanded="true"] {
  border-color: #FCD34D !important;
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%) !important;
}
.header-part .mockup-balance-pill .balance-amount-text::before {
  color: #D97706 !important;
}
.header-part .mockup-balance-pill .balance-amount-text {
  color: #92400E !important;
  font-weight: 700 !important;
}
.header-part .mockup-balance-pill .btn-balance-topup {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.28) !important;
}
.header-part .mockup-balance-pill .btn-balance-topup:hover {
  background: linear-gradient(135deg, #1D4ED8 0%, #1E40AF 100%) !important;
  color: #FFFFFF !important;
}

/* Giỏ hàng có badge số lượng đỏ nổi bật */
#headerCartLink sup#numCart,
.header-widget-cart sup,
.mobile-menu .mobile-menu-badge {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px !important;
  border-radius: 99px !important;
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.38) !important;
  border: 1.5px solid #FFFFFF !important;
}

/* Nút danh mục thả xuống: icon gradient, viền nhấn khi hover */
.lk-catdrop-btn {
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
.lk-catdrop-btn:hover {
  border-color: #93C5FD !important;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.08) !important;
}
.lk-catdrop-btn-icon {
  background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.lk-catdrop-icon {
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%) !important;
  color: #2563EB !important;
  border: 1px solid #BFDBFE !important;
}
.lk-catdrop-item:hover .lk-catdrop-icon {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
  color: #FFFFFF !important;
  border-color: #2563EB !important;
}

/* ---------- 50.2 Hero Trang Chủ: Vòng cung gradient, chữ nhấn, trust chips màu sắc ---------- */
.lk-hero-bg {
  display: block !important;
  opacity: 0.75 !important;
  pointer-events: none !important;
}
.lk-hero .lk-hl {
  display: inline !important;
  background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 800 !important;
}
/* 4 điểm tin cậy dưới thanh tìm kiếm: mỗi icon 1 màu chuyên biệt */
.lk-hero-trust {
  gap: 10px 22px !important;
}
.lk-hero-trust li {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #334155 !important;
}
.lk-hero-trust li i {
  display: inline-grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
}
/* Giao tự động: xanh lá */
.lk-hero-trust li:nth-child(1) i {
  background: #ECFDF5 !important;
  color: #059669 !important;
  border: 1px solid #A7F3D0 !important;
}
/* Bảo hành: xanh dương */
.lk-hero-trust li:nth-child(2) i {
  background: #EFF6FF !important;
  color: #2563EB !important;
  border: 1px solid #BFDBFE !important;
}
/* Chính hãng: tím */
.lk-hero-trust li:nth-child(3) i {
  background: #FAF5FF !important;
  color: #7C3AED !important;
  border: 1px solid #DDD6FE !important;
}
/* Hỗ trợ siêu tốc: cam vàng */
.lk-hero-trust li:nth-child(4) i {
  background: #FFFBEB !important;
  color: #D97706 !important;
  border: 1px solid #FDE68A !important;
}

/* Nút tìm kiếm Hero */
.lk-hero-form .lk-hero-submit {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.32) !important;
  font-weight: 600 !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}
.lk-hero-form .lk-hero-submit:hover {
  background: linear-gradient(135deg, #1D4ED8 0%, #1E40AF 100%) !important;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.42) !important;
  transform: translateY(-1px) !important;
}

/* Bảng giá hôm nay (hero right stage) */
.lk-hero-stage .lk-phone--menu {
  border-color: #DBEAFE !important;
  box-shadow: 0 12px 32px -4px rgba(37, 99, 235, 0.12) !important;
}
.lk-hero-stage .lk-menu-title {
  background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 800 !important;
}
.lk-hero-stage .lk-mrow-price {
  color: #1D4ED8 !important;
  font-weight: 700 !important;
}
.lk-hero-stage .lk-mrow-tag {
  background: #EFF6FF !important;
  color: #1D4ED8 !important;
  border: 1px solid #DBEAFE !important;
  font-weight: 600 !important;
}
.lk-hero-stage .lk-mrow:hover {
  background: #F8FAFC !important;
}

/* ---------- 50.3 Flash Sale: Nổi bật với sắc tím hoàng gia & đồng hồ đếm ngược vàng rực ---------- */
.lk-home .flashsale-section {
  background: linear-gradient(135deg, #FAF5FF 0%, #EEF2FF 50%, #F0FDF4 100%) !important;
  border: 1.5px solid #DDD6FE !important;
  box-shadow: 0 8px 24px -4px rgba(124, 58, 237, 0.12) !important;
}
.lk-home .flashsale-bolt-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important;
  color: #FFFFFF !important;
  font-size: 16px !important;
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.4) !important;
}
.lk-home .flashsale-title {
  background: linear-gradient(135deg, #7C3AED 0%, #4F46E5 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 800 !important;
}
.lk-home .flashsale-timer .timer-block {
  background: #1E1B4B !important;
  border: 1px solid #312E81 !important;
  box-shadow: 0 3px 8px rgba(30, 27, 75, 0.25) !important;
}
.lk-home .flashsale-timer .timer-number {
  color: #FDE047 !important;
  font-size: 17px !important;
  font-weight: 800 !important;
}
.lk-home .flashsale-timer .timer-text {
  color: #C7D2FE !important;
  font-weight: 600 !important;
}
.lk-home .flashsale-timer .timer-colon {
  color: #7C3AED !important;
  font-weight: 700 !important;
}
.lk-home .btn-flashsale-all {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  font-weight: 600 !important;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.3) !important;
}
.lk-home .btn-flashsale-all:hover {
  background: linear-gradient(135deg, #1D4ED8 0%, #1E40AF 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 5px 14px rgba(37, 99, 235, 0.4) !important;
}

/* Thẻ con trong Flash Sale */
.lk-home .flash-card {
  border-color: #E2E8F0 !important;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}
.lk-home .flash-card:hover {
  border-color: #BFDBFE !important;
  box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.14) !important;
  transform: translateY(-2px) !important;
}
.lk-home .flash-discount-badge {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3) !important;
}
.lk-home .flash-price-current {
  color: #DC2626 !important;
  font-weight: 700 !important;
}
.lk-home .flash-stock-bar > span {
  background: linear-gradient(90deg, #F59E0B 0%, #EF4444 100%) !important;
}

/* ---------- 50.4 Thẻ Sản Phẩm (.lk-pc): Trái tim giao diện cửa hàng ---------- */
.product-card.lk-pc {
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}
.product-card.lk-pc:hover,
.product-card.lk-pc.featured-product-card:hover {
  border-color: #BFDBFE !important;
  box-shadow: 0 8px 24px -4px rgba(37, 99, 235, 0.12), 0 2px 6px -1px rgba(16, 24, 40, 0.04) !important;
  transform: translateY(-2px) !important;
}

/* Ô ảnh sản phẩm: nền gradient nhẹ & hiệu ứng zoom nhẹ khi hover */
.lk-pc .lk-pc-media {
  align-self: center !important;
  background: linear-gradient(180deg, #F8FAFC 0%, #EEF2F6 100%) !important;
  border-color: #E2E8F0 !important;
  transition: border-color .2s ease !important;
}
.product-card.lk-pc:hover .lk-pc-media {
  border-color: #BFDBFE !important;
}
.product-card.lk-pc:hover .lk-pc-img {
  transform: scale(1.05) !important;
  transition: transform .25s ease !important;
}

/* Huy hiệu Bán chạy: tím hoàng gia có icon ngôi sao vàng */
.lk-pc .lk-pc-badge--bestseller {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.3) !important;
}
.lk-pc .lk-pc-badge--bestseller::before {
  content: "\f005" !important;
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-size: 8.5px !important;
  color: #FDE047 !important;
}
/* Huy hiệu (Bán chạy / Giảm giá / Flash) ở góc ô ảnh che mất logo: đưa xuống ngay dưới ô ảnh.
   Ô ảnh canh giữa theo chiều dọc, nên chừa margin-bottom bằng chỗ của huy hiệu thì ô tự dịch lên;
   huy hiệu vẫn nằm trong thẻ <a> ảnh nên markup PHP (CatalogCardService) và JS (products-filter) giữ nguyên. */
.lk-pc .lk-pc-media:has(> .lk-pc-badge) {
  overflow: visible !important;
  margin-bottom: 26px !important;
}
/* Hết overflow: hidden thì ảnh (nền trắng, góc vuông) tự bo theo ô */
.lk-pc .lk-pc-media:has(> .lk-pc-badge) .lk-pc-img { border-radius: inherit !important; }
.lk-pc .lk-pc-media > .lk-pc-badge {
  top: calc(100% + 5px) !important;
  bottom: auto !important;
  left: 50% !important;
  right: auto !important;
  max-width: none !important;
  transform: translateX(-50%) !important;
  white-space: nowrap !important;
}
/* Huy hiệu Giảm giá / Flash */
.lk-pc .lk-pc-badge--sale,
.lk-pc .lk-pc-badge--flash {
  display: inline-flex !important;
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3) !important;
}

/* Tag danh mục: Chip pastel xanh thương hiệu */
.lk-pc .lk-pc-cat {
  padding: 3px 8px !important;
  border-radius: 6px !important;
  background: #EFF6FF !important;
  color: #1D4ED8 !important;
  border: 1px solid #DBEAFE !important;
  font-weight: 600 !important;
}
.lk-pc .lk-pc-cat i {
  color: #2563EB !important;
}

/* Trạng thái cách giao hàng: Chip màu sắc rõ nét */
.lk-pc .lk-pc-status {
  padding: 2px 8px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
.lk-pc .lk-pc-status--auto,
.lk-pc .lk-pc-status--instant {
  background: #ECFDF5 !important;
  color: #047857 !important;
  border: 1px solid #A7F3D0 !important;
}
.lk-pc .lk-pc-status--auto::before,
.lk-pc .lk-pc-status--instant::before {
  background: #10B981 !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2) !important;
}
.lk-pc .lk-pc-status--manual {
  background: #FEF3C7 !important;
  color: #B45309 !important;
  border: 1px solid #FDE68A !important;
}
.lk-pc .lk-pc-status--manual::before {
  background: #F59E0B !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2) !important;
}
.lk-pc .lk-pc-status--out_of_stock {
  background: #F2F4F7 !important;
  color: #667085 !important;
  border: 1px solid #EAECF0 !important;
}

/* Lửa "Đã bán" rực cháy */
.lk-pc .lk-pc-sold i {
  color: #F97316 !important;
  font-size: 11.5px !important;
  margin-right: 2px !important;
}
/* Thanh đo độ hot: Gradient cam -> đỏ */
.lk-pc .lk-pc-bar {
  background: #E2E8F0 !important;
  height: 5px !important;
}
.lk-pc .lk-pc-bar > span {
  background: linear-gradient(90deg, #F59E0B 0%, #EF4444 100%) !important;
  box-shadow: 0 1px 3px rgba(239, 68, 68, 0.25) !important;
}

/* Giá sản phẩm */
.lk-pc .lk-pc-price-value {
  color: #1D4ED8 !important;
  font-size: 16.5px !important;
  font-weight: 700 !important;
}

/* Nút "Mua ngay" với gradient nổi & hover nâng nhẹ */
.lk-pc .lk-pc-buy {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.28) !important;
  border: 0 !important;
  font-weight: 600 !important;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease !important;
}
.lk-pc .lk-pc-buy:hover {
  background: linear-gradient(135deg, #1D4ED8 0%, #1E40AF 100%) !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.38) !important;
  transform: translateY(-1px) !important;
}
.lk-pc .lk-pc-buy:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.2) !important;
}

/* ---------- 50.5 Mua Theo Danh Mục: Bật lại icon danh mục và thẻ cuối hàng ---------- */
.home-shelf .home-shelf-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%) !important;
  color: #2563EB !important;
  border: 1px solid #BFDBFE !important;
  font-size: 14px !important;
  flex: none !important;
}
.home-shelf .home-shelf-icon img {
  width: 20px !important;
  height: 20px !important;
  object-fit: contain !important;
}
.home-shelf .home-shelf-title a {
  color: #0F172A !important;
  transition: color .15s ease !important;
}
.home-shelf .home-shelf-title a:hover {
  color: #2563EB !important;
}
.home-shelf .home-shelf-count {
  display: inline-block !important;
  padding: 2px 8px !important;
  border-radius: 99px !important;
  background: #F1F5F9 !important;
  color: #475467 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.home-shelf .home-shelf-nav:hover:not(:disabled) {
  background: #2563EB !important;
  color: #FFFFFF !important;
  border-color: #2563EB !important;
}
.home-shelf .home-shelf-more {
  border: 1.5px dashed #93C5FD !important;
  background: linear-gradient(135deg, #EFF6FF 0%, #FFFFFF 100%) !important;
  border-radius: 14px !important;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease !important;
}
.home-shelf .home-shelf-more:hover {
  border-color: #2563EB !important;
  background: #DBEAFE !important;
  transform: translateY(-2px) !important;
}
.home-shelf .home-shelf-more-icon {
  background: #2563EB !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3) !important;
}

/* ---------- 50.6 Khối "Mua An Tâm" & "3 Bước Mua Hàng": Icon màu sắc rạng rỡ ---------- */
.lk-safe-list .lk-safe-icon--a {
  background: #FFFBEB !important;
  color: #D97706 !important;
  border: 1px solid #FDE68A !important;
}
.lk-safe-list .lk-safe-icon--b {
  background: #EFF6FF !important;
  color: #2563EB !important;
  border: 1px solid #BFDBFE !important;
}
.lk-safe-list .lk-safe-icon--c {
  background: #ECFDF5 !important;
  color: #059669 !important;
  border: 1px solid #A7F3D0 !important;
}
.lk-safe-list .lk-safe-icon--d {
  background: #FAF5FF !important;
  color: #7C3AED !important;
  border: 1px solid #DDD6FE !important;
}

/* 3 Bước mua hàng */
.lk-step-no {
  display: inline-grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}
.lk-step:nth-child(1) .lk-step-no { background: #EFF6FF !important; color: #2563EB !important; border: 1px solid #BFDBFE !important; }
.lk-step:nth-child(2) .lk-step-no { background: #FFFBEB !important; color: #D97706 !important; border: 1px solid #FDE68A !important; }
.lk-step:nth-child(3) .lk-step-no { background: #ECFDF5 !important; color: #059669 !important; border: 1px solid #A7F3D0 !important; }

.lk-art-chip--ok {
  background: #ECFDF5 !important;
  color: #047857 !important;
  border: 1px solid #A7F3D0 !important;
}

/* Khối Đánh giá: Sao vàng rực */
.lk-review-stars i:not(.is-off),
.lk-proof dt span,
.product-review-stars i {
  color: #F59E0B !important;
}
.lk-review-verified {
  color: #059669 !important;
  font-weight: 600 !important;
}

/* Khối CTA chân trang: Nền xanh hoàng gia sâu thẳm, nổi bật và sang trọng */
.lk-cta {
  background: linear-gradient(135deg, #1E3A8A 0%, #1E1B4B 50%, #312E81 100%) !important;
  border: 0 !important;
  color: #FFFFFF !important;
  box-shadow: 0 16px 40px -8px rgba(30, 58, 138, 0.3) !important;
}
.lk-cta .lk-cta-title {
  color: #FFFFFF !important;
}
.lk-cta-text {
  color: #C7D2FE !important;
}
.lk-cta-search {
  background: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}
.lk-cta-submit {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
  color: #FFFFFF !important;
}

/* ---------- 50.7 Trang Danh Mục & Lọc Sản Phẩm (/products, /category, /esim) ---------- */
.products-page .catalog-filter-panel .filter-cat-nav-item.active {
  background: #EFF6FF !important;
  color: #1D4ED8 !important;
  font-weight: 600 !important;
  border-left: 3px solid #2563EB !important;
}
.products-page .catalog-filter-panel .filter-cat-nav-item:hover:not(.active) {
  background: #F8FAFC !important;
  color: #2563EB !important;
}
.products-page .catalog-filter-panel .price-preset-btn.active {
  background: #2563EB !important;
  color: #FFFFFF !important;
  border-color: #2563EB !important;
}
.catalog-active-filter-tag {
  background: #EFF6FF !important;
  color: #1D4ED8 !important;
  border: 1px solid #BFDBFE !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
}

/* ---------- 50.8 Trang Chi Tiết Sản Phẩm (/product/<slug>) ---------- */
.product-detail-page .product-plan-card.active,
.product-detail-page .product-plan-card.active:hover {
  border-color: #2563EB !important;
  background: #F8FAFF !important;
  box-shadow: 0 0 0 1.5px #2563EB, 0 4px 12px rgba(37, 99, 235, 0.1) !important;
}
.product-detail-page .product-plan-card.active .plan-card-check {
  background: #2563EB !important;
  color: #FFFFFF !important;
}
.product-detail-page .product-plan-card .product-delivery.delivery-order {
  padding: 2px 7px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  background: #ECFDF5 !important;
  color: #047857 !important;
  border: 1px solid #A7F3D0 !important;
}
.product-detail-page .product-plan-card .flash-sale-badge-inline {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}
.product-detail-page .btn-shop-now,
.product-detail-page #btnBuyNow {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35) !important;
  font-weight: 700 !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}
.product-detail-page .btn-shop-now:hover,
.product-detail-page #btnBuyNow:hover {
  background: linear-gradient(135deg, #1D4ED8 0%, #1E40AF 100%) !important;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45) !important;
  transform: translateY(-1px) !important;
}

/* ---------- 50.9 Khu Vực Tài Khoản & Hồ Sơ Khách Hàng (/client/...) ---------- */
/* Hạng thành viên với các màu gradient đặc trưng */
.gamer-rank-badge.bronze {
  background: linear-gradient(135deg, #B45309 0%, #78350F 100%) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  box-shadow: 0 2px 6px rgba(180, 83, 9, 0.3) !important;
}
.gamer-rank-badge.silver {
  background: linear-gradient(135deg, #94A3B8 0%, #64748B 100%) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  box-shadow: 0 2px 6px rgba(100, 116, 139, 0.3) !important;
}
.gamer-rank-badge.gold {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35) !important;
}
.gamer-rank-badge.diamond {
  background: linear-gradient(135deg, #06B6D4 0%, #0284C7 100%) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  box-shadow: 0 2px 6px rgba(6, 182, 212, 0.35) !important;
}
.gamer-rank-badge.legend {
  background: linear-gradient(135deg, #8B5CF6 0%, #D946EF 100%) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  box-shadow: 0 2px 6px rgba(139, 92, 246, 0.35) !important;
}
.gamer-rank-badge i {
  color: #FDE047 !important;
}

/* 3 Ô thống kê người dùng: Icon có màu sắc riêng biệt */
.gamer-stat-icon.spend {
  background: #EFF6FF !important;
  color: #2563EB !important;
  border: 1px solid #BFDBFE !important;
}
.gamer-stat-icon.orders {
  background: #ECFDF5 !important;
  color: #059669 !important;
  border: 1px solid #A7F3D0 !important;
}
.gamer-stat-icon.favorites {
  background: #FFF1F2 !important;
  color: #E11D48 !important;
  border: 1px solid #FECDD3 !important;
}

/* Thẻ ví chính */
.gamer-metric-tile.primary-tile {
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%) !important;
  border-color: #BFDBFE !important;
}
.gamer-metric-tile.primary-tile .gamer-metric-val {
  color: #1D4ED8 !important;
}

/* Thanh tiến độ cấp bậc */
.level-bar-fill {
  background: linear-gradient(90deg, #2563EB 0%, #7C3AED 100%) !important;
}

/* Menu bên tài khoản: active sáng rõ */
.client-sidebar .sidebar-menu-item.active {
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%) !important;
  color: #1D4ED8 !important;
  border-left: 3px solid #2563EB !important;
}
.client-sidebar .sidebar-menu-item.active i {
  color: #2563EB !important;
}

/* ---------- 50.10 Bong Bóng Chat Phía User Trong Hỗ Trợ / Ticket (/client/ticket-detail) ---------- */
.chat-message.is-user .chat-bubble-content {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25) !important;
}
.chat-message.is-user .chat-bubble-content p {
  color: #FFFFFF !important;
}
.chat-message.is-user .chat-bubble-content a {
  color: #DBEAFE !important;
  text-decoration: underline !important;
}
.chat-message.is-admin .chat-bubble-content {
  background: #F1F5F9 !important;
  color: #0F172A !important;
  border: 1px solid #E2E8F0 !important;
}
.chat-message.is-admin .chat-avatar-admin {
  background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%) !important;
  color: #FFFFFF !important;
  border: 0 !important;
}


/* ==========================================================================
   51. NÂNG CẤP THẨM MỸ THỊ GIÁC CAO CẤP (2026-10-23)
   - Ambient Mesh Glow & Depth ở hậu cảnh trang chủ
   - Header Glassmorphism (Kính mờ) trên Desktop
   - Card Border Glow & Shimmer button trên thẻ sản phẩm (.lk-pc)
   - Đồng hồ đếm ngược Flip-Clock & Bolt Glow trong Flash Sale
   - Dải gradient phân cách đỉnh Footer & Hàng badge thanh toán uy tín
   ========================================================================== */

/* ---------- 51.1 Ambient Mesh Glow & Digital Atmosphere (Hậu cảnh đa chiều) ---------- */
.lk-home {
  position: relative !important;
}
.lk-home::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: 1440px !important;
  height: 680px !important;
  background: radial-gradient(circle at 18% 18%, rgba(37, 99, 235, 0.07) 0%, transparent 48%),
              radial-gradient(circle at 82% 28%, rgba(124, 58, 237, 0.06) 0%, transparent 44%),
              radial-gradient(circle at 50% 65%, rgba(6, 182, 212, 0.04) 0%, transparent 45%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Lưới tech dot siêu nhẹ ở hero trang chủ */
.lk-hero {
  position: relative !important;
  background-image: radial-gradient(rgba(37, 99, 235, 0.05) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
  background-position: center top !important;
}

/* ---------- 51.2 Header Kính Mờ (Glassmorphism) trên Desktop ---------- */
@media (min-width: 992px) {
  .header-part,
  .header-part.active {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.85) !important;
    box-shadow: 0 4px 20px -4px rgba(16, 24, 40, 0.05) !important;
  }
}
.header-form-pill {
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
.header-form-pill:focus-within {
  border-color: #2563EB !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16) !important;
}

/* Mega menu dropdown: bóng đổ sâu, thanh chỉ thị danh mục */
.header-part .header-mega-menu {
  box-shadow: 0 16px 40px -8px rgba(16, 24, 40, 0.12), 0 0 0 1px rgba(226, 232, 240, 0.8) !important;
  border-radius: 14px !important;
}
.header-part .mega-cat-item.active {
  position: relative !important;
  background: linear-gradient(90deg, #EFF6FF 0%, #F8FAFC 100%) !important;
}
.header-part .mega-cat-item.active::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 6px !important;
  bottom: 6px !important;
  width: 3px !important;
  border-radius: 0 2px 2px 0 !important;
  background: #2563EB !important;
}

/* ---------- 51.3 Thẻ Sản Phẩm (.lk-pc): Card Border Glow & Shimmer Button ---------- */
.product-card.lk-pc:hover,
.product-card.lk-pc.featured-product-card:hover {
  border-color: #93C5FD !important;
  box-shadow: 0 0 0 1px #BFDBFE, 0 14px 32px -4px rgba(37, 99, 235, 0.16), 0 3px 8px rgba(16, 24, 40, 0.04) !important;
  transform: translateY(-3px) !important;
}

/* Nút Mua ngay: hiệu ứng quét sáng (Shimmer) khi hover thẻ */
.lk-pc .lk-pc-buy {
  position: relative !important;
  overflow: hidden !important;
}
.lk-pc .lk-pc-buy::after {
  content: "" !important;
  position: absolute !important;
  top: -50% !important;
  left: -70% !important;
  width: 45% !important;
  height: 200% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent) !important;
  transform: rotate(25deg) !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity .15s ease !important;
}
.product-card.lk-pc:hover .lk-pc-buy::after {
  opacity: 1 !important;
  animation: lk-shimmer-sweep 1.2s ease infinite !important;
}
@keyframes lk-shimmer-sweep {
  0% { left: -70%; }
  100% { left: 150%; }
}

/* ---------- 51.4 Flash Sale: Flip-Clock Divider & Bolt Glow Pulse ---------- */
.lk-home .flashsale-bolt-icon {
  animation: lk-bolt-pulse 2.2s infinite ease-in-out !important;
}
@keyframes lk-bolt-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.4);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 5px 16px rgba(245, 158, 11, 0.65);
  }
}

/* Đường cắt chia nửa ô đếm ngược (Flip Clock groove) */
.lk-home .flashsale-timer .timer-block {
  position: relative !important;
  overflow: hidden !important;
}
.lk-home .flashsale-timer .timer-block::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.32) !important;
  pointer-events: none !important;
}

/* ---------- 51.5 Chân Trang (Footer): Gradient Top Accent & Payment Badges ---------- */
.lk-footer {
  position: relative !important;
  background: #FFFFFF !important;
  border-top: 1px solid #E2E8F0 !important;
}
.lk-footer::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: -1px !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, #2563EB 0%, #7C3AED 50%, #06B6D4 100%) !important;
  pointer-events: none !important;
}

/* Badge đối tác thanh toán dưới chân trang */
.lk-footer-payments {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 10px !important;
  margin: 12px 0 6px !important;
}
.lk-pay-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03) !important;
  transition: border-color .15s ease, background-color .15s ease !important;
}
.lk-pay-badge:hover {
  border-color: #BFDBFE !important;
  background: #FFFFFF !important;
}
.lk-pay-badge i {
  font-size: 13px !important;
}

/* Link footer hover trượt nhẹ 2px */
.lk-footer-links a {
  display: inline-block !important;
  transition: transform .15s ease, color .15s ease !important;
}
.lk-footer-links a:hover {
  transform: translateX(2px) !important;
  color: #2563EB !important;
  text-decoration: none !important;
}

/* ---------- 51.6 Banner Sliders: Bo góc mềm & Viền tinh tế ---------- */
.lk-home .home-slider-wrapper {
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 6px 20px -4px rgba(16, 24, 40, 0.08) !important;
}