/* ==========================================================================
   DESIGN TOKENS & SYSTEM VARIABLES (Root Cause / Single Source of Truth)
   Theme: Luminous Mint & Modern SaaS CV - Brand Color #05c6a9
   Strict compliance with landing-page/AGENTS.md - ALL values via var(--token)
   ========================================================================== */

:root {
  /* Brand Color (#05c6a9) */
  --color-brand: #05c6a9;
  --color-brand-hover: #04b399;
  --color-brand-dark: #038c77;
  --color-brand-light: #e6f9f5;
  --color-brand-mint: #ccfbf1;
  --color-brand-tint: #f8fcfa;
  --color-brand-card-header: #f1faf7;
  --color-brand-soft: rgba(5, 198, 169, 0.08);
  --color-brand-soft-hover: rgba(5, 198, 169, 0.16);
  --color-brand-border: rgba(5, 198, 169, 0.22);
  --color-brand-border-subtle: rgba(5, 198, 169, 0.15);
  --color-brand-border-card: rgba(5, 198, 169, 0.18);
  --color-brand-glow: rgba(5, 198, 169, 0.28);
  --color-brand-shadow: rgba(5, 198, 169, 0.08);
  --color-brand-chevron: rgba(5, 198, 169, 0.6);

  /* Background decorative shapes */
  --color-blob-primary: rgba(5, 198, 169, 0.35);
  --color-blob-secondary: rgba(5, 198, 169, 0.2);
  --color-blob-soft: rgba(5, 198, 169, 0.12);

  /* Bostami Pastel Theme Accents & Icon Colors */
  --color-accent-pink: #f43f5e;
  --color-accent-pink-bg: #ffe4e6;
  --color-accent-pink-border: #fecdd3;

  --color-accent-blue: #0284c7;
  --color-accent-blue-bg: #e0f2fe;
  --color-accent-blue-border: #bae6fd;

  --color-accent-purple: #8b5cf6;
  --color-accent-purple-bg: #f3e8ff;
  --color-accent-purple-border: #e9d5ff;

  --color-accent-amber: #d97706;
  --color-accent-amber-bg: #fef3c7;
  --color-accent-amber-border: #fde68a;

  --color-accent-teal: #0d9488;
  --color-accent-teal-bg: #ccfbf1;

  /* Date Pill Badge (Experience Header) */
  --color-date-pill-bg: #1e293b;
  --color-date-pill-text: #ffffff;
  --date-pill-padding: 0.35rem 0.95rem;

  /* Social Media Colors */
  --color-social-facebook: #1877f2;
  --color-social-youtube: #ff0000;
  --color-social-tiktok: #0f172a;
  --color-social-linkedin: #0a66c2;

  /* Text Colors */
  --color-heading: #0f172a;
  --color-body: #475569;
  --color-muted: #64748b;
  --color-subtle: #94a3b8;
  --color-white: #ffffff;

  /* Surfaces & Backgrounds */
  --color-bg-page: #e7f7f4;
  --color-bg-surface: #ffffff;
  --color-bg-box: #f8fcfa;
  --color-bg-box-header: #ecfffc;
  --color-bg-exp-body: #fcfcfc;
  --color-bg-contact-panel: rgba(5, 198, 169, 0.025);
  --color-border-subtle: #e2e8f0;
  --color-border-divider: rgba(5, 198, 169, 0.08);
  --color-border-card-header: rgba(5, 198, 169, 0.12);
  --color-border-glass: rgba(255, 255, 255, 0.9);

  /* Gradients */
  --gradient-page-base: radial-gradient(circle at 50% 30%, #f1faf8 0%, #e1f5f1 50%, #ccefe9 100%);
  --gradient-brand-line: linear-gradient(90deg, #05c6a9 0%, rgba(5, 198, 169, 0.08) 100%);
  --gradient-blob-1: linear-gradient(135deg, rgba(5, 198, 169, 0.35) 0%, rgba(5, 198, 169, 0.12) 100%);
  --gradient-blob-2: linear-gradient(135deg, rgba(5, 198, 169, 0.28) 0%, rgba(5, 198, 169, 0.06) 100%);

  /* Typography - Option 1: Headings: Be Vietnam Pro, Body: Inter */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-heading: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;

  --font-size-3xs: 0.65rem;   /* 10.4px */
  --font-size-2xs: 0.725rem;  /* 11.6px */
  --font-size-xs: 0.8125rem;  /* 13px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 0.9375rem;/* 15px */
  --font-size-md: 1rem;       /* 16px */
  --font-size-lg: 1.15rem;    /* 18.4px */
  --font-size-xl: 1.35rem;    /* 21.6px */
  --font-size-2xl: 1.625rem;  /* 26px */
  --font-size-3xl: 2.125rem;  /* 34px */

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --line-height-none: 1;
  --line-height-tight: 1.25;
  --line-height-heading: 1.35;
  --line-height-snug: 1.45;
  --line-height-normal: 1.7;
  --line-height-relaxed: 1.85;

  --letter-spacing-heading: -0.025em;
  --letter-spacing-body: -0.011em;
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide: 0.04em;
  --letter-spacing-wider: 0.08em;

  /* Spacing System */
  --space-0: 0rem;
  --space-3xs: 0.125rem; /* 2px */
  --space-2xs: 0.25rem;  /* 4px */
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 0.75rem;   /* 12px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.25rem;   /* 20px */
  --space-xl: 1.5rem;    /* 24px */
  --space-2xl: 2rem;     /* 32px */
  --space-3xl: 2.5rem;   /* 40px */
  --space-4xl: 3.25rem;  /* 52px */
  --space-5xl: 4.5rem;   /* 72px */
  --space-6xl: 6.5rem;   /* 104px */

  /* Dimensions & Layout */
  --container-max-width: 1240px;
  --sidebar-width: 360px;
  --avatar-width: 190px;
  --avatar-height: 205px;
  --avatar-popout: 65px;
  --avatar-width-mobile: 180px;
  --avatar-height-mobile: 195px;
  --avatar-popout-mobile: 95px;
  --mobile-page-top-space: 140px;
  --avatar-blob-width: 68px;
  --avatar-blob-height: 92px;
  --avatar-blob-width-left: 52px;
  --avatar-blob-height-left: 72px;
  --avatar-blob-right-offset: -10px;
  --avatar-blob-top-offset: -12px;
  --avatar-blob-left-offset: -8px;
  --avatar-blob-left-top-offset: 10px;
  --avatar-rotate-right: 14deg;
  --avatar-rotate-left: -10deg;
  --dash-width: 32px;
  --dash-height: 3px;
  --pill-padding: 0.625rem 1.35rem;
  --pill-gap: 0.5rem;
  --pill-font-size: 0.9375rem;
  --pill-icon-size: 18px;
  --social-box-size: 38px;
  --social-icon-size: 18px;
  --title-badge-size: 40px;
  --title-line-width: 140px;
  --title-line-height: 5px;
  --title-line-thick-ratio: 42%;
  --title-line-thin-height: 2.5px;
  --color-title-line-thick: #03bc9d;
  --color-title-line-thin: #14dbb9;
  --icon-box-size: 38px;
  --icon-box-sm: 34px;
  --icon-size-default: 20px;
  --icon-size-sm: 18px;
  --icon-size-xs: 14px;
  --timeline-line-width: 4px;
  --timeline-dot-size: 16px;
  --timeline-dot-border: 2px;
  --timeline-dot-ring: 0 0 0 4px rgba(5, 198, 169, 0.16), 0 2px 8px rgba(5, 198, 169, 0.2);
  --timeline-dot-ring-active: 0 0 0 7px rgba(5, 198, 169, 0.25), 0 2px 10px rgba(5, 198, 169, 0.35);
  --timeline-dot-flash: 0 0 0 8px rgba(5, 198, 169, 0.38), 0 0 16px rgba(5, 198, 169, 0.65);
  --timeline-line-glow: none;
  --color-timeline-track: rgba(5, 198, 169, 0.16);
  --timeline-left: 20px;
  --timeline-padding-left: 3rem;
  --timeline-top-offset: 27px;
  --timeline-bullet-size: 7px;
  --timeline-bullet-top: 8px;
  --timeline-runner-height: 90px;
  --timeline-runner-duration: 3.2s;
  --timeline-draw-duration: 1.3s;
  --card-fade-duration: 0.65s;
  --node-pop-duration: 0.4s;
  --node-highlight-duration: 0.85s;
  --exp-header-gap: 0.875rem;
  --exp-header-min-w: 160px;
  --exp-text-gap: 0.25rem;
  --timeline-stagger-1: 0.15s;
  --timeline-stagger-2: 0.32s;
  --timeline-stagger-3: 0.5s;
  --timeline-stagger-4: 0.68s;
  --timeline-stagger-5: 0.86s;
  --timeline-translate-start: 22px;
  --gradient-timeline-line: linear-gradient(180deg, #05c6a9 0%, rgba(5, 198, 169, 0.5) 85%, rgba(5, 198, 169, 0.2) 100%);
  --gradient-timeline-runner: linear-gradient(180deg, transparent 0%, rgba(5, 198, 169, 0.4) 30%, #05c6a9 60%, #ffffff 85%, transparent 100%);
  --sticky-top-offset: var(--space-5xl);

  /* Skill Card Tokens (Matching Image) */
  --skill-card-bg: var(--color-bg-surface);
  --skill-card-border: rgba(5, 198, 169, 0.14);
  --skill-card-border-hover: var(--color-brand);
  --skill-card-radius: var(--radius-lg);
  --skill-card-padding: 0.9rem 1.15rem;
  --skill-card-gap: 0.95rem;
  --skill-card-shadow: 0 4px 18px rgba(15, 23, 42, 0.03), 0 2px 6px rgba(5, 198, 169, 0.03);
  --skill-card-shadow-hover: 0 8px 24px rgba(5, 198, 169, 0.12), 0 2px 8px rgba(15, 23, 42, 0.04);
  --skill-icon-size: 44px;
  --skill-icon-radius: 10px;
  --skill-icon-bg: var(--color-brand-light);
  --skill-icon-color: var(--color-brand);
  --skill-track-height: 7px;
  --skill-track-bg: rgba(5, 198, 169, 0.12);
  --skill-fill-gradient: linear-gradient(90deg, #05c6a9 0%, #00b894 100%);
  --skill-fill-glow: none;
  --skill-grid-gap: var(--space-md);
  --skill-badge-bg: #f4f4f4;
  --skill-badge-bg-hover: #eaeaea;
  --skill-badge-color: #6b6b6b;
  --skill-badge-color-hover: #334155;
  --skill-badge-border: transparent;
  --skill-badge-padding: 0.15rem 0.5rem;
  --skill-badge-radius: var(--radius-full);
  --skill-badge-font-size: var(--font-size-2xs);
  --skill-badge-gap: var(--space-xs);

  /* Borders & Radii (Giảm 20% trừ bo tròn con nhộng) */
  --border-thin: 1px;
  --border-medium: 2px;
  --border-thick: 3px;

  --radius-xs: 5px;
  --radius-sm: 8px;
  --radius-md: 11px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 22px;
  --radius-3xl: 26px;
  --radius-full: 9999px;

  /* Shadows (Bỏ Teal Glow Shadow, thay bằng đổ bóng xám trung tính, sắc nét) */
  --shadow-card: 0 16px 36px -8px rgba(15, 23, 42, 0.06), 0 6px 16px -4px rgba(15, 23, 42, 0.02);
  --shadow-avatar: 0 12px 24px rgba(15, 23, 42, 0.1);
  --shadow-pill: 0 2px 6px rgba(15, 23, 42, 0.08);
  --shadow-pill-hover: 0 4px 12px rgba(15, 23, 42, 0.12);
  --shadow-icon: 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-job-card: 0 1px 3px rgba(15, 23, 42, 0.04), 0 8px 20px -4px rgba(15, 23, 42, 0.06);
  --shadow-job-card-hover: 0 4px 6px rgba(15, 23, 42, 0.04), 0 14px 28px -4px rgba(15, 23, 42, 0.1);
  --shadow-hover: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-date-pill: 0 2px 6px rgba(15, 23, 42, 0.15);
  --color-social-btn-bg: #F3F6F6;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-smooth: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --translate-hover: -3px;

  /* Background decorative positioning */
  --decor-orbit-size: 320px;
  --decor-orbit-left: -50px;
  --decor-orbit-top: -50px;
  --decor-dots-left-w: 100px;
  --decor-dots-left-h: 160px;
  --decor-dots-left-pos: 2.5%;
  --decor-dots-left-top: 38%;
  --decor-dots-top-w: 80px;
  --decor-dots-top-h: 110px;
  --decor-dots-top-left: 23%;
  --decor-dots-top-pos: 4%;
  --decor-wave-w: 420px;
  --decor-wave-right: -40px;
  --decor-wave-top: 0px;
  --decor-dots-right-w: 100px;
  --decor-dots-right-h: 160px;
  --decor-dots-right-pos: 2%;
  --decor-dots-right-bottom: 12%;
}

/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: var(--space-0);
  padding: var(--space-0);
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-body);
  color: var(--color-body);
  background-color: var(--color-bg-page);
  background-image: var(--gradient-page-base);
  background-attachment: fixed;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

ul, ol {
  list-style: none;
}

/* ==========================================================================
   BACKGROUND DECORATIVE ELEMENTS (Vector Geometric Shapes & Accents)
   ========================================================================== */

.bg-decorations {
  position: fixed;
  top: var(--space-0);
  left: var(--space-0);
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.bg-decor-canvas {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* ==========================================================================
   MAIN LAYOUT (2 Columns: Sticky Sidebar + Continuous Scroll Card)
   ========================================================================== */

.bostami-page-wrapper {
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
  padding-top: var(--space-5xl);
  padding-bottom: var(--space-5xl);
  position: relative;
  z-index: 1;
}

.bostami-layout-grid {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: start;
}

/* ==========================================================================
   LEFT COLUMN: STICKY PROFILE SIDEBAR
   ========================================================================== */

.profile-sidebar {
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-2xl);
  padding: var(--space-xl) var(--space-xl) var(--space-2xl) var(--space-xl);
  box-shadow: var(--shadow-card);
  border: var(--border-thin) solid var(--color-border-glass);
  text-align: center;
  position: sticky;
  top: var(--sticky-top-offset);
  transition: box-shadow var(--transition-smooth);
  animation: sidebarEntrance 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes sidebarEntrance {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Avatar Wrapper with Layered Organic Decorative Shapes */
.profile-avatar-wrap {
  position: relative;
  width: var(--avatar-width);
  height: var(--avatar-height);
  margin-left: auto;
  margin-right: auto;
  margin-top: calc(var(--space-0) - var(--avatar-popout));
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-blob {
  position: absolute;
  border-radius: var(--radius-xl);
  pointer-events: none;
  z-index: 0;
}

.avatar-blob--right {
  right: var(--avatar-blob-right-offset);
  top: var(--avatar-blob-top-offset);
  width: var(--avatar-blob-width);
  height: var(--avatar-blob-height);
  background: var(--gradient-blob-1);
  transform: rotate(var(--avatar-rotate-right));
  animation: blobPulseRight 8s ease-in-out infinite alternate;
}

.avatar-blob--left {
  left: var(--avatar-blob-left-offset);
  top: var(--avatar-blob-left-top-offset);
  width: var(--avatar-blob-width-left);
  height: var(--avatar-blob-height-left);
  background: var(--gradient-blob-2);
  transform: rotate(var(--avatar-rotate-left));
  animation: blobPulseLeft 9s ease-in-out infinite alternate;
}

@keyframes blobPulseRight {
  0% { transform: rotate(var(--avatar-rotate-right)) scale(1); }
  100% { transform: rotate(calc(var(--avatar-rotate-right) + 4deg)) scale(1.06); }
}

@keyframes blobPulseLeft {
  0% { transform: rotate(var(--avatar-rotate-left)) scale(1); }
  100% { transform: rotate(calc(var(--avatar-rotate-left) - 4deg)) scale(1.08); }
}

.profile-avatar-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-avatar);
}

.profile-name {
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-heading);
  line-height: var(--line-height-heading);
  margin-bottom: var(--space-2xs);
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.typewriter-text {
  display: inline;
}

.typewriter-cursor {
  display: inline-block;
  width: 2.5px;
  height: 1.15em;
  background-color: var(--color-brand);
  margin-left: 3px;
  vertical-align: -0.12em;
  border-radius: 1px;
  animation: typewriterBlink 0.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes typewriterBlink {
  0%, 45% {
    opacity: 1;
  }
  50%, 95% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.profile-role-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-muted);
  line-height: var(--line-height-tight);
}

.profile-role-builder {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-muted);
  line-height: var(--line-height-tight);
  margin-top: 5px;
  letter-spacing: 0.01em;
}

/* ==========================================================================
   WEBSITE PILL BUTTON & SOCIAL MEDIA ROW (Matching User Reference Image)
   ========================================================================== */

.profile-website-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pill-gap);
  background-color: var(--color-brand);
  color: var(--color-white);
  padding: var(--pill-padding);
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: var(--pill-font-size);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
  box-shadow: var(--shadow-pill);
  transition: transform var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.profile-website-pill:hover {
  background-color: var(--color-brand-hover);
  transform: translateY(var(--translate-hover));
  box-shadow: var(--shadow-pill-hover);
  color: var(--color-white);
}

.profile-website-icon {
  width: var(--pill-icon-size);
  height: var(--pill-icon-size);
  flex-shrink: 0;
}

.profile-social-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.profile-social-btn {
  width: var(--social-box-size);
  height: var(--social-box-size);
  border-radius: var(--radius-sm);
  background-color: var(--color-social-btn-bg, #F3F6F6);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-icon);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.profile-social-btn:hover {
  transform: translateY(var(--translate-hover));
  box-shadow: var(--shadow-hover);
}

.profile-social-btn.btn-facebook {
  color: var(--color-social-facebook);
}

.profile-social-btn.btn-youtube {
  color: var(--color-social-youtube);
}

.profile-social-btn.btn-tiktok {
  color: var(--color-social-tiktok);
}

.profile-social-btn.btn-linkedin {
  color: var(--color-social-linkedin);
}

/* ==========================================================================
   CONTACT SECTION BOX (Clean, Borderless & Airy)
   ========================================================================== */

.profile-contact-card {
  background-color: transparent;
  border: none;
  padding: var(--space-0);
  text-align: left;
}

.contact-list {
  display: flex;
  flex-direction: column;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-xs);
  border-bottom: var(--border-thin) solid var(--color-border-divider);
  transition: background-color var(--transition-fast);
}

.contact-item:last-child {
  border-bottom: none;
}

.contact-icon-box {
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-icon);
}

.contact-icon-box.icon-teal {
  background-color: var(--color-brand-light);
  color: var(--color-brand);
}

.contact-icon-box.icon-purple {
  background-color: var(--color-accent-purple-bg);
  color: var(--color-accent-purple);
}

.contact-icon-box.icon-amber {
  background-color: var(--color-accent-amber-bg);
  color: var(--color-accent-amber);
}

.contact-icon-box.icon-pink {
  background-color: var(--color-accent-pink-bg);
  color: var(--color-accent-pink);
}

.contact-icon-box.icon-mint {
  background-color: var(--color-accent-teal-bg);
  color: var(--color-accent-teal);
}

.contact-icon-box.icon-blue {
  background-color: var(--color-accent-blue-bg);
  color: var(--color-accent-blue);
}

.contact-text-wrap {
  flex: 1;
  min-width: 0;
}

.contact-label {
  display: block;
  font-size: var(--font-size-2xs);
  color: var(--color-subtle);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-3xs);
}

.contact-value {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading);
  line-height: var(--line-height-heading);
  word-break: break-word;
}

.contact-link:hover {
  color: var(--color-brand);
}

/* ==========================================================================
   RIGHT COLUMN: CONTINUOUS SCROLL MAIN CARD
   ========================================================================== */

.cv-main-card {
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-3xl);
  padding: var(--space-3xl) var(--space-3xl);
  box-shadow: var(--shadow-card);
  border: var(--border-thin) solid var(--color-border-glass);
}

