/* ===========================================================
   MODDING CAFE — VIETNAMESE TYPOGRAPHY (v4 — GLOBAL REFACTOR)
   ===========================================================
   Scope: html[lang="vi"] only — KHÔNG động đến tiếng Anh.

   Root cause v3-and-before:
     - Rajdhani / Oswald / Bebas = condensed display fonts.
     - Không thiết kế cho diacritic VI (ă â đ ê ô ơ ư + tone).
     - Khi all-caps + letter-spacing 0.2em-0.3em + size 9-12px
       → dấu vỡ, dấu rời, dấu lệch.

   Fix strategy v4:
     1. Đổi font-family sang "Be Vietnam Pro" / "Inter" cho TẤT CẢ
        text dùng label/nav/button/meta/chip/badge style.
     2. Cap letter-spacing ≤ 0.08em (label) / ≤ 0.06em (nav, button).
     3. Min font-size 14px cho nav/button/section-label, 12-13px
        cho chip/badge/meta.
     4. line-height 1.35-1.6 để dấu có chỗ thở.
     5. font-weight 600-700 thay vì 500 để bù độ "mảnh" của
        Be Vietnam Pro so với Rajdhani.

   Headings display (>= 32px) giữ Oswald/Bebas vì size lớn
   thì dấu vẫn render OK; vẫn áp letter-spacing thấp hơn.

   Load order: design-system.css → public.css → responsive.css → lang-vi.css
   =========================================================== */

/* ============================================================
   CSS VARIABLES (font stacks dùng lại nhiều lần)
   ============================================================ */
html[lang="vi"] {
  --vi-font-label:   "Barlow Condensed", sans-serif;
  --vi-font-body:    "Barlow Condensed", sans-serif;
  --vi-font-display: "Smooch Sans", sans-serif;
}

/* ============================================================
   1. HEADER / NAV / BRAND
   ============================================================ */

html[lang="vi"] .brand__name {
  font-family: "Smooch Sans", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.25 !important;
}

html[lang="vi"] .brand__tag {
  font-family: var(--vi-font-label) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.4 !important;
}

html[lang="vi"] .primary-nav a {
  font-family: var(--vi-font-label) !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.45 !important;
}

html[lang="vi"] .lang-switch,
html[lang="vi"] .lang-switch a,
html[lang="vi"] .lang-switch .sep {
  font-family: var(--vi-font-label) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.4 !important;
}

html[lang="vi"] .side-nav__label {
  font-family: var(--vi-font-label) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.45 !important;
}

/* ============================================================
   2. SECTION LABEL (— ĐỐI TÁC TIN CẬY / HÀNH TRÌNH / etc.)
   ============================================================ */

html[lang="vi"] .section-label {
  font-family: var(--vi-font-label) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.45 !important;
}

/* ============================================================
   3. BUTTONS — tất cả biến thể
   ============================================================ */

html[lang="vi"] .btn,
html[lang="vi"] .btn-outline-orange,
html[lang="vi"] .btn-ghost,
html[lang="vi"] .btn-primary {
  font-family: var(--vi-font-label) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.4 !important;
}

html[lang="vi"] .btn-sm {
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
}

html[lang="vi"] .btn-lg {
  font-size: 16px !important;
}

html[lang="vi"] .home-cta__btn,
html[lang="vi"] .btn.home-cta__btn,
html[lang="vi"] .blog-featured__cta,
html[lang="vi"] .founder-teaser__cta {
  font-family: var(--vi-font-label) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  line-height: 1.4 !important;
}

html[lang="vi"] .map-link,
html[lang="vi"] .view-all {
  font-family: var(--vi-font-label) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.4 !important;
}

/* ============================================================
   4. CTA SECTION (home)
   ============================================================ */

html[lang="vi"] .home-cta__title {
  /* big display — giữ Oswald nhưng giảm letter-spacing */
  letter-spacing: 0.02em !important;
  line-height: 1.1 !important;
}

html[lang="vi"] .home-cta__desc {
  font-family: var(--vi-font-body) !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
}

