/* ═══════════════════════════════════════════════════════════════════════════════
   landing-offline.css — [02/10/2026] Làm đẹp lại 3 khối "lớp offline" của trang chủ khách
   cùng ngôn ngữ thiết kế trang kể chuyện (css/landing-story.css):
     · "Học tiếng Trung để làm gì?" (.landing-showcase — NẰM TRONG #guest-landing-view)
     · Đăng ký tư vấn (#register) + Định giá năng lực (#salary-tool) — NẰM NGOÀI #guest-landing-view
       (sau khối dashboard trong index.html) ⇒ token .ls-* KHÔNG với tới, phải khai lại ở .lo-sec.
   Chỉ khách thấy hai khối ngoài (css/dashboard-sidebar.css ẩn khi đã đăng nhập).
   Thay các luật cũ `body.guest-mode #register …` / `#salary-tool …` (toàn !important) đã gỡ khỏi landing.css.
   Base sáng của pages.css (.form-box, .salary-*, .calc-select…) bị đè bằng độ ưu tiên `body.guest-mode #…`.
   ═══════════════════════════════════════════════════════════════════════════════ */

body.guest-mode .lo-sec,
#guest-landing-view .landing-showcase {
  --lo-bg-0: #07060f;
  --lo-bg-1: #0e0b1d;
  --lo-ink: #f3ecdc;
  --lo-mute: rgba(243, 236, 220, 0.68);
  --lo-faint: rgba(243, 236, 220, 0.42);
  --lo-gold: #f5c542;
  --lo-gold-2: #ff9a3c;
  --lo-red: #e0453a;
  --lo-red-2: #ff6a4d;
  --lo-jade: #3ddc97;
  --lo-on-gold: #1a1206;
  --lo-line: rgba(245, 197, 66, 0.2);
  --lo-card: rgba(255, 255, 255, 0.035);
  --lo-card-2: rgba(255, 255, 255, 0.06);
  --lo-card-line: rgba(255, 255, 255, 0.1);
  --lo-input: rgba(255, 255, 255, 0.05);
  --lo-option-bg: #15122a;
  --lo-shadow: rgba(0, 0, 0, 0.5);
  --lo-red-glow: rgba(224, 69, 58, 0.35);
  --lo-gold-soft: rgba(245, 197, 66, 0.1);
  --lo-jade-soft: rgba(61, 220, 151, 0.08);
  --lo-jade-line: rgba(61, 220, 151, 0.25);
  --lo-serif: 'Noto Serif SC', 'Songti SC', 'STSong', 'SimSun', serif;
}

/* ── Chữ dùng chung ───────────────────────────────────────────────────────── */
body.guest-mode .lo-sec [lang="zh"] { font-family: var(--lo-serif); }
body.guest-mode .lo-gold,
#guest-landing-view .lo-gold {
  background: linear-gradient(120deg, var(--lo-gold, #f5c542), var(--lo-gold-2, #ff9a3c));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.guest-mode .lo-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--lo-gold);
}
body.guest-mode .lo-eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lo-gold));
}
body.guest-mode .lo-h2 {
  font-family: 'Quicksand', sans-serif;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.18;
  color: var(--lo-ink);
  margin: 0 0 14px;
  text-wrap: balance;
}
body.guest-mode .lo-sub {
  color: var(--lo-mute);
  font-size: 1.02rem;
  line-height: 1.7;
  margin: 0;
}
body.guest-mode .lo-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
body.guest-mode .lo-head .lo-eyebrow::after {
  content: '';
  width: 28px;
  height: 1px;
  background: linear-gradient(270deg, transparent, var(--lo-gold));
}

/* ── Khung khối ───────────────────────────────────────────────────────────── */
body.guest-mode #register.lo-sec,
body.guest-mode #salary-tool.lo-sec {
  display: block;
  position: relative;
  margin: 0;
  padding: 96px 24px;
  color: var(--lo-ink);
  background:
    radial-gradient(60% 50% at 15% 0%, rgba(245, 197, 66, 0.07), transparent 70%),
    linear-gradient(180deg, var(--lo-bg-0), var(--lo-bg-1));
  border-top: 1px solid var(--lo-card-line);
}
body.guest-mode #salary-tool.lo-sec {
  background:
    radial-gradient(55% 45% at 85% 10%, rgba(224, 69, 58, 0.08), transparent 70%),
    linear-gradient(180deg, var(--lo-bg-1), var(--lo-bg-0));
}
body.guest-mode .lo-wrap { max-width: 1100px; margin: 0 auto; }