.cv-section {
  margin-bottom: var(--space-4xl);
}

.cv-section:last-child {
  margin-bottom: var(--space-0);
}

/* Section Header: Teal Icon Badge + Bold Title + Horizontal Gradient Accent Line */
.bostami-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.section-title-badge {
  width: var(--title-badge-size);
  height: var(--title-badge-size);
  border-radius: var(--radius-sm);
  background-color: var(--color-brand);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}

.bostami-section-header:not(.is-inview) .section-title-badge {
  transform: scale(0.65);
  opacity: 0;
}

.bostami-section-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-heading);
  line-height: var(--line-height-none);
}

.bostami-title-line {
  display: flex;
  align-items: center;
  width: var(--title-line-width);
  height: var(--title-line-height);
  flex-shrink: 0;
  transform-origin: left center;
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
}

.bostami-section-header:not(.is-inview) .bostami-title-line {
  transform: scaleX(0);
  opacity: 0;
}

.bostami-title-line::before {
  content: "";
  display: block;
  width: var(--title-line-thick-ratio);
  height: var(--title-line-height);
  background-color: var(--color-title-line-thick);
  flex-shrink: 0;
}

.bostami-title-line::after {
  content: "";
  display: block;
  flex: 1;
  height: var(--title-line-thin-height);
  background-color: var(--color-title-line-thin);
}

