/* ============================================================
       DESIGN TOKENS & RESET
       ============================================================ */
    :root {
      --bg-dark:       #0A1622;
      --bg-header:     #0D1F2D;
      --bg-body:       #F8F9FA;
      --surface:       #FFFFFF;
      --text-primary:  #1F2937;
      --text-secondary:#6B7280;
      --text-light:    #E2E8F0;
      --gold:          #D4AF37;
      --border:        #E5E7EB;
      --accent-blue:   #1E3A8A;
      --accent-teal:   #0F766E;
      
      --radius-lg: 16px;
      --radius-md: 12px;
      --radius-sm: 8px;
      
      --shadow-card: 0 20px 40px rgba(0, 0, 0, 0.4);
      --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.05);
      
      --ease: 0.2s ease;
    }

    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
      background-color: var(--bg-dark);
      /* Tạo họa tiết lưới mờ cho nền */
      background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
      background-size: 40px 40px;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      /* padding: 40px 16px; */
      color: var(--text-primary);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }

    a { text-decoration: none; color: inherit; }
    img { display: block; max-width: 100%; }
    button { font-family: inherit; cursor: pointer; border: none; background: none; }

    /* ============================================================
       MAIN CARD
       ============================================================ */
    .card {
      width: 100%;
      max-width: 460px;
      background: var(--surface);
      /* border-radius: var(--radius-lg); */
      overflow: hidden;
      box-shadow: var(--shadow-card);
    }

    /* ============================================================
       HEADER (DARK BLUE)
       ============================================================ */
    .card-header {
      background: var(--bg-header);
      padding: 32px 24px 24px;
      text-align: center;
      position: relative;
    }

    /* Logo VSIP */
    .logo-container {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 12px;
    }
    
    .logo-placeholder {
      width: 80px;
      height: 32px;
      background: #ffffff;
      color: var(--bg-header);
      font-weight: 800;
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      letter-spacing: 1px;
    }

    .company-name {
      font-size: 13px;
      font-weight: bold;
      color: var(--text-light);
      letter-spacing: 0.5px;
      line-height: 1.4;
      max-width: 260px;
      margin: 0 auto;
    }

    .divider-gold {
      width: 100%;
    height: 1px;
    margin: 18px 0 20px;
    background: linear-gradient(90deg, transparent, #e8cf84, transparent);
    }

    .rule {
        width: 38px;
    height: 1px;
    margin: 12px auto;
    background: linear-gradient(90deg, transparent, #e8cf84, transparent);
    }

    /* Avatar */
    .avatar-wrapper {
      display: flex;
      justify-content: center;
      margin-bottom: 16px;
    }

    .avatar {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      border: 3px solid var(--gold);
      object-fit: cover;
      background: #cbd5e1;
    }

    .profile-name {
      font-size: 24px;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 4px;
    }

    .profile-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--gold);
      margin-bottom: 2px;
    }

    .profile-dept {
      font-size: 13px;
      color: var(--text-light);
      opacity: 0.8;
    }

    /* ============================================================
       BODY (LIGHT GRAY)
       ============================================================ */
    .card-body {
      background: var(--bg-body);
      padding: 24px;
    }

    .section-title {
      font-size: 11px;
      font-weight: 700;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 12px;
    }

    /* --- Contact List --- */
    .contact-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 20px;
    }

    .contact-top-row {
      display: flex;
      gap: 12px;
    }

    .contact-phones {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .qr-code-box {
      width: 100px;
      height: 100px;
      background: #ffffff;
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .qr-code-box img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .contact-item {
      display: flex;
      align-items: center;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 10px 14px;
      transition: box-shadow var(--ease), transform var(--ease);
    }

    .contact-item:hover {
      box-shadow: var(--shadow-sm);
      transform: translateY(-1px);
    }

    .contact-icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
      flex-shrink: 0;
    }

    .contact-icon svg {
      width: 18px;
      height: 18px;
    }

    .contact-icon.phone  { background: #E0F2FE; color: #0284C7; }
    .contact-icon.zalo   { background: #E0F2FE; color: #0068FF; }
    .contact-icon.email  { background: #FEF3C7; color: #D97706; }

    .contact-info {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .contact-label {
      font-size: 11px;
      color: var(--text-secondary);
      font-weight: 500;
    }

    .contact-value {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
    }

    .chevron {
      color: #9CA3AF;
      display: flex;
      align-items: center;
    }

    .chevron svg {
      width: 16px;
      height: 16px;
    }

    /* --- Primary Button --- */
    .btn-primary {
      width: 100%;
      padding: 14px;
      border-radius: var(--radius-md);
      background: linear-gradient(135deg, var(--accent-blue), var(--accent-teal));
      color: #ffffff;
      font-size: 14px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-bottom: 24px;
      transition: opacity var(--ease);
    }

    .btn-primary:hover {
      opacity: 0.9;
    }

    .btn-primary svg {
      width: 18px;
      height: 18px;
    }

    /* --- Office List --- */
    .office-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 24px;
    }

    .office-item {
      display: flex;
      align-items: flex-start;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 14px;
      gap: 12px;
    }

    .office-icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .office-icon svg {
      width: 18px;
      height: 18px;
    }

    .office-icon.pin   { background: #FEE2E2; color: #DC2626; }
    .office-icon.mail  { background: #E0F2FE; color: #0284C7; }

    .office-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .office-label {
      font-size: 11px;
      color: #3B82F6;
      font-weight: 600;
    }

    .office-address {
      font-size: 13px;
      color: var(--text-primary);
      line-height: 1.4;
    }

    /* --- Outline Button --- */
    .btn-outline {
      width: 100%;
      padding: 14px;
      border-radius: var(--radius-md);
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text-primary);
      font-size: 14px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: background var(--ease), border-color var(--ease);
    }

    .btn-outline:hover {
      background: #F3F4F6;
      border-color: #D1D5DB;
    }

    .btn-outline svg {
      width: 18px;
      height: 18px;
      color: var(--text-secondary);
    }

    /* ============================================================
       RESPONSIVE
       ============================================================ */
    @media (max-width: 400px) {
      .card-body { padding: 16px; }
      .contact-top-row { flex-direction: column; }
      .qr-code-box { width: 100%; height: 120px; }
    }