/* ============================================================
   THẾ GIỚI SKILL — Landing page "Warm Tech Editorial"
   Chỉ áp dụng cho trang chủ (body.lp). Không ảnh hưởng catalog/
   trang chi tiết skill — các trang đó không nạp file này.
   ============================================================ */

body.lp{
  /* ---- Design tokens riêng cho landing ---- */
  --bg: #F5F8FF;
  --bg-2: #FFFFFF;
  --surface: #FFFFFF;
  --surface-hover: #F2F7FF;
  --border: #E2E9F6;
  --text: #0B1B3F;
  --text-2: #4A5B7C;
  --muted: #7C8BA8;
  --cyan: #2563EB;      /* blue — dùng lại tên biến cũ cho các class dùng chung (focus ring, brand mark…) */
  --mint: #1E9E7C;      /* xanh trạng thái "đã thanh toán" */
  --cta: #FF9500;
  --cta-hover: #FF7A00;
  --gold: #FFC93C;
  --gold-ink: #2A1600;
  --royal: #1E3A8A;
  --red: #E11D48;
  --navy: #132C6B;
  --blue-mist: #EEF3FF;
  --font-head: 'Be Vietnam Pro', 'Segoe UI', sans-serif;
  --font-body: 'Be Vietnam Pro', 'Segoe UI', sans-serif;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;

  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
}
@media (min-width: 960px){ body.lp{ font-size: 18px; } }

body.lp .wrap{ padding-inline: clamp(20px, 5vw, 64px); }
body.lp section{ padding-block: 64px; }
@media (min-width: 900px){ body.lp section{ padding-block: 112px; } }

body.lp h1,body.lp h2,body.lp h3,body.lp h4{ font-family: var(--font-body); letter-spacing: -.01em; }
body.lp h1{ font-size: clamp(2.4rem, 1.65rem + 3.1vw, 4.75rem); font-weight: 800; line-height: 1.05; }
body.lp h2{ font-size: clamp(1.9rem, 1.5rem + 1.7vw, 3.25rem); font-weight: 800; line-height: 1.12; }
body.lp h3{ font-weight: 700; }
body.lp p{ color: var(--text-2); }
body.lp a{ color: inherit; }

/* ---- Buttons ---- */
body.lp .btn{ min-height: 48px; font-size: .96rem; padding-inline: 26px; }
body.lp .btn.btn--sm{ min-height: 38px; font-size: .82rem; padding-inline: 16px; }
@media (max-width: 420px){
  body.lp .brand__tag{ display: none; }
}
body.lp .btn--cta{ background: var(--cta); color: #fff; box-shadow: 0 14px 28px -14px rgba(255,107,74,.55); }
body.lp .btn--cta:hover{ background: var(--cta-hover); box-shadow: 0 16px 32px -12px rgba(255,107,74,.6); }
body.lp .btn--outline{ border-color: var(--border); color: var(--text); background: transparent; }
body.lp .btn--outline:hover{ border-color: var(--text-2); background: var(--blue-mist); }
body.lp :focus-visible{ outline: 2px solid var(--cyan); outline-offset: 3px; }

/* ---- Eyebrow / kicker ---- */
.lp-eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: #9DB8FF; background: rgba(59,130,246,.16); border: 1px solid rgba(59,130,246,.36);
  padding: 7px 14px; border-radius: 999px;
}
.lp-kicker{
  display: inline-block; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--cta); margin-bottom: 14px; font-weight: 600;
}
.lp-lede{ margin-top: 14px; font-size: 1.05rem; color: var(--text-2); max-width: 62ch; }
.lp-head{ max-width: 720px; margin-bottom: 44px; }
.lp-head.center{ margin-inline: auto; text-align: center; }
.lp-head.center .lp-lede{ margin-inline: auto; }