/* SECTION 1: TÓM TẮT */
.summary-text {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed);
  color: var(--color-body);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

#tom-tat:not(.is-inview) .summary-text {
  opacity: 0;
  transform: translateY(14px);
}

/* ==========================================================================
   SECTION 2: KINH NGHIỆM LÀM VIỆC (TIMELINE)
   ========================================================================== */

.experience-timeline {
  position: relative;
  padding-left: var(--timeline-padding-left);
}

/* Base timeline background track line */
.experience-timeline::before {
  content: "";
  position: absolute;
  left: var(--timeline-left);
  top: var(--space-xs);
  bottom: var(--space-xs);
  width: var(--timeline-line-width);
  background-color: var(--color-timeline-track);
  border-radius: var(--radius-full);
  z-index: 0;
}

/* Active Progressive Line (Di chuyển tới từng vị trí theo nhịp) */
.timeline-line-progress {
  position: absolute;
  left: var(--timeline-left);
  top: var(--space-xs);
  width: var(--timeline-line-width);
  height: var(--space-0);
  background-image: var(--gradient-timeline-line);
  box-shadow: var(--timeline-line-glow);
  border-radius: var(--radius-full);
  z-index: 1;
}

/* Moving Light Beam Runner (Kích hoạt lướt nhẹ liên tục sau khi hoàn thành) */
.timeline-line-runner {
  position: absolute;
  left: var(--timeline-left);
  top: var(--space-xs);
  width: var(--timeline-line-width);
  height: var(--timeline-runner-height);
  background-image: var(--gradient-timeline-runner);
  border-radius: var(--radius-full);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.experience-timeline.is-completed .timeline-line-runner {
  opacity: 1;
  animation: timelineRunnerLoop var(--timeline-runner-duration) ease-in-out infinite;
}

@keyframes timelineRunnerLoop {
  0% {
    top: 0%;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

.experience-card {
  position: relative;
  margin-bottom: var(--space-xl);
  opacity: 0;
  transform: translateY(var(--timeline-translate-start));
  transition: opacity var(--card-fade-duration) cubic-bezier(0.16, 1, 0.3, 1), transform var(--card-fade-duration) cubic-bezier(0.16, 1, 0.3, 1);
}

.experience-card:last-child {
  margin-bottom: var(--space-0);
}

.experience-card.is-visible {
  opacity: 1;
  transform: translateY(var(--space-0));
}

/* Timeline Node chính xác ở giữa trục đường thẳng (Solid Color) */
.timeline-node {
  position: absolute;
  left: calc(var(--timeline-left) + (var(--timeline-line-width) / 2) - var(--timeline-padding-left) - (var(--timeline-dot-size) / 2));
  top: var(--timeline-top-offset);
  width: var(--timeline-dot-size);
  height: var(--timeline-dot-size);
  border: var(--timeline-dot-border) solid var(--color-white);
  background-color: var(--color-brand);
  border-radius: var(--radius-full);
  box-shadow: none;
  opacity: 0.45;
  transform: scale(0.8);
  z-index: 3;
  transition: transform var(--node-pop-duration) cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow var(--transition-fast), opacity var(--transition-fast);
}

/* Hiệu ứng điểm tròn nổi bật khi tia timeline di chuyển tới */
.timeline-node.is-highlighted {
  opacity: 1;
  animation: nodeHighlightPulse var(--node-highlight-duration) cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes nodeHighlightPulse {
  0% {
    transform: scale(0.8);
    box-shadow: none;
  }
  35% {
    transform: scale(1.75);
    box-shadow: 0 0 0 10px rgba(5, 198, 169, 0.45), 0 0 24px rgba(5, 198, 169, 0.75);
  }
  68% {
    transform: scale(1.22);
    box-shadow: var(--timeline-dot-ring-active);
  }
  100% {
    transform: scale(1);
    box-shadow: var(--timeline-dot-ring);
  }
}

.experience-card:hover .timeline-node {
  box-shadow: var(--timeline-dot-ring-active);
  transform: scale(1.15);
}

/* Borderless Experience Cards (Không viền) */
.experience-card-inner {
  background-color: var(--color-bg-box);
  border: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-job-card);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.experience-card-inner:hover {
  transform: translateY(var(--translate-hover));
  box-shadow: var(--shadow-job-card-hover);
}

/* Header Kinh nghiệm theo mẫu người dùng cung cấp */
.experience-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--exp-header-gap);
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-bg-box-header);
  border-bottom: none;
}

.experience-icon-badge {
  width: var(--icon-box-sm);
  height: var(--icon-box-sm);
  border-radius: var(--radius-full);
  background-color: var(--color-white);
  color: var(--color-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-icon);
}

.experience-header-text {
  display: flex;
  flex-direction: column;
  gap: var(--exp-text-gap);
  flex: 1;
  min-width: var(--space-0);
}

.exp-company-name {
  font-family: var(--font-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
  line-height: var(--line-height-snug);
}

.exp-role-title {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-style: italic;
  color: var(--color-muted);
  line-height: var(--line-height-tight);
}

.exp-date-pill {
  background-color: var(--color-date-pill-bg);
  color: var(--color-date-pill-text);
  padding: var(--date-pill-padding);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
  box-shadow: var(--shadow-date-pill);
}

.experience-body {
  background-color: var(--color-bg-exp-body);
  padding: var(--space-lg) var(--space-lg) var(--space-lg) var(--space-xl);
}

.experience-task-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.experience-task-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-body);
}

