/* ============================================================
   DESIGN TOKENS — PNE Brand v2.0
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --red:        #D12026;
  --red-deep:   #A8181D;
  --red-light:  #FDE5E6;
  --red-border: #F5C8CA;

  --bg:         #FFFFFF;
  --bg-soft:    #FBF9F6;
  --bg-alt:     #F6F2EC;

  --text:       #1A1A1B;
  --text-2:     #68686A;
  --text-3:     #ABABAC;
  --border:     rgba(0,0,0,.07);
  --border-s:   #E4E4E5;

  --blue:       #1A5FAF;
  --blue-bg:    #EBF4FB;
  --green:      #1F7A3D;
  --green-bg:   #E6F4EC;
  --amber:      #C77700;
  --amber-bg:   #FFF3CD;
  --gold:       #FFCC00;
  --gold-soft:  #FFEB99;   /* nền chip dịch vụ tiếng Đức (tone vàng hợp lệ, ≤15% diện tích) */
  --gold-deep:  #5F4800;   /* chữ trên nền vàng nhạt — contrast AA (tone vàng hợp lệ) */

  /* Dark "ink" surfaces — premium tech band (/he-sinh-thai map) */
  --ink:        #10101C;
  --ink-2:      #181628;

  --ff: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, sans-serif;

  --r-s:  8px;
  --r-m:  14px;
  --r-l:  22px;
  --r-xl: 32px;

  --sh-xs: 0 1px 3px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.05);
  --sh-s:  0 2px 8px rgba(0,0,0,.04), 0 8px 28px rgba(0,0,0,.07);
  --sh-m:  0 4px 16px rgba(0,0,0,.06), 0 20px 52px rgba(0,0,0,.09);
  --sh-l:  0 8px 32px rgba(0,0,0,.08), 0 28px 80px rgba(0,0,0,.11);
  --sh-red:0 6px 20px rgba(209,32,38,.25), 0 2px 6px rgba(209,32,38,.15);
}

html { font-family: var(--ff); font-size: 16px; color: var(--text); background: var(--bg); }
body { overflow-x: hidden; line-height: 1.55; -webkit-font-smoothing: antialiased; }

/* #58 — Chống copy nội dung TOÀN SITE (chỉ cản người dùng thường; view-source/DevTools vẫn xem được,
   HTML nguồn KHÔNG đổi nên bot SEO không bị ảnh hưởng). CHỪA ô form để gõ + chọn + copy/paste được.
   #121: scope dưới body.no-copy — class do anti-copy.js tự thêm, mà file đó CHỈ nạp khi công tắc BẬT +
   không phải admin (nav.blade). Nhờ vậy CSS chặn-bôi-đen BẬT/TẮT ĐỒNG BỘ với JS chặn sự kiện, hết cảnh
   "chuột phải được mà vẫn không copy được". */
body.no-copy { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
body.no-copy input, body.no-copy textarea, body.no-copy select, body.no-copy [contenteditable="true"],
body.no-copy .copyable, body.no-copy .copyable * {   /* #110: hotline/SĐT/email/địa chỉ — khách CẦN bôi đen + copy */
  -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;
}
body.no-copy img { -webkit-user-drag: none; user-drag: none; }

/* #115 — LƯỚI AN TOÀN (1 nguồn): trên mobile, MỌI ô nhập ≥ 16px để iOS Safari KHÔNG tự phóng to khung
   nhìn khi focus. Selector cụ thể specificity cao hơn thì được sửa riêng tại chính rule đó (không !important). */
@media (max-width: 900px) {
  input, select, textarea { font-size: 16px; }
}

/* Chống "chữ mồ côi" rớt 1 chữ xuống dòng riêng — text-wrap: balance cho heading lớn
   VÀ subtitle ngắn (≤4 dòng), pretty cho đoạn dài. Browser tự cân lại các dòng.
   Hỗ trợ: Chrome 114+ / Safari 17.4+ / Firefox 121+; trình duyệt cũ bỏ qua. */
h1, h2, .sec-title, .h-1, .h-2,
.kh-fmt h2, .lth-sec h2, .kh-sec h2,
.tt-feat h2, .tt-card h3,
/* Subtitle ngắn: ép balance để mọi dòng đều, không rớt 1 chữ ở dòng cuối. */
.sec-sub, .hero-sub, .lpath-sub, .sec-head .sec-sub, .hz-head .sec-sub {
  text-wrap: balance;
}
p, .sub, .d, .ph-cap, .cap,
.kh-fmt-card span, .lth-sec p, .kh-sec p,
.tt-feat p, .tt-card p,
.olh-why span, .gvh-why span {
  text-wrap: pretty;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

/* ============================================================
   SHARED
   ============================================================ */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 99px;
}
.tag-red   { background: var(--red-light); color: var(--red); }
.tag-white { background: rgba(255,255,255,.15); color: #fff; }

.sec-head { margin-bottom: 60px; }
.sec-head.center { text-align: center; }
.sec-head.center .sec-sub { margin: 0 auto; }
.sec-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--red); margin-bottom: 16px;
}
.sec-title {
  font-size: 44px; font-weight: 800; line-height: 1.08;
  letter-spacing: -.03em; margin-bottom: 16px;
}
.sec-title.editorial { font-size: 56px; line-height: 1.02; max-width: 16ch; }
.sec-sub {
  font-size: 17px; color: var(--text-2); line-height: 1.7; max-width: 560px;
}
@media (max-width: 860px) {
  .sec-title { font-size: 32px; }
  .sec-title.editorial { font-size: 38px; }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 28px; border-radius: 99px;
  font-family: var(--ff); font-weight: 700; font-size: 14px;
  cursor: pointer; border: none; transition: all .2s ease;
}
.btn-red { background: var(--red); color: #fff; box-shadow: var(--sh-red); }
.btn-red:hover { background: var(--red-deep); transform: translateY(-1px); box-shadow: 0 10px 28px rgba(209,32,38,.32); }
.btn-outline { background: var(--bg); color: var(--text); border: 1.5px solid var(--border-s); box-shadow: var(--sh-xs); }
.btn-outline:hover { border-color: var(--text-3); transform: translateY(-1px); }
.btn-ghost { background: rgba(255,255,255,.12); color: #fff; border: 1.5px solid rgba(255,255,255,.28); backdrop-filter: blur(4px); }
.btn-ghost:hover { background: rgba(255,255,255,.22); }
.btn-lg { padding: 15px 34px; font-size: 15px; }
.btn-sm { padding: 9px 20px; font-size: 13px; }

/* ============================================================
   ① TOPBAR
   ============================================================ */
.topbar {
  background: var(--red); padding: 8px 64px;
  display: flex; align-items: center; gap: 12px;
}
.tb-search {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.2);
  border-radius: 99px; padding: 6px 15px; flex: 0 0 188px;
}
.tb-search input {
  background: none; border: none; outline: none;
  color: #fff; font-size: 12px; width: 100%; font-family: var(--ff);
}
.tb-search input::placeholder { color: rgba(255,255,255,.42); }
.tb-search i { font-size: 14px; color: rgba(255,255,255,.5); flex-shrink: 0; }

/* ── Search autocomplete (sbx) — dùng chung topbar desktop + drawer mobile (P0) ── */
.sbx { position: relative; }
.sbx-in { display: flex; align-items: center; gap: 8px; }
.sbx-drop {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 280px; max-width: 340px;
  background: #fff; border: 1px solid var(--border-s);
  border-radius: var(--r-m); box-shadow: var(--sh-m);
  padding: 6px; z-index: 600;
  display: flex; flex-direction: column; gap: 2px;
}
.sbx-it { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; border-radius: var(--r-s); text-decoration: none; }
.sbx-it .sbx-l { font-size: 13.5px; font-weight: 600; color: var(--text); }
.sbx-it .sbx-s { font-size: 11.5px; color: var(--text-3); }
.sbx-it:hover, .sbx-it.sel { background: var(--red-light); }
.sbx-it:hover .sbx-l, .sbx-it.sel .sbx-l { color: var(--red); }
.sbx-empty { padding: 14px 12px; font-size: 12.5px; color: var(--text-3); text-align: center; }

/* Topbar variant: pill sáng trên nền đỏ (kế thừa look .tb-search cũ) */
.sbx-topbar { flex: 0 0 188px; }
.sbx-topbar .sbx-in {
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.2);
  border-radius: 99px; padding: 6px 15px;
}
.sbx-topbar .sbx-in i { font-size: 14px; color: rgba(255,255,255,.5); flex-shrink: 0; }
.sbx-topbar .sbx-in input {
  background: none; border: none; outline: none;
  color: #fff; font-size: 12px; width: 100%; font-family: var(--ff);
}
.sbx-topbar .sbx-in input::placeholder { color: rgba(255,255,255,.42); }

/* Drawer variant: full-width, chữ tối trên nền trắng (dùng trong menu mobile) */
.nav-search-mobile { display: none; }
.sbx-drawer { width: 100%; margin-bottom: 10px; }
.sbx-drawer .sbx-in {
  background: var(--bg-soft); border: 1px solid var(--border-s);
  border-radius: 10px; padding: 11px 14px;
}
.sbx-drawer .sbx-in i { color: var(--text-3); font-size: 16px; flex-shrink: 0; }
.sbx-drawer .sbx-in input {
  background: none; border: none; outline: none;
  color: var(--text); font-size: 16px; width: 100%; font-family: var(--ff);   /* #115: iOS không zoom */
}
.sbx-drawer .sbx-drop { min-width: 0; max-width: none; right: 0; }
.tb-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.tb-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; border-radius: 99px;
  border: 1.5px solid rgba(255,255,255,.5); color: #fff;
  font-size: 12px; font-weight: 600; white-space: nowrap; transition: .15s;
}
.tb-link:hover { background: rgba(255,255,255,.12); }
.tb-sep { width: 1px; height: 16px; background: rgba(255,255,255,.18); }
.tb-hotline { display: flex; align-items: center; gap: 7px; font-size: 12px; color: rgba(255,255,255,.88); white-space: nowrap; }
.tb-hotline strong { color: #fff; font-weight: 800; }
.tb-fb {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center; color: #fff;
  transition: .15s;
}
.tb-fb:hover { background: rgba(255,255,255,.25); }

/* ============================================================
   ② NAV
   ============================================================ */
nav {
  position: sticky; top: 0; z-index: 300;
  background: rgba(255,255,255,.93);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid rgba(0,0,0,.06);
  padding: 0 64px; height: 72px;
  display: flex; align-items: center; justify-content: space-between;
}
/* Thanh nav CHÍNH (chứa .nav-links) phải nằm TRÊN mọi thanh lọc <nav> sticky của trang
   (vd .tl-lv-tabs / .tl-kind trang Tài liệu cũng là <nav> z-index:300) — để mega menu mở
   ra KHÔNG bị nút lọc đè. Dưới modal/Pi/drawer (999+). */
nav:has(.nav-links) { z-index: 500; }
/* #125: 3 THANH LỌC trang (Tài liệu .tl-lv-tabs/.tl-kind · Tin tức .tt-tabs) LÀ <nav> nên thừa hưởng
   rule sticky+z-index của HEADER (nav{position:sticky;top:0;z-index:300} + M1 mobile nav{z-index:1000}).
   Khi cuộn chúng dính top:0 và ĐÈ header → cướp chạm hamburger (GPT hit-test tâm nút = .tl-kind, không mở
   được menu). Thu về ĐÚNG header: cho 3 thanh lọc KHÔNG sticky (trôi theo nội dung) + z-index thường.
   Chỉ đụng 3 lớp này; #59a (ẩn thanh lọc khi MỞ menu, nav.css:204-206) vẫn nguyên. */
.tl-lv-tabs, .tl-kind, .tt-tabs { position: static; top: auto; z-index: auto; }
.nav-logo { display: inline-flex; align-items: center; }
.nav-logo-img { height: 40px; width: auto; display: block; }

/* Flex container — mọi item căn giữa theo chiều dọc */
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Cùng kiểu cho cả <a> link và <button> dropdown toggle —
   FLEX không dựa baseline, reset button để khớp <a>. */
.nav-links > a,
.nav-links > .nav-drop > .nav-drop-toggle {
  /* Reset button → giống <a> */
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  text-align: left;
  font-family: var(--ff);

  /* Vertical centering by flex (không dựa baseline) */
  display: inline-flex;
  align-items: center;
  gap: 4px;

  /* Typography — cùng line-height 1, cùng padding dọc */
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-2);
  line-height: 1;
  padding: 10px 0;

  position: relative;
  transition: color .15s;
  white-space: nowrap;
}

