.navbar .nav-container { min-width: 0; }
.navbar .logo { min-width: 0; flex-shrink: 1; }
.navbar .logo img { max-width: 100%; object-fit: contain; }
.navbar .nav-language { flex-shrink: 0; }
.navbar .nav-links a { white-space: nowrap; }
html:not([lang="ko"]) section :is(h1, h2, h3, p, span, strong, div, a) { word-break: normal; }
html:not([lang="ko"]) section :is(h1, h2, h3) { text-wrap: balance; }
html:not([lang="ko"]) .hero-headline > span { display: block; margin-top: .12em; }
.hero-grid > *, .split-layout > *, .stat-text, .row-text, .mockup-main { min-width: 0; }
.mockup-body { height: auto; min-height: 440px; }
.mockup-sidebar { flex: 0 0 150px; }
.mockup-sidebar-item svg, .row-status, .mockup-dot, .fc-icon { flex-shrink: 0; }
.mockup-main { padding: 24px; container-type: inline-size; }
.mockup-main > div:first-child { flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.mockup-week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mockup-day { min-width: 0; }
.mockup-day span { font-size: 12px; line-height: 1.6; }
.mockup-sidebar-item { line-height: 1.45; }
.floating-card { position: static; margin: 16px 0 0; width: fit-content; max-width: 100%; }
.btn { white-space: normal; text-align: center; line-height: 1.4; }
.module-card h3 { display: block; overflow-wrap: break-word; }
.module-card h3 > span { display: block; margin-top: 6px; }
html[lang="vi"] .nav-cta { display: none; }
.flow-step-h.active .flow-acc, .flow-step-h:hover .flow-acc,
.faq-item.active .faq-answer { max-height: none; }
@container (max-width: 540px) {
  .mockup-week { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (max-width: 340px) {
  .mockup-week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1200px) {
  .nav-cta { display: none; }
}
@media (max-width: 1120px) {
  html[lang="vi"] .navbar .nav-links { display: none; }
}
@media (max-width: 900px) {
  .navbar .nav-links { display: none; }
}
@media (max-width: 768px) {
  .navbar .container { padding-left: 20px; padding-right: 20px; }
  .navbar .logo img { max-width: 100%; width: 205px; height: auto; }
  .navbar .nav-container { gap: 12px; }
  .language-selector { width: 96px; }
  .mockup-sidebar { flex-basis: auto; }
  .mockup-main { padding: 16px; }
  html:not([lang="ko"]) .hero-headline { font-size: clamp(26px, 7.1vw, 36px); line-height: 1.2; }
  html:not([lang="ko"]) .hero .lead { font-size: 16px; line-height: 1.6; }
  .hero-cta .btn { padding-left: 14px; padding-right: 14px; }
}