.task-bullet {
  width: var(--timeline-bullet-size);
  height: var(--timeline-bullet-size);
  background-color: var(--color-brand);
  border-radius: var(--radius-full);
  flex-shrink: 0;
  margin-top: var(--timeline-bullet-top);
}

/* ==========================================================================
   SECTION 3: KĨ NĂNG (CARD FORMAT WITH ICONS & PROGRESS BARS)
   ========================================================================== */

.skills-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--skill-grid-gap);
}

.skill-item-card {
  background-color: var(--skill-card-bg);
  border: var(--border-thin) solid var(--skill-card-border);
  border-radius: var(--skill-card-radius);
  padding: var(--skill-card-padding);
  display: flex;
  align-items: center;
  gap: var(--skill-card-gap);
  box-shadow: var(--skill-card-shadow);
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--skill-index, 0) * 0.04s);
}

.skills-grid:not(.is-animated) .skill-item-card {
  opacity: 0;
  transform: translateY(14px);
}

.skill-item-card:hover {
  transform: translateY(-2px);
  border-color: var(--skill-card-border-hover);
  box-shadow: var(--skill-card-shadow-hover);
}

.skill-card-icon {
  width: var(--skill-icon-size);
  height: var(--skill-icon-size);
  border-radius: var(--skill-icon-radius);
  background-color: var(--skill-icon-bg);
  color: var(--skill-icon-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.skill-item-card:hover .skill-card-icon {
  transform: scale(1.05);
}

.skill-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.skill-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  column-gap: var(--space-xs);
  row-gap: var(--space-3xs);
}

.skill-name {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
  line-height: var(--line-height-snug);
}

.skill-badges {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--skill-badge-gap);
}