html[lang="vi"] .home-cta__socials .label {
  font-family: var(--vi-font-label) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.4 !important;
}

/* === HOME PAGE — Innovations card title (VI) === */
html[lang="vi"] .inno-card__title {
  font-family: var(--vi-font-label) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.4 !important;
}

/* === HOME PAGE — Featured project card title (VI) === */
html[lang="vi"] .fp-card__title {
  font-family: var(--vi-font-label) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.4 !important;
}

/* === HOME PAGE — Timeline year (display large — giảm letter-spacing cho VI) === */
html[lang="vi"] .timeline__year {
  letter-spacing: 0.02em !important;
}

/* ============================================================
   5. FOOTER (home-bottom + site-footer)
   ============================================================ */

html[lang="vi"] .home-bottom,
html[lang="vi"] .home-bottom__inner,
html[lang="vi"] .home-bottom__inner a,
html[lang="vi"] .home-bottom a,
html[lang="vi"] .home-bottom .right,
html[lang="vi"] .home-bottom__inner .right a {
  font-family: var(--vi-font-label) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.5 !important;
}

html[lang="vi"] .site-footer,
html[lang="vi"] .site-footer a,
html[lang="vi"] .site-footer p,
html[lang="vi"] .site-footer__bottom,
html[lang="vi"] .site-footer__bottom a,
html[lang="vi"] .foot-col,
html[lang="vi"] .foot-col a {
  font-family: var(--vi-font-label) !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  line-height: 1.5 !important;
}

html[lang="vi"] .site-footer h5,
html[lang="vi"] .foot-col h5 {
  font-family: var(--vi-font-label) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.45 !important;
}

/* ============================================================
   6. BIOGRAPHY (timeline, milestone, skills, stats, quote)
   ============================================================ */

html[lang="vi"] .bio-hero__role {
  font-family: var(--vi-font-label) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.4 !important;
}

html[lang="vi"] .bio-hero__desc {
  font-family: var(--vi-font-body) !important;
  font-size: 18px !important;
  letter-spacing: 0 !important;
  line-height: 1.6 !important;
}

html[lang="vi"] .bio-hero__resume,
html[lang="vi"] .bio-hero__resume * {
  font-family: var(--vi-font-label) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.4 !important;
}

/* stats numbers + labels */
html[lang="vi"] .bio-hero__stats .num,
html[lang="vi"] .stats-row .num,
html[lang="vi"] .num {
  font-family: var(--vi-font-display) !important;
  letter-spacing: 0.02em !important;
}

html[lang="vi"] .bio-hero__stats .lbl,
html[lang="vi"] .stats-row .lbl,
html[lang="vi"] .lbl {
  font-family: var(--vi-font-label) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.4 !important;
}

/* timeline / milestone */
html[lang="vi"] .timeline,
html[lang="vi"] .timeline *,
html[lang="vi"] .journey,
html[lang="vi"] .journey *,
html[lang="vi"] .milestone,
html[lang="vi"] .milestone * {
  letter-spacing: 0.02em !important;
}

html[lang="vi"] .milestone__year {
  font-family: var(--vi-font-display) !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
}

html[lang="vi"] .milestone__title {
  font-family: var(--vi-font-label) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.4 !important;
}

html[lang="vi"] .milestone__desc {
  font-family: var(--vi-font-body) !important;
  font-size: 17px !important;
  letter-spacing: 0 !important;
  line-height: 1.6 !important;
}

/* skills + tools */
html[lang="vi"] .skills-tools,
html[lang="vi"] .skills-tools *,
html[lang="vi"] .skill-row,
html[lang="vi"] .skill-row *,
html[lang="vi"] .skill-bar,
html[lang="vi"] .tools-grid,
html[lang="vi"] .tools-grid *,
html[lang="vi"] .tool,
html[lang="vi"] .tool *,
html[lang="vi"] .tool__label {
  font-family: var(--vi-font-body) !important;
  letter-spacing: 0 !important;
}

