/* =====================================================================
   LiFin Việt Nam — Website style sheet
   Nhận diện: xanh LiFin (#064da5 → #2b89cf), vàng LiFin (#fecb1a)
   Font: Lexend (tiêu đề) + Be Vietnam Pro (nội dung) — Google Fonts
   Ý tưởng bố cục: "bàn cờ cuộc đời" — lục giác của logo làm mô-típ,
   các dải màu xen kẽ trắng / xanh nhạt / xanh đậm.
   ===================================================================== */

:root {
  /* Màu thương hiệu */
  --blue-950: #042b5c;
  --blue-900: #053a7d;
  --blue-700: #064da5;   /* xanh chính (logo) */
  --blue-600: #0d5fc0;
  --blue-500: #2b89cf;   /* xanh nhạt (gradient logo) */
  --blue-300: #8fc0ea;
  --blue-100: #e3eefb;
  --blue-50:  #f2f7fd;
  --gold-500: #fecb1a;   /* vàng (logo) */
  --gold-600: #e3b200;
  --gold-100: #fff4c9;

  /* Trung tính (ngả xanh) */
  --ink:      #10213f;
  --ink-2:    #3b4a68;
  --ink-3:    #5b6a8f;
  --line:     #d9e2f0;
  --surface:  #ffffff;
  --surface-2:#f3f7fc;

  --grad-brand: linear-gradient(135deg, #2b89cf 0%, #064da5 100%);
  --grad-brand-ink: linear-gradient(135deg, #0a56b0 0%, #064da5 55%, #053a7d 100%); /* nền có chữ: đủ tương phản cho chữ trắng & vàng */
  --grad-deep:  linear-gradient(160deg, #064da5 0%, #042b5c 100%);

  --font-display: "Lexend", "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius: 18px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --pill: 999px;
  --shadow-sm: 0 1px 2px rgba(16, 33, 63, .06), 0 2px 8px rgba(16, 33, 63, .05);
  --shadow-md: 0 6px 20px rgba(6, 77, 165, .10);
  --shadow-lg: 0 18px 50px rgba(6, 77, 165, .18);
  --container: 1180px;
  --gutter-l: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  --header-h: 76px;
  color-scheme: light;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-700); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.15; margin: 0 0 .5em; text-wrap: balance; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.5rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.5rem); font-weight: 700; }
h3 { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.4rem); font-weight: 600; }
h4 { font-size: 1.05rem; font-weight: 600; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li { margin-bottom: .35em; }
strong { font-weight: 600; }
small { font-size: .875em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.num, .stat-value, table td.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--gold-100); color: var(--ink); }