.skill-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: var(--skill-badge-font-size);
  font-weight: var(--font-weight-medium);
  font-style: italic;
  color: var(--skill-badge-color);
  background-color: var(--skill-badge-bg);
  border: var(--border-thin) solid var(--skill-badge-border);
  border-radius: var(--skill-badge-radius);
  padding: var(--skill-badge-padding);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.skill-badge:hover {
  background-color: var(--skill-badge-bg-hover);
  color: var(--skill-badge-color-hover);
}

.skill-progress-track {
  width: 100%;
  height: var(--skill-track-height);
  background-color: var(--skill-track-bg);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}

.skill-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: var(--radius-full);
  background-image: var(--skill-fill-gradient);
  box-shadow: var(--skill-fill-glow);
  transition: width 1s cubic-bezier(0.16, 1, 0.3, 1), filter var(--transition-fast), box-shadow var(--transition-fast);
  transition-delay: calc(var(--skill-index, 0) * 0.04s);
}

.skill-item-card:hover .skill-progress-fill {
  filter: brightness(1.06);
}

.skills-grid.is-animated .skill-progress-fill {
  width: var(--skill-value);
}

/* ==========================================================================
   SECTION 4: HOẠT ĐỘNG CỘNG ĐỒNG
   ========================================================================== */

.community-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.community-card {
  background-color: var(--color-bg-box);
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  box-shadow: var(--shadow-job-card);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease, box-shadow var(--transition-fast);
}