html[lang="vi"] .skill-row .name,
html[lang="vi"] .tool__label {
  font-family: var(--vi-font-label) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.5 !important;
}

/* quote / pull-quote */
html[lang="vi"] .quote-block,
html[lang="vi"] .quote-block *,
html[lang="vi"] .quote,
html[lang="vi"] .quote * {
  font-family: var(--vi-font-body) !important;
  letter-spacing: 0 !important;
  line-height: 1.6 !important;
}

/* ============================================================
   7. PROJECTS (cards, filters, chips, stats, sort, sidebar)
   ============================================================ */

html[lang="vi"] .projects,
html[lang="vi"] .projects *,
html[lang="vi"] .projects-sidebar,
html[lang="vi"] .projects-sidebar *,
html[lang="vi"] .projects-layout {
  letter-spacing: 0.02em !important;
}

html[lang="vi"] .ph-label {
  font-family: var(--vi-font-label) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.4 !important;
}

html[lang="vi"] .showing,
html[lang="vi"] .sort {
  font-family: var(--vi-font-label) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.45 !important;
}

html[lang="vi"] .proj-card__year {
  font-family: var(--vi-font-label) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.4 !important;
}

html[lang="vi"] .proj-card__title {
  font-family: var(--vi-font-label) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.4 !important;
}

html[lang="vi"] .proj-card,
html[lang="vi"] .proj-card *,
html[lang="vi"] .project,
html[lang="vi"] .project * {
  letter-spacing: 0.02em !important;
}

html[lang="vi"] .filter,
html[lang="vi"] .filter *,
html[lang="vi"] .filters,
html[lang="vi"] .filters * {
  font-family: var(--vi-font-label) !important;
  letter-spacing: 0.02em !important;
}

html[lang="vi"] .chip,
html[lang="vi"] .chip-mute,
html[lang="vi"] .tag,
html[lang="vi"] .meta {
  font-family: var(--vi-font-label) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.4 !important;
}

html[lang="vi"] .count {
  font-family: var(--vi-font-label) !important;
  font-size: 15px !important;
  letter-spacing: 0.02em !important;
}

/* ============================================================
   8. BLOG (cards, meta, featured, sidebar, pagination)
   ============================================================ */

html[lang="vi"] .blog,
html[lang="vi"] .blog *,
html[lang="vi"] .post,
html[lang="vi"] .post *,
html[lang="vi"] .blog-sidebar,
html[lang="vi"] .blog-sidebar *,
html[lang="vi"] .pagination,
html[lang="vi"] .pagination *,
html[lang="vi"] .related,
html[lang="vi"] .related * {
  letter-spacing: 0.02em !important;
}

html[lang="vi"] .blog-featured__meta,
html[lang="vi"] .blog-card__meta,
html[lang="vi"] .blog-card__meta .dot,
html[lang="vi"] .blog-meta {
  font-family: var(--vi-font-label) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.45 !important;
}

html[lang="vi"] .blog-card__title {
  font-family: var(--vi-font-label) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.4 !important;
}

html[lang="vi"] .blog-card__excerpt,
html[lang="vi"] .post__body,
html[lang="vi"] .post__excerpt,
html[lang="vi"] .post-body {
  font-family: var(--vi-font-body) !important;
  font-size: 18px !important;
  letter-spacing: 0 !important;
  line-height: 1.65 !important;
}

/* ============================================================
   9. VIDEOS
   ============================================================ */

html[lang="vi"] .videos,
html[lang="vi"] .videos *,
html[lang="vi"] .playlist,
html[lang="vi"] .playlist *,
html[lang="vi"] .video-card,
html[lang="vi"] .video-card * {
  letter-spacing: 0.02em !important;
}

html[lang="vi"] .tab {
  font-family: var(--vi-font-label) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.4 !important;
}

html[lang="vi"] .video-badge,
html[lang="vi"] .video-card__new {
  font-family: var(--vi-font-label) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.4 !important;
}

html[lang="vi"] .featured-video__title {
  font-family: var(--vi-font-label) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.3 !important;
}