.nav-links > a:hover,
.nav-links > .nav-drop > .nav-drop-toggle:hover { color: var(--text); }
.nav-links > a.active,
.nav-links > .nav-drop.is-active > .nav-drop-toggle { color: var(--red); }

/* Underline ::after — position: absolute, không chiếm chỗ, không xê dịch các item khác */
.nav-links > a::after,
.nav-links > .nav-drop > .nav-drop-toggle::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 2px;
  background: var(--red);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s;
  pointer-events: none;
}
.nav-links > a:hover::after,
.nav-links > a.active::after,
.nav-links > .nav-drop > .nav-drop-toggle:hover::after,
.nav-links > .nav-drop.is-active > .nav-drop-toggle::after { transform: scaleX(1); }

/* Chevron dropdown — không tăng chiều cao dòng */
.nav-links > .nav-drop > .nav-drop-toggle i.ti-chevron-down {
  font-size: 14px;
  line-height: 1;
  transition: transform .2s;
  align-self: center;
}
.nav-links > .nav-drop > .nav-drop-toggle[aria-expanded="true"] i.ti-chevron-down { transform: rotate(180deg); }

.nav-actions { display: flex; gap: 10px; align-items: center; }

/* ============================================================
   ③ HERO
   ============================================================ */
.hero {
  /* padding-bottom rộng để strengths-strip chồng lên ~36px mà vẫn cách hero copy đủ thoáng */
  padding: 96px 64px 92px;
  position: relative;
  z-index: 1;
  background: linear-gradient(145deg, #FFF4F4 0%, #FFFFFF 55%);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 60px; align-items: center;
  /* Bỏ border-bottom: strengths-strip chồng lên (margin-top âm) thay cho đường kẻ ngang;
     đường kẻ cũ full-width không khớp container max-width của strip → lệch hai đầu. */
}
.hero-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 15px; background: var(--bg);
  border: 1px solid var(--border-s); border-radius: var(--r-s);
  font-size: 12.5px; font-weight: 600; box-shadow: var(--sh-xs);
}
.hero h1 {
  font-size: 60px; font-weight: 800; line-height: 1.1;
  letter-spacing: -.03em; margin-bottom: 22px;
}
.hero h1 em { color: var(--red); font-style: normal; }
.hero-sub {
  font-size: 17px; color: var(--text-2); line-height: 1.72;
  margin-bottom: 38px; max-width: 460px;
}
.hero-ctas { display: flex; gap: 14px; align-items: center; margin-bottom: 48px; }
.hero-social {
  display: flex; align-items: center; gap: 20px;
  padding-top: 28px; border-top: 1px solid var(--border-s);
}
.hero-social-label { font-size: 11.5px; color: var(--text-3); font-weight: 600; white-space: nowrap; }
.hs-rating { display: flex; align-items: center; gap: 8px; }
.hs-stars  { color: #E8A020; font-size: 15px; letter-spacing: 1px; }
.hs-score  { font-size: 14px; font-weight: 800; }
.hs-count  { font-size: 12px; color: var(--text-2); }

/* Hero image column */
.hero-img-col { position: relative; }
.hero-img {
  /* Khung khớp tỉ lệ ảnh khuyến nghị (5:4) — tránh kéo dãn/cắt cụt.
     aspect-ratio thay vì height: 520px cố định để ảnh và khung cùng tỉ lệ. */
  width: 100%; aspect-ratio: 5 / 4; border-radius: var(--r-xl);
  overflow: hidden; position: relative;
  box-shadow: var(--sh-l);
}
/* Slideshow tự chuyển trong hero */
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 40%;
  opacity: 0; transition: opacity 1.2s ease;
}
.hero-slide.is-active { opacity: 1; }

.hero-img-fill {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.hero-stats { z-index: 3; }
.hero-img-fill::after {
  content: ''; position: absolute; top: -60px; right: -60px;
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,210,140,.28) 0%, transparent 68%);
}
.hero-img-fill::before {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 180px;
  background: linear-gradient(to top, rgba(0,0,0,.3) 0%, transparent 100%);
}
/* Floating info cards */
.hf {
  position: absolute; z-index: 2;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px) saturate(180%);
  border-radius: var(--r-m); border: 1px solid rgba(255,255,255,.8);
  box-shadow: var(--sh-m);
}
.hf-osd { top: 24px; left: -24px; padding: 14px 18px; }
.hf-student { top: 24px; right: -24px; padding: 14px 18px; min-width: 190px; }
.hf-teacher { bottom: 28px; left: -24px; padding: 14px 18px; min-width: 210px; }
.hf-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--text-3); margin-bottom: 4px; }
.hf-value { font-size: 13px; font-weight: 700; line-height: 1.25; }
.hf-sub   { font-size: 11px; color: var(--text-2); margin-top: 3px; }
.hf-pills { display: flex; align-items: center; gap: 5px; margin-top: 8px; }
.hf-pill  { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 5px; }
.hf-pill-neu { background: var(--bg-alt); color: var(--text-2); }
.hf-pill-ok  { background: var(--green-bg); color: var(--green); }
.hf-av {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #E2575C, #D12026); /* tông brand đỏ (bỏ xanh dương trang trí) */
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: #fff;
}
.hf-teacher-inner { display: flex; align-items: center; gap: 11px; }
.hf-stars { color: #E8A020; font-size: 13px; letter-spacing: .5px; margin-top: 5px; }

/* ============================================================
   ④ TRUST / OSD CARD — full-bleed v2
   ============================================================ */
.trust-section { padding: 80px 64px; background: var(--bg); }

/* OSD split panel */
.osd-card {
  border-radius: var(--r-l); overflow: hidden;
  display: flex; min-height: 420px;
  box-shadow: var(--sh-l);
}
.osd-panel-l {
  flex: 0 0 42%; background: linear-gradient(135deg, #10101C 0%, #181628 55%, #10101C 100%);
  padding: 48px 44px; position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
}
.osd-panel-l::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 5px; background: #FFCC00; z-index: 2;
}
.osd-panel-l::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 15%, rgba(209,32,38,.18) 0%, transparent 55%);
  pointer-events: none;
}
.osd-logo-badge {
  background: #fff; border-radius: 12px; padding: 10px 14px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.20);
  align-self: flex-start; margin-bottom: 26px;
}
.osd-emblem { width: 86px; height: auto; display: block; }
.osd-panel-l h3 {
  font-size: 25px; font-weight: 900; color: #fff;
  line-height: 1.25; letter-spacing: -.025em; margin: 0 0 10px;
}
.osd-panel-l-desc {
  font-size: 13px; color: rgba(255,255,255,.60); line-height: 1.7; margin: 0 0 28px;
}
.osd-stats { display: flex; gap: 32px; margin-bottom: 28px; }
.osd-stat strong { display: block; font-size: 24px; font-weight: 900; color: #FFCC00; line-height: 1; }
.osd-stat span { font-size: 10.5px; color: rgba(255,255,255,.50); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.osd-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.osd-tag {
  font-size: 11.5px; font-weight: 700; padding: 5px 13px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25);
  border-radius: 100px; color: #fff;
  display: inline-flex; align-items: center; gap: 5px;
}
.osd-tag i { font-size: 12px; color: #FFCC00; }

.osd-panel-r {
  flex: 1; position: relative; overflow: hidden;
  background-size: cover; background-position: center 25%;
}
.osd-panel-r::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.08) 45%,
    transparent 70%);
}
.osd-photo-caption {
  position: absolute; bottom: 20px; left: 24px; right: 24px; z-index: 2;
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,.60);
  letter-spacing: .07em; text-transform: uppercase;
}

/* ============================================================
   ⑤ PERSONA CARDS
   ============================================================ */
.persona-section { padding: 96px 64px; background: var(--bg-alt); }
.persona-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.persona-card {
  border-radius: var(--r-xl); overflow: hidden; position: relative;
  min-height: 430px; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 32px;
  cursor: pointer; transition: transform .3s ease, box-shadow .3s ease;
  box-shadow: var(--sh-s);
}
.persona-card:hover { transform: translateY(-10px); box-shadow: var(--sh-l); }
.persona-card::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,.93) 0%, rgba(0,0,0,.55) 48%, rgba(0,0,0,.12) 100%);
}
.pc-bg { position: absolute; inset: 0; }
.pc-body { position: relative; z-index: 2; }
.pc-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(255,255,255,.16); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.pc-icon i { font-size: 26px; color: #fff; }
.persona-card h3 { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 10px; line-height: 1.25; }
.persona-card p  { font-size: 13px; color: rgba(255,255,255,.7); margin-bottom: 24px; line-height: 1.72; }

/* ============================================================
   ⑥ SOCIAL PROOF
   ============================================================ */
.proof-section { padding: 96px 0; background: var(--bg-soft); }
.proof-section .sec-head { padding: 0 64px; }

/* Ticker */
.ticker-wrap {
  overflow: hidden; background: var(--bg);
  border-top: 1px solid var(--border-s);
  border-bottom: 1px solid var(--border-s);
  padding: 18px 0; margin-bottom: 56px;
}
.ticker-track {
  display: flex; gap: 14px; padding-left: 14px;
  width: max-content; animation: ticker 40s linear infinite;
}
.ticker-track:hover { animation-play-state: paused; }
.ticker-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-alt); padding: 10px 20px;
  border-radius: 10px; border: 1px solid var(--border-s);
  white-space: nowrap; flex-shrink: 0;
}
.ticker-item i { font-size: 16px; color: var(--green); }
.ticker-item strong { font-size: 13px; font-weight: 700; }
.ticker-item span   { font-size: 12px; color: var(--text-2); }
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* Featured proof */
.proof-inner { padding: 0 64px; }
.proof-featured {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 32px;
}
.proof-video {
  aspect-ratio: 16/9; border-radius: var(--r-l); overflow: hidden;
  position: relative; display: flex; align-items: center; justify-content: center;
}
/* .pv-bg: class này hiện không được dùng ở view nào (grep cả resources/views/frontend).
   Giữ rule cho tương thích ngược, nhưng đổi sang nền đỏ đậm thay vì ảnh unsplash stock — 15/06. */
