/* ============================================================================
   Mynavi TechTus Vietnam — Design System v2
   Chuẩn hóa từ 13 mockup v2 (05-mockups/v2/{vi,jp})
   Fonts: Be Vietnam Pro (VI sans) + Yu Gothic / Noto Sans JP (JP)
   Tầng: tokens → reset/base → elements → components → motion → responsive
   Nạp CÓ ĐIỀU KIỆN chỉ trên template v2 (không đụng v1).
   Spec: docs/v2/design-system-v2.md · Mapping: docs/v2/mockup-to-ds-mapping.md
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700;800&family=Noto+Sans+JP:wght@300;400;500;700&display=swap');

/* ============================================================================
   1. TOKENS
   ============================================================================ */
:root {
  /* ---- Color: brand ---- */
  --c-cyan:        #00AAEB;
  --c-cyan-strong: #0095C4;
  --c-cyan-deep:   #0077A8;
  --c-cyan-soft:   #E1F4FE;
  --c-cyan-line:   #BFE7F7;
  --c-cyan-wash:   #F5F7FB;

  /* ---- Color: ink (text) ---- */
  --c-ink:   #0D0F14;
  --c-ink-2: #2B3140;
  --c-ink-3: #4A5263;
  --c-ink-4: #6B7385;
  --c-ink-5: #8A91A1;
  --c-muted: #B4BCCD;

  /* ---- Color: lines ---- */
  --c-line:        #E4E7EE;
  --c-line-strong: #CBD2E1;
  --c-line-soft:   #EDF0F8;

  /* ---- Color: surfaces ---- */
  --c-bg:        #FFFFFF;
  --c-bg-alt:    #F5F7FB;
  --c-surface-2: #EDF0F8;

  /* ---- Color: status ---- */
  --c-danger:  #B42318;
  --c-success: #10B981;
  --c-warning: #B45309;
  --c-focus:   #F7C948;

  /* ---- Color: on-dark ---- */
  --c-on-dark:         #FFFFFF;
  --c-on-dark-2:       rgba(255, 255, 255, .85);
  --c-on-dark-line:    rgba(255, 255, 255, .2);
  --c-on-dark-surface: rgba(255, 255, 255, .04);

  /* ---- Typography ---- */
  /* VI (default): Be Vietnam Pro. JP pages override below via :lang(ja). */
  --font-sans: 'Be Vietnam Pro', 'Noto Sans JP', system-ui, -apple-system, sans-serif;
  --font-jp:   'Noto Sans JP', 'Be Vietnam Pro', sans-serif;

  --fs-2xs:  11px;
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 14px;
  --fs-md:   15px;
  --fs-lg:   16px;
  --fs-xl:   18px;
  --fs-2xl:  22px;
  --fs-3xl:  26px;
  --fs-4xl:  32px;
  --fs-5xl:  40px;
  --fs-6xl:  48px;
  --fs-display: clamp(40px, 5.2vw, 68px);
  --fs-stat:    clamp(96px, 19vw, 248px);

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-none:    1;
  --lh-tight:   1.2;
  --lh-snug:    1.45;
  --lh-normal:  1.7;
  --lh-relaxed: 1.85;
  --lh-loose:   2;

  --ls-tighter:    -.05em;
  --ls-tight:      -.03em;
  --ls-normal:     -.01em;
  --ls-wide:       0;
  --ls-wider:      .04em;
  --ls-eyebrow:    .12em;
  --ls-eyebrow-lg: .14em;

  /* ---- Spacing (4px grid) ---- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-7: 28px;  --sp-8: 32px;
  --sp-9: 36px;  --sp-10: 40px; --sp-12: 48px; --sp-14: 56px;
  --sp-16: 64px; --sp-18: 72px; --sp-20: 80px; --sp-24: 96px;
  --sp-28: 112px; --sp-30: 120px;

  --sec-y-sm: 64px;
  --sec-y-md: 88px;
  --sec-y-lg: 112px;
  --sec-y-xl: 120px;

  /* ---- Borders & radius ---- */
  --border-hairline: 1px solid var(--c-line);
  --border-strong:   1px solid var(--c-line-strong);
  --r-sm:    8px;
  --r-md:    12px;
  --r-field: 14px;
  --r-lg:    16px;
  --r-xl:    22px;
  --r-2xl:   32px;
  --r-pill:  999px;

  /* ---- Elevation ---- */
  --shadow-sm:      0 4px 12px -4px rgba(13, 15, 20, .12);
  --shadow-card:    0 8px 24px -8px rgba(13, 15, 20, .22);
  --shadow-lg:      0 24px 44px -22px rgba(0, 0, 0, .4);
  --shadow-xl:      0 30px 60px -20px rgba(0, 0, 0, .35);
  --shadow-cyan:    0 10px 30px rgba(0, 170, 235, .16);
  --shadow-cyan-sm: 0 4px 12px rgba(0, 170, 235, .2);
  --shadow-focus:   0 0 0 3px rgba(0, 170, 235, .3);

  /* ---- Layout & sizing ---- */
  --container:        1200px;
  --container-narrow: 960px;
  --gutter:       clamp(16px, 4vw, 40px);
  --header-h:     80px;
  --header-h-sm:  56px;
  --control-sm:    44px;
  --control-md:    48px;
  --control-field: 52px;
  --control-lg:    56px;

  /* ---- Motion ---- */
  --dur-1: 150ms;
  --dur-2: 200ms;
  --dur-3: 250ms;
  --dur-4: 300ms;
  --dur-5: 400ms;
  --dur-reveal: 500ms;
  --ease:     ease;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* JP track (head.php sets <html lang="ja">) — Yu Gothic first, web fallback. */
html:lang(ja) {
  --font-sans: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro",
    "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic",
    'Noto Sans JP', sans-serif;
  --fs-sm:   14px;
}

/* ============================================================================
   2. RESET / BASE
   ============================================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }

.ds-page,
body {
  font-family: var(--font-sans);
  color: var(--c-ink);
  background: var(--c-bg);
  line-break: strict;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; }
/* <picture> is only a WebP wrapper: don't let it generate a box, so the inner
   <img> keeps the layout/flex/grid slot the markup expects. */
picture { display: contents; }
/* With display:contents on <picture>, its <source> child would otherwise become
   an (empty) flex/grid item — doubling gaps (cert strip) and adding empty grid
   cells. <source> is never rendered content, so hide it explicitly. */
picture > source { display: none; }
/* Skip link — hidden until focused. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 10px 16px;
  background: var(--c-ink);
  color: var(--c-bg);
  border-radius: 0 0 var(--r-md) 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.skip-link:focus { left: 0; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: .8; }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 4px;
}

/* ============================================================================
   3. ELEMENTS (typography)
   ============================================================================ */
h1, h2, h3, h4 {
  margin: 0;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}
.h-display {
  font-size: var(--fs-display);
  font-weight: var(--fw-semibold);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
}
h1, .h1 { font-size: var(--fs-5xl); }
h2, .h2 { font-size: var(--fs-4xl); }
h3, .h3 { font-size: var(--fs-3xl); }
p       { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-relaxed); }

.eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow-lg);
  text-transform: uppercase;
  color: var(--c-cyan);
  margin-bottom: var(--sp-5);
}
.eyebrow--sm { font-size: var(--fs-2xs); letter-spacing: var(--ls-eyebrow); }

/* ============================================================================
   4. LAYOUT
   ============================================================================ */
.container        { max-width: var(--container); margin: 0 auto; }
.container--narrow { max-width: var(--container-narrow); margin: 0 auto; }

.section          { padding: var(--sec-y-lg) var(--gutter); }
.section--tight   { padding: var(--sec-y-md) var(--gutter); }
.section--bottom  { padding: 0 var(--gutter) var(--sec-y-lg); }
.section--alt     { background: var(--c-bg-alt); }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-bottom: var(--sp-10);
}

.section-head__leadwrap {
  display: inline-flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: flex-end;
}

.section-title {
  font-size: clamp(var(--fs-4xl), 5.2vw, var(--fs-6xl));
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
}
.section-subtitle { font-size: var(--fs-base); margin-top: var(--sp-4); }

/* ============================================================================
   5. HEADER / NAV
   ============================================================================ */
.site-header {
  background: rgb(255 255 255 / 94%);
  border-bottom: var(--border-hairline);
  padding: 0 var(--gutter);
  position: sticky;
  top: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 40;
}
.header-inner {
  max-width: var(--container);
  margin: 0 auto;
  min-height: var(--header-h);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px var(--sp-8);
  padding: 12px 0;
}
.header-logo     { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); line-height: 1; }
.header-logo img { width: 156px; height: 60px; object-fit: contain; }
.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 30px;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--c-ink-2);
}
.header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }

/* VI dày hơn JP (hook html[lang]) */
html[lang="vi"] .header-inner { gap: 12px var(--sp-6); }
html[lang="vi"] .nav          { font-size: var(--fs-base); gap: 8px var(--sp-5); }

.language-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-sm);
  padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  border: var(--border-hairline);
  background: transparent;
  color: var(--c-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  transition: opacity var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.language-switch:hover { opacity: 1; border-color: var(--c-cyan); color: var(--c-cyan); }

/* ============================================================================
   6. BUTTONS
   ============================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: inherit;
  font-weight: var(--fw-bold);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease), transform var(--dur-3) var(--ease);
}
.btn--primary {
  min-height: var(--control-md);
  padding: 0 var(--sp-6);
  border-radius: var(--r-sm);
  background: var(--c-cyan);
  color: #fff;
  font-size: var(--fs-base);
}
.btn--primary:hover { opacity: .8; }

.btn--pill {
  min-height: var(--control-sm);
  padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  border-color: var(--c-line);
  background: transparent;
  color: var(--c-ink);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
}
.btn--pill:hover { opacity: 1; border-color: var(--c-cyan); color: var(--c-cyan); }

.btn--submit {
  min-height: var(--control-lg);
  padding: 0 var(--sp-6);
  border: none;
  border-radius: var(--r-pill);
  background: var(--c-cyan);
  color: #fff;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}
.btn--submit:hover { opacity: 1; background: var(--c-cyan-strong); color: #fff; }
.btn--submit .btn__icon { width: 1.25em; height: 1.25em; flex: none; }
.btn--submit.is-loading,
.btn--submit.is-sent { pointer-events: none; }
.btn--submit.is-sent { background: var(--c-cyan-strong); }
.btn__spinner {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btnSpin .6s linear infinite;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn__spinner { animation-duration: 1.8s; }
  .btn--submit .btn__icon .btn-check-circle { animation: none; opacity: 1; transform: none; }
  .btn--submit .btn__icon .btn-check-tick { animation: none; stroke-dashoffset: 0; }
}

/* ============================================================================
   7. FORMS
   ============================================================================ */
.field {
  width: 100%;
  min-height: var(--control-field);
  padding: 0 var(--sp-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-field);
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: inherit;
  font-size: var(--fs-base);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
textarea.field { min-height: auto; padding: var(--sp-4); line-height: var(--lh-normal); resize: vertical; }
.field:focus { outline: none; border-color: var(--c-cyan); box-shadow: var(--shadow-focus); }
.field::placeholder { color: var(--c-ink-5); }
select.field {
  appearance: none;
  -webkit-appearance: none;
  padding-right: calc(var(--sp-4) + 26px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230D0F14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-2) center;
  background-size: 18px;
}

/* ============================================================================
   8. CARDS / MEDIA / CHIP / BADGE
   ============================================================================ */
.card {
  background: var(--c-bg);
  border: var(--border-hairline);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.card--interactive {
  transition: border-color var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}
.card--interactive:hover { border-color: var(--c-cyan); box-shadow: var(--shadow-card); transform: translateY(-2px); }

.media       { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-frame { position: relative; overflow: hidden; border-radius: var(--r-2xl); }
.media-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-5) var(--ease); }
.media-frame:hover img { transform: scale(1.05); }

.chip {
  display: inline-flex;
  align-items: center;
  border: var(--border-strong);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  color: var(--c-ink-2);
}

.badge {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  background: rgba(13, 15, 20, .72);
  color: #fff;
  border-radius: var(--r-pill);
  padding: 6px 12px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
}

/* ============================================================================
   9. SECTION HELPERS: STATS / GHOST NUMBER / ON-DARK & ON-CYAN CONTEXT
   ============================================================================ */
.stat-num {
  font-size: clamp(64px, 7vw, 92px);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: var(--ls-tighter);
}
.stat-num em { color: var(--c-cyan); font-style: normal; }
.stat-label  { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--c-ink-3); }

.ghost-num {
  pointer-events: none;
  margin-top: var(--sp-14);
  font-size: var(--fs-stat);
  font-weight: var(--fw-semibold);
  letter-spacing: -.06em;
  line-height: .78;
  color: var(--c-line-soft);
  white-space: nowrap;
  overflow: hidden;
}

/* ngữ cảnh nền tối (ảnh/video/hero) */
.on-dark { color: var(--c-on-dark); }
.on-dark .eyebrow { color: var(--c-on-dark-2); }
.on-dark p, .on-dark .stat-label { color: var(--c-on-dark-2); }
.on-dark .divider-t { border-top: 1px solid var(--c-on-dark-line); }
.on-dark .chip { border-color: var(--c-on-dark-line); color: var(--c-on-dark); }

/* ngữ cảnh nền cyan (contact panel) */
.on-cyan { color: var(--c-on-dark); }
.on-cyan .eyebrow { color: var(--c-cyan-line); }
.on-cyan p, .on-cyan .divider-t { color: var(--c-on-dark); }
.on-cyan .divider-t { border-top: 1px solid var(--c-on-dark-line); }
.on-cyan .divider-b { border-bottom: 1px solid var(--c-on-dark-line); }

/* ============================================================================
   10. FOOTER
   ============================================================================ */
.footer {
  border-top: var(--border-hairline);
  padding: var(--sp-18) var(--gutter) 0;
  overflow: hidden;
}
.footer-inner { max-width: var(--container); margin: 0 auto; position: relative; }
.footer-grid  { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--sp-12); }
.footer-col   { flex: 1 1 150px; min-width: 0; }
.footer-col--brand { flex: 1.4 1 260px; }
.footer-head  { font-size: var(--fs-xs); font-weight: var(--fw-bold); margin-bottom: var(--sp-4); }
.footer-links { display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--c-ink-3); }
.footer-brand {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.footer-brand img { width: 156px; height: 60px; object-fit: contain; display: block; }
.footer-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-6) 0 var(--sp-8);
  border-top: var(--border-hairline);
  font-size: var(--fs-xs);
  color: var(--c-ink-4);
}