html[lang="vi"] .featured-video__sub {
  font-family: var(--vi-font-label) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.4 !important;
}

html[lang="vi"] .playlist__title {
  font-family: var(--vi-font-label) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.4 !important;
}

html[lang="vi"] .video-card__title {
  font-family: var(--vi-font-label) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.45 !important;
}
html[lang="vi"] .video-meta {
  font-family: var(--vi-font-label) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.45 !important;
}

/* ============================================================
   10. GALLERY (overlays, captions, masonry)
   ============================================================ */

html[lang="vi"] .gallery,
html[lang="vi"] .gallery *,
html[lang="vi"] .gallery-card,
html[lang="vi"] .gallery-card *,
html[lang="vi"] .masonry,
html[lang="vi"] .masonry * {
  letter-spacing: 0.02em !important;
}

html[lang="vi"] .overlay {
  font-family: var(--vi-font-label) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.4 !important;
}

/* ============================================================
   11. CONTACT (form, labels, inputs)
   ============================================================ */

html[lang="vi"] .contact,
html[lang="vi"] .contact *,
html[lang="vi"] .contact-form,
html[lang="vi"] .contact-form *,
html[lang="vi"] .contact-grid,
html[lang="vi"] .contact-split {
  letter-spacing: 0.02em !important;
}

html[lang="vi"] label {
  font-family: var(--vi-font-label) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.5 !important;
  text-transform: none !important;
}

html[lang="vi"] .req {
  font-family: var(--vi-font-label) !important;
  letter-spacing: 0 !important;
}

html[lang="vi"] input,
html[lang="vi"] textarea,
html[lang="vi"] select {
  font-family: var(--vi-font-body) !important;
  font-size: 15px !important;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
}

html[lang="vi"] input::placeholder,
html[lang="vi"] textarea::placeholder {
  font-family: var(--vi-font-body) !important;
  letter-spacing: 0 !important;
}

/* ============================================================
   12. ADMIN (sidebar, topbar, panel, cards, table, form, badge)
   ============================================================ */

html[lang="vi"] .admin-shell,
html[lang="vi"] .admin-shell *,
html[lang="vi"] .admin-sidebar,
html[lang="vi"] .admin-sidebar *,
html[lang="vi"] .admin-topbar,
html[lang="vi"] .admin-topbar *,
html[lang="vi"] .admin-panel,
html[lang="vi"] .admin-panel *,
html[lang="vi"] .admin-card,
html[lang="vi"] .admin-card * {
  font-family: var(--vi-font-label) !important;
  letter-spacing: 0.02em !important;
}

html[lang="vi"] .admin-sidebar__link,
html[lang="vi"] .admin-sidebar__group h6 {
  font-family: var(--vi-font-label) !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
}

html[lang="vi"] .tbl,
html[lang="vi"] .tbl *,
html[lang="vi"] .form,
html[lang="vi"] .form *,
html[lang="vi"] .field,
html[lang="vi"] .field * {
  font-family: var(--vi-font-label) !important;
  letter-spacing: 0.02em !important;
}

html[lang="vi"] .badge,
html[lang="vi"] .status {
  font-family: var(--vi-font-label) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.4 !important;
}

/* ============================================================
   13. GLOBAL SAFETY NET — bất kỳ class generic nào còn xót
   ============================================================ */

html[lang="vi"] .label {
  font-family: var(--vi-font-label) !important;
  letter-spacing: 0.04em !important;
}

html[lang="vi"] .nav {
  font-family: var(--vi-font-label) !important;
  letter-spacing: 0.04em !important;
}

/* Inputs / buttons / form không có class custom */
html[lang="vi"] button {
  font-family: var(--vi-font-label) !important;
}

/* ============================================================
   14. RESPONSIVE OVERRIDES (đè responsive.css)
   ============================================================ */
@media (max-width: 1100px) {
  html[lang="vi"] .primary-nav a {
    font-size: 14px !important;
    letter-spacing: 0.04em !important;
    line-height: 1.4 !important;
  }
}

/* 820px: nav ẩn — không cần override */