.pv-bg {
  position: absolute; inset: 0;
  background: #8B1015;
}
.pv-grid {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.52);
}
.pv-play {
  position: relative; z-index: 2;
  width: 70px; height: 70px; border-radius: 50%;
  background: rgba(255,255,255,.13); backdrop-filter: blur(10px);
  border: 2px solid rgba(255,255,255,.26);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: .2s;
}
.pv-play:hover { background: rgba(255,255,255,.22); transform: scale(1.06); }
.pv-play i { font-size: 28px; color: #fff; margin-left: 3px; }
.pv-footer {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  padding: 14px 18px;
  background: linear-gradient(to top, rgba(0,0,0,.72), transparent);
  display: flex; align-items: center; gap: 10px;
}
.pv-live { background: var(--red); color: #fff; font-size: 9px; font-weight: 800; padding: 3px 8px; border-radius: 4px; letter-spacing: .06em; flex-shrink: 0; }
.pv-footer span { color: rgba(255,255,255,.85); font-size: 12px; font-weight: 600; }

.proof-side { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
.ps-card {
  border-radius: var(--r-m); overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.ps-bg { position: absolute; inset: 0; }
.ps-body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 20px; text-align: center;
}
.ps-body i { font-size: 26px; }
.ps-body strong { font-size: 13px; font-weight: 800; }
.ps-body span   { font-size: 11px; color: var(--text-2); line-height: 1.4; }

/* Review cards */
.reviews-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px;
}
.reviews-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); display: flex; align-items: center; gap: 6px; }
.google-badge {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; background: var(--bg);
  border: 1px solid var(--border-s); border-radius: var(--r-m); box-shadow: var(--sh-xs);
}
.gb-score { font-size: 22px; font-weight: 900; }
.gb-stars { color: #E8A020; font-size: 14px; line-height: 1; }
.gb-count { font-size: 11px; color: var(--text-2); }

.reviews-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.review-card {
  background: var(--bg); padding: 28px; border-radius: var(--r-l);
  border: 1px solid var(--border-s); box-shadow: var(--sh-s);
  display: flex; flex-direction: column; gap: 16px;
}
.rv-top   { display: flex; align-items: center; justify-content: space-between; }
.rv-stars { color: #E8A020; font-size: 13.5px; letter-spacing: 1px; }
.rv-badge { font-size: 10.5px; font-weight: 700; padding: 3px 10px; border-radius: 6px; }
.rv-quote { font-size: 38px; font-weight: 900; color: var(--red); line-height: .7; }
.rv-text  { font-size: 13.5px; line-height: 1.82; color: var(--text-2); font-style: italic; flex: 1; }
.rv-person { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--border-s); }
.rv-av {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: #fff;
}
.rv-name { font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.rv-role { font-size: 11px; color: var(--text-2); margin-top: 2px; }

/* ============================================================
   ⑦ LEARNING PATH — connector-cards v3
   ============================================================ */
.path-section {
  padding: 96px 64px; background: var(--bg-alt); text-align: center; overflow: hidden;
}
.path-section .sec-sub { max-width: none; margin: 0 auto; }  /* #44(V2): font THẬT Be Vietnam Pro rộng hơn (path 825px @17px) → 820px vẫn 2 dòng; none để câu 1 dòng desktop (mobile hẹp → tự wrap) */
.path-inner { max-width: 1140px; margin: 0 auto; }

/* #44(V2) — mô tả proof về 1 dòng desktop. Câu là 1 dòng chữ có bề rộng cố định (~811px font
   thật) nên none KHÔNG kéo dài quá; căn giữa giữ nó. Mobile hẹp → tự wrap.
   (results: rule THẬT ở results.css `.hz-head .sec-sub` — sửa ở đó, không đặt ở đây kẻo bị đè.) */
.proof-section .sec-sub { max-width: none; margin-inline: auto; }

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Connector row ── */
.lpath-row {
  display: flex; align-items: stretch;
  margin-top: 48px; gap: 0;
}

/* ── Level card ── */
.lpath-card {
  flex: 1; min-width: 0;
  background: var(--bg); border-radius: var(--r-l);
  border: 1.5px solid var(--border-s);
  padding: 22px 16px 18px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  box-shadow: var(--sh-xs);
  transition: transform .22s, box-shadow .22s, border-color .22s;
  animation: fadeSlideUp .45s ease both;
  cursor: pointer;
}
/* A1→C1: CHỮ vàng đồng nhất 1 tông (#FFCC00 — brand anchor DE Gold) cho
   cả 5 trình độ. Brief vòng 3: không đậm dần nữa — A2/B1/B2/C1 dùng đúng
   màu A1. --lc áp cho số .lpath-code + thanh accent trên thẻ. */
.lpath-card:nth-child(1) { animation-delay: .06s; --lc: #FFCC00; }
.lpath-card:nth-child(3) { animation-delay: .14s; --lc: #FFCC00; }
.lpath-card:nth-child(5) { animation-delay: .22s; --lc: #FFCC00; }
.lpath-card:nth-child(7) { animation-delay: .30s; --lc: #FFCC00; }
.lpath-card:nth-child(9) { animation-delay: .38s; --lc: #FFCC00; }
.lpath-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--lc, var(--blue));
  border-radius: 3px 3px 0 0;
}
.lpath-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-m);
  /* Hover border tông vàng đậm — không dùng --lc nhạt của card 1-2 (khó thấy). */
  border-color: #7C6500;
}
/* .lpath-code — CHỮ TRẦN, không nền/shape, chỉ thay color theo --lc.
   Đổi từ đỏ (cũ) → vàng đậm dần A1→C1, đảm bảo đọc rõ trên nền trắng. */
.lpath-code {
  font-size: 26px; font-weight: 900; line-height: 1; letter-spacing: -.03em;
  color: var(--lc, #7C6500);
  margin-bottom: 3px;
}
.lpath-lv {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-3); margin-bottom: 12px;
}
.lpath-name { font-size: 12.5px; font-weight: 800; color: var(--text); margin-bottom: 5px; line-height: 1.28; }
.lpath-desc { font-size: 11px; color: var(--text-2); line-height: 1.65; flex: 1; margin-bottom: 12px; text-wrap: pretty; }
.lpath-unlock {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; color: var(--text-2);
  padding-top: 9px; border-top: 1px solid var(--border-s);
}
/* Icon unlock luôn tông vàng đậm để đọc rõ trên nền trắng — không phụ thuộc --lc nhạt của card */
.lpath-unlock i { font-size: 11px; color: #7C6500; flex-shrink: 0; }
.lpath-unlock strong { color: var(--text); font-weight: 700; }

/* ── Connector between cards ── */
.lpath-conn {
  flex-shrink: 0; width: 52px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.lpath-conn::before {
  content: ''; position: absolute;
  left: 0; right: 0; top: 50%; height: 1.5px;
  background: linear-gradient(90deg, rgba(255,204,0,.15), rgba(255,204,0,.42), rgba(255,204,0,.15));
}
/* Mũi tên A1→C1 thay cho nhãn số giờ cũ — màu trung tính trên đường nền vàng nhạt */
.lpath-conn-ic {
  position: relative; z-index: 1;
  font-size: 22px; color: var(--text-3);
  background: var(--bg-alt); border-radius: 50%;
  padding: 2px;
  line-height: 1;
}

/* ── Unlock tags row ── */
.path-unlocks {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  margin: 28px 0 24px;
}
.unlock-item {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 16px; background: var(--bg);
  border: 1px solid var(--border-s); border-radius: 99px;
  font-size: 12px; color: var(--text-2);
  transition: border-color .15s, box-shadow .15s;
}
.unlock-item:hover { border-color: var(--gold); box-shadow: var(--sh-xs); }
.unlock-lvl {
  font-size: 10.5px; font-weight: 800; padding: 2px 9px;
  border-radius: 5px; color: #fff; flex-shrink: 0;
}

/* ── CTA bar ── */
.path-cta {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg); border: 1px solid var(--border-s);
  border-radius: var(--r-m); padding: 18px 26px; box-shadow: var(--sh-xs);
}
.path-cta p { font-size: 14px; color: var(--text-2); text-align: left; }

/* ============================================================
      ⑧ COURSE FORMATS — editorial split v4
   ============================================================ */
.formats-section { padding: 80px 0; background: var(--bg); overflow: hidden; }
.formats-section .sec-head { padding: 0 64px; margin-bottom: 56px; }

.fmode-row {
  display: flex; align-items: stretch; min-height: 400px;
}
.fmode-row + .fmode-row { border-top: 3px solid var(--bg-alt); }

/* Visual panel — full-height gradient with decorative bg */
.fmode-visual {
  flex: 0 0 44%; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 44px 48px;
}
.fmode-visual-bg { position: absolute; inset: 0; z-index: 0; }
.fmode-visual-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(160deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.48) 100%);
}
.fmode-visual-content { position: relative; z-index: 2; }
.fmode-visual-ico {
  width: 64px; height: 64px; border-radius: 18px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255,255,255,.28);
}
.fmode-visual-ico i { font-size: 30px; color: #fff; }
.fmode-visual-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.65); margin-bottom: 8px;
}
.fmode-visual-title {
  font-size: 52px; font-weight: 900; letter-spacing: -.04em;
  line-height: 1; color: #fff; margin-bottom: 20px;
}
.fmode-visual-pill {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; row-gap: 4px;
  background: rgba(255,255,255,.14); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 22px; padding: 9px 20px;
}
.fmode-visual-pill em { font-size: 20px; font-weight: 900; font-style: normal; color: #fff; display: inline-flex; align-items: center; }
.fmode-visual-pill span { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.85); }
.fmode-visual-pill .sep { color: rgba(255,255,255,.35); }

/* Content panel */
.fmode-content {
  flex: 1; padding: 52px 60px;
  display: flex; flex-direction: column; justify-content: center;
}
.fmode-row--reverse .fmode-content { order: -1; }