/* ---- Header (reskin của header dùng chung) ---- */
body.lp header{
  background: rgba(247,245,239,.88);
  border-bottom: 1px solid var(--border);
}
body.lp .brand__mark{ background: linear-gradient(150deg, var(--cyan), #1E4FD1); box-shadow: 0 4px 16px -4px rgba(59,130,246,.45); color: #fff; }
body.lp .brand__tag{ color: var(--muted); }
body.lp .nav__links a{ color: var(--text-2); }
body.lp .nav__links a:hover{ color: var(--text); }
body.lp .nav__toggle{ background: var(--surface); border-color: var(--border); color: var(--text); }
body.lp .nav__mobile{ background: var(--bg); border-top: 1px solid var(--border); }
body.lp .nav__mobile a{ color: var(--text); border-bottom-color: var(--border); }

/* ---- Hero ---- */
.lp-hero{
  --bg: var(--navy); --text: #FFFFFF; --text-2: rgba(255,255,255,.72); --border: rgba(255,255,255,.16); --muted: rgba(255,255,255,.5);
  background: var(--bg); color: var(--text);
  padding-block: 56px 0;
  overflow: hidden;
}
.lp-hero__grid{ display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; padding-bottom: 56px; }
.lp-hero__founder{
  display: inline-flex; align-items: center; gap: 10px; margin-top: 26px;
  background: rgba(255,255,255,.06); border: 1px solid var(--border); border-radius: 999px; padding: 6px 16px 6px 6px;
}
.lp-hero__founder img{ width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.lp-hero__founder b{ display: block; font-size: .82rem; color: #fff; }
.lp-hero__founder span{ display: block; font-family: var(--font-mono); font-size: .66rem; color: rgba(255,255,255,.55); }
.lp-hero h1{ margin-top: 20px; color: #fff; white-space: pre-line; }
.lp-hero__sub{ margin-top: 20px; font-size: 1.08rem; color: var(--text-2); max-width: 52ch; }
.lp-hero__ctas{ display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.lp-hero__trust{ margin-top: 18px; font-family: var(--font-mono); font-size: .78rem; color: var(--muted); }

/* ---- Hero visual: ảnh KOL thật ---- */
.lp-hero__photo{
  position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(255,255,255,.14);
  aspect-ratio: 1659/948; background: rgba(255,255,255,.03);
}
.lp-hero__photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-kol-tag{
  position: absolute; left: 14px; bottom: 14px; z-index: 1;
  font-family: var(--font-mono); font-size: .68rem; color: #fff; background: rgba(11,18,32,.72);
  border: 1px solid rgba(255,255,255,.18); padding: 5px 12px; border-radius: 999px;
}
/* ---- Khung ảnh KOL 4:5 dùng trong các section hỗ trợ (overview, how-it-works) ---- */
.lp-kol-frame{
  max-width: 460px; margin-inline: auto; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border); box-shadow: 0 24px 60px -32px rgba(16,24,40,.35);
}
.lp-kol-frame img{ width: 100%; height: auto; display: block; }
@media (max-width: 900px){
  .lp-hero__grid{ grid-template-columns: 1fr; gap: 36px; padding-bottom: 40px; }
}

/* ---- Problem (3 items) ---- */
.lp-problem__grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.lp-problem__card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 28px 26px; }
.lp-problem__num{ font-family: var(--font-mono); font-size: 1.6rem; font-weight: 700; color: var(--cta); }
.lp-problem__card p{ margin-top: 12px; color: var(--text); font-size: 1rem; line-height: 1.55; }
@media (max-width: 900px){ .lp-problem__grid{ grid-template-columns: 1fr; } }

/* ---- How it works (4 steps) ---- */
.lp-steps__grid{ display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.lp-step{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 24px 22px; position: relative; }
.lp-step__num{ font-family: var(--font-mono); font-size: .74rem; letter-spacing: .06em; color: var(--cyan); font-weight: 700; }
.lp-step h3{ margin-top: 10px; font-size: 1.05rem; }
.lp-step p{ margin-top: 8px; font-size: .9rem; }
.lp-step__arrow{ display: none; }
@media (max-width: 900px){
  .lp-steps__grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .lp-steps__grid{ grid-template-columns: 1fr; }
}

/* ---- Skill categories ---- */
.lp-cat-grid{ display: grid; grid-template-columns: repeat(6,1fr); gap: 14px; margin-bottom: 56px; }
.lp-cat-card{
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden;
  transition: border-color .15s ease, transform .15s ease;
}
.lp-cat-card:hover{ border-color: var(--cyan); transform: translateY(-2px); }
.lp-cat-card__thumb{ aspect-ratio: 4/5; background: var(--blue-mist); }
.lp-cat-card__thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-cat-card__body{ padding: 14px 14px 16px; }
.lp-cat-card h4{ font-size: .88rem; font-weight: 700; }
@media (max-width: 1000px){ .lp-cat-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 560px){ .lp-cat-grid{ grid-template-columns: repeat(2,1fr); } }

/* ---- Skill nổi bật (grid 6, JSON) ---- */
.lp-skill-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.lp-skill-card{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s ease, transform .15s ease;
}
.lp-skill-card:hover{ border-color: var(--cyan); transform: translateY(-3px); }
.lp-skill-card__link{ display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }
.lp-skill-card__art{ position: relative; aspect-ratio: 16/9; background: var(--blue-mist); }
.lp-skill-card__art img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-skill-card__price{ position: absolute; top: 12px; right: 12px; font-family: var(--font-mono); font-weight: 700; font-size: .74rem; background: var(--cta); color: #fff; padding: 3px 9px; border-radius: 999px; }
.lp-skill-card__body{ padding: 18px 20px 6px; display: flex; flex-direction: column; gap: 8px; }
.lp-skill-card__cat{ font-family: var(--font-mono); font-size: .66rem; letter-spacing: .04em; text-transform: uppercase; color: var(--cyan); }
.lp-skill-card__body h3{ font-size: 1.02rem; }
.lp-skill-card__body p{ font-size: .88rem; line-height: 1.55; }
.lp-skill-card__ctas{ display: flex; gap: 8px; padding: 14px 20px 20px; }
.lp-skill-card__ctas .btn{ flex: 1; min-height: 42px; padding: 9px 12px; font-size: .82rem; }
@media (max-width: 900px){ .lp-skill-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .lp-skill-grid{ grid-template-columns: 1fr; } }

/* ---- Featured showcase (3 case-study cards) ---- */
.lp-showcase{ display: flex; flex-direction: column; gap: 24px; }
.lp-showcase__card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px; display: grid; grid-template-columns: 220px 1fr; gap: 28px; }
.lp-showcase__media{ border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3; background: var(--blue-mist); }
.lp-showcase__media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-showcase__tag{ font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cta); font-weight: 700; }
.lp-showcase__card h3{ margin-top: 6px; font-size: 1.2rem; }
.lp-showcase__grid{ display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 18px; }
.lp-showcase__step{ border-left: 2px solid var(--border); padding-left: 12px; }
.lp-showcase__step .k{ font-family: var(--font-mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.lp-showcase__step .v{ margin-top: 6px; font-size: .86rem; color: var(--text); line-height: 1.5; }
.lp-showcase__step.is-result{ border-left-color: var(--cta); }
.lp-showcase__step.is-result .k{ color: var(--cta); }
.lp-showcase__foot{ margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.lp-showcase__tools{ font-size: .82rem; color: var(--text-2); }
@media (max-width: 800px){
  .lp-showcase__card{ grid-template-columns: 1fr; }
  .lp-showcase__grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px){ .lp-showcase__grid{ grid-template-columns: 1fr; } }

/* ---- Comparison ---- */
.lp-compare__grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.lp-compare__col{ border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 26px; background: var(--surface); }
.lp-compare__col h3{ font-size: 1.05rem; margin-bottom: 18px; }
.lp-compare__col ul{ display: flex; flex-direction: column; gap: 12px; }
.lp-compare__col li{ font-size: .94rem; padding-left: 20px; position: relative; }
.lp-compare__col li::before{ content: "–"; position: absolute; left: 0; color: var(--muted); }
.lp-compare__col.is-dark{
  --bg: var(--navy); --text: #fff; --text-2: rgba(255,255,255,.78); --border: rgba(255,255,255,.14); --muted: rgba(255,255,255,.5);
  background: var(--bg); color: var(--text); border-color: var(--border);
}
.lp-compare__col.is-dark li::before{ content: "✓"; color: var(--cta); font-weight: 700; }
.lp-compare__col.is-dark li{ color: #fff; }
@media (max-width: 760px){ .lp-compare__grid{ grid-template-columns: 1fr; } }

/* ---- Offer / Pricing ---- */
.lp-offer__lead{
  background: var(--surface); border: 2px solid var(--cta); border-radius: var(--radius-lg);
  padding: 32px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; margin-bottom: 20px;
}
.lp-offer__lead-label{ font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cta); font-weight: 700; }
.lp-offer__lead h3{ margin-top: 8px; font-size: 1.3rem; }
.lp-offer__lead p{ margin-top: 10px; max-width: 52ch; }
.lp-offer__price{ font-family: var(--font-mono); font-size: 1.8rem; font-weight: 700; color: var(--text); white-space: nowrap; }
.lp-offer__grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.lp-offer__card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px 22px; display: flex; flex-direction: column; gap: 12px; }
.lp-offer__card.is-dark{
  --bg: var(--navy); --text: #fff; --text-2: rgba(255,255,255,.72); --border: rgba(255,255,255,.14);
  background: var(--bg); color: var(--text); border-color: var(--border);
}
.lp-offer__card-label{ font-family: var(--font-mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cta); }
.lp-offer__card.is-dark .lp-offer__card-label{ color: #9DB8FF; }
.lp-offer__card h4{ font-size: 1rem; }
.lp-offer__card .cost{ font-family: var(--font-mono); font-size: 1.35rem; font-weight: 700; }
.lp-offer__card p{ font-size: .86rem; flex: 1; }
.lp-offer__card.is-dark p{ color: rgba(255,255,255,.68); }
@media (max-width: 900px){ .lp-offer__lead{ grid-template-columns: 1fr; text-align: left; } .lp-offer__grid{ grid-template-columns: 1fr; } }

/* ---- Founder ---- */
.lp-founder{ display: flex; gap: 30px; align-items: center; max-width: 780px; margin-inline: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 34px; text-align: left; }
.lp-founder__avatar{ flex: none; width: 92px; height: 92px; border-radius: 50%; overflow: hidden; border: 3px solid var(--blue-mist); }
.lp-founder__avatar img{ width: 100%; height: 100%; object-fit: cover; }
.lp-founder__badges{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.lp-founder__badges span{ font-family: var(--font-mono); font-size: .72rem; color: var(--cyan); background: var(--blue-mist); border-radius: 999px; padding: 5px 12px; }
@media (max-width: 640px){ .lp-founder{ flex-direction: column; text-align: center; } }

/* ---- FAQ ---- */
.lp-faq__grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lp-faq__item{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px 22px; }
.lp-faq__item h4{ font-size: .98rem; }
.lp-faq__item p{ margin-top: 8px; font-size: .9rem; }
@media (max-width: 760px){ .lp-faq__grid{ grid-template-columns: 1fr; } }

/* ---- CTA band ---- */
.lp-cta-band{
  --bg: var(--navy); --text: #fff; --text-2: rgba(255,255,255,.72); --border: rgba(255,255,255,.14);
  background: var(--bg); color: var(--text); text-align: center;
}
.lp-cta-band__inner{ max-width: 680px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.lp-cta-band h2{ color: #fff; }
.lp-cta-band .lp-hero__trust{ color: rgba(255,255,255,.55); }

/* ---- Footer (navy) ---- */
body.lp footer{
  --bg: var(--navy); --text: #fff; --text-2: rgba(255,255,255,.7); --border: rgba(255,255,255,.14); --muted: rgba(255,255,255,.5);
  background: var(--bg); color: var(--text); border-top: none;
}
body.lp footer .footer-col a{ color: #fff; }
body.lp footer .footer-col a:hover{ color: #9DB8FF; }

/* ---- Modais (checkout / tư vấn) giữ layout, đổi tông sáng ---- */
body.lp .modal{ background: var(--surface); border-color: var(--border); }
body.lp .qr-view img{ background: #fff; }

/* ---- Trang catalog / chi tiết skill: đồng bộ tông sáng cho các class dùng chung ---- */
body.lp .brand__mark{ box-shadow: 0 4px 16px -4px rgba(59,130,246,.45); }
body.lp .chip{ background: var(--surface); border-color: var(--border); color: var(--text-2); }
body.lp .chip[aria-pressed="true"]{ background: var(--blue-mist); border-color: var(--cyan); color: var(--cyan); }
body.lp .catalog-toolbar input[type="search"]{ background: var(--surface); border-color: var(--border); color: var(--text); }
body.lp .catalog-sort select{ background: var(--surface); border-color: var(--border); color: var(--text); }
body.lp .badge--cat{ color: var(--cyan); border-color: rgba(59,130,246,.35); background: var(--blue-mist); }
body.lp .skill-card__art::before{ background: radial-gradient(120% 130% at 18% -10%, rgba(59,130,246,.12), transparent 62%); }
body.lp .skill-card:nth-child(even) .skill-card__art{ --glow: rgba(59,130,246,.12); }
body.lp .skill-card__art{ background: linear-gradient(160deg, var(--surface-hover), var(--bg-2)); }
body.lp .skill-card__tag{ background: rgba(11,18,32,.72); border-color: rgba(255,255,255,.16); color: #fff; }
body.lp .breadcrumb a:hover{ color: var(--cyan); }
body.lp .compare-table th{ background: var(--surface); color: var(--muted); }
body.lp .compare-table td:last-child{ color: var(--cyan); }

/* ============================================================
   THEME theo hệ thiết kế hoc.hotrituong.com
   (Be Vietnam Pro 900 · xanh hoàng gia · nút vàng/đỏ · nền #F5F8FF)
   Chỉ đổi giao diện — không đổi luồng/JS.
   ============================================================ */
body.lp h1,body.lp h2,body.lp h3,body.lp h4{ color: var(--text); font-weight: 900; }
body.lp h3,body.lp h4{ font-weight: 800; }
body.lp h2{ font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.9rem); line-height: 1.16; }

body.lp .btn{ border-radius: 14px; font-weight: 800; }
body.lp .btn--sm{ border-radius: 11px; }
body.lp .btn--cta{ background: linear-gradient(180deg,#FFC93C,#FF9500); color: var(--gold-ink); box-shadow: 0 10px 24px rgba(255,149,0,.30); }
body.lp .btn--cta:hover{ background: linear-gradient(180deg,#FFD35C,#FF9F1A); box-shadow: 0 14px 32px rgba(255,149,0,.42); transform: translateY(-2px); }
body.lp .btn--red{ background: linear-gradient(180deg,#FF4D6A,#E11D48); color: #fff; box-shadow: 0 10px 24px rgba(225,29,72,.28); }
body.lp .btn--red:hover{ transform: translateY(-2px); }
body.lp .btn--outline{ background: #fff; color: var(--royal); border: 1.5px solid #CFDBF0; }
body.lp .btn--outline:hover{ border-color: var(--cyan); background: #F2F7FF; }

body.lp header{ background: rgba(255,255,255,.9); border-bottom: 1px solid var(--border); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); }
body.lp .nav{ min-height: 72px; }
body.lp .brand__mark{ width: 44px; height: 44px; border-radius: 13px; font-weight: 900; font-size: 15px; color: #fff; display: grid; place-items: center; background: linear-gradient(135deg, var(--royal), var(--cyan)); box-shadow: 0 6px 16px rgba(37,99,235,.3); }
body.lp .brand__word{ font-weight: 900; letter-spacing: .02em; text-transform: uppercase; color: #132C6B; }
body.lp .brand__tag{ font-family: var(--font-body); font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #EA580C; }
body.lp .nav__links a{ color: var(--text-2); font-weight: 600; }
body.lp .nav__links a:hover{ color: var(--cyan); }

.lp-kicker{ font-family: var(--font-body); font-weight: 800; letter-spacing: .12em; color: var(--cyan); }
body.lp .lp-hero .lp-eyebrow{ font-family: var(--font-body); font-weight: 800; letter-spacing: .12em; color: var(--gold); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.28); }

body.lp .lp-hero{
  background:
    radial-gradient(700px 420px at 85% 10%, rgba(125,211,252,.35), transparent 60%),
    radial-gradient(600px 400px at 0% 100%, rgba(255,184,0,.12), transparent 60%),
    linear-gradient(135deg, #132C6B 0%, #1E40AF 55%, #2563EB 100%);
  padding-block: 56px 48px;
}
body.lp .lp-hero h1{ color: #fff; text-transform: uppercase; font-weight: 900; line-height: 1.08; }
.lp-hero h1 .l1{ display: block; font-size: clamp(2.2rem, 1.2rem + 4.2vw, 4.2rem); color: #fff; }
.lp-hero h1 .l2{ display: block; margin-top: .08em; font-size: clamp(1.55rem, 1rem + 2.6vw, 2.9rem); background: linear-gradient(180deg,#FFD65C,#FFB800); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-hero__sub{ color: #D6E4FF; }
.lp-hero__chips{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.lp-hero__chips li{ font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 8px 13px; border-radius: 999px; background: #fff; color: #132C6B; box-shadow: 0 6px 16px rgba(11,27,63,.18); }
.lp-hero__chips li:last-child{ background: linear-gradient(180deg,#FFC93C,#FF9500); color: var(--gold-ink); }
.lp-hero__photo{ border: 4px solid #fff; border-radius: 28px; box-shadow: 0 24px 60px rgba(11,27,63,.35); outline: 1.5px dashed rgba(255,255,255,.45); outline-offset: 12px; }

.lp-strip{ margin-top: 8px; display: grid; grid-template-columns: 1fr 1.6fr 1.6fr auto; gap: 0; align-items: center; background: #fff; border-radius: 24px; box-shadow: 0 24px 60px rgba(11,27,63,.22); padding: 22px 26px; }
.lp-strip__item{ padding: 4px 24px; border-right: 1px solid var(--border); }
.lp-strip__item:first-child{ padding-left: 0; }
.lp-strip__k{ display: block; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); }
.lp-strip__item b{ display: block; margin-top: 4px; font-size: .98rem; line-height: 1.35; font-weight: 800; color: var(--text); }
.lp-strip .btn{ margin-left: 24px; white-space: nowrap; }
@media (max-width: 1000px){
  .lp-strip{ grid-template-columns: 1fr; gap: 14px; padding: 20px; }
  .lp-strip__item{ border-right: 0; border-bottom: 1px solid var(--border); padding: 0 0 14px; }
  .lp-strip .btn{ margin-left: 0; }
}

.lp-problem__card,.lp-step,.lp-skill-card,.lp-cat-card,.lp-showcase__card,.lp-compare__col,.lp-offer__card,.lp-faq__item,.lp-founder{
  border-radius: 24px; border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(11,27,63,.04), 0 10px 30px rgba(11,27,63,.07);
}
.lp-cat-card:hover,.lp-skill-card:hover{ border-color: #93B4F5; }
.lp-problem__num,.lp-showcase__tag,.lp-offer__lead-label,.lp-offer__card-label{ font-family: var(--font-body); font-weight: 800; letter-spacing: .1em; }
.lp-problem__num{ color: #FF7A00; font-weight: 900; }
.lp-step__num,.lp-skill-card__cat{ font-family: var(--font-body); font-weight: 800; letter-spacing: .08em; color: var(--cyan); }
.lp-skill-card__price{ background: linear-gradient(180deg,#FFC93C,#FF9500); color: var(--gold-ink); font-family: var(--font-body); font-weight: 900; }
.lp-offer__lead{ border: 2px solid #FFB800; border-radius: 24px; box-shadow: 0 24px 60px rgba(255,149,0,.16); }
.lp-offer__price,.lp-offer__card .cost{ color: #FF7A00; font-family: var(--font-body); font-weight: 900; }
.lp-offer__card.is-dark .cost{ color: #FFC93C; }
.lp-showcase__step.is-result{ border-left-color: #FF9500; }
.lp-showcase__step.is-result .k{ color: #FF7A00; }
.lp-founder__badges span{ background: #DBEAFE; color: #1E3A8A; font-family: var(--font-body); font-weight: 800; }

body.lp .lp-cta-band{ background: linear-gradient(135deg,#132C6B 0%,#1E40AF 60%,#2563EB 100%); }
body.lp .lp-compare__col.is-dark,body.lp .lp-offer__card.is-dark{ background: linear-gradient(160deg,#132C6B,#1E40AF); }
.lp-compare__col.is-dark li::before{ color: #FFC93C; }
body.lp footer{ background: #0B1B3F; }
body.lp footer .brand__word{ color: #fff; }

body.lp .kicker{ font-family: var(--font-body); font-weight: 800; letter-spacing: .12em; color: var(--cyan); }
body.lp .sidebar-card .price{ color: #FF7A00; font-family: var(--font-body); font-weight: 900; }
body.lp .skill-card__price{ background: linear-gradient(180deg,#FFC93C,#FF9500); color: var(--gold-ink); font-family: var(--font-body); font-weight: 900; }
body.lp .skill-card,body.lp .sidebar-card{ border-radius: 24px; box-shadow: 0 1px 2px rgba(11,27,63,.04), 0 10px 30px rgba(11,27,63,.07); }
body.lp .badge--cat{ background: #DBEAFE; color: #1E3A8A; border-color: #BFD4F7; }
body.lp .chip[aria-pressed="true"]{ background: #DBEAFE; border-color: var(--cyan); color: #1E3A8A; }

/* Sửa: nút viền trên nền xanh + thanh số liệu dùng màu tối */
body.lp .lp-hero .btn--outline,body.lp .lp-cta-band .btn--outline,body.lp .lp-offer__card.is-dark .btn--outline{ background: rgba(255,255,255,.12); color: #fff; border: 1.5px solid rgba(255,255,255,.5); }
body.lp .lp-hero .btn--outline:hover,body.lp .lp-cta-band .btn--outline:hover,body.lp .lp-offer__card.is-dark .btn--outline:hover{ background: rgba(255,255,255,.22); border-color: #fff; }
.lp-strip{ --text: #0B1B3F; --text-2: #4A5B7C; --border: #E2E9F6; color: var(--text); }
.lp-strip__item b{ color: #0B1B3F; }
body.lp .lp-offer__price{ color: #FF7A00; }
/* Khung ảnh thumbnail skill 16:9 (chuẩn 1600x900) */
body.lp .skill-card__art{ height: auto; aspect-ratio: 16/9; }

/* ============================================================
   HIỆU ỨNG KHUNG PHÁT SÁNG (viền gradient + quầng sáng)
   Màu: xanh hoàng gia + cyan, điểm vàng cho thẻ nổi bật/hover.
   ============================================================ */
:root{ --glow-blue: 37,99,235; --glow-cyan: 56,189,248; --glow-gold: 255,184,0; }

body.lp .skill-card,
body.lp .lp-skill-card{
  position: relative;
  border: 1.5px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,#7DD3FC 0%,#2563EB 55%,#93B4F5 100%) border-box;
  box-shadow:
    0 0 0 1px rgba(var(--glow-blue),.10),
    0 0 26px rgba(var(--glow-blue),.22),
    0 18px 44px rgba(11,27,63,.12);
  transition: box-shadow .28s ease, transform .28s ease;
}
body.lp .skill-card:hover,
body.lp .lp-skill-card:hover{
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(var(--glow-cyan),.35),
    0 0 42px rgba(var(--glow-blue),.42),
    0 0 90px rgba(var(--glow-cyan),.22),
    0 24px 56px rgba(11,27,63,.18);
}

/* Thẻ nổi bật: viền xanh→vàng, quầng sáng đập nhẹ */
body.lp .skill-card.is-featured,
body.lp .lp-skill-card.is-featured{
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,#7DD3FC 0%,#2563EB 45%,#FFC93C 100%) border-box;
  box-shadow:
    0 0 0 1px rgba(var(--glow-gold),.28),
    0 0 34px rgba(var(--glow-blue),.34),
    0 0 70px rgba(var(--glow-gold),.16),
    0 20px 50px rgba(11,27,63,.14);
  animation: cardGlow 3.8s ease-in-out infinite;
}
@keyframes cardGlow{
  0%,100%{ box-shadow: 0 0 0 1px rgba(var(--glow-gold),.28), 0 0 34px rgba(var(--glow-blue),.30), 0 0 60px rgba(var(--glow-gold),.12), 0 20px 50px rgba(11,27,63,.14); }
  50%    { box-shadow: 0 0 0 1px rgba(var(--glow-gold),.45), 0 0 46px rgba(var(--glow-blue),.46), 0 0 90px rgba(var(--glow-gold),.24), 0 20px 50px rgba(11,27,63,.14); }
}
.feat-badge{
  font-style: normal; display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  background: linear-gradient(180deg,#FFC93C,#FF9500); color: #2A1600; font-size: .62rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase;
}

/* Thẻ nhóm + khung giá nổi bật + thẻ giá tối */
body.lp .lp-cat-card{
  border: 1.5px solid transparent;
  background: linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg,#7DD3FC,#2563EB 60%,#93B4F5) border-box;
  box-shadow: 0 0 22px rgba(var(--glow-blue),.18), 0 12px 30px rgba(11,27,63,.10);
  transition: box-shadow .28s ease, transform .28s ease;
}
body.lp .lp-cat-card:hover{ transform: translateY(-4px); box-shadow: 0 0 38px rgba(var(--glow-blue),.40), 0 0 80px rgba(var(--glow-cyan),.20), 0 18px 40px rgba(11,27,63,.16); }
body.lp .lp-offer__lead{ box-shadow: 0 0 0 1px rgba(var(--glow-gold),.35), 0 0 40px rgba(var(--glow-gold),.28), 0 0 90px rgba(var(--glow-gold),.14), 0 24px 60px rgba(255,149,0,.16); }
body.lp .lp-offer__card.is-dark{ box-shadow: 0 0 0 1px rgba(var(--glow-cyan),.35), 0 0 40px rgba(var(--glow-blue),.45), 0 0 90px rgba(var(--glow-cyan),.22); }
body.lp .lp-showcase__card{ box-shadow: 0 0 22px rgba(var(--glow-blue),.14), 0 12px 30px rgba(11,27,63,.08); }

@media (prefers-reduced-motion: reduce){
  body.lp .skill-card.is-featured,body.lp .lp-skill-card.is-featured{ animation: none; }
  body.lp .skill-card:hover,body.lp .lp-skill-card:hover,body.lp .lp-cat-card:hover{ transform: none; }
}

/* Ảnh bìa thumbnail thật (16:9 / 4:5) */
.lp-note,.thumb-note{ font-size: .8rem; color: var(--muted); margin: -20px 0 22px; }
.thumb-note{ margin: 0 0 10px; }
.lp-showcase__card{ grid-template-columns: 300px 1fr; }
.lp-showcase__media{ aspect-ratio: 16/9; }
.detail-thumb{ width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: 16px; margin-bottom: 18px; display: block; }
@media (max-width: 800px){ .lp-showcase__card{ grid-template-columns: 1fr; } }

/* Giá nằm dưới ảnh (không che chữ trong ảnh bìa) */
body.lp .skill-card .thumb-price,body.lp .lp-skill-card .thumb-price{ margin: 2px 0 0; font-size: 1.15rem; font-weight: 900; color: #FF7A00; font-family: var(--font-body); }

/* ============================================================
   BỘ ẢNH HỒ TRÍ TƯỢNG — khung hero theo tỉ lệ ảnh thật (942x735)
   ============================================================ */
.lp-hero__photo{ aspect-ratio: 942/735; }
.lp-hero__photo img{ object-position: center top; }