/* ============================================================================
   11. BREADCRUMB
   ============================================================================ */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--c-ink-4); }
.bc-sep     { color: var(--c-muted); }

/* ============================================================================
   12. MOTION
   ============================================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .media-frame img { transition: none; }
}

/* ============================================================================
   13. RESPONSIVE (breakpoints chuẩn hóa: 640 / 768 / 900 / 1024)
   ============================================================================ */
@media (max-width: 900px) {
  .section      { padding: var(--sec-y-md) var(--gutter); }
  .section-head { margin-bottom: var(--sp-8); }
  .footer-grid  { gap: var(--sp-8); }
}

@media (min-width: 769px) and (max-width: 1023px) {
  .nav { order: 3; width: 100%; flex-wrap: wrap; gap: 8px var(--sp-4); }
  html[lang="vi"] .nav { gap: 8px var(--sp-4); }
}

@media (max-width: 768px) {
  .header-inner    { min-height: 0; padding: 10px 0; }
  .header-logo img { width: 120px; height: 46px; }
  .nav {
    order: 3;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; display: inline-flex; align-items: center; min-height: var(--control-sm); }
  .header-actions { flex-wrap: nowrap; gap: var(--sp-2); }
  .language-switch { font-size: 0; min-height: var(--control-sm); padding: 0 var(--sp-3); }
  .language-switch::before { content: "日本語 ↗"; font-size: var(--fs-xs); }
  .btn--primary { min-height: var(--control-sm); padding: 0 var(--sp-4); font-size: var(--fs-sm); }
}

@media (max-width: 640px) {
  .section { padding: var(--sec-y-sm) var(--gutter); }
  .footer  { padding-top: var(--sp-12); }
}

/* ============================================================================
   14. UTILITIES (tối thiểu — chỉ pattern lặp nhiều)
   ============================================================================ */
.divider-t { border-top: var(--border-hairline); }
.divider-b { border-bottom: var(--border-hairline); }
.text-cyan { color: var(--c-cyan); }
.text-muted { color: var(--c-ink-4); }
.muted-ghost { color: var(--c-line-soft); }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}