.fmode-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; padding: 5px 14px; border-radius: 100px;
  margin-bottom: 18px; align-self: flex-start;
}
.fmode-content-title {
  font-size: 26px; font-weight: 900; letter-spacing: -.025em;
  line-height: 1.25; margin-bottom: 8px;
  text-wrap: balance;
}
.fmode-content-sub {
  font-size: 14px; color: var(--text-2); margin-bottom: 30px; line-height: 1.65;
  max-width: 480px;
}
.fmode-features { display: flex; flex-direction: column; gap: 16px; margin-bottom: 34px; }
.fmode-feat { display: flex; align-items: flex-start; gap: 14px; }
.fmode-feat-ico {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.fmode-feat-ico i { font-size: 16px; }
.fmode-feat-text strong { display: block; font-size: 13px; font-weight: 800; margin-bottom: 2px; color: var(--text); }
.fmode-feat-text span { font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
.fmode-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: 100px;
  font-size: 14px; font-weight: 800;
  align-self: flex-start; transition: opacity .18s, gap .18s;
}
.fmode-cta:hover { opacity: .88; gap: 12px; }


/* ============================================================
   ⑨ ECOSYSTEM — device showcase v2
   ============================================================ */
.eco-section {
  padding: 96px 64px 80px;
  background:
    radial-gradient(ellipse at 12% 28%, rgba(209,32,38,.28) 0%, transparent 42%),
    radial-gradient(ellipse at 88% 72%, rgba(255,204,0,.13) 0%, transparent 38%),
    radial-gradient(ellipse at 52% 48%, rgba(209,32,38,.16) 0%, transparent 50%),
    linear-gradient(135deg, #10101C 0%, #181628 55%, #10101C 100%);
  overflow: hidden;
  position: relative;
}
/* Tech grid dot animation */
.eco-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.14) 1.5px, transparent 1.5px);
  background-size: 30px 30px;
  background-position: 0 0;
  animation: eco-grid-move 18s linear infinite;
  pointer-events: none; z-index: 0;
}
@keyframes eco-grid-move {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 0, 28px 28px; }
}
/* Gold top stripe accent */
.eco-section::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: #FFCC00;
}
/* Scanline tech effect */
.eco-scan {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 1;
  background: linear-gradient(
    to bottom,
    transparent 0%, transparent 48%,
    rgba(209,32,38,.18) 49%,
    rgba(255,204,0,.12) 50%,
    rgba(209,32,38,.18) 51%,
    transparent 52%, transparent 100%
  );
  display: none; /* scanline removed — felt gimmicky; static grid carries the tech feel */
}
@keyframes eco-scanline {
  0%   { transform: translateY(-110%); }
  100% { transform: translateY(110%); }
}
.eco-header { text-align: center; max-width: 640px; margin: 0 auto 64px; position: relative; z-index: 1; }
/* Override text colors for dark section */
.eco-section .sec-title { color: #fff; }
.eco-section .sec-sub   { color: rgba(255,255,255,.50); }
.eco-section .tag { background: rgba(209,32,38,.18); border: 1px solid rgba(209,32,38,.35); color: #ff8a8e; }

/* Device showcase row */
.eco-devices {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 32px; margin-bottom: 48px;
  position: relative; z-index: 1;
}

/* ── Phone mockup ── */
.eco-phone {
  flex-shrink: 0; position: relative;
  width: 200px;
}
.eco-phone-frame {
  background: #1A1A1B;
  border-radius: 36px;
  padding: 12px 10px;
  box-shadow:
    0 0 0 2px #2E2E2F,
    0 24px 64px rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,255,255,.06);
  position: relative;
}
.eco-phone-frame::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 60px; height: 20px;
  background: #1A1A1B; border-radius: 0 0 14px 14px;
  z-index: 2;
}
.eco-phone-screen {
  border-radius: 26px; overflow: hidden;
  aspect-ratio: 9/19.5; background: #f0f0f0;
}
.eco-phone-screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eco-phone-label { text-align: center; margin-top: 20px; }
.eco-phone-label strong { display: block; font-size: 14px; font-weight: 800; color: #fff; }
.eco-phone-label span { font-size: 12px; color: rgba(255,255,255,.50); }
.eco-phone-badge {
  position: absolute; top: -10px; right: -10px;
  background: var(--red); color: #fff;
  font-size: 10px; font-weight: 800; padding: 4px 10px;
  border-radius: 100px; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(209,32,38,.4);
}
.eco-phone--center { transform: translateY(-16px) scale(1.05); }

/* ── Laptop mockup ── */
.eco-laptop {
  flex-shrink: 0; position: relative; width: 420px;
}
.eco-laptop-screen {
  background: #1A1A1B; border-radius: 14px 14px 0 0;
  padding: 10px 10px 0;
  box-shadow: 0 0 0 2px #2E2E2F, 0 -4px 12px rgba(0,0,0,.2);
  position: relative; z-index: 1;
}
.eco-laptop-screen::before {
  content: '';
  display: block; width: 8px; height: 8px;
  background: rgba(255,255,255,.15); border-radius: 50%;
  margin: 0 auto 6px;
}
.eco-laptop-display {
  border-radius: 6px 6px 0 0; overflow: hidden;
  aspect-ratio: 16/10; background: #f5f5f5;
}
.eco-laptop-display img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eco-laptop-base {
  background: #2E2E2F; height: 18px;
  border-radius: 0 0 4px 4px;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}
.eco-laptop-base::after {
  content: '';
  width: 80px; height: 5px;
  background: rgba(255,255,255,.12); border-radius: 100px;
}
.eco-laptop-stand {
  width: 100%; height: 14px;
  background: linear-gradient(180deg, #3A3A3B, #252526);
  clip-path: polygon(5% 0%, 95% 0%, 100% 100%, 0% 100%);
  border-radius: 0 0 8px 8px;
}
.eco-laptop-label { text-align: center; margin-top: 16px; }
.eco-laptop-label strong { display: block; font-size: 15px; font-weight: 800; color: #fff; }
.eco-laptop-label span { font-size: 12px; color: rgba(255,255,255,.50); }

/* Bottom feature pills */
.eco-pills { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.eco-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 100px;
  font-size: 13px; font-weight: 700;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.16);
  color: #fff;
  backdrop-filter: blur(8px);
}
.eco-pill i { font-size: 15px; color: #FFCC00; }

/* ============================================================
   ⑩ GALLERY
   ============================================================ */
.gallery-section { padding: 80px 0 0 64px; background: #FFFFFF; }
.gallery-section .sec-title { color: var(--text-1); }
.gallery-section .sec-sub   { color: var(--text-2); }
.story-scroll {
  display: flex; gap: 16px; overflow-x: auto;
  padding: 32px 64px 52px 0;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.story-scroll::-webkit-scrollbar { display: none; }
.story-card {
  flex: 0 0 304px; height: 476px; border-radius: 22px;
  position: relative; scroll-snap-align: start; overflow: hidden;
  display: flex; align-items: flex-end; padding: 24px;
  transition: transform .25s;
}
.story-card:hover { transform: scale(.974); }
.story-card::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,0) 54%);
}
.sc-fill { position: absolute; inset: 0; }
.sc-play {
  position: absolute; top: 22px; right: 22px; z-index: 2;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.18); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center;
}
.sc-play i { font-size: 20px; color: #fff; }
.sc-body { position: relative; z-index: 2; width: 100%; }
.sc-tag {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 4px 10px; border-radius: 6px; text-transform: uppercase;
  margin-bottom: 10px; color: #fff;
}
.sc-body h4 { font-size: 15.5px; font-weight: 800; color: #fff; line-height: 1.48; }
.story-cta {
  flex: 0 0 224px; height: 476px; border-radius: 22px;
  background: var(--red); scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 28px; gap: 18px;
  transition: background .2s;
}
.story-cta:hover { background: var(--red-deep); }
.story-cta i { font-size: 38px; color: rgba(255,255,255,.6); }
.story-cta h4 { font-size: 20px; font-weight: 800; color: #fff; line-height: 1.4; }

/* ============================================================
   ⑪ FORM
   ============================================================ */
.form-section {
  padding: 96px 64px 112px;
  background: linear-gradient(145deg, #FFF5F5 0%, #FAFAFA 100%);
}
.form-card {
  max-width: 900px; margin: 0 auto;
  background: var(--bg); border-radius: var(--r-xl);
  border: 1px solid var(--border-s); box-shadow: var(--sh-l);
  padding: 56px 56px 52px; text-align: center;
}
.form-card .sec-sub { color: var(--text-2); font-size: 15.5px; }
.form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 32px; text-align: left;
}
.form-grid .full { grid-column: 1/-1; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 13px; font-weight: 700; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 17px;
  border-radius: var(--r-m); border: 1.5px solid var(--border-s);
  font-family: var(--ff); font-size: 16px;   /* #115: ≥16px để iOS không tự zoom khi focus */
  background: var(--bg-soft); outline: none; color: var(--text);
  transition: border-color .15s, background .15s, box-shadow .15s;
  appearance: none;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--red); background: var(--bg);
  box-shadow: 0 0 0 3px rgba(209,32,38,.08);
}
.field textarea { resize: none; line-height: 1.6; }

/* #118 — FORM LEAD RÚT GỌN: 4 nút mục tiêu (radio) + lời nhắn thu gọn (<details>). Dùng CHUNG
   home + liên hệ (cả 2 trang nạp home-pne.css). Prefix lf- (lead form). Selector .lf-goals .lf-*
   để THẮNG specificity của .field input / .lh-form-card input (0,1,1) — nếu không radio ẩn bị style lại. */
.lf-goal-lbl { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; color: var(--text); }
.lf-goals { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; position: relative; }
.lf-goals .lf-goal-in {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lf-goals .lf-goal {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px;
  padding: 6px 10px; border: 1.5px solid var(--border-s, #e2e2e2); border-radius: var(--r-m, 11px);
  background: var(--bg-soft, #f6f6f7); font-size: 13.5px; font-weight: 600; color: var(--text, #1c1c1c);
  cursor: pointer; text-align: center; line-height: 1.2;
  transition: border-color .15s, background .15s, color .15s;
}
.lf-goals .lf-goal i { font-size: 17px; color: var(--text-3, #9a9a9a); flex: none; }
.lf-goals .lf-goal-in:checked + .lf-goal { border-color: var(--red); background: var(--red-light, #fdecec); color: var(--red); }
.lf-goals .lf-goal-in:checked + .lf-goal i { color: var(--red); }
.lf-goals .lf-goal-in:focus-visible + .lf-goal { outline: 2px solid var(--red); outline-offset: 2px; }
.lf-more { margin: 2px 0; }
.lf-more > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--text-3, #9a9a9a); padding: 2px 0;
}
.lf-more > summary::-webkit-details-marker { display: none; }
.lf-more[open] > summary { margin-bottom: 8px; }

.form-footer { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.form-meta { display: flex; align-items: center; gap: 24px; }
.form-meta-item { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.form-meta-item i { font-size: 15px; color: var(--text-3); }

/* ============================================================
   ⑫ FOOTER
   ============================================================ */
footer {
  background: #F1F1F1; color: var(--text-2);
  padding: 60px 64px 28px;
  border-top: 4px solid var(--red);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr;
  gap: 36px;
  margin-bottom: 36px;
  align-items: start;
}
/* Brand column: thêm spacer giả cho khớp baseline với 4 cột có heading */
.footer-brand::before {
  content: '';
  display: block;
  height: 11.5px;
  margin-bottom: 20px;
}
.footer-brand .footer-logo { margin-top: 0; }
.footer-logo { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.footer-mark { width: 38px; height: 38px; background: var(--red); border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.footer-mark i { font-size: 20px; color: #fff; }
.footer-logo strong { font-size: 15px; font-weight: 800; color: var(--text-1); }
.footer-brand p { font-size: 13px; line-height: 1.82; margin-bottom: 20px; color: var(--text-2); }
.footer-socials { display: flex; gap: 14px; }
.footer-socials i { font-size: 23px; color: rgba(0,0,0,.30); cursor: pointer; transition: color .15s; }
.footer-socials i:hover { color: var(--red); }
.footer-col h4 { color: var(--red); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 20px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
/* Toggle accordion footer — mặc định (desktop) trông như heading thường, chevron ẩn.
   Mobile (≤768px) overrides ở responsive.css: button thật, full-width, có chevron. */
.footer-col-toggle {
  background: none; border: 0; padding: 0; margin: 0; cursor: default; width: 100%;
  display: inline-flex; align-items: center; gap: 8px;
  color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
  text-align: left;
}
.footer-col-toggle .footer-chev { display: none; }
.footer-col ul li a { color: var(--text-2); font-size: 13px; transition: color .15s; }
.footer-col ul li a:hover { color: var(--red); }
.footer-col ul li a.gold,
.footer-col ul li a.hl { color: var(--red); font-weight: 700; }
.footer-col ul li a.hl:hover { color: var(--red-deep); }
.footer-col ul li span { font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 7px; }
.footer-col ul li span i { font-size: 13px; color: rgba(0,0,0,.25); }

/* Hàng pháp lý */
/* Đợt 8.1: dòng A1-C1 1 hàng — footer thoáng hơn, baseline cân */
.footer-lv-row { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.footer-lv-row a { color: var(--text-2); font-size: 13px; }
.footer-lv-row a:hover { color: var(--red); }
.footer-lv-row span { color: var(--text-3); font-size: 11px; opacity: .6; }

/* Sub-nhóm trong cột footer Khoá học (Học tại trung tâm / Online / Luyện thi) */
.footer-sub-label {
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3);
  margin-top: 4px;
}
.footer-col ul li.footer-sub-label:first-child { margin-top: 0; }

/* Đợt 8.1: hàng pháp lý + © căn giữa (badge BCT, link pháp lý, giấy phép, copyright) */
.footer-legal { border-top: 1px solid rgba(0,0,0,.10); padding: 22px 0 18px; text-align: center; }
.footer-legal-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; margin-bottom: 14px; }
.footer-bct { display: inline-flex; align-items: center; }
.footer-bct img { height: 44px; width: auto; max-width: 220px; display: block; }
.footer-legal-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; font-size: 12.5px; }
.footer-legal-links a { color: var(--text-2); font-weight: 600; }
.footer-legal-links a:hover { color: var(--red); }
.footer-legal-links .sep { color: var(--text-3); }
.footer-legal-license { font-size: 12px; color: var(--text-2); line-height: 1.65; display: flex; flex-direction: column; align-items: center; gap: 4px; }

.footer-bottom {
  border-top: 1px solid rgba(0,0,0,.10); padding-top: 18px; margin-top: 4px;
  display: flex; align-items: center; justify-content: center;
}
.footer-bottom span { font-size: 12px; }
.footer-btm-links { display: flex; gap: 22px; }
.footer-btm-links a { font-size: 12px; color: var(--text-2); transition: color .15s; }
.footer-btm-links a:hover { color: var(--red); }


  /* ── OSD global badge ── */
  /* ── OSD register button ── */
  .osd-register-btn {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 16px; padding: 11px 22px;
    background: var(--red); color: #fff;
    border-radius: 100px; font-size: 13px; font-weight: 700;
    text-decoration: none; transition: background .2s;
  }
  .osd-register-btn:hover { background: var(--red-deep); }
  /* ── PS detail / inline link ── */
  .ps-detail-link {
    font-size: 11.5px; font-weight: 700; text-decoration: none;
    margin-top: 3px; display: inline-flex; align-items: center; gap: 3px;
  }
  .ps-detail-link:hover { opacity: .75; }
  /* ── Gallery story-card cursor ── */
  .story-card { cursor: pointer; }
  /* ── Lightbox ── */
  .pne-lb {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,.9); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
  }
  .pne-lb-inner { position: relative; text-align: center; max-width: 100%; }
  #pne-lb-img {
    max-width: 90vw; max-height: 82vh; border-radius: 14px;
    object-fit: contain; display: block; margin: 0 auto;
  }
  .pne-lb-close {
    position: fixed; top: 20px; right: 24px;
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(255,255,255,.16); border: none; cursor: pointer;
    color: #fff; font-size: 22px; display: flex; align-items: center; justify-content: center;
    transition: background .2s; z-index: 10000;
  }
  .pne-lb-close:hover { background: rgba(255,255,255,.3); }
  .pne-lb-caption {
    color: rgba(255,255,255,.65); margin-top: 14px;
    font-size: 13px; font-weight: 500; max-width: 560px;
    margin-left: auto; margin-right: auto;
  }
  .pne-lb-video-wrap {
    width: 720px; max-width: 90vw; aspect-ratio: 16/9;
    background: #0A0A0B; border-radius: 14px; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 16px; color: rgba(255,255,255,.5);
  }
  .pne-lb-play-btn {
    width: 72px; height: 72px; border-radius: 50%;
    background: var(--red); border: none; cursor: default;
    color: #fff; font-size: 28px; display: flex; align-items: center; justify-content: center;
  }


  /* ── Lightbox nav buttons ── */
  .pne-lb-nav {
    position: fixed; top: 50%; transform: translateY(-50%);
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(255,255,255,.18); border: none; cursor: pointer;
    color: #fff; font-size: 24px; display: flex; align-items: center; justify-content: center;
    transition: background .2s, opacity .2s; z-index: 10001;
  }
  .pne-lb-nav:hover { background: rgba(255,255,255,.32); }
  .pne-lb-prev { left: 18px; }
  .pne-lb-next { right: 18px; }
  .pne-lb-counter {
    font-size: 12px; font-weight: 600; letter-spacing: .06em;
    color: rgba(255,255,255,.55); margin-top: 10px;
  }
  /* ── Gallery view-all button ── */
  .gallery-viewall-btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 12px 28px; border-radius: 100px;
    border: 1.5px solid rgba(0,0,0,.18); color: var(--text-1);
    font-size: 13.5px; font-weight: 700; text-decoration: none;
    transition: border-color .2s, background .2s, color .2s;
  }
  .gallery-viewall-btn:hover { border-color: var(--red); color: var(--red); }

  
/* ── Testimonial slider (pts = PNE Testimonial Slider) ── */
.pts-wrap {
  background: #fff; border-radius: var(--r-l);
  padding: 32px 28px 24px;
  box-shadow: var(--sh-s);
  display: flex; flex-direction: column;
  height: 100%; box-sizing: border-box;
  border: 1px solid var(--border-s);
}
.pts-slide { display: none; flex-direction: column; flex: 1; }
.pts-slide.pts-active { display: flex; }
.pts-slide .rv-quote { font-size: 52px; color: var(--red); line-height: .7; margin-bottom: 10px; font-family: Georgia, serif; }
.pts-slide .rv-text { font-size: 13.5px; color: var(--text); line-height: 1.72; flex: 1; font-style: italic; margin-bottom: 20px; }
.pts-slide .rv-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.pts-slide .rv-stars { color: #FFCC00; font-size: 14px; letter-spacing: 1px; }
.pts-slide .rv-badge { font-size: 10.5px; font-weight: 700; padding: 3px 10px; border-radius: 100px; }
.pts-slide .rv-person { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--border-s); margin-top: auto; }
.pts-slide .rv-av { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff; flex-shrink: 0; }
.pts-slide .rv-name { font-size: 13px; font-weight: 700; }
.pts-slide .rv-role { font-size: 11px; color: var(--text-2); }
.pts-controls {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 16px; margin-top: 12px;
}
.pts-dots { display: flex; gap: 6px; align-items: center; }
.pts-dot {
  width: 7px; height: 7px; border-radius: 99px;
  background: var(--border-m); transition: .25s; cursor: pointer;
}
.pts-dot.pts-dot-active { background: var(--red); width: 22px; }
.pts-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--border-m); background: transparent;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: .2s; color: var(--text-2); font-size: 14px;
}
.pts-btn:hover { border-color: var(--red); color: var(--red); background: var(--red-light); }


  /* ── SERVICES SECTION ── */
  .services-section {
    padding: 80px 64px;
    background: var(--bg);
    border-top: 1px solid var(--border-s);
  }
  .services-header {
    text-align: center;
    max-width: 560px;
    margin: 0 auto 48px;
  }
  .services-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
    align-items: start;
  }
  .svc-main-card {
    background: #fff;
    border: 1.5px solid var(--border-s);
    border-top: 3px solid var(--red);
    border-radius: 20px;
    padding: 36px 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .18s, border-color .18s;
    box-shadow: 0 4px 24px rgba(0,0,0,.06);
  }
  .svc-main-card:hover { box-shadow: 0 16px 48px rgba(0,0,0,.10); }
  .svc-main-top { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
  .svc-main-icon {
    width: 56px; height: 56px; background: rgba(209,32,38,.08);
    border-radius: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .svc-main-label {
    font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: var(--red);
    background: rgba(209,32,38,.08); padding: 4px 10px; border-radius: 100px;
  }
  .svc-main-name { font-size: 26px; font-weight: 900; color: var(--text); letter-spacing: -.03em; line-height: 1.1; }
  .svc-main-level { font-size: 12px; font-weight: 700; color: var(--text-2); letter-spacing: .02em; }
  .svc-main-desc { font-size: 14px; color: var(--text-2); line-height: 1.7; }
  .svc-main-features { list-style: none; display: flex; flex-direction: column; gap: 8px; }
  .svc-main-features li { font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 8px; }
  .svc-check { color: var(--red); font-weight: 900; font-size: 14px; flex-shrink: 0; }
  .svc-main-cta { font-size: 14px; font-weight: 800; color: var(--red); display: flex; align-items: center; gap: 6px; margin-top: 4px; }
  .svc-paths { display: flex; flex-direction: column; gap: 10px; }
  .svc-paths-label {
    font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: var(--text-3);
    padding-bottom: 6px; border-bottom: 1px solid var(--border-s);
    margin-bottom: 4px;
  }
  .svc-path-card {
    background: #fff; border: 1.5px solid var(--border-s);
    border-radius: 14px; padding: 16px 18px;
    display: flex; align-items: center; gap: 14px;
    text-decoration: none; color: inherit;
    transition: border-color .15s, box-shadow .15s;
  }
  .svc-path-card:hover { border-color: var(--red); box-shadow: 0 4px 16px rgba(209,32,38,.08); }
  .svc-path-hot { border-color: rgba(209,32,38,.35); }
  .svc-path-icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .svc-path-body { flex: 1; }
  .svc-path-name { font-size: 14px; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 8px; }
  .svc-path-sub { font-size: 11.5px; color: var(--text-2); margin-top: 2px; }
  .svc-path-badge {
    font-size: 9.5px; font-weight: 800; background: var(--red); color: #fff;
    padding: 2px 7px; border-radius: 100px; letter-spacing: .04em; text-transform: uppercase;
  }
  .svc-path-arrow { font-size: 16px; color: var(--text-3); transition: color .15s, transform .15s; }
  .svc-path-card:hover .svc-path-arrow { color: var(--red); transform: translateX(3px); }
  .svc-card {
    background: #fff;
    border: 1.5px solid var(--border-s);
    border-radius: 18px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-decoration: none;
    color: inherit;
    transition: transform .18s, box-shadow .18s, border-color .18s;
    position: relative;
    overflow: hidden;
  }
  .svc-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0,0,0,.10);
    border-color: var(--red);
  }
  .svc-card-featured {
    border-color: var(--red);
    background: linear-gradient(160deg, #fff 60%, rgba(209,32,38,.03) 100%);
  }
  .svc-badge {
    position: absolute;
    top: 16px; right: 16px;
    background: var(--red);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 100px;
  }
  .svc-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .svc-body { display: flex; flex-direction: column; gap: 6px; flex: 1; }
  .svc-name {
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -.02em;
    line-height: 1.2;
  }
  .svc-level {
    font-size: 11px;
    font-weight: 700;
    color: var(--red);
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .svc-desc {
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.65;
    flex: 1;
    margin-top: 2px;
  }
  .svc-cta {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--red);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
  }
  .svc-arrow {
    transition: transform .15s;
  }
  .svc-card:hover .svc-arrow {
    transform: translateX(4px);
  }
  /* ── RESULTS SECTION ── */
  .results-section {
    padding: 88px 64px;
    background: #FFF6F5; /* brand light surface (red-95/99) — không dùng nền tối */
    color: var(--text);
    border-top: 1px solid var(--border-s);
  }
  .results-header { text-align: center; max-width: 560px; margin: 0 auto 40px; }
  .results-header .sec-eyebrow { color: var(--red); }
  .results-header .sec-title { color: var(--text); }
  .results-header .sec-sub { color: var(--text-2); }
  .results-tabs {
    display: flex; gap: 8px; justify-content: center;
    margin-bottom: 36px; flex-wrap: wrap;
  }
  .rtab {
    background: #fff; border: 1px solid var(--border-s);
    color: var(--text-2); font-size: 13px; font-weight: 700;
    padding: 9px 20px; border-radius: 100px; cursor: pointer;
    transition: .15s; font-family: inherit; box-shadow: var(--sh-xs);
  }
  .rtab:hover { border-color: var(--text-3); color: var(--text); }
  .rtab.active { background: var(--red); border-color: var(--red); color: #fff; box-shadow: var(--sh-red); }
  .rtab-panel { display: none; }
  .rtab-panel.active { display: block; }
  .results-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
    max-width: 1100px; margin: 0 auto;
  }
  .result-card {
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px; padding: 18px 16px; display: flex; flex-direction: column; gap: 5px;
  }
  .rc-osd { border-left: 3px solid var(--gold); }
  .rc-visa { border-left: 3px solid var(--red); }
  .rc-tag { font-size: 9.5px; font-weight: 800; color: var(--red); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
  .rc-name { font-size: 14px; font-weight: 800; color: #fff; }
  .rc-detail { font-size: 11.5px; color: rgba(255,255,255,.45); }
  .rc-placeholder, .rc-add-photo {
    background: rgba(255,255,255,.03);
    border-style: dashed; border-color: rgba(255,255,255,.15) !important;
    align-items: center; justify-content: center; text-align: center;
  }
  .rc-placeholder .rc-name, .rc-add-photo .rc-name { color: rgba(255,255,255,.5); font-size: 13px; }
  .airport-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
    max-width: 1100px; margin: 0 auto;
  }
  .airport-card { border-radius: 14px; overflow: hidden; }
  .airport-img { height: 160px; background: rgba(255,255,255,.06); }
  .airport-label { padding: 10px 14px; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.6); background: rgba(255,255,255,.05); }
  .airport-cta {
    background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.15);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 20px; text-align: center; min-height: 200px;
  }
  .airport-cta .rc-name { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.5); }
  .airport-cta .rc-detail { font-size: 11px; color: rgba(255,255,255,.3); }

/* ============================================================
   RESPONSIVE LAYER — added s6 (desktop-first → max-width overrides)
   Breakpoints: 980px (tablet) · 600px (phone)
   ============================================================ */

@media (max-width: 980px) {
  /* Side padding: 64px → 32px on the main sections */
  .topbar { padding: 8px 32px; }
  nav { padding: 0 32px; }
  .hero { padding: 64px 32px 56px; }
  .trust-section,
  .persona-section,
  .formats-section,
  .eco-section,
  .form-section { padding-left: 32px; padding-right: 32px; }
  .proof-inner,
  .proof-section .sec-head,
  .formats-section .sec-head { padding-left: 32px; padding-right: 32px; }
  .gallery-section { padding-left: 32px; }
  .footer { padding-left: 32px; padding-right: 32px; }

  /* Two-column → single column */
  .hero,
  .proof-featured,
  .form-grid,
  .services-layout { grid-template-columns: 1fr; }

  /* 3-up → 2-up */
  .persona-grid,
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }

  /* 4-up → 2-up */
  .results-grid,
  .airport-grid { grid-template-columns: repeat(2, 1fr); }

  /* Footer 5-col → 2-col tablet */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand::before { display: none; }

  /* Nav links: keep all reachable without a hamburger — horizontal scroll */
  .nav-links {
    gap: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }

  /* Headline scale-down */
  .hero h1 { font-size: 46px; }
  .sec-title { font-size: 38px; }
}

@media (max-width: 600px) {
  /* Tighter side padding on phones */
  .topbar { padding: 8px 18px; font-size: 12px; }
  nav { padding: 0 18px; height: 64px; }
  .hero { padding: 44px 18px 40px; }
  .trust-section,
  .persona-section,
  .formats-section,
  .eco-section,
  .form-section { padding-left: 18px; padding-right: 18px; }
  .proof-inner,
  .proof-section .sec-head,
  .formats-section .sec-head { padding-left: 18px; padding-right: 18px; }
  .gallery-section { padding-left: 18px; }
  .footer { padding-left: 18px; padding-right: 18px; }

  /* Everything stacks to a single column on phones */
  .persona-grid,
  .reviews-grid,
  .results-grid,
  .airport-grid,
  .footer-grid { grid-template-columns: 1fr; }

  /* Vertical section rhythm gets tighter */
  .trust-section,
  .persona-section,
  .formats-section,
  .eco-section,
  .form-section { padding-top: 56px; padding-bottom: 56px; }

  /* Header: logo + actions can wrap if cramped */
  nav { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; gap: 8px; }
  .nav-actions { gap: 8px; }
  .nav-logo-img { height: 34px; }

  /* Headline + type scale for small screens */
  .hero h1 { font-size: 34px; line-height: 1.12; }
  .sec-title { font-size: 28px; }

  /* Avoid horizontal overflow from wide fixed elements */
  img, video { max-width: 100%; height: auto; }
}

/* ============================================================
   UI POLISH LAYER — added s6 (tiết chế · tin cậy · motion)
   ============================================================ */

/* Micro-interactions: tasteful hover lift on cards */
.persona-card, .svc-card, .svc-path, .gb-card, .sc-card, .rc-real {
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease;
}
.persona-card:hover, .svc-card:hover, .gb-card:hover, .sc-card:hover, .rc-real:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-m);
}
.svc-path:hover { transform: translateY(-2px); }

/* Header: subtle shadow once the user scrolls (JS toggles .scrolled) */
nav { transition: box-shadow .25s ease; }
nav.scrolled { box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 6px 24px rgba(0,0,0,.05); }

/* ── Trust strip (slim credibility band under hero) ── */
.trust-strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
.trust-strip-inner {
  max-width: 1200px; margin: 0 auto; padding: 18px 64px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.trust-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--text-2); font-weight: 500;
}
.trust-item i { font-size: 19px; color: var(--red); }
.trust-item strong { color: var(--text); font-weight: 700; }
.trust-item .ts-star { color: #E8A020; }
.trust-divider { width: 1px; height: 26px; background: var(--border-s); flex-shrink: 0; }
a.trust-item { transition: color .18s ease; }
a.trust-item:hover { color: var(--text); }
a.trust-item:hover strong { color: var(--red); }

@media (max-width: 980px) {
  .trust-strip-inner { padding: 16px 32px; gap: 16px; justify-content: center; }
  .trust-divider { display: none; }
}
@media (max-width: 600px) {
  .trust-strip-inner { padding: 14px 18px; gap: 14px 20px; }
  .trust-item { font-size: 12.5px; }
}

/* ── Sticky mobile CTA bar (phones only) ── */
.mobile-cta {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 400;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  /* #124: NỀN ĐẶC thay backdrop-filter blur — blur trên thanh fixed đè nội dung cuộn = repaint mỗi
     frame = GIẬT khi điền form (bàn phím mở + cuộn). Nền đặc rẻ hơn, vẫn tách khỏi nội dung nhờ viền + bóng. */
  background: #fff;
  border-top: 1px solid var(--border-s);
  box-shadow: 0 -4px 24px rgba(0,0,0,.07);
  /* #133: KHÔNG transition transform — trượt translateY khi observer toggle = RUNG. Chỉ fade opacity (đổi
     màu, không đổi VỊ TRÍ → không rung dù có bật/tắt). */
  transition: opacity .2s ease;
}
/* #124/#133: ẩn thanh khi form vào tầm nhìn — ẩn TỨC THÌ bằng visibility (KHÔNG transform translateY trượt
   gây rung). Giữ chỗ (visibility, không display:none) để body padding-bottom không nhảy. */
.mobile-cta.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.mobile-cta .btn { width: 100%; }

/* #116 — Speed-dial liên hệ gộp trong thanh đáy (CHỈ mobile). Desktop: các phần dưới ẩn hẳn. */
.mcta-opts, .mcta-scrim { display: none; }

/* P1-3 (audit): CTA desktop (.nav-actions) ẩn ở ≤900px → thanh CTA dán đáy phải hiện tới 900px,
   nếu không khoảng 601–900px KHÔNG có nút "Đăng ký tư vấn" nào (mất CTA toàn cục). */
@media (max-width: 900px) {
  .mobile-cta { display: block; }
  /* Chừa chỗ để nội dung/khối cuối KHÔNG bị thanh CTA dán đáy che (A) — gồm cả safe-area iPhone */
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }

  /* #116: 1 hàng = [nút gộp tròn, TRÁI] [Đăng ký chiếm phần còn lại] */
  .mcta-row { display: flex; align-items: center; gap: 10px; }
  .mobile-cta .mcta-reg { flex: 1; width: auto; }   /* thắng .mobile-cta .btn{width:100%} (cùng specificity, sau) */
  .mcta-fab {
    flex: none; width: 50px; height: 50px; border-radius: 50%; border: none;
    background: var(--text); color: #fff; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .2s, transform .2s;
  }
  .mcta-fab i { font-size: 24px; }
  .mcta-fab.is-open { background: var(--red); transform: rotate(90deg); }   /* mở → đỏ + xoay thành X */

  /* Nền mờ — bấm ra ngoài đóng. Dưới thanh CTA (z400) nhưng trên nội dung. */
  .mcta-scrim {
    display: block; position: fixed; inset: 0; z-index: 399;
    background: rgba(0,0,0,0); pointer-events: none; transition: background .2s;
  }
  .mcta-scrim.is-open { background: rgba(0,0,0,.28); pointer-events: auto; }

  /* 3 kênh xổ LÊN từ nút gộp (bên trái, ngay trên thanh CTA). */
  .mcta-opts {
    display: flex; position: fixed; left: 14px; z-index: 401;
    bottom: calc(80px + env(safe-area-inset-bottom));
    flex-direction: column-reverse; gap: 12px; align-items: flex-start; pointer-events: none;
  }
  .mcta-opt {
    width: 48px; height: 48px; border-radius: 50%; border: none; padding: 0; background: transparent;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,.20);
    opacity: 0; transform: translateY(10px); transition: opacity .18s ease, transform .18s ease;
  }
  .mcta-opts.is-open { pointer-events: auto; }
  .mcta-opts.is-open .mcta-opt { opacity: 1; transform: none; }
  .mcta-opts.is-open .mcta-opt:nth-child(1) { transition-delay: .02s; }
  .mcta-opts.is-open .mcta-opt:nth-child(2) { transition-delay: .06s; }
  .mcta-opts.is-open .mcta-opt:nth-child(3) { transition-delay: .10s; }
  .mcta-opt i { color: #fff; font-size: 23px; }
  .mcta-opt--phone { background: var(--red); }                 /* Gọi lại: tròn đỏ + icon trắng */
  .mcta-opt img { width: 48px; height: 48px; display: block; object-fit: cover; }
  .mcta-opt--mess img { border-radius: 50%; }                  /* logo Messenger tự đủ màu */
  .mcta-opt--zalo { background: #fff; }
  .mcta-opt--zalo img { border-radius: 13px; }                 /* logo Zalo bo góc (khớp mockup) */
}

/* Scroll reveal: progressive enhancement — visible by default, JS adds .reveal-on */
.reveal { opacity: 1; }
.js-reveal .reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1); }
.js-reveal .reveal.reveal-on { opacity: 1; transform: none; }

/* ============================================================
   SECTION REDESIGNS — s6 (image-forward, modern)
   ============================================================ */

/* ---------- A. SERVICES: bento image cards ---------- */
.svc2-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.svc2-card {
  position: relative; border-radius: 22px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 380px; color: #fff; text-decoration: none;
  isolation: isolate;
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease;
}
.svc2-card:hover { transform: translateY(-5px); box-shadow: var(--sh-l); }
.svc2-img {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.svc2-card:hover .svc2-img { transform: scale(1.05); }
.svc2-card::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(15,15,18,0) 30%, rgba(15,15,18,.55) 62%, rgba(15,15,18,.92) 100%);
}
.svc2-feature { grid-row: span 3; min-height: 100%; }
/* Pad cao bằng thẻ + nội dung dồn đáy → hàng link 4 thẻ luôn THẲNG HÀNG (cùng cấu trúc 3 dòng) */
.svc2-pad { padding: 26px; display: flex; flex-direction: column; height: 100%; justify-content: flex-end; }
.svc2-feature .svc2-pad { padding: 32px; }
.svc2-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: rgba(255,255,255,.16); backdrop-filter: blur(6px);
  padding: 6px 12px; border-radius: 99px; margin-bottom: 14px; align-self: flex-start;
}
.svc2-eyebrow.red { background: var(--red); }
.svc2-title { font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.svc2-feature .svc2-title { font-size: 30px; }
.svc2-levels { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.82); margin-top: 7px; letter-spacing: .02em; }
.svc2-desc { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.85); margin-top: 12px; max-width: 30ch; }
.svc2-feature .svc2-desc { font-size: 15px; max-width: 42ch; }
.svc2-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  font-size: 13.5px; font-weight: 700; color: #fff;
}
.svc2-link .ti { transition: transform .2s ease; }
.svc2-card:hover .svc2-link .ti { transform: translateX(4px); }
.svc2-badge {
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: var(--gold); color: #1A1A1B; padding: 3px 9px; border-radius: 99px; margin-left: 8px;
}
@media (max-width: 980px) {
  .svc2-grid { grid-template-columns: repeat(2, 1fr); }
  .svc2-card { min-height: 300px; }
}
@media (max-width: 560px) {
  .svc2-grid { grid-template-columns: 1fr; }
  .svc2-card { min-height: 240px; }
}