.skip-link { position: absolute; left: -999px; top: 8px; background: var(--gold-500); color: var(--ink); padding: .6rem 1rem; border-radius: var(--radius-xs); z-index: 100; font-weight: 600; }
.skip-link:focus { left: 12px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.container--narrow { max-width: 820px; }
.container--wide { max-width: 1320px; }

/* ---------- Typography helpers ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-600); margin-bottom: .9rem; }
.eyebrow::before { content: ""; width: 10px; height: 10px; background: var(--gold-500); clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); flex: none; }
.section-dark .eyebrow, .hero .eyebrow, .page-hero .eyebrow, .cta-band .eyebrow { color: var(--gold-500); }
.lead { font-size: 1.125rem; color: var(--ink-2); max-width: 62ch; }
.section-dark .lead, .hero .lead, .page-hero .lead, .cta-band .lead { color: rgba(255,255,255,.82); }
.text-center { text-align: center; }
.text-center .lead { margin-inline: auto; }
.text-center .eyebrow { justify-content: center; }
.muted { color: var(--ink-3); }
.section-head { max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head.text-center { margin-inline: auto; }
.section-head h2 { margin-bottom: .6rem; }
.section-head .lead { margin-bottom: 0; }
.section-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; max-width: none; flex-wrap: wrap; }
.section-head--row > div { max-width: 680px; }
.highlight { color: var(--blue-700); }
.hero .highlight, .page-hero .highlight, .section-dark .highlight, .cta-band .highlight { color: var(--gold-500); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 1.5rem; border-radius: var(--pill); font-family: var(--font-display); font-weight: 600; font-size: .95rem; line-height: 1.2; border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease; text-decoration: none; white-space: nowrap; }
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn .icon { width: 18px; height: 18px; }
.btn-primary { background: var(--gold-500); color: var(--ink); border-color: var(--gold-500); box-shadow: 0 6px 18px rgba(254, 203, 26, .35); }
.btn-primary:hover { background: #ffd43f; border-color: #ffd43f; box-shadow: 0 8px 22px rgba(254, 203, 26, .45); }
.btn-blue { background: var(--blue-700); color: #fff; border-color: var(--blue-700); box-shadow: var(--shadow-md); }
.btn-blue:hover { background: var(--blue-600); border-color: var(--blue-600); }
.btn-outline { background: transparent; color: var(--blue-700); border-color: var(--blue-300); }
.btn-outline:hover { background: var(--blue-50); border-color: var(--blue-700); }
.btn-ghost-light { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.35); backdrop-filter: blur(4px); }
.btn-ghost-light:hover { background: rgba(255,255,255,.16); border-color: #fff; }
.btn-sm { padding: .6rem 1.1rem; font-size: .875rem; }
.btn-lg { padding: 1rem 1.9rem; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; }

/* ---------- Header ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); background: #fff; z-index: 60; }
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 4px 24px rgba(16,33,63,.06); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { height: 46px; width: auto; }
.nav { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.nav a { display: inline-block; padding: .55rem .8rem; border-radius: var(--pill); color: var(--ink-2); font-weight: 500; font-size: .95rem; white-space: nowrap; transition: background .15s, color .15s; }
@media (min-width: 961px) and (max-width: 1400px) { .nav a { padding: .5rem .62rem; font-size: .9rem; } .header-inner { gap: .75rem; } }
@media (min-width: 961px) and (max-width: 1240px) { .nav li:first-child { display: none; } .header-cta .btn { padding-inline: 1.1rem; } }
.nav a:hover { background: var(--blue-50); color: var(--blue-700); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--blue-700); font-weight: 600; background: var(--blue-100); }
.header-cta { display: flex; align-items: center; gap: .6rem; }
.nav-toggle { display: none; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line); background: #fff; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.nav-toggle { position: relative; }
.nav-toggle .bar { position: absolute; left: 50%; top: 50%; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s, opacity .2s; transform: translate(-50%, calc(-50% + var(--o, 0px))); }
.nav-toggle .bar:nth-child(1) { --o: -6px; }
.nav-toggle .bar:nth-child(3) { --o: 6px; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }

@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .header-cta .btn { display: none; }
  .nav-wrap { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 20px 40px rgba(16,33,63,.12); padding: .5rem var(--gutter-r) 1.25rem var(--gutter-l); display: none; }
  .nav-wrap.is-open { display: block; }
  .nav { flex-direction: column; align-items: stretch; gap: .15rem; }
  .nav a { padding: .8rem .9rem; font-size: 1.05rem; }
  .nav-wrap .mobile-cta { margin-top: .75rem; }
}
@media (min-width: 961px) { .nav-wrap .mobile-cta { display: none; } }

/* ---------- Sections ---------- */
.section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section-alt { background: var(--surface-2); }
.section-dark { background: var(--grad-deep); color: #fff; position: relative; overflow: hidden; }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark p { color: rgba(255,255,255,.85); }
.section-dark a:not(.btn) { color: var(--gold-500); }
.section-tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.hex-bg { position: relative; isolation: isolate; }
.hex-bg::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'><g fill='none' stroke='%23ffffff' stroke-opacity='0.09' stroke-width='1.2'><path d='M28 1 55 16.5v31L28 63 1 47.5v-31z'/><path d='M28 64 55 79.5V96M28 64 1 79.5V96'/></g></svg>"); background-size: 56px 97px; }
/* LiFin Focus (nguồn lực Thời gian): thay hoạ tiết lục giác bằng đồng hồ và quả cà chua Pomodoro, cùng độ mờ */
.hex-bg--focus::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='168' height='168' viewBox='0 0 168 168'><g fill='none' stroke='%23ffffff' stroke-opacity='0.11' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='36' cy='38' r='17'/><path d='M36 23v3M36 50v3M21 38h3M48 38h3M36 38 45.5 32.5M36 38 29.9 34.5'/><path d='M100 52C100 40 110 35 118 37C126 35 136 40 136 52C136 63 128 68 118 68C108 68 100 63 100 52Z'/><path d='M118 37q-6-6-12-2q6 1 12 2ZM118 37q6-6 12-2q-6 1-12 2ZM118 37q-2-7 2-10q1 5-2 10Z'/><path d='M106 54h3M127 54h3M118 60v3'/><circle cx='62' cy='126' r='15'/><path d='M46 116a7 7 0 0 1 9-9M69 107a7 7 0 0 1 9 9M53 139l-3 4M71 139l3 4M62 108v3M62 126 70.2 121.3M62 126 56.8 123'/><path d='M128 133C128 125 134 121 140 123C146 121 152 125 152 133C152 141 146 145 140 145C134 145 128 141 128 133Z'/><path d='M140 123q-4-4-8-1q4 1 8 1ZM140 123q4-4 8-1q-4 1-8 1ZM140 122c-1-4 0-6 2-7'/></g><g fill='%23ffffff' fill-opacity='0.11'><circle cx='36' cy='38' r='1.6'/><circle cx='62' cy='126' r='1.5'/></g></svg>"); background-size: 168px 168px; }

/* ---------- Hero ---------- */
.hero { background: var(--grad-deep); color: #fff; position: relative; overflow: hidden; padding-block: clamp(3rem, 6vw, 5.5rem) clamp(3rem, 6vw, 5rem); }
.hero::after { content: ""; position: absolute; width: 60vw; height: 60vw; max-width: 760px; max-height: 760px; right: -18vw; top: -22vw; background: radial-gradient(closest-side, rgba(43,137,207,.55), rgba(43,137,207,0)); pointer-events: none; }
.hero .container { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero h1 { color: #fff; margin-bottom: 1rem; }
.hero .lead { font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); margin-bottom: 1.75rem; }
.hero-art { position: relative; }
.hero-art svg { width: 100%; height: auto; filter: drop-shadow(0 30px 50px rgba(2,20,50,.45)); }
.hero-badges { display: flex; flex-wrap: wrap; gap: .5rem .75rem; margin-top: 1.75rem; }
.hero-badge { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .85rem; border-radius: var(--pill); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); font-size: .85rem; color: rgba(255,255,255,.92); }
.hero-badge .icon { width: 16px; height: 16px; color: var(--gold-500); }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { max-width: 520px; margin-inline: auto; }
}

/* Page hero (trang con) */
.page-hero { background: var(--grad-deep); color: #fff; padding-block: clamp(2.75rem, 5vw, 4.5rem); position: relative; overflow: hidden; }
.page-hero h1 { color: #fff; max-width: 18ch; }
.page-hero h2, .page-hero h3 { color: #fff; }
.page-hero p { color: rgba(255,255,255,.85); }
.page-hero .lead { max-width: 60ch; margin-bottom: 0; }
.page-hero .breadcrumb { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .85rem; color: rgba(255,255,255,.7); margin-bottom: 1rem; }
.page-hero .breadcrumb a { color: rgba(255,255,255,.85); }
.page-hero .breadcrumb > :not(:first-child)::before { content: "/"; margin-right: .4rem; opacity: .6; }
.page-hero--split { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: 2.5rem; align-items: center; }
.page-hero--split img { max-width: 320px; width: 100%; margin-inline: auto; }
.page-hero--split img.hero-photo-wide { max-width: 520px; border-radius: 22px; box-shadow: 0 30px 60px rgba(2,20,50,.45); border: 1px solid rgba(255,255,255,.18); }
@media (max-width: 760px) { .page-hero--split { grid-template-columns: 1fr; } .page-hero--split img { max-width: 220px; } }

/* ---------- Grids & cards ---------- */
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1024px) { .grid-4, .grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grid-3, .grid-4, .grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid-2, .grid-3, .grid-4, .grid-6 { grid-template-columns: 1fr; } }
.grid > * { min-width: 0; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: .75rem; }
.card h3 { margin-bottom: .1rem; }
.card p { margin-bottom: 0; color: var(--ink-2); }
.card .card-link { margin-top: auto; padding-top: .5rem; font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; }
.card--hover { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--blue-300); }
.section-dark .card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); box-shadow: none; }
.section-dark .card h3 { color: #fff; }
.section-dark .card p { color: rgba(255,255,255,.8); }

/* Hex icon */
.hex-icon { width: 58px; height: 58px; display: inline-grid; place-items: center; background: var(--grad-brand); color: #fff; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); flex: none; }
.hex-icon .icon { width: 26px; height: 26px; }
.hex-icon--gold { background: var(--gold-500); color: var(--ink); }
.hex-icon--light { background: var(--blue-100); color: var(--blue-700); }
.hex-icon--lg { width: 72px; height: 72px; } .hex-icon--lg .icon { width: 32px; height: 32px; }
.icon { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Feature list (icon + text) */
.feature { display: flex; gap: 1rem; align-items: flex-start; }
.feature h3, .feature h4 { margin-bottom: .25rem; }
.feature p { margin: 0; color: var(--ink-2); }
.section-dark .feature p { color: rgba(255,255,255,.8); }
.section-dark .program-list li { color: rgba(255,255,255,.85); }
.section-dark .program-list li::before { background-color: rgba(255,255,255,.15); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fecb1a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>"); }
.section-dark table { color: #fff; }
.section-dark th { background: rgba(255,255,255,.1); color: #fff; }
.section-dark .table-wrap { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); }
.section-dark th, .section-dark td { border-color: rgba(255,255,255,.12); }
.section-dark td strong { color: var(--gold-500); }
.section-dark small { color: rgba(255,255,255,.65); }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; }
.stat { padding: 1.4rem 1.5rem; border-radius: var(--radius-sm); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); }
.stat-value { font-family: var(--font-display); font-size: clamp(1.7rem, 1.4rem + 1vw, 2.4rem); font-weight: 700; color: var(--gold-500); line-height: 1.1; }
.stat-label { font-size: .9rem; color: rgba(255,255,255,.8); margin-top: .35rem; }
.stats--light .stat { background: var(--surface); border-color: var(--line); }
.stats--light .stat-value { color: var(--blue-700); }
.stats--light .stat-label { color: var(--ink-3); }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* Ecosystem (sub-brand) cards */
.eco-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; display: flex; flex-direction: column; gap: .75rem; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; }
.eco-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); text-decoration: none; }
.eco-card img { width: 128px; height: auto; margin: 0 auto .25rem; }
.eco-card h3 { color: var(--ink); text-align: center; margin: 0; font-size: 1.05rem; }
.eco-card p { color: var(--ink-2); margin: 0; text-align: center; font-size: .95rem; }
.eco-card .tag { align-self: center; }

/* Tag / badge */
.tag { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: var(--pill); background: var(--blue-100); color: var(--blue-700); font-size: .78rem; font-weight: 600; letter-spacing: .02em; }
.tag--gold { background: var(--gold-100); color: #7a5c00; }
.tag--outline { background: transparent; border: 1px solid var(--line); color: var(--ink-2); }
.tag--light { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.2); }

/* Program cards */
.program { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; }
.program:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.program-head { padding: 1.25rem 1.5rem; background: var(--grad-brand); color: #fff; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.program-head .tag { background: rgba(255,255,255,.16); color: #fff; white-space: nowrap; flex: none; }
.program-head--gold { background: linear-gradient(135deg, #ffd84a, #fecb1a); color: var(--ink); }
.program-head--gold .tag { background: rgba(16,33,63,.12); color: var(--ink); }
.program-head--navy { background: var(--grad-deep); }
.program-level { font-family: var(--font-display); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; opacity: .9; }
.program-body { padding: 1.4rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .8rem; flex: 1; }
.program-body h3 { margin: 0; }
.program-body p { margin: 0; color: var(--ink-2); font-size: .97rem; }
.program-meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .85rem; color: var(--ink-3); }
.program-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.program-meta .icon { width: 16px; height: 16px; }
.program-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding-top: .9rem; border-top: 1px dashed var(--line); flex-wrap: wrap; }
.price { font-family: var(--font-display); font-weight: 700; color: var(--blue-700); font-size: 1.05rem; }
.price small { font-weight: 500; color: var(--ink-3); font-size: .8rem; display: block; }
.program-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.program-list li { position: relative; padding-left: 1.7rem; font-size: .95rem; color: var(--ink-2); margin: 0; }
.program-list li::before { content: ""; position: absolute; left: 0; top: .22rem; width: 18px; height: 18px; background: var(--blue-100); border-radius: 50%; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23064da5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>"); background-size: 11px; background-repeat: no-repeat; background-position: center; }

/* Values (LIFIN) */
.values { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 1rem; }
.value { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); padding: 1.5rem 1.25rem; }
.value-letter { font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; color: var(--gold-500); line-height: 1; margin-bottom: .5rem; }
.value h3 { font-size: 1.1rem; margin-bottom: .35rem; }
.value h3 span { display: block; font-size: .8rem; font-weight: 500; color: rgba(255,255,255,.7); letter-spacing: .06em; text-transform: uppercase; margin-top: .15rem; }
.value p { font-size: .93rem; margin: 0 0 .75rem; }
.value-keys { display: flex; flex-wrap: wrap; gap: .35rem; }
.value-keys span { font-size: .74rem; font-weight: 600; letter-spacing: .03em; padding: .25rem .6rem; border-radius: var(--pill); background: rgba(254,203,26,.14); color: var(--gold-500); border: 1px solid rgba(254,203,26,.35); }
.value-cycle { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; counter-reset: vc; }
.value-cycle li { font-size: .78rem; color: rgba(255,255,255,.85); margin: 0; padding-left: 1.5rem; position: relative; counter-increment: vc; }
.value-cycle li::before { content: counter(vc); position: absolute; left: 0; top: .1rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--gold-500); color: var(--ink); font-family: var(--font-display); font-size: .68rem; font-weight: 700; display: grid; place-items: center; }
@media (max-width: 1024px) { .values { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 640px) { .values { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .values { grid-template-columns: 1fr; } }

/* Resources (6 nguồn lực) */
.resource { display: flex; flex-direction: column; gap: .6rem; padding: 1.4rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.resource h3 { font-size: 1.05rem; margin: 0; }
.resource p { font-size: .93rem; color: var(--ink-2); margin: 0; }

/* Steps / journey */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.25rem; }
.step { position: relative; padding: 1.5rem 1.4rem 1.4rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--font-display); font-weight: 700; font-size: .9rem; color: var(--blue-700); background: var(--blue-100); border-radius: var(--pill); padding: .25rem .7rem; display: inline-block; margin-bottom: .8rem; }
.step h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.step p { margin: 0; font-size: .95rem; color: var(--ink-2); }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

.journey { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; align-items: stretch; }
.journey-node { border-radius: var(--radius); padding: 1.4rem; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); position: relative; }
.journey-node--main { background: rgba(254,203,26,.12); border-color: rgba(254,203,26,.45); }
.journey-node .kicker { font-family: var(--font-display); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-500); margin-bottom: .35rem; }
.journey-node h3 { margin-bottom: .35rem; }
.journey-node p { font-size: .93rem; margin: 0; }
@media (max-width: 860px) { .journey { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .journey { grid-template-columns: 1fr; } }

/* Session timeline bar */
.timebar { display: flex; width: 100%; border-radius: var(--pill); overflow: hidden; height: 46px; border: 1px solid var(--line); background: var(--surface-2); }
.timebar span { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: .8rem; font-weight: 600; color: #fff; padding: 0 .4rem; white-space: nowrap; overflow: hidden; }
.timebar .t1 { background: var(--blue-500); }
.timebar .t2 { background: var(--blue-700); }
.timebar .t3 { background: var(--gold-500); color: var(--ink); }
.timebar .t4 { background: var(--blue-900); }
.timebar-legend { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .75rem; margin-top: 1rem; font-size: .92rem; }
.timebar-legend div { display: flex; flex-direction: column; gap: .15rem; padding-left: .8rem; border-left: 4px solid var(--blue-500); }
.timebar-legend div:nth-child(2) { border-color: var(--blue-700); }
.timebar-legend div:nth-child(3) { border-color: var(--gold-500); }
.timebar-legend div:nth-child(4) { border-color: var(--blue-900); }
.timebar-legend strong { font-family: var(--font-display); }
.timebar-legend small { color: var(--ink-3); }
@media (max-width: 640px) { .timebar-legend { grid-template-columns: 1fr 1fr; } .timebar span { font-size: .7rem; } }

/* Split content (text + visual) */
.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split--rev > :first-child { order: 2; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split--rev > :first-child { order: 0; } }

/* Visual placeholder — ô ảnh (thay bằng ảnh thật) */
.photo-slot { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--grad-brand); display: grid; place-items: center; color: #fff; text-align: center; padding: 1.5rem; isolation: isolate; box-shadow: var(--shadow-lg); max-width: 100%; }
.photo-slot::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'><g fill='none' stroke='%23ffffff' stroke-opacity='0.14' stroke-width='1.2'><path d='M28 1 55 16.5v31L28 63 1 47.5v-31z'/><path d='M28 64 55 79.5V96M28 64 1 79.5V96'/></g></svg>"); background-size: 56px 97px; z-index: -1; }
.photo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-slot .icon { width: 34px; height: 34px; margin-bottom: .5rem; opacity: .9; }
.photo-slot strong { font-family: var(--font-display); font-weight: 600; display: block; }
.photo-slot small { opacity: .8; }
.photo-slot--wide { aspect-ratio: 16 / 9; }
.photo-slot--square { aspect-ratio: 1; }

/* Quote */
.quote { position: relative; padding: 2rem 2rem 2rem 2.6rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.quote::before { content: "“"; position: absolute; left: 1.1rem; top: .6rem; font-family: var(--font-display); font-size: 3.2rem; line-height: 1; color: var(--gold-500); }
.quote p { font-size: 1.15rem; font-family: var(--font-display); font-weight: 500; color: var(--ink); margin-bottom: .75rem; }
.quote cite { font-style: normal; color: var(--ink-3); font-size: .9rem; }
.section-dark .quote { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.section-dark .quote p { color: #fff; }
.section-dark .quote cite { color: rgba(255,255,255,.7); }

/* CTA band */
.cta-band { background: var(--grad-brand); color: #fff; position: relative; overflow: hidden; }
.cta-band .container { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; }
.cta-inner { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,.9fr); gap: 2rem; align-items: center; }
.cta-contact { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius); padding: 1.5rem; display: grid; gap: .8rem; }
.cta-contact a { color: #fff; font-weight: 600; }
.cta-contact .feature .hex-icon { width: 46px; height: 46px; }
.cta-contact .feature .hex-icon .icon { width: 20px; height: 20px; }
.cta-contact .feature p { color: rgba(255,255,255,.95); }
.cta-contact .feature small { color: rgba(255,255,255,.7); display: block; }
@media (max-width: 860px) { .cta-inner { grid-template-columns: 1fr; } }

/* Posts */
.post-card { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.post-cover { aspect-ratio: 16 / 9; background: var(--grad-brand); display: grid; place-items: center; color: #fff; position: relative; }
.post-cover::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'><g fill='none' stroke='%23ffffff' stroke-opacity='0.14' stroke-width='1.2'><path d='M28 1 55 16.5v31L28 63 1 47.5v-31z'/><path d='M28 64 55 79.5V96M28 64 1 79.5V96'/></g></svg>"); background-size: 56px 97px; }
.post-cover .icon { width: 40px; height: 40px; position: relative; }
.post-cover--gold { background: linear-gradient(135deg, #ffd84a, #f0b800); color: var(--ink); }
.post-cover--navy { background: var(--grad-deep); }
.post-cover--sky { background: linear-gradient(135deg, #5aa6e0, #2b89cf); }
.post-body { padding: 1.3rem 1.4rem 1.4rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.post-body h3 { font-size: 1.08rem; margin: 0; line-height: 1.35; }
.post-body h3 a { color: var(--ink); }
.post-body p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.post-meta { display: flex; gap: .6rem; align-items: center; font-size: .8rem; color: var(--ink-3); }
.post-body .card-link { margin-top: auto; padding-top: .4rem; font-weight: 600; font-size: .92rem; display: inline-flex; align-items: center; gap: .3rem; }

/* FAQ */
.faq { display: grid; gap: .75rem; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 1.25rem; box-shadow: var(--shadow-sm); }
.faq summary { cursor: pointer; list-style: none; padding: 1.05rem 2.2rem 1.05rem 0; font-family: var(--font-display); font-weight: 600; position: relative; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: .2rem; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--blue-700); border-bottom: 2px solid var(--blue-700); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq details[open] summary { border-bottom: 1px dashed var(--line); }
.faq details p { padding: 1rem 0 1.1rem; margin: 0; color: var(--ink-2); }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 560px; }
th, td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: var(--font-display); font-weight: 600; background: var(--surface-2); color: var(--ink); font-size: .85rem; letter-spacing: .03em; }
tr:last-child td { border-bottom: 0; }
td strong { color: var(--ink); }

/* Team */
.person { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1.75rem 1.25rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.avatar { width: 112px; height: 112px; border-radius: 50%; background: var(--grad-brand); display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-size: 2rem; font-weight: 700; border: 4px solid var(--gold-500); overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.person h3 { margin: .4rem 0 0; font-size: 1.1rem; }
.person .role { color: var(--blue-700); font-weight: 600; font-size: .9rem; }
.person p { color: var(--ink-2); font-size: .93rem; margin: 0; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 2.5rem; align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.info-list { display: grid; gap: 1.1rem; }
.info-list .feature p { color: var(--ink); font-weight: 500; }
.info-list .feature small { display: block; color: var(--ink-3); font-weight: 400; }
.form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2.2rem); box-shadow: var(--shadow-md); display: grid; gap: 1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.field { display: grid; gap: .35rem; }
.field label { font-weight: 600; font-size: .9rem; }
.field label .req { color: #c62828; }
.field input, .field select, .field textarea { width: 100%; padding: .8rem .95rem; border: 1px solid var(--line); border-radius: var(--radius-xs); background: #fff; transition: border-color .15s, box-shadow .15s; min-width: 0; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 4px var(--blue-100); }
.field textarea { min-height: 130px; resize: vertical; }
.field .hint { font-size: .8rem; color: var(--ink-3); }
.form-note { font-size: .82rem; color: var(--ink-3); margin: 0; }
.form-error { margin: 0; padding: .7rem .9rem; border-radius: var(--radius-sm); background: #fff4e5; border: 1px solid #f0b55a; color: #6b3d00; font-size: .95rem; }
.form-error a { color: inherit; font-weight: 600; }
.form-success { display: none; background: var(--blue-50); border: 1px solid var(--blue-300); border-radius: var(--radius-sm); padding: 1.25rem; }
.form-success.is-visible { display: block; }
.form-success h3 { margin-bottom: .35rem; }
.hp { position: absolute; left: -5000px; }

/* Social links */
.social { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; padding: 0; margin: 0; }
.social a { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: var(--pill); border: 1px solid rgba(255,255,255,.22); color: #fff; font-size: .88rem; font-weight: 500; background: rgba(255,255,255,.06); }
.social a:hover { background: rgba(255,255,255,.14); text-decoration: none; }
.social .icon { width: 16px; height: 16px; }
.social--light a { border-color: var(--line); color: var(--ink-2); background: var(--surface); }
.social--light a:hover { background: var(--blue-50); color: var(--blue-700); }

/* ---------- Footer ---------- */
.site-footer { background: var(--blue-950); color: rgba(255,255,255,.82); padding-block: clamp(3rem, 5vw, 4.5rem) 1.5rem; position: relative; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2.5rem; }
.footer-grid h4 { color: #fff; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1rem; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.footer-grid ul.social { display: flex; flex-wrap: wrap; gap: .6rem; }
.footer-grid ul.social li { margin: 0; }
.footer-grid a { color: rgba(255,255,255,.82); }
.footer-grid a:hover { color: var(--gold-500); }
.footer-brand img { height: 64px; width: auto; margin-bottom: 1rem; }
.footer-brand p { font-size: .93rem; max-width: 36ch; }
.footer-contact li { display: flex; gap: .6rem; align-items: flex-start; font-size: .93rem; }
.footer-contact .icon { width: 18px; height: 18px; color: var(--gold-500); margin-top: .2rem; }
.footer-bottom { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 1.5rem; font-size: .82rem; color: rgba(255,255,255,.6); }
.footer-bottom a { color: rgba(255,255,255,.7); }
.footer-disclaimer { font-size: .8rem; color: rgba(255,255,255,.55); margin-top: 1.5rem; max-width: 90ch; }
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: 1.75rem; } }

/* Floating contact buttons */
.float-contact { position: fixed; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: .6rem; z-index: 40; }
.float-contact a { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: var(--shadow-lg); font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .02em; }
.float-contact a:hover { text-decoration: none; transform: translateY(-2px); }
.float-contact .f-zalo { background: #0068ff; }
.float-contact .f-phone { background: var(--gold-500); color: var(--ink); }
.float-contact .icon { width: 22px; height: 22px; }

/* Misc */
.divider-dots { display: flex; gap: .5rem; justify-content: center; margin: 1.5rem 0; }
.divider-dots i { width: 8px; height: 8px; background: var(--gold-500); clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); }
.prose { max-width: 72ch; }
.prose h2 { font-size: 1.6rem; margin-top: 2.2rem; }
.prose h3 { margin-top: 1.6rem; }
.prose p, .prose li { color: var(--ink-2); }
.prose strong { color: var(--ink); }
.callout { border-left: 4px solid var(--gold-500); background: var(--gold-100); padding: 1rem 1.25rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--ink); }
.callout p { margin: 0; color: var(--ink); }
.callout--blue { border-color: var(--blue-500); background: var(--blue-50); }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; } .mb-0 { margin-bottom: 0; }
.center { display: flex; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .site-header, .float-contact, .cta-band, .nav-toggle { display: none !important; }
  body { color: #000; }
}

/* ---------- Ảnh thật (bổ sung) ---------- */
.hero-photo { position: relative; margin-bottom: 9%; }
.hero-photo__main { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 26px; box-shadow: 0 30px 60px rgba(2, 20, 50, .5); border: 1px solid rgba(255,255,255,.18); }
.hero-photo__board { position: absolute; width: 40%; left: -3%; bottom: -11%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; border: 4px solid #fff; box-shadow: 0 20px 40px rgba(2, 20, 50, .45); transform: rotate(-3deg); }
.hero-photo__badge { position: absolute; top: 5%; right: -3%; display: flex; align-items: center; gap: .6rem; background: #fff; color: var(--ink); padding: .65rem .9rem; border-radius: 14px; box-shadow: 0 14px 30px rgba(2, 20, 50, .35); font-size: .85rem; }
.hero-photo__badge .icon { width: 18px; height: 18px; color: var(--blue-700); }
.hero-photo__badge strong { display: block; font-family: var(--font-display); font-weight: 600; }
.hero-photo__badge small { color: var(--ink-3); }
@media (max-width: 860px) { .hero-photo { margin-bottom: 12%; } .hero-photo__badge { right: 2%; } .hero-photo__board { left: 2%; } }

.figure { margin: 0; }
.figure img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.figure figcaption { font-size: .85rem; color: var(--ink-3); margin-top: .6rem; text-align: center; }
.section-dark .figure figcaption { color: rgba(255,255,255,.7); }
.photo { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); display: block; }
.photo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 200px; grid-auto-flow: dense; gap: .9rem; }
.gallery figure { margin: 0; overflow: hidden; border-radius: var(--radius-sm); position: relative; }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.gallery figure:hover img { transform: scale(1.04); }
.gallery .wide { grid-column: span 2; }
.gallery .tall { grid-row: span 2; }
@media (max-width: 760px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; } }

.photo-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2.5rem; }
.photo-strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
@media (max-width: 640px) { .photo-strip { grid-template-columns: 1fr; } }
.photo-strip--portrait img { aspect-ratio: 3 / 4; }
@media (max-width: 640px) { .photo-strip--portrait { grid-template-columns: 1fr 1fr 1fr; gap: .5rem; } }

.page-hero__person { max-width: 340px !important; width: 100%; filter: drop-shadow(0 20px 40px rgba(2,20,50,.5)); margin-bottom: calc(-1 * clamp(2.75rem, 5vw, 4.5rem)) !important; align-self: end; }
.page-hero--person { align-items: end; }
@media (max-width: 760px) { .page-hero__person { max-width: 220px !important; margin-top: 1rem; } }

.book-cover { aspect-ratio: 3 / 4; max-width: 300px; margin-inline: auto; border-radius: 10px 18px 18px 10px; background: var(--grad-deep); color: #fff; padding: 1.6rem 1.4rem; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 14px 18px 40px rgba(6,77,165,.35), inset 6px 0 0 rgba(255,255,255,.12); position: relative; overflow: hidden; }
.book-cover::before { content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; background: var(--gold-500); opacity: .9; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }
.book-cover img { width: 110px; position: relative; }
.book-cover h3 { color: #fff; font-size: 1.25rem; position: relative; margin: 0; }
.book-cover p { color: rgba(255,255,255,.8); font-size: .82rem; margin: .4rem 0 0; position: relative; }
.book-cover .tag { position: relative; align-self: flex-start; }

.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Mô hình LiFin: hành trình 7 bước, tầng bậc, module ---------- */
/* Hành trình Player → Builder (nền sáng) */
.path { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: .75rem; position: relative; counter-reset: pstep; }
.path::before { content: ""; position: absolute; left: 7%; right: 7%; top: 23px; height: 2px; background: linear-gradient(90deg, var(--blue-300), var(--blue-700) 55%, var(--gold-500)); }
.path-node { position: relative; padding: 3.4rem .35rem 0; text-align: center; }
.path-node::before { counter-increment: pstep; content: counter(pstep); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 48px; height: 48px; border-radius: 50%; background: #fff; border: 2px solid var(--blue-300); color: var(--blue-700); font-family: var(--font-display); font-weight: 700; display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.path-node--start::before { background: var(--gold-500); border-color: var(--gold-500); color: var(--ink); }
.path-node--end::before { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }
.path-node .kicker { display: block; font-family: var(--font-display); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-600); margin-bottom: .2rem; }
.path-node h3 { font-size: 1rem; margin: 0 0 .3rem; }
.path-node p { font-size: .84rem; color: var(--ink-2); margin: 0; }
@media (max-width: 1100px) {
  .path { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; }
  .path::before { display: none; }
}
@media (max-width: 640px) {
  .path { grid-template-columns: 1fr; gap: .35rem; }
  .path-node { padding: .35rem 0 .9rem 3.5rem; text-align: left; }
  .path-node::before { left: 0; top: .2rem; transform: none; width: 42px; height: 42px; }
  .path-node:not(:last-child)::after { content: ""; position: absolute; left: 20px; top: 2.9rem; bottom: -.1rem; width: 2px; background: var(--blue-100); }
}

/* Thẻ tầng bậc (Explorer → Builder) */
.tier { --tier: var(--blue-500); position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.4rem 1.4rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: .55rem; overflow: hidden; }
.tier::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--tier); }
.tier-num { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.tier-num::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--tier); flex: none; }
.tier h3 { margin: 0; font-size: 1.2rem; }
.tier-verb { color: var(--blue-700); font-weight: 600; font-size: .9rem; }
.tier p { margin: 0; font-size: .93rem; color: var(--ink-2); }
.tier-meta { display: grid; gap: .35rem; font-size: .86rem; color: var(--ink-2); margin-top: auto; padding-top: .8rem; border-top: 1px dashed var(--line); }
.tier-meta > span { display: flex; gap: .45rem; align-items: flex-start; }
.tier-meta > span > span { display: inline; }
.tier-meta .icon { width: 16px; height: 16px; margin-top: .2rem; color: var(--blue-600); }
.tier-meta strong { color: var(--ink); font-weight: 600; }
.tier--explorer { --tier: #2b89cf; } .tier--facilitator { --tier: #2e9e6b; } .tier--coach { --tier: #fecb1a; }
.tier--trainer { --tier: #e24c4c; } .tier--master { --tier: #f08a24; } .tier--builder { --tier: #7b5cd6; }
.tier--muted { background: var(--surface-2); }
.tier .tag { align-self: flex-start; }

/* Module (M1–M6, TC1–TC6, module Facilitator/Coach) */
.module { display: grid; grid-template-columns: 56px minmax(0,1fr); gap: 1rem; padding: 1.2rem 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); align-items: start; }
.module-code { width: 56px; height: 56px; display: grid; place-items: center; background: var(--grad-brand); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: .9rem; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }
.module--gold .module-code { background: var(--gold-500); color: var(--ink); }
.module h3 { font-size: 1.02rem; margin: .15rem 0 .35rem; }
.module p { font-size: .9rem; color: var(--ink-2); margin: 0; }
.module ul { margin: 0; padding-left: 1.1rem; font-size: .9rem; color: var(--ink-2); }
.module li { margin-bottom: .15rem; }
.module-meta { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .8rem; color: var(--ink-3); margin-top: .55rem; }
.module-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.module-meta .icon { width: 14px; height: 14px; }
.section-dark .module { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); box-shadow: none; }
.section-dark .module h3 { color: #fff; }
.section-dark .module p, .section-dark .module ul, .section-dark .module-meta { color: rgba(255,255,255,.8); }

/* Nguồn lực: câu hỏi then chốt */
.resource .q { font-weight: 600; color: var(--blue-700); font-size: .9rem; margin: 0; }
.resource .icon-wrap { display: flex; align-items: center; gap: .75rem; }
.resource .icon-wrap h3 { margin: 0; }

/* Thang 6 cấp độ năng lực */
.scale { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: .6rem; counter-reset: lv; }
.scale div { position: relative; padding: 1rem .9rem .9rem; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.scale div::before { counter-increment: lv; content: "Cấp " counter(lv); display: block; font-family: var(--font-display); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-600); margin-bottom: .25rem; }
.scale strong { display: block; font-family: var(--font-display); font-size: 1rem; color: var(--ink); margin-bottom: .3rem; }
.scale p { font-size: .82rem; color: var(--ink-2); margin: 0; }
.scale small { display: block; margin-top: .45rem; color: var(--ink-3); font-size: .76rem; }
@media (max-width: 1024px) { .scale { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 560px) { .scale { grid-template-columns: 1fr 1fr; } }

/* Bảng tổng kết */
.summary-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.summary-list li { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 1rem; padding: .8rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xs); margin: 0; font-size: .93rem; }
.summary-list li strong { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.summary-list li span { color: var(--ink-2); }
@media (max-width: 560px) { .summary-list li { grid-template-columns: 1fr; gap: .2rem; } }
table.compact { font-size: .88rem; }
table.compact th, table.compact td { padding: .7rem .8rem; }
.hero-badge--ghost { opacity: .85; }

/* ---------- Chuyển động ---------- */
@keyframes lf-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes lf-slide-right { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
@keyframes lf-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes lf-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes lf-pulse { 0%, 100% { opacity: .55; } 50% { opacity: .9; } }
.hero .eyebrow, .page-hero .breadcrumb, .page-hero .eyebrow, .hero h1, .page-hero h1, .hero .lead, .page-hero .lead, .hero .btn-row, .page-hero .btn-row, .hero .hero-badges, .page-hero .hero-badges { animation: lf-fade-up .7s cubic-bezier(.2, .7, .2, 1) both; }
.hero h1, .page-hero h1 { animation-delay: .08s; }
.hero .lead, .page-hero .lead { animation-delay: .16s; }
.hero .btn-row, .page-hero .btn-row { animation-delay: .24s; }
.hero .hero-badges, .page-hero .hero-badges { animation-delay: .32s; }
.hero .stats { animation: lf-fade-up .8s cubic-bezier(.2, .7, .2, 1) both .4s; }
.hero-photo, .hero-art, .page-hero--split > img, .logo-card, .person-stage { animation: lf-slide-right .9s cubic-bezier(.2, .7, .2, 1) both .15s; }
.hero-photo__badge, .person-card { animation: lf-fade-up .7s cubic-bezier(.2, .7, .2, 1) both .6s, lf-float 6s ease-in-out infinite 1.4s; }
html.js .reveal { opacity: 0; transform: perspective(900px) rotateX(10deg) translateY(28px); transform-origin: 50% 0; transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
html.js .reveal.is-visible { opacity: 1; transform: none; }

/* Trang Về chúng tôi: khu vực người sáng lập */
.page-hero--person .person-stage { position: relative; align-self: end; display: flex; justify-content: center; margin-bottom: calc(-1 * clamp(2.75rem, 5vw, 4.5rem)); min-height: 380px; }
.page-hero--person .page-hero__person { position: relative; z-index: 2; margin-bottom: 0 !important; }
.person-stage::before { content: ""; position: absolute; left: 50%; top: 55%; width: 560px; height: 560px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(43,137,207,.6), rgba(43,137,207,0)); z-index: 0; animation: lf-pulse 7s ease-in-out infinite; pointer-events: none; }
.person-ring { position: absolute; left: 50%; top: 56%; width: 400px; height: 400px; transform: translate(-50%, -50%); z-index: 1; pointer-events: none; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 3 90.7 26.5v47L50 97 9.3 73.5v-47z' fill='none' stroke='%23fecb1a' stroke-opacity='.75' stroke-width='1.2'/></svg>") center / contain no-repeat; }
.person-ring--dots { width: 470px; height: 470px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 3 90.7 26.5v47L50 97 9.3 73.5v-47z' fill='none' stroke='%23ffffff' stroke-opacity='.35' stroke-width='.7' stroke-dasharray='2 3'/></svg>"); animation: lf-spin 70s linear infinite; }
.person-card { position: absolute; left: 0; bottom: 18%; z-index: 3; background: #fff; color: var(--ink); padding: .7rem 1rem .7rem .85rem; border-radius: 14px; box-shadow: 0 16px 36px rgba(2, 20, 50, .4); display: flex; align-items: center; gap: .7rem; max-width: 320px; white-space: nowrap; }
.person-card .hex-icon { width: 40px; height: 40px; } .person-card .hex-icon .icon { width: 18px; height: 18px; }
.person-card strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: .95rem; line-height: 1.2; }
.person-card small { color: var(--ink-3); font-size: .78rem; }
@media (max-width: 760px) {
  .page-hero--person .person-stage { min-height: 300px; margin-top: 1rem; }
  .person-stage::before { width: 380px; height: 380px; }
  .person-ring { width: 260px; height: 260px; } .person-ring--dots { width: 310px; height: 310px; }
  .person-card { left: 0; bottom: 6%; max-width: 78%; white-space: normal; }
  .hero-photo__badge, .person-card { animation: lf-fade-up .7s cubic-bezier(.2, .7, .2, 1) both .6s; }
}

/* Thẻ logo trong page hero */
.logo-card { background: #fff; border-radius: 24px; padding: 1.4rem 1.4rem 1.2rem; max-width: 300px; margin-inline: auto; box-shadow: 0 24px 50px rgba(2, 20, 50, .45); display: flex; flex-direction: column; align-items: center; gap: .6rem; position: relative; }
.logo-card img { width: 100%; max-width: 230px; height: auto; }
.logo-card .tag { white-space: normal; text-align: center; }
@media (max-width: 760px) { .logo-card { max-width: 240px; padding: 1rem; } .logo-card img { max-width: 180px; } }

/* ---------- Trang LiFin Game: minh hoạ bàn cờ lớn hơn, có chuyển động ---------- */
.page-hero--art { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.page-hero--art .hero-art { width: 100%; max-width: 640px; justify-self: center; }
.page-hero--art .hero-art svg { animation: lf-float 8s ease-in-out infinite 1.2s; }
@media (max-width: 980px) {
  .page-hero--art { grid-template-columns: minmax(0, 1fr); }
  .page-hero--art .hero-art { max-width: 600px; margin-top: .5rem; }
}
.hero-art .art-trail { animation: art-trail 1.1s linear infinite; }
.hero-art .art-res { animation: art-res 7.2s ease-in-out infinite; }
.hero-art .art-res--2 { animation-delay: 1.2s; }
.hero-art .art-res--3 { animation-delay: 2.4s; }
.hero-art .art-res--4 { animation-delay: 3.6s; }
.hero-art .art-res--5 { animation-delay: 4.8s; }
.hero-art .art-res--6 { animation-delay: 6s; }
.hero-art .art-core-ring { transform-box: fill-box; transform-origin: center; animation: art-ripple 3.6s ease-out infinite; }
.hero-art .art-age { transform-box: fill-box; transform-origin: center; animation: art-age 3.2s ease-in-out infinite; }
.hero-art .art-age--end { animation-delay: 1.6s; }
.hero-art .art-dice { transform-box: fill-box; transform-origin: center; animation: art-roll 6s cubic-bezier(.3, .6, .3, 1) infinite 1s; }
.hero-art .art-dice--b { animation-delay: 1.15s; }
.hero-art .art-card { transform-box: fill-box; transform-origin: center bottom; animation: art-card 7s ease-in-out infinite; }
.hero-art .art-card--b { animation-delay: -3.5s; }
@keyframes art-trail { to { stroke-dashoffset: -22; } }
@keyframes art-res { 0%, 26%, 100% { fill: rgba(255,255,255,.07); } 10% { fill: rgba(254,203,26,.42); } }
@keyframes art-ripple { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes art-age { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes art-roll {
  0%, 58% { transform: translateY(0) rotate(0deg); }
  70% { transform: translateY(-24px) rotate(110deg); }
  82%, 100% { transform: translateY(0) rotate(180deg); }
}
@keyframes art-card { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(-3deg); } }
.hero-art svg { overflow: visible; }
.hero-art .ha-halo { animation: lf-pulse 7s ease-in-out infinite; }
.hero-art .ha-ring { animation: ha-spin 60s linear infinite; transform-box: fill-box; transform-origin: center; }
.hero-art .ha-ring--rev { animation-direction: reverse; animation-duration: 45s; }
.hero-art .ha-float { animation: ha-float 5.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.hero-art .ha-float--2 { animation-duration: 6.5s; animation-delay: -2.2s; }
.hero-art .ha-float--3 { animation-duration: 7s; animation-delay: -1.1s; }
@keyframes ha-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes ha-spin { to { transform: rotate(360deg); } }

/* ---------- Clip cảm nhận (nhúng video Facebook/YouTube, bấm mới tải) ---------- */
.videos { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.25rem; }
.video { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--blue-950); box-shadow: var(--shadow-md); display: flex; flex-direction: column; }
.video-media { position: relative; aspect-ratio: 9 / 16; background: var(--blue-950); }
.video--wide .video-media { aspect-ratio: 16 / 9; }
.video-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.video:hover .video-media img { transform: scale(1.04); }
.video-media iframe, .video-media video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.video-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: var(--blue-700); display: grid; place-items: center; cursor: pointer; box-shadow: 0 12px 30px rgba(2,20,50,.4); transition: transform .2s, background .2s; }
.video-play::before { content: ""; width: 0; height: 0; border-left: 20px solid currentColor; border-top: 12px solid transparent; border-bottom: 12px solid transparent; margin-left: 5px; }
.video:hover .video-play { transform: translate(-50%, -50%) scale(1.08); background: var(--gold-500); color: var(--ink); }
.video-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,43,92,0) 55%, rgba(4,43,92,.75) 100%); pointer-events: none; }
.video.is-playing .video-media::after, .video.is-playing .video-play { display: none; }
.video figcaption { padding: .9rem 1rem 1rem; color: #fff; font-size: .9rem; }
.video figcaption strong { display: block; font-family: var(--font-display); font-weight: 600; }
.video figcaption small { color: rgba(255,255,255,.7); }
.video-duration { position: absolute; right: .7rem; top: .7rem; background: rgba(4,43,92,.75); color: #fff; font-size: .75rem; font-weight: 600; padding: .2rem .5rem; border-radius: var(--pill); }
@media (max-width: 1024px) { .videos { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 640px) { .videos { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .8rem; } .video-play { width: 54px; height: 54px; } }

/* Nhúng kênh TikTok (creator embed); khi script không tải được thì hiện thẻ liên kết */
.tiktok-wrap { display: flex; justify-content: center; }
.tiktok-wrap .tiktok-embed { margin: 0; width: 100%; max-width: 780px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.5rem; box-shadow: var(--shadow-sm); font-size: .95rem; color: var(--ink-2); }
.tiktok-wrap .tiktok-embed section { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.tiktok-wrap .tiktok-embed a { font-weight: 600; }
.tiktok-wrap iframe { border-radius: var(--radius); }

/* ---------- Trang chủ: đung đưa nhẹ & phần tử trang trí quanh hero ---------- */
.hero-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.deco { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); animation: deco-float var(--d, 8s) ease-in-out var(--delay, 0s) infinite alternate; overflow: visible; }
.deco-spin { transform-box: fill-box; transform-origin: center; animation: ha-spin 28s linear infinite; }
.deco-spin--slow { animation-duration: 60s; }
@keyframes deco-float { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(10px, -16px, 0) rotate(8deg); } }
.hero-photo { animation: lf-slide-right .9s cubic-bezier(.2, .7, .2, 1) both .15s, hero-sway 9s ease-in-out 1.2s infinite alternate; }
.hero-photo__board { animation: board-sway 7s ease-in-out 1.4s infinite alternate; }
@keyframes hero-sway { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-8px) rotate(.8deg); } }
@keyframes board-sway { from { transform: rotate(-3deg) translateY(0); } to { transform: rotate(-1deg) translateY(-7px); } }
@media (max-width: 860px) { .deco--md { display: none; } .hero-deco .deco { opacity: .8; } .deco--a { --x: 76% !important; --y: 1.5% !important; --s: 44px !important; } .hero-deco .piece--dice { --x: 84% !important; --y: 1% !important; --s: 40px !important; opacity: 1; } .hero-deco .piece--hex { --x: 2% !important; --y: 54% !important; --s: 44px !important; opacity: 1; } }

/* ---------- Trang chủ: nhãn hero hình đám mây ---------- */
.hero-photo__badge--cloud { display: block; width: 236px; padding: 0; background: none; border-radius: 0; box-shadow: none; top: -11%; right: -6%; z-index: 3; }
.hero-photo__badge--cloud .cloud-shape { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 16px 26px rgba(2, 20, 50, .38)); }
.hero-photo__badge--cloud .cloud-text { position: absolute; left: 10%; right: 9%; top: 36%; bottom: 10%; display: flex; align-items: center; justify-content: center; gap: .55rem; text-align: left; }
.hero-photo__badge--cloud .cloud-text .icon { flex: none; }
.hero-cloud { position: absolute; height: auto; overflow: visible; filter: drop-shadow(0 10px 18px rgba(2, 20, 50, .32)); pointer-events: none; z-index: 2; }
.hero-cloud--sm { width: 92px; top: -4%; right: 41%; animation: lf-fade-up .7s cubic-bezier(.2, .7, .2, 1) both .8s, lf-float 7s ease-in-out infinite 2.2s; }
.hero-cloud--xs { width: 48px; top: 11%; right: 36%; opacity: .92; animation: lf-fade-up .7s cubic-bezier(.2, .7, .2, 1) both 1s, lf-float 5.5s ease-in-out infinite 1.3s; }
@media (max-width: 860px) { .hero-photo__badge--cloud { width: 196px; right: -2%; top: -8%; font-size: .78rem; } .hero-cloud--sm { width: 72px; top: -3%; right: 54%; } .hero-cloud--xs { width: 38px; top: 10%; right: 50%; } }

/* ---------- Clip cảm nhận (TikTok, phát trong hộp thoại) ---------- */
.clips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.clip { position: relative; display: flex; flex-direction: column; text-align: left; border: 0; padding: 0; margin: 0; background: var(--surface); color: var(--ink); font: inherit; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); cursor: pointer; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.clip:hover, .clip:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-lg); outline: none; }
.clip:focus-visible { box-shadow: var(--shadow-lg), 0 0 0 3px var(--gold-500); }
.clip-media { position: relative; display: block; aspect-ratio: 9 / 16; background: var(--blue-950); overflow: hidden; }
.clip-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.clip:hover .clip-media img { transform: scale(1.05); }
.clip-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,43,92,0) 60%, rgba(4,43,92,.55) 100%); pointer-events: none; }
.clip-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--blue-700); display: grid; place-items: center; box-shadow: 0 12px 30px rgba(2,20,50,.4); transition: transform .2s ease, background .2s ease, color .2s ease; z-index: 1; }
.clip-play::before { content: ""; width: 0; height: 0; border-left: 19px solid currentColor; border-top: 11px solid transparent; border-bottom: 11px solid transparent; margin-left: 5px; }
.clip:hover .clip-play { transform: translate(-50%, -50%) scale(1.08); background: var(--gold-500); color: var(--ink); }
.clip-len { position: absolute; right: .7rem; top: .7rem; z-index: 1; background: rgba(4,43,92,.78); color: #fff; font-size: .74rem; font-weight: 600; padding: .22rem .55rem; border-radius: var(--pill); letter-spacing: .02em; }
.clip-cap { display: block; padding: .85rem 1rem 1rem; }
.clip-cap strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: .95rem; line-height: 1.35; margin-bottom: .3rem; }
.clip-cap small { color: var(--ink-3); font-size: .8rem; }
.clip--cta { background: var(--grad-deep); color: #fff; align-items: center; justify-content: center; text-align: center; min-height: 280px; }
.clip-cta-inner { display: flex; flex-direction: column; align-items: center; gap: .65rem; padding: 2rem 1.4rem; }
.clip-cta-inner .icon { width: 46px; height: 46px; color: var(--gold-500); }
.clip-cta-inner strong { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }
.clip-cta-inner small { color: rgba(255,255,255,.75); font-size: .85rem; line-height: 1.45; }
.clip--cta:hover .clip-cta-inner .icon { transform: scale(1.1); transition: transform .25s ease; }
.clips--home .clip:nth-of-type(n + 4):not(.clip--cta) { display: none; }
@media (max-width: 1024px) { .clips { grid-template-columns: repeat(3, minmax(0, 1fr)); } .clips--home .clip:nth-of-type(3):not(.clip--cta) { display: none; } }
@media (max-width: 640px) { .clips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; } .clip-play { width: 52px; height: 52px; } .clip-cap { padding: .7rem .8rem .85rem; } .clip-cap strong { font-size: .86rem; } .clip--cta { min-height: 0; } .clips--home .clip:nth-of-type(3):not(.clip--cta) { display: flex; } }

/* Hộp thoại phát clip */
.clip-modal { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; }
.clip-modal::backdrop { background: rgba(4, 43, 92, .82); backdrop-filter: blur(5px); }
.clip-modal__box { width: min(92vw, 400px, calc(76vh * 9 / 16)); background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5); animation: lf-fade-up .35s cubic-bezier(.2,.7,.2,1) both; }
.clip-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem .8rem .75rem 1rem; }
.clip-modal__head strong { font-family: var(--font-display); font-weight: 600; font-size: .92rem; line-height: 1.3; }
.clip-modal__close { flex: none; border: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.clip-modal__close:hover { background: var(--gold-500); }
.clip-modal__player { position: relative; aspect-ratio: 9 / 16; background: #000; }
.clip-modal__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.clip-modal__foot { margin: 0; padding: .7rem 1rem .9rem; font-size: .82rem; color: var(--ink-3); }
.clip-modal__foot a { color: var(--blue-700); font-weight: 600; }
@media (max-width: 640px) { .clip-modal__box { width: min(94vw, calc(72vh * 9 / 16)); border-radius: 16px; } }

/* ---------- Cộng đồng 6 nguồn lực ---------- */
.tier--finance { --tier: #d98f1f; } .tier--focus { --tier: #7b5cd6; } .tier--health { --tier: #fecb1a; }
.tier--edu { --tier: #2e9e6b; } .tier--connect { --tier: #e2558c; } .tier--inner { --tier: #e24c4c; }
.groups .tier { gap: .7rem; }
.group-head { display: flex; align-items: center; gap: .8rem; }
.group-head .hex-icon { width: 50px; height: 50px; flex: none; background: var(--tier); }
.group-head .hex-icon .icon { width: 22px; height: 22px; }
.group-head h3 { font-size: 1.15rem; }
.groups .program-list { margin: 0; font-size: .9rem; }
.tag--edu { background: #e3f4ea; color: #1d6b45; } .tag--game { background: var(--blue-100); color: var(--blue-700); }
.tag--inner { background: #fde7e5; color: #a3261b; } .tag--coach { background: var(--ink); color: #fff; }
.events { display: grid; gap: 1rem; }
.event { display: grid; grid-template-columns: 170px minmax(0, 1fr); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.event-when { background: var(--grad-deep); color: #fff; padding: 1.2rem 1rem; display: flex; flex-direction: column; justify-content: center; gap: .15rem; text-align: center; }
.event-when strong { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; line-height: 1.2; }
.event-when span { font-size: .78rem; color: rgba(255,255,255,.7); }
.event-when em { font-style: normal; font-weight: 600; color: var(--gold-500); font-size: .92rem; margin-top: .25rem; }
.event-body { padding: 1.1rem 1.3rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; }
.event-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.event-top h3 { margin: 0; font-size: 1.08rem; }
.event-body p { margin: 0; color: var(--ink-2); font-size: .93rem; }
.event-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .86rem; color: var(--ink-2); align-items: center; }
.event-meta span { display: inline-flex; align-items: center; gap: .4rem; }
.event-meta .icon { width: 16px; height: 16px; color: var(--blue-600); }
.event-link { margin-left: auto; font-weight: 600; display: inline-flex; align-items: center; gap: .3rem; }
.event-link .icon { width: 16px; height: 16px; }
.event--muted { background: var(--surface-2); }
.event--muted .event-when { background: var(--blue-100); color: var(--ink); }
.event--muted .event-when span { color: var(--ink-3); } .event--muted .event-when em { color: var(--blue-700); }
.steps-list { margin: 1rem 0 0; padding-left: 0; list-style: none; counter-reset: sl; display: grid; gap: .8rem; }
.steps-list li { position: relative; padding-left: 3rem; color: var(--ink-2); line-height: 1.55; }
.steps-list li::before { counter-increment: sl; content: counter(sl); position: absolute; left: 0; top: 0; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--gold-500); color: var(--ink); font-family: var(--font-display); font-weight: 700; display: grid; place-items: center; }
.steps-list li strong { color: var(--ink); }
/* dải nhóm cộng đồng trên trang chủ */
.group-strip { margin-top: 2.5rem; padding: 1.5rem 1.6rem; border-radius: var(--radius); background: var(--grad-deep); color: #fff; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr); gap: 1.5rem 2rem; align-items: center; }
.group-strip h3 { color: #fff; margin: 0 0 .35rem; font-size: 1.25rem; }
.group-strip p { margin: 0 0 1rem; color: rgba(255,255,255,.82); font-size: .95rem; }
.group-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.group-chip { display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem; border-radius: var(--radius-sm); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #fff; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.group-chip:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.group-chip i { width: 10px; height: 11px; flex: none; clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); background: var(--c, var(--gold-500)); }
.group-chip strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: .9rem; line-height: 1.2; }
.group-chip small { color: rgba(255,255,255,.7); font-size: .76rem; }
@media (max-width: 1024px) { .groups.grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .group-strip { grid-template-columns: minmax(0, 1fr); } .group-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .groups.grid-3 { grid-template-columns: minmax(0, 1fr); } .event { grid-template-columns: minmax(0, 1fr); } .event-when { flex-direction: row; justify-content: flex-start; gap: .6rem; text-align: left; padding: .8rem 1.1rem; flex-wrap: wrap; } .event-when em { margin: 0 0 0 auto; } .event-link { margin-left: 0; } }

/* ---------- Cộng đồng: sân khấu ảnh + hiệu ứng ở hero ---------- */
.cstage { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1 / 1; margin-inline: auto; }
.cs-ring { position: absolute; left: 50%; top: 50%; width: 110%; height: 110%; transform: translate(-50%, -50%); overflow: visible; pointer-events: none; }
.cs-ring--1 { animation: cs-spin 36s linear infinite; }
.cs-ring--2 { width: 94%; height: 94%; animation: cs-spin 50s linear infinite reverse; }
@keyframes cs-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.cs-orbit { position: absolute; left: 50%; top: 50%; width: 110%; height: 110%; margin: -55% 0 0 -55%; animation: cs-orbit 36s linear infinite; pointer-events: none; z-index: 3; }
@keyframes cs-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.cs-arm { position: absolute; inset: 0; transform: rotate(var(--a)); }
.cs-tok { position: absolute; left: 50%; top: 2.5%; width: 0; height: 0; display: grid; place-items: center; animation: cs-unspin 36s linear infinite; }
@keyframes cs-unspin { from { transform: rotate(calc(-1 * var(--a))); } to { transform: rotate(calc(-1 * var(--a) - 360deg)); } }
.cs-tok b { display: grid; place-items: center; width: 40px; height: 45px; background: var(--c); color: #fff; clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); filter: drop-shadow(0 6px 12px rgba(2,20,50,.45)); }
.cs-tok b .icon { width: 20px; height: 20px; }
.cs-tok em { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); font-style: normal; font-family: var(--font-display); font-weight: 600; font-size: .68rem; letter-spacing: .02em; color: #fff; background: rgba(4,43,92,.85); border: 1px solid rgba(255,255,255,.18); padding: .15rem .5rem; border-radius: var(--pill); white-space: nowrap; }
.cstage .cs-photo { position: absolute; max-width: none; margin: 0; object-fit: cover; border-radius: 20px; box-shadow: 0 26px 50px rgba(2,20,50,.45); border: 4px solid #fff; background: var(--blue-950); }
.cstage .cs-photo--main { right: 0; top: 8%; width: 72%; aspect-ratio: 4 / 3; height: auto; border-radius: 24px; border-width: 1px; border-color: rgba(255,255,255,.18); animation: lf-slide-right .9s cubic-bezier(.2,.7,.2,1) both .15s, cs-sway 10s ease-in-out 1.2s infinite alternate; z-index: 2; }
.cstage .cs-photo--a { left: 0; bottom: 6%; width: 46%; aspect-ratio: 4 / 3; height: auto; transform: rotate(-4deg); animation: lf-fade-up .8s cubic-bezier(.2,.7,.2,1) both .5s, cs-sway-a 8s ease-in-out 1.5s infinite alternate; z-index: 3; }
.cstage .cs-photo--b { left: 6%; top: 0; width: 24%; aspect-ratio: 3 / 4; height: auto; transform: rotate(5deg); animation: lf-fade-up .8s cubic-bezier(.2,.7,.2,1) both .7s, cs-sway-b 7s ease-in-out 1.8s infinite alternate; z-index: 3; }
@keyframes cs-sway { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-8px) rotate(.6deg); } }
@keyframes cs-sway-a { from { transform: rotate(-4deg) translateY(0); } to { transform: rotate(-2.5deg) translateY(-8px); } }
@keyframes cs-sway-b { from { transform: rotate(5deg) translateY(0); } to { transform: rotate(3deg) translateY(-7px); } }
.cs-card { position: absolute; z-index: 4; display: flex; align-items: center; gap: .6rem; background: #fff; color: var(--ink); padding: .55rem .8rem .55rem .6rem; border-radius: 14px; box-shadow: 0 16px 34px rgba(2,20,50,.38); font-size: .8rem; white-space: nowrap; }
.cs-card strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: .86rem; line-height: 1.2; }
.cs-card small { color: var(--ink-3); font-size: .72rem; }
.cs-card .hex-icon { width: 38px; height: 38px; flex: none; } .cs-card .hex-icon .icon { width: 18px; height: 18px; }
.cs-card--1 { right: -4%; top: -2%; animation: lf-fade-up .7s cubic-bezier(.2,.7,.2,1) both .9s, lf-float 6s ease-in-out infinite 1.6s; }
.cs-card--2 { right: -2%; bottom: 2%; animation: lf-fade-up .7s cubic-bezier(.2,.7,.2,1) both 1.1s, lf-float 7s ease-in-out infinite 2.4s; }
.cs-card--3 { left: -4%; top: 39%; animation: lf-fade-up .7s cubic-bezier(.2,.7,.2,1) both 1.3s, lf-float 6.5s ease-in-out infinite 1.1s; }
.cs-hexes { display: grid; grid-template-columns: repeat(3, 12px); gap: 3px; flex: none; }
.cs-hexes i { width: 12px; height: 13px; background: var(--c); clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.cs-deco { position: absolute; pointer-events: none; z-index: 1; animation: deco-float 8s ease-in-out infinite alternate; }
.cs-deco--hex { width: 56px; right: 4%; top: 46%; animation-duration: 9s; }
.cs-deco--hex polygon { transform-box: fill-box; transform-origin: center; animation: ha-spin 40s linear infinite; }
.cs-deco--dot1 { width: 12px; left: 2%; top: 42%; animation-duration: 6s; animation-delay: -2s; }
.cs-deco--dot2 { width: 9px; right: 30%; top: 6%; animation-duration: 7s; animation-delay: -4s; }
@media (max-width: 760px) {
  .cstage { max-width: 420px; }
  .cs-card { font-size: .72rem; padding: .45rem .65rem .45rem .5rem; } .cs-card strong { font-size: .78rem; } .cs-card small { font-size: .66rem; }
  .cs-card .hex-icon { width: 32px; height: 32px; } .cs-card--3 { left: -2%; top: 40%; }
  .cs-card--1 { right: 0; } .cs-card--2 { right: 10%; bottom: 0; max-width: 74%; white-space: normal; }
  .cs-tok b { width: 30px; height: 34px; } .cs-tok b .icon { width: 15px; height: 15px; } .cs-tok em { display: none; }
}

/* Sự kiện theo 6 nhóm */
.sub-title { font-size: 1.15rem; margin: 0 0 1rem; color: var(--ink); }
.sub-title--gap { margin-top: 2.75rem; }
.gevents .tier { gap: .6rem; padding-bottom: 1.2rem; }
.gevents .tier-num { text-transform: uppercase; }
.ev-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ev-list li { display: grid; gap: .1rem; padding: .55rem .7rem; border-radius: var(--radius-sm); background: var(--surface-2); border-left: 3px solid var(--tier); }
.ev-list strong { font-family: var(--font-display); font-weight: 600; font-size: .92rem; color: var(--ink); }
.ev-list span { font-size: .82rem; color: var(--ink-2); }
.ev-note { margin: .2rem 0 0; font-size: .8rem; color: var(--ink-3); }
@media (max-width: 1024px) { .gevents.grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .gevents.grid-3 { grid-template-columns: minmax(0, 1fr); } }

.page-hero h1.h1--long { max-width: 30ch; font-size: clamp(1.8rem, 3.3vw, 2.8rem); }

/* Trang chủ: vòng lục giác 6 nguồn lực quay quanh cụm ảnh hero */
.hero-photo .cs-ring { width: 112%; height: auto; aspect-ratio: 1 / 1; z-index: 0; }
.hero-photo .cs-orbit { width: 112%; height: auto; aspect-ratio: 1 / 1; margin: -56% 0 0 -56%; z-index: 2; }
.hero-photo .hero-photo__main { position: relative; z-index: 1; }
.hero-photo .hero-photo__board { z-index: 2; }
@media (max-width: 860px) {
  .hero-photo .cs-ring, .hero-photo .cs-orbit { width: 100%; }
  .hero-photo .cs-orbit { margin: -50% 0 0 -50%; }
  .hero-photo .cs-tok b { width: 30px; height: 34px; } .hero-photo .cs-tok b .icon { width: 15px; height: 15px; } .hero-photo .cs-tok em { display: none; }
}

/* =====================================================================
   HỆ HIỆU ỨNG 3D "BỨC TRANH CUỘC ĐỜI"
   ===================================================================== */
/* --- Thẻ nghiêng theo chuột (tilt) + vệt sáng --- */
html.tilt-on .tilt:not(.reveal) { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); transform-style: preserve-3d; transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease; will-change: transform; position: relative; }
html.tilt-on .tilt.is-tilting { transition: transform .08s linear, box-shadow .35s ease; z-index: 3; }
html.tilt-on .tilt.is-tilting:not(.stat):not(.value):not(.group-chip):not(.cs-card) { box-shadow: 0 34px 60px -22px rgba(6, 77, 165, .4), 0 12px 28px rgba(6, 77, 165, .14); }
html.tilt-on .tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.55), rgba(255,255,255,0) 52%); opacity: 0; transition: opacity .3s ease; mix-blend-mode: soft-light; z-index: 5; }
html.tilt-on .tilt.is-tilting::after { opacity: 1; }
html.tilt-on .tilt > .hex-icon, html.tilt-on .tilt .icon-wrap, html.tilt-on .tilt .group-head, html.tilt-on .tilt > h3, html.tilt-on .tilt .program-head, html.tilt-on .tilt .tier-num, html.tilt-on .tilt .stat-value, html.tilt-on .tilt .value-letter, html.tilt-on .tilt .clip-cap, html.tilt-on .tilt .event-when, html.tilt-on .tilt .module-code { transform: translateZ(34px); }
html.tilt-on .tilt > p, html.tilt-on .tilt .program-body, html.tilt-on .tilt .program-list, html.tilt-on .tilt .ev-list, html.tilt-on .tilt .tier-meta, html.tilt-on .tilt .value-keys, html.tilt-on .tilt .event-body, html.tilt-on .tilt .stat-label { transform: translateZ(16px); }
html.tilt-on .tilt.clip .clip-media, html.tilt-on .tilt .figure img { transform: translateZ(0); }
html.tilt-on .tilt.clip:hover, html.tilt-on .card--hover.tilt:hover, html.tilt-on .program.tilt:hover { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0) translateY(-4px); }

/* --- Lục giác dập nổi (3D) --- */
.hex-icon { position: relative; clip-path: none; background: none !important; overflow: visible; isolation: isolate; filter: drop-shadow(0 10px 14px rgba(2, 20, 50, .22)); }
.hex-icon::before, .hex-icon::after { content: ""; position: absolute; inset: 0; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); z-index: -1; }
.hex-icon::before { top: 7px; bottom: -7px; background: var(--hex-side, #0a3f8a); }
.hex-icon::after { background: var(--hex-top, var(--grad-brand)); }
.hex-icon .icon { position: relative; z-index: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.hex-icon--gold { --hex-top: linear-gradient(160deg, #ffe27a, #fecb1a 55%, #f0b400); --hex-side: #b8900a; }
.hex-icon--light { --hex-top: linear-gradient(160deg, #eaf3ff, #cfe2f8); --hex-side: #9ec3ea; }
.group-head .hex-icon { --hex-top: linear-gradient(160deg, color-mix(in srgb, var(--tier) 70%, white), var(--tier)); --hex-side: color-mix(in srgb, var(--tier) 65%, black); }
.cs-card .hex-icon { filter: drop-shadow(0 4px 6px rgba(2,20,50,.2)); } .cs-card .hex-icon::before { top: 4px; bottom: -4px; }

/* --- Ô số liệu, ô bước, giá trị: khối nổi --- */
.stat { box-shadow: 0 8px 0 rgba(0, 0, 0, .18), 0 18px 30px -10px rgba(0, 0, 0, .35); transform-style: preserve-3d; }
.stats--light .stat { box-shadow: 0 8px 0 var(--blue-100), 0 18px 30px -12px rgba(6, 77, 165, .25); }
.value { box-shadow: 0 8px 0 rgba(0, 0, 0, .2), 0 20px 34px -12px rgba(0, 0, 0, .4); }
.value-letter { text-shadow: 0 2px 0 #c99a00, 0 4px 0 #a37c00, 0 8px 14px rgba(0,0,0,.35); }
.step { box-shadow: 0 7px 0 var(--blue-100), 0 16px 26px -10px rgba(6, 77, 165, .25); }
.path-node::before { box-shadow: 0 5px 0 var(--blue-100), 0 10px 18px rgba(6, 77, 165, .25); transition: transform .25s ease, box-shadow .25s ease; }
.path-node:hover::before { transform: translateX(-50%) translateY(-6px) scale(1.08); box-shadow: 0 11px 0 var(--blue-100), 0 20px 30px rgba(6, 77, 165, .3); }
.tier { box-shadow: 0 8px 0 color-mix(in srgb, var(--tier) 35%, white), 0 18px 30px -12px rgba(6, 77, 165, .2); }
.section-dark .stat { box-shadow: 0 8px 0 rgba(0, 0, 0, .25), 0 18px 30px -10px rgba(0, 0, 0, .4); }

/* --- Nút bấm 3D --- */
.btn { position: relative; overflow: hidden; transform-style: preserve-3d; }
.btn-primary { box-shadow: 0 5px 0 #c99a00, 0 14px 26px rgba(254, 203, 26, .38); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #c99a00, 0 18px 30px rgba(254, 203, 26, .45); }
.btn-primary:active { transform: translateY(3px); box-shadow: 0 2px 0 #c99a00, 0 6px 14px rgba(254, 203, 26, .35); }
.btn-primary::after { content: ""; position: absolute; top: -40%; bottom: -40%; width: 38%; left: -50%; background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.75), rgba(255,255,255,0)); transform: skewX(-20deg); transition: left .7s cubic-bezier(.2, .7, .2, 1); pointer-events: none; }
.btn-primary:hover::after { left: 120%; }
.btn-blue { box-shadow: 0 5px 0 #043b80, 0 12px 22px rgba(6, 77, 165, .3); }
.btn-blue:hover { transform: translateY(-2px); } .btn-blue:active { transform: translateY(3px); box-shadow: 0 2px 0 #043b80; }
.btn-ghost-light { box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 4px 0 rgba(0,0,0,.18); }
.btn-outline { box-shadow: 0 4px 0 var(--blue-100); } .btn-outline:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--blue-100); }

/* --- Hero: khối ảnh nghiêng theo chuột + các lớp parallax --- */
.hero, .page-hero { --px: 0; --py: 0; perspective: 1400px; }
.hero-3d { transform: perspective(1400px) rotateY(calc(var(--px) * 9deg)) rotateX(calc(var(--py) * -9deg)); transform-style: preserve-3d; transition: transform .45s cubic-bezier(.2, .7, .2, 1); will-change: transform; }
.hero-3d > * { transform-style: preserve-3d; }
.hero:not(.has-pointer) .hero-3d, .page-hero:not(.has-pointer) .hero-3d { animation: hero3d-idle 12s ease-in-out infinite alternate; }
@keyframes hero3d-idle { from { transform: perspective(1400px) rotateY(-4deg) rotateX(2deg); } to { transform: perspective(1400px) rotateY(4deg) rotateX(-2deg); } }
.hero-photo__badge--cloud { translate: calc(var(--px) * 26px) calc(var(--py) * 18px); }
.hero-cloud--sm { translate: calc(var(--px) * 18px) calc(var(--py) * 12px); }
.hero-cloud--xs { translate: calc(var(--px) * 12px) calc(var(--py) * 8px); }
.hero-photo__board { translate: calc(var(--px) * -10px) calc(var(--py) * -6px); }
.hero-photo .hero-orbit, .hero-photo .hero-orbit-ring { translate: calc(var(--px) * -16px) calc(var(--py) * -12px); }
.hero-deco .deco { translate: calc(var(--px) * -28px) calc(var(--py) * -20px); }
.cs-card { translate: calc(var(--px) * 26px) calc(var(--py) * 18px); }
.cstage .cs-photo--a { translate: calc(var(--px) * 12px) calc(var(--py) * 8px); }
.cstage .cs-photo--b { translate: calc(var(--px) * 18px) calc(var(--py) * 12px); }
.cs-orbit, .cs-ring { translate: calc(var(--px) * -14px) calc(var(--py) * -10px); }
.cs-deco { translate: calc(var(--px) * -30px) calc(var(--py) * -22px); }
.person-card { translate: calc(var(--px) * 22px) calc(var(--py) * 14px); }

/* --- Khối 3D trang trí trôi trong hero --- */
.hero-pieces { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.page-hero > .container { position: relative; z-index: 1; }
.piece { position: absolute; overflow: visible; filter: drop-shadow(0 18px 22px rgba(2, 20, 50, .45)); animation: piece-float var(--d, 9s) ease-in-out var(--delay, 0s) infinite alternate; translate: calc(var(--px) * -36px) calc(var(--py) * -26px); }
.hero-pieces .piece--dice { width: 64px; left: 4%; top: 12%; --d: 8s; }
.hero-pieces .piece--coins { width: 58px; right: 6%; top: 10%; --d: 10s; --delay: -3s; }
.hero-pieces .piece--hex { width: 66px; left: 46%; bottom: 8%; --d: 9s; --delay: -5s; }
.hero-pieces .piece--card { width: 54px; right: 10%; bottom: 10%; --d: 7.5s; --delay: -2s; }
@keyframes piece-float { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-18px) rotate(6deg); } }
.hero-deco .piece { filter: drop-shadow(0 16px 20px rgba(2, 20, 50, .45)); }
@media (max-width: 860px) {
  .hero-pieces .piece--dice { width: 40px; left: 3%; top: 6%; } .hero-pieces .piece--coins { width: 38px; right: 4%; top: 4%; }
  .hero-pieces .piece--hex { width: 42px; left: auto; right: 4%; bottom: 4%; } .hero-pieces .piece--card { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hero-3d { transform: none !important; } }

/* hero-3d bao ngoài hero-art / logo-card / person-stage: giữ căn giữa cột phải */
.page-hero--split > .hero-3d { justify-self: center; width: 100%; display: grid; justify-items: center; }
.page-hero--art .page-hero--split > .hero-3d { max-width: 640px; }
.page-hero--art .hero-3d .hero-art { max-width: 640px; }
.page-hero--art .page-hero--split .hero-3d .hero-art svg { filter: drop-shadow(0 30px 40px rgba(2, 20, 50, .5)); }
.logo-card { box-shadow: 0 10px 0 rgba(2, 20, 50, .35), 0 34px 60px rgba(2, 20, 50, .5); }
.hero-3d .hero-photo__main { box-shadow: 0 40px 70px rgba(2, 20, 50, .55), 0 0 0 1px rgba(255,255,255,.18); }

/* ---------- Giá trị cốt lõi: cây giá trị L-I-F-I-N & vòng học qua trải nghiệm ---------- */
.section-dark:has(.values) > .container { position: relative; z-index: 1; }
.values-art { position: absolute; z-index: 0; pointer-events: none; }
.values-art svg { width: 100%; height: auto; overflow: visible; display: block; }
.values-art text { font-family: var(--font-display); }
.values-art--tree { right: 3%; top: 1.5rem; width: 230px; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .35)); }
.values-art--cycle { left: 3%; top: 3rem; width: 180px; }
.values-art--tree .va-halo { transform-box: fill-box; transform-origin: center; }
.values-art--tree .va-spark, .values-art--tree .va-leaf, .values-art--tree .va-ground { transform-box: fill-box; transform-origin: center; }
.values-art--tree .va-leaf { transform-origin: 50% 100%; }
/* chạy khi cuộn tới (lớp is-on do main.js thêm) */
.values-art--tree.is-on .va-ground { animation: va-up .7s cubic-bezier(.2, .7, .2, 1) both; }
.values-art--tree.is-on .va-trunk { stroke-dasharray: 420; animation: va-draw 1.6s cubic-bezier(.4, 0, .2, 1) both .3s; }
.values-art--tree.is-on .va-branch { stroke-dasharray: 90; animation: va-draw .6s ease-out both; }
.values-art--tree.is-on .va-branch--1 { animation-delay: .9s; } .values-art--tree.is-on .va-branch--2 { animation-delay: 1.1s; }
.values-art--tree.is-on .va-branch--3 { animation-delay: 1.35s; } .values-art--tree.is-on .va-branch--4 { animation-delay: 1.55s; }
.values-art--tree.is-on .va-leaf { animation: va-pop .7s cubic-bezier(.34, 1.56, .64, 1) both, va-sway 5s ease-in-out infinite alternate; }
.values-art--tree.is-on .va-leaf--1 { animation-delay: 1.3s, 2.2s; } .values-art--tree.is-on .va-leaf--2 { animation-delay: 1.5s, 2.6s; }
.values-art--tree.is-on .va-leaf--3 { animation-delay: 1.75s, 2.4s; } .values-art--tree.is-on .va-leaf--4 { animation-delay: 1.95s, 2.9s; }
.values-art--tree.is-on .va-leaf--5 { animation-delay: 2.2s, 3.1s; }
.values-art--tree.is-on .va-halo { animation: va-pulse 5s ease-in-out infinite 2.4s; }
.values-art--tree.is-on .va-spark { animation: va-rise 4.5s ease-in-out infinite; }
.values-art--tree.is-on .va-spark--1 { animation-delay: 2.5s; } .values-art--tree.is-on .va-spark--2 { animation-delay: 3.3s; }
.values-art--tree.is-on .va-spark--3 { animation-delay: 4.1s; } .values-art--tree.is-on .va-spark--4 { animation-delay: 2.9s; }
.values-art--tree.is-on .va-spark--5 { animation-delay: 3.7s; } .values-art--tree.is-on .va-spark--6 { animation-delay: 4.6s; }
@keyframes va-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes va-draw { from { stroke-dashoffset: 420; opacity: 0; } 8% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes va-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes va-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes va-pulse { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes va-rise { 0% { opacity: 0; transform: translateY(10px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-50px); } }
/* vòng học qua trải nghiệm */
.values-art--cycle .vc-ring, .values-art--cycle .vc-arrows, .values-art--cycle .vc-node { transform-box: fill-box; transform-origin: center; }
.values-art--cycle .vc-ring { transform-origin: 100px 100px; animation: ha-spin 60s linear infinite; }
.values-art--cycle .vc-arrows { transform-origin: 100px 100px; animation: ha-spin 24s linear infinite; }
.values-art--cycle .vc-node { animation: vc-blink 4.8s ease-in-out infinite; }
.values-art--cycle .vc-node--2 { animation-delay: 1.2s; } .values-art--cycle .vc-node--3 { animation-delay: 2.4s; } .values-art--cycle .vc-node--4 { animation-delay: 3.6s; }
.values-art--cycle .vc-core { transform-box: fill-box; transform-origin: center; animation: lf-float 6s ease-in-out infinite; }
.values-art--cycle.is-on { animation: va-up .8s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes vc-blink { 0%, 100% { transform: scale(1); filter: none; } 12% { transform: scale(1.5); filter: drop-shadow(0 0 8px #fecb1a); } 30% { transform: scale(1); } }
@media (max-width: 1240px) { .values-art--tree { width: 180px; top: 1rem; right: 2%; } .values-art--cycle { width: 140px; left: 2%; top: 2rem; } }
@media (max-width: 1024px) { .values-art--cycle { display: none; } .values-art--tree { width: 150px; right: 1%; top: .5rem; } }
@media (max-width: 860px) {
  .values-art--tree { position: relative; width: 190px; right: auto; top: auto; margin: 2.2rem auto 0; }
}

/* Tiêu đề hai tầng (Explorer) */
.page-hero h1.h1-split { display: flex; flex-direction: column; gap: .08em; max-width: none; }
.h1-split__brand { color: var(--gold-500); font-size: 1.25em; line-height: 1; letter-spacing: -.01em; }
.h1-split__line { font-size: .7em; font-weight: 600; line-height: 1.2; letter-spacing: 0; }
/* Khối 3D trang trí: tránh đè lên breadcrumb/eyebrow */
.hero-pieces .piece--dice { top: auto; bottom: 8%; left: 2.5%; }
.hero-pieces .piece--hex { left: 41%; top: 9%; bottom: auto; }
@media (max-width: 860px) {
  .hero-pieces .piece--dice { top: auto; bottom: 3%; left: 3%; width: 40px; }
  .hero-pieces .piece--hex { left: auto; right: 4%; top: auto; bottom: 4%; width: 42px; }
}
.page-hero .lead { max-width: 56ch; }

/* Hero Lộ trình Coach: sân khấu ảnh coach dẫn dắt */
.cs-card .cs-logo { width: 42px; height: auto; flex: none; border-radius: 8px; }
.cstage--coach .cs-card--3 { left: -4%; top: 40%; }
@media (max-width: 760px) { .cstage--coach .cs-card--3 { left: -2%; } }

/* Về chúng tôi: hai nhà sáng lập đứng cạnh nhau */
.person-pair { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: center; }
.page-hero--person .person-pair .page-hero__person { max-width: none; margin: 0; }
.page-hero--person .page-hero__person--ceo { width: 252px; z-index: 2; }
.page-hero--person .person-pair .page-hero__person--cko { width: 236px; margin: 0 -66px 0 0; z-index: 1; animation: lf-fade-up .9s cubic-bezier(.2, .7, .2, 1) both .45s; translate: calc(var(--px) * -8px) 0; }
.person-card--cko { left: -6%; bottom: 48%; }
.person-card--ceo { left: auto; right: -6%; bottom: 10%; }
.person-card--cko .hex-icon { --hex-top: var(--grad-brand); }
@media (max-width: 1100px) { .page-hero--person .page-hero__person--ceo { width: 224px; } .page-hero--person .person-pair .page-hero__person--cko { width: 210px; margin-right: -60px; } }
@media (max-width: 760px) {
  .page-hero--person .page-hero__person--ceo { width: 200px; } .page-hero--person .person-pair .page-hero__person--cko { width: 188px; margin-right: -54px; }
  .person-card--cko { left: 0; bottom: 6%; top: auto; max-width: 56%; padding: .5rem .7rem .5rem .6rem; }
  .person-card--ceo { left: auto; right: 0; bottom: 34%; max-width: 58%; padding: .5rem .7rem .5rem .6rem; }
  .person-card--cko strong, .person-card--ceo strong { font-size: .84rem; } .person-card--cko small, .person-card--ceo small { font-size: .7rem; }
}

/* ---------- Menu Cộng đồng: thả xuống 6 nhóm ---------- */
.has-sub { position: relative; display: flex; align-items: center; }
.sub-toggle { display: none; border: 0; background: none; color: var(--ink-2); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; align-items: center; justify-content: center; margin-left: -.3rem; }
.sub-toggle .icon { width: 16px; height: 16px; transition: transform .2s ease; }
.sub-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.sub-menu { list-style: none; margin: 0; padding: .5rem; }
.sub-menu a { display: flex; align-items: center; gap: .65rem; padding: .55rem .7rem; border-radius: 10px; color: var(--ink); font-weight: 500; line-height: 1.2; }
.sub-menu a:hover { background: var(--blue-50); text-decoration: none; }
.sub-menu a i { width: 12px; height: 13px; flex: none; clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); background: var(--c, var(--gold-500)); }
.sub-menu a strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: .92rem; }
.sub-menu a small { color: var(--ink-3); font-size: .76rem; }
.sub-menu__all a { margin-top: .25rem; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; color: var(--blue-700); font-weight: 600; font-size: .88rem; gap: .35rem; }
.sub-menu__all a .icon { width: 15px; height: 15px; }
@media (min-width: 961px) {
  .has-sub > a { padding-right: 1.5rem; position: relative; }
  .has-sub > a::after { content: ""; position: absolute; right: .55rem; top: 50%; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); opacity: .7; }
  .sub-menu { position: absolute; left: -.5rem; top: calc(100% + .35rem); min-width: 268px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 50px rgba(16, 33, 63, .18); opacity: 0; visibility: hidden; transform: translateY(8px) perspective(600px) rotateX(-8deg); transform-origin: 50% 0; transition: opacity .2s ease, transform .25s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .2s; z-index: 50; }
  .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -.6rem; height: .6rem; }
  .has-sub:hover .sub-menu, .has-sub:focus-within .sub-menu, .has-sub.is-open .sub-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .sub-menu li { animation: none; }
}
@media (max-width: 960px) {
  .has-sub { flex-wrap: wrap; }
  .has-sub > a { flex: 1; }
  .sub-toggle { display: inline-flex; }
  .sub-menu { flex-basis: 100%; display: none; padding: .2rem 0 .4rem .9rem; border-left: 2px solid var(--blue-100); margin: 0 0 .3rem .9rem; }
  .has-sub.is-open .sub-menu { display: block; }
  .sub-menu a { padding: .55rem .6rem; font-size: 1rem; }
}
.foot-sub { display: block; font-size: .8rem; color: rgba(255,255,255,.6); margin-top: .15rem; }
.foot-sub a { color: rgba(255,255,255,.75); }
/* ---------- Trang nhóm cộng đồng ---------- */
.cstage--group .g-core { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; display: grid; place-items: center; gap: .3rem; text-align: center; color: #fff; }
.cstage--group .g-hex { width: 150px; height: 170px; display: grid; place-items: center; background: linear-gradient(160deg, color-mix(in srgb, var(--g) 60%, white), var(--g) 55%, color-mix(in srgb, var(--g) 70%, black)); clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); animation: lf-float 7s ease-in-out infinite 1s; }
.cstage--group .g-hex .icon { width: 64px; height: 64px; color: #fff; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
.cstage--group .g-core strong { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; margin-top: .4rem; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.cstage--group .g-core small { font-size: .85rem; color: rgba(255,255,255,.8); letter-spacing: .08em; text-transform: uppercase; }
.cstage--group::before { content: ""; position: absolute; left: 50%; top: 50%; width: 70%; height: 70%; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--g) 55%, transparent), transparent); filter: blur(12px); animation: va-pulse 6s ease-in-out infinite; }
.cstage--group .cs-arm--cur .cs-tok b { transform: scale(1.3); box-shadow: 0 0 0 4px rgba(255,255,255,.25); }
.cstage--group .cs-card { max-width: 236px; white-space: normal; }
.cstage--group .cs-card--1 { right: -6%; top: 3%; } .cstage--group .cs-card--2 { right: -8%; bottom: -2%; } .cstage--group .cs-card--3 { left: -8%; top: 8%; bottom: auto; }
@media (max-width: 760px) { .cstage--group .cs-card { max-width: 60%; } .cstage--group .cs-card--1 { right: 0; } .cstage--group .cs-card--2 { right: 0; bottom: -2%; } .cstage--group .cs-card--3 { left: 0; top: 6%; bottom: auto; } }
.event-when--g { background: linear-gradient(160deg, color-mix(in srgb, var(--g) 70%, white), var(--g) 60%, color-mix(in srgb, var(--g) 70%, black)); }
.event-when--g strong { font-size: 1.6rem; }
.group-chips--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1rem; }
.tier-link { position: static; margin-top: .6rem; font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: .35rem; color: var(--blue-700); }
.tier-link .icon { width: 16px; height: 16px; transition: transform .2s ease; }
.tier-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tier:hover .tier-link .icon { transform: translateX(4px); }
.tier:has(.tier-link) { cursor: pointer; }
.tier:has(.tier-link:hover), .tier:has(.tier-link:focus-visible) { border-color: var(--tier); }
@media (max-width: 760px) { .cstage--group .g-hex { width: 110px; height: 124px; } .cstage--group .g-hex .icon { width: 46px; height: 46px; } .cstage--group .g-core strong { font-size: 1.05rem; } }

/* Năng lượng = vàng LiFin: biểu tượng chuyển sang màu xanh đậm để đọc được trên nền vàng */
.cs-tok b { color: var(--tc, #fff); }
.tier--health .group-head .hex-icon .icon, .tier--health .group-head .hex-icon { color: var(--ink); }
.tier--health .group-head .hex-icon { --hex-top: linear-gradient(160deg, #ffe27a, #fecb1a 55%, #f0b400); --hex-side: #b8900a; }
.is-gold .g-hex .icon { color: var(--ink); filter: none; }
.is-gold .g-hex { background: linear-gradient(160deg, #ffe88f, #fecb1a 58%, #e9b400); }
.is-gold .cs-card--1 .hex-icon { color: var(--ink); --hex-top: linear-gradient(160deg, #ffe27a, #fecb1a 55%, #f0b400); --hex-side: #b8900a; }
.is-gold .hex-icon[style*="#fecb1a"] { color: var(--ink); }
.is-gold .event-when--g { color: var(--ink); background: linear-gradient(160deg, #ffe27a, #fecb1a 55%, #e0ae00); }
.is-gold .event-when--g span { color: rgba(4,43,92,.65); }
.is-gold .event-when--g em { color: var(--ink); }
.is-gold .event-when--g strong { color: var(--ink); }
.section.is-gold .tag { background: var(--gold-100) !important; color: #7a5c00 !important; }
.group-chip[style*="#fecb1a"] i, .sub-menu a[style*="#fecb1a"] i { box-shadow: 0 0 0 1px rgba(0,0,0,.08); }

/* LiFin Health: người ngồi thiền ở giữa, nhịp thở chậm và vòng sóng lan */
.g-core--breath .g-hex .icon { width: 96px; height: 96px; animation: g-breathe 6s ease-in-out infinite; transform-origin: 50% 70%; filter: drop-shadow(0 1px 0 rgba(255,255,255,.35)); }
@keyframes g-breathe { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.07); } 60% { transform: scale(1.07); } }
.g-breath { position: absolute; left: 50%; top: 42%; width: 190px; height: 190px; margin: -95px 0 0 -95px; border-radius: 50%; border: 2px solid rgba(254, 203, 26, .7); pointer-events: none; animation: g-ripple 6s ease-out infinite; z-index: -1; }
.g-breath--2 { animation-delay: 3s; border-color: rgba(255, 255, 255, .55); }
@keyframes g-ripple { 0% { transform: scale(.78); opacity: 0; } 15% { opacity: .9; } 100% { transform: scale(1.75); opacity: 0; } }
.g-core--breath { overflow: visible; }
@media (max-width: 760px) { .g-core--breath .g-hex .icon { width: 58px; height: 58px; } .g-breath { width: 140px; height: 140px; margin: -70px 0 0 -70px; } }

.g-core--breath .g-hex { width: 166px; height: 188px; }
@media (max-width: 760px) { .g-core--breath .g-hex { width: 116px; height: 132px; } .g-core--breath .g-hex .icon { width: 66px; height: 66px; } }

/* Về chúng tôi: hai nhà sáng lập cao ngang nhau, đứng cạnh nhau */
.person-pair { gap: 12px; }
.page-hero--person .person-pair .page-hero__person--ceo, .page-hero--person .person-pair .page-hero__person--cko { width: auto; height: 340px; margin: 0; }
.person-card--cko { left: -8%; bottom: 44%; }
.person-card--ceo { right: -8%; bottom: 10%; }
@media (max-width: 1100px) { .page-hero--person .person-pair .page-hero__person--ceo, .page-hero--person .person-pair .page-hero__person--cko { height: 300px; } }
@media (max-width: 760px) {
  .person-pair { gap: 8px; }
  .page-hero--person .person-pair .page-hero__person--ceo, .page-hero--person .person-pair .page-hero__person--cko { height: 250px; }
  .person-card--cko { left: 0; bottom: 27%; } .person-card--ceo { right: 0; bottom: 3%; }
}

/* ---------- Về chúng tôi: hero cân đối – tiêu đề hai tầng, hai nhà sáng lập lớn hơn ---------- */
.page-hero--person .page-hero--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
.page-hero h1.h1-about { max-width: none; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.1rem); line-height: 1.12; letter-spacing: -.02em; margin-bottom: .55em; }
.page-hero h1.h1-about .highlight { display: inline-block; margin-top: .06em; }
.page-hero--person .lead { max-width: 50ch; font-size: 1.05rem; line-height: 1.65; }
.page-hero--person .hero-badges { margin-top: 1.4rem; }
.page-hero--person .person-stage { min-height: 0; }
.page-hero--person .person-pair .page-hero__person--ceo, .page-hero--person .person-pair .page-hero__person--cko { height: 430px; }
.person-pair { gap: 14px; }
.person-card--cko { left: 0; bottom: 23%; }
.person-card--ceo { right: 0; bottom: 4%; }
.person-stage::before { width: 620px; height: 620px; top: 52%; }
.person-ring { width: 440px; height: 440px; top: 54%; } .person-ring--dots { width: 520px; height: 520px; }
@media (max-width: 1100px) {
  .page-hero--person .person-pair .page-hero__person--ceo, .page-hero--person .person-pair .page-hero__person--cko { height: 360px; }
  .person-stage::before { width: 520px; height: 520px; } .person-ring { width: 360px; height: 360px; } .person-ring--dots { width: 430px; height: 430px; }
}
@media (max-width: 760px) {
  .page-hero--person .page-hero--split { grid-template-columns: minmax(0, 1fr); }
  .page-hero--person .person-pair .page-hero__person--ceo, .page-hero--person .person-pair .page-hero__person--cko { height: 290px; }
  .person-pair { gap: 8px; }
  .person-card--cko { left: 0; bottom: 25%; } .person-card--ceo { right: 0; bottom: 3%; }
  .person-stage::before { width: 380px; height: 380px; } .person-ring { width: 270px; height: 270px; } .person-ring--dots { width: 320px; height: 320px; }
}

/* Xúc xắc trang trí: chuyển lên góc trên phải để không chạm hàng nhãn ở hero cao */
.hero-pieces .piece--dice { left: auto; right: 14%; top: 4%; bottom: auto; width: 58px; }
@media (max-width: 860px) { .hero-pieces .piece--dice { right: auto; left: 3%; top: auto; bottom: 3%; width: 40px; } }

/* Tiêu đề dạng câu trích (trang Cộng đồng) */
.page-hero h1.h1-quote { max-width: none; display: flex; flex-direction: column; gap: .12em; letter-spacing: -.02em; line-height: 1.12; margin-bottom: .6em; }
.h1-quote__a { font-size: clamp(1.9rem, 1.2rem + 2.3vw, 3rem); color: #fff; }
.h1-quote__b { font-size: clamp(1.55rem, 1rem + 1.8vw, 2.4rem); font-weight: 600; color: var(--gold-500); position: relative; padding-left: .9em; }
.h1-quote__b::before { content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 4px; border-radius: 4px; background: var(--gold-500); }
.page-hero h1.h1-quote { text-wrap: wrap; }
.h1-quote__a { font-size: clamp(1.8rem, 1.1rem + 2vw, 2.6rem); }
.h1-quote__b { font-size: clamp(1.45rem, .9rem + 1.6vw, 2.1rem); }
@media (min-width: 1025px) { .h1-quote__a, .h1-quote__b { white-space: nowrap; } }

/* ---------- Tin tức: danh sách động + trang bài viết ---------- */
.post-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.post-filter button { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); padding: .45rem .95rem; border-radius: var(--pill); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; }
.post-filter button[aria-pressed="true"] { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }
.post-date { color: var(--ink-3); font-size: .82rem; }
.post-soon { display: inline-block; font-size: .78rem; color: #7a5c00; background: var(--gold-100); padding: .15rem .55rem; border-radius: var(--pill); margin-left: .4rem; }
.page-hero h1.h1-post { max-width: none; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.7rem); }
.post-byline { color: rgba(255,255,255,.75); margin: 0; }
.post-hero-img { margin: 0 0 2rem; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); }
.post-hero-img img { width: 100%; height: auto; display: block; }
.prose { font-size: 1.06rem; line-height: 1.75; color: var(--ink-2); }
.prose h2 { font-size: 1.5rem; margin: 2rem 0 .7rem; } .prose h3 { font-size: 1.2rem; margin: 1.6rem 0 .5rem; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.1rem; } .prose li { margin: .3rem 0; }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 1rem 0; }
.prose blockquote { margin: 1.4rem 0; padding: .9rem 1.2rem; border-left: 4px solid var(--gold-500); background: var(--gold-100); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--ink); }
.prose a { color: var(--blue-700); text-decoration: underline; }
.post-foot { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }

/* Tin tức: chuyên mục = 6 nhóm nguồn lực */
.post-filter button { display: inline-flex; align-items: center; gap: .45rem; }
.post-filter button i { width: 11px; height: 12px; clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); background: var(--c, var(--gold-500)); flex: none; }
.post-filter button small { font-size: .72rem; font-weight: 600; color: var(--ink-3); background: var(--surface-2); padding: .05rem .4rem; border-radius: var(--pill); }
.post-filter button[aria-pressed="true"] small { background: rgba(255,255,255,.2); color: #fff; }
.post-filter button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); }
.post-filter .fb-res { color: inherit; opacity: .75; font-weight: 500; }
.tag--group { gap: .4rem; background: color-mix(in srgb, var(--c) 14%, white); color: color-mix(in srgb, var(--c) 62%, black); }
.tag--group i { width: 10px; height: 11px; clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); background: var(--c); flex: none; }
.post-empty { grid-column: 1 / -1; padding: 2.5rem 1.5rem; text-align: center; background: var(--surface-2); border: 1px dashed var(--line); border-radius: var(--radius); color: var(--ink-2); }
.post-empty p { margin: 0 0 1rem; }
.btn-ghost { background: transparent; color: var(--blue-700); border-color: transparent; } .btn-ghost:hover { background: var(--blue-50); }
@media (max-width: 640px) { .post-filter .fb-res { display: none; } .post-filter button { padding: .4rem .7rem; font-size: .82rem; } }

/* ---------- Explorer: nhà du hành & vệ tinh ---------- */
.explorer-art { width: 100%; max-width: 560px; margin-inline: auto; }
.explorer-art svg { width: 100%; height: auto; display: block; overflow: visible; filter: drop-shadow(0 24px 40px rgba(2, 20, 50, .45)); }
.ex-orb { transform-box: view-box; transform-origin: 300px 312px; animation: ex-orbit var(--d, 30s) linear infinite; }
.ex-orb--rev { animation-direction: reverse; }
@keyframes ex-orbit { to { transform: rotate(360deg); } }
.ex-astro { transform-box: fill-box; transform-origin: center; animation: ex-float 6s ease-in-out infinite alternate; }
@keyframes ex-float { from { transform: translateY(-8px) rotate(-3deg); } to { transform: translateY(8px) rotate(3deg); } }
.ex-planet { transform-box: fill-box; transform-origin: center; animation: lf-float 9s ease-in-out infinite 1s; }
.ex-st { transform-box: fill-box; transform-origin: center; animation: ex-twinkle 3.2s ease-in-out infinite; }
.ex-st:nth-child(3n) { animation-delay: -1s; } .ex-st:nth-child(3n+1) { animation-delay: -2.1s; } .ex-st:nth-child(4n) { animation-duration: 4.4s; }
@keyframes ex-twinkle { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.25); } }
.ex-sp { transform-box: fill-box; transform-origin: center; animation: ex-spark 5s ease-in-out infinite; opacity: .9; }
.ex-sp--2 { animation-delay: -1.7s; } .ex-sp--3 { animation-delay: -3.4s; }
@keyframes ex-spark { 0%, 100% { transform: scale(.5) rotate(0deg); opacity: .3; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }
.ex-tether { stroke-dashoffset: 0; animation: ex-dash 3s linear infinite; }
@keyframes ex-dash { to { stroke-dashoffset: -26; } }
.page-hero--split > .hero-3d .explorer-art { max-width: 560px; }
@media (max-width: 760px) { .explorer-art { max-width: 360px; } }

/* Tiêu đề "hành trình" (Lộ trình Coach): từ → đến */
.page-hero h1.h1-journey { max-width: none; display: flex; flex-direction: column; gap: .35em; letter-spacing: -.02em; line-height: 1.1; margin-bottom: .6em; }
.h1-journey__from { font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.4rem); color: #fff; }
.h1-journey__to { display: flex; align-items: flex-start; gap: .55em; font-size: clamp(1.35rem, .95rem + 1.35vw, 1.95rem); font-weight: 600; line-height: 1.25; color: var(--gold-500); max-width: 26ch; }
.h1-journey__arrow { flex: none; width: 1.55em; height: 1.55em; border-radius: 50%; background: var(--gold-500); color: var(--ink); display: grid; place-items: center; box-shadow: 0 6px 16px rgba(254, 203, 26, .35); animation: h1-arrow 2.6s ease-in-out infinite; }
.h1-journey__arrow .icon { width: .9em; height: .9em; stroke-width: 2.4; }
@keyframes h1-arrow { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(.25em); } }
@media (max-width: 760px) { .h1-journey__to { max-width: none; } }

/* --- Hero 6 trang nhóm: sân khấu cao hơn, quỹ đạo gọn vào trong, 3 thẻ ghim ở góc – các thành phần không còn đè nhau --- */
.page-hero--group .page-hero--split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.5rem; }
.cstage--group { container-type: inline-size; aspect-ratio: 100 / 118; max-width: 560px; }
.cstage--group::before { width: 62%; height: auto; aspect-ratio: 1 / 1; }
.cstage--group .cs-ring { height: auto; aspect-ratio: 1 / 1; translate: calc(var(--px) * -4px) calc(var(--py) * -3px); }
.cstage--group .cs-ring--1 { width: 65%; }
.cstage--group .cs-ring--2 { width: 100%; }
.cstage--group .cs-orbit { width: 65%; height: auto; aspect-ratio: 1 / 1; margin: -32.5% 0 0 -32.5%; translate: calc(var(--px) * -4px) calc(var(--py) * -3px); }
.cstage--group .cs-tok b { width: clamp(28px, 7.1cqw, 40px); height: clamp(32px, 8cqw, 45px); }
.cstage--group .cs-tok b .icon { width: clamp(14px, 3.6cqw, 20px); height: clamp(14px, 3.6cqw, 20px); }
.cstage--group .cs-tok em { top: clamp(18px, 4.6cqw, 26px); font-size: clamp(.6rem, 1.95cqw, .68rem); }
.cstage--group .g-hex { width: clamp(84px, 24cqw, 134px); height: clamp(95px, 27.2cqw, 152px); }
.cstage--group .g-hex .icon { width: clamp(38px, 11cqw, 60px); height: clamp(38px, 11cqw, 60px); }
.cstage--group .g-core strong { font-size: clamp(.98rem, 3.7cqw, 1.3rem); line-height: 1.2; margin-top: .3rem; }
.cstage--group .g-core small { font-size: clamp(.7rem, 2.3cqw, .85rem); line-height: 1.2; }
.cstage--group .cs-card { max-width: 42%; font-size: clamp(.66rem, 2.3cqw, .8rem); padding: clamp(.4rem, 1.5cqw, .55rem) clamp(.55rem, 2cqw, .8rem) clamp(.4rem, 1.5cqw, .55rem) clamp(.45rem, 1.6cqw, .6rem); gap: clamp(.4rem, 1.6cqw, .6rem); translate: calc(var(--px) * 6px) calc(var(--py) * 4px); }
.cstage--group .cs-card strong { font-size: clamp(.74rem, 2.45cqw, .86rem); }
.cstage--group .cs-card small { font-size: clamp(.62rem, 2.05cqw, .72rem); }
.cstage--group .cs-card .hex-icon { width: clamp(28px, 6.8cqw, 38px); height: clamp(28px, 6.8cqw, 38px); }
.cstage--group .cs-card .hex-icon .icon { width: clamp(13px, 3.2cqw, 18px); height: clamp(13px, 3.2cqw, 18px); }
.cstage--group .cs-card--1 { right: 0; top: 0; bottom: auto; left: auto; }
.cstage--group .cs-card--2 { right: 0; bottom: 0; top: auto; left: auto; }
.cstage--group .cs-card--3 { left: 0; top: 0; bottom: auto; right: auto; }
.cstage--group .g-core--breath .g-hex { width: clamp(88px, 24.5cqw, 138px); height: clamp(100px, 27.8cqw, 156px); }
.cstage--group .g-core--breath .g-hex .icon { width: clamp(50px, 14cqw, 78px); height: clamp(50px, 14cqw, 78px); }
.cstage--group .g-breath { width: clamp(96px, 27cqw, 150px); height: clamp(96px, 27cqw, 150px); margin: 0; translate: -50% -50%; }
.page-hero--group .hero-pieces .piece--hex, .page-hero--group .hero-pieces .piece--card { display: none; }
.page-hero--group .hero-pieces .piece--dice { left: 2.5%; right: auto; top: auto; bottom: 12%; width: 58px; }
.page-hero--group .hero-pieces .piece--coins { left: 1.5%; right: auto; top: 5%; }
@media (max-width: 1260px) {
  .page-hero--group .hero-pieces .piece--dice { display: none; }
  .page-hero--group .hero-pieces .piece--coins { width: 42px; left: 1%; top: .6%; }
}
@media (max-width: 1024px) { .page-hero--group .hero-pieces .piece--coins { left: auto; right: 2%; top: 1%; } }
@media (max-width: 1024px) {
  .page-hero--group .page-hero--split { grid-template-columns: 1fr; }
  .page-hero--group .page-hero--split > .hero-3d { max-width: 520px; margin-inline: auto; }
}
@media (max-width: 760px) { .cstage--group { max-width: 420px; aspect-ratio: 100 / 128; } .cstage--group .cs-card { max-width: 46%; } .cstage--group .cs-orbit, .cstage--group .cs-ring--1 { width: 70%; } .cstage--group .cs-orbit { margin: -35% 0 0 -35%; } .cstage--group .g-core--breath .g-hex { height: clamp(92px, 27.8cqw, 156px); } }
/* Quỹ đạo 6 nguồn lực: căn khối lục giác đúng tâm điểm trên quỹ đạo (trước đây lệch xuống phải nửa khối) */
.cs-tok { place-content: center; }
@media (max-width: 760px) { .cstage--group .cs-arm--cur .cs-tok b { transform: scale(1.15); } }

/* --- Liên hệ: hòm thư hình ngôi nhà --- */
.mailbox-art { width: 100%; max-width: 500px; margin-inline: auto; }
.mailbox-art svg { width: 100%; height: auto; display: block; overflow: visible; filter: drop-shadow(0 24px 40px rgba(2, 20, 50, .45)); }
.page-hero--split > .hero-3d .mailbox-art { max-width: 500px; }
.mb-flag { transform-box: view-box; transform-origin: 430px 330px; animation: mb-wave 2.6s ease-in-out infinite; }
.mb-smoke circle { transform-box: fill-box; transform-origin: center; animation: mb-puff 4.5s ease-out infinite; }
.mb-smoke circle:nth-child(2) { animation-delay: -1.5s; } .mb-smoke circle:nth-child(3) { animation-delay: -3s; }
@keyframes mb-puff { 0% { transform: translate(-6px, 14px) scale(.6); opacity: 0; } 30% { opacity: .6; } 100% { transform: translate(8px, -18px) scale(1.2); opacity: 0; } }
@keyframes mb-wave { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-10deg); } }
.mb-env { transform-box: fill-box; transform-origin: center; opacity: 0; animation: mb-fly 6.6s ease-in-out infinite; }
.mb-env--2 { animation-delay: -2.2s; } .mb-env--3 { animation-delay: -4.4s; }
@keyframes mb-fly { 0% { transform: translate(var(--dx), var(--dy)) rotate(-14deg) scale(1.05); opacity: 0; } 12% { opacity: 1; } 72% { opacity: 1; } 100% { transform: translate(0, 0) rotate(0deg) scale(.45); opacity: 0; } }
.mb-cloud { transform-box: fill-box; transform-origin: center; animation: mb-drift 9s ease-in-out infinite alternate; }
.mb-cloud--2 { animation-duration: 12s; animation-delay: -5s; }
@keyframes mb-drift { from { transform: translate(-10px, 0); } to { transform: translate(10px, -4px); } }
.mb-sp { transform-box: fill-box; transform-origin: center; animation: ex-spark 5s ease-in-out infinite; opacity: .9; }
.mb-sp--2 { animation-delay: -1.7s; } .mb-sp--3 { animation-delay: -3.4s; }
.mb-house { transform-box: fill-box; transform-origin: 50% 100%; animation: mb-settle 7s ease-in-out infinite; }
@keyframes mb-settle { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.012); } }
@media (max-width: 760px) { .mailbox-art { max-width: 340px; } }

/* Biểu tượng minh hoạ ở tâm hero 5 nhóm (Finance, Focus, Edu, Connect, Inner); Health dùng người ngồi thiền */
.cstage--group .g-core--art .g-hex { width: clamp(88px, 24.5cqw, 138px); height: clamp(100px, 27.8cqw, 156px); }
.cstage--group .g-core--art .g-hex .icon { width: clamp(52px, 14.5cqw, 80px); height: clamp(52px, 14.5cqw, 80px); transform-origin: 50% 90%; animation: g-grow 6s ease-in-out infinite; filter: drop-shadow(0 2px 2px rgba(0,0,0,.28)); }
@keyframes g-grow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* === Rà soát tương phản chữ / nền (toàn site) === */
/* 1) Danh sách các bước trên nền xanh đậm: chữ sáng thay vì chữ tối */
.section-dark .steps-list li, .hero .steps-list li, .page-hero .steps-list li, .cta-band .steps-list li { color: rgba(255, 255, 255, .88); }
.section-dark .steps-list li strong, .hero .steps-list li strong, .page-hero .steps-list li strong, .cta-band .steps-list li strong { color: #fff; }
/* 2) Khối nền gradient thương hiệu có chữ: dùng bản gradient đậm hơn */
.cta-band, .program-head, .module-code { background: var(--grad-brand-ink); }
.module--gold .module-code { background: var(--gold-500); }
.program-head--gold { background: linear-gradient(135deg, #ffd84a, #fecb1a); }
.program-head--navy { background: var(--grad-deep); }
.cta-band small, .section-dark small, .cta-contact .feature small, .clip-cta-inner small { color: rgba(255, 255, 255, .85); }
.cta-band .lead { color: rgba(255, 255, 255, .9); }
.program-level { opacity: 1; }
.program-head .tag { background: rgba(255, 255, 255, .2); }
/* 3) Ô số thứ tự hoạt động ở 6 trang nhóm: nền màu nhóm đậm dần, chữ trắng rõ */
.event-when--g { background: linear-gradient(160deg, color-mix(in srgb, var(--g) 78%, black) 0%, color-mix(in srgb, var(--g) 56%, black) 100%); }
.event-when--g strong { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.event-when--g span { color: rgba(255, 255, 255, .95); font-weight: 600; }
.is-gold .event-when--g span { color: rgba(4, 43, 92, .85); }
.is-gold .event-when--g strong { text-shadow: none; }
.is-warm .event-when--g { background: linear-gradient(160deg, #f6c062 0%, #e9a23a 55%, #d98f1f 100%); }
.is-warm .event-when--g strong, .is-warm .event-when--g em, .is-warm .event-when--g span { color: var(--ink); text-shadow: none; }
/* 4) Chữ phụ trên nền tối: tăng độ sáng */
.value h3 span, .group-chip small, .section-dark .quote cite { color: rgba(255, 255, 255, .85); }
.value-keys span { color: #ffe27a; }
/* 5) Thanh thời lượng buổi game: ô đầu đậm hơn để chữ trắng đọc rõ */
.timebar .t1 { background: #1f73b8; }
.timebar-legend div:first-child { border-color: #1f73b8; }
.section-dark .group-chip strong { color: #ffe27a; }
.tag--group { color: color-mix(in srgb, var(--c) 52%, black); }

/* --- Tâm hero trang nhóm: lục giác nằm đúng tâm vòng quỹ đạo, tên nhóm bên dưới --- */
.cstage--group .g-core { display: block; }
.cstage--group .g-hexwrap { position: relative; display: grid; place-items: center; }
.cstage--group .g-label { position: absolute; top: calc(100% + .3rem); left: 50%; translate: -50% 0; display: grid; justify-items: center; gap: .1rem; white-space: nowrap; text-align: center; }
.cstage--group .g-label strong { margin-top: 0; }
.cstage--group .g-breath { top: 50%; left: 50%; }
/* LiFin Health: 3 huy hiệu đung đưa ở 3 góc cân của lục giác vàng (tinh thần ở đỉnh trên) */
.g-badge { position: absolute; z-index: 3; width: clamp(44px, 12cqw, 66px); aspect-ratio: 1 / 1; translate: -50% -50%; transform-origin: 50% -14%; animation: g-sway 5.2s ease-in-out infinite alternate; filter: drop-shadow(0 8px 12px rgba(2, 20, 50, .45)); }
.g-badge img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.g-badge--top { left: 50%; top: 1%; animation-delay: -1.3s; }
.g-badge--left { left: -5%; top: 78%; animation-delay: -3.1s; animation-duration: 5.8s; }
.g-badge--right { left: 105%; top: 78%; animation-delay: -4.6s; animation-duration: 6.3s; }
.g-badge { width: clamp(42px, 11cqw, 60px); }
/* lục giác + huy hiệu trôi cùng nhau (huy hiệu luôn bám đúng góc) */
.cstage--group .g-hex { animation: none; }
.cstage--group .g-hexwrap { animation: g-float 7s ease-in-out infinite 1s; }
@keyframes g-float { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(-4px); } }
@media (max-width: 760px) {
  .cstage--group .cs-orbit, .cstage--group .cs-ring--1 { width: 74%; }
  .cstage--group .cs-orbit { margin: -37% 0 0 -37%; }
  .cstage--group .g-hex, .cstage--group .g-core--art .g-hex, .cstage--group .g-core--breath .g-hex { width: 78px; height: 88px; }
  .cstage--group .g-hex .icon, .cstage--group .g-core--art .g-hex .icon { width: 44px; height: 44px; }
  .cstage--group .g-core--breath .g-hex .icon { width: 50px; height: 50px; }
  .cstage--group .g-label { top: calc(100% + .4rem); }
  .g-badge--left, .g-badge--right { top: 73%; }
  .cstage--group .g-core strong { font-size: .92rem; }
  .cstage--group .g-core small { font-size: .66rem; }
  .cstage--group .g-breath { width: 100px; height: 100px; }
}
@keyframes g-sway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.cstage--group .g-core .g-label strong { font-size: clamp(.92rem, 3.5cqw, 1.25rem); }
@media (max-width: 760px) { .cstage--group .g-core .g-label strong { font-size: .92rem; } }
/* tâm hero nhóm: lục giác nhỏ lại một chút để chừa khoảng thở cho tên nhóm và huy hiệu */
.cstage--group .g-core--art .g-hex, .cstage--group .g-core--breath .g-hex { width: clamp(78px, 23.5cqw, 132px); height: clamp(88px, 26.6cqw, 150px); }
@media (max-width: 760px) { .cstage--group .g-core--art .g-hex, .cstage--group .g-core--breath .g-hex { width: 78px; height: 88px; } }

/* --- LiFin Health: chú giải 3 huy hiệu dưới hình hero --- */
.g-legend { width: 100%; max-width: 560px; margin: 1.6rem auto 0; padding: .75rem .9rem .85rem; border-radius: 16px; background: rgba(4, 30, 70, .55); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(6px); }
.g-legend__title { margin: 0 0 .6rem; font-family: var(--font-display); font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #ffe27a; text-align: center; }
.g-legend__title a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.g-legend ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.g-legend li { display: flex; align-items: center; gap: .55rem; padding: .35rem .5rem; border-radius: 12px; background: rgba(255, 255, 255, .07); }
.g-legend li img { width: 38px; height: 38px; flex: none; border-radius: 50%; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .35)); }
.g-legend li span { display: grid; gap: .05rem; min-width: 0; }
.g-legend strong { font-family: var(--font-display); font-size: .9rem; font-weight: 600; color: #fff; line-height: 1.2; }
.g-legend small { font-size: .74rem; color: rgba(255, 255, 255, .85); line-height: 1.3; }
@media (max-width: 760px) {
  .g-legend { max-width: 420px; padding: .65rem .6rem .7rem; }
  .g-legend ul { gap: .35rem; }
  .g-legend li { flex-direction: column; text-align: center; gap: .3rem; padding: .45rem .3rem; }
  .g-legend li span { justify-items: center; }
}

/* --- LiFin Health: Sức khoẻ theo định nghĩa của WHO --- */
.who-quote { max-width: 880px; margin: 2.4rem auto 2.25rem; padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.4rem, 4vw, 2.8rem); background: #fff; border-radius: 22px; border: 1px solid var(--line); box-shadow: 0 18px 40px -18px rgba(4, 43, 92, .25); position: relative; text-align: center; }
.who-quote::before { content: "“"; position: absolute; left: 50%; top: -30px; translate: -50% 0; width: 60px; height: 60px; border-radius: 50%; background: var(--gold-500); color: var(--ink); font-family: Georgia, serif; font-size: 3rem; line-height: 72px; text-align: center; box-shadow: 0 8px 18px rgba(254, 203, 26, .4); }
.who-quote blockquote { margin: 0; }
.who-quote__vi { font-family: var(--font-display); font-size: clamp(1.15rem, .95rem + .8vw, 1.5rem); font-weight: 600; line-height: 1.45; color: var(--ink); margin: .6rem 0 .8rem; }
.who-quote__en { font-size: .95rem; font-style: italic; color: var(--ink-2); margin: 0 0 1rem; }
.who-quote figcaption { font-size: .85rem; color: var(--ink-3); border-top: 1px dashed var(--line); padding-top: .8rem; }
.who-pillars { align-items: stretch; }
.who-pillar { text-align: center; border-top: 4px solid var(--c); display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.who-pillar__badge { width: 92px; height: 92px; margin: -.2rem auto .6rem; border-radius: 50%; filter: drop-shadow(0 10px 16px rgba(4, 43, 92, .28)); }
.who-pillar h3 { margin-bottom: .35rem; }
.who-pillar p { margin: 0 0 .6rem; }
.who-pillar__at { margin-top: auto !important; padding: .55rem .75rem; border-radius: 12px; background: color-mix(in srgb, var(--c) 9%, white); color: var(--ink-2); font-size: .9rem; width: 100%; }
.who-pillar__at strong { color: color-mix(in srgb, var(--c) 70%, black); }
.who-note { max-width: 760px; margin: 1.75rem auto 0; text-align: center; color: var(--ink-2); font-size: .95rem; }

/* Về chúng tôi: đổi vị trí – CEO bên trái, CKO bên phải; thẻ tên đi theo từng người */
.person-card--ceo { left: 0; right: auto; bottom: 4%; }
.person-card--cko { left: auto; right: 0; bottom: 23%; }
@media (max-width: 1100px) and (min-width: 761px) { .person-card--cko { bottom: 28%; } .person-card--ceo { bottom: 2%; } }
@media (max-width: 760px) { .person-card--ceo, .person-card--cko { max-width: 49%; } .person-card--ceo { left: 0; right: auto; bottom: 3%; } .person-card--cko { left: auto; right: 0; bottom: 34%; } }

/* Tiêu đề giữ trên một dòng ở máy tính; trên điện thoại chỉ ngắt giữa các cụm từ */
.section-head--wide { max-width: 880px; }
.nobr { white-space: nowrap; }
@media (max-width: 760px) {
  .person-card { gap: .45rem; padding: .45rem .6rem .45rem .45rem; }
  .person-card .hex-icon { width: 28px; height: 28px; } .person-card .hex-icon .icon { width: 14px; height: 14px; }
  .person-card--cko strong, .person-card--ceo strong { font-size: .8rem; }
  .person-card--cko small, .person-card--ceo small { font-size: .66rem; line-height: 1.35; }
  .person-card--cko { bottom: 29%; }
}
.person-card small { display: block; line-height: 1.35; }
/* Về chúng tôi: lưới hai cột đều nhau (sửa selector cũ không khớp) + chiều cao ảnh co giãn theo màn hình
   để hai người luôn nằm gọn trong cột; ảnh CKO cắt ngang hông như ảnh CEO và cao hơn ~4,5% để cỡ đầu hai người bằng nhau */
.page-hero--split.page-hero--person { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
.page-hero--person .person-pair .page-hero__person--ceo { height: min(430px, calc(39.5vw - 42px)); }
.page-hero--person .person-pair .page-hero__person--cko { height: min(450px, calc(41.3vw - 44px)); }
@media (max-width: 760px) {
  .page-hero--split.page-hero--person { grid-template-columns: minmax(0, 1fr); }
  .page-hero--person .person-pair .page-hero__person--ceo { height: min(290px, calc((100vw - 48px) / 1.24)); }
  .page-hero--person .person-pair .page-hero__person--cko { height: min(303px, calc((100vw - 48px) / 1.185)); }
}
/* chặn tràn ngang của các khối đang chờ hiệu ứng xuất hiện (không tạo thanh cuộn ngang) */
#main { overflow-x: clip; }
/* Về chúng tôi: tiêu đề hai tầng co theo bề rộng cột chữ để mỗi tầng giữ trên một dòng (chừa ~10% cho khác biệt phông chữ) */
.page-hero--split.page-hero--person > div:first-child { container-type: inline-size; }
.page-hero h1.h1-about { font-size: clamp(1.5rem, 7.4cqi, 2.75rem); }
/* Máy tính bảng dọc (761–960px): xếp một cột để tiêu đề và ảnh hai người đều đủ lớn */
@media (max-width: 960px) and (min-width: 761px) {
  .page-hero--split.page-hero--person { grid-template-columns: minmax(0, 1fr); }
  .page-hero--person .person-pair .page-hero__person--ceo { height: min(400px, calc((100vw - 60px) / 1.24)); }
  .page-hero--person .person-pair .page-hero__person--cko { height: min(418px, calc((100vw - 60px) / 1.185)); }
  .page-hero--person .person-stage { margin-top: 1.5rem; }
}

/* --- Mục "Đội ngũ": thẻ profile nhà sáng lập & coach (ảnh tách nền trên nền xanh LiFin) --- */
.pro-founders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; max-width: 1000px; margin: 0 auto; }
.pro-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .3s ease; }
.pro-card:hover { box-shadow: 0 22px 44px -18px rgba(4, 43, 92, .35); }
.pro-card__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: radial-gradient(120% 90% at 50% 18%, #2b89cf 0%, #0b5bb8 38%, #064da5 62%, #042b5c 100%); isolation: isolate; }
.pro-card__photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='42' height='73' viewBox='0 0 56 97'><g fill='none' stroke='%23ffffff' stroke-opacity='0.12' stroke-width='1.4'><path d='M28 1 55 16.5v31L28 63 1 47.5v-31z'/><path d='M28 64 55 79.5V96M28 64 1 79.5V96'/></g></svg>"); background-size: 42px 73px; }
.pro-card__photo::after { content: ""; position: absolute; left: 50%; bottom: -30%; width: 120%; height: 60%; translate: -50% 0; z-index: -1; background: radial-gradient(closest-side, rgba(254, 203, 26, .28), rgba(254, 203, 26, 0)); }
.pro-card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.pro-card:hover .pro-card__photo img { transform: scale(1.04); }
.pro-card__body { display: flex; flex-direction: column; gap: .3rem; padding: .95rem 1rem 1.15rem; text-align: center; }
.pro-card__role { margin: 0; font-family: var(--font-display); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-700); }
.pro-card__role--todo, .pro-card__intro--todo { color: var(--ink-3); font-style: italic; text-transform: none; letter-spacing: 0; font-weight: 500; }
.pro-card__name { margin: 0; font-size: 1.02rem; line-height: 1.25; color: var(--ink); }
.pro-card__intro { margin: .1rem 0 0; font-size: .86rem; line-height: 1.5; color: var(--ink-2); }
.pro-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 2; background: var(--gold-500); }
.pro-card--lead { flex-direction: row; align-items: stretch; }
.pro-card--lead .pro-card__photo { flex: 0 0 42%; aspect-ratio: auto; min-height: 300px; }
.pro-card--lead .pro-card__body { justify-content: center; text-align: left; padding: 1.5rem 1.5rem 1.6rem; gap: .45rem; }
.pro-card--lead .pro-card__name { font-size: 1.3rem; }
.pro-card--lead .pro-card__role { font-size: .78rem; }
.pro-card--lead .pro-card__intro { font-size: .93rem; }
.pro-card--blue::before { background: var(--blue-700); }
.pro-sub { text-align: center; max-width: 720px; margin: 3rem auto 1.5rem; }
.pro-sub h3 { font-size: 1.35rem; margin-bottom: .35rem; }
.pro-sub p { margin: 0; color: var(--ink-2); }
.pro-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.1rem; }
@media (max-width: 1100px) { .pro-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { .pro-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pro-founders { grid-template-columns: minmax(0, 1fr); max-width: 640px; } }
@media (max-width: 600px) {
  .pro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .pro-card__body { padding: .7rem .65rem .85rem; }
  .pro-card__name { font-size: .92rem; } .pro-card__intro { font-size: .8rem; } .pro-card__role { font-size: .64rem; }
  .pro-card--lead { flex-direction: column; } .pro-card--lead .pro-card__photo { flex: none; aspect-ratio: 4 / 5; min-height: 0; max-height: 360px; }
  .pro-card--lead .pro-card__body { text-align: center; padding: 1.1rem 1rem 1.25rem; }
}
/* lưới coach: hàng cuối luôn được căn giữa khi số coach không chia hết */
.pro-grid { display: flex; flex-wrap: wrap; justify-content: center; --gap: 1.1rem; gap: var(--gap); }
.pro-grid > .pro-card { flex: 0 0 calc((100% - 4 * var(--gap)) / 5); }
@media (max-width: 1100px) { .pro-grid > .pro-card { flex-basis: calc((100% - 3 * var(--gap)) / 4); } }
@media (max-width: 900px) { .pro-grid > .pro-card { flex-basis: calc((100% - 2 * var(--gap)) / 3); } }
@media (max-width: 600px) { .pro-grid { --gap: .75rem; } .pro-grid > .pro-card { flex-basis: calc((100% - var(--gap)) / 2); } }

/* Tiêu đề dài giữ 1 dòng trên máy tính; máy tính bảng chỉ ngắt sau dấu phẩy; điện thoại xuống dòng tự nhiên */
.section-head--xwide { max-width: 1120px; }
.section-head--xwide .lead { max-width: 62ch; }
@media (min-width: 761px) { .nobr-md { white-space: nowrap; } }
@media (min-width: 340px) { .nobr-sm { white-space: nowrap; } }

/* ===================== Lịch hoạt động (trang chủ) =====================
   Thời khoá biểu tuần: 7 cột ngày, mỗi hoạt động là một thẻ tô màu theo nhóm (--c).
   Dữ liệu: assets/data/lich.json · vẽ lại bằng main.js (Google Calendar nếu đã cấu hình). */
.sched [hidden], .sched-dialog [hidden] { display: none !important; }
.sched { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-md); padding: clamp(1rem, 2.4vw, 1.75rem); }
.sched__bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.sched__range { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.sched__mode { display: block; font-size: .85rem; color: var(--ink-3); margin-top: .15rem; }
.sched__nav { display: inline-flex; align-items: center; gap: .4rem; }
.sched__btn { display: inline-grid; place-items: center; height: 40px; min-width: 40px; padding: 0 .95rem; border-radius: var(--pill); border: 1px solid var(--line); background: var(--surface); color: var(--blue-700); font: 600 .875rem/1 var(--font-body); cursor: pointer; transition: background .15s, border-color .15s; }
.sched__btn:not(.sched__btn--today) { padding: 0; }
.sched__btn:hover { background: var(--blue-50); border-color: var(--blue-300); }
.sched__btn:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 2px; }
.sched__btn .icon { width: 18px; height: 18px; }
.sched__btn[data-sched-prev] .icon { transform: rotate(180deg); }
.sched__legend { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; font-size: .8rem; color: var(--ink-2); }
.sched__legend li { display: inline-flex; align-items: center; gap: .4rem; }
.sched__legend i, .sched__flex i, .sched-dialog__group i { width: 10px; height: 11px; flex: none; background: var(--c); clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); }
.sched__band { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .75rem; padding: .65rem .75rem; border-radius: 14px; background: #fffbea; border: 1px dashed #ead27a; }
.sched__band > strong { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-right: .25rem; }
.sched__band .sch-ev { width: auto; max-width: 320px; }
.sched__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .6rem; }
.sch-day { display: flex; flex-direction: column; gap: .55rem; min-height: 190px; padding: .7rem .6rem .8rem; border-radius: 14px; background: var(--surface-2); border: 1px solid transparent; }
.sch-day.is-today { background: #fffbea; border-color: #f1dc8c; box-shadow: inset 0 3px 0 var(--gold-500); }
.sch-dh { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem .35rem; }
.sch-dname { font-family: var(--font-display); font-size: .92rem; font-weight: 600; color: var(--ink); }
.sch-ddate { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--ink-3); }
.sch-ddate em { font-style: normal; font-size: .64rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1; padding: .22rem .45rem; border-radius: var(--pill); background: var(--gold-500); color: var(--blue-950); }
.sch-list { display: flex; flex-direction: column; gap: .45rem; }
.sch-empty { margin: 0; font-size: .78rem; color: var(--ink-3); }
.sch-ev { appearance: none; display: flex; flex-direction: column; align-items: flex-start; gap: .12rem; width: 100%; margin: 0; padding: .5rem .6rem .55rem; text-align: left; font: inherit; color: var(--ink); cursor: pointer; border: 0; border-left: 4px solid var(--c); border-radius: 10px; background: color-mix(in srgb, var(--c) 11%, white); transition: transform .15s, box-shadow .15s; }
.sch-ev:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.sch-ev:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 2px; }
.sch-ev__time { font-size: .74rem; font-weight: 700; letter-spacing: .01em; color: color-mix(in srgb, var(--c) 50%, black); }
.sch-ev__title { font-size: .86rem; font-weight: 600; line-height: 1.32; }
.sch-ev__meta { font-size: .72rem; line-height: 1.35; color: var(--ink-2); }
.sched__grid--embed { display: block; }
.sched__iframe { display: block; width: 100%; height: 640px; border: 0; border-radius: 14px; background: var(--surface-2); }
.sched__flex { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px dashed var(--line); }
.sched__flex h3 { font-size: 1rem; margin: 0 0 .75rem; }
.sched__flex ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem 1.25rem; }
.sched__flex li { display: grid; grid-template-columns: 10px minmax(0, 1fr); column-gap: .6rem; align-items: baseline; }
.sched__flex li i { grid-row: span 2; transform: translateY(2px); }
.sched__flex strong { font-size: .9rem; font-weight: 600; color: var(--ink); line-height: 1.35; }
.sched__flex li span { grid-column: 2; font-size: .8rem; color: var(--ink-3); line-height: 1.4; }
.sched__note { margin: 1rem 0 0; font-size: .85rem; color: var(--ink-2); }
@media (max-width: 980px) {
  .sched__grid { grid-template-columns: 1fr; gap: .5rem; }
  .sch-day { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: start; gap: .75rem; min-height: 0; padding: .65rem .75rem; }
  .sch-dh { flex-direction: column; align-items: flex-start; padding-top: .3rem; }
  .sch-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
  .sch-empty { padding-top: .35rem; }
  .sched__flex ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) { .sched__iframe { height: 540px; } }
@media (max-width: 560px) {
  .sch-day { grid-template-columns: 72px minmax(0, 1fr); gap: .55rem; padding: .6rem; }
  .sch-list { grid-template-columns: 1fr; }
  .sched__flex ul { grid-template-columns: 1fr; }
  .sched__band .sch-ev { max-width: none; width: 100%; }
}
/* Hộp chi tiết khi bấm vào một hoạt động */
.sched-dialog { border: 0; padding: 0; margin: auto; background: transparent; color: var(--ink); width: min(520px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); overflow: visible; }
.sched-dialog::backdrop { background: rgba(4, 43, 92, .45); backdrop-filter: blur(3px); }
.sched-dialog__box { position: relative; max-height: calc(100dvh - 32px); overflow: auto; padding: 1.6rem 1.5rem 1.4rem; background: var(--surface); border-radius: 20px; border-top: 6px solid var(--c, var(--blue-700)); box-shadow: var(--shadow-lg); }
.sched-dialog[open] .sched-dialog__box { animation: schedIn .18s ease-out; }
@keyframes schedIn { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.sched-dialog__close { position: absolute; top: .7rem; right: .7rem; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.sched-dialog__close:hover { background: var(--blue-50); color: var(--blue-700); }
.sched-dialog__group { display: inline-flex; align-items: center; gap: .45rem; margin: 0 2.6rem .45rem 0; font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.sched-dialog h3 { margin: 0 2.6rem .9rem 0; font-size: 1.3rem; line-height: 1.3; }
.sched-dialog__meta { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.sched-dialog__meta li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: .6rem; align-items: start; font-size: .95rem; color: var(--ink-2); }
.sched-dialog__meta .icon { width: 18px; height: 18px; margin-top: .2rem; color: var(--blue-700); }
.sched-dialog__meta a, .sched-dialog__desc a { color: var(--blue-700); word-break: break-word; }
.sched-dialog__desc p { margin: 0 0 1.15rem; color: var(--ink); }
.sched-dialog__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (prefers-reduced-motion: reduce) { .sched-dialog[open] .sched-dialog__box { animation: none; } .sch-ev { transition: none; } .sch-ev:hover { transform: none; } }

/* =====================================================================
   HIỆU ỨNG BỔ SUNG (10/2026)
   Chọn từ bộ sưu tập hiệu ứng của wiweb.vn, viết lại theo nhận diện LiFin
   (không chép mã gốc). Phần JavaScript đi kèm nằm cuối assets/js/main.js.
   Mọi hiệu ứng xuất phát từ trạng thái đã hiển thị đầy đủ và tự tắt khi
   người xem bật "giảm chuyển động" trong máy.
   1. Counter Up   – ô số liệu .stat-value đếm lên khi cuộn tới
   2. Back To Top  – nút lên đầu trang + vòng tiến độ đọc trang
   3. SVG Scroll   – đường hành trình 7 bước (.path) tự vẽ, từng bước sáng lên
   4. Focus Hover  – thư viện ảnh: ảnh đang trỏ nổi bật, các ảnh khác lùi xuống
   5. Next Button  – mũi tên trong nút / liên kết nhích về phía trước khi trỏ chuột
   6. Checklist    – dấu tích trong .program-list lần lượt nảy lên khi cuộn tới
   7. Social Hover – nút mạng xã hội đổi sang màu thương hiệu khi trỏ chuột
   8. Lục giác 6 nguồn lực – tô gradient theo màu của từng nguồn lực
   9. Đũa phép thuật – con trỏ hình đũa hoa tulip xanh + vệt lấp lánh theo chuột, bấm chuột tung bụi sao
   10. Bầu trời sao – sao lấp lánh, dải thiên hà mờ và sao băng phía sau các phần nền xanh đậm
   11. Cảnh trời theo giờ và mùa – tông nền theo bình minh, ngày, hoàng hôn, đêm ở Hà Nội; hoa đào, nắng, lá vàng, sương theo mùa
   12. Ảnh cảnh trời ở đầu trang – bầu trời, mây trôi, phố Hà Nội nhiều tầng (sông Hồng, cầu Long Biên, Cột cờ), trăng đúng pha.
   ===================================================================== */

/* 1. Counter Up: chữ chỉ dành cho trình đọc màn hình (đọc số cuối, không đọc số đang chạy) */
.fx-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 2. Back To Top: nằm trên cùng cụm nút liên hệ nổi (Zalo, hotline) */
.float-contact { pointer-events: none; }               /* khoảng trống giữa các nút không chặn bấm vào trang */
.float-contact > * { pointer-events: auto; }
.fx-top { position: relative; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--blue-950); color: #fff; cursor: pointer; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(12px) scale(.8); transition: opacity .3s ease, transform .4s cubic-bezier(.2, .7, .2, 1), background-color .2s ease, visibility 0s linear .4s; }
.fx-top.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.fx-top--solo { position: fixed; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40; }
.fx-top__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.fx-top__ring circle { fill: none; stroke-width: 3; }
.fx-top__track { stroke: rgba(255, 255, 255, .16); }
.fx-top__bar { stroke: var(--gold-500); stroke-linecap: round; transition: stroke-dashoffset .15s linear; }
.fx-top__arrow { position: relative; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.fx-top__label { position: absolute; right: calc(100% + 10px); top: 50%; padding: .42rem .85rem; border-radius: var(--pill); background: var(--blue-950); color: #fff; font-family: var(--font-display); font-size: .8rem; font-weight: 600; line-height: 1.2; white-space: nowrap; box-shadow: var(--shadow-md); opacity: 0; transform: translate(8px, -50%); transition: opacity .2s ease, transform .3s cubic-bezier(.2, .7, .2, 1); pointer-events: none; }
.fx-top:focus-visible .fx-top__arrow { transform: translateY(-3px); }
.fx-top:focus-visible .fx-top__label { opacity: 1; transform: translate(0, -50%); }
@media (hover: hover) {
  .fx-top.is-on:hover { background: var(--blue-700); transform: translateY(-2px); }
  .fx-top:hover .fx-top__arrow { transform: translateY(-3px); }
  .fx-top:hover .fx-top__label { opacity: 1; transform: translate(0, -50%); }
}
@media (max-width: 640px) { .fx-top { width: 44px; height: 44px; align-self: center; } .fx-top__arrow { width: 18px; height: 18px; } }   /* điện thoại: nhỏ hơn hai nút liên hệ để bớt che chữ */
@media print { .fx-top { display: none !important; } }

/* 3. SVG Scroll: đường hành trình tự vẽ (màn hình rộng, nơi có đường nối ngang giữa các bước) */
@media (min-width: 1101px) and (prefers-reduced-motion: no-preference) {
  .path.fx-path::before { opacity: .35; }
  .path.fx-path::after { content: ""; position: absolute; left: 7%; right: 7%; top: 22px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--blue-300), var(--blue-700) 55%, var(--gold-500)); box-shadow: 0 0 12px rgba(43, 137, 207, .35); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; z-index: 0; }
  .path.fx-path > .path-node { z-index: 1; }
  .path.fx-path.is-drawn::after { transform: scaleX(1); transition: transform var(--fx-draw, 2.4s) linear .15s; }
  .path.fx-path.is-drawn > .path-node::before { animation: fx-node-on .8s cubic-bezier(.34, 1.56, .64, 1) var(--fx-d, 0s) backwards; }
}
@keyframes fx-node-on {
  0%   { transform: translateX(-50%) scale(1); box-shadow: 0 5px 0 var(--blue-100), 0 10px 18px rgba(6, 77, 165, .25), 0 0 0 0 rgba(254, 203, 26, .75); }
  40%  { transform: translateX(-50%) scale(1.18); box-shadow: 0 5px 0 var(--blue-100), 0 10px 18px rgba(6, 77, 165, .25), 0 0 0 8px rgba(254, 203, 26, .35); }
  100% { transform: translateX(-50%) scale(1); box-shadow: 0 5px 0 var(--blue-100), 0 10px 18px rgba(6, 77, 165, .25), 0 0 0 16px rgba(254, 203, 26, 0); }
}

/* 4. Focus Hover: thư viện ảnh */
@media (hover: hover) and (pointer: fine) {
  .gallery figure { transition: opacity .35s ease, filter .35s ease; }
  .gallery:hover figure:not(:hover):not(.reveal) { opacity: .55; filter: saturate(.55); }
}

/* 5. Next Button: mũi tên nhích về phía trước (mũi tên quay lui nhích về sau) */
.btn .icon, .card-link .icon, .event-link .icon, .sub-menu__all a .icon { transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) {
  .btn:hover .icon:has(> use[href="#i-arrow"]),
  .card-link:hover .icon, .card:hover .card-link .icon, .post-card:hover .card-link .icon,
  .event-link:hover .icon, .event:hover .event-link .icon,
  .sub-menu__all a:hover .icon { transform: translateX(4px); }
  .btn:hover .icon[style*="rotate(180deg)"] { transform: rotate(180deg) translateX(4px) !important; }
}
.btn:focus-visible .icon:has(> use[href="#i-arrow"]) { transform: translateX(4px); }

/* 6. Checklist: dấu tích nảy lần lượt */
@media (prefers-reduced-motion: no-preference) {
  .program-list.fx-check.is-in > li::before { animation: fx-tick .6s cubic-bezier(.34, 1.56, .64, 1) var(--fx-d, 0s) backwards; }
}
@keyframes fx-tick {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(254, 203, 26, .7); }
  40%  { transform: scale(1.35) rotate(-8deg); box-shadow: 0 0 0 4px rgba(254, 203, 26, .4); }
  100% { transform: scale(1); box-shadow: 0 0 0 9px rgba(254, 203, 26, 0); }
}

/* 7. Social Hover: màu thương hiệu của từng mạng (chữ trắng đủ tương phản trên cả 4 màu) */
.social a { transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
@media (hover: hover) {
  .social a:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .45); }
  .social a[href*="facebook.com"]:hover { background: #0866ff; border-color: #0866ff; color: #fff; }
  .social a[href*="youtube.com"]:hover { background: #e00000; border-color: #e00000; color: #fff; }
  .social a[href*="tiktok.com"]:hover { background: #111111; border-color: #111111; color: #fff; }
  .social a[href*="zalo.me"]:hover { background: #0068ff; border-color: #0068ff; color: #fff; }
}

/* 8. Lục giác đại diện 6 nguồn lực: gradient theo màu của từng nguồn lực (--c)
   – token quay quanh ảnh hero, chip nhóm, menu Cộng đồng, chú giải lịch, bộ lọc & nhãn bài viết.
   Dải màu cùng công thức với lục giác lớn ở trang nhóm (.g-hex): sáng ở trên, đậm dần xuống dưới.
   Trình duyệt cũ không hỗ trợ color-mix() giữ nguyên màu phẳng như trước. */
.group-chip i, .sub-menu a i { width: 16px; height: 18px; }   /* lớn hơn một chút để thấy rõ dải màu (trước: 10–12px) */
@supports (background: color-mix(in srgb, red 50%, white)) {
  .cs-tok b, .group-chip i, .sub-menu a i, .cs-hexes i, .sched__legend i, .sched__flex i, .sched-dialog__group i, .post-filter button i, .tag--group i {
    --fx-c: var(--c, #fecb1a);
    background: linear-gradient(160deg, color-mix(in srgb, var(--fx-c) 62%, white) 0%, var(--fx-c) 50%, color-mix(in srgb, var(--fx-c) 75%, black) 100%);
  }
  /* Năng lượng (vàng): dùng đúng dải vàng của logo LiFin thay vì pha đen */
  .cs-arm[style*="--c:#fecb1a"] .cs-tok b, .group-chip[style*="--c:#fecb1a"] i, .sub-menu a[style*="--c:#fecb1a"] i, .cs-hexes i[style*="--c:#fecb1a"],
  .sched__legend li[style*="--c:#fecb1a"] i, .sched__flex li[style*="--c:#fecb1a"] i, .sched-dialog[style*="#fecb1a"] .sched-dialog__group i,
  .post-filter button[style*="--c:#fecb1a"] i, .tag--group[style*="--c:#fecb1a"] i { background: linear-gradient(160deg, #ffe27a 0%, #fecb1a 50%, #f0b400 100%); }
}
/* Hình bàn chơi ở trang LiFin Game: 6 ô nguồn lực vòng trong nhận gradient (main.js gán theo tên ô);
   nhịp sáng lần lượt chuyển từ đổi màu nền sang viền vàng để giữ được gradient */
.hero-art .art-res { animation-name: fx-res-pulse; }
@keyframes fx-res-pulse { 0%, 26%, 100% { stroke: rgba(255, 255, 255, .55); stroke-width: 1.5px; } 10% { stroke: #fecb1a; stroke-width: 4px; } }

/* 9. Đũa phép thuật: con trỏ hình đũa (main.js chỉ bật lớp fx-wand-on trên máy có chuột).
   Đầu đũa là bông tulip xanh (ảnh assets/img/cursor/tulip-wand.svg, bản .png dự phòng); điểm bấm là đỉnh bông hoa.
   Trên nút và liên kết dùng tulip-wand-hover: thêm ánh sao vàng để báo "bấm được".
   Ô nhập chữ giữ con trỏ soạn thảo bình thường. Vệt lấp lánh vẽ trên canvas .fx-wand (không chặn chuột). */
html.fx-wand-on, html.fx-wand-on body { cursor: url("../img/cursor/tulip-wand.svg") 4 4, url("../img/cursor/tulip-wand.png") 4 4, auto; }
html.fx-wand-on :is(a[href], button:not([disabled]), summary, label[for], [role="button"], .tier:has(.tier-link)) { cursor: url("../img/cursor/tulip-wand-hover.svg") 4 4, url("../img/cursor/tulip-wand-hover.png") 4 4, pointer; }
html.fx-wand-on :is(input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]), textarea, select, [contenteditable="true"]) { cursor: auto; }
.fx-wand { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2147483000; }
@media print { .fx-wand { display: none !important; } }

/* 10. Bầu trời sao: sao lấp lánh, dải thiên hà mờ, thỉnh thoảng một vệt sao băng phía sau các phần nền xanh đậm
   (đầu trang .hero/.page-hero, .section-dark, .cta-band; chân trang chỉ có sao, không có thiên hà và sao băng).
   main.js chèn lớp .fx-sky làm con đầu tiên của phần đó; lớp nằm dưới chữ (z-index -1 trong .has-sky). Mức "nhẹ nhàng". */
.has-sky { position: relative; isolation: isolate; }
.fx-sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.fx-sky { --neb1: rgba(143, 192, 234, 0.121); --neb2: rgba(160, 140, 255, 0.088); --neb3: rgba(254, 203, 26, 0.05); --neb4: rgba(143, 192, 234, 0.055); --neb5: rgba(190, 175, 255, 0.044); }
.fx-sky__nebula { position: absolute; inset: -30% -20%; background:
    radial-gradient(38% 22% at 32% 46%, var(--neb1), transparent 70%),
    radial-gradient(30% 20% at 58% 38%, var(--neb2), transparent 70%),
    radial-gradient(26% 16% at 72% 58%, var(--neb3), transparent 70%),
    linear-gradient(118deg, transparent 32%, var(--neb4) 46%, var(--neb5) 54%, transparent 66%);
  transition: opacity 1.2s ease; animation: skyDrift 70s ease-in-out infinite alternate; }
.fx-sky__dust, .fx-sky__stars { position: absolute; left: 0; top: 0; width: 1px; height: 1px; border-radius: 50%; background: transparent; }
.fx-sky__dust { animation: skyShimmer 5.5s ease-in-out infinite alternate; }
.fx-sky__dust--b { animation-duration: 7.5s; animation-delay: -3s; }
.fx-sky__stars { width: 2px; height: 2px; animation: skyShimmer 9s ease-in-out infinite alternate-reverse; }
.fx-sky__twinkle { position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); filter: drop-shadow(0 0 3px var(--c)); opacity: 0; animation: skyTwinkle var(--d) ease-in-out var(--delay) infinite; }
.fx-sky__twinkle::before { content: ""; position: absolute; inset: 0; background: var(--c); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
.fx-sky__meteor { position: absolute; width: var(--len, 130px); height: 1.5px; margin-top: -.75px; border-radius: 2px; transform-origin: 0 50%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .85)); opacity: 0; animation: skyMeteor var(--d, 1.3s) cubic-bezier(.3, .6, .4, 1) forwards; }
.fx-sky__meteor::after { content: ""; position: absolute; right: -2px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 2px rgba(255, 255, 255, .7), 0 0 12px 4px rgba(143, 192, 234, .5); }
.fx-sky.is-off, .fx-sky.is-off * { animation-play-state: paused !important; }
@keyframes skyShimmer { from { opacity: .45; } to { opacity: 1; } }
@keyframes skyTwinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 45% { opacity: 1; transform: scale(1) rotate(20deg); } 60% { opacity: .85; transform: scale(.85) rotate(28deg); } }
@keyframes skyDrift { from { transform: translate3d(-3%, -1%, 0); } to { transform: translate3d(3%, 1.5%, 0); } }
@keyframes skyMeteor { 0% { opacity: 0; transform: rotate(var(--a)) translateX(0) scaleX(.3); } 12% { opacity: 1; } 70% { opacity: .9; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--dist, 320px)) scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .fx-sky, .fx-sky * { animation: none !important; } .fx-sky__twinkle { opacity: .8; } .fx-sky__meteor { display: none; } }
@media print { .fx-sky { display: none !important; } }

/* 11. Cảnh trời theo giờ và mùa (main.js đặt data-sky-time, data-sky-season trên <html>).
   Giờ: dawn (bình minh), day (ban ngày), dusk (hoàng hôn), night (đêm), theo giờ mặt trời mọc / lặn ở Hà Nội.
   Lớp màu .fx-sky__tint chỉ phủ nền: chữ, nút, logo giữ nguyên; mức pha màu đã tính để chữ trắng vẫn đạt tương phản ≥ 4,5:1. */
.fx-sky__tint, .fx-sky__starfield, .fx-sky__season { position: absolute; inset: 0; }
/* Lớp đổi sắc: chế độ hoà màu "color" chỉ đổi sắc của nền, giữ nguyên độ sáng nên chữ trắng không bị nhạt đi */
.fx-sky-hue { --hue-o: 0; --hue-k: 1; position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: color; opacity: calc(var(--hue-o) * var(--hue-k)); transition: opacity 1.5s ease; }
html[data-sky-time="dawn"] .fx-sky-hue { --hue-o: .55; background: linear-gradient(180deg, rgba(175, 145, 235, .5) 0%, rgba(215, 145, 220, .85) 42%, #ff9a92 100%); }
html[data-sky-time="dusk"] .fx-sky-hue { --hue-o: .6; background: linear-gradient(180deg, rgba(115, 95, 225, .85) 0%, #b25ec8 52%, #ff825a 100%); }
html[data-sky-time="night"] .fx-sky-hue { --hue-o: .32; background: #4d50d6; }
.site-footer > .fx-sky-hue { --hue-k: .5; }
@media print { .fx-sky-hue { display: none !important; } }
.fx-sky__tint { transition: opacity 1.2s ease; }
html[data-sky-time="dawn"] :is(.hero, .page-hero) > .fx-sky .fx-sky__tint { background: radial-gradient(120% 60% at 12% 112%, rgba(255, 150, 120, .2), rgba(255, 150, 120, 0) 62%), radial-gradient(90% 50% at 88% 116%, rgba(255, 205, 120, .14), transparent 60%); }
html[data-sky-time="dusk"] :is(.hero, .page-hero) > .fx-sky .fx-sky__tint { background: radial-gradient(120% 65% at 88% 112%, rgba(255, 120, 90, .2), transparent 60%), radial-gradient(100% 55% at 25% 116%, rgba(150, 90, 200, .18), transparent 65%); }
html[data-sky-time="night"] .fx-sky__tint { background: linear-gradient(180deg, rgba(2, 14, 36, .5), rgba(2, 14, 36, .28)); }
.fx-sky__starfield { transition: opacity 1.2s ease; }
/* Tinh vân chỉ ở phần đầu trang: các dải nền khác có chữ nhỏ màu nhạt, giữ nền tối để đủ tương phản */
.section-dark > .fx-sky .fx-sky__nebula, .cta-band > .fx-sky .fx-sky__nebula { display: none; }
/* Mặt trời / mặt trăng ở góc trên bên phải phần đầu trang (sau hình minh hoạ; ẩn trên màn hình hẹp để không nằm sau chữ) */
.fx-sky__orb { position: absolute; top: 6%; right: 4%; width: clamp(54px, 6vw, 86px); aspect-ratio: 1; border-radius: 50%; opacity: 0; transition: opacity 1.5s ease, background 1.2s ease, box-shadow 1.2s ease; }
html[data-sky-time="day"] .fx-sky__orb { opacity: .6; background: radial-gradient(circle, #fff6d5 0 36%, rgba(255, 228, 140, .7) 52%, rgba(255, 220, 120, 0) 72%); }
html[data-sky-time="dawn"] .fx-sky__orb { opacity: .55; background: radial-gradient(circle, #ffe3c8 0 32%, rgba(255, 175, 135, .65) 50%, rgba(255, 150, 120, 0) 72%); }
html[data-sky-time="dusk"] .fx-sky__orb { opacity: .55; background: radial-gradient(circle, #ffd3aa 0 32%, rgba(255, 140, 100, .65) 50%, rgba(255, 120, 90, 0) 72%); }
html[data-sky-time="night"] .fx-sky__orb { opacity: .85; width: clamp(40px, 4vw, 58px); box-shadow: inset 13px -7px 0 1px rgba(253, 244, 214, .95), 0 0 26px 2px rgba(253, 244, 214, .18); }
@media (max-width: 760px) { .fx-sky__orb { display: none; } }
html[data-sky-time="day"] .fx-sky__starfield { opacity: .28; }
html[data-sky-time="day"] .fx-sky__nebula { opacity: .4; }
html[data-sky-time="dawn"] .fx-sky__starfield, html[data-sky-time="dusk"] .fx-sky__starfield { opacity: .7; }
/* Màu dải thiên hà theo mùa */
html[data-sky-season="spring"] .fx-sky { --neb1: rgba(255, 170, 200, 0.11); --neb2: rgba(200, 160, 255, 0.083); --neb3: rgba(255, 216, 77, 0.055); --neb4: rgba(255, 190, 215, 0.05); --neb5: rgba(200, 175, 255, 0.039); }
html[data-sky-season="summer"] .fx-sky { --neb1: rgba(143, 210, 255, 0.121); --neb2: rgba(120, 205, 190, 0.072); --neb3: rgba(255, 214, 90, 0.077); --neb4: rgba(160, 215, 255, 0.055); --neb5: rgba(255, 225, 150, 0.039); }
html[data-sky-season="autumn"] .fx-sky { --neb1: rgba(255, 190, 110, 0.094); --neb2: rgba(220, 140, 90, 0.072); --neb3: rgba(254, 203, 26, 0.066); --neb4: rgba(255, 200, 140, 0.044); --neb5: rgba(200, 150, 255, 0.033); }
html[data-sky-season="winter"] .fx-sky { --neb1: rgba(190, 230, 255, 0.121); --neb2: rgba(170, 180, 255, 0.083); --neb3: rgba(230, 245, 255, 0.055); --neb4: rgba(200, 230, 255, 0.055); --neb5: rgba(180, 190, 255, 0.044); }
/* Hạt theo mùa: xuân cánh đào, hè hạt nắng bay lên, thu lá vàng, đông hạt sương lạnh */
.fx-season { position: absolute; top: 0; width: var(--s); height: var(--s); opacity: 0; animation: seasonFall var(--d) linear var(--delay) infinite; will-change: transform, opacity; }
.fx-season > b { display: block; width: 100%; height: 100%; animation: seasonSway var(--sw) ease-in-out var(--delay) infinite alternate; }
.fx-season--rise { animation-name: seasonRise; }
.fx-season--petal > b { height: 72%; border-radius: 100% 0 100% 0; background: var(--c); opacity: .62; box-shadow: inset -1px -1px 2px rgba(255, 255, 255, .45); }
.fx-season--leaf > b { background: linear-gradient(115deg, transparent 47%, rgba(120, 60, 20, .35) 49% 51%, transparent 53%), var(--c); opacity: .6;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1C18 6 21 11 19.5 16.5C18 21 14.5 23 12 23C9.5 23 6 21 4.5 16.5C3 11 6 6 12 1Z'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1C18 6 21 11 19.5 16.5C18 21 14.5 23 12 23C9.5 23 6 21 4.5 16.5C3 11 6 6 12 1Z'/></svg>") center / contain no-repeat; }
.fx-season--mote > b { border-radius: 50%; background: radial-gradient(circle, var(--c) 0 35%, rgba(255, 233, 166, 0) 72%); box-shadow: 0 0 8px 2px rgba(255, 220, 120, .35);
  animation: seasonSway var(--sw) ease-in-out var(--delay) infinite alternate, moteBlink 2.2s ease-in-out var(--delay) infinite alternate; }
.fx-season--frost > b { border-radius: 50%; background: var(--c); opacity: .6; box-shadow: 0 0 6px 1px rgba(220, 236, 255, .7); }
@keyframes seasonFall { 0% { opacity: 0; transform: translate3d(0, -40px, 0); } 8% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; transform: translate3d(0, var(--fall, 600px), 0); } }
@keyframes seasonRise { 0% { opacity: 0; transform: translate3d(0, var(--fall, 600px), 0); } 10% { opacity: 1; } 85% { opacity: .9; } 100% { opacity: 0; transform: translate3d(0, -40px, 0); } }
@keyframes seasonSway { from { transform: translateX(calc(var(--amp) * -1)) rotate(-30deg); } to { transform: translateX(var(--amp)) rotate(40deg); } }
@keyframes moteBlink { from { opacity: .3; } to { opacity: .75; } }
@media (prefers-reduced-motion: reduce) { .fx-sky__season { display: none; } }
/* Bảng chọn cảnh trời để xem thử (chỉ hiện trong bản xem thử hoặc khi đường dẫn có ?xem-canh) */
.fx-skypick { position: fixed; left: calc(16px + env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; flex-direction: column-reverse; align-items: flex-start; gap: .5rem; font: 500 .8rem/1.3 var(--font-body); }
.fx-skypick__btn { display: inline-flex; align-items: center; gap: .4rem; height: 38px; padding: 0 .9rem; border-radius: var(--pill); border: 1px solid rgba(255, 255, 255, .3); background: rgba(4, 43, 92, .9); color: #fff; font: inherit; font-weight: 600; box-shadow: var(--shadow-lg); cursor: pointer; }
.fx-skypick__btn .icon { width: 18px; height: 18px; color: var(--gold-500); }
.fx-skypick__box { display: grid; gap: .55rem; min-width: 230px; padding: .8rem .85rem; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); }
.fx-skypick__box[hidden] { display: none; }
.fx-skypick__box label { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: .5rem; font-weight: 600; }
.fx-skypick__box select { font: inherit; padding: .35rem .5rem; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.fx-skypick__box small { color: var(--ink-3); font-size: .72rem; }
@media print { .fx-skypick { display: none !important; } }

/* 12. Ảnh cảnh trời ở đầu trang (main.js thêm .has-scene và lớp .fx-scene vào .hero, .page-hero).
   Từ dưới lên: ảnh trời < sao (đoạn 10) < trăng < mây trôi < phố Hà Nội < lớp tối giữ chữ dễ đọc < hạt theo mùa.
   Ảnh trong assets/img/sky/ (vẽ bằng _nguon/src/tools/gen_sky.py); chưa tải xong thì vẫn là nền xanh có sắc trời của đoạn 11. */
.fx-scene { position: absolute; inset: 0; pointer-events: none; }
.fx-scene > * { position: absolute; opacity: 0; transition: opacity 1.1s ease; }
.fx-scene.is-ready > * { opacity: 1; }
.fx-scene__sky { inset: 0; z-index: 0; background-color: var(--scene-top, #06153a); background-repeat: no-repeat; background-position: 50% 100%; background-size: cover; }
html[data-sky-time="dawn"] .fx-scene__sky { --scene-top: #0b1d4d; }
html[data-sky-time="day"] .fx-scene__sky { --scene-top: #082f6c; }
html[data-sky-time="dusk"] .fx-scene__sky { --scene-top: #120c38; }
html[data-sky-time="night"] .fx-scene__sky { --scene-top: #020a1d; }
.fx-scene__moon { z-index: 2; top: 11%; right: 9%; width: clamp(48px, 5.4vw, 86px); height: auto; filter: drop-shadow(0 0 14px rgba(255, 244, 214, .32)); }
.fx-scene__moon[hidden] { display: none; }
/* Mây: hộp đứng yên, mờ dần về bên trái (phía có chữ) – lớp mây bên trong trôi chậm sang trái */
.fx-scene__cloudbox { z-index: 3; left: 0; right: 0; top: 0; height: min(72%, 520px); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .25) 34%, #000 64%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .25) 34%, #000 64%); }
.fx-scene__clouds { position: absolute; left: 0; top: 0; height: 100%; width: 200%; background-repeat: repeat-x; background-position: 0 0; background-size: auto 100%; will-change: transform; }
.fx-scene.is-ready .fx-scene__clouds { animation: sceneDrift 420s linear infinite; }
@keyframes sceneDrift { to { transform: translate3d(-50%, 0, 0); } }
.fx-scene__city { z-index: 4; left: 0; right: 0; bottom: 0; height: min(44%, clamp(130px, 22vw, 340px)); background-repeat: repeat-x; background-position: 50% 100%; background-size: auto 100%; }
.page-hero .fx-scene__city { height: min(36%, clamp(110px, 18vw, 300px)); }
/* Lớp tối giữ chữ dễ đọc: đậm ở cột chữ bên trái, nhạt dần sang phải; thêm một dải tối mỏng sát chân phố */
.fx-scene__scrim { z-index: 5; inset: 0; background:
  radial-gradient(130% 100% at 0% 42%, rgba(2, 10, 30, var(--sc1, .5)) 0%, rgba(2, 10, 30, var(--sc2, .28)) 52%, rgba(2, 10, 30, 0) 88%),
  linear-gradient(0deg, rgba(2, 10, 30, var(--sc3, .3)) 0%, rgba(2, 10, 30, 0) 42%); }
html[data-sky-time="night"] .fx-scene__scrim { --sc1: .34; --sc2: .14; --sc3: .2; }
html[data-sky-time="dawn"] .fx-scene__scrim { --sc1: .6; --sc2: .36; --sc3: .4; }
html[data-sky-time="day"] .fx-scene__scrim { --sc1: .6; --sc2: .36; --sc3: .36; }
html[data-sky-time="dusk"] .fx-scene__scrim { --sc1: .58; --sc2: .34; --sc3: .38; }
/* Phần đầu trang thấp (không có hình lớn): dải tối sát chân phố cao hơn vì đoạn giới thiệu nằm gần phố */
.page-hero .fx-scene__scrim { background:
  radial-gradient(130% 100% at 0% 42%, rgba(2, 10, 30, var(--sc1, .5)) 0%, rgba(2, 10, 30, var(--sc2, .28)) 52%, rgba(2, 10, 30, 0) 88%),
  linear-gradient(0deg, rgba(2, 10, 30, var(--sc3, .3)) 0%, rgba(2, 10, 30, 0) 58%); }
/* Tên nhóm dưới biểu tượng lớn ở 6 trang nhóm: quầng tối mềm phía sau chữ */
.has-scene .cstage--group .g-label { padding: .15rem .7rem .3rem; border-radius: 999px; background: rgba(3, 14, 38, .42); box-shadow: 0 0 16px 8px rgba(3, 14, 38, .42); }
/* Ô số liệu, nhãn và nút viền nằm trên cảnh trời: nền kính mờ tối để chữ luôn rõ */
.has-scene :is(.stat, .hero-badge, .btn-ghost-light, .btn-outline-light) { background: rgba(3, 16, 42, .52); -webkit-backdrop-filter: blur(10px) saturate(1.15); backdrop-filter: blur(10px) saturate(1.15); }
.has-scene :is(.btn-ghost-light, .btn-outline-light):hover { background: rgba(3, 16, 42, .72); border-color: #fff; }
.has-scene > .fx-sky .fx-sky__starfield { z-index: 1; -webkit-mask-image: linear-gradient(#000 28%, transparent 70%); mask-image: linear-gradient(#000 28%, transparent 70%); }
.has-scene > .fx-sky .fx-sky__meteor { z-index: 1; }
.has-scene > .fx-sky .fx-sky__season { z-index: 6; }
.has-scene > .fx-sky :is(.fx-sky__tint, .fx-sky__orb, .fx-sky__nebula) { display: none; }
html[data-sky-time="day"] .has-scene > .fx-sky .fx-sky__starfield { opacity: 0; }
html[data-sky-time="dawn"] .has-scene > .fx-sky .fx-sky__starfield, html[data-sky-time="dusk"] .has-scene > .fx-sky .fx-sky__starfield { opacity: .35; }
/* LiFin Focus: giữ hoạ tiết đồng hồ – cà chua phía trên ảnh trời (mờ dần sang phải) */
.has-scene.hex-bg--focus::before { z-index: 0; -webkit-mask-image: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 78%); mask-image: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 78%); }
@media (max-width: 760px) {
  .fx-scene__sky { background-size: 100% auto; }
  .fx-scene__cloudbox { top: auto; bottom: calc(min(44%, clamp(130px, 22vw, 340px)) * .5); height: 54vw; -webkit-mask-image: none; mask-image: none; }
  .fx-scene.is-ready .fx-scene__cloudbox { opacity: .55; }
  .fx-scene__clouds { width: 100%; background-position: 32% 0; }
  .fx-scene.is-ready .fx-scene__clouds { animation: none; }
  .fx-scene__moon { display: none; }
  .fx-scene__scrim, .page-hero .fx-scene__scrim { background: linear-gradient(180deg, rgba(2, 10, 30, var(--sc2, .28)) 0%, rgba(2, 10, 30, var(--sc1, .5)) 55%, rgba(2, 10, 30, var(--sc1, .5)) 78%, rgba(2, 10, 30, var(--sc3, .3)) 100%); }
  .page-hero { padding-bottom: 5.5rem; }   /* chừa chỗ cho dải phố nằm dưới chữ thay vì chồng lên chữ */
}
@media (prefers-reduced-motion: reduce) { .fx-scene.is-ready .fx-scene__clouds { animation: none; } .fx-scene > * { transition: none; } }
@media print { .fx-scene { display: none !important; } }