.community-list:not(.is-animated) .community-card {
  opacity: 0;
  transform: translateY(18px);
}

.community-list.is-animated .community-card:nth-child(1) {
  transition-delay: 0.08s;
}

.community-list.is-animated .community-card:nth-child(2) {
  transition-delay: 0.2s;
}

.community-list.is-animated .community-card:nth-child(3) {
  transition-delay: 0.32s;
}

.community-card:hover {
  transform: translateY(var(--translate-hover));
  box-shadow: var(--shadow-job-card-hover);
}

.community-icon-box {
  width: var(--title-badge-size);
  height: var(--title-badge-size);
  border-radius: var(--radius-sm);
  background-color: var(--color-brand-light);
  color: var(--color-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.community-text {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-body);
  flex: 1;
}

/* ==========================================================================
   RESPONSIVE DESIGN BREAKPOINTS
   ========================================================================== */

@media (max-width: 1024px) {
  .bostami-layout-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xl);
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }

  .profile-sidebar {
    position: static;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
  }

  .dots-top {
    display: none;
  }
}

@media (max-width: 768px) {
  .bostami-page-wrapper {
    padding-left: var(--space-0);
    padding-right: var(--space-0);
    padding-top: var(--mobile-page-top-space);
    padding-bottom: var(--space-3xl);
    width: 100%;
    max-width: 100%;
  }

  .bostami-layout-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xl);
    width: 100%;
    max-width: 100%;
  }

  .profile-sidebar {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: var(--space-0);
    margin-right: var(--space-0);
    border-radius: var(--radius-2xl);
    border: var(--border-thin) solid var(--color-border-glass);
    padding: var(--space-xl) var(--space-lg) var(--space-2xl) var(--space-lg);
    box-shadow: var(--shadow-card);
  }

  .profile-avatar-wrap {
    width: var(--avatar-width-mobile);
    height: var(--avatar-height-mobile);
    margin-top: calc(var(--space-0) - var(--avatar-popout-mobile));
    margin-bottom: var(--space-md);
  }

  .cv-main-card {
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius-2xl);
    border: var(--border-thin) solid var(--color-border-glass);
    padding: var(--space-2xl) var(--space-lg);
    box-shadow: var(--shadow-card);
    min-width: 0;
  }

  .skills-grid {
    grid-template-columns: 1fr;
    gap: var(--skill-grid-gap);
  }

  .bostami-title-line {
    width: 60px;
  }

  /* Experience Timeline Spacing: Visual timeline dịch thoáng ra ngoài bên trái */
  .experience-timeline {
    padding-left: 42px;
  }

  .experience-timeline::before,
  .timeline-line-progress,
  .timeline-line-runner {
    left: 8px;
  }

  .timeline-node {
    left: calc(8px + (var(--timeline-line-width) / 2) - 42px - (var(--timeline-dot-size) / 2));
  }

  /* Nơi làm việc trên mobile */
  .exp-company-name {
    font-size: 1.1rem;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
  }

  /* Thời gian bé hơn, kích thước nhỏ gọn như 1 badge tag bổ sung (giữ nguyên màu sắc gốc #1e293b) */
  .exp-date-pill {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    padding: 0.2rem 0.6rem;
  }
}