/* ---------- B. STATS: bento (photos + bold numbers) ---------- */
.bento-section { padding: 92px 64px; background: var(--bg); border-top: 1px solid var(--border-s); }
.bento-head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.bento {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 132px; gap: 16px; max-width: 1180px; margin: 0 auto;
}
.bento-tile {
  border-radius: 20px; overflow: hidden; position: relative;
  border: 1px solid var(--border-s); background: #fff; box-shadow: var(--sh-xs);
  transition: transform .22s ease, box-shadow .22s ease;
}
.bento-tile:hover { transform: translateY(-3px); box-shadow: var(--sh-m); }
.bento-photo { color: #fff; }
.bento-photo .bento-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.bento-photo::after { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(15,15,18,.05), rgba(15,15,18,.72)); }
.bento-cap {
  position: absolute; left: 0; bottom: 0; z-index: 2; padding: 18px;
  display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700;
}
.bento-cap .ti { font-size: 17px; }
.bento-office { grid-column: 1 / 3; grid-row: 1 / 3; }
.bento-photo2 { grid-column: 3 / 5; grid-row: 3 / 4; }
.bento-stat { display: flex; flex-direction: column; justify-content: center; padding: 22px; }
.bento-num { font-size: 38px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--red); }
.bento-lbl { font-size: 12.5px; color: var(--text-2); font-weight: 600; margin-top: 8px; line-height: 1.4; }
.bento-accent { background: linear-gradient(135deg, var(--red), var(--red-deep)); border: none; grid-column: 1 / 3; }
.bento-accent .bento-num, .bento-accent .bento-lbl { color: #fff; }
.bento-accent .bento-lbl { color: rgba(255,255,255,.85); }
.bento-gold .bento-num { color: var(--amber); }
.bento-cta { display: flex; justify-content: center; margin-top: 36px; }
@media (max-width: 860px) {
  .bento-section { padding: 64px 18px; }
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 120px; gap: 12px; }
  .bento-office { grid-column: 1 / 3; grid-row: 1 / 3; }
  .bento-photo2 { grid-column: 1 / 3; grid-row: auto; }
  .bento-accent { grid-column: 1 / 3; }
}