body.guest-mode .lo-card {
  background: var(--lo-card);
  border: 1px solid var(--lo-card-line);
  border-radius: 20px;
  box-shadow: 0 24px 60px var(--lo-shadow);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-sizing: border-box;
}

/* ── Ô nhập + nút dùng chung ──────────────────────────────────────────────── */
body.guest-mode .lo-sec .lo-input {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  min-height: 48px;
  padding: 12px 14px;
  font: inherit;
  font-size: 0.98rem;
  color: var(--lo-ink);
  background: var(--lo-input);
  border: 1px solid var(--lo-card-line);
  border-radius: 12px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
body.guest-mode .lo-sec .lo-input::placeholder { color: var(--lo-faint); }
body.guest-mode .lo-sec .lo-input:focus {
  border-color: var(--lo-gold);
  background: var(--lo-card-2);
  box-shadow: 0 0 0 3px var(--lo-gold-soft);
}
body.guest-mode .lo-sec select.lo-input { cursor: pointer; }
body.guest-mode .lo-sec select.lo-input option { background: var(--lo-option-bg); color: var(--lo-ink); }
body.guest-mode .lo-sec select.lo-input optgroup { background: var(--lo-bg-0); color: var(--lo-gold); font-style: normal; }

body.guest-mode .lo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  font-family: 'Quicksand', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}
body.guest-mode .lo-btn-red {
  width: 100%;
  color: var(--lo-ink);
  background: linear-gradient(135deg, var(--lo-red), var(--lo-red-2));
  box-shadow: 0 12px 32px var(--lo-red-glow);
}
body.guest-mode .lo-btn-red:hover { transform: translateY(-2px); }
body.guest-mode .lo-btn-red:active { transform: scale(0.98); }
body.guest-mode .lo-btn-red:disabled { opacity: 0.7; cursor: wait; transform: none; }
body.guest-mode .lo-btn-ghost {
  min-height: 44px;
  font-size: 0.88rem;
  color: var(--lo-mute);
  background: transparent;
  border-color: var(--lo-card-line);
}
body.guest-mode .lo-btn-ghost:hover { color: var(--lo-gold); border-color: var(--lo-line); }

/* ═══ ĐĂNG KÝ TƯ VẤN ═════════════════════════════════════════════════════════ */
body.guest-mode .lo-reg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: center;
}
body.guest-mode .lo-reg-list {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
body.guest-mode .lo-reg-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: var(--lo-card);
  border: 1px solid var(--lo-card-line);
  border-radius: 16px;
}
body.guest-mode .lo-reg-list b {
  flex: 0 0 48px;
  height: 48px;
  display: grid;
  place-items: center;
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--lo-gold);
  background: var(--lo-gold-soft);
  border: 1px solid var(--lo-line);
  border-radius: 14px;
}
body.guest-mode .lo-reg-list span { display: flex; flex-direction: column; gap: 2px; color: var(--lo-mute); font-size: 0.9rem; line-height: 1.45; }
body.guest-mode .lo-reg-list strong { color: var(--lo-ink); font-size: 1rem; }

body.guest-mode .lo-form { padding: 32px; }
body.guest-mode .lo-form-title {
  margin: 0 0 20px;
  font-family: 'Quicksand', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--lo-ink);
}
body.guest-mode .lo-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
body.guest-mode .lo-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
body.guest-mode .lo-field-full { grid-column: 1 / -1; }
body.guest-mode .lo-field > span { font-size: 0.82rem; font-weight: 600; color: var(--lo-mute); }
body.guest-mode .lo-field > span em { font-style: normal; color: var(--lo-faint); font-weight: 400; }
body.guest-mode .lo-sec .lo-input-course { font-weight: 600; }
body.guest-mode .lo-form-note {
  margin: 14px 0 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--lo-faint);
}
body.guest-mode .lo-form-note i { margin-right: 4px; }