@media (max-width: 480px) {
  .bostami-page-wrapper {
    padding-left: var(--space-0);
    padding-right: var(--space-0);
  }

  .profile-sidebar {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  .cv-main-card {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  .bostami-section-header {
    gap: var(--space-sm);
  }

  .bostami-title-line {
    display: none;
  }

  .experience-timeline {
    padding-left: 38px;
  }

  .experience-timeline::before,
  .timeline-line-progress,
  .timeline-line-runner {
    left: 6px;
  }

  .timeline-node {
    left: calc(6px + (var(--timeline-line-width) / 2) - 38px - (var(--timeline-dot-size) / 2));
  }

  .experience-header {
    flex-wrap: wrap;
    row-gap: var(--space-xs);
    column-gap: var(--exp-header-gap);
    align-items: center;
    padding: var(--space-md) var(--space-md);
  }

  .experience-header-text {
    flex: 1 1 var(--exp-header-min-w);
  }

  .exp-company-name {
    font-size: 1.08rem;
  }

  .exp-date-pill {
    font-size: 0.68rem;
    padding: 0.12rem 0.45rem;
    margin-left: calc(var(--icon-box-sm) + var(--exp-header-gap));
  }

  .experience-body {
    padding: var(--space-md) var(--space-md) var(--space-md) var(--space-lg);
  }

  .skill-item-card {
    padding: 0.75rem 0.95rem;
    gap: var(--space-sm);
  }

  .skill-card-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
  }
}

@media (prefers-reduced-motion: reduce) {
  .avatar-blob--right, .avatar-blob--left,
  .profile-sidebar {
    animation: none !important;
  }

  .bostami-section-header .section-title-badge,
  .bostami-section-header .bostami-title-line,
  .summary-text,
  .skill-item,
  .skill-item-card,
  .community-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .timeline-line-progress {
    height: 100% !important;
    transition: none !important;
  }

  .timeline-line-runner {
    display: none !important;
  }

  .experience-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .timeline-node {
    opacity: 1 !important;
    transform: scale(1) !important;
    transition: none !important;
  }

  .skill-progress-fill {
    width: var(--skill-value) !important;
    transition: none !important;
  }
}

@media print {
  .skill-progress-fill {
    width: var(--skill-value) !important;
  }
}