/* ---------- C. RESULTS: image-forward cards (light, brand) ---------- */
.rc2-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rc2-card {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--border-s);
  border-left: 3px solid var(--gold); border-radius: 16px; padding: 14px;
  box-shadow: var(--sh-xs);
  transition: transform .2s ease, box-shadow .2s ease;
}
.rc2-card:hover { transform: translateY(-3px); box-shadow: var(--sh-m); }
.rc2-photo {
  width: 64px; height: 64px; border-radius: 12px; flex-shrink: 0;
  background-size: cover; background-position: center; position: relative; overflow: hidden;
}
.rc2-check {
  position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 99px;
  background: #1F9D52; color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 13px; border: 2px solid #fff;
}
.rc2-name { font-size: 15px; font-weight: 700; color: var(--text); }
.rc2-meta { font-size: 12.5px; color: var(--text-2); margin-top: 3px; }
.rc2-level {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .03em;
  color: var(--amber); background: var(--amber-bg); padding: 2px 8px; border-radius: 6px; margin-top: 7px;
}
.rc2-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--red); margin-bottom: 3px; }
/* Airport: big photo cards */
.rc2-air-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rc2-air {
  position: relative; border-radius: 18px; overflow: hidden; min-height: 220px;
  display: flex; align-items: flex-end; color: #fff; text-decoration: none;
  transition: transform .25s ease;
}
.rc2-air:hover { transform: translateY(-4px); }
.rc2-air-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .5s ease; }
.rc2-air:hover .rc2-air-img { transform: scale(1.05); }
.rc2-air::after { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(15,15,18,0) 40%, rgba(15,15,18,.85)); }
.rc2-air-cap { position: relative; z-index: 1; padding: 18px; font-size: 14px; font-weight: 700; }
.rc2-air-cap small { display: block; font-weight: 500; color: rgba(255,255,255,.7); font-size: 12px; margin-top: 2px; }
.rc2-more {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: rgba(255,255,255,.04); border: 1.5px dashed rgba(255,255,255,.2); border-radius: 16px; padding: 18px;
}
@media (max-width: 860px) {
  .rc2-grid, .rc2-air-grid { grid-template-columns: 1fr; }
}