/* ═══ ĐỊNH GIÁ NĂNG LỰC ══════════════════════════════════════════════════════ */
body.guest-mode #salary-tool .salary-calculator-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 28px;
  max-width: none;
  margin: 0;
  align-items: start; /* ô nhập cao vừa nội dung — không kéo dài theo ô kết quả */
}
body.guest-mode #salary-tool .salary-input-box {
  padding: 30px;
  overflow: visible;
}
body.guest-mode .lo-card-title {
  margin: 0 0 22px;
  font-family: 'Quicksand', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--lo-ink);
}
body.guest-mode .lo-card-title i { color: var(--lo-gold); margin-right: 6px; }
body.guest-mode #salary-tool .input-group { margin-bottom: 18px; }
body.guest-mode #salary-tool .input-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--lo-mute);
}
body.guest-mode #salary-tool .salary-input-box .lo-btn-red { margin-top: 8px; }

/* Ô kết quả + ô chờ: cùng một khung, kết quả viền vàng */
body.guest-mode #salary-tool .salary-result-box,
body.guest-mode #salary-tool .salary-placeholder {
  padding: 30px;
  flex-direction: column;
  justify-content: center;
  color: var(--lo-ink);
}
body.guest-mode #salary-tool .salary-result-box {
  border-color: var(--lo-line);
  background:
    radial-gradient(80% 60% at 50% 0%, var(--lo-gold-soft), transparent 70%),
    var(--lo-card);
}
body.guest-mode #salary-tool .salary-placeholder {
  display: flex;
  align-self: stretch; /* ô chờ vẫn cao bằng ô nhập */
  align-items: center;
  text-align: center;
  border-style: dashed;
  box-shadow: none;
}
body.guest-mode .lo-ph-icon {
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  font-size: 2.6rem;
  font-weight: 600;
  color: var(--lo-gold);
  background: var(--lo-gold-soft);
  border: 1px solid var(--lo-line);
  border-radius: 50%;
}
body.guest-mode #salary-tool .salary-placeholder p { margin: 0; max-width: 320px; color: var(--lo-faint); line-height: 1.6; }

body.guest-mode #salary-tool .result-header {
  margin: 0 0 6px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--lo-gold);
}
body.guest-mode #salary-tool .salary-number {
  margin: 0 0 22px;
  text-align: center;
  font-family: 'Quicksand', sans-serif;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 700;
  color: var(--lo-ink);
  text-shadow: none;
}
body.guest-mode #salary-tool .salary-unit { margin-left: 6px; font-size: 0.95rem; color: var(--lo-mute); font-weight: 600; }
body.guest-mode #salary-tool .salary-insights { display: flex; flex-direction: column; gap: 12px; color: var(--lo-mute); }
body.guest-mode #salary-tool .insight-item {
  margin: 0;
  padding: 14px 16px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--lo-mute);
  background: var(--lo-jade-soft);
  border: 1px solid var(--lo-jade-line);
  border-radius: 14px;
}
body.guest-mode #salary-tool .insight-item i { color: var(--lo-jade); margin-right: 4px; }
body.guest-mode #salary-tool .insight-item i.fa-star { color: var(--lo-gold-2); }
body.guest-mode #salary-tool .insight-item strong { color: var(--lo-ink); }
body.guest-mode #salary-tool #skill-list { margin: 8px 0 0 4px; padding: 0; list-style: none; font-size: 0.88rem; color: var(--lo-mute); }
body.guest-mode #salary-tool #skill-list li { margin-top: 4px; }
body.guest-mode #salary-tool .insight-advice {
  margin: 0;
  padding: 14px 16px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--lo-mute);
  background: var(--lo-gold-soft);
  border: 1px solid var(--lo-line);
  border-left: 4px solid var(--lo-gold);
  border-radius: 14px;
}
body.guest-mode #salary-tool .insight-advice i { color: var(--lo-gold); margin-right: 4px; }
body.guest-mode #salary-tool .insight-advice strong { color: var(--lo-gold); }
body.guest-mode #salary-tool .salary-disclaimer {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--lo-card);
  border: 1px solid var(--lo-card-line);
  border-radius: 14px;
}
body.guest-mode #salary-tool .salary-disclaimer p { margin: 0 0 12px; font-size: 0.76rem; line-height: 1.55; color: var(--lo-faint); }

