/* Bố cục trang chủ; màu, chữ và thành phần dùng bộ token chung với app. */
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.5; }
.page { min-height: 100vh; background: var(--paper); background-image: radial-gradient(var(--paper-dot) 1.2px, transparent 1.2px); background-size: 22px 22px; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6) var(--space-10); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.bordered { border: var(--stroke-ink) var(--ink); }
.surface { background: var(--surface); }
.blush { background: var(--blush); }
.mint { background: var(--mint); }
.lilac { background: var(--lilac); }
.peach { background: var(--peach); }
.pink { background: var(--pink-500); }
.pill { border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); font-weight: 600; }
.caption { font-size: var(--fs-caption); }
.muted { color: var(--text-muted); }
.hand { font-family: var(--font-hand); font-size: var(--fs-note-lg); color: var(--note-pen); }
.tilt-left { transform: rotate(calc(-1 * var(--tilt-sm))); }
.tilt-right { transform: rotate(var(--tilt-sm)); }
.shadow-medium { box-shadow: var(--shadow-sticker-md); }
.shadow-large { box-shadow: var(--shadow-sticker-lg); }
.brand-mark { background: var(--butter); color: var(--ink); border-radius: var(--radius-tail); padding: 0 var(--space-1); }
.logo .brand-mark { border: var(--stroke-ink) var(--ink); margin-left: 2px; }
.icon { flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.logo-star { fill: var(--pink-500); stroke: var(--ink); stroke-width: 2; }
.platform-dot { display: inline-block; width: 10px; height: 10px; flex-shrink: 0; border-radius: var(--radius-pill); background: var(--ink); }
.platform-tiktok { background: var(--platform-tiktok); }
.platform-x { background: var(--platform-x); }
.platform-facebook { background: var(--platform-facebook); }
.platform-instagram { background: var(--platform-instagram); }
.platform-youtube { background: var(--platform-youtube); }
.platform-news { background: var(--neutral-200); }
.platform-linkedin { background: var(--info); }
.site-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); padding: var(--space-5) 0; position: relative; z-index: 2; }
.site-header a, .site-header summary, .site-footer a { display: inline-flex; align-items: center; min-height: var(--hit-min); padding: 0 var(--space-3); text-decoration: none; font-weight: 600; }
.site-header .logo { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display-lg); line-height: 1; gap: var(--space-2); padding: 0; }
.nav-desktop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.nav-mobile { display: none; }
.header-actions { display: flex; align-items: center; gap: var(--space-3); }
.language-switch { display: inline-flex; border: var(--stroke-ink) var(--ink); border-radius: var(--radius-pill); background: var(--surface); padding: 2px; gap: 0; }
.language-switch > * { display: inline-flex; justify-content: center; align-items: center; min-height: var(--hit-min); min-width: var(--hit-min); padding: 0 var(--space-2); font-size: var(--fs-body-sm); }
.language-switch > [aria-current] { background: var(--pink-500); border-radius: var(--radius-pill); }
.menu-solutions, .menu-mobile { position: relative; }
.menu-solutions > summary, .menu-mobile > summary { cursor: pointer; list-style: none; gap: var(--space-1); }
.menu-solutions > summary::-webkit-details-marker, .menu-mobile > summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; top: 100%; left: 0; min-width: 240px; padding: var(--space-2); background: var(--surface); border: var(--stroke-ink) var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-sticker-md); z-index: 3; }
.menu-panel a { display: flex; width: 100%; }
.section { padding: var(--space-14) 0; scroll-margin-top: var(--space-6); }
.section h1, .section h2, .section h3, .error-page h1 { margin: 0; font-family: var(--font-display); font-weight: 800; line-height: 1.12; }
.section h1 { font-size: var(--fs-display-hero); letter-spacing: -0.02em; }
.section h2 { font-size: var(--fs-display-xl); margin-bottom: var(--space-3); }
.section h3 { font-size: var(--fs-display-sm); }
.section p { margin: 0; }
.section > p { margin-bottom: var(--space-6); max-width: 720px; color: var(--text-muted); font-size: var(--fs-body-lg); }
.hero { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-10); padding: var(--space-10) 0 var(--space-18); }
.hero-intro { flex: 1 1 460px; min-width: 0; gap: var(--space-6); }
.badge-mobile { display: none; }
.hero-badge { align-self: flex-start; font-size: var(--fs-body-sm); }
.hero-emphasis { color: var(--pink-700); text-decoration: underline wavy var(--pink-500); text-decoration-thickness: 3px; text-underline-offset: 8px; }
.lead { font-size: var(--fs-body-lg); line-height: 1.5; max-width: 560px; }
.hero-actions { gap: var(--space-4); }
.button { display: inline-flex; justify-content: center; align-items: center; gap: var(--space-2); min-height: 48px; padding: var(--space-2) var(--space-5); border: var(--stroke-ink) var(--ink); border-radius: var(--radius-pill); text-decoration: none; font-weight: 700; }
.button-primary { background: var(--ink); color: var(--surface); box-shadow: var(--shadow-pop-pink); }
.button-secondary { background: var(--surface); color: var(--ink); }
.voice-wall { flex: 1 1 440px; min-width: 0; gap: var(--space-5); padding: var(--space-2); }
.quote { border-radius: var(--radius-xl) var(--radius-xl) var(--radius-xl) var(--radius-tail); padding: var(--space-4); gap: var(--space-2); }
.quote-hero { padding: var(--space-6); border-radius: var(--radius-bubble) var(--radius-bubble) var(--radius-bubble) var(--radius-tail); transform: rotate(calc(-1 * var(--tilt-md))); }
.quote-hero > p:first-of-type { font-family: var(--font-display); font-size: var(--fs-display-lg); font-weight: 800; line-height: 1.12; }
.quote-pair { align-items: flex-start; gap: var(--space-4); }
.quote-small { flex: 1 1 200px; min-width: 0; }
.quote-small:last-child { margin-top: var(--space-6); }
.quote-small > p:first-of-type { font-size: var(--fs-body-lg); font-weight: 700; line-height: 1.35; }
.section-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-5); margin-bottom: var(--space-6); }
.section-heading h2 { margin: 0; }
.pillar-grid, .step-grid { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.card { min-width: 0; padding: var(--space-6); border: var(--stroke-ink) var(--ink); border-radius: var(--radius-2xl); display: flex; flex-direction: column; gap: var(--space-3); }
.pillar { flex: 1 1 240px; border-radius: var(--radius-lg); }
.card-top { display: flex; align-items: center; justify-content: space-between; }
.card-top > span:last-child { font-family: var(--font-display); font-size: var(--fs-display-sm); font-weight: 800; }
.icon-circle { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); flex-shrink: 0; }
.solution-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: var(--space-5); }
.solution { scroll-margin-top: var(--space-6); }
.solution > span:last-child { margin-top: auto; }
.source-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--space-4); }
.source { padding: var(--space-4); border-radius: var(--radius-lg); }
.source > span:first-child { flex-wrap: nowrap; }
.source .platform-dot { width: 22px; height: 22px; border: var(--stroke-ink) var(--ink); }
.source > span:first-child > span:last-child { font-family: var(--font-display); font-size: var(--fs-display-sm); font-weight: 800; }
.source > span:last-child { color: var(--text-muted); font-size: var(--fs-body-sm); }
.step-grid { list-style: none; margin: var(--space-8) 0 0; padding: 0; }
.step { flex: 1 1 300px; }
.step-number { display: inline-flex; align-items: center; justify-content: center; width: var(--hit-min); height: var(--hit-min); border-radius: var(--radius-pill); font-family: var(--font-display); font-size: var(--fs-display-sm); font-weight: 800; }
.peek { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-10); }
.peek-intro { flex: 1 1 360px; min-width: 0; }
.peek-intro p { color: var(--text-muted); font-size: var(--fs-body-lg); }
.peek-intro a { align-self: flex-start; }
.app-figure { flex: 1 1 520px; min-width: 0; margin: 0; align-items: center; gap: var(--space-4); padding: var(--space-2); }
.app-frame { width: 100%; max-width: 620px; padding: var(--space-3) var(--space-3) var(--space-5); border-radius: var(--radius-lg); transform: rotate(var(--tilt-md)); }
.app-screen { background: var(--paper); background-image: radial-gradient(var(--paper-dot) 1.2px, transparent 1.2px); background-size: 22px 22px; border: var(--stroke-ink) var(--ink); border-radius: var(--radius-md); padding: var(--space-4); gap: var(--space-3); }
.app-tabs { font-size: var(--fs-caption); }
.app-tabs > span:first-child { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-body-lg); }
.app-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.app-stats > div, .app-quote, .app-sentiment { padding: var(--space-3); border-radius: var(--radius-md); }
.placeholder { display: block; width: 70%; height: 12px; background: var(--neutral-300); border-radius: var(--radius-tail); }
.app-stats .placeholder { height: 18px; }
.app-stats > div:nth-child(2) .placeholder { width: 55%; }
.app-stats > div:nth-child(3) .placeholder { width: 45%; }
.app-quote .placeholder { width: 92%; }
.app-quote .placeholder:last-child { width: 64%; }
.app-sentiment > div:first-child { flex-wrap: nowrap; height: 16px; overflow: hidden; border: var(--stroke-ink) var(--ink); gap: 0; padding: 0; }
.app-sentiment > div:first-child .placeholder { height: 100%; width: 54%; border-radius: 0; background: var(--positive-fill); border-right: var(--stroke-ink) var(--ink); }
.app-sentiment > div:first-child .placeholder:nth-child(2) { width: 32%; background: var(--neutral-fill); }
.app-sentiment > div:first-child .placeholder:last-child { width: 14%; background: var(--negative-fill); border-right: 0; }
.field-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0 0 var(--space-8); padding: 0; }
.field-list > li { padding: var(--space-2) var(--space-5); border-radius: var(--radius-lg); font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display-sm); }
.field-list > li:last-child { border: var(--stroke-dashed) var(--ink); }
.language-list { gap: var(--space-2); }
.member { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); margin-top: var(--space-10); padding: var(--space-10); background: var(--ink); color: var(--surface); border-radius: var(--radius-bubble); }
.member-intro { flex: 1 1 380px; min-width: 0; }
.member-intro p, .member-caption { color: var(--neutral-200); }
.member-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.button-member { background: var(--paper); color: var(--ink); border-color: var(--paper); box-shadow: var(--shadow-pop-pink); }
.site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); padding: var(--space-8) 0 var(--space-2); color: var(--text-muted); font-size: var(--fs-label); }
.error-page { padding-top: var(--space-18); }
.error-links { display: flex; flex-wrap: wrap; gap: var(--space-4); }
/* Liên kết có vùng focus rõ khi dùng bàn phím. */
.page a { color: inherit; }
.page .button-primary { color: var(--surface); }
.page .button-secondary, .page .button-member { color: var(--ink); }
.page a:hover, .page summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.page a:focus-visible, .page summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.member a:focus-visible { outline-color: var(--surface); }
@media (max-width: 720px) {
  .container { padding-right: var(--space-4); padding-left: var(--space-4); }
  .site-header { flex-wrap: nowrap; gap: var(--space-2); padding: var(--space-3) 0; }
  .site-header .logo { font-size: var(--fs-note-lg); gap: var(--space-1); white-space: nowrap; }
  .logo-star { width: 24px; height: 24px; }
  .nav-desktop, .header-actions .language-switch { display: none; }
  .header-actions { margin-left: auto; }
  .site-header .button { min-height: var(--hit-min); padding: 0 var(--space-3); font-size: var(--fs-body-sm); white-space: nowrap; }
  .nav-mobile { display: block; }
  .menu-mobile > summary { display: flex; justify-content: center; width: var(--hit-min); height: var(--hit-min); padding: 0; background: var(--surface); border: var(--stroke-ink) var(--ink); border-radius: var(--radius-pill); }
  .menu-mobile .menu-panel { left: auto; right: 0; width: min(300px, calc(100vw - 32px)); }
  .page a, .page summary { display: inline-flex; align-items: center; min-height: var(--hit-min); min-width: var(--hit-min); }
  .menu-panel a { display: flex; }
  .hero { gap: var(--space-6); padding: var(--space-2) 0 var(--space-10); }
  .hero-intro { gap: var(--space-5); }
  .hero h1 { font-size: calc(var(--fs-display-xl) + 2px); line-height: 1.05; }
  .badge-desktop { display: none; }
  .badge-mobile { display: inline; }
  .hero-badge { font-size: var(--fs-label); }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .button-primary, .member-note { display: none; }
  .voice-wall { padding: var(--space-2); }
  .quote-hero { padding: var(--space-4); }
  .quote-hero > p:first-of-type { font-size: var(--fs-note-lg); }
  .quote-pair { gap: var(--space-5); }
  .quote-small:last-child { margin-top: 0; }
  .section h2 { font-size: var(--fs-display-xl); }
  .pillar-grid, .step-grid { gap: var(--space-5); }
  .pillar, .step { flex-basis: 100%; }
  .app-frame { transform: rotate(var(--tilt-sm)); }
  .app-screen { padding: var(--space-2); }
  .app-stats { gap: var(--space-2); }
  .app-stats > div { padding: var(--space-2); }
  .app-tabs .pill { padding: var(--space-1) var(--space-2); }
  .hand { font-size: var(--fs-note-lg); }
  .member { padding: var(--space-6); }
}