/* ---------- B2. STATS: typography-led editorial ---------- */
.stats2-section { padding: 116px 64px; background: var(--bg); border-top: 1px solid var(--border-s); }
.stats2-top {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 72px; align-items: center;
  max-width: 1180px; margin: 0 auto;
}
.stats2-copy .sec-eyebrow { margin-bottom: 18px; }
.stats2-copy p { font-size: 17px; color: var(--text-2); line-height: 1.7; max-width: 44ch; margin: 18px 0 30px; }
.stats2-photo {
  border-radius: 24px; overflow: hidden; box-shadow: var(--sh-m); aspect-ratio: 4 / 3;
}
.stats2-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stats2-numbers {
  display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: 1180px; margin: 80px auto 0;
  border-top: 2px solid var(--red);
}
.stats2-item { padding: 36px 28px 0; border-left: 1px solid var(--border-s); }
.stats2-item:first-child { border-left: none; padding-left: 4px; }
.stats2-num { font-size: 60px; font-weight: 800; letter-spacing: -.045em; line-height: 1; color: var(--text); }
.stats2-num em { color: var(--red); font-style: normal; }
.stats2-lbl { font-size: 14.5px; color: var(--text-2); margin-top: 12px; font-weight: 500; line-height: 1.45; }
@media (max-width: 860px) {
  .stats2-section { padding: 72px 18px; }
  .stats2-top { grid-template-columns: 1fr; gap: 36px; }
  .stats2-numbers { grid-template-columns: 1fr 1fr; margin-top: 48px; gap-row: 32px; }
  .stats2-item { padding: 28px 18px 0; }
  .stats2-item:nth-child(odd) { border-left: none; padding-left: 4px; }
  .stats2-num { font-size: 46px; }
}

/* Hero eyebrow (replaces the two small badges) */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--text-2);
  margin-bottom: 22px;
}
.hero-eyebrow .ti { color: var(--red); font-size: 17px; }

/* Form trust signals */
.form-trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 28px;
  margin: 24px 0 8px; padding-bottom: 24px; border-bottom: 1px solid var(--border-s);
}
.form-trust-item { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); font-weight: 500; }
.form-trust-item .ti { color: var(--red); font-size: 18px; }
.form-trust-item strong { color: var(--text); font-weight: 700; }

/* ---------- HERO credibility overlay ---------- */
.hero-stats {
  position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 3;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(255,255,255,.93); backdrop-filter: blur(12px) saturate(160%);
  border-radius: 18px; padding: 18px 6px; box-shadow: var(--sh-m);
}
.hero-stat { text-align: center; padding: 0 6px; border-left: 1px solid var(--border-s); }
.hero-stat:first-child { border-left: none; }
.hero-stat b { display: block; font-size: 26px; font-weight: 800; color: var(--red); letter-spacing: -.03em; line-height: 1; }
.hero-stat span { display: block; font-size: 11px; color: var(--text-2); font-weight: 600; line-height: 1.3; margin-top: 7px; }
@media (max-width: 600px) {
  .hero-stats { padding: 14px 4px; }
  .hero-stat b { font-size: 20px; }
  .hero-stat span { font-size: 9.5px; }
}

/* services "Tôi muốn" goal lead-in + outcome line in results */
.svc2-goal { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.82); margin-bottom: 5px; letter-spacing: .01em; }
.rc2-outcome { font-size: 13px; font-weight: 600; color: var(--red); margin-top: 4px; line-height: 1.35; }