/* ═══ "HỌC TIẾNG TRUNG ĐỂ LÀM GÌ?" (trong #guest-landing-view) ═══════════════ */
#guest-landing-view .landing-showcase {
  content-visibility: visible; /* landing.css đặt auto — tắt: bỏ vẽ khi khuất làm dải lướt đo sai + trang nhảy */
  contain-intrinsic-size: none;
  padding: 96px 0 88px;
  background:
    radial-gradient(50% 40% at 50% 0%, rgba(245, 197, 66, 0.06), transparent 70%),
    linear-gradient(180deg, var(--lo-bg-0), var(--lo-bg-1) 50%, var(--lo-bg-0));
}
#guest-landing-view .landing-showcase .ls-sec-head { padding: 0 24px; margin-bottom: 8px; }
/* [02/10/2026] Băng chuyền CSS → DẢI LƯỚT (.ls-dl, khung chung ở landing-story.css + js/landing-story.js).
   Mờ hai mép bằng mask (không phụ thuộc màu nền như ::before/::after cũ). */
#guest-landing-view .ls-show-dl .ls-dl-track {
  padding-top: 26px;
  padding-bottom: 34px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
#guest-landing-view .landing-showcase-card {
  width: 300px;
  background: var(--lo-card);
  border: 1px solid var(--lo-card-line);
  border-radius: 18px;
  box-shadow: 0 18px 40px var(--lo-shadow);
}
#guest-landing-view .landing-showcase-card:hover {
  border-color: var(--lo-line);
  box-shadow: 0 24px 60px var(--lo-shadow), 0 0 0 1px var(--lo-line);
}
#guest-landing-view .landing-showcase-img { aspect-ratio: 4 / 3; }
#guest-landing-view .landing-showcase-info { padding: 16px 18px 18px; }
#guest-landing-view .landing-showcase-tag,
#guest-landing-view .landing-showcase-tag[class*="tag-"] {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  letter-spacing: 1.2px;
  color: var(--lo-gold);
  background: var(--lo-gold-soft);
  border: 1px solid var(--lo-line);
}
#guest-landing-view .landing-showcase-info h4 { color: var(--lo-ink); font-size: 1.05rem; }
#guest-landing-view .landing-showcase-info p { color: var(--lo-faint); margin: 0; }

/* ═══ ĐIỆN THOẠI / MÁY TÍNH BẢNG ═════════════════════════════════════════════ */
@media (max-width: 900px) {
  body.guest-mode .lo-reg { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  body.guest-mode #salary-tool .salary-calculator-container { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  body.guest-mode #register.lo-sec,
  body.guest-mode #salary-tool.lo-sec { padding: 64px 16px; }
  body.guest-mode .lo-form,
  body.guest-mode #salary-tool .salary-input-box,
  body.guest-mode #salary-tool .salary-result-box,
  body.guest-mode #salary-tool .salary-placeholder { padding: 22px 18px; }
  body.guest-mode .lo-form-grid { grid-template-columns: minmax(0, 1fr); }
  body.guest-mode .lo-reg-list li { padding: 12px 14px; }
  /* Dòng nhỏ trên tiêu đề: 360px không đủ chỗ cho letter-spacing 3px + 2 gạch ⇒ thu lại, bỏ gạch sau */
  body.guest-mode .lo-eyebrow { gap: 8px; font-size: 0.72rem; letter-spacing: 2px; }
  body.guest-mode .lo-head .lo-eyebrow::after { display: none; }
  body.guest-mode #salary-tool .lo-btn-ghost { width: 100%; padding: 0 16px; }
  #guest-landing-view .landing-showcase { padding: 64px 0 56px; }
  #guest-landing-view .landing-showcase-card { width: min(78vw, 290px); }
  #guest-landing-view .landing-showcase .ls-sec-head { padding: 0 16px; }
  #guest-landing-view .landing-showcase .ls-eyebrow { gap: 8px; font-size: 0.72rem; letter-spacing: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  body.guest-mode .lo-btn-red:hover { transform: none; }
}