:root {
  --red: #8F2121;
  --red-dark: #6B1F1F;
  /* 2026-09-08: đổi từ #FFFDF5 (gần trắng, sát màu --card #FFFFFF nên card gần như
     "chìm" vào nền) sang tông cát ấm rõ hơn - để card trắng NỔI HẲN lên trên nền,
     đúng kiểu "nền mờ, card trắng nổi bật" của LadiPage - vẫn giữ trong họ màu ấm
     kem/vàng của thương hiệu (không đổi sang xám lạnh của LadiPage), chỉ tăng độ
     tương phản. Đổi 1 chỗ DUY NHẤT ở đây - admin/style.css khai --bg riêng (không
     link landing.css) nên phải sửa THÊM 1 LẦN NỮA bên đó để đồng bộ. */
  --bg: #F5EFE2;
  --card: #FFFFFF;
  --border: #F3E4D8;
  --text: #2A1A1A;
  --gold: #FFEA01;
  /* Gradient bóng bẩy riêng cho NÚT BẤM (khác --red/--red-dark cấu trúc dùng cho
     header/tiêu đề/viền...) - đồng bộ đúng tông đã dùng bên app desktop (Đỏ + Vàng
     Gold). Đặt riêng biến để không ảnh hưởng các chỗ khác đang dùng --red. */
  --btn-red-top: #E63946;
  --btn-red-bottom: #B3261E;
  --btn-gold-top: #FFCB3D;
  --btn-gold-bottom: #F2A900;
  --btn-orange-top: #FF7A45;
  --btn-orange-bottom: #C0392B;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.lp-header {
  background: var(--red);
  color: #fff;
  padding: 8px 24px;
}
.lp-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.lp-logo-link { display: flex; align-items: center; color: #fff; text-decoration: none; }
/* Logo là ĐIỂM NHẤN thương hiệu - cố ý để to, rõ, chiếm không gian đáng kể trong
   header thay vì nhỏ lí nhí như bản chữ cũ. File logo.png nền TRONG SUỐT thật
   (RGBA) nên đặt lên bất kỳ màu nền header nào cũng không lộ viền. */
.lp-logo-img { height: 64px; width: auto; display: block; }
.lp-header nav { display: flex; align-items: center; margin-left: auto; }
.lp-header nav a { color: #fff; text-decoration: none; margin-left: 22px; font-size: 10.5pt; }
.lp-header nav a:hover { text-decoration: underline; }
/* "Đăng nhập" - nút vàng làm điểm nhấn, tách biệt hẳn khỏi các mục menu chữ
   thường còn lại (đúng màu --gold của logo, đủ tương phản để nổi bật). */
.lp-header nav a.lp-nav-login {
  background: linear-gradient(180deg, var(--btn-gold-top), var(--btn-gold-bottom));
  color: #2A1A1A;
  font-weight: 800;
  padding: 8px 18px;
  border-radius: 20px;
  margin-left: 22px;
}
.lp-header nav a.lp-nav-login:hover {
  text-decoration: none;
  background: linear-gradient(180deg, var(--btn-gold-bottom), var(--btn-gold-top));
}

.lp-nav-toggle {
  display: none;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 20pt;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
}

/* Menu mobile: ẩn nav ngang, hiện nút ☰ mở ra danh sách xổ xuống - căn lề trái,
   mỗi mục 1 hàng riêng có icon to rõ ràng, dễ bấm bằng ngón tay (thay vì nhồi
   6 link chữ nhỏ chen chúc 1 hàng như trên desktop). */
@media (max-width: 760px) {
  .lp-header-inner { flex-wrap: nowrap; position: relative; }
  .lp-nav-toggle { display: block; }
  .lp-header nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 8px;
    background: var(--red-dark);
    border-radius: 0 0 10px 10px;
    padding: 6px 0;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
    z-index: 50;
  }
  .lp-header nav.open { display: flex; flex-direction: column; }
  .lp-header nav a {
    margin-left: 0;
    padding: 13px 22px;
    font-size: 11.5pt;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .lp-header nav a:last-child { border-bottom: none; }
  .lp-header nav a.lp-nav-login {
    margin: 8px 16px 4px;
    padding: 12px 22px;
    text-align: center;
    border-bottom: none;
  }
}

.lp-who { background: var(--card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 40px 24px; }
.lp-who-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 32px; }
.lp-who-col h2 { font-size: 14pt; margin-bottom: 12px; }
.lp-who-col ul { margin: 0 0 12px; padding-left: 20px; }
.lp-who-col li { font-size: 10.5pt; color: #555; line-height: 1.6; margin-bottom: 6px; }
.lp-who-col p { font-size: 10.5pt; color: #555; line-height: 1.6; }

.lp-how { max-width: 1100px; margin: 0 auto; padding: 50px 24px; }
.lp-how-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; margin-top: 24px; }
.lp-how-step { text-align: center; padding: 16px; }
.lp-how-num {
  width: 40px; height: 40px; border-radius: 50%; background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13pt;
  margin: 0 auto 12px;
}
.lp-how-step h3 { font-size: 11.5pt; margin: 0 0 6px; }
.lp-how-step p { font-size: 10pt; color: #555; line-height: 1.5; margin: 0; }

.lp-faq { max-width: 800px; margin: 0 auto; padding: 40px 24px 60px; }
.lp-faq-item { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; background: var(--card); overflow: hidden; }
.lp-faq-question {
  padding: 14px 18px; font-weight: 700; cursor: pointer; display: flex; justify-content: space-between;
  align-items: center; font-size: 11pt;
}
.lp-faq-answer { padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height 0.25s ease, padding 0.25s ease; font-size: 10.5pt; color: #555; line-height: 1.6; }
.lp-faq-item.open .lp-faq-answer { padding: 0 18px 16px; max-height: 400px; }
.lp-faq-item.open .lp-faq-arrow { transform: rotate(180deg); }
.lp-faq-arrow { transition: transform 0.25s ease; }

.lp-hero {
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 24px 40px;
  text-align: center;
}
.lp-hero h1 { font-size: 26pt; line-height: 1.3; margin-bottom: 16px; }
.lp-hero-sub { font-size: 12.5pt; color: #555; line-height: 1.6; margin-bottom: 28px; }

.lp-cta {
  display: inline-block;
  background: linear-gradient(180deg, var(--btn-red-top), var(--btn-red-bottom));
  color: #fff;
  text-decoration: none;
  padding: 14px 30px;
  border-radius: 10px;
  font-size: 12pt;
  font-weight: 700;
  border: none;
  cursor: pointer;
}
.lp-cta:hover { background: linear-gradient(180deg, var(--btn-red-bottom), var(--btn-red-top)); }
.lp-cta-block { display: block; width: 100%; margin-top: 12px; }

.lp-features {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 24px 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.lp-features-title { grid-column: 1 / -1; text-align: center; margin-bottom: 10px; }
.lp-features-title h2 { margin: 0 0 6px; }
.lp-features-title p { margin: 0; }
.lp-feature {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}
.lp-feature-icon { font-size: 22pt; margin-bottom: 8px; }
.lp-feature h3 { margin: 0 0 6px; font-size: 12pt; color: var(--red); }
.lp-feature p { margin: 0; font-size: 10.5pt; color: #555; line-height: 1.5; }

.lp-pricing { max-width: 1000px; margin: 0 auto; padding: 30px 24px 60px; text-align: center; }
.lp-pricing h2 { font-size: 18pt; margin-bottom: 24px; }
.lp-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  text-align: left;
}
.lp-plan-card {
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 26px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.lp-plan-card .lp-cta { margin-top: auto; }
.lp-plan-card-highlight { border-color: var(--red); box-shadow: 0 4px 16px rgba(143, 33, 33, 0.12); }
.lp-plan-badge {
  position: absolute;
  top: -12px;
  right: 16px;
  background: var(--red);
  color: #fff;
  font-size: 10pt;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
}
.lp-plan-card h3 { margin: 0 0 10px; font-size: 13pt; }
.lp-plan-benefits { margin: 0 0 18px; padding-left: 18px; }
.lp-plan-benefits li { font-size: 10pt; color: #555; line-height: 1.5; margin-bottom: 4px; }
.lp-plan-price { font-size: 20pt; font-weight: 800; color: var(--red); margin-bottom: 4px; }
.lp-plan-days { font-size: 10pt; color: #777; margin-bottom: 18px; }

.lp-overlay {
  position: fixed; inset: 0;
  background: rgba(42, 26, 26, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
.lp-checkout-box {
  background: var(--card);
  border-radius: 14px;
  padding: 28px;
  width: 480px;
  max-width: 94vw;
  position: relative;
  max-height: 92vh;
  overflow-y: auto;
  /* Thanh cuộn hiện rõ màu thương hiệu thay vì thanh mảnh gần như vô hình mặc định -
     khách dễ nhận ra còn nội dung/nút bấm phía dưới cần cuộn xuống mới thấy. */
  scrollbar-width: thin;
  scrollbar-color: var(--red) var(--bg);
}
.lp-checkout-box::-webkit-scrollbar { width: 8px; }
.lp-checkout-box::-webkit-scrollbar-track { background: var(--bg); border-radius: 8px; }
.lp-checkout-box::-webkit-scrollbar-thumb { background: var(--red); border-radius: 8px; }
@media (max-width: 560px) {
  .lp-checkout-box { width: 94vw; padding: 22px 18px; }
}
@media (max-height: 720px) {
  .lp-checkout-box { padding: 20px 28px; }
  .lp-qr { max-width: 200px; margin: 8px auto; }
}
.lp-email-help {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 4px 0 14px;
}
.lp-email-help p { margin: 0 0 6px; font-size: 10pt; }
.lp-email-help ol { margin: 0 0 6px; padding-left: 18px; }
.lp-email-help li { font-size: 10pt; color: #555; line-height: 1.5; margin-bottom: 3px; }
.lp-close-btn {
  position: absolute; top: 12px; right: 12px;
  background: none; border: none; font-size: 14pt; cursor: pointer; color: #999;
}
.lp-checkout-box input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 11pt; margin: 10px 0;
}
.lp-qr { width: 100%; max-width: 260px; display: block; margin: 12px auto; border-radius: 8px; }
.lp-muted { color: #777; font-size: 10.5pt; }
.hidden { display: none !important; }

.lp-footer {
  text-align: center;
  padding: 30px 24px;
  color: #888;
  font-size: 10pt;
  border-top: 1px solid var(--border);
}
.lp-footer a { color: var(--red); text-decoration: none; }

/* ================================================================
   LỚP TINH CHỈNH GIAO DIỆN (2026-09-08) - cảm hứng từ dashboard LadiPage,
   cùng đợt với portal.css/admin/style.css (xem chú thích đầy đủ lý do/nguyên
   tắc ở đầu khối tương ứng trong portal.css - không lặp lại ở đây). File này
   là nơi các class .lp-* (dùng chung bởi trang chủ marketing VÀ màn hình
   trước-đăng-nhập của portal) được ĐỊNH NGHĨA GỐC nên chỉ cần 1 bản duy nhất
   ở đây, portal.css/admin không khai trùng nữa. */
:root {
  /* Bóng đậm hơn bản đầu (2026-09-08, chủ dự án: "không thấy thay đổi gì cả" - bản
     đầu quá nhẹ, khó thấy khác biệt trên nền --bg gần trắng) - tăng rõ độ mờ/độ lan
     để card "nổi" thấy ngay không cần nhìn kỹ. */
  --shadow-sm: 0 2px 8px rgba(42, 26, 26, 0.11), 0 1px 3px rgba(42, 26, 26, 0.07);
  --shadow-md: 0 10px 28px rgba(42, 26, 26, 0.15);
  --shadow-lg: 0 20px 50px rgba(42, 26, 26, 0.22);
}

.lp-header { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); position: relative; z-index: 5; }

/* Card tính năng/FAQ/gói giá: nổi nhẹ + nhấc lên khi hover (feature/plan mới
   bấm được - gói giá dẫn tới nút mua, feature chỉ để đọc nên không cần
   transform, chỉ shadow tăng cho rõ có card). */
.lp-feature, .lp-faq-item, .lp-plan-card { box-shadow: var(--shadow-sm); transition: box-shadow 0.2s ease, transform 0.2s ease; }
.lp-feature:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.lp-plan-card:hover, .lp-plan-card-highlight { box-shadow: var(--shadow-md); }
.lp-plan-card:hover { transform: translateY(-2px); }

/* Nút CTA chính: bóng đỏ nổi bật + nhấc nhẹ khi hover, đồng bộ với
   button.primary trong portal.css/admin/style.css. */
.lp-cta { box-shadow: 0 3px 10px rgba(179, 38, 30, 0.28); transition: box-shadow 0.15s ease, transform 0.15s ease; }
.lp-cta:hover { box-shadow: 0 5px 14px rgba(179, 38, 30, 0.34); transform: translateY(-1px); }
.lp-cta:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(179, 38, 30, 0.28); }

/* Popup checkout: bóng sâu tách khỏi overlay tối phía sau. */
.lp-checkout-box { box-shadow: var(--shadow-lg); }
.lp-checkout-box input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(143, 33, 33, 0.13);
}

/* FAQ: nhấn nhẹ câu hỏi khi hover để rõ là bấm mở được. */
.lp-faq-question:hover { color: var(--red); }