/* ---------- ÖSD section: light, credibility-focused ---------- */
.osd2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; max-width: 1180px; margin: 0 auto; }
.osd2-photo { border-radius: 24px; aspect-ratio: 4 / 3; background-size: cover; background-position: center; position: relative; box-shadow: var(--sh-s); }
.osd2-cap { position: absolute; left: 16px; bottom: 16px; background: rgba(0,0,0,.45); color: #fff; padding: 8px 14px; border-radius: 99px; font-size: 12px; font-weight: 600; backdrop-filter: blur(4px); }
.osd2-logo { height: 48px; width: auto; margin-bottom: 30px; }
.osd2-points { list-style: none; display: flex; flex-direction: column; gap: 26px; margin: 0 0 32px; }
.osd2-points li { display: flex; gap: 14px; align-items: flex-start; }
.osd2-points .ti { color: var(--red); font-size: 24px; flex-shrink: 0; margin-top: 1px; }
.osd2-points b { display: block; font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.osd2-points span { font-size: 14px; color: var(--text-2); line-height: 1.5; }
.osd2-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--red); font-size: 15px; }
.osd2-link .ti { transition: transform .2s ease; }
.osd2-link:hover .ti { transform: translateX(4px); }
@media (max-width: 860px) {
  .osd2-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- ECOSYSTEM: de-emphasized light value-add ---------- */
.eco2-section { padding: 84px 64px; background: var(--bg-soft); border-top: 1px solid var(--border-s); }
.eco2-head { text-align: center; max-width: 620px; margin: 0 auto 48px; }
.eco2-title { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: 14px 0 10px; color: var(--text); }
.eco2-head p { color: var(--text-2); font-size: 15.5px; line-height: 1.6; }
.eco2-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; max-width: 1080px; margin: 0 auto; }
.eco2-item .ti { font-size: 28px; color: var(--red); }
.eco2-item b { display: block; font-size: 16px; font-weight: 700; margin: 14px 0 6px; color: var(--text); }
.eco2-item span { font-size: 14px; color: var(--text-2); line-height: 1.5; }
@media (max-width: 980px) { .eco2-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
@media (max-width: 560px) { .eco2-section { padding: 60px 18px; } .eco2-grid { grid-template-columns: 1fr; } }

/* ── PHÂN TRANG PNE (.pne-pager) — dùng cho /tin-tuc + /thu-vien ──
   Số trang bo tròn có viền; trang hiện tại NỀN ĐỎ chữ trắng; nút ‹ › Trước/Sau;
   ellipsis "…"; KHÔNG có text "Previous/Next" hay dòng "Showing…". Responsive. */
.pne-pager { display: flex; justify-content: center; }
.pne-pager ul {
  list-style: none; padding: 0; margin: 0;
  display: inline-flex; flex-wrap: wrap; gap: 7px;
}
.pne-pager li { display: inline-flex; }
.pne-pager li a,
.pne-pager li span {
  min-width: 38px; height: 38px; padding: 0 10px;
  border: 1px solid var(--border-s); border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--ff);
  font-size: 13.5px; font-weight: 700;
  color: var(--text-2); background: #fff;
  transition: background .15s, color .15s, border-color .15s;
  text-decoration: none;
}
.pne-pager li a:hover {
  background: var(--red-light); border-color: var(--red-border); color: var(--red);
}
.pne-pager li.is-active span {
  background: var(--red); border-color: var(--red); color: #fff;
}
.pne-pager li.is-disabled span {
  color: var(--text-3); background: #fafafa; cursor: not-allowed;
}
.pne-pager li.is-ellipsis span {
  border: 0; background: transparent; color: var(--text-3);
  letter-spacing: .08em;
}
.pne-pager i { font-size: 16px; line-height: 1; }

@media (max-width: 560px) {
  .pne-pager li a,
  .pne-pager li span { min-width: 34px; height: 34px; padding: 0 8px; font-size: 12.5px; }
  .pne-pager i { font-size: 14px; }
}

/* ============================================================
   ⓑ STRENGTHS STRIP — 4 thẻ thế mạnh GẮN LIỀN hero
   ============================================================
   Phải đọc như MỘT khối với hero — KHÔNG hở lớn, KHÔNG viền ngăn.
   Cùng nền trắng (body), cùng padding ngang 64px hero, chồng nhẹ lên mép
   dưới hero bằng margin-top âm để hai phần khít vào nhau.
   Thẻ trắng bo góc, icon đỏ nhạt, tiêu đề đậm, mô tả nhỏ. Desktop 4 cột
   1 hàng; Mobile 2×2. Theo brand-tokens.md (đỏ accent, không xanh). */
.strengths-strip {
  padding: 0 64px 56px;
  max-width: var(--max);
  margin: -36px auto 0;            /* chồng lên mép dưới hero */
  position: relative;
  z-index: 2;
}
.strengths-strip__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 thẻ (đã bỏ thẻ GV) — cân giữa */
  gap: 14px;
}
/* Phương án A — thẻ NGANG thấp gọn: ô icon trái + (số to + dòng phụ) phải, căn giữa dọc.
   Grid áp lên markup phẳng (icon / tt / lbl) — icon span 2 hàng bên trái. */
.strengths-strip__card {
  background: #fff;
  border: 1px solid var(--border-s);
  border-radius: var(--r-m);
  padding: 20px 22px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "ic tt" "ic lbl";
  align-items: center;
  column-gap: 16px;
  row-gap: 3px;
  box-shadow: var(--sh-s);
  transition: transform .18s ease, box-shadow .18s ease;
}
.strengths-strip__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-m);
}
.strengths-strip__ic {
  grid-area: ic; align-self: center;
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: #FDE5E6;          /* Soft Pink Glow theo brand */
  color: var(--red);
  font-size: 26px;
  flex-shrink: 0;
}
.strengths-strip__tt {
  grid-area: tt;
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.15;
  letter-spacing: -.3px;
  text-wrap: balance;
}
.strengths-strip__lbl {
  grid-area: lbl;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}

/* ============================================================
   ⓒ PATH FORMATS — 2 thẻ hình thức Offline / Online
   ============================================================
   Đặt trong path-section thay cho 3 khối unlock B1/B2/C1.
   Eyebrow đỏ + tiêu đề đậm + mô tả ngắn + CTA — KHÔNG dùng xanh dương. */
.path-fmt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  /* margin-bottom: tách khỏi .path-cta bên dưới — tránh dính sát. */
  margin: 24px auto 32px;
  max-width: 920px;
}
.path-fmt-card {
  display: flex;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--border-s);
  border-left: 3px solid var(--red);
  border-radius: var(--r-m);
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--sh-s);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.path-fmt-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-m);
  border-left-color: var(--red-deep, #A00C12);
}
.path-fmt-ic {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: #FDE5E6;
  color: var(--red);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.path-fmt-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.path-fmt-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red);
}
.path-fmt-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.3;
}
.path-fmt-card p {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.55;
  margin: 0 0 8px;
}
.path-fmt-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--red);
  font-weight: 700;
  font-size: 13px;
}
.path-fmt-cta i { font-size: 14px; }

@media (max-width: 768px) {
  .strengths-strip {
    /* Mobile: padding ngang khớp hero (18px), margin-top âm nhỏ hơn để vẫn liền mạch */
    padding: 0 18px 36px;
    margin-top: -22px;
  }
  .strengths-strip__grid { grid-template-columns: 1fr; gap: 12px; } /* Phương án A: mobile 1 cột */
  .strengths-strip__card { padding: 16px 18px; column-gap: 14px; }
  .strengths-strip__ic { width: 46px; height: 46px; font-size: 23px; border-radius: 12px; }
  .strengths-strip__tt { font-size: 18px; }
  .strengths-strip__lbl { font-size: 12.5px; }

  .path-fmt-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }
  .path-fmt-card { padding: 16px 14px; }
}

/* ══════════════════════════════════════════════════════════
   Đợt 6A — BANNER ngang toàn trang (partials/banner.blade.php)
   3 kiểu: dải nhạt · dải đỏ đậm · ảnh ngang. Ngay dưới nav.
   ══════════════════════════════════════════════════════════ */
.pne-bnwrap { margin: 14px 0; }
.pne-bnin { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.pne-bn { display: flex; align-items: center; gap: 16px; border-radius: 12px; }
.pne-bn-ic { flex: none; display: flex; align-items: center; justify-content: center; }
.pne-bn-tx { flex: 1; font-size: 14px; line-height: 1.5; }
.pne-bn-btn { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13.5px; padding: 9px 16px; border-radius: 9px; text-decoration: none; white-space: nowrap; transition: .15s; }

/* Kiểu 1 — dải nhạt */
.pne-bn-light { background: #fff; border: 1px solid var(--border-s); border-left: 4px solid var(--red); padding: 14px 18px; box-shadow: var(--sh-xs); }
.pne-bn-light .pne-bn-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--red-light); color: var(--red); font-size: 22px; }
.pne-bn-light .pne-bn-tx b { color: var(--red); }
.pne-bn-light .pne-bn-btn.b-red { background: var(--red); color: #fff; }
.pne-bn-light .pne-bn-btn.b-red:hover { background: var(--red-deep); }

/* Kiểu 2 — dải đỏ đậm */
.pne-bn-red { background: linear-gradient(90deg, var(--red), var(--red-deep)); color: #fff; padding: 13px 18px; }
.pne-bn-red .pne-bn-ic { font-size: 20px; }
.pne-bn-red .pne-bn-tx { font-weight: 600; }
.pne-bn-red .pne-bn-tx b { font-weight: 800; }
.pne-bn-red .pne-bn-btn { background: #fff; color: var(--red); }
.pne-bn-red .pne-bn-btn:hover { background: #fff; opacity: .92; }

/* Kiểu 3 — ảnh ngang */
/* Ảnh CẮT COVER về dải ngang ~1040×280 — mọi kích thước upload đều gọn, không đội cao trang. */
.pne-bn-img { position: relative; border-radius: 12px; overflow: hidden; line-height: 0; box-shadow: var(--sh-xs); display: block; aspect-ratio: 1040 / 280; }
.pne-bn-img a { display: block; width: 100%; height: 100%; }
.pne-bn-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 640px) {
  .pne-bn-light, .pne-bn-red { flex-wrap: wrap; }
  .pne-bn-light .pne-bn-acts { width: 100%; }
}

/* ── Đợt 6B(6): nút cuối bài Tài liệu/Tin tức — Chia sẻ FB + Góp ý ── */
.bv-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.bv-fb { display: inline-flex; align-items: center; gap: 9px; background: #1877F2; color: #fff; font-weight: 700; font-size: 14px; padding: 11px 18px; border-radius: 10px; text-decoration: none; transition: .15s; }
.bv-fb:hover { background: #1465d8; }
.bv-gopy-btn { display: inline-flex; align-items: center; gap: 9px; background: #fff; color: var(--text); font-weight: 700; font-size: 14px; padding: 11px 18px; border-radius: 10px; border: 1.5px solid var(--border-s); cursor: pointer; font-family: var(--ff); transition: .15s; }
.bv-gopy-btn:hover { border-color: var(--red); color: var(--red); }
.bv-gopy { flex-basis: 100%; margin-top: 6px; border: 1px solid var(--border-s); border-radius: 14px; padding: 18px; background: #FCFCFD; }
.bv-gopy h4 { font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.bv-gopy h4 i { color: var(--red); }
.bv-gopy-lnk { font-size: 12.5px; color: var(--text-2); margin: 10px 0; background: #fff; border: 1px solid var(--border-s); border-radius: 8px; padding: 9px 11px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bv-gopy-lnk i { color: var(--red); }
.bv-gopy-lnk b { color: var(--text); font-weight: 600; word-break: break-all; }
.bv-gopy-lnk .auto { color: var(--text-3); margin-left: auto; }
.bv-gopy textarea { width: 100%; border: 1px solid var(--border-s); border-radius: 9px; padding: 10px 12px; font: 400 16px var(--ff); min-height: 80px; resize: vertical; box-sizing: border-box; }   /* #115: 13.5→16, iOS không zoom */
.bv-gopy textarea:focus { outline: none; border-color: var(--red); }
.bv-gopy-send { margin-top: 10px; background: var(--red); color: #fff; font-weight: 700; border: none; border-radius: 9px; padding: 10px 20px; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-family: var(--ff); transition: .15s; }
.bv-gopy-send:hover { background: var(--red-deep); }

/* Toast thành công toàn cục (góp ý, …) */
.pne-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; z-index: 3000; background: var(--text); color: #fff; font-weight: 600; font-size: 14px; padding: 13px 20px; border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.28); display: flex; align-items: center; gap: 9px; max-width: 92vw; }
.pne-toast i { color: #4ADE80; font-size: 18px; }
@media (max-width: 900px) { .pne-toast { bottom: 84px; } }